騰訊CDC體驗設計 - 全局交互規範制定指南－鑽石舞台

導語：瀏覽了許多關於「設計規範」的文章，發現很多都是在針對通用流程和視覺方面在整理，關於交互層面的內容比較少。基於此，結合最近項目中沉澱的實際案例，以及參考了不少行業通用的設計規範，總結了一篇關於搭建交互規範的流程、框架、要點。希望能夠幫助大家更好的沉澱交互規範。

文章概覽

本文共三個章節，閱讀全文大概需要15分鐘。

1.如何「理解」交互規範

說起設計規範，大家應該都不陌生，一個成熟的設計規範對產品設計、研發開發、用戶使用都有着重要的指導作用：

產品設計：保障產品內不同模塊的設計一致性，同時提高不同設計師間的設計、協作效率

研發開發：通過定義的標準規範，提高流程、組件的復用率，提高整體開發效率

用戶使用：讓用戶能夠在產品全局感受到統一且完整的體驗，降低使用成本和學習難度

而一個完整的設計規範一般分成「視覺」「交互」兩個部分合併組成，在全局原則的指導下，側重不同的維度和內容分別展開規範的定義，最後再合到一起形成一份完整的設計規範。

從用戶體驗要素來看，視覺主要是在「表現層」「框架層」進行規範的統一，主要包括：形、色、字、構、質、動六個層面。

而交互角度相對抽象，主要針對於產品的「結構層」「框架層」入手，定義統一的交互規範，指導頁面、流程搭建和組件使用規則。包括：全局原則、頁面布局、通用流程、標準組件、文案規範。

整體維度呈「從抽象到具體的總分關係」，不僅對產品的各個維度都有具體的交互指導，而且不僅能保證長期使用，避免重複返工；同時也便於囊括後續的迭代內容。而這些內容，就是我們通常定義的交互規範，也是交互參與定義設計規範的發力點。

有了對於基本認識和搭建框架之後，我們來詳細聊聊如何定義交互規範具體內容。

2.不同階段應該定義哪些交互規範？

產品有不同發展階段，設計規範同樣也有，不同階段下的產品目標和規範需要覆蓋的內容都不盡相同。我們要既要避免做多，保證投入產出比最大化；同時也要構建一個合理的規範迭代思路。

產品探索初期：

該階段的產品核心目標是「驗證產品或商業模型」，業務需求都是小步快跑、頻繁迭代。產品處於從0到1的野蠻生長狀態，存在着「先滿足功能，再優化體驗」的情況，導致該階段的產品體驗往往不太過關。

搭建目的：通過定義原則，梳理關鍵頁面和流程，搭建基本的規範框架。既讓團隊對產品有統一的設計價值觀和認知判斷；從頁面到流程，又能對應設計參照標準；同時業務可以在規定的框架下發展，不僅讓產品體驗的根基牢固，而且不會限制功能設計自由。

搭建範圍：「全局原則」「頁面布局」「通用流程」

產品穩定發展期：

該階段的產品基本形態已穩定，也形成了初步的模型結構。後續迭代是在現有結構的基礎上，進行增加或優化功能。雖然探索期定義了產品原則、布局和流程，但探索期產品的自由生長，會導致不少設計細節不一致，從而影響了產品整體的體驗和效率。

搭建目的：通過回溯整理過往設計，沉澱優化成完整的交互規範。再根據規範統一產品體驗，進一步優化流程和效率，讓整個產品體驗達到相對穩定的狀態。

搭建範圍：「全局原則」「頁面布局」「通用流程」「標準組件」「文案規範」

3.如何「定義」交互規範3.1 定義交互規範的原則

與行業通用的設計規範（如TDesign、AntDesign）「大而全」「通用」的特質不同，一般團隊內構建的設計規範都是源於某一個產品或業務，主要的特點是「專精」。專注於「業務」本身，主要是「團隊內成員使用」，追求的是投入產出比最大化。

基於此背景，當我們在定義「交互規範」時，有三點原則：

