轉(zhuǎn)載自:https://www.pmcaff.com/article/index/1284824297878656

前言

? ? ? ?這篇文章講的是如何制作一份產(chǎn)品仗岸、UI允耿、開發(fā)、測試都喜歡看的交互設(shè)計(jì)文檔扒怖。文章內(nèi)容主要是自己工作中用到的交互設(shè)計(jì)規(guī)范模板（axure版本）较锡，這套規(guī)范是自己總結(jié)出來的，但是構(gòu)建的思維方法借鑒很多前輩大神的方法論盗痒，特別是淘寶U一點(diǎn)團(tuán)隊(duì)所分享的公開課內(nèi)容蚂蕴。

? ? ? ?抱著他山之石，可以功玉的想法俯邓，結(jié)合自己公司團(tuán)隊(duì)的工作特點(diǎn)骡楼，總結(jié)了一套交互設(shè)計(jì)規(guī)范。使用中稽鞭，有些小收獲鸟整，分享出來，大家多多溝通朦蕴，共同進(jìn)步篮条。

? ? ? ? 這篇文章的行文思路是，先說明交互設(shè)計(jì)規(guī)范準(zhǔn)則是什么吩抓、然后舉例說明交互設(shè)計(jì)文檔各模塊的書寫思路及踩過的坑涉茧，最后是一份可供下載的模板和組件庫。

一琴拧、交互設(shè)計(jì)規(guī)范化文檔的準(zhǔn)則

1.1 為什么要輸出一份交互設(shè)計(jì)規(guī)范

? ? ? ? 1降瞳、“設(shè)計(jì)有記錄、信息可追溯蚓胸、交流有依據(jù)”挣饥。這個很重要、重要沛膳、要扔枫。一個產(chǎn)品的誕生不是你一個人幾天的事，它有多部門配合的寬度锹安，也有多版本迭代的長度短荐。一個交互設(shè)計(jì)師倚舀，如果設(shè)計(jì)不嚴(yán)謹(jǐn)挖了坑，早晚是要填的忍宋，交互設(shè)計(jì)規(guī)范或許可以幫你規(guī)避一些坑痕貌。

? ? ? ?2、“在團(tuán)隊(duì)中糠排，信任真的是一切溝通的基準(zhǔn)”舵稠。交互設(shè)計(jì)師，工作中除了解析需求入宦，繪制交互稿外哺徊，更多的時候需要配合UI完善設(shè)計(jì)，跟進(jìn)開發(fā)實(shí)現(xiàn)效果乾闰。如果你繪制的交互稿沒有那么的完善落追，缺東少西，UI和開發(fā)就會慢慢對你沒有信任感涯肩。這個時候轿钠，你的其他工作也會很難開展。也不是說一份交互設(shè)計(jì)規(guī)范宽菜，就能讓開發(fā)對你產(chǎn)生信任谣膳，但是一份好的規(guī)范，能彌補(bǔ)你部分欠缺铅乡，提高你設(shè)計(jì)的正確性继谚，同時一份好的規(guī)范文檔可以降低溝通和學(xué)習(xí)成本，展現(xiàn)你的專業(yè)化能力阵幸。

1.2 交互設(shè)計(jì)規(guī)范要求

? ? ? ?1花履、符合自己的就是最好的。一定是根據(jù)自己公司工作流程挚赊，和上下游溝通后來確定自己的文檔應(yīng)該包括哪些內(nèi)容诡壁，哪些內(nèi)容需要著重寫，哪些內(nèi)容可以少寫荠割，書寫的方式應(yīng)該怎樣妹卿，團(tuán)隊(duì)內(nèi)行業(yè)內(nèi)是否有共同的說法和寫法。畢竟規(guī)范的作用就是為了提高工作效率的蔑鹦。

? ? ? ?2夺克、擴(kuò)展和更新。不同類型的項(xiàng)目嚎朽，所涉及的控件铺纽，所使用的規(guī)范要求不同，要學(xué)著調(diào)整和更新自己的模板哟忍。

二狡门、交互設(shè)計(jì)文檔各模塊的書寫思路和踩過的坑

? ? 先來一份交互文檔的目錄

圖2.1 目錄

2.1封面

開篇明義陷寝，文檔的基本信息概述。

版本編號：此文檔的最新編號其馏；（一定要記得更新）

設(shè)計(jì)人員凤跑、開發(fā)人員、測試人員：表明文件流轉(zhuǎn)的下一級相關(guān)人員叛复，方面溝通（如果涉及人員眾多饶火，也可單獨(dú)列舉）

圖2.2封面

