一針見(jiàn)血！UI設(shè)計(jì)師必學(xué)的設(shè)計(jì)規(guī)范要點(diǎn)總結(jié)

編者按：什么是設(shè)計(jì)規(guī)范？設(shè)計(jì)規(guī)范哪些要點(diǎn)值得關(guān)注？今天分享一篇中國(guó)臺(tái)灣設(shè)計(jì)師@Akane_Lee? 老師的好文，列出了她對(duì)設(shè)計(jì)規(guī)范的要點(diǎn)總結(jié)，能幫助設(shè)計(jì)師們變得更加專業(yè)，有志于UI設(shè)計(jì)的同學(xué)，現(xiàn)在就該行動(dòng)咯。

@Akane_Lee?：要做設(shè)計(jì)規(guī)范前，先來(lái)了解什么是設(shè)計(jì)規(guī)范，不是把所有組件都擺在同一張圖上排排站吃果果就好，設(shè)計(jì)規(guī)范(Design Code / Design Specifications) 一文中提到： 設(shè)計(jì)規(guī)范是指對(duì)設(shè)計(jì)的具體技術(shù)要求，是設(shè)計(jì)工作的規(guī)則。一般包括總體目標(biāo)的技術(shù)描述、功能的技術(shù)描述、技術(shù)指標(biāo)的技術(shù)描述，以及限制條件的技術(shù)描述等。

如果你想學(xué)習(xí)最全面的Photoshop禮儀規(guī)范，強(qiáng)烈推薦這篇《WEB設(shè)計(jì)指南！PS禮儀白皮書(shū)》，是網(wǎng)頁(yè)設(shè)計(jì)師必須修煉的內(nèi)功技法，更是不可或缺的WEB設(shè)計(jì)指南。

設(shè)計(jì)規(guī)范的層次

粗分成 3 個(gè)層面：公司、產(chǎn)品線、單一產(chǎn)品。包含視覺(jué)、品牌、用戶體驗(yàn)等。

設(shè)計(jì)規(guī)范的目的

量化指標(biāo)

確定一般可用性原則和審美常識(shí)下的避免犯錯(cuò)的方法，以及一旦出現(xiàn)錯(cuò)誤后的補(bǔ)救方案。

確認(rèn)設(shè)計(jì)關(guān)鍵點(diǎn)

獲得該設(shè)計(jì)規(guī)范針對(duì)范圍內(nèi)的關(guān)鍵點(diǎn)，包括設(shè)計(jì)方向和設(shè)計(jì)元素，以通過(guò)項(xiàng)目設(shè)計(jì)的過(guò)程，達(dá)到團(tuán)隊(duì)成員的更加密切的配合效果。它是一份檢驗(yàn)文件，記錄過(guò)程中的錯(cuò)誤，留作以后的經(jīng)驗(yàn)。并在此可以做出項(xiàng)目和產(chǎn)品設(shè)計(jì)的里程碑。

規(guī)范設(shè)計(jì)原則

這個(gè)原則有可能是針對(duì)單個(gè)項(xiàng)目的，也有可能是整個(gè)設(shè)計(jì)團(tuán)隊(duì)的指導(dǎo)原則，這個(gè)原則要被反復(fù)強(qiáng)調(diào)，反復(fù)實(shí)施，團(tuán)隊(duì)人員要共同為這個(gè)原則負(fù)責(zé)。

簡(jiǎn)單來(lái)說(shuō)就是：告訴你這些組件可以怎么用、用在哪里、有什么樣的限制、怎么驗(yàn)收。

以上取自 設(shè)計(jì)規(guī)范（Design Code / Design Specifications）

產(chǎn)品組成

產(chǎn)品的組成大約可以拆分成 頁(yè)面 > 組件 > 元素 > 圖（影片）、文字、icon、窗體、互動(dòng) 等。
各元素都可能需要制定 色彩、透明度、尺寸、間距、文件格式、質(zhì)量、風(fēng)格 等。
互動(dòng)包含 手勢(shì)操作、過(guò)場(chǎng)動(dòng)畫(huà)、特效、音效、震動(dòng) 等。

先將各個(gè)產(chǎn)品拆到最小單位，再進(jìn)行分類整理，通常就是那幾種分類方式。參考現(xiàn)有的設(shè)計(jì)規(guī)范會(huì)更容易理解。

別人家的設(shè)計(jì)規(guī)范

我又把 Google design guidelines?（自備梯子）掏出來(lái)了，這份應(yīng)該是目前最流行、寫(xiě)得詳細(xì)的一份設(shè)計(jì)規(guī)范。可以從里面分析設(shè)計(jì)規(guī)范要包含哪些內(nèi)容。

從左方的選單中可以看到這份文件包含：總覽、動(dòng)畫(huà)、風(fēng)格、布局、組合組件、圖片、易用性、資源。點(diǎn)開(kāi)后還有更詳細(xì)的分類，之后才會(huì)是內(nèi)文部份。

每一個(gè)組件或元素都會(huì)包含

• 元素意義
• 使用規(guī)則、限制
• 運(yùn)用場(chǎng)合、時(shí)機(jī)，與其原因
• 和同質(zhì)元素間的一制性（新制規(guī)則）
• 組合運(yùn)用
• 各種狀態(tài)
• 平臺(tái)差異性
• 正確示范、錯(cuò)誤示范