原則一：保持規範的業務性。設計規範既要貼合業務場景歸納完整，同時又要避免憑空定義脫離實際。故我們定義時要代入業務規劃，儘量富有前瞻性，這樣定義的規範不僅能覆蓋當前需要，同時後續也能更好地迭代。

原則二：保持規範的專注性。有的放矢，明確內容優先級，避免盲目追求大而全和形式主義。對於優先級高（覆蓋面廣、復用率高）的關鍵內容重點描述；優先級低（邏輯簡單、認知一致）的內容可簡要描述，避免事無巨細降低效率。

原則三：保持規範的生長性。設計規範不是一成不變，而是跟隨業務發展不斷迭代完善的，所以需要階段性的回顧規範。遇到規範未能覆蓋或無法指導設計的地方，及時修訂同步團隊，避免墨守成規，固步自封。

最後，還有一點建議：在定義規範時，可以站在前人肩膀，適度參考行業設計規範，能復用用的直接參考，具有業務特性的再集合業務綜合考慮，使整個規範制定效率更高，科學性、指導性更強。

在找到自己當前所屬的產品階段、明確要建立哪些設計規範後，具體應該如何進行落地執行呢？建議從以下4個步驟入手。

3.2 第一步：定義規範分類

如上文中提到，一個完整的交互規範分為：「全局原則」「頁面布局」「通用流程」「標準組件」「文案規範」五個維度，但每個維度具體含有哪些內容，都是不一樣的。仍然需要根據實際業務需要去定義，這樣才能儘量保證沒有遺漏，也更好為下一環節評估工作量。

通用的做法有兩種：

方式一：整理業務場景下不同的頁面、流程等，並進行抽象合併。「全局原則」「頁面框架」和「通用流程」具有強業務導向，可以採用此方式。

以「頁面布局」為例，就需要將關鍵頁面按統一顆粒度收集（按層級或按場景等）。

方式二：參考行業通用規範的定義，先羅列完整，再根據產品實際業務需要進行增刪改。

「標準組件」「文案規範」已經在行業內有了不少科學的目錄和沉澱，可以採用此方式，例如下圖組件的梳理。

最後可產出如下圖的規範分類和具體內容。（可以列的不是很全，後續補充具體部分內容時持續維護這張表。）

3.3 第二步：確定分工排期

有了具體內容作為依據，便可以根據此進行排期分工。

分工原則：推薦按規範分類進行分工，一個大的分類由一人負責，保證專注性。同時團隊交互最好都能參與，保證後續對規範更好的沿用。

排期原則：「定義規範」和「輸出需求」兩者經常要並行處理，此時提高效率，控制投入產出比就很重要了，我們需要明確優先級，先做什麼後做什麼。有3個思路可以綜合參考：

- 並行的思路：在定義完「全局原則」後，剩下的頁面、流程、組件、文案都可考慮並行定義，彼此之間沒有明確的依賴項。

-迭代的思路：近期有迭代的版本，如：即將改版的模塊、反饋較多體驗較差的模塊，其中涉及到的頁面框架、組件可優先定義。

- 復用的思路：某些典型頁面、典型流程、典型組件涉及面廣，許多需求的設計都將借鑑參考，亦可優先抽象定義。

3.4 第三步：統一撰寫原則

設計規範是由不同的設計師一起合作完成，所以我們儘量在一開始，就需要統一規範的撰寫和展現形式。以此提高後續合併的效率，同時又能保證其閱讀體驗，讓其它使用者能夠更好遵循。對此，我們定義了幾個關鍵原則：

目錄完整：高效檢索，快速讓使用者找到需要的內容。

原則清晰：抽象的內容往往含有許多概念和原則，需要讓使用者先理解再參考，才能保證後續使用正確、舉一反三

多圖少字：沒有人喜歡看字，圖片更容易吸收

搭配案例：讓使用者更好的代入場景，理解和使用規範。

3.5 第四步：定義具體規範 ★

前面鋪墊了許多流程性的內容，就像我們日常輸出設計需求一樣，大家或多或少在工作中都有遇到過。接下來，將重點聊聊，我們具體的內容應該如何定義。依然分成5個環節一一講解。