? ? ? ?一份規(guī)范的交互稿不僅是對自己負(fù)責(zé)，也是對其他伙伴負(fù)責(zé)致扯、對將來負(fù)責(zé)。

2.2文檔說明

? ? ? ? 交互文檔的目的就是為了上傳下達(dá)当辐，將需求轉(zhuǎn)化可視化文檔抖僵，是一個過程性文件。所以缘揪，文檔的可閱讀性是衡量一份文檔好壞的一個標(biāo)準(zhǔn)耍群。而文檔說明這個模塊就是為了給不同的文檔閱讀者相同的“世界觀”。

? ? ? ?2.2.1項(xiàng)目背景與范圍

? ? ? ? 更完整的項(xiàng)目背景應(yīng)該出現(xiàn)在產(chǎn)品需求文檔中找筝，而交互文檔中書寫的目的有兩個蹈垢，第一，如果項(xiàng)目小袖裕，沒有完整的產(chǎn)品需求文檔曹抬，這里就是向各方人員傳達(dá)項(xiàng)目背景的地方；第二急鳄，加深整個項(xiàng)目組成員對項(xiàng)目的理解谤民，看內(nèi)容前，先有一個共同知識背景疾宏。

?（書寫小貼士：書寫內(nèi)容相當(dāng)于用戶體驗(yàn)要素中张足，戰(zhàn)略層、范圍層的梗概坎藐。）? ? ?

圖2.3項(xiàng)目背景與范圍

? ? ? 2.2.2更新日志

? ? ? ?目的也是有兩個：第一为牍，面向自己。工作是一個過程岩馍，完整的記錄更新日志碉咆，方便自己將來查詢，同時兼雄，也方便和開發(fā)測試互撕的時候吟逝，亮證據(jù)；第二赦肋，面向開發(fā)块攒、測試励稳。整個開發(fā)過程漫長，協(xié)助方多樣囱井，完整記錄驹尼，可以降低各方不必要的溝通成本。

? ? （書寫小貼士：1庞呕、更新日志新翎，可以在交互文檔評審?fù)ㄟ^后，需求鎖定后住练，在開始書寫地啰，設(shè)計(jì)過程中的更改可以不書寫進(jìn)去（個人經(jīng)驗(yàn)）；2讲逛、書寫的內(nèi)容要具體（寫的不具體亏吝，后續(xù)會有坑）；3盏混、書寫中最好增加關(guān)聯(lián)鏈接蔚鸥，方便相關(guān)同事快速找到位置；4许赃、同一個位置多次更改時止喷，要標(biāo)注最新內(nèi)容）

圖2.4更新日志

? ? ? 2.2.3設(shè)計(jì)進(jìn)度計(jì)劃

進(jìn)度計(jì)劃這種東西一般出現(xiàn)在項(xiàng)目工程表中，或者項(xiàng)目工程排期中（具體的可能根據(jù)不同公司混聊，有所不同）弹谁。而交互稿中的設(shè)計(jì)進(jìn)度排期的作用，和前面兩個一樣技羔，一方面是給項(xiàng)目組成員一個共同的背景僵闯，另一方面，是自己設(shè)計(jì)過程的記錄藤滥。

（書寫小貼士：1鳖粟、按照設(shè)計(jì)過程，可以大致分為需求整理拙绊、需求評審向图、交互設(shè)計(jì)、交互評審标沪、UI設(shè)計(jì)榄攀、UI評審、開發(fā)金句、測試檩赢，根據(jù)自己情況進(jìn)行劃分；2违寞、個人經(jīng)驗(yàn)贞瞒，此處的進(jìn)度計(jì)劃不是整個項(xiàng)目很嚴(yán)謹(jǐn)?shù)墓こ逃?jì)劃偶房，此處的只是設(shè)計(jì)師與相關(guān)同事溝通協(xié)商工作的一個梗概，以及自己的記錄军浆，自己看的明白就行）

圖2.5設(shè)計(jì)進(jìn)度

? ? ? 2.2.4評審記錄

? ? ? ? ?區(qū)別于更新日志棕洋，評審記錄主要書寫于設(shè)計(jì)階段。評審記錄主要分為內(nèi)部評審（設(shè)計(jì)師（項(xiàng)目內(nèi)交互和視覺）乒融、UED負(fù)責(zé)人掰盘、UED相關(guān)設(shè)計(jì)師）和外部評審（設(shè)計(jì)師（項(xiàng)目內(nèi)交互和視覺）、UED負(fù)責(zé)人赞季、UED相關(guān)設(shè)計(jì)師愧捕、業(yè)務(wù)負(fù)責(zé)人（產(chǎn)品和需求方）、技術(shù)負(fù)責(zé)人申钩、技術(shù)相關(guān)人晃财、市場運(yùn)營人員）

