瀏覽了許多關(guān)于“設(shè)計(jì)規(guī)范”的文章，發(fā)現(xiàn)很多都是在針對(duì)通用流程和視覺(jué)方面在整理，關(guān)于交互層面的內(nèi)容比較少?；诖?，結(jié)合最近項(xiàng)目中沉淀的實(shí)際案例，以及參考了不少行業(yè)通用的設(shè)計(jì)規(guī)范，總結(jié)了一篇關(guān)于搭建交互規(guī)范的流程、框架、要點(diǎn)。希望能夠幫助大家更好的沉淀交互規(guī)范。

一、如何「理解」交互規(guī)范

說(shuō)起設(shè)計(jì)規(guī)范，大家應(yīng)該都不陌生，一個(gè)成熟的設(shè)計(jì)規(guī)范對(duì) 產(chǎn)品設(shè)計(jì)、研發(fā)開(kāi)發(fā)、用戶使用 都有著重要的指導(dǎo)作用：

產(chǎn)品設(shè)計(jì)：保障產(chǎn)品內(nèi)不同模塊的設(shè)計(jì)一致性，同時(shí)提高不同設(shè)計(jì)師間的設(shè)計(jì)、協(xié)作效率

研發(fā)開(kāi)發(fā)：通過(guò)定義的標(biāo)準(zhǔn)規(guī)范，提高流程、組件的復(fù)用率，提高整體開(kāi)發(fā)效率

用戶使用：讓用戶能夠在產(chǎn)品全局感受到統(tǒng)一且完整的體驗(yàn)，降低使用成本和學(xué)習(xí)難度

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

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

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

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

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

二、不同階段應(yīng)該定義

哪些交互規(guī)范？

產(chǎn)品有不同發(fā)展階段，設(shè)計(jì)規(guī)范同樣也有，不同階段下的產(chǎn)品目標(biāo)和規(guī)范需要覆蓋的內(nèi)容都不盡相同。我們要既要避免做多，保證投入產(chǎn)出比最大化；同時(shí)也要構(gòu)建一個(gè)合理的規(guī)范迭代思路。

產(chǎn)品探索初期

該階段的產(chǎn)品核心目標(biāo)是「驗(yàn)證產(chǎn)品或商業(yè)模型」，業(yè)務(wù)需求都是小步快跑、頻繁迭代。產(chǎn)品處于從0到1的野蠻生長(zhǎng)狀態(tài)，存在著“先滿足功能，再優(yōu)化體驗(yàn)”的情況，導(dǎo)致該階段的產(chǎn)品體驗(yàn)往往不太過(guò)關(guān)。

搭建目的：通過(guò)定義原則，梳理關(guān)鍵頁(yè)面和流程，搭建基本的規(guī)范框架。既讓團(tuán)隊(duì)對(duì)產(chǎn)品有統(tǒng)一的設(shè)計(jì)價(jià)值觀和認(rèn)知判斷；從頁(yè)面到流程，又能對(duì)應(yīng)設(shè)計(jì)參照標(biāo)準(zhǔn)；同時(shí)業(yè)務(wù)可以在規(guī)定的框架下發(fā)展，不僅讓產(chǎn)品體驗(yàn)的根基牢固，而且不會(huì)限制功能設(shè)計(jì)自由。

搭建范圍：「全局原則」「頁(yè)面布局」「通用流程」

產(chǎn)品穩(wěn)定發(fā)展期

該階段的產(chǎn)品基本形態(tài)已穩(wěn)定，也形成了初步的模型結(jié)構(gòu)。后續(xù)迭代是在現(xiàn)有結(jié)構(gòu)的基礎(chǔ)上，進(jìn)行增加或優(yōu)化功能。雖然探索期定義了產(chǎn)品原則、布局和流程，但探索期產(chǎn)品的自由生長(zhǎng)，會(huì)導(dǎo)致不少設(shè)計(jì)細(xì)節(jié)不一致，從而影響了產(chǎn)品整體的體驗(yàn)和效率。

