用戶界面的設(shè)計(jì)很容易出現(xiàn)一團(tuán)亂。這是因?yàn)樵谡麄€(gè)項(xiàng)目中你可以從某個(gè)樣式開始，而以另一個(gè)樣式收尾。不管你是專業(yè)導(dǎo)向設(shè)計(jì)師還是業(yè)余設(shè)計(jì)師，設(shè)計(jì)稿的前后矛盾都可能會(huì)發(fā)生。但是別擔(dān)心，UI設(shè)計(jì)規(guī)范的制定會(huì)幫你避免這些問題的發(fā)生。

設(shè)計(jì)規(guī)范制定的前期工作

我們花費(fèi)大量時(shí)間在制作原型上，而這些在后期往往沒有被利用到。我們繪制大量的UI控件包括地圖、工具提示、輸入框、按鈕或者導(dǎo)航欄。不同時(shí)期完成的設(shè)計(jì)將會(huì)導(dǎo)致差異性的發(fā)生從而影響到用戶界面和用戶體驗(yàn)的整體設(shè)計(jì)。一開始就定義好元素樣式并允許這些樣式的繼承關(guān)系，將節(jié)省下時(shí)間和統(tǒng)一產(chǎn)品的風(fēng)格設(shè)計(jì)。

wireframe

我們?cè)O(shè)計(jì)太多的樣式表給前端開發(fā)者實(shí)現(xiàn)。因?yàn)樵O(shè)計(jì)師是獨(dú)立設(shè)計(jì)樣式表的，我們可能有時(shí)設(shè)計(jì)40px大小的按鈕又或有時(shí)46px大小。我們?cè)诒馄交蛿M物化的效果中不能自拔，舉例子，搜索欄的設(shè)計(jì)就可以有多達(dá)三種以上的變化。這對(duì)于前端開發(fā)者不僅是噩夢(mèng)更在實(shí)現(xiàn)上耗費(fèi)大量的時(shí)間。

項(xiàng)目的中斷會(huì)導(dǎo)致前后不一致問題的發(fā)生。例如在打車軟件上有兩種用戶模式的登錄。我們一開始設(shè)計(jì)乘客模式的用戶界面，過了三個(gè)星期后，項(xiàng)目組決定設(shè)計(jì)司機(jī)模式的用戶界面。到了這個(gè)時(shí)候，我才發(fā)現(xiàn)，司機(jī)模式下的樣式和界面設(shè)計(jì)呈現(xiàn)完全不一樣的設(shè)計(jì)效果。

two-modes

在開發(fā)者和設(shè)計(jì)師間花費(fèi)大量時(shí)間在交流上。我們?cè)谠蛨D上并沒有明確給出微小的設(shè)計(jì)細(xì)節(jié)（例如margining,padding,alignment,weight,radius等）。如果沒有給出這些設(shè)計(jì)細(xì)節(jié)，開發(fā)者將不能完美還原設(shè)計(jì)圖。因此，我們需要和每一位開發(fā)者討論相關(guān)的UI設(shè)計(jì)細(xì)節(jié)以及后續(xù)產(chǎn)生的設(shè)計(jì)圖變化等。

我們沒有設(shè)計(jì)規(guī)則指引開發(fā)者。每一次開始項(xiàng)目的新內(nèi)容時(shí)，開發(fā)者將實(shí)現(xiàn)另外一種新的界面圖。這樣導(dǎo)致創(chuàng)新和靈感發(fā)生在項(xiàng)目結(jié)束的時(shí)候而不是一開始的時(shí)候。

那我們應(yīng)該怎么開始呢？

方法很簡單就像跳過一個(gè)步驟一樣。沒有輪廓就寫一本書是不可能的。我們需要大體結(jié)構(gòu)——設(shè)計(jì)規(guī)范。

guideline-mockups

我們制作第一版設(shè)計(jì)規(guī)范來檢查已完成的項(xiàng)目和定制管理谷歌material設(shè)計(jì)規(guī)范。我們利用設(shè)計(jì)規(guī)范重設(shè)計(jì)每一個(gè)項(xiàng)目來改善整體的UI設(shè)計(jì)。我們反反復(fù)復(fù)測試是為了是設(shè)計(jì)規(guī)范更符合標(biāo)準(zhǔn)。、

當(dāng)你改變一處時(shí)，也就意味著改變?nèi)俊?/strong>我們使用Sketch Symbol或者設(shè)置樣式例如數(shù)值、主題、標(biāo)題等來達(dá)到這個(gè)目的。這個(gè)能很大程度提高效率。樣式共享能保證前后設(shè)計(jì)的一致性。

Symbol

share-style

圖層優(yōu)先級(jí)設(shè)置。在CSViz項(xiàng)目中最關(guān)鍵的規(guī)則是使用不同的陰影深度來表現(xiàn)3D空間范圍內(nèi)的物體，這樣可以做到信息優(yōu)先。我們使用z-index屬性來實(shí)現(xiàn)。優(yōu)先級(jí)越高，z-index的屬性值也就越大。

地圖設(shè)計(jì)是一個(gè)比較復(fù)雜的界面，因?yàn)樗煌N類的元素：地圖、地圖控件、搜索欄、時(shí)間軸、工具提示以及側(cè)欄的數(shù)據(jù)可視化。我們并不想讓這些元素一團(tuán)亂，因而將它們的優(yōu)先級(jí)設(shè)置成很高使其變得重要。

depth

所有設(shè)備的可用性。很不幸的是，沒有一套設(shè)計(jì)規(guī)范能滿足所有的設(shè)備。我們學(xué)習(xí)谷歌的設(shè)計(jì)規(guī)范來尋找不同設(shè)備的不同樣式設(shè)計(jì)間的聯(lián)系，發(fā)現(xiàn)Material設(shè)計(jì)規(guī)范通常結(jié)合手機(jī)和桌面使用但有時(shí)它只講如何在手機(jī)上使用這些UI元素，而在桌面的設(shè)計(jì)中并沒有提及。

我們還發(fā)現(xiàn)在每一臺(tái)設(shè)備上（臺(tái)式電腦、手提電腦、手機(jī)）制作樣式能保證設(shè)計(jì)的整體性。

mobile and desktop

怎樣制作UI設(shè)計(jì)規(guī)范

在所有的設(shè)備上標(biāo)準(zhǔn)化UI對(duì)我們來說是很大的挑戰(zhàn)。審判和錯(cuò)誤中我們發(fā)現(xiàn)團(tuán)隊(duì)工作的杠桿影響作用是不可替代的。設(shè)計(jì)團(tuán)隊(duì)向開發(fā)者直接學(xué)習(xí)如何在現(xiàn)實(shí)生活中實(shí)現(xiàn)樣式。我們經(jīng)常問到開發(fā)者的一些問題：

當(dāng)瀏覽器大小變化時(shí)，將會(huì)發(fā)生什么？
在圖表里增加漸變背景需要花多長時(shí)間？
有可能使得網(wǎng)頁版手機(jī)app表現(xiàn)得更像本土app嗎？

設(shè)計(jì)規(guī)范應(yīng)該在整個(gè)團(tuán)隊(duì)中起作用而不是只針對(duì)設(shè)計(jì)師。

這不是你在dribbble看到的喜歡UI庫那么簡單。設(shè)計(jì)規(guī)范是整個(gè)設(shè)計(jì)團(tuán)隊(duì)溝通設(shè)計(jì)目標(biāo)的視覺語言，它應(yīng)該使得每個(gè)人都能理解并且懂得如何使用。

@Yuki Gu