什么是網(wǎng)頁(yè)ui設計規范？（制定網(wǎng)頁(yè)ui設計規范的9大策略）

設計語(yǔ)言是什網(wǎng)i設??i設一個(gè)很龐大的設計體系，包括字體、頁(yè)u頁(yè)網(wǎng)格系統、計規計規顏色、范制范圖形等等，定網(wǎng)大策(ce)而筆者在本文(wen)中也分享了相關(guān)的什網(wǎng)i設i設設計原則與關(guān)鍵詞，希(′?ω?`)望對你有所啟發(fā)。頁(yè)u頁(yè)

前面兩期我分享了，計規計規為什么需要設計語(yǔ)言，范制范對內對外有哪些幫助，定網(wǎng)大策同時(shí)和大家分享了，什??網(wǎng)i設i設在做設計語(yǔ)言之前我們先要建立設計原則，頁(yè)u頁(yè)以及設計原則下面的計規計??規設計關(guān)鍵詞，通過(guò)設計關(guān)鍵詞推導出對應的范制范視覺(jué)表現手法，也就是定網(wǎng)大策通常(chang)我們所說(shuō)的，形、色、字、構、質(zhì)。??

那么今天我們就直接進(jìn)入正題，在前面我們定義好了，設計原則和關(guān)鍵詞，那么接下來(lái)應該如何去做？

根據原子定律（不懂原子??定律同學(xué)可以搜索原子設計方法）我們從頁(yè)??面中最??(zui)細小的元素入手，也可以理解為頁(yè)面中無(wú)法再拆分的元素開(kāi)始，它是組成界面最基礎的元素，從最基礎的元素，開(kāi)始做統一性，本次我(′Д` )將從顏色，字體，網(wǎng)格說(shuō)起。

從顏色開(kāi)始，需要根據整個(gè)頁(yè)面中場(chǎng)景進(jìn)行顏色定義，同樣色彩也需要根據我們定義的關(guān)鍵詞去推導，在定義顏(???)色過(guò)程中，可以參加色彩心理學(xué)原理，以及競品分析：

在定義了上述大的色彩原理下，需要對界面中使用場(chǎng)景進(jìn)行梳理得出下列大概色彩(′ω｀)類(lèi)型：

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

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

當然??還(′?｀)有一些很不錯的色板，如果你不知道怎么配色，也不知道(dao)當下流行色是怎么樣，也可以從這些色板里面選擇一個(gè)配色，挑選一些符合你們產(chǎn)品的配色。

字體是界面中用戶(hù)看到最多的一些元素，除了定義界面中的字體，同時(shí)我們也要定義界面下的字體，包括線(xiàn)下物料宣傳等，在字體選擇上，需要注意：

對于字體選擇，一定要根據產(chǎn)品關(guān)鍵詞去定義，以(′▽?zhuān)?上是界面中(zhong)常用一些英文和中文字體，每種字體雖然大體看差不多，其實(shí)每個(gè)字體，細看其實(shí)有些筆畫(huà)上的差異！

我個(gè)人建議蘋(píng)??方字體和??Helvetica Neue比較通用性更強，中文字體包比較大，特殊(???)產(chǎn)品如果需要有個(gè)性化中文字體，需要注意字體大小包處理！

字號是(shi)界面中很重要元素，字號大小決定了信息的層次和層次，在扁平化設計中，字號越來(lái)越重要，好的字號設置能讓界面更加清晰一致性強！相反差的字號會(huì )讓界面看起來(lái)山寨，關(guān)于字號的選擇，可以遵循ヽ(′▽?zhuān)?ノiOS的規范大小，也可以根據自己產(chǎn)品??個(gè)性去定義你的字號。

