網易UEDC – 朱子健、蔣蕊遙 ：良好的交互規範可以很好的説明企業、團隊提高產出， 保證用戶體驗。
一. 規範很重要規範和秩序存在于生活的方方面面。 不知道大家有沒觀察過， 稍微有點規模的咖啡連鎖店， 一般至少會有3位職員， 分別負責收銀點單， 製作咖啡， 打掃。 他們各司其職， 高效配合， 以保證快速滿足客戶的需求。 規範操作讓其井井有條且高效運作， 從日常工作規範到設計規範， 都能起到相同的效用。
二. 規範的效益規範的效益 = 提高效率 （內容覆蓋率 × 適用性 × 使用人數） + 保障品質 + 統一體驗
規範可以説明個人、團隊以及整個企業提高效率和產出品質，
舉一個《網易移動端交互規範》中登錄流程的例子。 一名資深設計師設計一套詳細完整的登錄流程需要16小時， 如果沒有針對性指導或相關規範， 設計新人很難考慮周全登錄流程中涉及的防刷機制、自動補全以及各種帳號的異常校驗等細節。 但使用交互規範後， 設計新人產出一套高品質的登錄流程只需4小時， 提高效率約75%， 同時更保證了產出品質。
當然以上僅針對設計師個人角度的效率提升。 從整個企業而言， 針對規範涉及的所有元件模組， 設計師以及上下游同學的每次使用都能解放重複工作， 產生價值。
三. 優秀的設計規範有很多優秀的例子：Google、Apple、Microsoft這些引領全球設計風尚的公司，
靈活 Flexible
可拓展 Expansive
系統的 Systematic
標準的 Standard
四. 規範製作規範系統看似複雜， 但將其大任務分成一個個小任務， 會發現其實也不是那麼困難。 以下會告訴大家如何製作交互規範， 主要包含以下內容：
製作時機
規範流程
設計方法
1. 製作時機
產品初期， 從0-1階段。
框架層級
在這個階段， 所有的模組都是新的， 所以要定最基礎的框架層級， 如下所示：
△ 圖片來源《網易蜂巢交互文檔》
這是我們對web頁面的層級梳理， 有底層、內容層、導航層、全屏操作層、外掛程式層和模態彈窗層。 搭好基礎框架後， 所有的控制群組件都會在這個框架內搭建， 好比房子的框架。 這樣做的好處除了方便設計師自己去清晰的理解系統， 在與前端開發交流的時候也十分高效。
柵格系統和常用解析度
不論是Web端還是移動端， 在早期要確定好常用螢幕的解析度， 螢幕尺寸的相容性。
基礎交互控制項
前期產品搭建速度很快， 但都是基礎功能， 所以在交互元件的選擇上可以和產品同步。 如， 刷新、Hover樣式、時間顯示、輸入框、對話方塊和基礎元件庫等。 如下所示：
產品穩定， 成熟階段
當產品逐漸穩定， 發展到2.0版本時， 我們交互元件庫也同樣隨著產品一步步的進化。 基礎交互控制項會變成複合型元件和業務型元件， 數量也會越來越多。 此時需要對各種類型的控制項進行分類， 比如基礎類、導航類、選擇類等等。 為了所有查看交互文檔的人查看方便， 我們需要輸出《xx產品交互規範文檔》之類的指導型文檔。
2. 規範流程
一旦我們決定製作規範，就要把規範當成一個產品去做。去梳理一套高效合理、可複用的製作流程，去分析產出什麼樣的「規範產品」才能產生最大的價值。
總的來說，可以在以下主流程的基礎上，綜合考慮規範效益模型的幾個影響因素，落實規範製作的設計方案，從而使規範價值最大化。
明確目的
首先要確立使用者目標和設計目標，在一條相對完整的產品線上，找出可以和交互設計規範有接觸的角色。
如下圖所示，列出來的角色都有可能是我們的目標使用者。比如當交互人力不足時，運營同學可以通過交互規範中的元件簡單的搭建出頁面，或者前端同學在寫頁面時遇到某個萬用群組件不清晰，直接去查看交互規範就能解決問題。交互規範就是為這些「利益相關者」準備的「設計說明書」。
不同的角色對於交互規範有不同的使用場景，可以根據規範當前的反覆運算逐步豐富。理想的狀態下可以進行較全面的覆蓋。
交互設計師：打開「交互範本」新建一份設計稿，設計過程中使用「元件庫」搭建一些自訂的設計方案；製作過程中發現規範中已有的範本，對照「線上規範」或「紙質規範手冊」查閱；對於規範中已有的相似模組，從「交互稿原始檔案」中複製一份到自己的設計稿進行修改；對於完全相同的模組，直接標明線上模組。 因此，要覆蓋交互設計師的使用場景，可以產出交互範本、元件庫、可使用的原始檔案、線上和紙質手冊等產品，考慮到不同團隊使用的工具不一樣，可以做Axure、和Sketch兩套格式的規範。
視覺設計師、產品、運營等：用相同的方法去梳理這些角色的使用場景，主要包含規範原始檔案、線上和紙質規範。
前端等：線上和紙質規範、規範原始程式碼。
對設計目的心中有數之後，就可以開始規劃具體實施了。
規範內容
規範具體包含哪些內容，目錄要怎麼設計，每項內容要交給哪個設計師去執行需要在專案的開始就確定好。
確定規範內容主要分為兩個步驟：
根據產品階段初步判斷需要主要產出哪一類型的規範，基礎型、複合型還是業務型。
在初步規劃的基礎上明確具體製作哪些元件和模組的規範。
明確具體元件時，我們可以通過統計相關已有產品的通用模組；問卷或訪談設計師需求等；頭腦風暴方法來收集素材作為規範的內容池。每次反覆運算按價值和複雜度的平衡，從內容池中篩選一部分模組進行規範製作。
設計語言
為了輸出的統一性，規範應該有自己的基本原則，並圍繞原則進行製作。有點校訓、宣言、口號的感覺。以下是舉兩個案例，可供參考。
△ 《網易移動交互規範》
Aesthetic Integrity 整體美學、Consistency 一致性、Direct Manipulation 直接操作、Feedback回饋、Metaphors 隱喻 、User Control 用戶控制。──《iOS Design Principles》
規範的規範
我們在做規範，那在設計規範時候更應該有自己的規範。每位設計師都有自己的設計風格，但我們在做同一件事情，需要統一交互文檔內的所有內容形式，在文檔排版部分，需要統一標題字體、內容字體、段落分部、流程連結；在交互說明部分，需要包含元件場景、交互流程、使用者行為、交互樣式、介面元素和樣式。下圖參考：
團隊協作
如果團隊內有多個交互設計師去做設計規範，產出物質量和統一性就至關重要。品質可以通過加入審核環節達到目的，統一性則要依賴協同以確保各個設計師的資訊以及手中資料同步。
現在的交互原型軟體都是有線上協同功能，設置在一個伺服器中就可以。協同時需要注意，要保留每一次的修改記錄和設計聯繫方式，修改完畢最好要告知其他設計師，如果是多個控制群組件大改，則需要通知到所有人。如下圖參考：
持續反覆運算
在設計任何產品都不可能一次就完美，在設計交互規範時也需要按照優先順序排期。基礎的、必要的放在第一期，複合型、複雜的向後放，隨著產品的逐漸完善，我們的交互規範也會越來越完整。
反覆運算的時候可以從三個方面入手：
每個模組自身的優化。在之前的版本投入使用後可以找使用者收集使用回饋，模組是否有用，是否通用，能夠提高多少效率，能不能做到直接使用等等，針對回饋意見進行模組優化。
豐富模組。將更多內容池中的元件模組規範化。
更多應用場景。經過一系列反覆運算後交互規範可能進入維護階段，更新頻次降低。這時候就需要將其「產品化」，可能是一本白皮書《交互設計規範》，可能是和視覺樣式、前端代碼封裝組合的前端設計指南，將自己的設計規範擴散到更多領域。
推廣使用
規範要真正有人用才能體現價值，從規範的效益模型中也能看出，對於團隊和企業來講，使用規範的人數是與規範帶來的效益是成直接正比的。使用的人越多，越能夠削弱製作規範的邊際成本。 推廣時（主要是企業內推廣，企業外推廣就更複雜了）可以包含但不僅限於以下方法：
媒體管道：宣講會、公司知識論壇、團隊公眾號、海報展架、EDM、手冊。
行政管道：通過各個團隊負責人進行推廣。
個人管道：規範使用過程中的口碑宣傳，尤其對於剛進團隊和企業的新人最為有效。
資源互換：與其他規範，如視覺設計規範、前端規範等綁定推廣，以及相關團隊內部的互相推廣。
3. 設計方法
前面說了基本的設計流程，本章會介紹組件的設計。 在這裡套用一個不算過時的方法論——Atomic Design 原子設計。概念很簡單，就是將複雜的組合拆解成最小的單元素，再將這些元素重新組合，變成新的分子。原子設計的五個階段分別是：
原子：為網頁構成的基本元素。例如標籤、輸入，或是一個按鈕，也可以為抽象的概念，例如字體、色調等；與我們相對應的是基礎元件。
分子：由原子構成的簡單UI元件。例如，一個表單標籤，搜索框和按鈕共同打造了一個搜索表單分子；與我們相對應的是基礎群組控制項。
組織：由原子及分子組成的相對複雜的UI構成物；與我們相對應的是複合組件。
模版：將以上元素進行排版，顯示設計的底層內容結構；與我們相對應的是模式，各類功能模組。
頁面：將實際內容（圖片、文章等）套件在特定範本，頁面是範本的具體實例；最後是整體的頁面。
基礎元元件
以按鈕為例，在描述按鈕狀態時候按照預設狀態、觸發（啟動態）、操作回饋、異常狀態—禁用和報錯、其他樣式。
複合組件—萬用群組件
由元元件構成的複合型元件，通用標準，可以在產品業務內的大部分場景下使用。例如，含有多種內容的模態彈窗。以下圖彈窗為例，屬於頁面層級的最上層，可能包含多個元控制項，單行文本，多行文本，單選，複選等等。
複合元件—業務元件（場景元件）
隨著產品的功能變得越來越複雜和特殊或需要定制的業務需求，就產生了「業務專屬元件」這一類型，即萬用群組件在業務場景下的變形。如下圖例，一個下拉控制項的進化史：一開始只是普通的下拉選擇控，下拉項增多後直接就添加了搜索功能。業務需要同時支援多選，就又添加了多選功能。
模式
此項英文叫Pattern，暫且將其翻譯成「模式」，就是將各種元素進行排版，顯示設計內容結構，例如導航系統，登錄註冊模組等。
上面介紹了交互規範的主要設計流程和設計方法。但做出來只是一個剛剛開始，推廣，運營，維護，反覆運算等等全是事兒。可能設計師花了很大力氣做出來，但最終執行使用依然不理想。結合自己參與的產品設計和後期執行，總結有以下幾個坑：
每個設計師在工作中都有自己的方法習慣，如果堅持了很久，突然被新的方式代替，會很不適應。
規範的維護成本較高，需要設計師花很多精力去跟進。
規範設計本身有問題，可能是某個控制項的說明有異議，導致其他人不認同。
團隊整體溝通不到位，導致執行不到位。需要內部自上而下的推動。
應對以上問題，可以通過以下方式去解決：
首先交互規範切入的時機要把控好，如果是產品初期，設計師剛產生對本產品的「認知」，使用度會更高。新人設計師在缺少經驗的時候也十分願意使用現有的規範。其次設計團隊認知高度統一，群策群力，首先要保證內部認可，不能單個設計師「自嗨」。每一條新增或修改都要沒有異議。最後設計規範要與前端視覺一起封裝才能發揮它的終極價值，爭取資源做到最好。
最後要強調的是，規範是基礎，並不能概括所有場景，隨著產品業務的變化，規範需要反覆運算更新的，所以在設計元件時，需要儘量通用和可拓展。設計師依然需要從業務場景出發，在基礎元件上進行調整和設計，不能盲目「迷信」規範，即要以不變的基礎應萬變的場景。
六. 總結再來回顧一下交互規範的設計流程：
規範很重要，可以説明個人、團隊以及整個企業提高效率和產出品質，保障用戶體驗統一。優秀規範具有靈活、可拓展、系統性、標準性等特點。
把控規範設計並切入產品的時機和各個階段需要做的事情。
規範設計流程、目標、設計內容、制定規範的規定等注意要點。
規範內容設計方法，運用「原子設計」的方法論去發散設計：基礎通用元件、複合場景元件、模式等。
對規範的反思，不僅僅是設計出爐，能落地更加重要。
設計規範是工具，提升效率是核心，同時也可以當做尺規，保證設計稿產出的品質和產品統一性。
------
作者：網易UEDC，原創發佈，如需轉載請聯繫原文作者
商業轉載請聯繫作者獲得授權，非商業轉載請注明出處！
2. 規範流程
一旦我們決定製作規範，就要把規範當成一個產品去做。去梳理一套高效合理、可複用的製作流程，去分析產出什麼樣的「規範產品」才能產生最大的價值。
總的來說，可以在以下主流程的基礎上，綜合考慮規範效益模型的幾個影響因素，落實規範製作的設計方案，從而使規範價值最大化。
明確目的
首先要確立使用者目標和設計目標，在一條相對完整的產品線上，找出可以和交互設計規範有接觸的角色。
如下圖所示，列出來的角色都有可能是我們的目標使用者。比如當交互人力不足時，運營同學可以通過交互規範中的元件簡單的搭建出頁面，或者前端同學在寫頁面時遇到某個萬用群組件不清晰，直接去查看交互規範就能解決問題。交互規範就是為這些「利益相關者」準備的「設計說明書」。
不同的角色對於交互規範有不同的使用場景，可以根據規範當前的反覆運算逐步豐富。理想的狀態下可以進行較全面的覆蓋。
交互設計師：打開「交互範本」新建一份設計稿，設計過程中使用「元件庫」搭建一些自訂的設計方案；製作過程中發現規範中已有的範本，對照「線上規範」或「紙質規範手冊」查閱；對於規範中已有的相似模組，從「交互稿原始檔案」中複製一份到自己的設計稿進行修改；對於完全相同的模組，直接標明線上模組。 因此，要覆蓋交互設計師的使用場景，可以產出交互範本、元件庫、可使用的原始檔案、線上和紙質手冊等產品，考慮到不同團隊使用的工具不一樣，可以做Axure、和Sketch兩套格式的規範。
視覺設計師、產品、運營等：用相同的方法去梳理這些角色的使用場景，主要包含規範原始檔案、線上和紙質規範。
前端等：線上和紙質規範、規範原始程式碼。
對設計目的心中有數之後，就可以開始規劃具體實施了。
規範內容
規範具體包含哪些內容，目錄要怎麼設計，每項內容要交給哪個設計師去執行需要在專案的開始就確定好。
確定規範內容主要分為兩個步驟：
根據產品階段初步判斷需要主要產出哪一類型的規範，基礎型、複合型還是業務型。
在初步規劃的基礎上明確具體製作哪些元件和模組的規範。
明確具體元件時，我們可以通過統計相關已有產品的通用模組；問卷或訪談設計師需求等；頭腦風暴方法來收集素材作為規範的內容池。每次反覆運算按價值和複雜度的平衡，從內容池中篩選一部分模組進行規範製作。
設計語言
為了輸出的統一性，規範應該有自己的基本原則，並圍繞原則進行製作。有點校訓、宣言、口號的感覺。以下是舉兩個案例，可供參考。
△ 《網易移動交互規範》
Aesthetic Integrity 整體美學、Consistency 一致性、Direct Manipulation 直接操作、Feedback回饋、Metaphors 隱喻 、User Control 用戶控制。──《iOS Design Principles》
規範的規範
我們在做規範，那在設計規範時候更應該有自己的規範。每位設計師都有自己的設計風格，但我們在做同一件事情，需要統一交互文檔內的所有內容形式，在文檔排版部分，需要統一標題字體、內容字體、段落分部、流程連結；在交互說明部分，需要包含元件場景、交互流程、使用者行為、交互樣式、介面元素和樣式。下圖參考：
團隊協作
如果團隊內有多個交互設計師去做設計規範，產出物質量和統一性就至關重要。品質可以通過加入審核環節達到目的，統一性則要依賴協同以確保各個設計師的資訊以及手中資料同步。
現在的交互原型軟體都是有線上協同功能，設置在一個伺服器中就可以。協同時需要注意，要保留每一次的修改記錄和設計聯繫方式，修改完畢最好要告知其他設計師，如果是多個控制群組件大改，則需要通知到所有人。如下圖參考：
持續反覆運算
在設計任何產品都不可能一次就完美，在設計交互規範時也需要按照優先順序排期。基礎的、必要的放在第一期，複合型、複雜的向後放，隨著產品的逐漸完善，我們的交互規範也會越來越完整。
反覆運算的時候可以從三個方面入手：
每個模組自身的優化。在之前的版本投入使用後可以找使用者收集使用回饋，模組是否有用，是否通用，能夠提高多少效率，能不能做到直接使用等等，針對回饋意見進行模組優化。
豐富模組。將更多內容池中的元件模組規範化。
更多應用場景。經過一系列反覆運算後交互規範可能進入維護階段，更新頻次降低。這時候就需要將其「產品化」，可能是一本白皮書《交互設計規範》，可能是和視覺樣式、前端代碼封裝組合的前端設計指南，將自己的設計規範擴散到更多領域。
推廣使用
規範要真正有人用才能體現價值，從規範的效益模型中也能看出，對於團隊和企業來講，使用規範的人數是與規範帶來的效益是成直接正比的。使用的人越多，越能夠削弱製作規範的邊際成本。 推廣時（主要是企業內推廣，企業外推廣就更複雜了）可以包含但不僅限於以下方法：
媒體管道：宣講會、公司知識論壇、團隊公眾號、海報展架、EDM、手冊。
行政管道：通過各個團隊負責人進行推廣。
個人管道：規範使用過程中的口碑宣傳，尤其對於剛進團隊和企業的新人最為有效。
資源互換：與其他規範，如視覺設計規範、前端規範等綁定推廣，以及相關團隊內部的互相推廣。
3. 設計方法
前面說了基本的設計流程，本章會介紹組件的設計。 在這裡套用一個不算過時的方法論——Atomic Design 原子設計。概念很簡單，就是將複雜的組合拆解成最小的單元素，再將這些元素重新組合，變成新的分子。原子設計的五個階段分別是：
原子：為網頁構成的基本元素。例如標籤、輸入，或是一個按鈕，也可以為抽象的概念，例如字體、色調等；與我們相對應的是基礎元件。
分子：由原子構成的簡單UI元件。例如，一個表單標籤，搜索框和按鈕共同打造了一個搜索表單分子；與我們相對應的是基礎群組控制項。
組織：由原子及分子組成的相對複雜的UI構成物；與我們相對應的是複合組件。
模版：將以上元素進行排版，顯示設計的底層內容結構；與我們相對應的是模式，各類功能模組。
頁面：將實際內容（圖片、文章等）套件在特定範本，頁面是範本的具體實例；最後是整體的頁面。
基礎元元件
以按鈕為例，在描述按鈕狀態時候按照預設狀態、觸發（啟動態）、操作回饋、異常狀態—禁用和報錯、其他樣式。
複合組件—萬用群組件
由元元件構成的複合型元件，通用標準，可以在產品業務內的大部分場景下使用。例如，含有多種內容的模態彈窗。以下圖彈窗為例，屬於頁面層級的最上層，可能包含多個元控制項，單行文本，多行文本，單選，複選等等。
複合元件—業務元件（場景元件）
隨著產品的功能變得越來越複雜和特殊或需要定制的業務需求，就產生了「業務專屬元件」這一類型，即萬用群組件在業務場景下的變形。如下圖例，一個下拉控制項的進化史：一開始只是普通的下拉選擇控，下拉項增多後直接就添加了搜索功能。業務需要同時支援多選，就又添加了多選功能。
模式
此項英文叫Pattern，暫且將其翻譯成「模式」，就是將各種元素進行排版，顯示設計內容結構，例如導航系統，登錄註冊模組等。
上面介紹了交互規範的主要設計流程和設計方法。但做出來只是一個剛剛開始，推廣，運營，維護，反覆運算等等全是事兒。可能設計師花了很大力氣做出來，但最終執行使用依然不理想。結合自己參與的產品設計和後期執行，總結有以下幾個坑：
每個設計師在工作中都有自己的方法習慣，如果堅持了很久，突然被新的方式代替，會很不適應。
規範的維護成本較高，需要設計師花很多精力去跟進。
規範設計本身有問題，可能是某個控制項的說明有異議，導致其他人不認同。
團隊整體溝通不到位，導致執行不到位。需要內部自上而下的推動。
應對以上問題，可以通過以下方式去解決：
首先交互規範切入的時機要把控好，如果是產品初期，設計師剛產生對本產品的「認知」，使用度會更高。新人設計師在缺少經驗的時候也十分願意使用現有的規範。其次設計團隊認知高度統一，群策群力，首先要保證內部認可，不能單個設計師「自嗨」。每一條新增或修改都要沒有異議。最後設計規範要與前端視覺一起封裝才能發揮它的終極價值，爭取資源做到最好。
最後要強調的是，規範是基礎，並不能概括所有場景，隨著產品業務的變化，規範需要反覆運算更新的，所以在設計元件時，需要儘量通用和可拓展。設計師依然需要從業務場景出發，在基礎元件上進行調整和設計，不能盲目「迷信」規範，即要以不變的基礎應萬變的場景。
六. 總結再來回顧一下交互規範的設計流程：
規範很重要，可以説明個人、團隊以及整個企業提高效率和產出品質，保障用戶體驗統一。優秀規範具有靈活、可拓展、系統性、標準性等特點。
把控規範設計並切入產品的時機和各個階段需要做的事情。
規範設計流程、目標、設計內容、制定規範的規定等注意要點。
規範內容設計方法，運用「原子設計」的方法論去發散設計：基礎通用元件、複合場景元件、模式等。
對規範的反思，不僅僅是設計出爐，能落地更加重要。
設計規範是工具，提升效率是核心，同時也可以當做尺規，保證設計稿產出的品質和產品統一性。
------
作者：網易UEDC，原創發佈，如需轉載請聯繫原文作者
商業轉載請聯繫作者獲得授權，非商業轉載請注明出處！