搭建目的：通過(guò)回溯整理過(guò)往設(shè)計(jì)，沉淀優(yōu)化成完整的交互規(guī)范。再根據(jù)規(guī)范統(tǒng)一產(chǎn)品體驗(yàn)，進(jìn)一步優(yōu)化流程和效率， 讓整個(gè)產(chǎn)品體驗(yàn)達(dá)到相對(duì)穩(wěn)定的狀態(tài)。

搭建范圍：「全局原則」「頁(yè)面布局」「通用流程」「標(biāo)準(zhǔn)組件」「文案規(guī)范」

三、如何「定義」交互規(guī)范

3.1 定義交互規(guī)范的原則

與行業(yè)通用的設(shè)計(jì)規(guī)范（如TDesign、AntDesign，文末領(lǐng)取騰訊設(shè)計(jì)系統(tǒng)源文件）“大而全”“通用”的特質(zhì)不同，一般團(tuán)隊(duì)內(nèi)構(gòu)建的設(shè)計(jì)規(guī)范都是源于某一個(gè)產(chǎn)品或業(yè)務(wù)，主要的特點(diǎn)是“專精”。專注于「業(yè)務(wù)」本身，主要是「團(tuán)隊(duì)內(nèi)成員使用」，追求的是投入產(chǎn)出比最大化。

基于此背景，當(dāng)我們?cè)诙x「交互規(guī)范」時(shí)，有三點(diǎn)原則：

原則一：保持規(guī)范的業(yè)務(wù)性。設(shè)計(jì)規(guī)范既要貼合業(yè)務(wù)場(chǎng)景歸納完整，同時(shí)又要避免憑空定義脫離實(shí)際。故我們定義時(shí)要代入業(yè)務(wù)規(guī)劃，盡量富有前瞻性，這樣定義的規(guī)范不僅能覆蓋當(dāng)前需要，同時(shí)后續(xù)也能更好地迭代。

原則二：保持規(guī)范的專注性。有的放矢，明確內(nèi)容優(yōu)先級(jí)，避免盲目追求大而全和形式主義。對(duì)于優(yōu)先級(jí)高（覆蓋面廣、復(fù)用率高）的關(guān)鍵內(nèi)容重點(diǎn)描述；優(yōu)先級(jí)低（邏輯簡(jiǎn)單、認(rèn)知一致）的內(nèi)容可簡(jiǎn)要描述，避免事無(wú)巨細(xì)降低效率。

原則三：保持規(guī)范的生長(zhǎng)性。設(shè)計(jì)規(guī)范不是一成不變，而是跟隨業(yè)務(wù)發(fā)展不斷迭代完善的，所以需要階段性的回顧規(guī)范。遇到規(guī)范未能覆蓋或無(wú)法指導(dǎo)設(shè)計(jì)的地方，及時(shí)修訂同步團(tuán)隊(duì)，避免墨守成規(guī)，固步自封。

最后，還有一點(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ī)范后，具體應(yīng)該如何進(jìn)行落地執(zhí)行呢？建議從以下4個(gè)步驟入手。

3.2 第一步：定義規(guī)范分類

如上文中提到，一個(gè)完整的交互規(guī)范分為：「全局原則」「頁(yè)面布局」「通用流程」「標(biāo)準(zhǔn)組件」「文案規(guī)范」五個(gè)維度，但每個(gè)維度具體含有哪些內(nèi)容，都是不一樣的。仍然需要根據(jù)實(shí)際業(yè)務(wù)需要去定義，這樣才能盡量保證沒(méi)有遺漏，也更好為下一環(huán)節(jié)評(píng)估工作量。

通用的做法有兩種：

方式一：整理業(yè)務(wù)場(chǎng)景下不同的頁(yè)面、流程等，并進(jìn)行抽象合并?！溉衷瓌t」「頁(yè)面框架」和「通用流程」具有強(qiáng)業(yè)務(wù)導(dǎo)向，可以采用此方式。

以「頁(yè)面布局」為例，就需要將關(guān)鍵頁(yè)面按統(tǒng)一顆粒度收集（按層級(jí)或按場(chǎng)景等）。

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

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

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

3.3 第二步：確定分工排期

