<address id="ttjl9"></address>

      <noframes id="ttjl9"><address id="ttjl9"><nobr id="ttjl9"></nobr></address>
      <form id="ttjl9"></form>
        <em id="ttjl9"><span id="ttjl9"></span></em>
        <address id="ttjl9"></address>

          <noframes id="ttjl9"><form id="ttjl9"></form>

          首頁

          如何合理使用大標題設計風格?

          純純

          一、什么是大標題設計風格?


          大標題導航欄是從iOS11發布后,開始在中國的UI設計師中急速流行的一種設計風格。其實這種風格最早在2016年就在硅谷盛行了起來,源自一位叫Michael Horton的設計師發表的一篇《Complexion Reduction: A New Trend In Mobile Design 》的文章,這篇文章提到的Complexion Reduction這種設計風格(下文簡稱CR)就是大標題導航欄的起源,即大、黑、粗的標題。

           

          CR這種風格有四個明顯的特征:

           

          1.刪除多余的顏色;

          2.又大、又黑、又粗的標題;

          3.簡單、可識別的圖標,也不要使用顏色(常用黑灰色);

          4.留白留白留白,更多的留白。

           

          下圖是比較典型的使用CR風格的APP(分別是愛彼迎、ENJOY、火球買手、MOO音樂),大家可以結合CR風格的4大特征感受一下:

           不知道小伙伴們有沒有發現,這幾個APP的功能會比較單一或是某一垂直領域,且視覺上都給人一種高品質,超極簡的感覺,人們會更多的關注界面中內容本身,對內容的要求也會更高。



          二、中西方的差異


          那么問題來了,為什么這種CR風格鮮少出現在中國特有的淘寶類電商APP中呢?

           

          國外的APP大都是小而精致的,一般一個APP只能做一件事,功能比較單一,而國內的淘寶類電商APP,攜程類的綜合旅游APP所包含的業務與功能都非常廣泛,在狹小的手機屏幕上展示更多的商品就顯得尤其重要,CR風格提倡的大標題大留白無疑不是在挑戰老板的底線。

           

          實際上即便使用大標題風格也不要盲目采用iOS11官方的大標題導航,其原因在于中英文的差異。

           

          英文大標題一個單詞有大小寫的變化,富有一定的層級變化,而中文如果使用iOS11給定的68px(二倍圖下)的字號,那真是大到閃瞎我的眼。中文一個詞語每一個字都是差不多的大小,沒有層級上的變化,太大的字體在整個界面中看起來會很奇怪,如下圖:



          三、合理使用大標題


          雖說iOS11那么大的標題不適合大部分的APP,但并不是說大標題風格就不適合大部分APP了,實際上目前大多數的APP依然使用了大標題的風格,不過進行了一定的改良。

          以下參考尺寸均是二倍圖下的尺寸


          1.大標題導航欄


          大標題導航欄大致有兩種樣式,一種是延用iOS11的大標題導航欄,一種是稍微改良使用的大標題導航欄。


          1)iOS11大大大標題導航欄


          iOS11的大標題導航欄標題字號約為68px、欄高192px(二倍圖),大標題對齊導航欄左邊,頁面滑動時轉換為常規的導航欄。

           

          國內使用這種大大大標題的APP比較少,標題文字實在太大,若只作為導航標題占位,會極其浪費屏幕空間。

           

          使用這種大大大標題時,導航標題一般都有一定的意義,如下圖:

          餓了么的訂單頁詳情頁使用了這種大大大標題,但是標題賦予了訂單狀態的意義,比起單純的“訂單詳情”,這樣有一定意義的標題文字則可考慮使用iOS11的大大大標題。


          2)改良大標題導航欄

          某些APP在使用大標題導航欄時,在iOS11的大標題導航欄上進行了一定的改良,最常見的就是一定程度縮小了標題的字號,如下圖:

          這三個APP的標題字號都沒有到68px,常用40px~48px的字號,陌陌與天貓是固定在頂部導航欄的,而Kepp會隨頁面上滑變為常規標題導航。

           

          一般這種固定的較大標題都會隱去導航欄的分割線,顯得導航欄更高,更有呼吸感。像是天貓的大標題導航欄使用的色塊,與下方模塊又比較近,就顯得很擁擠。



          2.Tab欄大標題

          Tab欄的文字標題切換樣式最常見的就是顏色變化,加小短線等,隨著大標題風格的流行,Tab欄的切換樣式也出現了大標題的選中樣式,選中字號通常采用40~48px(甚至更大,如蝦米音樂的72px),而非選中標題通常則是采用的28~32px,如下圖:

          使用這樣的Tab欄,能夠迅速幫助用戶辨識自己所在的位置,就差指著自己說“這兒”了。需要注意的是一個屏幕內盡量只在一級Tab使用大標題切換,與二級Tab做出區分。



          3.模塊化大標題

          大標題的風格除了應用在界面頂部導航,在模塊化標題上應用的也非常多,有些APP即便頂部導航不使用大標題,卻會在模塊化標題上使用較大的字號,如下圖:

          這種模塊化大標題常配合留白分割的界面使用(這也符合了CR風格的特征),模塊化大標題在留白分割的界面上能夠更好地幫助上下模塊做到層級區分的作用。



          4.文字變大變粗變黑

          拋開大標題不談,不知大家有沒有發現,現在越來越多的APP的內容標題、正文內容的字體也在逐漸變得更黑更粗,甚至更大,畢竟我們的手機變得越來越大了。如下圖:

          即便是擁有復雜業務的淘寶與飛豬,在某些內容標題上也變得更粗更黑,一眼看過去用戶能更容易找到自己想看的內容。


          四、劃重點


          · 大標題設計風格源自Complexion Reduction這種設計風格,CR這種風格的特征就在于顏色少、標題大黑粗、圖標通用簡單、大留白;


          · 由于中英文字體的差異,中文使用超大字號沒有英文富有變化;


          · 合理使用大標題,做一些適當的改良。常見用于導航欄、一級Tab選中標題、模塊化大標題以及內容標題。

          原文地址:站酷    作者:人類君


          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          截屏2021-05-13 上午11.41.03.png

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 平面設計服務、

          UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司



          用戶心理定律及優秀案例分析

          純純

          將普遍存在的人性用戶心理規律運用于設計,增加設計的溫度。

          近來對用戶心理比較感興趣,去看相關設計資料的時候發現相關內容重復性較高,多方搜集資料結合自己的一些分析總結出一篇補充。

          定律是鑰匙,在遇到讓我們上癮,持續付出或獲得情感的APP,多去想一想它背后洞察了哪些人性及心理,能不能為我們的后續的設計吸收。










          undefined

          undefined

          undefined

          undefined

          undefined



          原文地址:站酷    作者:唐小蔥


          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          截屏2021-05-13 上午11.41.03.png

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 平面設計服務、

          UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司


          什么是數據可視化

          seo達人


          01. 什么是數據可視化?

          數據可視化即數據的圖形表示,旨在以更易于掌握和理解的有效方式傳達大量海量數據。從某種意義上說,數據可視化是原始數據和圖形元素之間的映射,它決定了這些元素的屬性如何變化??梢暬ǔJ峭ㄟ^使用圖表,折線或點,條形圖和地圖來進行的。

          • Data Viz是描述性統計的一個分支,但它需要設計,計算機和統計技能。
          • 美學和功能齊頭并進,以直觀的方式傳達復雜的統計信息。
          • Data Viz工具和技術對于做出以數據為依據的決策至關重要。
          • 在形式和功能之間取得了很好的平衡。
          • 每個STEM領域都將從了解數據中受益。

          Jorge Rey的化石燃料Dataviz

           

          02. 它是如何工作的?

          如果我們能看到它,我們的大腦就可以內在化并對其進行反思。這就是為什么理解圖表和查看趨勢比閱讀大量的文檔要花費大量時間和精力進行合理化更容易和有效的原因。我們不想重復人類是視覺生物的陳詞濫調,但這是事實,可視化更加有效和全面。

          在某種程度上,我們可以說數據Viz是講故事的一種形式,目的是幫助我們根據數據做出決策。這些數據可能包括:

          • 追蹤銷售
          • 識別趨勢
          • 識別變化
          • 監控目標
          • 監測結果
          • 合并數據

          秘密7 –塞爾吉奧·費爾南德斯(Sergio Fernandez)提出離婚可視化的理由

           

          03. 什么時候使用?

          數據可視化對于每天處理大量數據的公司很有用。必須立即顯示您的數據和趨勢。勝過瀏覽龐大的電子表格。當趨勢立即脫穎而出時,這也可以幫助您的客戶或觀看者理解它們,而不會迷失在混亂的數字中。

          話雖如此,Data Viz適用于:

          • 年度報告
          • 簡報
          • 社交媒體微敘事
          • 信息手冊
          • 研究
          • 趨勢販運
          • SciViz
          • 燭臺圖,用于財務分析
          • 確定路線

           

          可以看到數據可視化的常見情況是在銷售和營銷,醫療保健,科學,金融,政治和物流中。

          娜塔莉·祖伊娃(Natalie Zuieva)的租金和薪金統計信息圖

           

          04. 為什么要使用它?

          簡短的答案:決策。數據可視化具有快速識別模式和解釋數據的不可否認的好處。更具體地說,它是確定以下情況的寶貴工具。

          • 識別變量關系之間的相關性。
          • 獲得有關受眾行為的市場見解。
          • 確定價值與風險指標。
          • 隨時間監視趨勢。
          • 通過頻率檢查速率和潛力。
          • 應對變化的能力。

          太空垃圾-BBC科學焦點,作者:Federica Fragapane

           

          05. 數據可視化類型

          您可能已經猜到了,Data Viz不僅僅是簡單的餅圖和圖形,而且還具有視覺吸引力。該分支用于可視化統計信息的方法包括一系列有效類型。

           

          地圖

          地圖可視化是一種很好的方法,可以分析和顯示與地理位置相關的信息,并通過地圖準確地將其呈現出來。這種直觀的方法旨在按區域分布數據。由于地圖可以是2D或3D(靜態或動態),因此可以使用多種組合來創建Data Viz地圖。

          COVID-19支出數據可視化POGO,George Railean

           

          但是,最常見的是:

          • 區域地圖:顯示國家,城市或地區的經典地圖。對于每個區域中的不同特征,它們通常以不同的顏色表示數據。
          • 線圖:它們通常包含空間和時間,由于對特定場景進行了分析,因此通常是路線選擇的理想選擇,尤其是該地區的駕車或出租車路線。
          • 點地圖:這些地圖分發地理信息的數據。它們是企業確定區域中建筑物確切位置的理想選擇。
          • 熱圖:它們根據特定屬性指示地理區域的權重。例如,熱圖可以按區域分布感染者的飽和度。

           

          圖表

          圖表以圖形,圖表和表格的形式顯示數據。由于圖形確實是圖表的子類別,因此它們經常與圖形混淆。但是,兩者之間的差別很?。簣D形顯示數據組之間的數學關系,并且僅是表示數據的統計圖方法之一。

          圖表數據可視化,作者:Madeline VanRemmen

           

          順便說一句,讓我們談談數據可視化中最基本的圖表類型。

          條狀圖

          他們使用一系列的條形圖來說明數據。它們是較輕量數據的理想選擇,并遵循不超過三個變量的趨勢,否則,條形變得混亂且難以理解。

           

          餅狀圖

          這些熟悉的圓形圖按部分劃分數據。切片越大,部分越大。它們非常適合描述整體的各個部分,它們的總和必須始終為100%。當您需要顯示一段時間內的數據發展或缺少任何部分的價值時,請避免使用餅圖。甜甜圈圖與餅圖具有相同的用途。

           

          線形圖

          他們使用一條線或多條線來顯示隨著時間的發展。它允許同時跟蹤多個變量。一個很好的例子是跟蹤品牌多年來的產品銷售情況。面積圖與折線圖具有相同的用途。

           

          散點圖

          這些圖表使您可以通過數據可視化查看模式。它們有兩個不同值的x軸和y軸。例如,如果您的x軸包含有關汽車價格的信息,而y軸包含有關薪水的信息,則正向或負向關系將告訴您某人的汽車所反映的薪水。

           

          表格

          與我們剛剛討論過的圖表不同,表格幾乎以原始格式顯示數據。當您的數據難以以視覺方式呈現,并且旨在顯示應該閱讀而不是可視化的特定數值數據時,它們是理想的選擇。

          數據可視化| Aishwarya Anand Singh的養蜂與否


          例如,圖表非常適合顯示特定區域內一段時間內特定疾病的數據,但是當您還需要了解具體原因(例如原因,結果,復發,治療時間和治療方法)時,最好使用表格。

           

          06. 數據可視化與信息圖表

          5個主要差異

          它們并沒有什么不同,因為它們在視覺上都代表數據。通常,您搜索信息圖表并找到標題為“數據可視化”的圖像,反之亦然。但是,在許多情況下,這些標題都不會引起誤解。這是為什么?

          1. 數據可視化僅由一個元素組成。它可以是地圖,圖表或表格。另一方面,信息圖表通常包含多個Data Viz元素。
          2. 與可能簡單或極其復雜且繁重的數據可視化不同,信息圖表簡單易行,并且面向更廣泛的受眾。即使對于信息圖表代表的研究領域之外的人,后者通常也是可以理解的。
          3. 有趣的是,數據Viz不提供敘述和結論,而是提供這些敘述和結論的工具和基礎。雖然信息圖表在大多數情況下提供了故事和敘述。例如,數據可視化地圖的標題可能是“按區域劃分的空氣污染飽和度”,而帶有相同數據的信息圖則顯示為“ A區和B區在C國污染最嚴重”。
          4. 數據可視化可以在Excel中進行,也可以使用其他自動生成設計的工具,除非將其設置為演示或發布。但是,信息圖表的美學非常重要,其設計必須吸引更廣泛的受眾。
          5. 在交互方面,數據可視化通常提供交互式圖表,尤其是在線形式的圖表。另一方面,信息圖表很少互動,通常是靜態圖像。

          Skype通過可視化.com進行可視化

           

          07. 如何創建有效的數據可視化?

          5種有用的技巧

          該過程自然類似于創建信息圖表,并且圍繞了解您的數據和受眾。更準確地說,這些是準備有效的數據可視化以使您的查看者立即了解的主要步驟和最佳實踐。

           

          1.做功課

          準備工作已經完成了一半。在甚至開始可視化數據之前,必須確保您了解該數據的最后細節。

          不可否認的是,了解您的數據查看對象是另一個重要部分,因為不同的人對信息的處理方式不同。您要為數據可視化的對象是誰?他們如何處理視覺數據?只需給他們一張餅圖就足夠了,否則您將需要更深入的可視化報告?

          您正在可視化什么樣的信息,它能反映出您的目標嗎?

          最后,考慮要使用多少數據并加以考慮。

          圖片來自Brodie Vissers

           

          2.選擇正確的圖表類型

          在上一節中,我們列出了可在數據可視化中使用的基本圖表類型。要確定最適合您工作的人,需要考慮的因素很少。

          • 圖表中將有多少個變量?
          • 您將為每個變量放置幾項?
          • 值之間的關系是什么(時間段,比較,分布等)

          話雖如此,如果您需要展示整個項目的各個部分,那么餅圖將是理想的選擇。例如,您可以使用它來展示特定產品的市場份額的百分比。但是,餅圖不適用于時間范圍內的分布,比較和跟蹤趨勢。在這些情況下,條形圖,散點圖,s和折線圖更為有效。

          另一個示例是如何在圖表中使用時間。使用水平軸會更準確,因為時間應該從左到右。它在視覺上更直觀。

          Oberhaeuser的MagnaGlobal廣告市場海報

           

          3.對數據進行排序

          首先刪除所有不會增加價值并且基本上是圖表多余的數據。有時,您必須處理大量數據,這不可避免地會使您的圖表變得非常復雜且難以閱讀。不要猶豫,將您的信息分成兩個或多個圖表。如果這對您不起作用,則可以使用突出顯示或使用更合適的內容更改整個圖表類型。

          提示:使用條形圖和柱形圖進行比較時,請按值(而不是字母順序)以升序或降序對信息進行排序。

          圖片由薩曼莎·赫爾利(Samantha Hurley)

           

          4.利用顏色發揮自己的優勢

          在每種可視化形式中,顏色都是您最好的朋友和最強大的工具。它們產生對比,重音,強調并直觀地引導眼睛。即使在這里,色彩理論也很重要。

          設計圖表時,請確保不要使用超過5或6種顏色。除此之外,任何其他操作都將使您的圖表不堪重負,并且難以為觀眾閱讀。但是,您可以使用顏色強度來發揮自己的優勢。例如,當您在不同的時間段內比較同一概念時,可以將數據從所選顏色的最淺陰影到其較深的顏色進行排序。它會創建適合您時間線的強烈視覺效果。

          選擇顏色時要考慮的事項:

          • 不同類別的顏色不同。
          • 系列中所有圖表的采用一致調色板,方便以后將進行比較。
          • 最好使用對色盲友好的調色板。

          Jamie Kettle可視化塑料廢物污染數據

           

          5.獲取靈感

          當您想成為數據可視化設計中的佼佼者時,請多多發揮自己的靈感。查看優秀的示例、信息圖、其他人的工作,并了解哪種方法最適合您需要實現的每種數據。

          下圖這個Twitter帳戶數據可視化是一個很好的例子。同時,我們還將精選一些令人稱贊的示例,這些示例將使您有信心開始為數據創建視覺效果。

          lilit Hayrapetyan創作的大數據紀錄片的人臉

           

          8個數據可視化示例

          作為另一種藝術形式,Data Viz為一些令人驚嘆的精心設計的圖表提供了沃土,這些圖表證明了數據也可以是美麗的?,F在,讓我們來看看一些例子。

           

          1.黑暗之魂III體驗數據

          我們從孟小偉的個人項目開始,介紹他玩《黑暗之魂3》的經驗。這是信息圖表和數據可視化也是個人設計工具的完美例子。這項研究非常龐大,但非常專業地歸類為針對不同概念的不同類型的圖表。所有數據可視化都使用相同的調色板進行制作,并且在信息圖表中看起來很棒。

          我的黑暗之魂3孟小偉在播放數據

           

          2.有史以來最偉大的電影

          凱蒂·西爾弗(Katie Silver)根據評論家和觀眾的評論匯總了有史以來最偉大的100部電影??梢暬@示了每部電影的關鍵數據點,例如發行年份、奧斯卡提名和獲勝、預算、利潤、IMDB得分、類型、拍攝地點、電影背景和制作工作室。所有電影均按發行日期排序。

          凱蒂·西爾弗(Katie Silver)的100部最佳電影數據可視化

           

          3.最暴力的城市

          費德里卡·弗拉加帕內(Federica Fragapane)顯示了2017年全球50個最暴力城市的數據。這些項目根據人口在垂直軸上排列,并根據兇殺率在水平軸上排序。

           

          4.家族企業作為數據

          這些數據可視化和插圖由Valerio Pellegrini為《透視》雜志制作。它們顯示了一個餅圖,其中包含行業細分以及對就業貢獻的散點圖。

          視角雜志–家族企業by Valerio Pellegrini

           

          5.太陽系的軌道圖

          該地圖顯示了太陽系中18000多個小行星的軌道數據。每個小行星都顯示在1999年除夕的位置,并按小行星的類型進行了著色。

          埃莉諾·盧茲(Eleanor Lutz)的太陽系軌道圖

           

          6.標題的語義

          KatjaFlükiger對頭條新聞的故事情有獨鐘。數據可視化旨在傳達銷售對算術的影響程度。該項目在馬里蘭大學藝術學院完成,目的是可視化對移民的引用,并對用詞選擇和上下文所暗含的價值判斷進行顏色編碼。

          標題語義學KatjaFlükiger

           

          7.月球和地震

          該數據可視化用于回答月球是否引起地震。該圖顯示了根據月球的相位和軌道位置而發生的地震的時間和強度。

          月亮與地震艾西瓦婭·阿南德·辛格(Aishwarya Anand Singh)

           

          8. Nanosats的黎明

          可視化效果顯示了從2003年到2015年發射的衛星。該圖表示了專注于項目的機構類型以及為其提供資金的國家。左側顯示了每年的發射次數和衛星應用次數。

          有線英國–由Nanosats拍攝的黎明(Valerio Pellegrini)

           

          最后的話

          數據可視化不僅是一種科學形式,而且還是一種藝術形式。其目的是幫助任何領域的企業快速理解復雜數據,并開始根據該數據做出決策。為了使您的圖表高效且易于閱讀,這一切都與了解您的數據和受眾有關。這樣,您就可以選擇正確的圖表類型,并使用可視化技術來發揮自己的優勢。

           

          原文地址:https://graphicmama.com/blog/what-is-data-visualization/

          譯文地址:站酷

          作者:AI Boicheva

          譯者:ZZiUP

           轉載請注明:學UI網》什么是數據可視化

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          截屏2021-05-13 上午11.41.03.png

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 平面設計服務、

          UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司


          如何做B端體驗標準化:以數據可視化場景為例

          seo達人


          圖片

          業務背景

          以我們 CCO 體驗設計團隊為例,主要服務阿里體系的消費者、商家、經濟體等業務領域。隨著業務不斷擴大、用戶角色多、體驗復雜、設計師人力有限、定制化需求不斷增加,設計面臨嚴峻挑戰。

          1、業務多:30多個產品應用

          2、角色多:覆蓋消費者、客服小二、服務管理、業務運營、中臺管理、客戶  6大類用戶群體。

          3、體驗復雜:設計師需兼顧用戶和客戶兩個視角。

          圖片

          從組織上,85% 設計師縱向支撐業務,15% 設計師橫向做標準化,反哺業務設計師。標準化實質解決的問題是保障基礎體驗一致性。

          圖片

           

          圖片

          標準化怎么做

          核心通過頁面梳理、抽象、分發、衡量,保障基礎體驗一致性。

          圖片

           

          圖片

          案例實戰

          以數據可視化場景為例,講述如何做標準化。

          1、業務現狀

          共有11個應用,涉及89個頁面。

          圖片

          2、問題

          體驗不一致:各個工作臺頁面架構、組件、樣式野蠻生長,缺少規范導致體驗不統一。

          低效:部分場景缺失,組件重復建設,大量定制;溝通協同內耗大,成本高。

          圖片

          3、策略

          體驗統一:框架、組件、樣式。

          提效:代碼化、工具、交付機制。

          4、體驗統一

          包括框架、組件、樣式。

          圖片

          框架

          (1) 現有頁面收集

          圖片

          (2) 用戶場景分析

          圖片

          (3) 頁面歸類

          結合用戶看數內容(例:概覽、分析、詳情)和交互形態(例:平鋪、下鉆),對頁面進行歸類。

          圖片

          (4) 確定典型布局

          通過統計高頻復用形態,確定典型布局。

          圖片

          組件

          (1) 頁面結構分析

          組件的收斂,需要先對頁面分析,確定模塊層內容。例:模塊包含頁頭、篩選、圖表、表格。

          圖片

          (2) 模塊層分類

          橫向收集全部業務,將模塊層分類。細分模塊擴展形態,放到對應的簍子里。

          圖片

          (3) 模塊專項治理

          接下來,需要對每一個模塊進行專項治理。比如圖表模塊,再拆再抽象成指標、圖表、單選、多選 4類場景。場景里再對主體和變體(也就是擴展形態)分類。

          圖片

          圖片

          樣式

          (1) 確定優化內容

          圍繞視覺凌亂,要做的便是完善設計語言。設計師需要結合自身技術底層,補充缺失規范。例如布局、色板、字體、動效。

          圖片

          (2) 確定組件范圍

          通過統計高頻復用組件,確定需要梳理的組件范圍。

          圖片

          (3) 布局

          圖例位置:線上有9種,通過從業務場景按閱讀順序劃分,最終收斂成2種。

          圖片

          組件高度:真實線上情況,只能看2個指標,高度規范缺失。

          圖片

          需要根據用戶分辨率調研,提煉典型分辨率。比如用戶是win系統,包含菜單欄、任務欄等默認高度,再減去本身頁面頁頭等默認高度,得到 3 檔。確定組件建議默認行高 240px。

          圖片

          軸標簽旋轉角度:現狀有順/逆時針兩種,通過分析標簽類型,結合閱讀順序、軸與標簽親密度,確定默認角度為順時針。

          圖片

          (4) 色板

          通過場景梳理,確定不同組件使用的色板類型及缺失色板。

          圖片

          補充語義色板:從業務里抽象2類場景,指標和柱/餅/環場景,定義顏色。例如帶正面語義,用綠色,比如升、已到崗、正常。帶負面語義,用紅色,比如降、曠工、失敗。

          圖片

          (5) 字體

          結合自身業務場景問題,從場景、版權、風格、識別、極值共5個維度選擇字體。

          圖片

          舉例場景一,縱向數據場景里,將市面上數據競品用到的字體都橫向鋪開嘗試,做排除法。比如din沒版權,蘋方非等寬字體,普惠102識別性弱。

          圖片

          舉例場景二,在核心數據呈現中,helvetica 品牌風格弱,普惠在1億以上極值過寬。

          圖片

          最終我們根據自身業務場景特征,用普惠和普惠102,運用在對應場景里。并同前端提煉規則。

          圖片

          (6) 動效

          首先,需要確定動效價值,明確動效需要解決的問題。這里圍繞舒適度、活力、層級、反饋來講。

          圖片

          通過動效場景鏈路分析,確定優化范圍。

          圖片

          加載動效:圍繞讓用戶認知過程更為自然。通過組件橫向梳理、抽象圖形、組合樣式的思路,輸出方案。比如這里共梳理17種組件類型,抽象成9類,包括點、線、面、餅、環、柱、文本、圖標、詞云,再進行組合產出方案。

          圖片

          出場動效:通過業務分析、提煉場景、優化效果。比如這里共提煉 3類場景,有通用、監控、輿情。圍繞過渡不自然、卡頓、缺少情感化表達來優化效果。

          圖片

          圖片

          瀏覽動效:通過提煉場景,來強化元素之間的層級與空間關系。比如單個組件、聯動、下鉆場景下,圍繞點擊感知弱、重點不突出、缺少懸停態來優化效果。

          圖片

          沉淀速度參數:將優化動效場景的速度參數,同前端約定規則沉淀組件庫。

          圖片

          5、提效

          包含代碼化提效、工具提效、機制提效。

          圖片

          整體思路

          從設計組內到技術產研的提效過程。

          提效面向用戶依次是:組件設計師、業務設計師、前端、產品。

          搭建目前還在進行中,這里主要從交付-工具-代碼化來分析。

          圖片

          交付內容

          1、業務設計師:sketch/figma物料 (樣式、組件、區塊、模板、規則 )

          2、業務設計師:kitchen工具(樣式、組件、區塊、模板)

          3、組件工程師:組件規范/組件官網

          圖片

          交付機制

          新需求:通過評估復用性、抽象、內審、沉淀物料。

          現有業務:通過頁面梳理歸類、抽象、內審、沉淀物料。

          圖片

          6、衡量

          從物理到行為層,包括樣式、組件、框架、組件交互 共4個維度。通過一致性評分衡量標準化覆蓋的好壞。

          圖片

           

          圖片

          總結

          回歸課程,在B類業務里,服務多個產品、多用戶角色、體驗復雜的場景下,在定制化+標準化團隊陣型里,標準化實質解決的問題是保障60分基礎體驗一致性。

          圖片

          總結:B端體驗標準化包括物料的產出、交付以及衡量標準。

          產出:包括框架、組件、樣式的收斂來梳理、抽象頁面。

          交付:面向2類用戶群體,業務設計,需交付物料和工具。組件工程師,代碼化需提供組件規范,組件線上化需助力組件官網的建設。

          衡量:一致性評分包括樣式、組件、框架及組件交互。

          圖片

           

          原文地址:AlibabaDesign (公眾號)

          作者:CCO 設計

          轉載請注明:學UI網》如何做B端體驗標準化:以數據可視化場景為例

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          截屏2021-05-13 上午11.41.03.png

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、

          UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司


          插畫在 UI 場景中的趨勢化探索

          seo達人


          一、呈現獨具一格的 Banner 設計

          插畫運用到 Banner 設計中非常普及,不僅可以帶來個性化的視覺風格,也可以避免運用圖片帶來的版權風險。因為插畫有著豐富多樣的風格,運用到設計中也會呈現風格多樣的效果,插畫也比較容易統一視覺規范,很多成熟的設計團隊都會制定插畫規范系統,滿足項目各類場景的運用。

          作為視覺設計師來說掌握插畫的能力已經成為基本崗位需求,很多公司對于 UI 設計師也有同樣要求,這也是提高產品設計視覺感的一個方向。

           

          二、突出圖標設計的風格差異

          隨著用戶對于感官體驗的升級,圖標風格特征的差異化體驗至關重要,而插畫風格的融入可以提升圖標設計的特征感。

          插畫風格運用到圖標設計中,需要做簡化處理,可以是插畫的局部元素或者簡化后的小場景插畫。風格多樣的插畫風格也會延續到圖標中,不僅可以使得圖標具備差異化的視覺效果,也能烘托出整體設計的質量。

          圖片

           

          三、強化區域背景的風格感

          插畫可以作為欄目區域背景來使用,以此增加該欄目的風格感和視覺感。相較于攝影圖片來說,插畫具備風格特征,可控性較強,能夠滿足更多氛圍感的營造。

           

          四、突出個人中心的情感化

          個人中心的設計之前大部分采用單調的白色或者品牌色作為背景,近些年一些產品開始使用插畫背景來增強情感化設計。有的產品還根據天氣變化、節日主題、白天/夜間等場景設計不同的插畫風格,帶來的視覺感較強,也能吸引用戶的關注度,提高用戶對產品的感官體驗。

           

          五、強化空狀態的情感化設計

          空狀態由單純的文字提示演變到圖文結合,感官層面越來越被重視。利用圖形結合、IP 形象結合、小場景插畫結合等,還有結合動效設計的案例,帶來的設計體驗感也是非常不錯的。

          圖片

           

          六、瓷片區的視覺感強化

          插畫風格被運用到視覺表現層面案例較多,特別是在瓷片區的發揮,呈現出了風格多樣的優秀案例??梢允褂萌珗鼍安瀹嬜鳛楸尘霸O計,也可以使用小場景插畫作為局部強化,還有使用部分插畫元素作為點綴設計,視覺表現力豐富多樣。

          圖片

           

          七、活動封面設計體現統一感

          將插畫形式作為活動或者服務欄目的封面設計,相較于其他形式來說風格統一性更強,也能更好的進行設計延展。就算使用不同風格的插畫來進行封面設計,只要在配色風格上面把控好,也能做到有效的視覺感統一,對于設計師來說把控性很強。

          圖片

           

          八、增強專題活動頭部視覺感

          插畫形式運用到專題頁設計中案例非常多,相較于合成圖片來說,插畫的風格感和駕馭度更靈活。插畫形式帶來的情感化體驗更佳,通常被運用到專題頁頭部區域來增強視覺感,也有延伸到整個背景層設計中的案例。

          根據特定活動主題創作插畫對于設計師來說更容易,找到符合主題的攝影圖片是很難的,自己拍攝成本又會比較大,插畫形式是最經濟實用的設計解決方案。

           

          九、插畫形式提高欄目品質感

          插畫形式可以作為一些代表成就感的配圖設計,以此來提高該欄目的品質感。比如在打卡點亮城市成就的設計中,不同城市的郵票采用插畫形式來表達,不僅可以展示出各城市的風格,也能做到視覺風格的統一。精美的插畫提高了品質感,吸引了用戶的參與度,帶來的感官體驗也是非常棒的。

          圖片

           

          十、體現主題化的風格感

          在主界面的設計中,不僅要體現出功能的操作體驗,也要通過視覺的強化來吸引用戶的關注度。一些產品在主界面設計中以插畫作為背景來強化,結合動態的表達趣味性更佳,帶來的關注度也是不錯的。插畫形式結合到功能模塊中,帶給用戶情感共鳴和操作的體驗度。

           

          十一、插畫形式的引導頁設計

          插畫被運用到引導頁設計中是相當普及的,也是非常有利于進行設計發揮的。插畫元素表達的可控性可以滿足引導頁主題創意的需求,通常以輪廓束縛為主,滿屏插畫較少?;诮裹c和輪廓造型進行插畫元素裝飾,對于插畫基礎薄弱的設計師更易上手。

           

          十二、插畫形式的閃屏設計

          閃屏和啟動頁采用插畫的形式也是可取的,啟動頁設計通常和引導頁表現類似,不過運用品牌展示的相對多一些。

          閃屏分為廣告形式和主題展示形式,閃屏廣告形式比較多,插畫結合也是在廣告活動中的發揮。一些節慶主題和特殊紀念日活動,也會以精美插畫的形式表達,更容易表達主題和與用戶產生共鳴感。

           

          小結

          插畫作為設計師需要掌握的基礎技能,被逐步運用到各類設計場景中,也影響了 UI 設計的趨勢走向。隨著產品設計感官體驗的不斷升級,風格化和差異化的設計才能滿足更多用戶的感官需求,而風格多樣的插畫形式首當其沖。

          希望這些插畫結合 UI 場景的案例可以作為拋磚引玉,讓大家重視插畫在 UI 設計中的表現力,不斷加強并掌握插畫設計的能力。

           

          原文地址:黑馬家族(公眾號)

          作者:黑馬青年

          轉載請注明:學UI網》插畫在 UI 場景中的趨勢化探索

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          截屏2021-05-13 上午11.41.03.png

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 平面設計服務、

          UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司


          設計方法論

          ui設計分享達人

          “先有思想,后有設計”設計師自身應該逐步建立一套自己的設計體系,需要對設計方法論有專業的認識和理解。一直想收集整理日常說到的各類設計理論知識,也希望通過整理和總結能有新的收獲,加深記憶。



          格式塔心理學是視覺排版及設計中應用比較廣泛,主要指人的眼腦作用是一個不斷組織、簡化、統一的過程,正是通過這一過程,才產生出易于理解、協調的整體。格式塔的理論核心是整體決定部分的性質,部分依從于整體,人腦知覺到的東西要大于眼睛見到的東西。

          1. 圖形與背景的關系原則:在有一定配置的畫面內,有些對象凸顯出來形成圖形,有些對象退居到襯托成為背景,圖形和背景的區分度越大圖形就越突出成為感知對象,要讓圖形成為突出對象,不僅需要有突出的特點,還要有明確的輪廓/明暗度/統一性。運用到設計中,做海報banner時要盡量弱化背景突出視覺中心,減少背景的細節和色彩,可以讓用戶更加聚焦視覺中心。
          2. 接近或鄰近原則:接近強調位置,實現統一的整體,某些距離較短活互相接近的部分,容易組成整體。
          3. 閉合性原則:人們傾向把不連貫的圖形盡可能在心理上使之趨合,即是閉合性原則。人們在感知圖形的時候通常會先整體后局部,從整體上找到一個近似匹配,然后填補空白,這個空白是我們認為我們應該看到的內容,可以省去部分的輪廓,同時還會提供完善的定界/對稱和形式
          4. 相似性原則:相似強調內容,人們通常把那些明顯具有共同特性的(如顏色,運動,形狀,大小等)事物組合在一起。
          5. 對稱性原則:人們往往容易感知圍繞中心對稱的形狀,對稱性給了我們堅固和穩定的秩序感,這種本能會讓我們在組合物中尋找一種平衡感,雖然很多設計中并不需求完全對稱。利用這一點可以在設計中反向的打破對稱性,制造畫面的沖擊力。
          6. 連續性原則:如果一個圖形的某些部分可以被看作是連接在一起的,那么這些部分就相對容易被我們知覺為一個整體。
          7. 簡單原則:在人的眼腦認知中習慣將事物簡化,通常會根據已有的認知來確定元素,一個簡單明確的對象會比一個復雜具體的形象更快更有效的傳遞信息
          8. 共方向原則:同方向元素會比固定元素或者不同方向的元素更為緊密。不管元素相距多遠或者看起來有多么不同,只要他們按照同一方向運動,就會被認為有相關性。



          古登堡法則是又稱對角線平衡法則,由14世紀西方活字印刷術的發明人約翰·古騰堡提出。古登堡圖表將要畫面顯示的東西分成了四個象限:

          1.第一視覺區(Primary Optical Area):左上方,讀者首先注意到的地方。

          2.最終視覺區(Final Optical Area):右下方,視覺流程的終點。

          3.強閑置區(Strong Follow Area):右上方,較少被注意到。

          4.弱閑置區(Weak Follow Area):左下方,最少被注意到。

          通過古登堡法則我們知道用戶的視覺中心往往在頁面的左上方,而結束瀏覽時視線往往落在右下角,所以合理利用這個法則可以幫助用戶更好地獲取內容并采取行動。自上而下的界面設計,自左向右的界面設計,頁面中通常將操作按鈕放在右下角。



          交互七大定律

          菲茲定律:從一個起始位置移動到一個最終目標所需的時間由兩個參數來決定,到目標的距離和目標的大?。▓D中的 D與 W),用數學公式表達為時間 T = a + b log2(D/W+1)。意味著小而近的目標用戶不需要花費太大的精力就能輕易觸及或者關注,相反小而遠的目標則需要花費用戶更多的時間和注意力,菲茲定律闡述的是效率相關的問題

          思考結論:1.必要時讓按鈕更大,2.讓相關信息更近

          希克定律一個人面臨的選擇(n)越多,所需要作出決定(t)就越長。用數學公式表達為反應時間T=a+b log2(n)。在人機交互界面中選項越多,意味著用戶作出決定的時間越長。如比起2個菜單,每個菜單有5項,用戶會更快從有10項的1個菜單中做出選擇。席克定律在產品應用中主要用于通過合理的選項及功能規劃提高用戶的決策及完成任務效率

          應用場景:

          1.分類編組,提高決策效率

          2.過濾選項,隱藏/刪除低頻率功能選項

          3.分布執行,提高流程轉化率



          米勒定律:頭腦最好的狀態能記憶含有7(±2)項信息塊,在記憶了 5-9 項信息后人類的頭腦就開始出錯。米勒定律在產品應用中主要在于合理的信息布局和信息處理可以提高用戶對信息的獲取效率和記憶難度。

          應用場景:

          1.控制數量,減少用戶選擇

          2.信息分段,輔助用戶記憶

          3.流程分步,優化用戶操作

          4.信息排序,引導用戶記憶

          臨近性原則:當對象離得太近的時候,意識會認為它們是相關的。在交互設計中表現為一個提交按鈕會緊挨著一個文本框,用戶會理解為按鈕于文本框有關聯性。換句話說當相互靠近的功能塊是不相關的話,就說明交互設計可能是有問題的。

          泰斯勒定律(復雜守恒定律):定律認為每一個過程都有其固有的復雜性,存在一個臨界點,超過了這個點過程就不能再簡化了,你只能將固有的復雜性從一個地方移動到另外一個地方。

          應用場景:

          1.合理縮短用戶使用路徑,在設計中可有適度的簡化縮短操作流程但是到一定的程度可能會影響整體的功能和價值。

          2.將固有的復雜性從一個地方轉移到另一個地方,例如搜索中歷史記錄,信息商品的收藏等功能,實際都利用了此定律。

          3.將功能進行拆分,一次性無法降低復雜度的功能可以進行拆分。

          奧卡姆剃刀原理:奧卡姆剃刀原理只承認確實存在的東西,認為那些空洞的普遍性的東西都是沒有用的,應該剔除掉,概括起來就是“如非必要,勿增實體”實際上無論實體、視覺或認知上,多余的負擔都會削弱表現效能,去除解決方案的雜質,讓最后的設計會更嚴謹、更純粹。在設計蘋果產品的時候,喬布斯一直堅持認為:為了實現一個功能而造出一堆復雜的東西,沒用,簡單的才最好。Google專注于搜索,主頁上也只有搜索,其他搜索引擎就沒有做的這么徹底,這也是為什么Google用戶量最多的原因之一。

          防錯原則:最早應用于汽車制造領域中,工程師新鄉重夫(豐田精益生產莊家)于上世紀60年代,創造了這個理念。防錯原則認為大部分的意外都是由設計的疏忽,而不是人為操作疏忽,例如硬件設計上的 USB 插槽,醬油瓶口。防錯原則有四項基本原則包括,輕松原則,簡單原則,安全原則和自動原則。

          尼爾森十大交互原則

          狀態可見原則:保持界面的狀態可見,變化可見,內容可見。讓用戶知道發生了什么,在適當的時間內做出適當的反饋。 比如用戶在網頁上的任何操作,不論是單擊、滾動還是按下鍵盤,頁面應即時給出反饋。



          貼近場景原則:用用戶的語言,用詞,短語和用戶熟悉的概念,而不是系統術語。遵循現實世界的慣例來呈現信息,功能操作符合用戶的使用場景。進一步來說貼近場景,也是要求在設計的時候要考慮,產品面對的人群和人群所在的環境,比如,同一款產品在不同地區呈現形式需要考慮文化差異。不同屬性的產品例如兒童教育和辦公產品,需考慮使用人群的特性。

          可控原則:操作應該是可逆的,可以支持“撤銷”和“重試”,以此來離開“非預期” 的狀態,簡單來說就是不要讓用戶走進死胡同,提供出口和退路。例如微信發送消息可以撤回可重新編輯等。很多web端的表單,文章發布等都支持自動保存,很大程度上避免錯誤或者意外操作。



          一致性原則:遵循平臺的慣例。也就是,同一用語、功能、操作保持一致。

          防錯原則:核心觀點是如何有效的在用戶出錯之前就盡量避免錯誤發生,在互聯網產品中,比起回退修改錯誤信息或者操作更好的是,用設計防止這類問題發生。很多轉賬功能中輸入數字后會顯示千萬等說明文字,用戶輸入卡號后會自動識別關聯銀行,避免用戶出錯。

          1.限制操作范圍和條件。例如很多手機登錄等交互中默認設置手機號為11位避免了用戶出錯,提高了易用性。

          2.對有風險的操作進行二次確認。



          易取原則:盡量減少用戶對操作目標的記憶負荷,動作和選項都應該是可見的。用戶不必記住一個頁面到另一個頁面的信息。系統的使用說明應該是可見的或者是容易獲取的。 很多產品搜索功能的關鍵詞聯想搜索,即使用戶不能完全記住關鍵詞也能輕松搜索。

          1.讓用戶選擇而不是輸入,選擇和輸入的操作成本相差巨大,產品應給給用戶提供選項,讓用戶可以直接選擇,而不是自己輸入,比如填寫收貨地址。

          2.自動讀取、記錄信息、減少操作路徑。在用戶使用產品的過程中,會產生一些需要記憶的內容、或者操作路徑,這個時候我們要避免用戶記憶,把信息直接提取出來,送到用戶手里



          高效靈活原則:為大多數用戶設計,兼容少部分特殊用戶。允許用戶進行頻繁的操作,更加便捷靈活的代碼和反饋。各大產品中常使用的搜索功能,提供歷史搜索功能。微信朋友圈發布中選擇可見/不可見人群時,提供上次選人記錄。
          1.提供快捷入口,例如支付寶的首頁可以自主配置常用的小程序,微信下拉對話頁面可以快捷進入歷史小程序
          2.方便用戶重復操作,例如外賣平臺中自動定位常用地址,訂單中可以再來重復的一單等

          3.預知用戶操作縮短操作路徑,例如截圖后打開微信對話框會關聯截圖發送

          簡約原則:審美和簡約設計,頁面不應該包含無關緊要的信息,頁面的每個額外信息都會降低主要內容的相對可見性。

          容錯原則:錯誤信息應該用語言表達(不要用代碼),較準確地反應問題所在,并且提出一個建設性的解決方案。比如404。

          人性化幫助原則:有必要提供幫助和文檔。任何信息應容易去搜索,專注于用戶的任務,列出具體的步驟來進行。幫助性提示最好的方式是:1、一次性提示;2、常駐提示;3;幫助文檔。



          通過這些方法的總結歸納,我發現其實很多原則原理我們在平時的設計中有意無意的總會用到,在實際工作中設計很大程度上是做選擇,哪一種是對產品對用戶最優的方案,有的設計師可以通過自己的經驗作出選擇,沒有經驗的可能需要多多理解這些原則原理,交互設計之父阿蘭·庫珀說過“除非有更好的選擇,否則就遵從標準”只有反復的遵循使用標準才能建立自己的一套設計方法論,讓工作更加得心應手。

          來源:站酷
          作者:有魚MUMU

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          截屏2021-05-13 上午11.41.03.png

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

          提升網站設計的10個小技巧

          純純

          每個人都是從初學者開始他的設計之旅的,你的審美眼光也要像其他事物一樣經過訓練???Dribbble 的設計可能是非常有幫助的,但有時候你只是欣賞設計,卻不明白為什么。

           

          沒有靈感、沒有優質的設計素材、不知道要設計什么,所有這些原因都可能會拖慢你的速度,讓你感到沮喪。所以現在我將和你分享 10 個極其簡單的設計技巧,幫你改善你的設計作品,而且不需要額外學習新的技能哦。

           

          請記住,我提供的不是必修遵守的規則,而是大多數時候都有效的技巧。

           

          1)把你的設計作品去色。

          如果你沒有好的想法或優質的設計素材,那么你可以把你的作品去色。你可以通過正確的構圖獲得野獸派的設計。這么做有助于你理解平衡、留白,以及如何使用文字和幾何圖形。

           

          讓我們來看一個案例:


           


          2)用“平衡方案”測試你的畫面。

          我自己發明了一套測試畫面的方法:用簡單的幾何圖形代表畫面中內容,然后通過比較頁面中色塊的面積來確定頁面是否平衡。當你在自己的作品中使用這個方法時,會得到下圖這樣的效果。

           

           

          通常你需要通過視覺進行判斷,但這里我們可以做一些簡單的計算幫助理解:

           

          左邊區域的黑色矩形加起來約為:

          (236 * 138 ) + (934 * 132 ) + ( 313 * 69 ) + (674 * 44) = 207109 PX

           

          而右邊的大長方形數約為:

          446×446=198916PX

           

          他們只是相差了一點點 3.9558%。

           

          注意:圓形比長方形小,但由于相當銳利和細致,使它更吸引人的注意。

          我在設計之前沒有計算過。經過多年的練習,這只是成為自動的,因為你的眼睛會感覺到錯誤的平衡。

           

          3)用背景來呈現設計。

          我之前帶來的例子是在灰色背景上呈現的,但你可以嘗試不同的東西。這有助于為你的設計創造一些景深。但要注意,在一個真正的網站中,你不會有那么多額外的空間,所以這只是一個展示技巧!


           

          4)使用推薦的字體大小。

          不要再整天浪費時間去實驗字體大小。一般情況下以下字體大小是合適的:段落使用 14-18 pt 左右,副標題使用 24-36 pt,標題使用 96-144 pt 左右。Figma 的默認大小對于排版來說是相當不錯的。雖然它們看起來會很小,但這是正常的。

           

          有些字體相對于其他字體會偏大或者偏小,所以你應該以標準字體為基礎。比如 Roboto:如果字體大小接近 14-18 pt 的 Roboto,那就非常適合用于段落。

           

           

          5)擁抱 Z 軸。

          如果你有一些具有透明區域的圖片,你可以利用它們來創建一些分層。

           

          在網頁開發中,CSS 代碼有一個 Z-index 的參數,可以用來把圖像帶到其他項目的后面或前面,給人一種立體的錯覺。

           

          讓我們看看我的一個簡單的設計,其中就利用了這種技巧。

           

           

          6)開始使用柔和的顏色。

          鮮艷的色彩雖然美好,但往往會導致畫面過于刺激?,F在非常流行在設計中使用更加柔和的色彩,你可以在下圖拾色器中紅色標記區域內選取更柔和的顏色。

           


           


          7)讓畫面有呼吸感。

          在我看來,多一些留白要比沒有留白更好。雜亂無章的設計就通常都很糟。你可以通過以下方式獲得呼吸感。

           

          1、保持大量的背景可見。

          2、用間距避免文字墻效果。

          3、使用不會吸引太多注意力的圖片。

          4、精煉你的文字。

           

           

           

          8)在設計中使用噪點。

          通常當我們想到設計的時候,我們會想到干凈、流暢、清晰等概念。但完美就存在于缺陷之中。

           

          在你的設計中,當你想給自己的網站一個優雅或藝術的外觀,噪點是一個強有力的朋友。

           

          此外,應用微妙的噪點讓你的構圖看起來像電影一樣,這對視頻和動態網站來說效果非常好。

           

          你可以通過使用 Photoshop,在白色背景上創建一個 2-4 K 的高斯模糊,然后將其應用在你的畫板上,從而獲得一些噪點紋理。

           

           

          9)開始尋找更好的字體。

          我們電腦上預裝的字體通常都不是很好的選擇。要想找到更好的字體,可以開始上網沖浪或看 youtube 視頻,了解精彩的字體和字庫。

           

          但要注意:很多字體都不是免費的,在沒有授權的情況下使用它們可能會給你帶來麻煩。不過不用擔心,大多數的字體都有免費版本!

           

          雖然有大量不同的字體和風格,但一般來說,我把它們分為三大類。

           

          1、古典字體

          2、現代字體

          3、正文字體

           

          通常情況下,前兩種也可以用在正文中,只是字體的設計者希望你把它們當作標題來使用。

           

          古典字體包括Abril Fatface、Playfair Display、Volux、Chalga和許多其他字體。

          現代字體包括Metropolis, ITC Avant Garde, Redwing, Takota, Gotham....

           

           

          10)利用幾何圖形。

          這可能是最難利用的技巧,但如果應用得當,畫面會非常有沖擊力。

           

          利用幾何圖形有助于強化布局中的概念和秩序,甚至不需要使用額外的圖像。找到合適的幾何圖形是很難的。目前我還是不能很好地掌握它。

           

          但是有一個訣竅是,把你的文案中的字母、數字和標題當作幾何圖形:把它們做成巨大但微妙的形狀,或者用一些特定的字母作為形狀(字母 A 就很好用)。

           



          作者:知群

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          截屏2021-05-13 上午11.41.03.png

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

          UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司



          讓用戶一見鐘情的10條心理學規則

          純純

          一個好的設計不僅是解決正確的問題,還要為用戶創造積極的情感。一個實體產品可以通過人類的 5 種感官來創造情感;但對于數字產品來說,因為它只是在設備屏幕上進行干巴巴的交互,然后提供服務,所以很難創造良好的情感體驗。

           

          所以數字產品設計師需要深入了解每一種情感,以及能夠創造情感的心理學原理,才能更好地設計相關產品。

           

          唐·諾曼認為,可以從三個方面對用戶的情感體驗進行設計:本能層、行為層和反思層。

           


          • 本能層:"用戶想要的感覺"

          • 行為層:"用戶想做什么"

          • 反思層:"用戶想成為什么樣子"

           

          在第一個層面,設計將通過用戶的視覺和與產品的互動產生情感。因此,這也是 UI 設計師大顯身手的地方。除了審美和基本的平面設計原則外,以下是我目前在設計中運用的心理學規則。

           


          1. 格式塔原則

          • 相似性原理

          人的眼睛往往會把相似的元素連接成一組,大腦會認為這些元素有相同的作用。

           


          因此,在設計具有相同功能或內容的界面元素時,要使其一致。


          應用場景:導航、畫廊、卡片、橫幅、內容、分頁。

           

          • 連續性法則

          人的眼睛將排列在連續體中的元素視為一組。這個規律與對稱性和相似性頗有關系。通過在一個序列上創造相似和重復的元素,我們可以將用戶往我們想要的方向驅動。這使得閱讀信息更加連貫和清晰。

           


          輪播圖就是應用了這一規則的設計,為用戶提供了還有信息可看的提示。

           

          應用:菜單/子菜單、列表、產品排列、輪播圖、進度指示器。

           

          • 封閉法則

          當看一個不完整的圖像時,大腦會依靠以前的經驗,把剩下的填滿。

           


          這是圖形或 Logo 設計中常用的規則。但在產品設計中,我們可以將其用于圖標和加載。

           

          應用:圖標、加載、數據可視化。

           

          • 鄰近法則

          這是 UI 設計中必不可少的規則,因為人的眼睛會把任何相鄰的元素當作一組。

           

           

          在設計的時候,我非常注意利用間距將元素組合在一起。我通常用大的空間來分隔大的內容群,然后用小的空間來分隔大的內容群中的小的內容群。

           

          應用:導航、圖庫、卡片、橫幅、內容、分頁。

           

          • 對稱法則

          我們的大腦喜歡看到對稱和平衡的事物。這是在所有設計領域中最常用也是最安全的法則。它幫助我們創造一種穩定和秩序感。


           

          在設計需要簡單、視覺化、和諧的產品時,我經常會將對稱性應用到其中。當觀眾需要專注于重要的東西時,這也有助于他們感到更舒適。缺點是,如果過度使用,產品會變得枯燥單調。通常,我應用于頭部或行為召喚按鈕,以更好引導用戶產生行動。

           

          應用:圖庫、焦點圖、重要內容、產品展示、列表、導航。

           

          • 主體/背景原則

          這個規律是關于人的眼睛傾向于注意到脫離背景的事物,或是被框為一組的內容。

           

           

          我用這個規則來引導用戶的視線去預覽重要信息。通常是在卡片設計中,用淡淡的下影在背景上方鋪設一層。此外,構圖組也是應用這個規則的一種方式。

           

          應用范圍:卡片、內容、列表、服務、摘要。


          • 共同命運法則

          在同一方向上移動的元素被認為比靜止的元素或在另一個方向上移動的元素更有關系。這一規則的應用有助于我們建立群體和狀態之間的關系。


           

          我在做動畫的時候,經常比較明確地使用這個規則。但是,我們也可以應用到更多方面。

           

          應用:導航/下拉菜單、折疊菜單、折疊面板、工具提示、滾動條、視差滾動和指標。

           


          2. 焦點

          當我們看某樣東西的時候,我們的眼睛往往會先關注最突出的元素。理解這種行為將幫助我們在設計中創建一個 "錨點",從而推動用戶按照我們的方案去瀏覽內容。

           

           

          應用:內容頁、落地頁、價格頁、產品頁、焦點圖。

           


          3. 馮·雷斯托夫效應

          又稱隔離效應,它表明人們傾向于注意和記住與其他部分不同的部分。這個規則很容易與焦點法則相混淆。不同的一點是,應用這個規則的元素往往是獨立存在的,并沒有額外的功能和信息。

           

           

          應用:定價表、促銷橫幅、權益升級。

           

           

          4. 本能反應

          基于真實世界的用戶體驗,創造出具有視覺吸引力的體驗。就像我們看一個視頻時,每一個高潮笑話都有笑聲的配音,我們就更容易笑。如果我們的設計能讓用戶感覺很好很舒服,用戶就會喜歡我們的設計。

           

           

          應用:產品形象、插圖、攝影

           


          5. 色彩心理學

          有許多研究表明,顏色對我們的潛意識有特別的影響。不同性別、不同宗教、不同文化的人對色彩的看法也不同。

           

          另外,我們也不要忘了早期被廣泛使用的系統的顏色:

          • 紅色:錯誤

          • 綠色:成功

          • 藍色: 進行中

          • 黃色:警告。

           


          6. 形狀心理學

           

           

          和顏色一樣,人的潛意識對不同的形狀也有不同的反應。比如:

          • 圓形 、橢圓形:傳遞一個積極的信息,通常與社區或關系有關。

          • 正方形和三角形:傳遞強烈的信息,通常與力量和穩定有關。

          • 豎線:代表強度、力量或侵略性。

          • 水平線:代表平靜、平等或安靜。

           

           

          7. 雙重編碼理論

          這個理論解釋了人類需要視覺和語言信息來盡快處理信息。而且,人類是視覺動物,我們的大腦處理圖像的速度是文字的 6 萬倍。而為了達到設計的最大效果,我們不應該刪除說明性文字。

           

           

          一個明顯的例子就是應用程序的導航欄。大多數新的應用程序或具有復雜功能的應用程序都是用圖標和標簽來設計的。

           

          另一個例子。

           

           


          8. 并行設計

          相較于其他元素,人的眼睛往往會更容易注意到平行的元素。我經常用這個原理將同一屏幕內的兩組不同內容進行分類。最容易看到的相關案例可能是 Facebook 的消息界面,“故事”并排而消息水平平行排列。

           

           


          9. 共同區域

          這個原理就像《格式塔原理》中的相似性法則一樣,但它并不以相同為終點。共同區域是通過我們使用劃分的方式,通過線條、形狀或顏色來創建的。

           

           

          如果一個屏幕需要用戶大量滾動來查看內容,我們應該有一些方法來將其劃分得更清晰,而不是僅僅使用間距。


          應用:列表、信息流。

           


          10、掃描模式

          根據 NNGroup、UXPin 等機構或團體的各種研究,最常用的兩種掃描模式是 "F 模式"和 "Z 模式"。

           

          其中,"F 模式"的應用最為廣泛,尤其是對于內容較多的網站。

           

          “Z 模式”用于那些不太注重文字的網站,往往在最后強調行為召喚按鈕。

           

          當我們了解了這些模式的使用方法后,我們就可以有效地選擇布局和安排元素來實現我們的設計目標。

           

          第一印象是最難忘的,積極的體驗可以在用戶和產品之間建立長久的關系。如果我們能讓用戶在第一時間愛上設計,我們就為我們的產品創造了相當好的優勢。

           

          作者:知群

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          截屏2021-05-13 上午11.41.03.png

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、

          UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司




          UI 設計:如何做到理性

          純純

          UI 設計,是用理性方法,來滿足需求,并帶來美學享受。


          本篇探討 UI 設計如何做到理性。全文共有三部分:有哪些理性,如何做到理性,止步于理性嗎。



          01 UI 設計:有哪些理性?


          UI 設計主要有四類理性:基本原則,基礎知識,風格設定,風格把控。四類理性有一個共同核心:活學活用。



          1 基本原則


          共有四個基本原則:對齊,對比,親密,重復。



          先說對齊。


          秩序產生美。對齊作為一種基本秩序,主要事關整齊美觀閱讀體驗。


          對齊一般分左對齊、右對齊和居中對齊。


          從閱讀體驗角度來講,左對齊通常勝過居中對齊,所以絕大部分文章和 UI 界面都是左對齊為主。


          從美感角度來講,居中對齊往往勝過左對齊,所以一些強調美感勝過強調閱讀效率、篇幅不長、同時需要細品的詩或歌往往采用居中對齊。



          從空間利用率角度來講,右對齊往往是左對齊的一種補充。比如微信的發現頁面,最重要的圖標和文字左對齊,次要的右箭頭和其它信息右對齊。


          UI 設計追求閱讀體驗、美感和高空間利用率,所以這三種對齊方式大部分時候都會同時出現。整體而言,是以左對齊為主,居中對齊和右對齊為輔。


          再說對比。


          嘈嘈切切錯雜彈,大珠小珠落玉盤。音樂講究韻律和節奏,設計也追求錯落有致的節奏感。這種節奏感,很大程度上靠對比實現。


          好的對比可以帶來視覺張力,就是抓人眼球的吸引力,同時也能起到主次分明和視覺引導的作用,最終帶來良好的閱讀體驗。


          一定程度上,對比是無處不在的。只要存在不同,就存在對比。比如大小之間的對比,不同顏色之間的對比,文字與圖標/圖片之間的對比,不同對齊方式之間的對比,等等。


          一般而言,對比需要果斷:若不同,就徹底不同。因為一般情況下,充分的對比能帶來更好的視覺張力和更好的閱讀體驗。


          第三說親密。


          設計就是分類,張小龍曾如是說。分類中最重要的原則是親密,還有一個副產物是留白。


          性質相同或相似的元素,我們會讓它們看起來離的更近,關系更親密。親密成就分類,分類能化繁為簡。


          最后說下重復。


          設計追求一致性,一致性主要靠重復來實現。被大量“重復”的元素,比如這篇文章里的字體大小和字體顏色,既保證了一致性,又提高了效率。


          2 基礎知識


          基礎知識主要包括:手繪、顏色、版式設計、字體設計、品牌設計、動效設計、插畫設計等專業知識。


          UI 設計師可能不用畫卡通人物或插畫,但一定會畫圖標和 logo,這些也會用到手繪。作為造型基本功,需要掌握一定手繪技能。


          顏色方面,最重要的是能夠很好感受和理解顏色傳達出來的感覺,也即顏色的“精神之美”,這塊主要依賴審美和練習。


          配色方面,推薦軟件里的 HSB(色相、飽和度和亮度) 模式,這種模式很好理解,也方便調色。另外還強烈推薦從照片中吸取顏色,因為照片往往會和“生活”、“自然”有一定關聯,“生活”和“自然”是非常重要的素材和靈感來源。從色卡中選擇顏色也是一個不錯的選擇。


          版式設計就像是選秀節目中練習生的舞臺表演,考驗的是唱跳、表情管理、舞臺魅力、臨場應變等綜合實力。


          “活學活用”環節,會結合例子分享版式設計。


          字體設計、品牌設計、動效設計、插畫設計等方面,個人經驗不多,就不分享了。文末會附一份推薦書單,囊括基本原則和部分基礎知識。


          3 風格設定


          風格設定,即上篇提到的“精確描述”,是在動手設計之前,先探索出合適的風格,并把它精確描述出來。


          好的開始是成功的一半。風格設定是一個開始,極其重要。如果風格設定只做到 60 分,稍微打點折扣的執行結果就是不及格。所以,如果要把設計做到 85 分,風格設定一般要做到 90 分。


          風格設定猶如在茫茫大海中行船,首要目標把握方向,核心訴求是精準。海上并無現成道路和導航可循,只能依靠繁瑣而嚴謹的推理和計算。


          風格設定的次要目標劃一個既清晰界定風格、又清晰指明“發揮范圍”的“圓圈”,核心訴求是周密。因為需要清楚知道“圓圈”以內代表什么,“圓圈”以外代表什么。


          在“精準”和“周密”上同時做到優良,風格設定才能做到優良。


          既精準又周密的風格設定,通常無法一蹴而就:“風格設定”階段一般只能做到七成,剩下三成需要在設計過程中繼續探索和打磨。下一大段會結合案例分享具體方法。


          4 風格把控


          風格把控有兩層含義,一是實現當初設定的風格,二是在實現的基礎上做到統一和規范。


          只要嚴格在“圓圈”里發揮,實現當初設定的風格并不難。那做到統一和規范難嗎?往難了說就是需要做大量瑣碎工作:以聯系的眼光看待所有設計元素,并把它們分類規整好,注意分類不宜過多,同時分類邏輯上不能出現明顯問題。往簡單了說就是大量復用已有的設計樣式。


          風格把控就是在劃定的“發揮范圍”內,利用設計知識和經驗,以規范的方式實現規劃好的風格。


          5 活學活用


          活學活用作為四類理性的共同核心,最典型的應用場景是版式設計。


          活學活用有兩個要點:正反結合,風格第一。



          所謂正反結合,是指設計知識既能正著用,也能反著用。最常見的例子是對齊原則,大部分時候是正著用,但如果想要營造活潑的感覺,也會反著用:故意打破對齊原則。


          除了對齊原則,其它設計知識,比如重復原則,也可以反著用。


          本文配圖就是一個例子:圖片左上角、右上角和右下角分別散布著裝飾元素(橫線、圓環)和 logo,在裝飾元素的出現次數上,沒有用重復原則。過年家里掛燈籠一般至少掛兩個,同一裝飾元素一般至少出現兩次,以達到一種和諧和較為熱鬧的裝飾效果。



          我在裝飾元素的出現次數上沒有用重復原則,而在出現位置(相似位置)、元素大?。ㄏ嗨拼笮。┖驮仡伾ㄏ嗨祁伾┥嫌昧酥貜驮瓌t,同樣達到了和諧效果。之所以沒在裝飾元素的出現次數上用重復原則,是想放一個隱喻在這里。


          所謂風格第一,是指設計風格永遠第一,設計知識永遠第二。知識服務風格,切不可重知識輕風格。


          《倚天屠龍記》中,張三豐教張無忌練習太極劍時,要他忘記劍招,只記劍意。某種程度上,版式設計也要將“劍意”放在第一位,“劍招”服務“劍意”。


          對比原則也有反著用的時候。有一條關于對比的知識:對比要果斷,若不同,就徹底不同。這條知識能解釋百事可樂 logo 里紅色與藍色的強烈對比,但解釋不了山本耀司旗下大部分服裝那千篇一律的黑色——單色,無對比。



          設計最重要的是感染力,感染力主要來自個性、態度、價值觀這些風格層面的東西,而非設計知識這些技法層面的東西。


          當一個設計,技法高超而風格不足時,感染力和魅力就會不足,這也是設計師經常會犯的錯誤,大家需要注意。



          02 UI 設計:如何做到理性?


          可以簡單分成三步:規劃,成形,細化。下面結合微信 Redesign 這個案例來說明。



          1 規劃:用“紅綠燈”法設定風格


          設定風格,用到的方法姑且稱之為“紅綠燈”法。“紅綠燈”法借鑒并改良了我在網上看到的一種“紅黃綠卡片法”(在紅、黃、綠三種顏色的卡片上寫下不同的設計關鍵詞),并和“情緒板”法有相似之處:都包含關鍵詞定位圖片參考兩部分。


          先說關鍵詞定位,共有兩步。


          第一步類似頭腦風暴,結合產品屬性、用戶屬性、市場情況、個人喜好等因素,把能想到的設計關鍵詞全部寫下來。合適的不合適的都要寫,只要想到了就寫下來,確保有二三十個。如果關鍵詞數量不夠,這個步驟可以多重復幾次,直到夠了為止。這一步設計師和需求方都要參與進來,在提供關鍵詞上雙方是平等關系。


          這個微信 Redesign 是個具有探索性質的小練習項目,基于微信 7.0,有兩個目的:首先保留原有交互體驗和品牌識別度,其次在視覺上更年輕、更流行。可以通俗理解成:一款微信“皮膚”,主要給年輕用戶和趕新潮的中老年用戶用。


          結合產品屬性(社交類、工具類、內容類)、用戶屬性(年輕用戶為主)、市場情況、個人喜好這些因素,這一步想到的關鍵詞如下圖所示。



          第二步是歸類,就是把第一步產生的所有關鍵詞歸成“紅黃綠”三類。如果關鍵詞不夠,還可以再補充。這一步依然是需求方和設計師共同參與,但需要設計師來主導。


          紅色關鍵詞代表不能踩的紅線:不能這樣做黃色關鍵詞代表黃燈警告:這樣做不太合適;綠色關鍵詞代表暢通無阻:應該這樣做


          需要注意的是,綠色關鍵詞最好控制在 3-4 個之間,如果超過 4 個,就需要分成主綠關鍵詞和次綠關鍵詞,主綠關鍵詞依然要控制在 3-4 個之間。這樣做有兩個考量,一是確保簡單和重點突出,二是也更容易實現。


          回到第一步的關鍵詞上來。設計中當然可以用“擬人”、“隱喻”等手法,所以“擬人”這個關鍵詞顯得意義不大,故刪去?!皽貪櫋焙汀坝H和”,“老少皆宜”和“大眾”在語義上都存在一定的重復,所以刪去后者。刪除這類不合適的關鍵詞后,剩余關鍵詞就按“紅綠燈”法歸類,歸類后情況如下。


          (微信 Redesign 之按“紅綠燈”法歸類后的設計關鍵詞)


          關鍵詞定位已就緒,再來找參考圖片。


          可供參考的圖片有兩大類:照片和 UI 界面。UI 界面也有兩類:線上作品(真實項目、練習作品等)和上線作品。


          做 UI 設計,參考什么樣的圖片?個人建議,做什么類型的設計,就重點參考什么類型的圖片。比如 UI 界面就重點參考 UI 界面,banner 就重點參考 banner。


          UI 界面的設計,個人喜歡重點參考知名產品的上線作品。單從視覺角度來說,上線作品的質量可能比不過一些線上練習作品。但是已經上線的知名產品的 UI 設計,其風格的形成往往都會經過很多推敲,會有很多比較成熟的設計思路在里面。


          參考別人的設計,最重要的是參考設計思路,其次才是參考表現形式。這種設計思路,有時候能從網上找到,但更多時候靠自己推測


          微信 Redesign,根據“很多年輕人在用,且風格比較流行”這條主線,找來了 QQ、抖音、B 站、小紅書、陌陌、Soul、騰訊視頻、愛奇藝等產品的截圖。這些產品的截圖,看完一圈后,就會面臨一個問題:以圖標為例,這幾個產品的圖標,風格各異,但基本都具備“年輕”和“流行”的特點,那應該參考哪一個?



          這時就要求助關鍵詞定位。除了“年輕”和“流行”,主綠關鍵詞還有一個“輕微老少皆宜”。最符合“輕微老少皆宜”的是愛奇藝和騰訊視頻:很多老人和小孩也會用這兩個 App 看視頻,網上公開的數據也能佐證這一點,所以它們的設計一定會照顧中老年用戶的審美。


          最后,出于個人偏好,我選擇重點參考愛奇藝的圖標風格,具體而言就是:深淺雙色、較粗(1.5pt)描邊、圓潤風格。


          2 成形:按照規劃,實現風格


          紅黃綠三色關鍵詞及重點參考圖片就緒后,就可以動手設計。


          我一般會把界面設計粗略分成三大部分:版式風格、元素風格、元素大小,元素為圖標、圖片、按鈕等,然后去一一實現。


          先說版式風格。


          用的主要綠色關鍵詞是“更流行”和“更年輕”?!案餍小卑ǎ焊笞痔柕捻撁鏄祟}、盡可能用留白代替分割線和卡片的“無界”風格、圓形頭像、更多留白更多舒適、等等?!案贻p”包括:更圓潤的搜索框、輸入框和圖標、更年輕更具活力的配色、等等。


          再說元素風格之圖標風格。


          圖標主要參考愛奇藝 App:其一,底部導航和發現頁的圖標都是深淺雙色加較粗的描邊;其二,除了更圓潤以外,部分圖標還變 Q 了。


          最后說元素大小。


          以這個小項目為例,最主要的元素大小是圖標大小和字體大小,它們會影響整個設計的感覺。通常情況,元素越小,給人感覺越精致、越高端,此其一;其二,可能是年輕人和老年人視力存在差別的原因,越小的元素往往代表年輕人的審美,反之則代表老年人的審美。


          元素大小主要運用的綠色關鍵詞是“輕微老少皆宜”。也就是說,需要在年輕人和中老年人的審美中找到一個平衡,所以元素大小基本直接參考了微信 7.0 的設計,個別地方做了微調。


          最后,出來的效果如下圖所示。



          3 細化:打磨優化


          這份設計我發在了網上,部分網友留言說看著不夠好,不太舒服,有一個表達的比較具體——“雖然用了大面積留白,卻讓人感到緊迫...”。


          基于網友的留言,我仔細審視了這個設計,最后發現問題主要出在頁面(發現頁為例)左右兩側:留白過小。



          當初之所以這么設計,是想通過頁面左右兩側較少的留白制造一種內容將要撐破屏幕的感覺,從而營造一種活潑的感覺。注意,彼時“活潑”還沒出現在“黃色”關鍵詞里,上文兩張關于關鍵詞的圖都省略了中間探索和優化的過程。


          很多網友之所以沒有感受到活潑而只是覺得不太舒服,至少有兩個原因:第一,整個設計的基調是簡約、清爽,有一定的年輕感和流行感,但沒有太明顯的活潑感,硬往里面某個地方塞“活潑感”并不和諧,大家也難以感受到;第二,單純就“活潑感”而言,做的依然不到位,比如圖標與右側文字的留白,可以比圖標與左側邊界的留白大,方能更好彰顯活潑與活力。


          考慮到“輕微老少皆宜”這個綠色關鍵詞及微信主要是工具型和內容型產品,“活潑感”用在這里并不十分合適,于是放棄,并將“活潑”歸為“黃色”關鍵詞。此處留白的目的就回歸其本職工作:整體和諧與舒服。于是就把留白相應調大了。



          另外一個優化的點是“眼睛”的形狀:微信圖標、看一看圖標、表情圖標、朋友圈里將點贊和評論折疊起來的圖標都有一雙“眼睛”,這雙“眼睛”起初是豎著的橢圓形,很萌,也比較低齡化。為了盡可能的“輕微老少皆宜”,這里統一把“眼睛”由豎著的橢圓形改成了圓形,弱化了“萌”和“低齡化”的感覺。



          還有一塊是顏色上,拍攝視頻動態的圖標有用到藍紫色。這個紫色基本符合“更年輕”、“更流行”,但不太符合“輕微老少皆宜”,所以最后放棄了紫色,保留了藍色。



          遵循主綠關鍵詞里的“輕微老少皆宜”,其它優化的點有:微信圖標尖角處的圓角調小,刪除啟動頁與黑色"WeChat"字形成對比的綠色圓點。另外還有一些視覺層面美觀、和諧、舒適度的優化,比如顏色、留白、圓角大小、字體大小方面的微調。


          優化后的微信 Redesign,整體效果如下圖所示。



          凡事預則立,不預則廢。UI 設計如何做到理性,最核心的是設計風格,規劃、成形和細化都緊密圍繞設計風格展開。


          最后,嘗試總結下“紅綠燈”法的優勢,主要有四點:精確、周密、穩妥、高效。



          關于設計風格,傳統規劃方法一般只有三四個“綠色”關鍵詞。


          “紅綠燈”法擁有“紅燈”、“黃燈”和“綠燈”三種顏色的關鍵詞,從而確保大方向更準確?!凹t綠燈”法會產生20個以上的紅黃綠關鍵詞,從而確保劃出來的“發揮范圍”更周密,極少有疏漏。


          在“成形”這個設計環節,一旦踩到“紅線”和“黃線”,規劃好的紅黃綠關鍵詞都會馬上發出警報,從而大大降低“違規踩線”行為的發生次數,確保設計執行環節的穩當可靠。


          “紅綠燈”法通俗易懂門檻低,需求方可以較為深度參與“規劃”環節。需求方在“規劃”環節的深度參與,理論上可以降低后期的返工和修改次數,從而確保整個設計過程的高效。同時理論上也能夠提高設計師和需求方雙方合作的愉快程度。



          03 UI 設計:止步于理性嗎?


          UI 設計,始于理性,但無法止步于理性,還需要超越理性。注意,這里的理性,僅指設計知識的相關理性。


          超越理性主要有兩點:直覺,其它知識



          1 直覺


          直覺是指一種能夠快速感受和評估設計優劣的感覺。良好的直覺往往快而準。


          感知和評價別人的設計時,用到的幾乎全部是直覺。審視自己的設計時,也離不開直覺。


          在審視自己的 UI 設計時,直覺主要發揮兩個作用:第一,囿于知識儲備或表達能力,有些地方就是解釋不清,這個時候就要靠直覺去感受去判斷;第二,直覺往往會作為檢視設計的最后一道關卡,也是最重要的一道關卡。


          直覺來自哪里?


          個人觀察是,直覺往往和審美正相關。比如一個設計師,他掌握的設計知識有限,經驗有限,對自我的要求也不高,最終的作品往往不出彩。但如果他審美好的話,往往能夠分辨出不同設計方案之間孰優孰劣。


          如果你想就設計稿征求別人的意見,請去找那些審美好的人。


          2 其它知識


          其它知識是指設計知識以外的所有其它知識。比如 iPhone 上刪除應用前應用圖標的抖動,其靈感應該來自生活中的搖頭求饒或嚇得發抖,抖動的幅度和頻率則需要利用物理學和數學方面的知識。


          優秀的設計,一定會從生活中汲取大量靈感,并廣泛利用社會類、人文類和理工類學科的知識。就拿數學來說,在好的設計中,一定是個??停阂驗槟阈枰煌5陌从嬎闫?,從而計算不同設計元素之間的比例關系和各自的大小。


          汝欲學詩,功夫在詩外。遣詞造句這些文字技巧只能是寫詩的基礎,而非關鍵。寫詩的關鍵在于你對生活、對世事的積累和感悟,在于你的思想是否深刻,情懷是否充足。


          寫詩如此,做設計亦如此。設計知識只是做設計的基礎,而非關鍵。做設計的關鍵在于“其它知識”?!捌渌R”非本文重點,就不展開了。



          結語


          UI 設計里的理性,主要是各類設計知識。理性的核心在于活學活用各類設計知識。


          理性嚴謹的做 UI 設計,可以簡單分成三步:規劃,成形,細化。好的開始是成功的一半,一個高質量的規劃顯得尤為必要。


          用“紅綠燈”法做規劃,并指導成形和細化工作,會更精準、周密、穩妥和高效。


          UI 設計,是七分理性,三分直覺。審美越好,直覺越準


          優秀的 UI 設計,一定會從生活中汲取大量靈感,并廣泛利用設計以外學科的知識。









          作者:SnowDesign

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          截屏2021-05-13 上午11.41.03.png

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 平面設計服務、

          UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司




          【字體設計】品牌標準字怎么設計?

          seo達人



          圖片

           

          你還別不信,我開始也不信,但我試了一下,如果把這個字體換成其他形式的,我發現我有點懷疑了…這還是我所熟知的那個品牌嗎,甚至會不認識這是個什么牌子。

          圖片

           

          當然,有些兄弟萌已經把這玩意刻在腦子里,日夜都在用的,肯定還是會有些朋友認識的。

          圖片

           

           

          說回正題,通過上面一個簡單的小例子,便可以搞懂 
          設計標準字體的三大原則: 
           
          1. 易辨性
          那體現出易辨性主要有三點:
          ① 識別性。
          ② 避免與其他品牌或企業設計的雷同。
          ③ 放大縮小都清楚。 
           
          第一點和第三點比較好理解,不認識會大大增加大眾對于品牌的認知成本。那為了各種不同的應用環境和場景,不管是放大還是縮小,都要有比較好的易辨性。

          圖片

           

          不同大小依然具備很好的識別
          太粗的話,縮小就糊了,太細的話,離遠看會造成缺失筆畫的視覺效果,且印刷制作會受到一定影響。

          圖片

           

          第二點,如果設計形式和其他品牌的標準字體非常相似,也會增加認知成本,難以辨別,特別是與同行業品牌相似,有時候還會給人以盜版,假的感覺。(但反過來想這也是一個投機取巧的小妙招,我就是要做假的,就是要坑你…)

          圖片

          那設計標準字體的第二大原則就是藝術性。
          比如美感、新穎、創新、親切,想要體現出這些特征,那就要求我們在字體設計當中做到字體的比例合適,結構合理,曲線和造型具備美感等。

          圖片

           

          最后一點則是傳達性。
          標準字在一定程度上是能夠傳達企業理念的,所以這就要求我們不能單純追求形式上的豐富和變化,如在競技體育等領域的品牌,經常會采用較粗的筆畫設定以及傾斜+尖角修飾的形式來體現速度感,以及體育競技賽事的感覺。

          圖片

           

          但把這種形式和特征放在女性行業的品牌字體上,就有點傻 der…
          圖片
          了解完設計原則后,我們再來從字體設計的角度來看,又可以分為書法標準字體、裝飾標準字體和英文標準字體的設計,舉幾個例子先來簡單看一下。 
           
           

          圖片

           

          采用書法標準字體比較典型的企業就有中國國際航空公司、健力寶、中國銀行、中國農業銀行等。

          圖片

           

          可以看到這些品牌無一不是歷史悠久,且被社會廣為認可的品牌,書法到目前為止已經有三千多年的歷史了,所以書法標準字體的好處就是會帶給大家一些具有藝術性,傳承久遠,源遠流長等感受,具有信任感,但同樣也是有一定缺點的,書法字體的識別性較常規字體而言是要低一些的。
          圖片

          圖片

          其次便是與商標圖案組合在一起比較難處理協調性,說白了就是不好排版。 
           

          圖片

          下面再來看看裝飾標準字體。 
           
          這玩意就是大家現在最為熟知也是見到最多的了,好看,好用。多半都是在基礎字形的基礎上進行裝飾,變化加工而形成的。但也沒那么簡單,還是要根據品牌和企業的產品屬性以及經營性質來設計,以達到加強文字本身的含義,和引起共鳴的作用。 
           
          所以這就要求我們在設計的時候無論采用的是夸張、增減筆畫、連筆斷筆、增加修飾還是什么樣的形式,都要有道理,不能想怎么加怎么加,當然在加強字體特征的同時,還要使整體風格和諧統一,不能每個字的形式和特征都不一樣。 
           
           
          接下來看一些例子,香水、化妝品等偏女性一類的品牌,總是喜歡采取筆畫設定較細的字體,如雅詩蘭黛、花西子等。

          圖片

          造型圓潤、線條順滑的字體,常用于食品、洗滌、洗護用品、飲料等行業的品牌,這也是在提現行業產品的特性,如奧利奧、優酸乳、藍月亮、巴拉巴拉等。

          圖片

           

          而字形整體方正的字體則常用于表現企業的實力強勁,端莊穩重,靠譜,有信賴感等感覺,但這里又大致分為三個類型,第一種是老牌傳統企業,如百利機電、中國北車、創維集團、鞍鋼集團等,字形顯得尤為渾厚粗實。

          圖片

           

           

          第二種則是如騰訊,網易,今日頭條等互聯網企業為了體現出更多企業的朝氣和年輕化,以及吸引更多的年輕人,則把字體處理的更現代、更協調、更動感,以此來傳遞企業理念。

          圖片

           

          第三種則是帶有棱角或是一些修飾鮮明的字體,可以體現出企業的個性和想要表達的特征,以此來抓住目標群體。如奧克斯在字體中添加的切角、高原姑娘通過筆畫的造型和特征來體現出青藏的獨有的個性等。

          圖片

           

           

          圖片

          這里我們展開來具體分析一下,形成這些視覺感受的原因到底是為什么,說的再直白一點,字體的氣質是受到什么影響的? 
          我們應該做些啥?下面我們從字體設計的內容一起看一下。
          1. 字面
          2. 重心
          3. 中宮
          4. 粗細
          5. 筆畫形態
          6. 筆畫修飾
          7. 字體的類型 
           
           
          字面瘦高的字給人以挺拔,秀氣,年輕等感受,如下圖中的“字”字,那字面寬扁的字給人以穩重,可靠,年長,老氣等感受,如下圖中的“面”字。

          圖片

           

           

          實際上重心和字面對字體的氣質影響是類似的,重心偏低的字也會給人以沉穩,穩重等感受,如下圖中的“重”字,大家可以腦補一下相撲選手,就能理解了。那重心偏高的字也會讓人覺得年輕,朝氣蓬勃的樣子,如下圖中的“心”字,就像人一樣,可以理解為大長腿,腿越長,重心就越高。

          圖片

           

          中宮對字體所產生的氣質是比較明顯的,中宮大的字,看起來比較現代、幾何、簡約、寡淡等感受。如下圖的“中”字。那中宮偏小的字則看起來更具傳統、人文氣息、有溫度、親切,有手寫感等感受,如下圖中的“宮”字。

          圖片

           

          這一點是很直觀的了,筆畫粗細對字體氣質的影響不難判斷,筆畫粗的字看著就厚實,穩重,結實靠譜等感受,如下圖中的“粗”字。筆畫細的字看著就單薄,柔弱,文藝,偏女性等感受,如下圖中的“細”字。 
           
          ps:這里用的是【胡曉波重黑體】,有七款字重任你選擇,超級好用!

          圖片

           

           

          筆畫形態對字體的氣質影響也是非常大的,如下圖中左側,使用【胡曉波香辣體】的兩個字,橫筆豎筆畫都帶有一些切角,再加上尖角修飾,看著就比較活潑,熱鬧,非常適合餐飲行業使用。那再比如右側,使用【胡曉波硬漢體】的兩個字看著就冷靜多了,筆畫沒有多余的修飾,干凈利落,可靠,穩定的感覺。

          圖片

           

          筆畫修飾這一點是非常常用的,下圖中左側的“修”字添加了圓潤的修飾形態,看著就更柔和一些,包容性強一些,右側的“飾”字添加了尖銳的修飾形態,看著就更犀利,更具個性,張揚一些。

          圖片

           

           

          最后一點便是大家最容易判斷和選擇的了,也就是字體的類型,那字體平時用到的無非就是黑宋楷隸這四大類,至于其他的用到的情況可以說非常少了,所以在這四種里面,黑體肯定是最為現代的,依次往下就是宋楷隸了。

          圖片

           

           

          但不能光憑字體的類型就判斷字體是傳統還是現代的,宋楷隸同樣可以現代,如上圖中的“型”字,是【胡曉波浪漫宋】這一字體,就比較現代,反之黑體也可以傳統一些,具體的氣質要綜合上面講的這些點來看,不能片面的只看一點。

           

          結合上面講的知識點,我們對剛才提到的這些大廠和企業的標準字做一個分析,試圖從中獲取一些為我所用的“共性”。
          字面的寬度和高度比值為1:0.8,字形寬扁。

          圖片

           

          重心略高于絕對中心,符合人的正常視覺,大多數字體都會這樣設定重心,屬于正常設定。

          圖片

           

          相較于常規字體,中宮要大不少,這種處理方式會使字體更飽滿,更為醒目。

          圖片

           

          筆畫設定較粗,但也并沒有非常粗,保證了縮小的時候也能被清晰的識別,且并沒有添加多余修飾,筆畫也非常干凈利索。

          圖片

           

          但只看一個并不能稱之為規律,下面我們再來分析幾個驗證一下。創維集團的標準字的字面比例已經達到了1:0.7的程度,更為寬扁。

          圖片

           

          重心同樣略高于絕對中心,與前面分析的結論也是相吻合的。

          圖片

           

           

          同樣也是一個較大的中宮。

          圖片

           

           

          筆畫的設定也是比較簡潔干凈的,且橫筆要略細于豎筆,不過這里面多了一個小細節,就是角度統一,但凡傾斜的筆畫全部都是同一個角度,包括創字左邊倉字的最下邊的橫筆的切割角度也是如此,且橫豎轉折處圓角的造型更多,減弱了一些刻板印象。

          圖片

           

          最后再來看一下中國北車的規律所在,字面的寬度和高度比例也是一個1:0.8的設定。

          圖片

           

          重心依然是略高的設定,與前兩個相差無幾。

          圖片

           

           

          中宮也沒啥區別…就是個偏大的中宮,所以這種類型的標準字是非常簡單的。

          圖片

           

           

          筆畫設定上與創維的標準字有些類似,較為明顯的橫細豎粗,且也有兩處角度統一的設定,整體無圓角修飾,簡潔大氣的感受更多些,增加了一些通用技法中的斷筆形式。

          圖片

           

          通過上面的分析,對于這類傳統企業類型的標準字, 
          可以總結出這樣一個規律: 
          1. 大中宮,大且寬扁的字面,則字面趨向飽滿,字體更醒目,利于辨識,寬扁的字面則會讓字體產生更穩重沉穩的感覺,靠譜就完了。
          2. 略高的重心則符合正常的視覺感受。
          3. 粗筆畫,少修飾,筆畫形態簡潔,粗筆畫的設定同樣有利于識別,并且更具力量感,筆畫不增加無用修飾,簡潔大氣。
          4. 適當增添斷筆連筆,圓角等形式給整體提高設計感。 
          下面我們再來看看如騰訊這一類的新型互聯網企業的標準字的規律所在。 
          其實先不分析太多,只是用眼睛看,就能感受到與上面的傳統企業有非常明顯的氣質差別,更年輕,更有活力,也更現代了。
          下面我們來看一下產生這種氣質的具體原因。

          圖片

          騰訊標準字的字面寬度高度比例幾乎是 1:1 的設定,雖然設定的字面框是個正方形,但觀看漢字由于會受到視錯覺的影響,所以看起來并不是正方形,反而是要更高挑一些的。

          圖片

          重心同樣是略高于絕對中心的,這點與傳統企業的標準字到沒什么太大差別。

          圖片

          中宮與常規字體比較類似,只是略大而已。

          圖片

          筆畫的粗細設定是較為勻稱的,在橫筆和豎筆的起筆等位置設定了一些切割的處理,看著更具速度感,再加上傾斜的設定,更能體現出前進與引領的理念表達。

          圖片

           

          再來看看今日頭條的標準字體,視覺上也是比較年輕,有活力的感覺。

           圖片

           

          字面的寬度和高度比例與騰訊字體基本一致,都是1:1的設定。

          圖片

           

          重心比絕對中心稍高一點點,也是一個常規的設定。

          圖片

           

          中宮比常規字體稍大一點,并沒有很大。

          圖片

          筆畫粗細上同樣是粗細較為勻稱的設定,比較長的撇捺帶有一些曲線的處理,相較直線的處理會更柔和一些,包容性更強,也更具人文氣息的氣質。

          圖片

           

          最后再來看一下網易愛玩的標準字,最為明顯的區別就是顯得更輕薄了一些,其他的觀感與騰訊和今日頭條也是類似的,繼續分析一下。

          圖片

           

          在字面上的寬度與高度比例設定竟然也是1:1。我發誓我沒有刻意去測試然后才找的這些企業,就很隨便的找了幾個大廠,分析完就這樣了…

          圖片

           

          重心一樣,略高,懶得多講了。

          圖片

           

          中宮比常規字體略大,但要小于前面分析的傳統類型企業的標準字。

          圖片

          筆畫設定的相較其他大廠最大的區別就是更細了,更顯輕薄靈動,橫筆的起筆處設定了較為明顯的切角,轉折處所添加的圓角也較為明顯,且增添了一些連筆斷筆等設計形式。

          圖片

           

          綜合來看,這些互聯網企業,或是性質較為年輕,潮流或是科技一類的企業,他們的標準字與傳統類型的企業標準字還是有一些區別的: 
          中宮適宜,稍稍偏大,字面偏大且視覺瘦高輕盈。在適當提高字體的醒目程度的同時,照顧到更多字體的溫度,使企業與受眾之間的親密度有所提升,并沒有把中宮做的非常大,那樣會比較冰冷;字面的比例使字體更為年輕,積極向上,有活力。 
           
          略高的重心則是一個非常常規的設定,也是因為高中心和低重心都非常少用。 
           
          筆畫設定較為勻稱,減弱橫豎筆畫的粗細對比,趨向扁平化,筆畫形態比較簡潔。那這樣做的好處也是在往更現代,更簡約的方向去走。
          擅用連筆斷筆以及切割等常用設計方法,在設計感的處理上會更多,能凸顯更多企業獨特的理念,彰顯個性,與受眾產生強共鳴。

           

          圖片

          那標準字的最后一點則是英文標準字體,其實跟中文是差不多的,主要分為四大類: 
          1. 等線體
          2. 手寫體
          3. 裝飾體
          4. 光學體 
          ① 等線體比較好理解,幾乎都是相同粗細的線條構成的,粗一點細一點都行,根據品牌和企業的特性而來。如 CK、梅凱恩、LV、adidas 等。

          圖片

           

           

          ② 手寫體,這玩意用于標準字還是比較少的,本身就是符號化比較強的文字,所以英文手寫的識別度是要低不少的,常見的就是用于人名或者非常短的企業名稱。如迪士尼、蕭邦、必勝客等。

          圖片

           

           

          ③ 英文裝飾體就跟中文的是一樣的了,在基礎字體上進行裝飾,變化加工。如繆繆、高田賢三、銳步、斐樂等。

          圖片

           

           

          ④ 光學體,是攝影特技和印刷用網絞技術原理構成。
          其實我也不知道這是個啥玩意,超出我的知識范圍了…聽說過,但沒見過,我也沒查到什么有用的,但百度百科告訴我有這么一個東西,我就寫來大家一起看一下,如果有知道的兄弟姐們們可以給我灌輸一波知識,不勝感激…

           

          總之,字體設計的形式和種類非常多,再怎么總結也無法全面,所以我們只需要做到能夠判斷哪種類型的字體是適合的就足夠了,下面通過案例實操來給大家繼續講解如何通過分析企業和品牌的各方面特性以及細節,來確定字體的最終呈現。 
           

          圖片

          先來做個傳統類型的標準字,這里拿醫藥行業舉例,首先我們要對行業進行分析,來確定字體大概的方向及設定。
          醫藥行業的一些關鍵詞及特性:可靠,放心,受眾群體為全體人員。 
          從這一點中我們可以確定的關鍵信息:字體要穩重,那字面適合設定的寬扁一些,且筆畫不宜太細,由于受眾群體極廣,所以要照顧到兒童及老人,辨識度就非常重要了,同等情況下,黑體的辨識度明顯好于其他,另外,為進一步提高辨識度,橫豎筆畫的粗細對比也不宜過大。
          所以基礎的設定就有了:黑體,寬扁字面,粗筆畫且橫豎筆畫粗細勻稱。

          圖片

           

          重心及中宮的設定,按照我們之前分析的規律,重心略高,大中宮更符合我們的視覺感受,較大的中宮也能提高字體的辨識度。

          圖片

           

          繼續分析,得出更具體的筆畫內容。 
          醫藥行業更具包容性、親和力,所以筆畫形態不宜復雜,撇捺部分處理成曲線比直線更合適,適當增添圓角也可提高親和力,連筆形式也可以考慮,能提高字形的連貫性和順滑度,也算是個加分項。 
          下面開始搭建基礎字形,對于結構了解較少的同學可結合參考字進行搭建。這里我選擇思源黑體作為結構參考字,因為免費,大家選擇其他字如果修改不當,可能會有侵權風險。

          圖片

           

          調整至中宮偏大,字形更飽滿,筆畫形態簡潔一些,這里為了方便大家觀察,調整成了描邊形式,大家可以看一下每個位置具體的改動。

          圖片

           

          整體做了較多的連筆及對稱的處理方式,使整體更加簡潔現代一些。

          圖片

           

          下面給轉折處適當加一些圓角,讓整體看起來沒這么硬。

          圖片

           

           

          嘗試替換一些局部來體現更多行業的特性。如達字左上角的點和藥字的勺字部分的點,替換成一個圓的造型。

          圖片

           

          再弄個標準制圖,做完字畫點輔助線,畫幾個圓套一下就行了……

          圖片

          搭配英文排個版,再配個色。
          圖片

          圖片

           

           

          再貼幾張圖看看效果。
          圖片
          圖片
          圖片

          圖片

           

           

          圖片

           

          再來做個稍微有點不一樣的,硬一點,做個電器行業。還是先來分析行業屬性得出一些關鍵詞:耐用、好用、結實、金屬。
          那整體依然可以設定一個寬扁的結構,這里設定的更寬扁了,筆畫可以設定的稍微帶一些對比,增加一些設計感和獨特性。

          圖片

           

           

          重心依然略高,中宮偏大,這兩點基本是不會有太大變動的。

          圖片

           

          筆畫這里設定為橫細豎粗,撇捺部分也可以做成直的,電器會更硬朗一些,同時可以適當做些切角等形式來體現更多這種氣質。
          老規矩,選擇思源黑墊底,調整至跟字面一樣的高矮。

          圖片

           

           

          設定筆畫粗細,調大中宮,字面飽滿,搭建基礎字形。

          圖片

           

           

          添加一些筆畫切割的感覺。

          圖片

          添加一些斷筆連筆,增強整體的形式,也可以再給整體一個傾斜,電器畢竟也還是用電的東西,可以體現一些速度感。

          圖片

           

           

          但現在看起來可能有點太硬了,所以可以考慮加入一些曲線進來。至于到底怎么表現,還是得看品牌具體的調性以及甲方想要的感覺來呈現。

          圖片

           

           

          像這種帶有行業的名稱,可以單獨提取出名字部分,結合排版來使用,也可以作為字體標志來用。
          圖片
          圖片

          圖片

           

           

          再來看一些效果圖。
          圖片
          圖片
          圖片

          圖片

           

           

          圖片

          最后我們再來做一個宋體類型的,那宋體會更偏向于傳統、文藝一些,相較于黑體要更有溫度,適合宋體的行業也很多,
          比如餐飲、民宿、女裝等,這里拿民宿舉例。 
          首先還是先來大致分析一下行業,來確定字體的方向。 
          文藝、安靜、舒適、典雅等感受,那在字體筆畫上面我們可以把筆畫的特征做的干凈利索一些,字面可以瘦高一些,更有氣質,中宮不需要刻意外擴,正常就好,筆畫可以設定的粗細均衡點,看著會比較淡雅。 
          根據我們要做的字來設定一下需要用到的筆畫。這里結合思源宋的筆畫造型進行設定即可。

          圖片

           

           

          設定好筆畫后,還是選擇參考字,然后搭建字形即可,這里把結構參考字調整成瘦高的形態,更符合氣質一些,看起來也會比較特別一點。

          圖片

           

           

          不需要做太多其他處理了,筆畫和結構的設定就比較符合氣質了,簡單排個版即可。

          圖片

           

          知識點回顧:
          1. 分析行業特性,得出關鍵詞。
          2. 由關鍵詞設定字體的字面、中宮、重心、筆畫粗細,筆畫形態。
          3. 選擇結構參考字來搭建基礎結構。
          4. 適當添加一些修飾或筆畫細節處理等。 
           
           
          細節所在:
          1. 要注意每個字的字面大小視覺統一,灰度統一。
          2. 筆畫粗細設定合理,放大縮小都能清晰識別。
          3. 筆畫變形要考慮到識別度。
          4. 斷筆連筆等形式慎用,無加分情況則不如不加。 
          本期教程就到這里了,如果有用,記得三連,感謝老鐵,告辭!

           

          原文地址:胡曉波工作室(公眾號)

          作者:猴子

          轉載請注明:學UI網》【字體設計】品牌標準字怎么設計?

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          截屏2021-05-13 上午11.41.03.png

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、

          UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司



          日歷

          鏈接

          個人資料

          藍藍設計的小編 http://www.syprn.cn

          存檔

          亚洲va欧美va天堂v国产综合