2023年全局交互規(guī)范制定指南

全局交互規(guī)范制定指南

而一個(gè)完整的設(shè)計(jì)規(guī)范一般分成「視覺」「交互」兩個(gè)部分合并組成，在全局原則的指導(dǎo)下，側(cè)重不同的維度和內(nèi)容分別綻開規(guī)范的定義，最終再合到一起形成一份完整的設(shè)計(jì)規(guī)范。

從用戶體驗(yàn)要素來看，視覺主要是在「表現(xiàn)層」「框架層」進(jìn)行規(guī)范的統(tǒng)一，主要包括：形、色、字、構(gòu)、質(zhì)、動(dòng)六個(gè)層面。

而交互角度相對抽象，主要針對于產(chǎn)品的「結(jié)構(gòu)層」「框架層」入手，定義統(tǒng)一的交互規(guī)范，指導(dǎo)頁面、流程搭建和組件使用規(guī)章。包括：全局原則、頁面布局、通用流程、標(biāo)準(zhǔn)組件、文案規(guī)范。

整體維度呈“從抽象到詳細(xì)的總分關(guān)系”，不僅對產(chǎn)品的各個(gè)維度都有詳細(xì)的交互指導(dǎo)，而且不僅能保證長期使用，避開重復(fù)返工；同時(shí)也便于囊括后續(xù)的迭代內(nèi)容。而這些內(nèi)容，就是我們通常定義的交互規(guī)范，也是交互參加定義設(shè)計(jì)規(guī)范的發(fā)力點(diǎn)。

有了對于基本熟悉和搭建框架之后，我們來具體聊聊如何定義交互規(guī)范詳細(xì)內(nèi)容。

最終，還有一點(diǎn)建議：在定義規(guī)范時(shí)，可以站在前人肩膀，適度參考行業(yè)設(shè)計(jì)規(guī)范，能復(fù)用用的直接參考，具有業(yè)務(wù)特性的再集合業(yè)務(wù)綜合考慮，使整個(gè)規(guī)范制定效率更高，科學(xué)性、指導(dǎo)性更強(qiáng)。

在找到自己當(dāng)前所屬的產(chǎn)品階段、明確要建立哪些設(shè)計(jì)規(guī)范后，詳細(xì)應(yīng)當(dāng)如何進(jìn)行落地執(zhí)行呢？建議從以下4個(gè)步驟入手。

方式二：參考行業(yè)通用規(guī)范的定義，先排列完整，再依據(jù)產(chǎn)品實(shí)際業(yè)務(wù)需要進(jìn)行增刪改。

「標(biāo)準(zhǔn)組件」「文案規(guī)范」已經(jīng)在行業(yè)內(nèi)有了不少科學(xué)的名目和沉淀，可以采納此方式，例如下圖組件的梳理。

最終可產(chǎn)出如下圖的規(guī)范分類和詳細(xì)內(nèi)容。（可以列的不是很全，后續(xù)補(bǔ)充詳細(xì)部分內(nèi)容時(shí)持續(xù)維護(hù)這張表。）

梳理借鑒：統(tǒng)一梳理相關(guān)場景、頁面、組件，明確需要定義的范圍。再查找行業(yè)規(guī)范，有無參考借鑒。（如Z軸定義，可參考MaterialDesign）

定義規(guī)范：最終通過最具代表性的場景進(jìn)行展現(xiàn)

全局原則沒有維度凹凸之分，例如可能全局涉及到的「右鍵菜單」也能被定義成全局原則。不必盲從行業(yè)交互規(guī)范內(nèi)浩大且抽象的原則。只要能夠?qū)嶋H解決你業(yè)務(wù)的需要，能夠掩蓋整站各個(gè)部分，都可以納為全局原則。

（2）頁面框架

目標(biāo)：梳理整站全部關(guān)鍵頁面，整理抽象成相對固定的框架布局功能分區(qū)讓后續(xù)設(shè)計(jì)新頁面時(shí)能遵循規(guī)律、找到參考。

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