有了具體內(nèi)容作為依據(jù)，便可以根據(jù)此進(jìn)行排期分工。

分工原則：推薦按規(guī)范分類進(jìn)行分工，一個(gè)大的分類由一人負(fù)責(zé)，保證專注性。同時(shí)團(tuán)隊(duì)交互最好都能參與，保證后續(xù)對(duì)規(guī)范更好的沿用。

排期原則：「定義規(guī)范」和「輸出需求」兩者經(jīng)常要并行處理，此時(shí)提高效率，控制投入產(chǎn)出比就很重要了，我們需要明確優(yōu)先級(jí)，先做什么后做什么。有3個(gè)思路可以綜合參考：

- 并行的思路：在定義完「全局原則」后，剩下的頁(yè)面、流程、組件、文案都可考慮并行定義，彼此之間沒(méi)有明確的依賴項(xiàng)。

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

- 復(fù)用的思路：某些典型頁(yè)面、典型流程、典型組件涉及面廣，許多需求的設(shè)計(jì)都將借鑒參考，亦可優(yōu)先抽象定義。

3.4 第三步：統(tǒng)一撰寫(xiě)原則

設(shè)計(jì)規(guī)范是由不同的設(shè)計(jì)師一起合作完成，所以我們盡量在一開(kāi)始，就需要統(tǒng)一規(guī)范的撰寫(xiě)和展現(xiàn)形式。以此提高后續(xù)合并的效率，同時(shí)又能保證其閱讀體驗(yàn)，讓其它使用者能夠更好遵循。對(duì)此，我們定義了幾個(gè)關(guān)鍵原則：

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

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

多圖少字：沒(méi)有人喜歡看字，圖片更容易吸收

搭配案例：讓使用者更好的代入場(chǎng)景，理解和使用規(guī)范。

3.5 第四步：定義具體規(guī)范 ★

前面鋪墊了許多流程性的內(nèi)容，就像我們?nèi)粘］敵鲈O(shè)計(jì)需求一樣，大家或多或少在工作中都有遇到過(guò)。接下來(lái)，將重點(diǎn)聊聊，我們具體的內(nèi)容應(yīng)該如何定義。依然分成5個(gè)環(huán)節(jié)一一講解。

3.5.1 全局原則

目標(biāo)：明確影響整站各個(gè)模塊、各個(gè)頁(yè)面設(shè)計(jì)的原則和規(guī)范，指導(dǎo)我們后續(xù)各種規(guī)范的定義和設(shè)計(jì)。

而全局原則也分兩種，設(shè)計(jì)原則和業(yè)務(wù)原則兩種。

設(shè)計(jì)原則：每個(gè)完整的設(shè)計(jì)規(guī)范都需要包含的內(nèi)容，如：設(shè)計(jì)價(jià)值觀、設(shè)計(jì)準(zhǔn)則?？此葡鄬?duì)務(wù)虛的東西，實(shí)則影響后續(xù)整個(gè)設(shè)計(jì)方向。這個(gè)部分需要和產(chǎn)品經(jīng)理、視覺(jué)同學(xué)結(jié)合產(chǎn)品的定位和發(fā)展共同提煉。具體定義方式可參考：

《你為什么需要設(shè)計(jì)原則？》

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

業(yè)務(wù)原則：源自實(shí)際業(yè)務(wù)本身產(chǎn)生的問(wèn)題，行業(yè)內(nèi)沒(méi)有標(biāo)準(zhǔn)定義。需要具體問(wèn)題具體分析，推導(dǎo)出具體目標(biāo)，最后再統(tǒng)一制定規(guī)范解決業(yè)務(wù)問(wèn)題。

舉一個(gè)實(shí)際的例子便于理解：全局Z軸定義

1）明確問(wèn)題：整站層級(jí)高度沒(méi)有統(tǒng)一定義，導(dǎo)致不同控件間相互遮擋，沒(méi)有統(tǒng)一規(guī)則。需要定義全局Z軸規(guī)范，統(tǒng)一不同場(chǎng)景、頁(yè)面、組件的高度。

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

3）定義規(guī)范：最后通過(guò)最具代表性的場(chǎng)景進(jìn)行展示

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