（書寫小貼士：1、一般都伴隨著會議記錄出現(xiàn)典蜕，我一般會書寫好以后，直接剪切當(dāng)會議記錄）

2.3罗洗、解析過程

圖2.6評審記錄

? ? ? ?解析過程是我認(rèn)為最重要的一部分愉舔，是產(chǎn)生信任和思維可視化的地方。在進(jìn)行交互設(shè)計(jì)原型繪制之前伙菜，一定要以目標(biāo)為導(dǎo)向拆分自己的思維轩缤，并將“虛擬”的目標(biāo)轉(zhuǎn)化為各種設(shè)計(jì)元素。

? ? ? 說簡單的點(diǎn)贩绕，這塊就是設(shè)計(jì)維度的需求分析火的。不同人可能有不同的分析方法和展現(xiàn)形式，不管怎樣的方式淑倾，只要能梳理自己思維幫助自己設(shè)計(jì)并且清晰的向自己伙伴傳達(dá)信息即可馏鹤。

? ? ? ?以個人經(jīng)驗(yàn)，根據(jù)不同類別的項(xiàng)目娇哆，不同大小的產(chǎn)品湃累，需求分析的維度和角度都有不同。此處我就簡單說一下碍讨，我常用的一種需求分析方法治力。

以人為核心，以目標(biāo)為導(dǎo)向的思維解析法

? ? ?我們做設(shè)計(jì)勃黍，大到一個產(chǎn)品宵统，小到一個頁面，在設(shè)計(jì)的時候都是有目的覆获，也有需要達(dá)到的目標(biāo)马澈。目的可能來自于公司戰(zhàn)略瓢省，來自于市場需求，或者來自于money箭券，不管來自哪里净捅，商業(yè)社會里，我們做產(chǎn)品肯定是有所圖辩块。同時蛔六，我們產(chǎn)品服務(wù)的用戶，他們的特點(diǎn)有很多废亭、所使用產(chǎn)品的環(huán)境有很多国章、用產(chǎn)品時的想法感覺也有很多、他們也有自己的對產(chǎn)品的追求和要求豆村。而我們是設(shè)計(jì)師液兽，不是藝術(shù)家，我們需要在有限的條件下掌动，利用我們的才能設(shè)計(jì)最貼合用戶需求四啰，最能產(chǎn)生商業(yè)價值的產(chǎn)品。這個過程就是下面這個需求分析推導(dǎo)的完整思路粗恢。具體內(nèi)容柑晒，我就不再這里展開解釋了，可以仔細(xì)看下圖眷射。我針對各個具體環(huán)節(jié)做了一些簡單說明匙赞。將來如果有合適的、可對外分享的案例了妖碉，我可以詳細(xì)說明下涌庭。

（書寫小貼士：1、書寫形式可以多樣欧宜，只要能幫助自己理解需求坐榆、方便設(shè)計(jì)即可；2冗茸、需求分析可以有更詳細(xì)的文檔猛拴，交互文檔里寫，還是那個目的蚀狰，讓上下游看到愉昆，能達(dá)成共識；3麻蹋、我文檔中列舉的其他幾種方法跛溉，只是一個例子，可根據(jù)具體情況使用）

圖2.7需求分析推導(dǎo)

2.4、頁面交互方案

? ? ? ? 頁面交互方案芳室，也就是我們常說的那種交互原型文檔专肪。具體如何寫，在這里就不多說堪侯，具體業(yè)務(wù)具體討論嚎尤。這里只說下，在日常工作中伍宦，常見的幾種交互文檔書寫的思路方法芽死，已經(jīng)書寫的范圍和注意事項(xiàng)。

? ? 2.4.1流程圖

? ? ? ?重要性就不多說了次洼，很重要关贵。另外，一定要在設(shè)計(jì)前梳理好流程圖（可以不完整）卖毁，一定不要后續(xù)為了展示補(bǔ)流程圖揖曾，那樣，流程圖就不能起到它本身的作用了亥啦。如果你原來不是這樣做的炭剪，可以調(diào)整下思路。

（書寫小貼士：1翔脱、流程簡單可以繪制一個流程圖念祭，如果流程多，建議拆分成各個子流程繪制碍侦；2、除了繪制功能流程圖外隶糕，建議可以繪制業(yè)務(wù)流程圖瓷产；3、繪制軟件多樣枚驻，可以axure濒旦，也可以使用第三方軟件。）

