2022-3-11 周周
瀏覽了許多關于“設計規(guī)范”的文章，發(fā)現(xiàn)很多都是在針對通用流程和視覺方面在整理，關于交互層面的內容比較少?；诖?，結合最近項目中沉淀的實際案例，以及參考了不少行業(yè)通用的設計規(guī)范，總結了一篇關于搭建交互規(guī)范的流程、框架、要點。希望能夠幫助大家更好的沉淀交互規(guī)范。
說起設計規(guī)范，大家應該都不陌生，一個成熟的設計規(guī)范對 產(chǎn)品設計、研發(fā)開發(fā)、用戶使用 都有著重要的指導作用：
產(chǎn)品設計：保障產(chǎn)品內不同模塊的設計一致性，同時提高不同設計師間的設計、協(xié)作效率
研發(fā)開發(fā)：通過定義的標準規(guī)范，提高流程、組件的復用率，提高整體開發(fā)效率
用戶使用：讓用戶能夠在產(chǎn)品全局感受到統(tǒng)一且完整的體驗，降低使用成本和學習難度
而一個完整的設計規(guī)范一般分成「視覺」「交互」兩個部分合并組成，在全局原則的指導下，側重不同的維度和內容分別展開規(guī)范的定義，最后再合到一起形成一份完整的設計規(guī)范。
從用戶體驗要素來看，視覺主要是在「表現(xiàn)層」「框架層」進行規(guī)范的統(tǒng)一，主要包括：形、色、字、構、質、動 六個層面。
而交互角度相對抽象，主要針對于產(chǎn)品的「結構層」「框架層」入手，定義統(tǒng)一的交互規(guī)范，指導頁面、流程搭建和組件使用規(guī)則。包括：全局原則、頁面布局、通用流程、標準組件、文案規(guī)范。
整體維度呈“從抽象到具體的總分關系”，不僅對產(chǎn)品的各個維度都有具體的交互指導，而且不僅能保證長期使用，避免重復返工；同時也便于囊括后續(xù)的迭代內容。而這些內容，就是我們通常定義的交互規(guī)范，也是交互參與定義設計規(guī)范的發(fā)力點。
有了對于基本認識和搭建框架之后，我們來詳細聊聊如何定義交互規(guī)范具體內容。
產(chǎn)品有不同發(fā)展階段，設計規(guī)范同樣也有，不同階段下的產(chǎn)品目標和規(guī)范需要覆蓋的內容都不盡相同。我們要既要避免做多，保證投入產(chǎn)出比最大化；同時也要構建一個合理的規(guī)范迭代思路。
產(chǎn)品探索初期
該階段的產(chǎn)品核心目標是「驗證產(chǎn)品或商業(yè)模型」，業(yè)務需求都是小步快跑、頻繁迭代。產(chǎn)品處于從0到1的野蠻生長狀態(tài)，存在著“先滿足功能，再優(yōu)化體驗”的情況，導致該階段的產(chǎn)品體驗往往不太過關。
搭建目的：通過定義原則，梳理關鍵頁面和流程，搭建基本的規(guī)范框架。既讓團隊對產(chǎn)品有統(tǒng)一的設計價值觀和認知判斷；從頁面到流程，又能對應設計參照標準；同時業(yè)務可以在規(guī)定的框架下發(fā)展，不僅讓產(chǎn)品體驗的根基牢固，而且不會限制功能設計自由。
搭建范圍：「全局原則」「頁面布局」「通用流程」
產(chǎn)品穩(wěn)定發(fā)展期
該階段的產(chǎn)品基本形態(tài)已穩(wěn)定，也形成了初步的模型結構。后續(xù)迭代是在現(xiàn)有結構的基礎上，進行增加或優(yōu)化功能。雖然探索期定義了產(chǎn)品原則、布局和流程，但探索期產(chǎn)品的自由生長，會導致不少設計細節(jié)不一致，從而影響了產(chǎn)品整體的體驗和效率。
搭建目的：通過回溯整理過往設計，沉淀優(yōu)化成完整的交互規(guī)范。再根據(jù)規(guī)范統(tǒng)一產(chǎn)品體驗，進一步優(yōu)化流程和效率， 讓整個產(chǎn)品體驗達到相對穩(wěn)定的狀態(tài)。
搭建范圍：「全局原則」「頁面布局」「通用流程」「標準組件」「文案規(guī)范」
與行業(yè)通用的設計規(guī)范（如TDesign、AntDesign，文末領取騰訊設計系統(tǒng)源文件）“大而全”“通用”的特質不同，一般團隊內構建的設計規(guī)范都是源于某一個產(chǎn)品或業(yè)務，主要的特點是“專精”。專注于「業(yè)務」本身，主要是「團隊內成員使用」，追求的是投入產(chǎn)出比最大化。
基于此背景，當我們在定義「交互規(guī)范」時，有三點原則：
原則一：保持規(guī)范的業(yè)務性。設計規(guī)范既要貼合業(yè)務場景歸納完整，同時又要避免憑空定義脫離實際。故我們定義時要代入業(yè)務規(guī)劃，盡量富有前瞻性，這樣定義的規(guī)范不僅能覆蓋當前需要，同時后續(xù)也能更好地迭代。
原則二：保持規(guī)范的專注性。有的放矢，明確內容優(yōu)先級，避免盲目追求大而全和形式主義。對于優(yōu)先級高（覆蓋面廣、復用率高）的關鍵內容重點描述；優(yōu)先級低（邏輯簡單、認知一致）的內容可簡要描述，避免事無巨細降低效率。
原則三：保持規(guī)范的生長性。設計規(guī)范不是一成不變，而是跟隨業(yè)務發(fā)展不斷迭代完善的，所以需要階段性的回顧規(guī)范。遇到規(guī)范未能覆蓋或無法指導設計的地方，及時修訂同步團隊，避免墨守成規(guī)，固步自封。
最后，還有一點建議：在定義規(guī)范時，可以站在前人肩膀，適度參考行業(yè)設計規(guī)范，能復用用的直接參考，具有業(yè)務特性的再集合業(yè)務綜合考慮，使整個規(guī)范制定效率更高，科學性、指導性更強。
在找到自己當前所屬的產(chǎn)品階段、明確要建立哪些設計規(guī)范后，具體應該如何進行落地執(zhí)行呢？建議從以下4個步驟入手。
如上文中提到，一個完整的交互規(guī)范分為：「全局原則」「頁面布局」「通用流程」「標準組件」「文案規(guī)范」五個維度，但每個維度具體含有哪些內容，都是不一樣的。仍然需要根據(jù)實際業(yè)務需要去定義，這樣才能盡量保證沒有遺漏，也更好為下一環(huán)節(jié)評估工作量。
通用的做法有兩種：
方式一：整理業(yè)務場景下不同的頁面、流程等，并進行抽象合并?！溉衷瓌t」「頁面框架」和「通用流程」具有強業(yè)務導向，可以采用此方式。
以「頁面布局」為例，就需要將關鍵頁面按統(tǒng)一顆粒度收集（按層級或按場景等）。
方式二：參考行業(yè)通用規(guī)范的定義，先羅列完整，再根據(jù)產(chǎn)品實際業(yè)務需要進行增刪改。
「標準組件」「文案規(guī)范」已經(jīng)在行業(yè)內有了不少科學的目錄和沉淀，可以采用此方式，例如下圖組件的梳理。
最后可產(chǎn)出如下圖的規(guī)范分類和具體內容。（可以列的不是很全，后續(xù)補充具體部分內容時持續(xù)維護這張表。）
有了具體內容作為依據(jù)，便可以根據(jù)此進行排期分工。
分工原則：推薦按規(guī)范分類進行分工，一個大的分類由一人負責，保證專注性。同時團隊交互最好都能參與，保證后續(xù)對規(guī)范更好的沿用。
排期原則：「定義規(guī)范」和「輸出需求」兩者經(jīng)常要并行處理，此時提高效率，控制投入產(chǎn)出比就很重要了，我們需要明確優(yōu)先級，先做什么后做什么。有3個思路可以綜合參考：
- 并行的思路：在定義完「全局原則」后，剩下的頁面、流程、組件、文案都可考慮并行定義，彼此之間沒有明確的依賴項。
- 迭代的思路：近期有迭代的版本，如：即將改版的模塊、反饋較多體驗較差的模塊，其中涉及到的頁面框架、組件可優(yōu)先定義。
- 復用的思路：某些典型頁面、典型流程、典型組件涉及面廣，許多需求的設計都將借鑒參考，亦可優(yōu)先抽象定義。
設計規(guī)范是由不同的設計師一起合作完成，所以我們盡量在一開始，就需要統(tǒng)一規(guī)范的撰寫和展現(xiàn)形式。以此提高后續(xù)合并的效率，同時又能保證其閱讀體驗，讓其它使用者能夠更好遵循。對此，我們定義了幾個關鍵原則：
目錄完整：高效檢索，快速讓使用者找到需要的內容。
原則清晰：抽象的內容往往含有許多概念和原則，需要讓使用者先理解再參考，才能保證后續(xù)使用正確、舉一反三
多圖少字：沒有人喜歡看字，圖片更容易吸收
搭配案例：讓使用者更好的代入場景，理解和使用規(guī)范。
前面鋪墊了許多流程性的內容，就像我們日常輸出設計需求一樣，大家或多或少在工作中都有遇到過。接下來，將重點聊聊，我們具體的內容應該如何定義。依然分成5個環(huán)節(jié)一一講解。
目標：明確影響整站各個模塊、各個頁面設計的原則和規(guī)范，指導我們后續(xù)各種規(guī)范的定義和設計。
而全局原則也分兩種，設計原則和業(yè)務原則兩種。
設計原則：每個完整的設計規(guī)范都需要包含的內容，如：設計價值觀、設計準則?？此葡鄬仗摰臇|西，實則影響后續(xù)整個設計方向。這個部分需要和產(chǎn)品經(jīng)理、視覺同學結合產(chǎn)品的定位和發(fā)展共同提煉。具體定義方式可參考：
《你為什么需要設計原則？》
https://zhuanlan.zhihu.com/p/246430795
業(yè)務原則：源自實際業(yè)務本身產(chǎn)生的問題，行業(yè)內沒有標準定義。需要具體問題具體分析，推導出具體目標，最后再統(tǒng)一制定規(guī)范解決業(yè)務問題。
舉一個實際的例子便于理解：全局Z軸定義
1）明確問題：整站層級高度沒有統(tǒng)一定義，導致不同控件間相互遮擋，沒有統(tǒng)一規(guī)則。需要定義全局Z軸規(guī)范，統(tǒng)一不同場景、頁面、組件的高度。
2）梳理借鑒：統(tǒng)一梳理相關場景、頁面、組件，明確需要定義的范圍。再查找行業(yè)規(guī)范，有無參考借鑒。（如Z軸定義，可參考Material Design）
3）定義規(guī)范：最后通過最具代表性的場景進行展示
全局原則沒有維度高低之分，例如可能全局涉及到的「右鍵菜單」也能被定義成全局原則。不必盲從行業(yè)交互規(guī)范內龐大且抽象的原則。只要能夠實際解決你業(yè)務的需要，能夠覆蓋整站各個部分，都可以納為全局原則。
目標：梳理整站所有關鍵頁面，整理抽象成相對固定的 框架布局&功能分區(qū) 讓后續(xù)設計新頁面時能遵循規(guī)律、找到參考。
頁面框架的搭建一般由四個步驟組成：
第一步，收集頁面：根據(jù)早期定義的規(guī)范分類，收集展示所有相同層級的頁面。這些在定義規(guī)范分類時，應該已收集完成。
第二步，框架布局：提取共性，搭建框架和布局，明確頁面大的區(qū)域劃分和結構。（TDesign布局詳細指南，文末領取騰訊設計系統(tǒng)源文件）
第三步，功能分區(qū)：基于框架布局，細化區(qū)域內具體的業(yè)務功能屬性，如：導航區(qū)、操作區(qū)等。這部分是頁面框架內最接地氣最具指導性的內容，同時也是最難定義的。主要原因如下：
- 定義太細，擔心缺乏前瞻性限制后續(xù)設計：定義越細靈活度就低，后續(xù)改動和限制性就越高。為避免這種問題，推薦在定義關鍵頁面時，按輸出設計稿的思路：整理「信息架構」→定義「功能分區(qū)」，這樣后續(xù)拓展性和前瞻性更高
- 定義太粗，無法定義出明確的功能分區(qū)，擔心缺乏實際指導意義：同一區(qū)域有些頁面展示操作，有些展示導航。從規(guī)范角度好像不應該，但實際套在各個業(yè)務內卻又合理。當遇到這種無法達成一致的情況時，建議就不定義具體的“功能分區(qū)”，避免因為盲目追求統(tǒng)一而限制實際設計。
而可以采用“窮舉舉例”的方式，將該布局下可承載的內容均展示出來，既可以起到參考意義，又能供后續(xù)沿用達到統(tǒng)一的效果。
第四步，加入案例：將剛剛定義的布局框架與功能分區(qū)，與實際案例完整結合，便于后續(xù)理解和沿用。
目標：梳理整站所有流程，對那些可復用的流程進行整理、抽象、封裝。讓后續(xù)設計師和研發(fā)能夠直接沿用。
“可復用的流程”是指：在多個場景下，不改變其原有業(yè)務邏輯的情況下能夠“既插既用”。例如：登錄注冊流程、掃碼關注流程、分享流程等等。往往一個通用流程中，不同的步驟亦可以打散，重新拼裝成不同的流程，以適配具體的場景使用。
下面就舉一個具體的例子：注冊流程。一般完整的注冊流程如下，通過不同的入口觸發(fā)后進入，通過一定步驟后注冊成功。
當業(yè)務有了進一步需求，需要通過插件快捷登錄時，步驟便可以重新組合，再適配具體的場景。
對于設計師要做的，就是識別具體的通用流程有哪些，并將其給「步驟化」串聯(lián)起來。當有新的需求來的時候，判斷能直接復用，還是需要重新組裝，亦或是新增步驟。
而這樣拼裝的思維，恰好對應了研發(fā)搭建流程時的思路。通用流程對于他們就是將不同的步驟進行組合起來。當遇到不同場景時，再以搭積木的方式進行拼裝。
而具體的搭建步驟也是由兩個步驟組成：1.第一步，收集流程；2.第二步，抽象步驟。具體方式上面已提到，就不過多贅述。
目標：將產(chǎn)品內使用過的組件整理成“標準組件”，統(tǒng)一定義規(guī)則，讓后續(xù)設計和研發(fā)時能直接調取組件，提高設計和研發(fā)效率。
其實行業(yè)中已經(jīng)有很多通用組件，可以快速調用。但由于不同業(yè)務的復雜度不一樣，也會生成自己獨特的業(yè)務定制組件。同時，產(chǎn)品持續(xù)在迭代，也很難能抽出時間單獨定義組件。故基于這個背景，結合“需求設計流程”和“組件整理流程”，有兩種高效定義標準組件的方式。
方式一：調用行業(yè)通用組件
第一步，業(yè)務設計確定基本邏輯。
第二步，挑選行業(yè)通用組件，增加業(yè)務規(guī)則。（一般開發(fā)在搭建產(chǎn)品初期時，便會選擇一家行業(yè)組件進行使用，而組件也僅能在這家提供的組件中挑選）
第三步，視覺根據(jù)全局視覺原則，設計新的樣式。
第四步，將交互規(guī)則、視覺樣式合并，統(tǒng)一成標準組件?；A規(guī)則直接引用行業(yè)組件已定義的內容，場景規(guī)則按需補充。
方式二：業(yè)務定制組件
第一步，進行正常的業(yè)務設計。交互根據(jù)需求搭建原型，視覺設計具體樣式。
第二步，判斷組件是否通用，是否可復用到其它場景。例如：分享對話框，不同的內容分享都能夠用得到，像這種就是可抽象成標準組件的典型案例。
第三步，定義標準組件規(guī)范。簡單的組件展示具體樣式即可，團隊內設計師基本認知一致，無需重新學習。而復雜的組件為保證后續(xù)的正確復用，建議包括以下內容：
- 更新日志：因為組件是變動最多的規(guī)范，需要明確具體的版本和改動點
- 組件定義：簡要介紹用途和使用規(guī)則，如對話框定義：必須是用戶主動觸發(fā)時才出現(xiàn)、主要使用在二次確認場景需用戶確認后才消失等。
- 組件結構：介紹組件構成、功能分區(qū)、分區(qū)定義，詳細展示不同分區(qū)內具體信息和對應規(guī)則。
- 使用場景：詳細區(qū)分多種場景下不同的使用方式，明確給予使用指導
- 設計方案：備選，如果比較復雜的組件且涉及到流程中的關鍵環(huán)節(jié)，建議可以考慮復制一個完整的設計方案嵌入其中，便于團隊成員理解沿用。
第四步，跟研發(fā)溝通，封裝成標準組件。這一步是非常關鍵也是重要的一步，這將大大提高我們后續(xù)的組件復用率，降低重復性走查的耗時。推薦使用CoDesign-設計規(guī)范功能，上傳「組件庫」后能夠按目錄自動生成規(guī)范文檔，同時將自動標注和切圖，大大提高研發(fā)開發(fā)標準組件的效率。
目標：將產(chǎn)品內各個場景內文案進行整理，幫助業(yè)務更準確表達意圖，讓設計師更好沿用，同時讓用戶感受到一致的產(chǎn)品風格。
文案就像“產(chǎn)品對用戶說的話”，不同的人說話方式可能并不一樣，沒有絕對的對錯。但清晰明了的語言表述，讓用戶更容易理解；符合產(chǎn)品氣質的語氣，能拉近產(chǎn)品與用戶的距離；統(tǒng)一的文案描述，又能讓用戶在整站一致的語境下體驗產(chǎn)品。
需要定義的內容，包括但不限于以下3個部分：
1.語言：語言是指我們通過什么樣的規(guī)則來組合文字，讓它形成一種慣用的表達方式。例如語句簡潔明了，不過度修飾，避免重復描述，使用簡潔清晰的語序，幫助用戶快速理解；例如用詞精準易懂，使用簡單、易于用戶理解的詞匯，避免使用專業(yè)術語，或過于口語化的表述。
單純說規(guī)則可能太虛了，在實際定義規(guī)范時，還要如下圖所示，加上實際案例示意避免誤解。
2.語氣：語氣是可以體現(xiàn)產(chǎn)品氣質和風格，定義時要結合全局原則內的設計價值觀，明確產(chǎn)品性格后才能更好的定義出符合產(chǎn)品的語氣風格。同一種語境下不同風格的文案就有明顯差異。如網(wǎng)絡異常時：
? 俏皮的文案可能是：網(wǎng)絡開小差，請稍等一下
? 而正經(jīng)的文案可能是：網(wǎng)絡異常，稍后重試。
3.書寫規(guī)則：主要包括常用詞匯的書寫方式，例如「日期簡寫方式」「英文大小寫方式」「使用全角標點符號」等。以及易錯的詞匯短語示意，例如「賬號還是帳號」、「登陸還是登錄」等。這是團隊設計師最容易沿用遵循的，也是接地氣的部分。
4.具體使用指南：以上「語言」「語氣」「書寫規(guī)則」3個部分，是構成全局文案的基礎規(guī)范。如果有充足時間的團隊，可以考慮再結合實際業(yè)務，分別定義不同場景和組件下具體的使用指南。如下圖：
最后再附上各個行業(yè)內定義文案規(guī)范例子，供大家參考：
B端產(chǎn)品文案指南：
https://www.yuque.com/linyecx/dragon/occ7pr#UEUSw
AntDesign 文案規(guī)范：
https://ant.design/docs/spec/copywriting-cn
Clarity Design 文案規(guī)范：
https://design.teambition.com/doc/introduction
國家標點符號用法：
http://www.moe.gov.cn/ewebeditor/uploadfile/2015/01/13/20150113091548267.pdf
定義完交互規(guī)范，后續(xù)將考慮如何將其順利的推進落地。本文羅列幾個推進時重點需要注意的事項。
規(guī)范的定義不是一個人的事情，而是一個團隊事情，它將關系到每個后續(xù)每個人的設計產(chǎn)出。所以在制定規(guī)范期間，應該定期在團隊中進行設計評審。這不僅是評審設計好壞的過程，更是讓團隊達成一致、大家更深入了解如何使用規(guī)范的過程。
注意，參與評審的人不止是設計師，當然也包括具體的業(yè)務開發(fā)，很多時候我們會得到新的思路和啟發(fā)。
規(guī)范搭建的過程中，有很多痛點：組件庫需要多人參與維護和創(chuàng)建，容易造成沖突內容丟失；同時沉淀規(guī)范文檔時，需要圖片逐一復制、粘貼到文檔內，更新時又要重復一遍這樣的操作。而這些問題，使用CoDesign設計規(guī)范功能，就可以有效的解決提高效率。
首先組件庫支持多人同時維護，差量更新；其次組件庫上傳后，可以自動生成/更新規(guī)范文檔，避免反復編寫文檔，整體提效；最后當組件庫有新版本時，會自動提醒團隊內其他成員進行更新，保障團隊設計一致性。
規(guī)范的過程其實也是整體設計走查的過程，我們會發(fā)現(xiàn)有些設計可能有體驗問題，或不符合規(guī)范。每當這個時候，我們就需要對這些設計進行標記。在規(guī)范定義完成之后，迭代排期優(yōu)化線上的設計。
而在實際設計使用過程中，可能又會發(fā)現(xiàn)規(guī)范無法滿足的地方，此時又可以展開新一輪的提煉和總結，再反哺規(guī)范，形成正向循環(huán)促使設計和規(guī)范不斷完善。
在前言的時候就有提到「交互規(guī)范」只是整體規(guī)范中的一部分，最終是需要與視覺合并成一份統(tǒng)一的設計規(guī)范，指導后續(xù)具體的設計。具體的合并方式，在定義的章節(jié)內已有提到，就不再贅述。
最后，我一直認為好的設計規(guī)范是提高設計效率，引導設計方向，而不是因為設計規(guī)范而局限了具體業(yè)務的設計，如果這樣，還不如不去定義。
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯(lián)系，我們立即更正或刪除。
藍藍設計( www.cqzjtgb.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務