3.5.2 頁(yè)面框架

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

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

第一步，收集頁(yè)面：根據(jù)早期定義的規(guī)范分類，收集展示所有相同層級(jí)的頁(yè)面。這些在定義規(guī)范分類時(shí)，應(yīng)該已收集完成。

第二步，框架布局：提取共性，搭建框架和布局，明確頁(yè)面大的區(qū)域劃分和結(jié)構(gòu)。（TDesign布局詳細(xì)指南，文末領(lǐng)取騰訊設(shè)計(jì)系統(tǒng)源文件）

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

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

- 定義太粗，無(wú)法定義出明確的功能分區(qū)，擔(dān)心缺乏實(shí)際指導(dǎo)意義：同一區(qū)域有些頁(yè)面展示操作，有些展示導(dǎo)航。從規(guī)范角度好像不應(yīng)該，但實(shí)際套在各個(gè)業(yè)務(wù)內(nèi)卻又合理。當(dāng)遇到這種無(wú)法達(dá)成一致的情況時(shí)，建議就不定義具體的“功能分區(qū)”，避免因?yàn)槊つ孔非蠼y(tǒng)一而限制實(shí)際設(shè)計(jì)。

而可以采用“窮舉舉例”的方式，將該布局下可承載的內(nèi)容均展示出來(lái)，既可以起到參考意義，又能供后續(xù)沿用達(dá)到統(tǒng)一的效果。

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

3.5.3 通用流程

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

“可復(fù)用的流程”是指：在多個(gè)場(chǎng)景下，不改變其原有業(yè)務(wù)邏輯的情況下能夠“既插既用”。例如：登錄注冊(cè)流程、掃碼關(guān)注流程、分享流程等等。往往一個(gè)通用流程中，不同的步驟亦可以打散，重新拼裝成不同的流程，以適配具體的場(chǎng)景使用。

下面就舉一個(gè)具體的例子：注冊(cè)流程。一般完整的注冊(cè)流程如下，通過(guò)不同的入口觸發(fā)后進(jìn)入，通過(guò)一定步驟后注冊(cè)成功。

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

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

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

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

3.5.4 標(biāo)準(zhǔn)組件

目標(biāo)：將產(chǎn)品內(nèi)使用過(guò)的組件整理成“標(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ù)的復(fù)雜度不一樣，也會(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ì)確定基本邏輯。

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

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

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

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

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

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

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

- 更新日志：因?yàn)榻M件是變動(dòng)最多的規(guī)范，需要明確具體的版本和改動(dòng)點(diǎn)

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

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

- 使用場(chǎng)景：詳細(xì)區(qū)分多種場(chǎng)景下不同的使用方式，明確給予使用指導(dǎo)

- 設(shè)計(jì)方案：備選，如果比較復(fù)雜的組件且涉及到流程中的關(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ī)范功能，上傳「組件庫(kù)」后能夠按目錄自動(dòng)生成規(guī)范文檔，同時(shí)將自動(dòng)標(biāo)注和切圖，大大提高研發(fā)開(kāi)發(fā)標(biāo)準(zhǔn)組件的效率。

3.5.5 文案規(guī)范

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

文案就像“產(chǎn)品對(duì)用戶說(shuō)的話”，不同的人說(shuō)話方式可能并不一樣，沒(méi)有絕對(duì)的對(duì)錯(cuò)。但清晰明了的語(yǔ)言表述，讓用戶更容易理解；符合產(chǎn)品氣質(zhì)的語(yǔ)氣，能拉近產(chǎn)品與用戶的距離；統(tǒng)一的文案描述，又能讓用戶在整站一致的語(yǔ)境下體驗(yàn)產(chǎn)品。

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

1.語(yǔ)言：語(yǔ)言是指我們通過(guò)什么樣的規(guī)則來(lái)組合文字，讓它形成一種慣用的表達(dá)方式。例如語(yǔ)句簡(jiǎn)潔明了，不過(guò)度修飾，避免重復(fù)描述，使用簡(jiǎn)潔清晰的語(yǔ)序，幫助用戶快速理解；例如用詞精準(zhǔn)易懂，使用簡(jiǎn)單、易于用戶理解的詞匯，避免使用專業(yè)術(shù)語(yǔ)，或過(guò)于口語(yǔ)化的表述。