第一步，收集頁面：依據(jù)早期定義的規(guī)范分類，收集展現(xiàn)全部相同層級的頁面。這些在定義規(guī)范分類時(shí)，應(yīng)當(dāng)已收集完成。

其次步，框架布局：提取共性，搭建框架和布局，明確頁面大的區(qū)域劃分和結(jié)構(gòu)。（TDesign布局具體指南）

第三步，功能分區(qū)：基于框架布局，細(xì)化區(qū)域內(nèi)詳細(xì)的業(yè)務(wù)功能屬性，如：導(dǎo)航區(qū)、操作區(qū)等。這部分是頁面框架內(nèi)最接地氣最具指導(dǎo)性的內(nèi)容，同時(shí)也是最難定義的。主要緣由如下：

定義太細(xì)，擔(dān)憂缺乏前瞻性限制后續(xù)設(shè)計(jì)：定義越細(xì)敏捷度就低，后續(xù)改動(dòng)和限制性就越高。為避開這種問題，推舉在定義關(guān)鍵頁面時(shí)，按輸出設(shè)計(jì)稿的思路：整理「信息架構(gòu)」→定義「功能分區(qū)」，這樣后續(xù)拓展性和前瞻性更高

定義太粗，無法定義出明確的功能分區(qū)，擔(dān)憂缺乏實(shí)際指導(dǎo)意義：同一區(qū)域有些頁面展現(xiàn)操作，有些展現(xiàn)導(dǎo)航。從規(guī)范角度似乎不應(yīng)當(dāng)，但實(shí)際套在各個(gè)業(yè)務(wù)內(nèi)卻又合理。當(dāng)遇到這種無法達(dá)成全都的狀況時(shí)，建議就不定義詳細(xì)的“功能分區(qū)”，避開由于盲目追求統(tǒng)一而限制實(shí)際設(shè)計(jì)。而可以采納“窮舉舉例”的方式，將該布局下可承載的內(nèi)容均展現(xiàn)出來，既可以起到參考意義，又能供后續(xù)沿用達(dá)到統(tǒng)一的效果。

第四步，加入案例：將剛剛定義的布局框架與功能分區(qū)，與實(shí)際案例完整結(jié)合，便于后續(xù)理解和沿用。

（3）通用流程

目標(biāo)：梳理整站全部流程，對那些可復(fù)用的流程進(jìn)行整理、抽象、封裝。讓后續(xù)設(shè)計(jì)師和研發(fā)能夠直接沿用。

“可復(fù)用的流程”是指：在多個(gè)場景下，不轉(zhuǎn)變其原有業(yè)務(wù)規(guī)律的狀況下能夠“既插既用”。例如：登錄注冊流程、掃碼關(guān)注流程、共享流程等等。往往一個(gè)通用流程中，不同的步驟亦可以打散，重新拼裝成不同的流程，以適配詳細(xì)的場景使用。

下面就舉一個(gè)詳細(xì)的例子：注冊流程。一般完整的注冊流程如下，通過不同的入口觸發(fā)后進(jìn)入，通過肯定步驟后注冊勝利。

當(dāng)業(yè)務(wù)有了進(jìn)一步需求，需要通過插件快捷登錄時(shí)，步驟便可以重新組合，再適配詳細(xì)的場景。

對于設(shè)計(jì)師要做的，就是識別詳細(xì)的通用流程有哪些，并將其給「步驟化」串聯(lián)起來。當(dāng)有新的需求來的時(shí)候，推斷能直接復(fù)用，還是需要重新組裝，亦或是新增步驟。

而這樣拼裝的思維，恰好對應(yīng)了研發(fā)搭建流程時(shí)的思路。通用流程對于他們就是將不同的步驟進(jìn)行組合起來。當(dāng)遇到不同場景時(shí)，再以搭積木的方式進(jìn)行拼裝。

而詳細(xì)的搭建步驟也是由兩個(gè)步驟組成：1.第一步，收集流程；2.其次步，抽象步驟。詳細(xì)方式上面已提到，就不過多贅述。

（4）標(biāo)準(zhǔn)組件