圖2.8流程圖

? ? ?2.4.2信息架構(gòu)圖

? ? ? ? 重要性也不說了再登，很重要尔邓。繪制信息架構(gòu)圖，只是一個展現(xiàn)結(jié)果锉矢，如何繪制才是核心梯嗽，方法就不在這里展開。

（書寫小貼士：1沽损、信息架構(gòu)圖可以從功能--頁面--模塊--元素這樣的維度書寫灯节；2、共通模塊可以并聯(lián)使用；）

圖2.9信息架構(gòu)圖

? ? ?2.4.3交互頁面

? ? ? ? ?交互頁面主要有兩部分構(gòu)成炎疆，一部分是頁面卡骂，一部分交互說明。

? ? ? ? 一個Axure頁面表達(dá)一個事效果最好形入，最受同事喜歡全跨。什么叫做表達(dá)一個事呢？一個事既可以指一個流程亿遂，也可以指一個頁面浓若。

? ? ? 一個axure頁面表達(dá)一個頁面。

（書寫小貼士：針對核心頁面具體說明崩掘，至于頁面所關(guān)聯(lián)的子頁面和流程就在其他頁面表達(dá)七嫌。）

圖2.10一個Axure頁面表達(dá)一個頁面

? ? ? ? ?一個Axure頁面表達(dá)一個頁面的多種狀態(tài)：

圖2.11 一個Axure頁面表達(dá)一個頁面的多鐘狀態(tài)

? ? ? ? ?一個axure頁面表達(dá)一個流程

? ? ? ? ? 一個流程是指最小的一個子流程，子流程與母流程之間可以通過Axure文檔的樹結(jié)構(gòu)表達(dá)

圖2.12 一個Axure頁面表達(dá)一個流程

2.4.4交互說明文檔

一份合格的交互說明文檔應(yīng)該包括但不限于

頁面內(nèi)容說明（數(shù)據(jù)來源苞慢，數(shù)據(jù)特點(diǎn)诵原，內(nèi)容類型，范圍挽放，極值绍赛，排序規(guī)則等）；

交互反饋辑畦，狀態(tài)吗蚌；

交互動效、視覺要求纯出。

? ? ? 下面這個案例中蚯妇，對頁面元素做了詳細(xì)說明，包括數(shù)據(jù)特點(diǎn)暂筝、計(jì)算規(guī)則箩言、更新極值、特殊情況說明焕襟、狀態(tài)說明陨收，視覺樣式說明等。

圖2.13 一份交互說明文檔

寫到這里基本就算完了鸵赖，其他內(nèi)容就是針對不同產(chǎn)品的個性化需求务漩，做不同具體設(shè)計(jì)說明。

三它褪、神助攻

就像文中開頭所說的交互設(shè)計(jì)規(guī)范的目的是提高工作效率饵骨，降低溝通成本，提高設(shè)計(jì)質(zhì)量茫打；至于這“兩個提高一個降低”能否實(shí)現(xiàn)宏悦，除了規(guī)范外镐确，我這兒還有兩件“法寶”。

?一饼煞、定制化的組件庫源葫。結(jié)合自己的工作特點(diǎn)，定制一個符合自己業(yè)務(wù)范疇砖瞧，和工作習(xí)慣的組件庫息堂，效率肯定會事半功倍。組件庫不是一蹴而就块促，而是自己根據(jù)業(yè)務(wù)特點(diǎn)和設(shè)計(jì)習(xí)慣荣堰，慢慢調(diào)試的。附件是我自己定制的一套符合自己設(shè)計(jì)特點(diǎn)的組件庫竭翠，大家可以在此基礎(chǔ)上修正調(diào)整振坚。

二、團(tuán)隊(duì)斋扰。團(tuán)隊(duì)之間的默契渡八，配合與協(xié)同，才是提高工作效率传货、降低溝通成本屎鳍，提高設(shè)計(jì)質(zhì)量的制勝法寶。

? ? ? ? 看我啰嗦了這么多问裕，我也有點(diǎn)不好意思逮壁，就奉上一份交互規(guī)范源文件和一份設(shè)計(jì)組件庫。供大家參考粮宛。多多溝通窥淆，多多交流。

交互規(guī)范源文件：鏈接：https://pan.baidu.com/s/1PnRZpir8JJDmCNVLfEi0vQ?密碼：pew7

組件庫：鏈接：https://pan.baidu.com/s/1lS4DpO5mU0VtrMh-K3XFCw?密碼：r4rp

（ps：組件庫是在螞蟻金服開源的組件庫基礎(chǔ)上調(diào)整更新的）