全局交互規范制定指南

6 評論 24615 瀏覽 244 收藏 31 分鐘

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

一、如何「理解」交互規范

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

  • 產品設計:保障產品內不同模塊的設計一致性,同時提高不同設計師間的設計、協作效率
  • 研發開發:通過定義的標準規范,提高流程、組件的復用率,提高整體開發效率
  • 用戶使用:讓用戶能夠在產品全局感受到統一且完整的體驗,降低使用成本和學習難度

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

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

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

整體維度呈“從抽象到具體的總分關系”,不僅對產品的各個維度都有具體的交互指導,而且不僅能保證長期使用,避免重復返工;同時也便于囊括后續的迭代內容。而這些內容,就是我們通常定義的交互規范,也是交互參與定義設計規范的發力點。

有了對于基本認識和搭建框架之后,我們來詳細聊聊如何定義交互規范具體內容。

二、不同階段應該定義哪些交互規范?

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

產品探索初期:

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

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

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

產品穩定發展期:

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

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

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

三、如何「定義」交互規范

1. 定義交互規范的原則

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

基于此背景,當我們在定義「交互規范」時,有三點原則:

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

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

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

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

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

2.? 第一步:定義規范分類

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

通用的做法有兩種:

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

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

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

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

最后可產出如下圖的規范分類和具體內容。(可以列的不是很全,后續補充具體部分內容時持續維護這張表。)

3.? 第二步:確定分工排期

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

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

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

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

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

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

4. 第三步:統一撰寫原則

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

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

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

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

搭配案例:讓使用者更好的代入場景,理解和使用規范。

5.? 第四步:定義具體規范 ★

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

(1)全局原則

目標:明確影響整站各個模塊、各個頁面設計的原則和規范,指導我們后續各種規范的定義和設計。

而全局原則也分兩種,設計原則和業務原則兩種。設計原則:每個完整的設計規范都需要包含的內容,如:設計價值觀、設計準則??此葡鄬仗摰臇|西,實則影響后續整個設計方向。這個部分需要和產品經理、視覺同學結合產品的定位和發展共同提煉。具體定義方式可參考:

你為什么需要設計原則?

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

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

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

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

梳理借鑒:統一梳理相關場景、頁面、組件,明確需要定義的范圍。再查找行業規范,有無參考借鑒。(如Z軸定義,可參考Material Design)

定義規范:最后通過最具代表性的場景進行展示

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

(2) 頁面框架

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

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

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

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

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

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

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

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

(3)通用流程

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

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

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

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

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

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

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

(4)標準組件

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

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

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

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

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

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

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

方式二:業務定制組件

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

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

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

更新日志:因為組件是變動最多的規范,需要明確具體的版本和改動點。

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

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

使用場景:詳細區分多種場景下不同的使用方式,明確給予使用指導。

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

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

(5)文案規范

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

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

需要定義的內容,包括但不限于以下3個部分:

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

語氣:語氣是可以體現產品氣質和風格,定義時要結合全局原則內的設計價值觀,明確產品性格后才能更好的定義出符合產品的語氣風格。同一種語境下不同風格的文案就有明顯差異。如網絡異常時:

  • 俏皮的文案可能是:網絡開小差,請稍等一下。
  • 而正經的文案可能是:網絡異常,稍后重試。

書寫規則:主要包括常用詞匯的書寫方式,例如「日期簡寫方式」「英文大小寫方式」「使用全角標點符號」等。以及易錯的詞匯短語示意,例如「賬號還是帳號」、「登陸還是登錄」等。這是團隊設計師最容易沿用遵循的,也是接地氣的部分。

具體使用指南:以上「語言」「語氣」「書寫規則」3個部分,是構成全局文案的基礎規范。如果有充足時間的團隊,可以考慮再結合實際業務,分別定義不同場景和組件下具體的使用指南。如下圖:

最后再附上各個行業內定義文案規范例子,供大家參考:B端產品文案指南:

https://www.yuque.com/linyecx/dragon/occ7pr#UEUSwAntDesign

文案規范:

https://ant.design/docs/spec/copywriting-cn

Clarity Design 文案規范:

https://design.teambition.com/doc/introduction

國家標點符號用法:

http://www.moe.gov.cn/ewebeditor/uploadfile/2015/01/13/20150113091548267.pdf

四、如何「推進」交互規范

定義完交互規范,后續將考慮如何將其順利的推進落地。本文羅列幾個推進時重點需要注意的事項。

1. 團隊評審,達成一致

規范的定義不是一個人的事情,而是一個團隊事情,它將關系到每個后續每個人的設計產出。所以在制定規范期間,應該定期在團隊中進行設計評審。這不僅是評審設計好壞的過程,更是讓團隊達成一致、大家更深入了解如何使用規范的過程。

注意,參與評審的人不止是設計師,當然也包括具體的業務開發,很多時候我們會得到新的思路和啟發。

2. 善用工具,沉淀規范

規范搭建的過程中,有很多痛點:組件庫需要多人參與維護和創建,容易造成沖突內容丟失;同時沉淀規范文檔時,需要圖片逐一復制、粘貼到文檔內,更新時又要重復一遍這樣的操作。而這些問題,使用CoDesign設計規范功能,就可以有效的解決提高效率。

首先組件庫支持多人同時維護,差量更新;其次組件庫上傳后,可以自動生成/更新規范文檔,避免反復編寫文檔,整體提效;最后當組件庫有新版本時,會自動提醒團隊內其他成員進行更新,保障團隊設計一致性。

3. 運用規范,指導設計

搭建規范的過程其實也是整體設計走查的過程,我們會發現有些設計可能有體驗問題,或不符合規范。每當這個時候,我們就需要對這些設計進行標記。在規范定義完成之后,迭代排期優化線上的設計。

而在實際設計使用過程中,可能又會發現規范無法滿足的地方,此時又可以展開新一輪的提煉和總結,再反哺規范,形成正向循環促使設計和規范不斷完善。

五、寫在最后

在前言的時候就有提到「交互規范」只是整體規范中的一部分,最終是需要與視覺合并成一份統一的設計規范,指導后續具體的設計。具體的合并方式,在定義的章節內已有提到,就不再贅述。

最后,我一直認為好的設計規范是提高設計效率,引導設計方向,而不是因為設計規范而局限了具體業務的設計,如果這樣,還不如不去定義。

 

作者:騰訊CDC,微信公眾號:騰訊CDC體驗設計

本文由 @騰訊CDC體驗設計 原創發布于人人都是產品經理,未經許可,禁止轉載

題圖來自 Unsplash,基于CC0協議

作者:ellenhu

來源公眾號:騰訊CDC體驗設計(ID:tx_cdc),構建數字時代互聯網生態的用戶價值與體驗創新

本文由人人都是產品經理合作媒體 @CDC 授權發布,未經許可,禁止轉載。

題圖來自Unsplash,基于CC0協議。

該文觀點僅代表作者本人,人人都是產品經理平臺僅提供信息存儲空間服務。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 內容很全,收獲滿滿。

    來自廣東 回復
  2. 內容很全,收獲滿滿。

    來自廣東 回復
  3. 大廠出品必須精品

    來自廣東 回復
  4. 寫的很好,剛開始接觸交互設計,學到了很多!

    來自陜西 回復
  5. 規范的定義不是一個人的事情,而是一個團隊事情,它將關系到每個后續每個人的設計產出。

    來自寧夏 回復
  6. 組建庫可以分享一下嗎

    回復