單純說(shuō)規(guī)則可能太虛了，在實(shí)際定義規(guī)范時(shí)，還要如下圖所示，加上實(shí)際案例示意避免誤解。

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

? 俏皮的文案可能是：網(wǎng)絡(luò)開(kāi)小差，請(qǐng)稍等一下

? 而正經(jīng)的文案可能是：網(wǎng)絡(luò)異常，稍后重試。

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

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

最后再附上各個(gè)行業(yè)內(nèi)定義文案規(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

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

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

四、如何「推進(jìn)」交互規(guī)范

定義完交互規(guī)范，后續(xù)將考慮如何將其順利的推進(jìn)落地。本文羅列幾個(gè)推進(jìn)時(shí)重點(diǎn)需要注意的事項(xiàng)。

4.1 團(tuán)隊(duì)評(píng)審，達(dá)成一致

規(guī)范的定義不是一個(gè)人的事情，而是一個(gè)團(tuán)隊(duì)事情，它將關(guān)系到每個(gè)后續(xù)每個(gè)人的設(shè)計(jì)產(chǎn)出。所以在制定規(guī)范期間，應(yīng)該定期在團(tuán)隊(duì)中進(jìn)行設(shè)計(jì)評(píng)審。這不僅是評(píng)審設(shè)計(jì)好壞的過(guò)程，更是讓團(tuán)隊(duì)達(dá)成一致、大家更深入了解如何使用規(guī)范的過(guò)程。

注意，參與評(píng)審的人不止是設(shè)計(jì)師，當(dāng)然也包括具體的業(yè)務(wù)開(kāi)發(fā)，很多時(shí)候我們會(huì)得到新的思路和啟發(fā)。

4.2 善用工具，沉淀規(guī)范

規(guī)范搭建的過(guò)程中，有很多痛點(diǎn)：組件庫(kù)需要多人參與維護(hù)和創(chuàng)建，容易造成沖突內(nèi)容丟失；同時(shí)沉淀規(guī)范文檔時(shí)，需要圖片逐一復(fù)制、粘貼到文檔內(nèi)，更新時(shí)又要重復(fù)一遍這樣的操作。而這些問(wèn)題，使用CoDesign設(shè)計(jì)規(guī)范功能，就可以有效的解決提高效率。

首先組件庫(kù)支持多人同時(shí)維護(hù)，差量更新；其次組件庫(kù)上傳后，可以自動(dòng)生成/更新規(guī)范文檔，避免反復(fù)編寫(xiě)文檔，整體提效；最后當(dāng)組件庫(kù)有新版本時(shí)，會(huì)自動(dòng)提醒團(tuán)隊(duì)內(nèi)其他成員進(jìn)行更新，保障團(tuán)隊(duì)設(shè)計(jì)一致性。

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

而在實(shí)際設(shè)計(jì)使用過(guò)程中，可能又會(huì)發(fā)現(xiàn)規(guī)范無(wú)法滿足的地方，此時(shí)又可以展開(kāi)新一輪的提煉和總結(jié)，再反哺規(guī)范，形成正向循環(huán)促使設(shè)計(jì)和規(guī)范不斷完善。

五、寫(xiě)在最后

在前言的時(shí)候就有提到「交互規(guī)范」只是整體規(guī)范中的一部分，最終是需要與視覺(jué)合并成一份統(tǒng)一的設(shè)計(jì)規(guī)范，指導(dǎo)后續(xù)具體的設(shè)計(jì)。具體的合并方式，在定義的章節(jié)內(nèi)已有提到，就不再贅述。

最后，我一直認(rèn)為好的設(shè)計(jì)規(guī)范是提高設(shè)計(jì)效率，引導(dǎo)設(shè)計(jì)方向，而不是因?yàn)樵O(shè)計(jì)規(guī)范而局限了具體業(yè)務(wù)的設(shè)計(jì)，如果這樣，還不如不去定義。