假如你是(′?_?`)電商產(chǎn)品，那么你可能需要對價(jià)格字體單獨設置字號，如果你是金融產(chǎn)品，那么對應(ying)的字號也需要定義好對應的大小??層級！

對于特殊字體的處理（375分辨率）

特殊數字或圖形化字號（375分辨率）

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

英文的行高一般為字體1.2倍，比如你??字號是20號，那么行高24，當然也有很多國外設計師采用黃金ヽ(′ー｀)ノ比例的行高，比如1.414倍，1.618倍，1.717倍數等等。

行高大小，正??如我前面所說(shuō)，需要充分考慮你整個(gè)界面的節奏，和內容以及用戶(hù)人群來(lái)定義是需要緊湊還是疏密！

中文常用的行高，一般為字體大小的1.5倍比較合適，當然也可以一些簡(jiǎn)單的做法，就是字號+4原則，比如你字號是20，你的行高24，字號28，行高32也是可行的，每個(gè)團ヽ(′ー｀)ノ隊可以根據需求去定義。

字重，顧??(′_｀)名思義就是字體粗細，越來(lái)越多的產(chǎn)品需要通過(guò)字體粗細來(lái)拉開(kāi)信息層次，當下主流趨勢iOS???11中也是通過(guò)字重來(lái)拉開(kāi)(kai)信(′_ゝ`)息層級的，所以在定義字體規范時(shí)候也需要重復考慮進(jìn)去什么時(shí)候用什么字體(ti)。

這塊知識相對比較復雜，我這邊簡(jiǎn)單分享下，我想大多數同學(xué)都經(jīng)歷過(guò)這個(gè)情況，拿到其他設計師源文件，間距混亂，一會(huì )邊距20，一會(huì )24，一會(huì )32，特別混亂，原因在于大家間距沒(méi)有去詳細定義它的規則。

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

這是國外運用比較多的8點(diǎn)網(wǎng)格，Airbn(◎_◎;)b在這個(gè)基礎上進(jìn)行了進(jìn)一步的簡(jiǎn)潔，只保留了8，16，24，48，64

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

所(′▽?zhuān)?以，我們在規范時(shí)候┐(′д｀)┌，一定不要運用太多( ?ヮ?)的間距規則，否則間距，很難得到控制和統一，建議定幾種間距，你可以是8，16，24，48，64，如果你覺(jué)得這些間距不夠用，你(ni)也可以添加新的間距規則進(jìn)ヽ(′▽?zhuān)?/行，但是建議不要太多。

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

界面中所有的間距地方，全部運用8，16，20，40，60這幾個(gè)原則來(lái)做設計，保證頁(yè)面統一性。

頁(yè)面中的元素高度，比如(ru)baヽ(′▽?zhuān)?/nner高度也是按照間距增量去設計高度，那么整個(gè)頁(yè)面就更加有系統性ヾ(′?｀)?和科學(xué)性。

在做系統設計時(shí)候經(jīng)常用到的，通過(guò)增量來(lái)?做設計，希望ヽ(′ー｀)ノ大家都可以掌握這種間距原則！

圖形是界面中的靈魂，圖形也是很好傳遞視覺(jué)語(yǔ)言很重要的一部分，如何保證圖形一致性，打造界面中視覺(jué)記憶點(diǎn)，這ヽ(′▽?zhuān)?ノ個(gè)點(diǎn)很大，展開(kāi)來(lái)講很多，包括品牌符號、icon插畫(huà)元素一系列等等。

設計語(yǔ)言是一個(gè)很龐大的設計體系，字體、???網(wǎng)格系統、顏色、圖形等等，包括后面定義好??原子后、怎么定義組(zu)件，再到頁(yè)面。

文章里借鑒了一些國外設計語(yǔ)言網(wǎng)站，大家感興趣，也可以從這些網(wǎng)站里學(xué)習下，看看別人是如何做的。

像蘋(píng)果Googヽ(′▽?zhuān)?ノle一樣做設計語(yǔ)言，(//ω//)帶你了解全流程詳解大廠(chǎng)的UI設計( ?° ?? ?°)規范制作步驟

Sky，微信公眾號：我們的設計日記（ID：helloskys），設計交流可加微信：hellosky678，人人都是產(chǎn)品經(jīng)理專(zhuān)欄作家。支付寶體驗設計專(zhuān)家，阿里巴巴天貓設計專(zhuān)家；10年知名互聯(lián)網(wǎng)公司設計經(jīng)驗，對于產(chǎn)品從0到1、品牌定位、金融產(chǎn)品、設計規范、運營(yíng)規范、大促等有豐富實(shí)戰經(jīng)驗。