產品設計基礎-UI設計規範有5點必備內容

“前面一篇有關於“Mockup”的介紹是需要開始執行UI視覺設計的階段，而在執行UI設計的過程中也同時需要整理出關於“UI視覺規範”的內容，至於有哪些內容和元素是必須的被規範的呢？就讓我來為讀者們分享吧！

什麼是UI設計規範？

UI設計規範其實與品牌標誌的CIS系統是相同的概念。一項成熟的應用產品通常都有多名UI設計師一起協作（例如FB絕不可能只有一個UI設計師做設計），所以將一項產品的某些常規UI設計元素制定規範，統整為一套完整的設計組件庫，對內可以保持設計風格一致，對外則保持用戶體驗一致並且提高操作效率，同時加深用戶對於應用產品的品牌印象，

01.產品的品牌色與輔助色碼

顏色規範通常都是以Logo或標誌的主色作為整個產品的品牌主色，而其他搭配的色彩“輔助色”則視情況增加說明與用途，需具體定義色彩的項目：品牌色、文案、背景色、輔助色。

02.字型與字體使用說明

字型規範需要說明產品內統一使用的中文/英文/數字字型，並說明哪些情境下該使用哪種字級，內容需有：中/英/數字個別使用的字型、字級、粗細、使用字體的場景。

03.按鈕的狀態與優先級

應用產品的按鈕設計，需要規範按鈕樣式的使用優先級，並設計其他使用情境的狀態樣式，須註明的內容：按鈕樣式（優先級別）、狀態（正常/點擊/載入/禁用）

04.主要圖標與Icon定義

Icon設計規範並不需要定義產品內所有的Icon內容，只需重點規範最核心＆常用的功能Icon，例如：Main bar上的按鈕。

05.其他頻繁使用的組件

其他設計組件規範就要視不同的應用產品迭代增加內容，切忌不用多，以“重複性高”的元素為增加對象，UI設計規範若多了反而會限制設計師們的創新，而且UI設計規範也是會隨時間慢慢迭代增加/更新內容的。

總結

UI設計規範是一項能提高UI UX設計師團隊工作效率的利器，尤其在多名設計師一起協作一項應用產品時更顯得價值所在，但同時設計規範也是需要隨時間去維護的產品規格內容，每當產品有重大的視覺改版時，同時也需一同更新產品的UI設計規範了！

感謝你們的瀏覽閱讀，如果你覺得這篇文章寫得不錯並且有幫助到你，希望你能給我一點「拍手鼓勵」，也歡迎在下方留言讓我知道你的想法，我會持續分享更多實用＆實戰的經驗方式給你們。

若想隨時掌握最新設計教學可關注我的IG:jielin.designer

拍手小秘訣： 只要將滑鼠(或手指)持續按著不放手掌的icon，就能夠連續拍手囉，試試看吧！