良好的交互規(guī)范可以很好的幫助企業(yè)、團隊提高產(chǎn)出，保證用戶體驗。

規(guī)范很重要

規(guī)范和秩序存在于生活的方方面面。不知道大家有沒觀察過，稍微有點規(guī)模的咖啡連鎖店，一般至少會有3位職員，分別負責收銀點單，制作咖啡，打掃。他們各司其職，高效配合，以保證快速滿足客戶的需求。規(guī)范操作讓其井井有條且高效運作，從日常工作規(guī)范到設計規(guī)范，都能起到相同的效用。

規(guī)范的效益

規(guī)范的效益 = 提高效率?（內(nèi)容覆蓋率 × 適用性 × 使用人數(shù)）?+ 保障質(zhì)量 + 統(tǒng)一體驗

規(guī)范可以幫助個人、團隊以及整個企業(yè)提高效率和產(chǎn)出質(zhì)量，保障用戶體驗統(tǒng)一。

舉一個《網(wǎng)易移動端交互規(guī)范》中登錄流程的例子。一名資深設計師設計一套詳細完整的登錄流程需要16小時；如果沒有針對性指導或相關規(guī)范，設計新人很難考慮周全登錄流程中涉及的防刷機制、自動補全以及各種賬號的異常校驗等細節(jié)。但使用交互規(guī)范后，設計新人產(chǎn)出一套高質(zhì)量的登錄流程只需4小時：提高效率約75%，同時更保證了產(chǎn)出質(zhì)量。

當然以上僅針對設計師個人角度的效率提升；從整個企業(yè)而言，針對規(guī)范涉及的所有組件模塊，設計師以及上下游同學的每次使用都能解放重復工作，產(chǎn)生價值。

優(yōu)秀的設計規(guī)范

有很多優(yōu)秀的例子：Google、Apple、Microsoft這些引領全球設計風尚的公司，設計規(guī)范已經(jīng)上升為設計語言，指導旗下所有產(chǎn)品的設計。國內(nèi)做的優(yōu)秀的案例，比如Ant Design，Element等，像這類的產(chǎn)品已經(jīng)實現(xiàn)了端到端的體驗一致，把交互、前端和視覺的事情一并解決了，是值得學習的典范。這些優(yōu)秀的設計規(guī)范都包含以下幾個特點：

• 靈活 Flexible
• 可拓展 Expansive
• 系統(tǒng)的 Systematic
• 標準的 Standard

規(guī)范制作

規(guī)范系統(tǒng)看似復雜，但將其大任務分成一個個小任務，會發(fā)現(xiàn)其實也不是那么困難。以下會告訴大家如何制作交互規(guī)范，主要包含以下內(nèi)容

1. 制作時機
2. 規(guī)范流程
3. 設計方法

一、制作時機

產(chǎn)品初期，從0-1階段

框架層級?

在這個階段，所有的模塊都是新的，所以要定最基礎的框架層級，如下所示：

圖片來源《網(wǎng)易蜂巢交互文檔》

這是我們對web頁面的層級梳理，有底層、內(nèi)容層、導航層、全屏操作層、插件層和模態(tài)彈窗層。搭好基礎框架后，所有的控件組件都會在這個框架內(nèi)搭建，好比房子的框架。這樣做的好處除了方便設計師自己去清晰的理解系統(tǒng)，在與前端開發(fā)交流的時候也十分高效，比如在做模態(tài)彈窗時，如果沒和開發(fā)交流好，開發(fā)同學講彈窗寫在了全屏操作的位置，那么就有可能出現(xiàn)問題。

柵格系統(tǒng)和常用分辨率?

不論是Web端還是移動端，在早期要確定好常用屏幕的分辨率，屏幕尺寸的兼容性。

基礎交互控件?

前期產(chǎn)品搭建速度很快，但都是基礎功能，所以在交互組件的選擇上可以和產(chǎn)品同步。如，刷新、Hover樣式、時間顯示、輸入框、對話框和基礎元件庫等。如下所示：

產(chǎn)品穩(wěn)定，成熟階段

