路野TK

前面兩期我分享了,為什么需要設計語言,對內對外有哪些幫助,同時和大家分享了,在做設計語言之前我們先要建立設計原則,以及設計原則下面的設計關鍵詞,通過設計關鍵詞推導出對應的視覺表現手法,也就是通常我們所說的,形,色,字,構,質。那么今天我們就直接進入正題,在前面我們定義好了,設計原則和關鍵詞,那么接下來應該如何去做?

 

如何去做?

根據原子定律(不懂原子定律同學可以搜索原子設計方法)我們從頁面中最細小的元素入手,也可以理解為頁面中無法再拆分的元素開始,它是組成界面最基礎的元素,從最基礎的元素,開始做統一性,本次我將從顏色,字體,網格說起。

?

顏色?

從顏色開始,需要根據整個頁面中場景進行顏色定義,同樣色彩也需要根據我們定義的關鍵詞去推導,在定義顏色過程中,可以參加色彩心理學原理,以及競品分析:

  • 高品質:深色配色,黑白,中性的配色
  • 全球化:深邃紫色,科技藍,自然綠
  • 年輕化:漸變色,馬卡龍撞色

在定義了上述大的色彩原理下,需要對界面中使用場景進行梳理得出下列大概色彩類型:

當然也可以定義一些界面中常用漸變色板,現在很多網站也有很多很好看的漸變可以去嘗試。

也可以定義一些圖片上放文字效果,疊加什么顏色,顏色的模式是什么樣的,透明度是多大,這些都可以幫助我們定義好一套色彩體系。

當然還有一些很不錯的色板,如果你不知道怎么配色,也不知道當下流行色是怎么樣,也可以從這些色板里面選擇一個配色,挑選一些符合你們產品的配色。

?https://www.materialui.co/

?https://coolors.co/

?http://colorsupplyyy.com/app/

 

字體?

字體是界面中用戶看到最多的一些元素,除了定義界面中的字體,同時我們也要定義界面下的字體,包括線下物料宣傳等,在字體選擇上,需要注意:

  1. 信息傳遞是否足夠清晰,字體也是有情感的,字體表達的情感是否和我們界面中需求是一致的。
  2. 個性上,有的字體很方正,筆直,有的字體筆劃比較活潑,那么不同字體我們如何去選擇,同樣需要在前面大的設計關鍵詞下面去設計。

對于字體選擇,一定要根據產品關鍵詞去定義,以上是界面中常用一些英文和中文字體,每種字體雖然大體看差不多,其實每個字體,細看其實有些筆畫上的差異!我個人建議蘋方字體和Helvetica Neue比較通用性更強,中文字體包比較大,特殊產品如果需要有個性化中文字體,需要注意字體大小包處理!

 

字號?

字號是界面中很重要元素,字號大小決定了信息的層次和層次,在扁平化設計中,字號越來越重要,好的字號設置能讓界面更加清晰一致性強!相反差的字號會讓界面看起來山寨,關于字號的選擇,可以遵循iOS的規范大小,也可以根據自己產品個性去定義你的字號。

假如你是電商產品,那么你可能需要對價格字體單獨設置字號,如果你是金融產品,那么對應的字號也需要定義好對應的大小層級!

?對于特殊字體的處理(375分辨率)

?常用的5種字體節奏(375分辨率)

?特殊數字或圖形化字號(375分辨率)

 

行高?

參考3C原理,不明白可以百度搜,英文的行高是字號的1.2倍,但是中英文字體原因,中文字體一般是1.5-2倍之間,我們需要充分考慮不同人群特點,老人,兒童,年輕人,以及使用環境。

英文的行高一般為字體1.2倍,比如你字號是20號,那么行高24,當然也有很多國外設計師采用黃金比例的行高,比如1.414倍,1.618倍,1.717倍數等等,行高大小,正如我前面所說,需要充分考慮你整個界面的節奏,和內容以及用戶人群來定義是需要緊湊還是疏密!

中文常用的行高,一般為字體大小的1.5倍比較合適,當然也可以一些簡單的做法,就是字號+4原則,比如你字號是20,你的行高24,字號28,行高32也是可行的,每個團隊可以根據需求去定義。

 