3.5.1 全局原則

目標：明確影響整站各個模塊、各個頁面設計的原則和規範，指導我們後續各種規範的定義和設計。

而全局原則也分兩種，設計原則和業務原則兩種。

設計原則：每個完整的設計規範都需要包含的內容，如：設計價值觀、設計準則。看似相對務虛的東西，實則影響後續整個設計方向。這個部分需要和產品經理、視覺同學結合產品的定位和發展共同提煉。具體定義方式可參考：

你為什麼需要設計原則？

https://zhuanlan.zhihu.com/p/246430795

業務原則：源自實際業務本身產生的問題，行業內沒有標準定義。需要具體問題具體分析，推導出具體目標，最後再統一制定規範解決業務問題。

舉一個實際的例子便於理解：全局Z軸定義

1）明確問題：整站層級高度沒有統一定義，導致不同控件間相互遮擋，沒有統一規則。需要定義全局Z軸規範，統一不同場景、頁面、組件的高度。

2）梳理借鑑：統一梳理相關場景、頁面、組件，明確需要定義的範圍。再查找行業規範，有無參考借鑑。（如Z軸定義，可參考Material Design）

3）定義規範：最後通過最具代表性的場景進行展示

全局原則沒有維度高低之分，例如可能全局涉及到的「右鍵菜單」也能被定義成全局原則。不必盲從行業交互規範內龐大且抽象的原則。只要能夠實際解決你業務的需要，能夠覆蓋整站各個部分，都可以納為全局原則。

3.5.2 頁面框架

目標：梳理整站所有關鍵頁面，整理抽象成相對固定的框架布局&功能分區讓後續設計新頁面時能遵循規律、找到參考。

頁面框架的搭建一般由四個步驟組成：

第一步，收集頁面：根據早期定義的規範分類，收集展示所有相同層級的頁面。這些在定義規範分類時，應該已收集完成。

第二步，框架布局：提取共性，搭建框架和布局，明確頁面大的區域劃分和結構。（TDesign布局詳細指南）

第三步，功能分區：基於框架布局，細化區域內具體的業務功能屬性，如：導航區、操作區等。這部分是頁面框架內最接地氣最具指導性的內容，同時也是最難定義的。主要原因如下：

- 定義太細，擔心缺乏前瞻性限制後續設計：定義越細靈活度就低，後續改動和限制性就越高。為避免這種問題，推薦在定義關鍵頁面時，按輸出設計稿的思路：整理「信息架構」→定義「功能分區」，這樣後續拓展性和前瞻性更高

- 定義太粗，無法定義出明確的功能分區，擔心缺乏實際指導意義：同一區域有些頁面展示操作，有些展示導航。從規範角度好像不應該，但實際套在各個業務內卻又合理。當遇到這種無法達成一致的情況時，建議就不定義具體的「功能分區」，避免因為盲目追求統一而限制實際設計。而可以採用「窮舉舉例」的方式，將該布局下可承載的內容均展示出來，既可以起到參考意義，又能供後續沿用達到統一的效果。

第四步，加入案例：將剛剛定義的布局框架與功能分區，與實際案例完整結合，便於後續理解和沿用。

3.5.3 通用流程

目標：梳理整站所有流程，對那些可復用的流程進行整理、抽象、封裝。讓後續設計師和研發能夠直接沿用。

「可復用的流程」是指：在多個場景下，不改變其原有業務邏輯的情況下能夠「既插既用」。例如：登錄註冊流程、掃碼關注流程、分享流程等等。往往一個通用流程中，不同的步驟亦可以打散，重新拼裝成不同的流程，以適配具體的場景使用。

下面就舉一個具體的例子：註冊流程。一般完整的註冊流程如下，通過不同的入口觸發後進入，通過一定步驟後註冊成功。

當業務有了進一步需求，需要通過插件快捷登錄時，步驟便可以重新組合，再適配具體的場景。