當產(chǎn)品逐漸穩(wěn)定，發(fā)展到2.0版本時，我們交互組件庫也同樣隨著產(chǎn)品一步步的進化。基礎交互控件會變成復合型組件和業(yè)務型組件，數(shù)量也會越來越多。此時需要對各種類型的控件進行分類，比如基礎類、導航類、選擇類等等。為了方便所有查看交互文檔的人查看方便，我們需要輸出《xx產(chǎn)品交互規(guī)范文檔》之類的指導型文檔。

二、規(guī)范流程

一旦我們決定制作規(guī)范，就要把規(guī)范當成一個產(chǎn)品去做。去梳理一套高效合理、可復用的制作流程；去分析產(chǎn)出什么樣的“規(guī)范產(chǎn)品”才能產(chǎn)生最大的價值。

總的來說，可以在以下主流程的基礎上，綜合考慮規(guī)范效益模型的幾個影響因素，落實規(guī)范制作的設計方案，從而使規(guī)范價值最大化。

明確目的

首先要確立用戶目標和設計目標，在一條相對完整的產(chǎn)品線上，找出可以和交互設計規(guī)范有接觸的角色。

如下圖所示，列出來的角色都有可能是我們的目標用戶。比如當交互人力不足時，運營同學可以通過交互規(guī)范中的組件簡單的搭建出頁面，或者前端同學在寫頁面時遇到某個通用組件不清晰，直接去查看交互規(guī)范就能解決問題。交互規(guī)范就是為這些“利益相關者”準備的“設計說明書”。

不同的角色對于交互規(guī)范有不同的使用場景，可以根據(jù)規(guī)范當前的迭代逐步豐富。理想的狀態(tài)下可以進行較全面的覆蓋。

交互設計師：打開【交互模板】新建一份設計稿，設計過程中使用【組件庫】搭建一些自定義的設計方案；制作過程中發(fā)現(xiàn)規(guī)范中已有的模板，對照【線上規(guī)范】或【紙質(zhì)規(guī)范手冊】查閱；對于規(guī)范中已有的相似模塊，從【交互稿源文件】中復制一份到自己的設計稿進行修改；對于完全相同的模塊，直接標明線上模塊。?因此，要覆蓋交互設計師的使用場景，可以產(chǎn)出交互模板、組件庫、可使用的源文件、線上和紙質(zhì)手冊等產(chǎn)品，考慮到不同團隊使用的工具不一樣，可以做Axure、和Sketch兩套格式的規(guī)范。

視覺設計師、產(chǎn)品、運營等：用相同的方法去梳理這些角色的使用場景，主要包含：規(guī)范源文件、線上和紙質(zhì)范；

前端等：線上和紙質(zhì)規(guī)范、規(guī)范源代碼；

對設計目的心中有數(shù)之后，就可以開始規(guī)劃具體實施了。

規(guī)范內(nèi)容

規(guī)范具體包含哪些內(nèi)容，目錄要怎么設計，每項內(nèi)容要交給哪個設計師去執(zhí)行需要在項目的開始就確定好。

內(nèi)確定規(guī)范內(nèi)容主要分為兩個步驟，首先根據(jù)產(chǎn)品階段初步判斷需要主要產(chǎn)出哪一類型的規(guī)范，基礎型、復合型還是業(yè)務型；然后在初步規(guī)劃的基礎上明確具體制作哪些組件和模塊的規(guī)范。

明確具體組件時，我們可以通過1.統(tǒng)計相關已有產(chǎn)品的通用模塊；2.問卷或訪談設計師需求等；3.頭腦風暴方法來收集素材作為規(guī)范的內(nèi)容池。每次迭代按價值和復雜度的平衡，從內(nèi)容池中篩選一部分模塊進行規(guī)范制作。

設計語言

為了輸出的統(tǒng)一性，規(guī)范應該有自己的基本原則，并圍繞原則進行制作。有點校訓、宣言、口號的感覺。以下是舉兩個案例，可供參考。

–?《網(wǎng)易移動交互規(guī)范》

Aesthetic Integrity 整體美學、Consistency 一致性、Direct Manipulation 直接操作、Feedback反饋、Metaphors 隱喻 、User Control 用戶控制

–?《iOS Design Principles》

規(guī)范的規(guī)范

我們在做規(guī)范，那在設計規(guī)范時候更應該有自己的規(guī)范。每位設計師都有自己的設計風格，但我們在做同一件事情，需要統(tǒng)一交互文檔內(nèi)的所有內(nèi)容形式，在文檔排版部分，需要統(tǒng)一標題字體、內(nèi)容字體、段落分部、流程鏈接；在交互說明部分，需要包含組件場景、交互流程、用戶行為、交互樣式、界面元素和樣式。下圖參考：

