前兩天有讀者問我，應該如何區分初級交互設計師和高級交互設計師？有很多指標作為參照，最直觀的問題可以歸結成有沒有出過交互規范。交互涉及到邏輯性，心理學，視覺設計等多個領域，具體到項目需要把控細枝末節，同時也具備歸納總結提煉的功力堪稱完美。

每天充斥著各種會議，需求溝通，整段的時間都少之又少，再不會歸納總結可能覺得每天都在打醬油吧。曾經有句經典對白，不會做視覺規范的設計師只能算是個美工。設計師看到「美工」這兩個字眼，就像開發工程師看到「bug」一樣會瞬間燃起斗志，交互的范疇同理適用。

先有產品，后有規范？

這就像是先有雞還是先有蛋一樣，眾說紛紜。規范顧名思義在經歷了不同產品模塊，不斷迭代的過程中，對于產品設計者和開發者來說都需要一個實施標準來說服對方。當陷入到拉鋸戰，雙方站在天平的兩端都沒有答案的時候，急需標準化的東西來推進產品發展。

同時在不斷迭代的歷程中，很多模塊為了保住功能做了一些修改，這些小的修改積累到一定程度就會對產品整體的一致性方面提出挑戰。

產品中的需求功能點不斷完善的過程中，涉及到業務流程的場景也會豐富起來，很多的組件適用于不同場景也成為產品中必不可少的一部分。統一的對這部分已經積累下來的真實組件形成規范有利于開發和再利用。

所以先有產品，后有規范更為合理。

規范從哪兒開始？

交互規范分為web端和移動端以及其他配合產品使用的設備端，比如iwatch等。web端規范需遵循諸如一致性，連續性，用戶可操控性的交互原則，熟悉windows和Mac的操作方法。相對于移動端以及其他設備端口需要熟悉平臺本身的交互設計規范。

• iPhone 交互設計規范
• material design交互規范
• iwatch 交互設計規范

熟悉了平臺規則，來建立產品自己的規范體系吧。

劃分規范體系

規范是產品系統化的產出，從大的方面產品的整體框架層面說起，包括標題欄、頂部導航、底部操作欄等，共同部分包括各類信息提示和組件，到產品各個模塊相關的業務組件等。

整體框架規范

• 界面規范
• 標題欄
• 頂部導航
• 底部操作欄
• 頁面跳轉邏輯

提示信息規范

• 預先信息提示
• 操作類提示
• 謹慎類信息提示
• 警示類信息提示
• 懸浮類信息提示

因為產品類型不同，組件列表在這里就不一一列出了，大家可以嘗試總結一下。交互規范對每種組件進行詳細描述，包含三部分內容：

• 構成元素，控件由哪些元素組成（文字，icon，操作按鈕等等）。
• 使用場景，控件應用于哪些場景，什么時候會使用到，觸發條件等。
• 細節說明，描述控件具體內容，在不同場景中如何呈現，特殊場景描述等。

小結

規范是形成體系化的標準，制定標準需要遵循4方面原則。

• 統一性和標準性，導航結構一致、響應方式一致、文案表達方式保持一致、信息提示一致、功能名稱保持一致。
• 信息清晰，導向明確，主次布局合理、邏輯清晰、導航層次清晰。
• 反饋及時有效，用戶操作及時反饋、準確、簡單、直白、具有導向性，don’t make me think。
• 防止錯誤，不可修復操作及時提示，預防糾正錯誤，錯誤頁面可及時返回，掌控權留給用戶。

歡迎關注作者的微信公眾號：「小薇談設計」

「設計規范好文合集」

• 《設計規范官網匯總：iOS、Material Design、IBM、Fluent……（持續更新）》
• 《騰訊出品！從零開始制作設計規范的實用指南》
• 《內部教程！超實用6步透視網易設計規范（附完整PDF下載）》

================明星欄目推薦================

優優教程網： UiiiUiii.com 是優設旗下優質中文教程網站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎設計愛好者也準備了貼心的知識樹專欄。開啟免費自學新篇章，按照我們的專欄一步步學習，一定可以迅速上手并制作出酷炫的視覺效果。

設計導航：國內人氣最高的設計網址導航，設計師必備： http://hao.uisdc.com