字重?

字重,顧名思義就是字體粗細,越來越多的產品需要通過字體粗細來拉開信息層次,當下主流趨勢iOS11中也是通過字重來拉開信息層級的,所以在定義字體規范時候也需要重復考慮進去什么時候用什么字體。

 

網格系統?

這塊知識相對比較復雜,我這邊簡單分享下,我想大多數同學都經歷過這個情況,拿到其他設計師源文件,間距混亂,一會邊距20,一會24,一會32,特別混亂,原因在于大家間距沒有去詳細定義它的規則。

 

看看別人怎么做的?

?Airbnb的規范中,對于間距的定義,沒有像其他規范那樣,只定義一個最小單位數值,而是定義了5種彈性間距,8,16,24,48,64在他的全部設計里面,包括元素和元素之前,圖文之間都是運用這一套間距規則,保證了整個界面的統一性。

?這是國外運用比較多的8點網格,Airbnb在這個基礎上進行了進一步的簡潔,只保留了8,16,24,48,64

?國外有項數據表明,設計師在運用8為最小單位做設計時候,一般常用間距有哪些,最后定義了5種常用間距規則。

所以,我們在規范時候,一定不要運用太多的間距規則,否則間距,很難得到控制和統一,建議定幾種間距,你可以是8,16,24,48,64,如果你覺得這些間距不夠用,你也可以添加新的間距規則進行,但是建議不要太多。

 

網格設計策略?

1.定最小單位

先定義最小單位,單位越小頁面越緊湊,目前常用比較多的有,4,5,8,假設我們最小單位是4為倍數,那我們所有的間距都按照8的倍數遞增,得到間距規則,8,16,20,40,60

?https://designsystem.quickbooks.com/foundations/spacial-units/

 

2.按增量設計

?界面中所有的間距地方,全部運用8,16,20,40,60這幾個原則來做設計,保證頁面統一性。

?頁面中的元素高度,比如banner高度也是按照間距增量去設計高度,那么整個頁面就更加有系統性和科學性。

?在做系統設計時候經常用到的,通過增量來做設計,希望大家都可以掌握這種間距原則!

 

圖形?

圖形是界面中的靈魂,圖形也是很好傳遞視覺語言很重要的一部分,如何保證圖形一致性,打造界面中視覺記憶點,這個點很大,展開來講很多,包括品牌符號,icon插畫元素一系列等等。

 

總結?

設計語言是一個很龐大的設計體系,字體,網格系統,顏色,圖形等等,包括后面定義好原子后,怎么定義組件,再到頁面。文章里借鑒了一些國外設計語言網站,大家感興趣,也可以從這些網站里學習下,看看別人是如何做的。

 

原文地址:我們的設計日記(公眾號)
作者:sky

 

轉載請注明:學UI網 » 做設計很6的都私藏了!超詳細的設計規范全攻略(下)

登錄收藏
 
你可能喜歡的:
以Ant Design為例來說說B端設計的基本套路以Ant Design為例來說說B端設計的基本套路
產品中出現這3大問題,說明你的引導沒有做好?產品中出現這3大問題,說明你的引導沒有做好?
原創 | 我是如何在初創公司成功建立一套設計規范系統的原創 | 我是如何在初創公司成功建立一套設計規范系統的
無從下手的界面,到底是哪些因素阻擋了你?無從下手的界面,到底是哪些因素阻擋了你?
詳解大廠UI設計規范制作步驟(中)詳解大廠UI設計規范制作步驟(中)
像蘋果Google一樣做設計語言,帶你了解全流程(上)像蘋果Google一樣做設計語言,帶你了解全流程(上)
千頭萬緒!該如何解決產品遺留的一致性問題千頭萬緒!該如何解決產品遺留的一致性問題
原創 | 8點柵格系統總結歸納和用法原創 | 8點柵格系統總結歸納和用法
0-1系列:定義組件庫與實現高效同步0-1系列:定義組件庫與實現高效同步
《設計系統》 第一章, 標準的力量《設計系統》 第一章, 標準的力量
?
天津十一选五app