APP為何要制定設(shè)計(jì)規(guī)范
作為UI設(shè)計(jì)師，整理設(shè)計(jì)規(guī)范也是設(shè)計(jì)能力的一種體現(xiàn)。但很多小公司的設(shè)計(jì)師都覺得, 整個(gè)公司只有自己一個(gè)設(shè)計(jì)師, 所有的設(shè)計(jì)稿都是自己一個(gè)人做的, 風(fēng)格肯定都是統(tǒng)一的, 所以沒必要花那么長(zhǎng)時(shí)間去做一個(gè)沒有用的東西。
但其實(shí)規(guī)范的本身并不是只給設(shè)計(jì)師用的, 他更大的作用是對(duì)于整個(gè)團(tuán)隊(duì), 比如方便和開發(fā)之間的溝通, 幫助他們制作統(tǒng)一的組件, 以后用到的時(shí)候直接調(diào)用。
而對(duì)于設(shè)計(jì)師來說, 也不用重復(fù)做圖、重復(fù)標(biāo)注, 改動(dòng)一個(gè)的時(shí)候就能同步所有, 大大提高了工作效率。所以，無論是自己設(shè)計(jì)創(chuàng)作的階段還是和程序員溝通推動(dòng)產(chǎn)品開發(fā)階段，你的設(shè)計(jì)規(guī)范是否完善，對(duì)產(chǎn)品的質(zhì)量起著決定性的關(guān)鍵作用。
在UI設(shè)計(jì)的過程中，設(shè)計(jì)規(guī)范是一個(gè)關(guān)鍵步驟。今天為大家整理了設(shè)計(jì)規(guī)范中的分類情況，UI設(shè)計(jì)規(guī)范有幾大分類組成，分別是：尺寸、標(biāo)準(zhǔn)色、字號(hào)、段落設(shè)置、圖標(biāo)、圖片、間距、圓角值、大小、陰影、組件等。
設(shè)計(jì)圖尺寸
雖說現(xiàn)在大多數(shù)人都是以750 (@2x) 為設(shè)計(jì)稿, 但是也還是有人720 (@2x) 的尺寸, 或是375 (@1x) 的尺寸, 比如我就是用的720,所以設(shè)計(jì)之初最先要定一個(gè)統(tǒng)一的設(shè)計(jì)尺寸, 特別是多個(gè)設(shè)計(jì)師合作的時(shí)候, 千萬不要想當(dāng)然的以為別人都和你一樣。
間距大小
間距包括頁(yè)邊距、模塊與模塊之間的間距, 這種全局的間距大小必須要一致, 頁(yè)邊距的大小很好定, 基本上20、24、32居多, 根據(jù)產(chǎn)品特性定一個(gè)統(tǒng)一的就好。
而模塊與模塊之間的間距就相對(duì)復(fù)雜一點(diǎn), 在定之前需要先確定模塊之間的分割方式, 是用線、還是面、還是留白, 然后再確定間距。
確定好模塊與模塊之間的分割方式后，還需要確定模塊內(nèi)部的，確定之后就要嚴(yán)格執(zhí)行。
比如規(guī)范定的模塊與模塊之間用線，模塊內(nèi)部之間用留白，那后續(xù)所有頁(yè)面都需要按照這個(gè)規(guī)則來（特殊情況除外）。
顏色是設(shè)計(jì)最重要的部分，沒有之一。細(xì)節(jié)決定品質(zhì)，所以對(duì)顏色的運(yùn)用格外細(xì)致，顏色的搭配直接決定產(chǎn)品的品質(zhì)感。包括基礎(chǔ)標(biāo)準(zhǔn)色（主色）、基礎(chǔ)文字色, 還應(yīng)該包括全局標(biāo)準(zhǔn)色（背景色、分割線色值等）這些都需要標(biāo)好色值以及使用的場(chǎng)景。
當(dāng)顏色是漸變的時(shí)候, 也需要標(biāo)清楚漸變的顏色。
對(duì)顏色值統(tǒng)一規(guī)范命名變量，提高開發(fā)效率的同時(shí)更好的維護(hù)設(shè)計(jì)規(guī)范。
在前端開發(fā)中，對(duì)顏色值進(jìn)行編號(hào)，這樣對(duì)代碼也有著極大的優(yōu)化。定義一個(gè)設(shè)計(jì)規(guī)范的CSS樣式庫(kù)，開發(fā)過程中就不用重復(fù)修改CSS參數(shù)值，直接引用定義好的變量名就可以，這樣修改設(shè)計(jì)規(guī)范的成本大大降低。
字體是設(shè)計(jì)中必不可少的考慮因素，不同的字體氣質(zhì)不一樣，并且不同場(chǎng)景下帶給人的感受也不一樣。所以需要在設(shè)計(jì)的時(shí)候考慮到字體的設(shè)計(jì)效果，然后在設(shè)計(jì)規(guī)范中注明。
在定義字體名稱的同時(shí)也定義了字體的風(fēng)格，并且添加了不同字體風(fēng)格的預(yù)覽效果，常見的字體風(fēng)格有：Light、Regular、Italic、Semibold、Bold。
還有一點(diǎn)也不能忘記，那就是行間距，不管是一行文字還是多行文字，我們都需要標(biāo)注清楚行間距，也就是行高，如果是段落的話還需要標(biāo)注段落間距。
所以為了避免團(tuán)隊(duì)的其他成員忽略了文字的行間距，我們需要在做規(guī)范的時(shí)候標(biāo)明，所有文字必須注明行間距。
在實(shí)際的產(chǎn)品設(shè)計(jì)中，段落有很多種樣式，不同場(chǎng)景下的段落要求也不一樣。比如：閱讀內(nèi)容的段落要求文本可閱讀性強(qiáng)，所以對(duì)字體、字號(hào)、顏色、行間距等要求簡(jiǎn)單易讀。而帶有裝飾性的段落文本則不需要那么嚴(yán)謹(jǐn)，裝飾性強(qiáng)就可以。
需要注意的是：在定義段落默認(rèn)字體的時(shí)候還需要定義一個(gè)后備字體，即默認(rèn)字體不能正常顯示情況下顯示的字體。設(shè)計(jì)的水平層次就在于對(duì)細(xì)節(jié)的打磨，這也就是段落規(guī)范在設(shè)計(jì)中存在的意義。
圖標(biāo)具體分為以下三個(gè)作用：
圖標(biāo)是與其它網(wǎng)站鏈接以及讓其它網(wǎng)站鏈接的標(biāo)志和門戶。
圖標(biāo)是網(wǎng)站形象的重要體現(xiàn)。
圖標(biāo)能使受眾便于選擇。根據(jù)圖標(biāo)大小和使用用途進(jìn)行分類整理設(shè)計(jì)規(guī)范，這樣才更清晰明了。
在我們的項(xiàng)目緊急而人員又不足的時(shí)候, 可能沒有那么多時(shí)間，去把所有的圖標(biāo)都畫的精細(xì)，那這個(gè)時(shí)候我們可以先定尺寸。
當(dāng)然這里說的定尺寸不是讓你把頁(yè)面內(nèi)所有圖標(biāo)的尺寸都定好，而是說優(yōu)先定幾個(gè)大的模塊，比如頂導(dǎo)航、底導(dǎo)航、個(gè)人中心的...
等后續(xù)空閑的時(shí)候我們?cè)偃ゼ?xì)化這些圖標(biāo)，開發(fā)也只需要換張圖, 不影響其他。
建議圖標(biāo)尺寸盡量不要過多，比如32、36、40、48 都有, 這樣會(huì)顯得凌亂無序, 而且這些完全可以統(tǒng)一成兩個(gè)大小的, 比如32、48的。
因?yàn)閳D標(biāo)是可以有留白區(qū)域的, 也就說圖標(biāo)本身大小可以是40, 但是切圖尺寸是48。
這樣做的好處就是圖標(biāo)大小種類較少、方便記憶、也顯得專業(yè), 畢竟誰也不希望最后整理出來的規(guī)范, 32的圖標(biāo)2個(gè)、36的圖標(biāo)2個(gè)、40的圖標(biāo)2個(gè), 這樣孤零零的多慘, 所以建議圖標(biāo)尺寸不要太多。
圖片包括 APP 內(nèi)出現(xiàn)的所有圖, 一般情況下都是產(chǎn)品圖和頭像, 但是需要注意的是在制定規(guī)范之前, 要先把圖片比例定好, 常見的比例有 1:1、2:1、4:3、16:9 等等，也是屬于設(shè)計(jì)規(guī)范最重要的部分之一，按照用途分類整理圖片資源，設(shè)計(jì)風(fēng)格系統(tǒng)化。
然后再把每個(gè)模塊所用的圖片大小以及它的比例標(biāo)清楚, 如果圖片有圓角度的話也需要注明。
頭像的尺寸可以定三個(gè)，大中小各一個(gè)，基本體量少的 APP 都?jí)蛴昧恕?/span>
建議 APP 內(nèi)的圖片比例兩到三個(gè)就好, 因?yàn)檫@涉及到后臺(tái)上傳, 比例不一樣的話, 要不然就是開發(fā)需要對(duì)圖片進(jìn)行裁剪、要不然就是需要留不同的接口, 后期分別上傳, 無論哪一種,都是需要額外的人力成本, 所以不要給自己挖坑哦。
7、柵格系統(tǒng)
在設(shè)計(jì)的過程中，我們經(jīng)常會(huì)使用一套規(guī)范的度量標(biāo)準(zhǔn)，來保持產(chǎn)品的一致性，分別為圓角值、間距、大小。
對(duì)度量解釋最好的是設(shè)計(jì)中經(jīng)常使用到的柵格系統(tǒng)（Grid Systems），運(yùn)用固定的格子設(shè)計(jì)版面布局，其風(fēng)格工整簡(jiǎn)潔。這就是我們?cè)诰W(wǎng)頁(yè)和APP設(shè)計(jì)的過程中經(jīng)常使用到柵格系統(tǒng)的原因。
陰影風(fēng)格及參數(shù)也是設(shè)計(jì)規(guī)范中的一部分，在整理設(shè)計(jì)規(guī)范的時(shí)候，需要注意的是陰影的參數(shù)值是網(wǎng)頁(yè)中控制陰影的參數(shù)值，而不是設(shè)計(jì)軟件中的參數(shù)值。
舉個(gè)例子：網(wǎng)頁(yè)中陰影對(duì)應(yīng)的參數(shù)值為：
box-shadow: type:Outset offset X:0px offset Y:4px Blur:8px Spread:0px color:#000000 ，不透明度：10%，這才是程序員需要的陰影參數(shù)值，否則最終開發(fā)出來的陰影會(huì)出現(xiàn)不一致的情況，無法達(dá)到規(guī)范的目的。
9、導(dǎo)航
頂導(dǎo)航
高度、字體大小、顏色、有沒有分割線, 有的話分割線色值 ; 帶不帶圖標(biāo)、多個(gè)圖標(biāo)之間的間距等等。
底導(dǎo)航
底部導(dǎo)航和前面一樣，要放他默認(rèn)和點(diǎn)擊效果圖標(biāo)！
二級(jí)導(dǎo)航
主要是一些篩選類tab, 需要標(biāo)明文字大小、色值、選中后的橫線的大小, 這里橫線的樣式目前常見的有兩種, 一種是固定的短線, 不管上面文字多少, 都是顯示一樣的大小; 還有一種是和文字一樣長(zhǎng)的, 無論哪一種, 事先都需要定義一下規(guī)則。
常用的UI組件（Component）：Button控件、下拉框、選擇框（單選\復(fù)選框）、時(shí)間選擇器、輸入框、搜索框、進(jìn)度條、分頁(yè)器、提示框、警告框、表格、彈出面板、數(shù)字步進(jìn)器、選項(xiàng)卡等。
Button控件
按鈕是最常見的組件之一，按鈕有5個(gè)狀態(tài)：Normal、Hover、Active、Disabled 、Loading。
需要在規(guī)范中分別羅列出這五個(gè)狀態(tài)，標(biāo)注上對(duì)應(yīng)的按鈕填充色、邊框色、圓角值、按鈕寬度和高度，按鈕文本大小、顏色值。如果是圖標(biāo)按鈕的話，除了上述參數(shù)值以外還需要標(biāo)注icon和按鈕文本之間的間距和icon圖標(biāo)的大小。
下拉框：
下拉框是為用戶提供多個(gè)選擇的單選組件，優(yōu)點(diǎn)是用最簡(jiǎn)單的界面布局方式收納了很多的選項(xiàng)，需要注意定義下拉選擇框彈出的時(shí)候，鼠標(biāo)移動(dòng)上去的Normal、Hover、Active狀態(tài)。
選擇框（單選\復(fù)選框）：
顧名思義，單選框是眾多選擇里面選一個(gè)，而復(fù)選框是眾多選擇里面可以無限制選擇。單選框和復(fù)選框都需要三個(gè)狀態(tài)，即未選中狀態(tài)、選中狀態(tài)和不可點(diǎn)擊狀態(tài)。
時(shí)間選擇器：
時(shí)間選擇器是選擇年月日的組件，分別對(duì)應(yīng)年月日星期的信息，在設(shè)計(jì)的時(shí)候需要考慮到4個(gè)狀態(tài)，分別是：Select、Not_Select、Hover和Disable，并且寫進(jìn)設(shè)計(jì)規(guī)范。
輸入框：
輸入文本框是我們軟件產(chǎn)品設(shè)計(jì)必不可少的組件，文本輸入框有4個(gè)狀態(tài)：Normal、Active、Disable和Error。
搜索框：
和輸入框相同的地方是都需要聚焦然后輸入內(nèi)容完成操作，應(yīng)該有為Normal、Active、搜索下拉狀態(tài)、Error狀態(tài)。
進(jìn)度條：
這個(gè)需要在規(guī)范中注明上傳進(jìn)度條的整個(gè)交互操作流程，對(duì)Normal狀態(tài)、點(diǎn)擊上傳/拖拽上傳狀態(tài)、上傳中、上傳成功、上傳失敗，整個(gè)流程狀態(tài)的整理。在上傳過程中，任何用戶操作都應(yīng)該有及時(shí)響應(yīng)的動(dòng)作，這樣用戶在使用的過程中才不會(huì)迷茫。
分頁(yè)器：
分頁(yè)器是用于切換內(nèi)容頁(yè)面的復(fù)合組件，常規(guī)的分頁(yè)器有上下頁(yè)操作按鈕、分頁(yè)頁(yè)碼按鈕、輸入頁(yè)碼手動(dòng)查找的搜索框，以及分頁(yè)器的4個(gè)狀態(tài)：Normal、Hover 、Active、Disabled 。
提示框：
提示框是一個(gè)事件觸發(fā)彈出面板顯示的組件，經(jīng)常使用提示框的地方是，刪除按鈕、疑難問題點(diǎn)、提示類彈出信息等。這個(gè)風(fēng)格設(shè)計(jì)就比較多了，設(shè)計(jì)風(fēng)格各不相同，定義底板樣式、文字樣式和陰影參數(shù)。
警告框：
頁(yè)面報(bào)錯(cuò)時(shí)的顯示樣式，常用的警告類信息是：操作成功、提醒用戶注意、警告用戶注意等。
表格：
表格類信息居多，應(yīng)重點(diǎn)整理表格樣式以及文本顏色大小。
彈出面板：
彈出面板主要由4個(gè)部分組成，分別是面板內(nèi)的文本信息、按鈕、面板大小樣式、蒙版顏色和透明度。
數(shù)字步進(jìn)器：
數(shù)字步進(jìn)器屬于復(fù)合類型的組件，可以理解為按鈕和輸入框聯(lián)動(dòng)的組件，所以輸入框和按鈕擁有的屬性狀態(tài)，步進(jìn)器都有。
選項(xiàng)卡：
切換選項(xiàng)卡即切換內(nèi)容，和下拉選擇框不同的是，選項(xiàng)卡是將多個(gè)選項(xiàng)都排列出來的單選組件，需要考慮4個(gè)狀態(tài)：Normal 、Hover 、Active 、Disabled 。
設(shè)計(jì)規(guī)范對(duì)整個(gè)項(xiàng)目的規(guī)范性推動(dòng)很強(qiáng)大，但是需要花時(shí)間和耐心細(xì)心打磨，所以需要花費(fèi)很多時(shí)間和精力去整理資料、編輯素材、分類整合，最后還要在設(shè)計(jì)軟件中將整個(gè)規(guī)范重新排列設(shè)計(jì)。
最后
在文章的最后送大家?guī)追軺I視覺規(guī)范參考，因?yàn)槠饺湛傆幸恍?huì)員和粉絲跑來要，一時(shí)間也很難找到，這個(gè)過程想必大家深有體會(huì)，猶如你等車一樣，不等時(shí)一輛接一輛，等時(shí)苦苦等不到，今天車來了，就看你上不上了！
聯(lián)系客服