目標(biāo)：將產(chǎn)品內(nèi)使用過的組件整理成“標(biāo)準(zhǔn)組件”，統(tǒng)肯定義規(guī)章，讓后續(xù)設(shè)計(jì)和研發(fā)時(shí)能直接調(diào)取組件，提高設(shè)計(jì)和研發(fā)效率。

其實(shí)行業(yè)中已經(jīng)有許多通用組件，可以快速調(diào)用。但由于不同業(yè)務(wù)的簡單度不一樣，也會(huì)生成自己獨(dú)特的業(yè)務(wù)定制組件。同時(shí)，產(chǎn)品持續(xù)在迭代，也很難能抽出時(shí)間單獨(dú)定義組件。故基于這個(gè)背景，結(jié)合“需求設(shè)計(jì)流程”和“組件整理流程”，有兩種高效定義標(biāo)準(zhǔn)組件的方式。

方式一：調(diào)用行業(yè)通用組件

第一步，業(yè)務(wù)設(shè)計(jì)確定基本規(guī)律。

其次步，選擇行業(yè)通用組件，增加業(yè)務(wù)規(guī)章。（一般開發(fā)在搭建產(chǎn)品初期時(shí)，便會(huì)選擇一家行業(yè)組件進(jìn)行使用，而組件也僅能在這家供應(yīng)的組件中選擇）

第三步，視覺依據(jù)全局視覺原則，設(shè)計(jì)新的樣式。

第四步，將交互規(guī)章、視覺樣式合并，統(tǒng)一成標(biāo)準(zhǔn)組件。基礎(chǔ)規(guī)章直接引用行業(yè)組件已定義的內(nèi)容，場景規(guī)章按需補(bǔ)充。

方式二：業(yè)務(wù)定制組件

第一步，進(jìn)行正常的業(yè)務(wù)設(shè)計(jì)。交互依據(jù)需求搭建原型，視覺設(shè)計(jì)詳細(xì)樣式。

其次步，推斷組件是否通用，是否可復(fù)用到其它場景。例如：共享對話框，不同的內(nèi)容共享都能夠用得到，像這種就是可抽象成標(biāo)準(zhǔn)組件的典型案例。

第三步，定義標(biāo)準(zhǔn)組件規(guī)范。簡潔的組件展現(xiàn)詳細(xì)樣式即可，團(tuán)隊(duì)內(nèi)設(shè)計(jì)師基本認(rèn)知全都，無需重新學(xué)習(xí)。而簡單的組件為保證后續(xù)的正確復(fù)用，建議包括以下內(nèi)容：

更新日志：由于組件是變動(dòng)最多的規(guī)范，需要明確詳細(xì)的版本和改動(dòng)點(diǎn)。

組件定義：簡要介紹用途和使用規(guī)章，如對話框定義：必需是用戶主動(dòng)觸發(fā)時(shí)才消失、主要使用在二次確認(rèn)場景需用戶確認(rèn)后才消逝等。

組件結(jié)構(gòu)：介紹組件構(gòu)成、功能分區(qū)、分區(qū)定義，具體展現(xiàn)不同分區(qū)內(nèi)詳細(xì)信息和對應(yīng)規(guī)章。

使用場景：具體區(qū)分多種場景下不同的使用方式，明確賜予使用指導(dǎo)。

設(shè)計(jì)方案：備選，假如比較簡單的組件且涉及到流程中的關(guān)鍵環(huán)節(jié)，建議可以考慮復(fù)制一個(gè)完整的設(shè)計(jì)方案嵌入其中，便于團(tuán)隊(duì)成員理解沿用。

第四步，跟研發(fā)溝通，封裝成標(biāo)準(zhǔn)組件。這一步是特別關(guān)鍵也是重要的一步，這將大大提高我們后續(xù)的組件復(fù)用率，降低重復(fù)性走查的耗時(shí)。推舉使用CoDesign-設(shè)計(jì)規(guī)范功能點(diǎn)擊體驗(yàn)CoDesign小程序，上傳「組件庫」后能夠按名目自動(dòng)生成規(guī)范文檔，同時(shí)將自動(dòng)標(biāo)注和切圖，大大提高研發(fā)開發(fā)標(biāo)準(zhǔn)組件的效率。

