前言
? ? ? ?這篇文章講的是如何制作一份產(chǎn)品、UI、開發(fā)末贾、測(cè)試都喜歡看的交互設(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ì)文檔各模塊的書寫思路及踩過的坑，最后是一份可供下載的模板和組件庫(kù)浦箱。
一吸耿、交互設(shè)計(jì)規(guī)范化文檔的準(zhǔn)則
1.1 為什么要輸出一份交互設(shè)計(jì)規(guī)范
? ? ? ? 1、“設(shè)計(jì)有記錄酷窥、信息可追溯咽安、交流有依據(jù)”。這個(gè)很重要蓬推、重要妆棒、要。一個(gè)產(chǎn)品的誕生不是你一個(gè)人幾天的事沸伏，它有多部門配合的寬度糕珊，也有多版本迭代的長(zhǎng)度。一個(gè)交互設(shè)計(jì)師毅糟，如果設(shè)計(jì)不嚴(yán)謹(jǐn)挖了坑红选，早晚是要填的，交互設(shè)計(jì)規(guī)范或許可以幫你規(guī)避一些坑姆另。
? ? ? ?2喇肋、“在團(tuán)隊(duì)中，信任真的是一切溝通的基準(zhǔn)”迹辐。交互設(shè)計(jì)師蝶防，工作中除了解析需求，繪制交互稿外明吩，更多的時(shí)候需要配合UI完善設(shè)計(jì)间学，跟進(jìn)開發(fā)實(shí)現(xiàn)效果。如果你繪制的交互稿沒有那么的完善贺喝，缺東少西菱鸥，UI和開發(fā)就會(huì)慢慢對(duì)你沒有信任感。這個(gè)時(shí)候躏鱼，你的其他工作也會(huì)很難開展氮采。也不是說一份交互設(shè)計(jì)規(guī)范，就能讓開發(fā)對(duì)你產(chǎn)生信任染苛，但是一份好的規(guī)范鹊漠，能彌補(bǔ)你部分欠缺，提高你設(shè)計(jì)的正確性茶行，同時(shí)一份好的規(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封面
開篇明義贝乎，文檔的基本信息概述。
版本編號(hào)：此文檔的最新編號(hào)叽粹；（一定要記得更新）
設(shè)計(jì)人員览效、開發(fā)人員、測(cè)試人員：表明文件流轉(zhuǎn)的下一級(jí)相關(guān)人員虫几，方面溝通（如果涉及人員眾多锤灿，也可單獨(dú)列舉）
圖2.2封面
? ? ? ?一份規(guī)范的交互稿不僅是對(duì)自己負(fù)責(zé)，也是對(duì)其他伙伴負(fù)責(zé)辆脸、對(duì)將來負(fù)責(zé)但校。
2.2文檔說明
? ? ? ? 交互文檔的目的就是為了上傳下達(dá)，將需求轉(zhuǎn)化可視化文檔啡氢，是一個(gè)過程性文件状囱。所以术裸，文檔的可閱讀性是衡量一份文檔好壞的一個(gè)標(biāo)準(zhǔn)。而文檔說明這個(gè)模塊就是為了給不同的文檔閱讀者相同的“世界觀”亭枷。
? ? ? ?2.2.1項(xiàng)目背景與范圍
? ? ? ? 更完整的項(xiàng)目背景應(yīng)該出現(xiàn)在產(chǎn)品需求文檔中袭艺，而交互文檔中書寫的目的有兩個(gè)，第一叨粘，如果項(xiàng)目小猾编，沒有完整的產(chǎn)品需求文檔，這里就是向各方人員傳達(dá)項(xiàng)目背景的地方升敲；第二答倡，加深整個(gè)項(xiàng)目組成員對(duì)項(xiàng)目的理解，看內(nèi)容前驴党，先有一個(gè)共同知識(shí)背景瘪撇。
?（書寫小貼士：書寫內(nèi)容相當(dāng)于用戶體驗(yàn)要素中，戰(zhàn)略層港庄、范圍層的梗概设江。）
圖2.3項(xiàng)目背景與范圍
? ? ?
? ? ? 2.2.2更新日志
? ? ? ?目的也是有兩個(gè)：第一，面向自己攘轩。工作是一個(gè)過程叉存，完整的記錄更新日志，方便自己將來查詢度帮，同時(shí)歼捏，也方便和開發(fā)測(cè)試互撕的時(shí)候，亮證據(jù)笨篷；第二瞳秽，面向開發(fā)、測(cè)試率翅。整個(gè)開發(fā)過程漫長(zhǎng)练俐，協(xié)助方多樣，完整記錄冕臭，可以降低各方不必要的溝通成本腺晾。
? ? （書寫小貼士：1、更新日志辜贵，可以在交互文檔評(píng)審?fù)ㄟ^后悯蝉，需求鎖定后，在開始書寫托慨，設(shè)計(jì)過程中的更改可以不書寫進(jìn)去（個(gè)人經(jīng)驗(yàn)）鼻由；2、書寫的內(nèi)容要具體（寫的不具體，后續(xù)會(huì)有坑）蕉世；3蔼紧、書寫中最好增加關(guān)聯(lián)鏈接，方便相關(guān)同事快速找到位置狠轻；4歉井、同一個(gè)位置多次更改時(shí)，要標(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)度排期的作用蜜自，和前面兩個(gè)一樣，一方面是給項(xiàng)目組成員一個(gè)共同的背景卢佣，另一方面重荠，是自己設(shè)計(jì)過程的記錄。
（書寫小貼士：1虚茶、按照設(shè)計(jì)過程戈鲁，可以大致分為需求整理、需求評(píng)審嘹叫、交互設(shè)計(jì)婆殿、交互評(píng)審、UI設(shè)計(jì)罩扇、UI評(píng)審婆芦、開發(fā)、測(cè)試喂饥，根據(jù)自己情況進(jìn)行劃分消约；2、個(gè)人經(jīng)驗(yàn)员帮，此處的進(jìn)度計(jì)劃不是整個(gè)項(xiàng)目很嚴(yán)謹(jǐn)?shù)墓こ逃?jì)劃或粮，此處的只是設(shè)計(jì)師與相關(guān)同事溝通協(xié)商工作的一個(gè)梗概，以及自己的記錄捞高，自己看的明白就行）
圖2.5設(shè)計(jì)進(jìn)度
? ? ? 2.2.4評(píng)審記錄
? ? ? ? ?區(qū)別于更新日志氯材，評(píng)審記錄主要書寫于設(shè)計(jì)階段。評(píng)審記錄主要分為內(nèi)部評(píng)審（設(shè)計(jì)師（項(xiàng)目?jī)?nèi)交互和視覺）硝岗、UED負(fù)責(zé)人浓体、UED相關(guān)設(shè)計(jì)師）和外部評(píng)審（設(shè)計(jì)師（項(xiàng)目?jī)?nèi)交互和視覺）、UED負(fù)責(zé)人辈讶、UED相關(guān)設(shè)計(jì)師命浴、業(yè)務(wù)負(fù)責(zé)人（產(chǎn)品和需求方）、技術(shù)負(fù)責(zé)人、技術(shù)相關(guān)人生闲、市場(chǎng)運(yùn)營(yíng)人員）
（書寫小貼士：1媳溺、一般都伴隨著會(huì)議記錄出現(xiàn)，我一般會(huì)書寫好以后碍讯，直接剪切當(dāng)會(huì)議記錄）
圖2.6評(píng)審記錄
2.3悬蔽、解析過程
? ? ? ?解析過程是我認(rèn)為最重要的一部分，是產(chǎn)生信任和思維可視化的地方捉兴。在進(jìn)行交互設(shè)計(jì)原型繪制之前蝎困，一定要以目標(biāo)為導(dǎo)向拆分自己的思維，并將“虛擬”的目標(biāo)轉(zhuǎn)化為各種設(shè)計(jì)元素倍啥。
? ? ? 說簡(jiǎn)單的點(diǎn)禾乘，這塊就是設(shè)計(jì)維度的需求分析。不同人可能有不同的分析方法和展現(xiàn)形式虽缕，不管怎樣的方式始藕，只要能梳理自己思維幫助自己設(shè)計(jì)并且清晰的向自己伙伴傳達(dá)信息即可。
? ? ? ?以個(gè)人經(jīng)驗(yàn)氮趋，根據(jù)不同類別的項(xiàng)目伍派，不同大小的產(chǎn)品，需求分析的維度和角度都有不同剩胁。此處我就簡(jiǎn)單說一下诉植，我常用的一種需求分析方法。
以人為核心昵观，以目標(biāo)為導(dǎo)向的思維解析法
? ? ?我們做設(shè)計(jì)倍踪，大到一個(gè)產(chǎn)品，小到一個(gè)頁面索昂，在設(shè)計(jì)的時(shí)候都是有目的建车，也有需要達(dá)到的目標(biāo)。目的可能來自于公司戰(zhàn)略椒惨，來自于市場(chǎng)需求缤至，或者來自于money，不管來自哪里康谆，商業(yè)社會(huì)里领斥，我們做產(chǎn)品肯定是有所圖。同時(shí)沃暗，我們產(chǎn)品服務(wù)的用戶月洛，他們的特點(diǎn)有很多、所使用產(chǎn)品的環(huán)境有很多孽锥、用產(chǎn)品時(shí)的想法感覺也有很多嚼黔、他們也有自己的對(duì)產(chǎn)品的追求和要求细层。而我們是設(shè)計(jì)師，不是藝術(shù)家唬涧，我們需要在有限的條件下疫赎，利用我們的才能設(shè)計(jì)最貼合用戶需求，最能產(chǎn)生商業(yè)價(jià)值的產(chǎn)品碎节。這個(gè)過程就是下面這個(gè)需求分析推導(dǎo)的完整思路捧搞。具體內(nèi)容，我就不再這里展開解釋了狮荔，可以仔細(xì)看下圖胎撇。我針對(duì)各個(gè)具體環(huán)節(jié)做了一些簡(jiǎn)單說明。將來如果有合適的殖氏、可對(duì)外分享的案例了晚树，我可以詳細(xì)說明下。
（書寫小貼士：1受葛、書寫形式可以多樣，只要能幫助自己理解需求偎谁、方便設(shè)計(jì)即可总滩；2、需求分析可以有更詳細(xì)的文檔巡雨，交互文檔里寫闰渔，還是那個(gè)目的，讓上下游看到铐望，能達(dá)成共識(shí)冈涧；3、我文檔中列舉的其他幾種方法正蛙，只是一個(gè)例子督弓，可根據(jù)具體情況使用）
圖2.7需求分析推導(dǎo)
2.4、頁面交互方案
? ? ? ? 頁面交互方案乒验，也就是我們常說的那種交互原型文檔愚隧。具體如何寫，在這里就不多說锻全，具體業(yè)務(wù)具體討論狂塘。這里只說下，在日常工作中鳄厌，常見的幾種交互文檔書寫的思路方法荞胡，已經(jīng)書寫的范圍和注意事項(xiàng)。
? ? 2.4.1流程圖
? ? ? ?重要性就不多說了了嚎，很重要泪漂。另外廊营，一定要在設(shè)計(jì)前梳理好流程圖（可以不完整），一定不要后續(xù)為了展示補(bǔ)流程圖窖梁，那樣赘风，流程圖就不能起到它本身的作用了。如果你原來不是這樣做的纵刘，可以調(diào)整下思路邀窃。
（書寫小貼士：1、流程簡(jiǎn)單可以繪制一個(gè)流程圖假哎，如果流程多瞬捕，建議拆分成各個(gè)子流程繪制；2舵抹、除了繪制功能流程圖外肪虎，建議可以繪制業(yè)務(wù)流程圖；3惧蛹、繪制軟件多樣扇救，可以axure，也可以使用第三方軟件香嗓。）
圖2.8流程圖
? ? ?2.4.2信息架構(gòu)圖
? ? ? ? 重要性也不說了迅腔，很重要。繪制信息架構(gòu)圖靠娱，只是一個(gè)展現(xiàn)結(jié)果沧烈，如何繪制才是核心，方法就不在這里展開像云。
（書寫小貼士：1锌雀、信息架構(gòu)圖可以從功能--頁面--模塊--元素這樣的維度書寫；2迅诬、共通模塊可以并聯(lián)使用腋逆；）
圖2.9信息架構(gòu)圖
? ? ?2.4.3交互頁面
? ? ? ? ?交互頁面主要有兩部分構(gòu)成，一部分是頁面侈贷，一部分交互說明闲礼。
? ? ? ? 一個(gè)Axure頁面表達(dá)一個(gè)事效果最好，最受同事喜歡铐维。什么叫做表達(dá)一個(gè)事呢柬泽？一個(gè)事既可以指一個(gè)流程，也可以指一個(gè)頁面嫁蛇。
? ? ? 一個(gè)axure頁面表達(dá)一個(gè)頁面锨并。
（書寫小貼士：針對(duì)核心頁面具體說明，至于頁面所關(guān)聯(lián)的子頁面和流程就在其他頁面表達(dá)睬棚。）
圖2.10一個(gè)Axure頁面表達(dá)一個(gè)頁面
? ? ? ? ?一個(gè)Axure頁面表達(dá)一個(gè)頁面的多種狀態(tài)：
圖2.11 一個(gè)Axure頁面表達(dá)一個(gè)頁面的多鐘狀態(tài)
? ? ? ? ?一個(gè)axure頁面表達(dá)一個(gè)流程
? ? ? ? ? 一個(gè)流程是指最小的一個(gè)子流程第煮，子流程與母流程之間可以通過Axure文檔的樹結(jié)構(gòu)表達(dá)
圖2.12 一個(gè)Axure頁面表達(dá)一個(gè)流程
2.4.4交互說明文檔
一份合格的交互說明文檔應(yīng)該包括但不限于
頁面內(nèi)容說明（數(shù)據(jù)來源解幼，數(shù)據(jù)特點(diǎn)，內(nèi)容類型包警，范圍撵摆，極值，排序規(guī)則等）害晦；
交互反饋特铝，狀態(tài)；
交互動(dòng)效壹瘟、視覺要求鲫剿。
? ? ? 下面這個(gè)案例中，對(duì)頁面元素做了詳細(xì)說明稻轨，包括數(shù)據(jù)特點(diǎn)灵莲、計(jì)算規(guī)則、更新極值殴俱、特殊情況說明政冻、狀態(tài)說明，視覺樣式說明等线欲。
圖2.13 一份交互說明文檔
寫到這里基本就算完了明场，其他內(nèi)容就是針對(duì)不同產(chǎn)品的個(gè)性化需求，做不同具體設(shè)計(jì)說明询筏。
三榕堰、神助攻
就像文中開頭所說的交互設(shè)計(jì)規(guī)范的目的是提高工作效率竖慧，降低溝通成本嫌套，提高設(shè)計(jì)質(zhì)量；至于這“兩個(gè)提高一個(gè)降低”能否實(shí)現(xiàn)圾旨，除了規(guī)范外踱讨，我這兒還有兩件“法寶”。
?一砍的、定制化的組件庫(kù)痹筛。結(jié)合自己的工作特點(diǎn)，定制一個(gè)符合自己業(yè)務(wù)范疇廓鞠，和工作習(xí)慣的組件庫(kù)帚稠，效率肯定會(huì)事半功倍。組件庫(kù)不是一蹴而就床佳，而是自己根據(jù)業(yè)務(wù)特點(diǎn)和設(shè)計(jì)習(xí)慣滋早，慢慢調(diào)試的。附件是我自己定制的一套符合自己設(shè)計(jì)特點(diǎn)的組件庫(kù)砌们，大家可以在此基礎(chǔ)上修正調(diào)整杆麸。
二搁进、團(tuán)隊(duì)。團(tuán)隊(duì)之間的默契昔头，配合與協(xié)同饼问，才是提高工作效率、降低溝通成本揭斧，提高設(shè)計(jì)質(zhì)量的制勝法寶莱革。
? ? ? ? 看我啰嗦了這么多，我也有點(diǎn)不好意思未蝌，就奉上一份交互規(guī)范源文件和一份設(shè)計(jì)組件庫(kù)驮吱。供大家參考。多多溝通萧吠，多多交流左冬。
交互規(guī)范源文件：鏈接：https://pan.baidu.com/s/1PnRZpir8JJDmCNVLfEi0vQ?密碼：pew7
組件庫(kù)：鏈接：https://pan.baidu.com/s/1lS4DpO5mU0VtrMh-K3XFCw?密碼：r4rp
（ps：組件庫(kù)是在螞蟻金服開源的組件庫(kù)基礎(chǔ)上調(diào)整更新的）
