超全面的交互規范設計流程發(fā)布者：本站     時(shí)間：2020-04-14 11:04:59

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

二. 規范的效益
規范的效益 = 提高效率 （內容覆蓋率 × 適用性 × 使用人數） + 保障質(zhì)量 + 統一體驗

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

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

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

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

靈活 Flexible
可拓展 Expansive
系統的 Systematic
標準的 Standard
四. 規范制作
規范系統看似復雜，但將其大任務(wù)分成一個(gè)個(gè)小任務(wù)，會(huì )發(fā)現其實(shí)也不是那么困難。以下會(huì )告訴大家如何制作交互規范，主要包含以下內容：

制作時(shí)機
規范流程
設計方法
1. 制作時(shí)機
產(chǎn)品初期，從0-1階段。

框架層級

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



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

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

柵格系統和常用分辨率

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

基礎交互控件

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



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

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



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

總的來(lái)說(shuō)，可以在以下主流程的基礎上，綜合考慮規范效益模型的幾個(gè)影響因素，落實(shí)規范制作的設計方案，從而使規范價(jià)值最大化。



明確目的

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

如下圖所示，列出來(lái)的角色都有可能是我們的目標用戶(hù)。比如當交互人力不足時(shí)，運營(yíng)同學(xué)可以通過(guò)交互規范中的組件簡(jiǎn)單的搭建出頁(yè)面，或者前端同學(xué)在寫(xiě)頁(yè)面時(shí)遇到某個(gè)通用組件不清晰，直接去查看交互規范就能解決問(wèn)題。交互規范就是為這些「利益相關(guān)者」準備的「設計說(shuō)明書(shū)」。



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

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



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

前端等：線(xiàn)上和紙質(zhì)規范、規范源代碼。

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

規范內容

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

確定規范內容主要分為兩個(gè)步驟：

根據產(chǎn)品階段初步判斷需要主要產(chǎn)出哪一類(lèi)型的規范，基礎型、復合型還是業(yè)務(wù)型。
在初步規劃的基礎上明確具體制作哪些組件和模塊的規范。
明確具體組件時(shí)，我們可以通過(guò)統計相關(guān)已有產(chǎn)品的通用模塊；問(wèn)卷或訪(fǎng)談設計師需求等；頭腦風(fēng)暴方法來(lái)收集素材作為規范的內容池。每次迭代按價(jià)值和復雜度的平衡，從內容池中篩選一部分模塊進(jìn)行規范制作。



設計語(yǔ)言

為了輸出的統一性，規范應該有自己的基本原則，并圍繞原則進(jìn)行制作。有點(diǎn)校訓、宣言、口號的感覺(jué)。以下是舉兩個(gè)案例，可供參考。



△ 《網(wǎng)易移動(dòng)交互規范》

Aesthetic Integrity 整體美學(xué)、Consistency 一致性、Direct Manipulation 直接操作、Feedback反饋、Metaphors 隱喻 、User Control 用戶(hù)控制。──《iOS Design Principles》

規范的規范

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





團隊協(xié)作

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

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



持續迭代

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

迭代的時(shí)候可以從三個(gè)方面入手：

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

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

媒體渠道：宣講會(huì )、公司知識論壇、團隊公眾號、海報展架、EDM、手冊。
行政渠道：通過(guò)各個(gè)團隊負責人進(jìn)行推廣。
個(gè)人渠道：規范使用過(guò)程中的口碑宣傳，尤其對于剛進(jìn)團隊和企業(yè)的新人最為有效。
資源互換：與其他規范，如視覺(jué)設計規范、前端規范等綁定推廣，以及相關(guān)團隊內部的互相推廣。
3. 設計方法
前面說(shuō)了基本的設計流程，本章會(huì )介紹組件的設計。 在這里套用一個(gè)不算過(guò)時(shí)的方法論——Atomic Design 原子設計。概念很簡(jiǎn)單，就是將復雜的組合拆解成最小的單元素，再將這些元素重新組合，變成新的分子。原子設計的五個(gè)階段分別是：

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

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



復合組件—通用組件

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



復合組件—業(yè)務(wù)組件（場(chǎng)景組件）

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



模式

此項英文叫Pattern，暫且將其翻譯成「模式」，就是將各種元素進(jìn)行排版，顯示設計內容結構，例如導航系統，登錄注冊模塊等。



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

每個(gè)設計師在工作中都有自己的方法習慣，如果堅持了很久，突然被新的方式代替，會(huì )很不適應。
規范的維護成本較高，需要設計師花很多精力去跟進(jìn)。
規范設計本身有問(wèn)題，可能是某個(gè)控件的說(shuō)明有異議，導致其他人不認同。
團隊整體溝通不到位，導致執行不到位。需要內部自上而下的推動(dòng)。
應對以上問(wèn)題，可以通過(guò)以下方式去解決：

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

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

六. 總結
再來(lái)回顧一下交互規范的設計流程：

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