產(chǎn)品發(fā)展日趨平穩(wěn)時(shí)，產(chǎn)品定位和品牌形象已進(jìn)入穩(wěn)定狀態(tài)，參與設(shè)計(jì)的人越來(lái)越多，設(shè)計(jì)的統(tǒng)一性和效率的問(wèn)題也漸漸顯現(xiàn)。因此，為了保證平臺(tái)設(shè)計(jì)統(tǒng)一性，提升團(tuán)隊(duì)工作效率，打磨細(xì)節(jié)體驗(yàn)，就需要我們定義和整理設(shè)計(jì)規(guī)范。
UI 設(shè)計(jì)中，設(shè)計(jì)規(guī)范是一個(gè)關(guān)鍵步驟。知名大廠(chǎng)基本上都有一套自己的完整規(guī)范體系，在整理設(shè)計(jì)規(guī)范時(shí)，以大平臺(tái)規(guī)范體系作為參考，針對(duì)產(chǎn)品自身情況增刪，整理出我們自己所需要的規(guī)范內(nèi)容，能有效地避免規(guī)范內(nèi)容遺漏缺失。
拓展鏈接：各大官網(wǎng)設(shè)計(jì)規(guī)范集合
顏色是設(shè)計(jì)中最重要的元素，顏色的運(yùn)用與搭配決定設(shè)計(jì)的品質(zhì)感。在 UI 設(shè)計(jì)中，顏色的使用規(guī)范主要在于：品牌主色、文本顏色、界面顏色（背景色、線(xiàn)框色）等。
不同的字體氣質(zhì)不一樣，并且不同場(chǎng)景下帶給人的感受也不一樣。所以需要在設(shè)計(jì)的時(shí)候考慮到字體的設(shè)計(jì)效果，然后在設(shè)計(jì)規(guī)范中注明。
在 UI 界面中，具有標(biāo)識(shí)性質(zhì)的圖形就是圖標(biāo)。作為 UI 設(shè)計(jì)中重要的設(shè)計(jì)模塊，產(chǎn)品的每個(gè)頁(yè)面中都有可能存在圖標(biāo)。設(shè)計(jì)規(guī)范中，圖標(biāo)一般按照用途分為兩類(lèi)：應(yīng)用圖標(biāo)、功能圖標(biāo)。
應(yīng)用圖標(biāo)：各種應(yīng)用程序的識(shí)別標(biāo)志，在應(yīng)用商店里下載的一些應(yīng)用程序的標(biāo)志。
功能圖標(biāo)：規(guī)范中最好標(biāo)明圖標(biāo)格式與使用方式。比如 Web 設(shè)計(jì)，圖片可以使用 iconfont 管理，可生成代碼交付給前端開(kāi)發(fā)；如果是原生 APP，那么需要標(biāo)注圖標(biāo)導(dǎo)出格式與尺寸。
圖片作為界面設(shè)計(jì)的重要組成部分，需要標(biāo)明尺寸規(guī)范，分為不同用途的種類(lèi)。
設(shè)計(jì)尺寸，是指進(jìn)行設(shè)計(jì)時(shí)，選擇的畫(huà)板尺寸。例如是 750*1334，還是 375*667，每個(gè)公司設(shè)計(jì)的基準(zhǔn)都不一樣，所以設(shè)計(jì)尺寸并沒(méi)有規(guī)定只能用某一個(gè)尺寸，我們?cè)谠O(shè)計(jì)時(shí)，使用的 1 倍圖為基準(zhǔn)進(jìn)行設(shè)計(jì)的，基準(zhǔn)尺寸為 375*667。
柵格系統(tǒng)，是運(yùn)用固定的格子設(shè)計(jì)版面布局，在 UI 設(shè)計(jì)和前端開(kāi)發(fā)中被廣泛應(yīng)用的一套體系。在設(shè)計(jì)尺寸中提到柵格系統(tǒng)，是因?yàn)楝F(xiàn)在的設(shè)計(jì)基本都是一稿適配多端，而柵格系統(tǒng)能很好的解決這個(gè)問(wèn)題。
△ Christie Tang
柵格系統(tǒng)拓展鏈接：《看不懂不會(huì)用的柵格系統(tǒng)，這篇幫你徹底掌握它！》
布局是頁(yè)面構(gòu)成的前提，是后續(xù)展開(kāi)交互和視覺(jué)設(shè)計(jì)的基礎(chǔ)。設(shè)計(jì)規(guī)范中可以提供常用的布局模板來(lái)保證同類(lèi)產(chǎn)品間的一致性，設(shè)計(jì)者在選擇布局之前，需要注意以下幾點(diǎn)原則：
- 明確用戶(hù)在此場(chǎng)景中完成的主要任務(wù)和需獲取的決策信息。
- 明確決策信息和操作的優(yōu)先級(jí)及內(nèi)容特點(diǎn)，選擇合理布局。
△部分布局類(lèi)型展示
控件是指產(chǎn)品界面中可操作的部件，與組件是有一些區(qū)別的。控件翻譯為 Control，組件翻譯為 Component。
通俗的解釋說(shuō)法就是組件為多個(gè)元素組合而成，控件為單一元素組合而成。
常用的 UI 控件（Control）：按鈕、輸入框、下拉列表、下拉菜單、單選框、復(fù)選框、選項(xiàng)卡、搜索框、分頁(yè)、切換按鈕、步進(jìn)器、進(jìn)度條、角標(biāo)等。
以下列舉一些我們?cè)?APP 設(shè)計(jì)規(guī)范中整理的內(nèi)容。
1. 按鈕
按鈕有 5 個(gè)狀態(tài)：正常、點(diǎn)擊、懸停、加載、禁用。需要在規(guī)范中分別羅列出這五個(gè)狀態(tài)，標(biāo)注上對(duì)應(yīng)的按鈕填充色、邊框色、圓角值、按鈕寬度和高度，按鈕文本大小、顏色值。如果是圖標(biāo)按鈕的話(huà)，除了上述參數(shù)值以外，還需要標(biāo)注 icon 和按鈕文本之間的間距，icon 圖標(biāo)的大小。
2. 輸入框
用于單行信息錄入文字上下居中顯示，支持鍵盤(pán)錄入和剪切板輸入文本，對(duì)特定格式的文本進(jìn)行處理：密碼隱藏顯示、身份證、卡號(hào)分段顯示，標(biāo)注寬高。
3. 選擇
選擇可分為單選與多選，并且也有五種不同狀態(tài)：未選擇、已選中、未選懸停、已選失效、未選失效項(xiàng)。規(guī)范中需展示出所有效果狀態(tài)。
4. 選項(xiàng)卡
用于讓用戶(hù)在不同的視圖中進(jìn)行切換。標(biāo)簽數(shù)量，一般是 2-5 個(gè)；其中，標(biāo)簽中的文案需要精簡(jiǎn)，一般是 2-4 個(gè)字。每個(gè)標(biāo)簽所占的寬度可適當(dāng)調(diào)整。
5. 滑動(dòng)開(kāi)關(guān)
滑動(dòng)開(kāi)關(guān)有兩個(gè)互斥的選項(xiàng)（例如開(kāi)/關(guān)、是/否、啟動(dòng)/禁止），它是用來(lái)打開(kāi)或者關(guān)閉選項(xiàng)的控件。選擇其中一個(gè)選項(xiàng)會(huì)立即執(zhí)行操作。
6. 進(jìn)度條
用于向用戶(hù)展示步驟的步數(shù)以及當(dāng)前所處的進(jìn)程。
7. 角標(biāo)
用于聚合型的消息提示，一般出現(xiàn)在通知圖標(biāo)或頭像的右上角，通過(guò)醒目的視覺(jué)形式吸引用戶(hù)眼球。
常用的 UI 組件（Component）：表格、對(duì)話(huà)框、提示條、氣泡提示、日期選擇器、多級(jí)選擇器、標(biāo)簽輸入框、組合框、上傳等。△ Ant design 移動(dòng)組件
在 skecth 中設(shè)計(jì)時(shí)，使用 Symbol 創(chuàng)建的組件，在后期整理時(shí)，可以節(jié)省許多的時(shí)間。
推薦閱讀：《Sketch 進(jìn)階教程！利用Symbol 建立一套設(shè)計(jì)規(guī)范組件庫(kù)？》
當(dāng)然，F(xiàn)igma 也同樣具備這樣的能力，你所創(chuàng)建的組件都存在于 Assets 中。
- 空狀態(tài)頁(yè)面：顯示對(duì)應(yīng)的頁(yè)面空狀態(tài)的圖標(biāo)，增加相應(yīng)的引導(dǎo)按鈕。
- 無(wú)網(wǎng)絡(luò)狀態(tài)：在沒(méi)有連接到網(wǎng)絡(luò)時(shí)的提示頁(yè)面。
- 404&505頁(yè)面：發(fā)生未知錯(cuò)誤時(shí)的頁(yè)面。
了解規(guī)范的內(nèi)容有哪些之后，我們需要確認(rèn)的是規(guī)范優(yōu)先級(jí)，規(guī)范內(nèi)容龐大復(fù)雜，基礎(chǔ)的、必要的、高性?xún)r(jià)比的放在第一個(gè)版本中，復(fù)雜的往后放，隨著產(chǎn)品的迭代，規(guī)范才會(huì)越來(lái)越完整。
一個(gè)好的規(guī)范應(yīng)該是的、簡(jiǎn)單易懂的。具體執(zhí)行時(shí)，我們應(yīng)該確保分類(lèi)合理、規(guī)范本身保持一致、布局排版易讀，來(lái)提升設(shè)計(jì)師查閱的效率；確保定義清晰、描述準(zhǔn)確、場(chǎng)景完備，來(lái)幫助設(shè)計(jì)師理解和使用。但值得注意的是，設(shè)計(jì)規(guī)范并不是「圣經(jīng)」，不要因?yàn)橐?guī)范而限制了自己的思維，當(dāng)發(fā)現(xiàn)規(guī)范有問(wèn)題的時(shí)候，要及時(shí)去修正，而不是做了一次之后，一直沿用，永不修改。
以下是藍(lán)藍(lán)設(shè)計(jì)（北京蘭亭妙微）給中國(guó)移動(dòng)研究院設(shè)計(jì)三套軟件，制作的部分UI規(guī)范。 
藍(lán)藍(lán)設(shè)計(jì)(www.lapeinture.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶(hù)體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢(xún)、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開(kāi)發(fā)服務(wù)，咨詢(xún)電話(huà)：01063334945。我們建立了一個(gè)微信群，每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng)，咨詢(xún)及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan。
關(guān)鍵詞：UI咨詢(xún)、UI設(shè)計(jì)服務(wù)公司、軟件界面設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、用戶(hù)體驗(yàn)公司、高端網(wǎng)站設(shè)計(jì)公司、銀行金融軟件UI界面設(shè)計(jì)、能源及監(jiān)控軟件UI界面設(shè)計(jì)、氣象行業(yè)UI界面設(shè)計(jì)、軌道交通界面設(shè)計(jì)、地理信息系統(tǒng)GIS UI界面設(shè)計(jì)、航天軍工軟件UI界面設(shè)計(jì)、醫(yī)療行業(yè)軟件UI界面設(shè)計(jì)、教育行業(yè)軟件UI界面設(shè)計(jì)、企業(yè)信息化UI界面設(shè)計(jì)、軟件qt開(kāi)發(fā)、軟件wpf開(kāi)發(fā)、軟件vue開(kāi)發(fā)