對於設計師要做的，就是識別具體的通用流程有哪些，並將其給「步驟化」串聯起來。當有新的需求來的時候，判斷能直接復用，還是需要重新組裝，亦或是新增步驟。

而這樣拼裝的思維，恰好對應了研發搭建流程時的思路。通用流程對於他們就是將不同的步驟進行組合起來。當遇到不同場景時，再以搭積木的方式進行拼裝。

而具體的搭建步驟也是由兩個步驟組成：1.第一步，收集流程；2.第二步，抽象步驟。具體方式上面已提到，就不過多贅述。

3.5.4 標準組件

目標：將產品內使用過的組件整理成「標準組件」，統一定義規則，讓後續設計和研發時能直接調取組件，提高設計和研發效率。

其實行業中已經有很多通用組件，可以快速調用。但由於不同業務的複雜度不一樣，也會生成自己獨特的業務定製組件。同時，產品持續在迭代，也很難能抽出時間單獨定義組件。故基於這個背景，結合「需求設計流程」和「組件整理流程」，有兩種高效定義標準組件的方式。

方式一：調用行業通用組件

第一步，業務設計確定基本邏輯。

第二步，挑選行業通用組件，增加業務規則。（一般開發在搭建產品初期時，便會選擇一家行業組件進行使用，而組件也僅能在這家提供的組件中挑選）

第三步，視覺根據全局視覺原則，設計新的樣式。

第四步，將交互規則、視覺樣式合併，統一成標準組件。基礎規則直接引用行業組件已定義的內容，場景規則按需補充。

方式二：業務定製組件

第一步，進行正常的業務設計。交互根據需求搭建原型，視覺設計具體樣式。

第二步，判斷組件是否通用，是否可復用到其它場景。例如：分享對話框，不同的內容分享都能夠用得到，像這種就是可抽象成標準組件的典型案例。

第三步，定義標準組件規範。簡單的組件展示具體樣式即可，團隊內設計師基本認知一致，無需重新學習。而複雜的組件為保證後續的正確復用，建議包括以下內容：

- 更新日誌：因為組件是變動最多的規範，需要明確具體的版本和改動點

- 組件定義：簡要介紹用途和使用規則，如對話框定義：必須是用戶主動觸發時才出現、主要使用在二次確認場景需用戶確認後才消失等。

- 組件結構：介紹組件構成、功能分區、分區定義，詳細展示不同分區內具體信息和對應規則。

- 使用場景：詳細區分多種場景下不同的使用方式，明確給予使用指導

- 設計方案：備選，如果比較複雜的組件且涉及到流程中的關鍵環節，建議可以考慮複製一個完整的設計方案嵌入其中，便於團隊成員理解沿用。

第四步，跟研發溝通，封裝成標準組件。這一步是非常關鍵也是重要的一步，這將大大提高我們後續的組件復用率，降低重複性走查的耗時。推薦使用CoDesign-設計規範功能點擊體驗CoDesign小程序，上傳「組件庫」後能夠按目錄自動生成規範文檔，同時將自動標註和切圖，大大提高研發開發標準組件的效率。

3.5.5 文案規範

目標：將產品內各個場景內文案進行整理，幫助業務更準確表達意圖，讓設計師更好沿用，同時讓用戶感受到一致的產品風格。

文案就像「產品對用戶說的話」，不同的人說話方式可能並不一樣，沒有絕對的對錯。但清晰明了的語言表述，讓用戶更容易理解；符合產品氣質的語氣，能拉近產品與用戶的距離；統一的文案描述，又能讓用戶在整站一致的語境下體驗產品。

需要定義的內容，包括但不限於以下3個部分：

1.語言：語言是指我們通過什麼樣的規則來組合文字，讓它形成一種慣用的表達方式。例如語句簡潔明了，不過度修飾，避免重複描述，使用簡潔清晰的語序，幫助用戶快速理解；例如用詞精準易懂，使用簡單、易於用戶理解的詞彙，避免使用專業術語，或過於口語化的表述。單純說規則可能太虛了，在實際定義規範時，還要如下圖所示，加上實際案例示意避免誤解。