UI設(shè)計中的規(guī)范總結(jié)

時間：2023-09-11 07:48:01 | 來源：網(wǎng)站運(yùn)營

時間：2023-09-11 07:48:01 來源：網(wǎng)站運(yùn)營

UI設(shè)計中的規(guī)范總結(jié)：內(nèi)容大綱

一、設(shè)計規(guī)范的重要性
二、認(rèn)識界面設(shè)計規(guī)范
三、設(shè)計規(guī)范的構(gòu)成
四、如何建立設(shè)計規(guī)范
五、彩蛋規(guī)范文檔資源



?設(shè)計規(guī)范的重要性?


所謂無規(guī)矩不成方圓，規(guī)范和秩序存在我們生活中的方方面面，工業(yè)時代有企業(yè)制定出標(biāo)準(zhǔn)化的流水線使效率成倍提升，互聯(lián)網(wǎng)時代各大一線知名互聯(lián)網(wǎng)公司谷歌和蘋果也都有著自己的設(shè)計規(guī)范，大到平臺以及系統(tǒng)小到單個產(chǎn)品。做為互聯(lián)網(wǎng)設(shè)計師都知道好的規(guī)范可以提升效率、保持統(tǒng)一、提升精細(xì)度，那么什么樣的規(guī)范是好的設(shè)計規(guī)范呢？
產(chǎn)品不同階段規(guī)范的作用也有所區(qū)別，在產(chǎn)品初期規(guī)范的主要保障后續(xù)設(shè)計的高效和可擴(kuò)展性，隨著產(chǎn)品的擴(kuò)展以及人員的增加會在這個時候不僅要延續(xù)之前的高效和可擴(kuò)展性，同時還要方便查閱，以及便于設(shè)計與設(shè)計設(shè)計與程序的之間交接減少重復(fù)勞動，還需要保持整個產(chǎn)品不同頁面的視覺語言統(tǒng)一性和控件組件及交互方式的一致性，大致可以總結(jié)為以下三點(diǎn)。


?認(rèn)識設(shè)計規(guī)范?


“設(shè)計規(guī)范"并不陌生，網(wǎng)上也可以搜到很多設(shè)計規(guī)范，但是這些設(shè)計規(guī)范真的適合我所做的產(chǎn)品嗎？什么樣的設(shè)計規(guī)范是好的設(shè)計規(guī)范呢？這里先放一波比較知名的規(guī)范，熟知的有谷歌的Material Design、蘋果的Apple Developer、以及Ant Design、Element等....我習(xí)慣把這些規(guī)范分類為系統(tǒng)平臺級規(guī)范和產(chǎn)品業(yè)務(wù)設(shè)計規(guī)范


圖片（Material Design）

圖片（Apple Developer）

圖片（Ant Design）：瞄準(zhǔn)“四小”小生日、小聚會、小白領(lǐng)、小家庭


tips：你是不是把那上面那些鏈接都打開看了一遍了呢？想必機(jī)智的你已經(jīng)看過上面的規(guī)范網(wǎng)站了，也對規(guī)范有了一定的了解。

?設(shè)計規(guī)范的構(gòu)成?

回觀幾大一線互聯(lián)網(wǎng)公司的設(shè)計規(guī)范和視覺語言大致可分為設(shè)計原則和基本視覺元素和構(gòu)成。



設(shè)計原則：表現(xiàn)產(chǎn)品傳遞出的特征、氣質(zhì)、風(fēng)格，通過情緒版等方法論梳理出表現(xiàn)這種特征、氣質(zhì)、風(fēng)格的視覺表現(xiàn)形式為了達(dá)到一致性所需要遵守的一種視覺表現(xiàn)形式。 一般設(shè)計原則包括界面布局、對齊、對比、重復(fù)、親密、平衡。

基本視覺元素：基本視覺元素即組成界面所需要的元素，一般由線條、圖形、圖標(biāo)、明暗、色彩、質(zhì)感、空間等，也還有一些比較重要但經(jīng)常被忽略的隱性元素例如對齊線、間距、留白等，各個元素表現(xiàn)方式不同所傳遞出的注目度也有所不同。



?如何建立設(shè)計規(guī)范?

拆解了設(shè)計規(guī)范的構(gòu)成了解界面的構(gòu)成的基本組成元素有哪些后可以更好的來幫助我們來構(gòu)建設(shè)計規(guī)范。以原子設(shè)計原理五步走來構(gòu)建規(guī)范，五步分別由原子——分子——組件——模塊——模塊。






1、定義基礎(chǔ)規(guī)范這里可理解為定義原子主要包括文字字號字重、色彩色調(diào)、圖標(biāo)層次形式等界面重最小構(gòu)成單位，歸納界面中的信息層級有秩序的提煉出來。







2、分子由原子組合形成的簡單的界面組件例如按鈕（由文字加一個矩形），或文本框（由一個矩形和一個提示文本）






3、組件 界面中比較通用由原子和分子組成相對復(fù)雜的界面元素（例如導(dǎo)航欄、列表、卡片等）

4、模塊由原子、分子、組件進(jìn)行組合排列形成的內(nèi)容結(jié)構(gòu)

5、頁面將實際內(nèi)容套件在特定的模版，頁面是模版的具體實例，最后是整體的頁面。




彩蛋來啦！?。? 彩蛋來啦?。?！ 彩蛋來啦?。?！

后臺回復(fù)“規(guī)范”領(lǐng)取為你精心準(zhǔn)備的各大平臺規(guī)范源文件吧?。?！