設(shè)計(jì)規(guī)范的共性
不同的規(guī)范雖然內(nèi)容差別很大，但是對(duì)比一下它們的目錄，卻又很多相似之處，通常包含：布局、組件、配色、圖標(biāo)這四部分。
組件里的分類(lèi)無(wú)非是導(dǎo)航、菜單、表單、列表、表格、按鈕、彈出框諸如此類(lèi)，我就不一一列出了。
設(shè)計(jì)規(guī)范有哪幾類(lèi)？
總體看來(lái)，我發(fā)現(xiàn)這三類(lèi)設(shè)計(jì)規(guī)范出現(xiàn)概率很高：
1、給產(chǎn)品經(jīng)理看的
IOS和早些年的Android（現(xiàn)在已經(jīng)統(tǒng)一改用Material Design）設(shè)計(jì)規(guī)范就屬于給產(chǎn)品經(jīng)理看的，里面寫(xiě)的東西大多圍繞如何選擇大的方向、哪種處理方式更加合理展開(kāi)的，界面細(xì)節(jié)卻沒(méi)有詳細(xì)介紹。
這種規(guī)范適合用來(lái)做演講，內(nèi)容不多，都很有道理，參雜這很多創(chuàng)新的功能。
而拿著它做設(shè)計(jì)卻很痛苦，因?yàn)樗桓嬖V你如何才能達(dá)到理念中所勾勒的那個(gè)目標(biāo)，圖標(biāo)、尺寸、陪色、字體……很多東西都不明確。
2、給設(shè)計(jì)師看的
這種規(guī)范通常的好處是內(nèi)容很豐富、圖例很多、建議比較詳細(xì)，能夠讓設(shè)計(jì)師以此為基礎(chǔ)發(fā)揮自己的創(chuàng)造力。
Material Design就屬于這一類(lèi)，而且里面很多1:1的范例可以直接拿來(lái)做參考這點(diǎn)非常感人。
但這種規(guī)范也有不足之處。一是它缺乏針對(duì)具體場(chǎng)景的規(guī)則，常常把所有可能用到的元素都拿出來(lái)一一細(xì)說(shuō)，然而卻不告訴你應(yīng)該在什么場(chǎng)合使用什么。
二是容易理想化，因?yàn)樽鲞@種規(guī)范的人通常是純粹的設(shè)計(jì)師，所以里面很多設(shè)計(jì)想法未必有足夠的可實(shí)現(xiàn)性，或是一些創(chuàng)意未必經(jīng)得過(guò)實(shí)踐的考驗(yàn)。
Material Design里面很多看起來(lái)簡(jiǎn)單的設(shè)計(jì)其實(shí)是很難實(shí)現(xiàn)的，例如用分辨率敏感的dp取代像素單位其實(shí)大部分情況下很難實(shí)現(xiàn)。
Material Design的文本框中，說(shuō)明文字會(huì)變換位置和大小，排多了看起來(lái)會(huì)很亂。
3、給程序員看的
這類(lèi)不太關(guān)心布局、交互、配色等細(xì)節(jié)，而是告訴讀者他們能做出什么東西，怎么做出那些東西。
這類(lèi)規(guī)范筆我原本預(yù)想的要多很多，其中令我印象最深刻的是Windows Phone的設(shè)計(jì)規(guī)范。
程序員的隊(duì)友都稱(chēng)贊Windows的設(shè)計(jì)規(guī)范有多好多好，只有我覺(jué)得用起來(lái)無(wú)比痛苦。
現(xiàn)在想來(lái)，Windows Phone的設(shè)計(jì)規(guī)范雖然稱(chēng)之為設(shè)計(jì)規(guī)范，區(qū)別于Windows Phone的開(kāi)發(fā)規(guī)范，但它完全是個(gè)教程序員如何實(shí)現(xiàn)各種界面的指南。
產(chǎn)品經(jīng)理可能還可以用它來(lái)看看頁(yè)面類(lèi)型，對(duì)設(shè)計(jì)師來(lái)說(shuō)卻沒(méi)有太大幫助。
這種規(guī)范對(duì)于不需要設(shè)計(jì)師的場(chǎng)景還是非常有幫助的，比較相比前兩種，這種的可實(shí)現(xiàn)性非常高。
設(shè)計(jì)規(guī)范的選取
我認(rèn)為上文提過(guò)的三種設(shè)計(jì)規(guī)范都很重要，且適用于不同的場(chǎng)合。
第一類(lèi)給產(chǎn)品經(jīng)理看的規(guī)范適合設(shè)計(jì)初期，確定理念、報(bào)告思路階段。
第二類(lèi)給設(shè)計(jì)師看的規(guī)范適合在設(shè)計(jì)定型階段，這個(gè)時(shí)候界面具體長(zhǎng)什么樣已經(jīng)確定了，但是未來(lái)的實(shí)施過(guò)程還會(huì)帶來(lái)一些不確定因素。
第三類(lèi)規(guī)范適用于開(kāi)發(fā)階段，根據(jù)界面來(lái)規(guī)范代碼，能夠大大提升前段的開(kāi)發(fā)效率。
設(shè)計(jì)規(guī)范的常見(jiàn)遺漏
由于第一類(lèi)規(guī)范的內(nèi)容要求不多，所以這里的遺漏主要針對(duì)后面兩類(lèi)。
1、文本格式
設(shè)計(jì)師常過(guò)分專(zhuān)注于畫(huà)圖，而忘記了文字也應(yīng)該有所規(guī)范。例如，日期可能的格式有很多。
例如“YYYY年MM月DD日”、“YYYY年M月D日”、“YYYY/MM/DD”等等。
再比如說(shuō)單位，是用“大小：100M”、“大小：100兆”還是“大小（M）：100”呢？
這些文本格式定義起來(lái)并不花時(shí)間，可是如果沒(méi)有規(guī)范的話(huà)，可能同一個(gè)東西在每個(gè)頁(yè)面的展示方式都不一樣，對(duì)用戶(hù)來(lái)說(shuō)也挺煩的。
2、特殊狀態(tài)
做設(shè)計(jì)和做規(guī)范的區(qū)別是，做設(shè)計(jì)時(shí)，只有在知道某個(gè)東西有某個(gè)狀態(tài)時(shí)，才會(huì)去設(shè)計(jì)那個(gè)狀態(tài)；
做規(guī)范時(shí)，通常要假定所有數(shù)據(jù)和操作都有狀態(tài)，不同東西在不同地方的同類(lèi)狀態(tài)最好能夠統(tǒng)一。
所有操作都可能失效，不管是按鈕、鏈接、輸入框、下拉菜單……什么情況在失效時(shí)顯示失效狀態(tài)，什么時(shí)候完全隱藏該操作，這些都是可以統(tǒng)一考慮設(shè)計(jì)的東西。
所有的操作都可能出錯(cuò)，尤其是輸入框的出錯(cuò)率極高。如果出錯(cuò)了，如何告訴用戶(hù)哪里錯(cuò)了？如何糾正？由此還可以聯(lián)想到，如何在一開(kāi)始就避免用戶(hù)犯錯(cuò)？
所有擺放數(shù)據(jù)的地方都有可能沒(méi)有內(nèi)容，也許是列表為空，也許是字段為空。這種情況該如何明確又美觀地告訴用戶(hù)這里沒(méi)有內(nèi)容不是網(wǎng)絡(luò)問(wèn)題也不是系統(tǒng)問(wèn)題？
△ 頁(yè)面沒(méi)有內(nèi)容的顯示效果
所有內(nèi)容都有可能出現(xiàn)異常，網(wǎng)絡(luò)不穩(wěn)定、格式不支持、系統(tǒng)出錯(cuò)等。這種狀況如何明確又美觀地告訴用戶(hù)可能是哪里出現(xiàn)問(wèn)題，如何補(bǔ)救？
成功也需要有成功的狀態(tài)，有些時(shí)候頁(yè)面不止一項(xiàng)任務(wù)，第一項(xiàng)成功了，第二項(xiàng)失敗了，用戶(hù)走到第三項(xiàng)時(shí)不一定還記得第一項(xiàng)是成功的還是失敗的。
3、多級(jí)多選和過(guò)量
一個(gè)靈活的界面規(guī)范能夠應(yīng)對(duì)大部分的內(nèi)容變化。例如導(dǎo)航和菜單的項(xiàng)目數(shù)量和級(jí)數(shù)通常是不確定的，下拉選框也不一定只能勾選一項(xiàng)內(nèi)容。
更靈活的情況還有，一篇文章可能長(zhǎng)達(dá)數(shù)十屏，這時(shí)該自動(dòng)識(shí)別文章內(nèi)的標(biāo)題并生成目錄，還是分頁(yè)展示？
4、使用指南
使用指南是設(shè)計(jì)過(guò)程中通常被拖到最后才想起來(lái)的東西，在規(guī)范里也常被忽視。其中最重要的是用戶(hù)首次使用時(shí)看到的操作指南。
這種操作指南可能不只在首頁(yè)出現(xiàn)，并且未來(lái)可能隨著設(shè)計(jì)的變更而變更，所以這種首次使用的操作指南是很有必要做成規(guī)范的。
△ 首次使用的操作指南
此外，使用過(guò)程中，在關(guān)鍵時(shí)候出現(xiàn)的操作提示也可以有規(guī)范。例如用戶(hù)進(jìn)入一個(gè)新功能時(shí)，可能會(huì)出現(xiàn)該功能的介紹。
5、尺寸適配
響應(yīng)式界面已經(jīng)被說(shuō)了這么多年了，而被明確放在規(guī)范里的，除了Material Design之外還真是很難找到了。
如果你想了解響應(yīng)式界面，可以看我之前的文章《設(shè)計(jì)響應(yīng)式界面該清楚哪些》。
響應(yīng)式界面有很多分類(lèi)和實(shí)現(xiàn)方式，不論是視覺(jué)、交互還是前段都有所涉及，每個(gè)頁(yè)面和元素都可能根據(jù)實(shí)際情況需要特殊處理，這也是為什么響應(yīng)式設(shè)計(jì)很難定制規(guī)范。
△ 響應(yīng)式界面：如果是頁(yè)面是容器，內(nèi)容就像水一樣
除了整個(gè)頁(yè)面的適配之外，小的組件也最好是可能變化尺寸的。例如同一張圖表，可能被放在一個(gè)很空曠的頁(yè)面，也有可能被放在一個(gè)很擁擠的頁(yè)面。
需要調(diào)整尺寸時(shí)，哪些可以縮放哪些不能縮放，對(duì)其的中心是什么……這些如果能夠明確，設(shè)計(jì)將會(huì)變得越來(lái)越像拼圖。
除了整個(gè)頁(yè)面的適配之外，小的組件也最好是可以自動(dòng)調(diào)整尺寸。例如同一張圖表可能被放在一個(gè)很空曠的頁(yè)面，也有可能被放在一個(gè)很擁擠的頁(yè)面。
組件需要調(diào)整尺寸時(shí)，哪些可以縮放哪些不能縮放，對(duì)其的中心是什么……這些如果能夠明確，設(shè)計(jì)將會(huì)變得越來(lái)越像拼圖。
6、動(dòng)效
動(dòng)效也火了很久了，但是似乎還是停留于表面，缺少一套可依賴(lài)的標(biāo)準(zhǔn)。動(dòng)效師并不好當(dāng)，既要有超高的編碼能力，又要有敏感的美學(xué)神經(jīng)。
也許就是因?yàn)檫@么困難，才導(dǎo)致大部分設(shè)計(jì)規(guī)范即便包含動(dòng)效這一目錄，里面填充的內(nèi)容也非常模糊不清。
7、音效
大部分應(yīng)用是沒(méi)有音效的，因?yàn)橐粜Ш苋菀鬃屓藚挓夜?jié)奏不好把控。但是對(duì)于音樂(lè)、視頻等媒體應(yīng)用，音效的發(fā)揮空間卻很大，至今尚未開(kāi)發(fā)。
撇開(kāi)這些不談，如果有音效，何時(shí)使用何種、多大音量、時(shí)長(zhǎng)多少、震動(dòng)模式（手機(jī)）時(shí)需不需要震動(dòng)反饋，很多東西都可以考慮。
8、手勢(shì)
和鍵盤(pán)的快捷鍵一樣，偏愛(ài)觸屏手勢(shì)的也大有人在，而且手勢(shì)也能讓產(chǎn)品更加獨(dú)特。如果允許使用手勢(shì)，這部分也可以有所規(guī)范。
9、國(guó)際化
如果界面上的語(yǔ)言種類(lèi)不止一種，那么如果文字轉(zhuǎn)換后過(guò)長(zhǎng)或過(guò)短怎么辦？用戶(hù)在看不懂當(dāng)前語(yǔ)言的情況下如何切換語(yǔ)言？
不同的語(yǔ)言該選擇什么字體才不至于太難看（例如中文的默認(rèn)字體通常是宋體）？
10、小眾人群
雖然我們最關(guān)心的還是主流用戶(hù)，但是很多小眾人群組合起來(lái)也是可以構(gòu)成一定分量的。例如，觸屏應(yīng)用能不能給左手使用者舒適的體驗(yàn)？
桌面應(yīng)用能不能夠讓沒(méi)有鼠標(biāo)或是沒(méi)有鍵盤(pán)的人使用？色盲和色弱能區(qū)分界面上的色塊？視力較差的人能不能放大字。
希望以上內(nèi)容對(duì)你學(xué)習(xí)UI設(shè)計(jì)有幫助，覺(jué)得可以請(qǐng)轉(zhuǎn)發(fā)支持一下，持續(xù)分享更多UI設(shè)計(jì)優(yōu)秀文章。