GUI設計規範的規範大全

GUI設計規範的規範大全

1. 前言

很多著名的軟體企業都有GUI設計規範，如 Apple 和 Google，得益於這些設計規範（或者叫指南），設計者才可以開發出符合平台視覺及交互要求的UI。其實除了這些大公司，軟體公司都最好有自己的GUI設計規範，即使這個規範簡略一些，也可以幫助團隊改善工作、提高工作效率及傳遞品牌價值。

2. 什麼是GUI設計規範

各個公司的GUI設計規範各不相同，有的十分詳盡，有的比較簡略；有的只有設計口號，有的嚴格到每個元素的像素都有規定；有的注重設計，有的提供了完整的代碼示例；有的提供了一整個網站，有的只是幾頁PDF。

總的來說，GUI設計規範是指導設計人員完成GUI設計的規則和範例。

3. 為什麼要做

• 共享智慧，使好的設計可以復用；
• 無標準則無改善，設計規範可使同樣場景的設計不管誰來設計都能達到標準，並以此為基礎不斷地完善；
• 統一的成果，避免混亂，無論哪個產品哪個頁面都能有一致的體驗；
• 提升能力，團隊不必思考重複性的設計，有更多時間進行更深層次的設計，上司也可以直接使用設計規範對部下進行更有效的教育；

4. 為誰做

設計規範應該是為公司全體做的。

公司用設計規範體現公司的設計品味和企業價值；設計人員和開發人員通過設計規範協助自己的工作，測試人員以設計規範作為UI驗收的標準；對營銷部門設計規範也是重要的參考資料。

5. 由誰做

設計規範應該由使用到這些設計的人製作。

• 設計人員主導設計規範的製作；
• 開發人員告訴設計人員有哪些功能可以實現，哪些不可以，以及最新的技術潮流；
• 營銷人員的意見至關緊要，因為只有他們直接面對用戶，而且他們清楚各種奇怪的行業規則；

6. 包含什麼內容

雖然設計規範各種各樣，有的很簡單，有的簡直可以作為前端教學，不過大部分都包含以下各部分：

6.1 設計理念/設計語言

各個設計規範都有不同的設計理念（或不同的設計語言），這是最能體驗公司品味的地方。這方面通常通過顏色、字體、布局、公司Logo的使用等展示。

6.2 原則

設計原則有很多種，如格式塔原則、親密性原則等，設計規範應該將這些不同的原則提煉、整合成適合自己團隊的設計指導原則。

6.3 模式

模式是指從經驗中提煉出來的解決某一類問題的方法論。如業務中多次遇到數據展示的場合，設計人員會從過去的經驗總結出最適合數據展示的一種或多種做法，並成為數據展示模式。

對營銷/產品/需求人員來說模式也是它們最好的武器。假如客戶要求UI進行某些改進以符合他的要求，比起這些：

「我不清楚怎麼做，我回去問問研發團隊能怎麼做吧。」

「我不清楚能不能做到，這還需要研發團隊配合。」

客戶更滿意下面這種回復：

「關於這個需求，我們有這幾種解決方案，它們各有…的優點，您可以參考一下。」

6.4 組件

組件是平台提供的，或公司購買/研發的控制項、字體、圖標、主題等資源庫。很多設計規範還提供了組件的使用代碼示例。

統一的控制項可以使各個軟體有統一的體驗，也減少開發人員選擇和學習控制項使用方式的時間。

6.5 其它

摹客，定製你的設計規範

設計系統

很多設計規範還把動效和交互單獨說明，可能由於這是比較深入的內容或者難於在PDF上展示，所以也有不少設計規範沒有這些內容。設計自己團隊的設計規範時可以把這些內容留到最後。

7. 什麼時候做

設計規範的工作應該隨時都在進行。

設計其實是有生命的「生物」，它每天都在變化，不斷發展。尤其在軟體行業，需求、技術、設計潮流、競爭對手不斷頻繁變化，甚至休假回來連自己公司的母公司都變了。另外，由於設計規範中每一條內容都是經過精心製作的，很容易產生「不想破壞以前的心血」這樣的思想，導致過時的規範遲遲不能更新。

設計規範一旦落伍就容易不被認同，漸漸地就沒人看，沒人執行，最後設計規範將變得毫無意義。所以設計規範應該持續改進，以使得基於設計規範的工作不斷得到改善。

8. 怎麼才能做好

8.1 簡單明確

不要太信任設計人員和開發人員的閱讀能力，何況夾雜著各種術語或英文單詞，大段大段的說明很可能變成天書。要做到簡單明確，可以這樣做：

• 精簡語言，使用明確的語句，刪除艱澀的術語和長語句；
• 使用列表代替大段的文字；
• 使用圖片或視頻；

8.2 範例

既然是規範，範例是必須的。

8.3 統一

統一併不是指某個控制項只能有一種樣式，某個功能只能有一種模式。而是指相同或相似的場景下，使用的樣式或模式應該統一。

壞的設計規範有可能參考控制項庫的指南把控制項的所有樣式都展示出來而沒有說明應該在什麼情況下使用，而好的設計規範會給出元素需要統一的部分，如間距、邊框、字體、顏色，然後給出各種情況下的做法：

如果設計規範自己都不統一，不能自圓其說，使用者將無所適從。

8.4 代碼示例

有些設計貴伐會將代碼也展示出來，以方便開發人員。

8.5 案例

設計規範最好有已成功的案例，這才是對設計規範最好的展示。

9. 設計規範網站分享

以Button為例，比較一下各大公司的GUI設計規範

Apple

Google

Microsoft

Ant Design

SAP

yelp

Atlassian

Buzzfeed

10. 結語

希望這篇文章可以幫組讀者建立自己團隊的GUI設計規範。尤其是對桌面開發的團隊，由於缺乏GUI設計規範導致很多桌面軟體的設計都馬馬虎虎，真的希望將來這點可以得到改善。

作者：dino.c

出處：http://www.cnblogs.com/dino623/

相關閱讀：

獨家設計系統發布——摹客，定製你的設計規範！

移動端UI界面設計之-註冊登錄

『多級目錄結構』在移動端的交互設計

易被忽略的App界面設計細節

產品經理沒人引導，該怎麼進步？

【附源文件】5款精美小程序原型設計模板，觸手可得

設計體系，你所不知道的「前世今生」

小小圖標功能大，10個最佳Material Design 圖標資源你不可錯過

什麼樣的原型更受開發歡迎 ？

---

Mockplus 做原型，更快，更簡單！?

mockplus.cn
推薦閱讀：