團隊協(xié)作

如果團隊內(nèi)有多個交互設計師去做設計規(guī)范，產(chǎn)出物質(zhì)量和統(tǒng)一性就至關重要。質(zhì)量可以通過加入審核環(huán)節(jié)達到目的，統(tǒng)一性則要依賴協(xié)同以確保各個設計師的信息以及手中資料同步。

現(xiàn)在的交互原型軟件都是有在線協(xié)同功能，設置在一個服務器中就可以。協(xié)同時需要注意，要保留每一次的修改記錄和設計聯(lián)系方式，修改完畢最好要告知其他設計師，如果是多個控件組件大改，則需要通知到所有人。如下圖參考：

持續(xù)迭代

在設計任何產(chǎn)品都不可能一次就完美，在設計交互規(guī)范時也需要按照優(yōu)先級排期?；A的、必要的放在第一期，復合型、復雜的向后放，隨著產(chǎn)品的逐漸完善，我們的交互規(guī)范也會越來越完整。

迭代的時候可以從三個方面入手：

1. 每個模塊自身的優(yōu)化。在之前的版本投入使用后可以找用戶收集使用反饋，模塊是否有用，是否通用，能夠提高多少效率，能不能做到直接使用……針對反饋意見進行模塊優(yōu)化。
2. 豐富模塊。將更多內(nèi)容池中的組件模塊規(guī)范化。
3. 更多應用場景。經(jīng)過一系列迭代后交互規(guī)范可能進入維護階段，更新頻次降低。這時候就需要將其“產(chǎn)品化”，可能是一本白皮書《交互設計規(guī)范》，可能是和視覺樣式、前端代碼封裝組合的前端設計指南，將自己的設計規(guī)范擴散到更多領域。

推廣使用

規(guī)范要真正有人用才能體現(xiàn)價值，從規(guī)范的效益模型中也能看出，對于團隊和企業(yè)來講，使用規(guī)范的人數(shù)是與規(guī)范帶來的效益是成直接正比的。使用的人越多，越能夠削弱制作規(guī)范的邊際成本。?推廣時（主要是企業(yè)內(nèi)推廣，企業(yè)外推廣就更復雜了）可以包含但不僅限于以下方法：

• 媒體渠道：宣講會、公司知識論壇、團隊公眾號、海報展架、EDM、手冊；
• 行政渠道：通過各個團隊負責人進行推廣；
• 個人渠道：規(guī)范使用過程中的口碑宣傳，尤其對于剛進如團隊和企業(yè)的新人最為有效；
• 資源互換：與其他規(guī)范，如視覺設計規(guī)范、前端規(guī)范等綁定推廣，以及相關團隊內(nèi)部的互相推廣；

三、設計方法

前面說了基本的設計流程，本章會介紹組件的設計。?在這里套用一個不算過時的方法論-Atomic Design 原子設計。概念很簡單，就是將復雜的組合拆解成最小的單元素，再將這些元素重新組合，變成新的分子。原子設計的五個階段分別是：

• 原子：為網(wǎng)頁構成的基本元素。例如標簽、輸入，或是一個按鈕，也可以為抽象的概念，例如字體、色調(diào)等；與我們相對應的是基礎元件
• 分子：由原子構成的簡單UI組件。例如，一個表單標簽，搜索框和按鈕共同打造了一個搜索表單分子；與我們相對應的是基礎組合控件。
• 組織：由原子及分子組成的相對復雜的UI構成物；與我們相對應的是復合組件。
• 模版：將以上元素進行排版，顯示設計的底層內(nèi)容結構；與我們相對應的是模式，各類功能模塊。
• 頁面：將實際內(nèi)容（圖片、文章等）套件在特定模板，頁面是模板的具體實例；最后是整體的頁面。

基礎元組件

以按鈕為例，在描述按鈕狀態(tài)時候按照默認狀態(tài)、觸發(fā)（激活態(tài)）、操作反饋、異常狀態(tài)-禁用和報錯、其他樣式。

復合組件-通用組件