元素意義

這個(gè)元素有什么的功能、對(duì)用戶來(lái)說(shuō)有什么幫助、呈現(xiàn)什么信息等等。

使用規(guī)則、限制，與其原因

要怎么使用這項(xiàng)元素、使用這項(xiàng)元素需要注意什么事情？為什么？

運(yùn)用場(chǎng)合、時(shí)機(jī)

什么情況下會(huì)使用到這項(xiàng)元素？它會(huì)出現(xiàn)在什么地方？

和同質(zhì)元素間的一致性（新制規(guī)則）

若現(xiàn)有同質(zhì)元素不敷使用、需另制新款時(shí)，必須符合哪些規(guī)定以求風(fēng)格一致？（如icon）

組合運(yùn)用

當(dāng)元素和其他組件混合使用，會(huì)有什么限制？是否有特例情況？

各種狀態(tài)

若元素會(huì)因操作或其他原因呈現(xiàn)不同樣貌狀況時(shí)，規(guī)則為何？

平臺(tái)差異性

若產(chǎn)品發(fā)布于各種平臺(tái)上，該元素是否會(huì)有不同的情況？

正確示范、錯(cuò)誤示范

除了正確示范外，將常見(jiàn)的錯(cuò)誤一并標(biāo)示可以降低出錯(cuò)慮、節(jié)省來(lái)回修改的時(shí)間。不僅只有文字之外，最好附上圖片甚至動(dòng)畫(huà)說(shuō)明。

制作文件的規(guī)范

只要是「文件」都有它的規(guī)范存在，即使是 Style Guideline。制作這份文件也有它的規(guī)則存在。

• 階層
• 分類
• 順序
• 視覺(jué)
• 維護(hù)人員

階層

你的產(chǎn)品可拆分成幾個(gè)階層？階層的規(guī)則是什么？如果不懂的話先套用 Google Design 的分類，之后就知道怎么創(chuàng)健自己產(chǎn)品的階層。

分類

即使分了階層，也會(huì)有各式各樣的元素待整理，比如按鈕。同性質(zhì)的放在一起或是同個(gè)區(qū)塊才會(huì)用到的方在一起，要看你的產(chǎn)品適合套用什么樣的分類規(guī)則。

順序

最重要信息的放最醒目的地方，這次改版才加入的新規(guī)則也可放在最醒目的地方。這份文件要用什么規(guī)則排序目錄需要好好思考。

視覺(jué)

這份文件的排版、色彩、字體字型、內(nèi)容一致性、檔案發(fā)布的格式等等，都會(huì)影響到使用者是否能快速找到他想看的章節(jié)。

維護(hù)人員

規(guī)范不是做好了就算，每過(guò)一段時(shí)間就需要檢查改版。需要明確訂定編修人員，并建立改版審核機(jī)制「要在什么情況下才能變動(dòng)此文件的內(nèi)容」，確保此文件的穩(wěn)定和可信。

結(jié)論

Style Guideline 是份指南，將所有的規(guī)則系統(tǒng)整理后條列化，必需要做到「不管是誰(shuí)只要看了這份文件都能產(chǎn)出一樣的成品」。不光是設(shè)計(jì)師需要常常閱讀，同時(shí)也會(huì)影響到 PM、企劃、RD 在產(chǎn)品上的設(shè)計(jì)與開(kāi)發(fā)。絕對(duì)不能今天做了什么好看的設(shè)計(jì)、就去改一下設(shè)計(jì)規(guī)范。而且所有的設(shè)計(jì)都要照這份文件開(kāi)發(fā)，要改動(dòng)規(guī)范就必須提出申請(qǐng)，并通知所有公司成員，確實(shí)傳達(dá)改動(dòng)內(nèi)容與原因，否則這份文件形同虛設(shè)。

那些設(shè)計(jì)師非學(xué)不可的好文推薦！

UI設(shè)計(jì)10個(gè)關(guān)鍵之刀刀必中！
《刀刀必中！UI設(shè)計(jì)師非學(xué)不可的十大易用性原則》

小常識(shí)也有大用處！常用縮寫(xiě)歸納！
《小常識(shí)學(xué)起來(lái)！設(shè)計(jì)師最好知道一下的常用縮寫(xiě)》

給新手準(zhǔn)備的一堂網(wǎng)頁(yè)設(shè)計(jì)科普課！
《新手課堂！10個(gè)人人必知的網(wǎng)頁(yè)設(shè)計(jì)術(shù)語(yǔ)》

原文地址：blog.akanelee.me
uisdc.com"是國(guó)內(nèi)人氣最高的網(wǎng)頁(yè)設(shè)計(jì)師學(xué)習(xí)平臺(tái)，專注分享網(wǎng)頁(yè)設(shè)計(jì)、無(wú)線端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書(shū)：史上最全的設(shè)計(jì)師圖書(shū)導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量82萬(wàn)的人氣微博@優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁(yè)設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com
———————————————————–
想在手機(jī)上、被窩里獲取設(shè)計(jì)教程、經(jīng)驗(yàn)分享和各種意想不到的"福利"嗎？
添加 優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) 微信號(hào)：【youshege】?jī)?yōu)設(shè)哥的全拼
您也可以通過(guò)掃描下方二維碼快速添加：