UI設計師必學的設計規范要點總結

 　　什麼是設計規范?設計規范哪些要點值得關注?今天分享一篇台灣設計師@Akane_Lee 老師的好文，列出了她對設計規范的要點總結，能幫助設計師們變得更加專業，有志於UI設計的同學，現在就該行動咯。

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

　　設計規范的層次

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

　　設計規范的目的

　　量化指標

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

　　確認設計關鍵點

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

　　規范設計原則

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

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

　　以上取自 設計規范(Design Code / Design Specifications)

　　產品組成

　　產品的組成大約可以拆分成 頁面 > 組件 > 元素 > 圖(影片)、文字、icon、窗體、互動 等。

　　各元素都可能需要制定 色彩、透明度、尺寸、間距、文件格式、質量、風格 等。

　　互動包含 手勢操作、過場動畫、特效、音效、震動 等。

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

　　別人家的設計規范

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

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

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

　　元素意義

　　使用規則、限制

　　運用場合、時機，與其原因

　　和同質元素間的一制性(新制規則)

　　組合運用

　　各種狀態

　　平台差異性

　　正確示范、錯誤示范

　　元素意義

　　這個元素有什麼的功能、對用戶來說有什麼幫助、呈現什麼信息等等。

　　使用規則、限制，與其原因

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

　　運用場合、時機

　　什麼情況下會使用到這項元素?它會出現在什麼地方?

　　和同質元素間的一致性(新制規則)

　　若現有同質元素不敷使用、需另制新款時，必須符合哪些規定以求風格一致?(如icon)

　　組合運用

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

　　各種狀態

　　若元素會因操作或其他原因呈現不同樣貌狀況時，規則為何?

　　平台差異性

　　若產品發布於各種平台上，該元素是否會有不同的情況?

　　正確示范、錯誤示范

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

　　制作文件的規范

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

　　階層

　　分類

　　順序

　　視覺

　　維護人員

　　階層

　　你的產品可拆分成幾個階層?階層的規則是什麼?如果不懂的話先套用 Google Design 的分類，之後就知道怎麼創健自己產品的階層。

　　分類

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

　　順序

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

　　視覺

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

　　維護人員

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

　　結論

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