由元組件構成的復合型組件，通用標準，可以在產(chǎn)品業(yè)務內(nèi)的大部分場景下使用。例如，含有多種內(nèi)容的模態(tài)彈窗；以下圖彈窗為例，屬于頁面層級的最上層，可能包含多個元控件，單行文本，多行文本，單選，復選等等。

復合組件-業(yè)務組件（場景組件）

隨著產(chǎn)品的功能變得越來越復雜和特殊或需要定制的業(yè)務需求，就產(chǎn)生了“業(yè)務專屬組件”這一類型，即通用組件在業(yè)務場景下的變形，如下圖例，一個下拉控件的進化史：一開始只是普通的下拉選擇控，下拉項增多后直接就添加了搜索功能。業(yè)務需要同時支持多選，就又添加了多選功能。

模式

此項英文叫Pattern，暫且將其翻譯成“模式”，就是將各種元素進行排版，顯示設計內(nèi)容結構，例如導航系統(tǒng)，登錄注冊模塊等；

四、對交互規(guī)范的反思

上面介紹了交互規(guī)范的主要設計流程和設計方法。但，做出來只是一個剛剛開始，推廣，運營，維護，迭代等等全是事兒?？赡茉O計師花了很大力氣做出來，但最終執(zhí)行使用依然不理想。結合自己參與的產(chǎn)品設計和后期執(zhí)行，總結有以下幾個坑

1. 每個設計師在工作中都有自己的方法習慣，如果堅持了很久，突然被新的方式代替，會很不適應；
2. 規(guī)范的維護成本較高，需要設計師花很多精力去跟進；
3. 規(guī)范設計本身有問題，可能是某個控件的說明有異議，導致其他人不認同；
4. 團隊整體溝通不到位，導致執(zhí)行不到位。需要內(nèi)部自上而下的推動；

應對以上問題，可以通過以下方式去解決：

首先交互規(guī)范切入的時機要把控好，如果是產(chǎn)品初期，設計師對剛產(chǎn)生對本產(chǎn)品“認知”，使用度會更高。新人設計師在缺少經(jīng)驗的時候也十分愿意使用現(xiàn)有的規(guī)范。其次設計團隊認知高度統(tǒng)一，群策群力，首先要保證內(nèi)部認可，不能單個設計師“自嗨”。每一條新增或修改都要沒有異議。最后設計規(guī)范要與前端視覺一起封裝才能發(fā)揮它的終極價值，爭取資源做到最好。

最后要強調(diào)的是，規(guī)范是基礎，并不能概括所有場景，隨著產(chǎn)品業(yè)務的變化，規(guī)范需要迭代更新的，所以在設計組件時，需要盡量通用和可拓展，設計師依然需要從業(yè)務場景出發(fā)，在基礎組件上進行調(diào)整和設計，不能盲目“迷信”規(guī)范，即要以不變的基礎應萬變的場景。

五、總結

再來回顧一下交互規(guī)范的設計流程：

• 規(guī)范很重要，可以幫助個人、團隊以及整個企業(yè)提高效率和產(chǎn)出質(zhì)量，保障用戶體驗統(tǒng)一。優(yōu)秀規(guī)范具有靈活、可拓展、系統(tǒng)性、標準性等特點。
• 把控規(guī)范設計并切入產(chǎn)品的時機和各個階段需要做的事情。
• 規(guī)范設計流程、目標、設計內(nèi)容、制定規(guī)范的規(guī)定等注意要點。
• 規(guī)范內(nèi)容設計方法，運用“原子設計”的方法論去發(fā)散設計：基礎通用元件、復合場景組件、模式等。
• 對規(guī)范的反思，不僅僅是設計出爐，能落地更加重要。

設計規(guī)范是工具，提升效率是核心，同時也可以當做標尺，保證設計稿產(chǎn)出的質(zhì)量和產(chǎn)品統(tǒng)一性。

文中圖片資料來源：

《網(wǎng)易七魚交互規(guī)范文檔》

《網(wǎng)易蜂巢交互規(guī)范文檔》

《網(wǎng)易移動交互規(guī)范》

作者：朱子健、蔣蕊遙，網(wǎng)易UEDC交互設計師。

本文來源于人人都是產(chǎn)品經(jīng)理合作媒體@網(wǎng)易UEDC，作者@朱子健、蔣蕊遙

題圖來自 PEXELS，基于 CC0 協(xié)議