（5）文案規(guī)范

目標(biāo)：將產(chǎn)品內(nèi)各個(gè)場景內(nèi)文案進(jìn)行整理，關(guān)心業(yè)務(wù)更精確?????表達(dá)意圖，讓設(shè)計(jì)師更好沿用，同時(shí)讓用戶感受到全都的產(chǎn)品風(fēng)格。

文案就像“產(chǎn)品對用戶說的話”，不同的人說話方式可能并不一樣，沒有肯定的對錯(cuò)。但清楚明白的語言表述，讓用戶更簡單理解；符合產(chǎn)品氣質(zhì)的語氣，能拉近產(chǎn)品與用戶的距離；統(tǒng)一的文案描述，又能讓用戶在整站全都的語境下體驗(yàn)產(chǎn)品。

需要定義的內(nèi)容，包括但不限于以下3個(gè)部分：

語言：語言是指我們通過什么樣的規(guī)章來組合文字，讓它形成一種慣用的表達(dá)方式。例如語句簡潔明白，不過度修飾，避開重復(fù)描述，使用簡潔清楚的語序，關(guān)心用戶快速理解；例如用詞精準(zhǔn)易懂，使用簡潔、易于用戶理解的詞匯，避開使用專業(yè)術(shù)語，或過于口語化的表述。單純說規(guī)章可能太虛了，在實(shí)際定義規(guī)范時(shí)，還要如下圖所示，加上實(shí)際案例示意避開誤會(huì)。

語氣：語氣是可以體現(xiàn)產(chǎn)品氣質(zhì)和風(fēng)格，定義時(shí)要結(jié)合全局原則內(nèi)的設(shè)計(jì)價(jià)值觀，明確產(chǎn)品性格后才能更好的定義出符合產(chǎn)品的語氣風(fēng)格。同一種語境下不同風(fēng)格的文案就有明顯差異。如網(wǎng)絡(luò)特別時(shí)：

俏皮的文案可能是：網(wǎng)絡(luò)開小差，請稍等一下。而正經(jīng)的文案可能是：網(wǎng)絡(luò)特別，稍后重試。

書寫規(guī)章：主要包括常用詞匯的書寫方式，例如「日期簡寫方式」「英文大小寫方式」「使用全角標(biāo)點(diǎn)符號」等。以及易錯(cuò)的詞匯短語示意，例如「賬號還是帳號」、「登陸還是登錄」等。這是團(tuán)隊(duì)設(shè)計(jì)師最簡單沿用遵循的，也是接地氣的部分。

詳細(xì)使用指南：以上「語言」「語氣」「書寫規(guī)章」3個(gè)部分，是構(gòu)成全局文案的基礎(chǔ)規(guī)范。假如有充分時(shí)間的團(tuán)隊(duì)，可以考慮再結(jié)合實(shí)際業(yè)務(wù)，分別定義不同場景和組件下詳細(xì)的使用指南。如下圖：

最終再附上各個(gè)行業(yè)內(nèi)定義文案規(guī)范例子，供大家參考：B端產(chǎn)品文案指南：

/linyecx/dragon/occ7pr#UEUSwAntDesign

文案規(guī)范：

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

ClarityDesign文案規(guī)范：

/doc/introduction

國家標(biāo)點(diǎn)符號用法：

/ewebeditor/uploadfile/2022/01/13/20220113091548267.pdf

3.運(yùn)用規(guī)范，指導(dǎo)設(shè)計(jì)

搭建規(guī)范的過程其實(shí)也是整體設(shè)計(jì)走查的過程，我們會(huì)發(fā)覺有些設(shè)計(jì)可能有體驗(yàn)問題，或不符合規(guī)范。每當(dāng)這個(gè)時(shí)候，我們就需要對這些設(shè)計(jì)進(jìn)行標(biāo)記。在規(guī)范定義完成之后，迭代排期優(yōu)化線上的設(shè)計(jì)。

而在實(shí)際設(shè)計(jì)使用過程中，可能又會(huì)發(fā)覺規(guī)