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

設計規(guī)范的層次

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

設計規(guī)范的目的

量化指標

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

確認設計關鍵點

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

規(guī)范設計原則

這個原則有可能是針對單個項目的，也有可能是整個設計團隊的指導原則，這個原則要被反復強調(diào)，反復實施，團隊人員要共同為這個原則負責。

簡單來說就是：告訴你這些組件可以怎么用、用在哪里、有什么樣的限制、怎么驗收。

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

產(chǎn)品組成

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

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

別人家的設計規(guī)范

我又把 Google design guidelines?掏出來了，這份應該是目前最流行、寫得詳細的一份設計規(guī)范。可以從里面分析設計規(guī)范要包含哪些內(nèi)容。

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

每一個組件或元素都會包含

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

元素意義

這個元素有什么的功能、對用戶來說有什么幫助、呈現(xiàn)什么信息等等。

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

要怎么使用這項元素、使用這項元素需要注意什么事情？為什么？

運用場合、時機

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

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

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

組合運用

當元素和其他組件混合使用，會有什么限制？是否有特例情況？

各種狀態(tài)

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

平臺差異性

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

正確示范、錯誤示范

除了正確示范外，將常見的錯誤一并標示可以降低出錯慮、節(jié)省來回修改的時間。不僅只有文字之外，最好附上圖片甚至動畫說明。

制作文件的規(guī)范

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

• 階層
• 分類
• 順序
• 視覺
• 維護人員

階層

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

分類

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

順序

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

視覺

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

維護人員

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

結論

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

原文地址：blog.akanelee.me