UI設(shè)計(jì)規(guī)范有哪些？

UI設(shè)計(jì)規(guī)范有哪些?我們?cè)谧龌ヂ?lián)網(wǎng)產(chǎn)品中，有的是以產(chǎn)品功能，但大部分以項(xiàng)目為緯度進(jìn)行分割。在產(chǎn)品1.0后，設(shè)計(jì)團(tuán)隊(duì)需要UI設(shè)計(jì)師建立規(guī)范，如果你所在的產(chǎn)品團(tuán)隊(duì)有2個(gè)以上的UI同學(xué)。那可能在1.0還沒(méi)開(kāi)始，一套好的UI規(guī)范就是需要立馬做的。

UI的設(shè)計(jì)規(guī)范總共可以分為三類(lèi)：

品牌類(lèi)(VI)

幫助企業(yè)做的宣傳手冊(cè)、PPT、市場(chǎng)公關(guān)等pr文件，企業(yè)的整體形象顏色。就好比你現(xiàn)在看到的瓜子二手車(chē)，綠色是整個(gè)的顏色。

平臺(tái)、系統(tǒng)類(lèi)

常見(jiàn)的是IOS、谷歌、開(kāi)放平臺(tái)、小程序等，需要第三方開(kāi)發(fā)者介入，需要第三方的開(kāi)發(fā)者在設(shè)計(jì)上遵循什么理念，以及遵循該套理念后的背景與原因、好處。

產(chǎn)品業(yè)務(wù)類(lèi)

面向產(chǎn)品內(nèi)部，規(guī)則側(cè)重在產(chǎn)品設(shè)計(jì)和實(shí)現(xiàn)層面，實(shí)用性第一。設(shè)計(jì)文檔、標(biāo)注都不能少，其他設(shè)計(jì)同學(xué)或工程師可以直接參考或使用。

設(shè)計(jì)互聯(lián)網(wǎng)產(chǎn)品，StyleGuide/Patternlibrary、Specification各具不同的功能和作用，卻都含“設(shè)計(jì)規(guī)范”的概念。

StyleGuide

偏重視覺(jué)概念，常見(jiàn)文檔或圖像格式呈現(xiàn)(還可以擴(kuò)展)

內(nèi)容：對(duì)設(shè)計(jì)作品的字體(Typeface)、字型(Font)、色板、品牌標(biāo)識(shí)規(guī)范(BrandGuideline)、Icon等要素進(jìn)行展示和說(shuō)明這個(gè)部分主要的功能是方便設(shè)計(jì)師與設(shè)計(jì)師之間，展示產(chǎn)品的視覺(jué)風(fēng)格。方便風(fēng)格復(fù)用，規(guī)范新的元素或第三方接入。

PatternLibrary:

偏重(web前端)開(kāi)發(fā)概念，基本都是以網(wǎng)頁(yè)文檔形式呈現(xiàn)

內(nèi)容：對(duì)界面元素(UIElements)的樣式風(fēng)格以及實(shí)現(xiàn)其效果所對(duì)應(yīng)的代碼片段作出解釋(HTML、CSS)，常見(jiàn)的布局(GridSystem)、字體排版(Typography)、按鈕、菜單、列表、對(duì)話(huà)框(Dialog)、Toolip等等。

可以幫助團(tuán)隊(duì)Web設(shè)計(jì)和協(xié)作開(kāi)發(fā)，統(tǒng)一產(chǎn)品風(fēng)格。減少UI還原與驗(yàn)收的工作，增加用戶(hù)體驗(yàn)與較初設(shè)計(jì)稿一致。

Specification(Spec)

介于設(shè)計(jì)與開(kāi)發(fā)之間，由設(shè)計(jì)師直接在(mockup)中創(chuàng)建

內(nèi)容：主要由Annotation(注釋?zhuān)瑖?guó)內(nèi)俗稱(chēng)“標(biāo)注”)和Measurement(量度)構(gòu)成。其實(shí)說(shuō)白了就是我們常規(guī)研發(fā)中的讓UI切圖，是開(kāi)發(fā)與設(shè)計(jì)人員較直接的交流。通過(guò)切圖，我們可以把字體字型、色紙。