前言
? ? ? ?這篇文章講的是如何制作一份產品跪帝、UI、開發(fā)蒂窒、測試都喜歡看的交互設計文檔棠众。文章內容主要是自己工作中用到的交互設計規(guī)范模板（axure版本），這套規(guī)范是自己總結出來的粪般，但是構建的思維方法借鑒很多前輩大神的方法論拼余，特別是淘寶U一點團隊所分享的公開課內容。
? ? ? ?抱著他山之石亩歹，可以功玉的想法匙监，結合自己公司團隊的工作特點，總結了一套交互設計規(guī)范小作。使用中亭姥，有些小收獲，分享出來顾稀，大家多多溝通达罗，共同進步。
? ? ? ? 這篇文章的行文思路是静秆，先說明交互設計規(guī)范準則是什么粮揉、然后舉例說明交互設計文檔各模塊的書寫思路及踩過的坑，最后是一份可供下載的模板和組件庫抚笔。
一扶认、交互設計規(guī)范化文檔的準則
1.1 為什么要輸出一份交互設計規(guī)范
? ? ? ? 1、“設計有記錄殊橙、信息可追溯辐宾、交流有依據(jù)”狱从。這個很重要、重要叠纹、要矫夯。一個產品的誕生不是你一個人幾天的事，它有多部門配合的寬度吊洼，也有多版本迭代的長度训貌。一個交互設計師，如果設計不嚴謹挖了坑冒窍，早晚是要填的递沪，交互設計規(guī)范或許可以幫你規(guī)避一些坑。
? ? ? ?2综液、“在團隊中款慨，信任真的是一切溝通的基準”。交互設計師谬莹，工作中除了解析需求檩奠，繪制交互稿外，更多的時候需要配合UI完善設計附帽，跟進開發(fā)實現(xiàn)效果埠戳。如果你繪制的交互稿沒有那么的完善，缺東少西蕉扮，UI和開發(fā)就會慢慢對你沒有信任感整胃。這個時候，你的其他工作也會很難開展喳钟。也不是說一份交互設計規(guī)范屁使，就能讓開發(fā)對你產生信任，但是一份好的規(guī)范奔则，能彌補你部分欠缺蛮寂，提高你設計的正確性，同時一份好的規(guī)范文檔可以降低溝通和學習成本易茬，展現(xiàn)你的專業(yè)化能力酬蹋。
1.2 交互設計規(guī)范要求
? ? ? ?1、符合自己的就是最好的疾呻。一定是根據(jù)自己公司工作流程除嘹，和上下游溝通后來確定自己的文檔應該包括哪些內容写半，哪些內容需要著重寫岸蜗，哪些內容可以少寫，書寫的方式應該怎樣叠蝇，團隊內行業(yè)內是否有共同的說法和寫法璃岳。畢竟規(guī)范的作用就是為了提高工作效率的年缎。
? ? ? ?2、擴展和更新铃慷。不同類型的項目单芜，所涉及的控件，所使用的規(guī)范要求不同犁柜，要學著調整和更新自己的模板洲鸠。
二、交互設計文檔各模塊的書寫思路和踩過的坑
先來一份交互文檔的目錄
2.1封面
開篇明義馋缅，文檔的基本信息概述扒腕。
版本編號：此文檔的最新編號；（一定要記得更新）
設計人員萤悴、開發(fā)人員瘾腰、測試人員：表明文件流轉的下一級相關人員，方面溝通（如果涉及人員眾多覆履，也可單獨列舉）
? ? ? ?一份規(guī)范的交互稿不僅是對自己負責蹋盆，也是對其他伙伴負責、對將來負責硝全。
2.2文檔說明
? ? ? ? 交互文檔的目的就是為了上傳下達栖雾，將需求轉化可視化文檔，是一個過程性文件伟众。所以岩灭，文檔的可閱讀性是衡量一份文檔好壞的一個標準。而文檔說明這個模塊就是為了給不同的文檔閱讀者相同的“世界觀”赂鲤。
? ? ? ?2.2.1項目背景與范圍
? ? ? ? 更完整的項目背景應該出現(xiàn)在產品需求文檔中噪径，而交互文檔中書寫的目的有兩個，第一数初，如果項目小找爱，沒有完整的產品需求文檔，這里就是向各方人員傳達項目背景的地方泡孩；第二车摄，加深整個項目組成員對項目的理解，看內容前仑鸥，先有一個共同知識背景吮播。
?（書寫小貼士：書寫內容相當于用戶體驗要素中，戰(zhàn)略層眼俊、范圍層的梗概意狠。）
? ? ? 2.2.2更新日志
? ? ? ?目的也是有兩個：第一，面向自己疮胖。工作是一個過程环戈，完整的記錄更新日志闷板，方便自己將來查詢，同時院塞，也方便和開發(fā)測試互撕的時候遮晚，亮證據(jù)；第二拦止，面向開發(fā)县遣、測試。整個開發(fā)過程漫長汹族，協(xié)助方多樣艺玲，完整記錄，可以降低各方不必要的溝通成本鞠抑。
? ? （書寫小貼士：1饭聚、更新日志，可以在交互文檔評審通過后搁拙，需求鎖定后秒梳，在開始書寫，設計過程中的更改可以不書寫進去（個人經驗）箕速；2酪碘、書寫的內容要具體（寫的不具體，后續(xù)會有坑）盐茎；3兴垦、書寫中最好增加關聯(lián)鏈接，方便相關同事快速找到位置字柠；4探越、同一個位置多次更改時，要標注最新內容）
? ? ? 2.2.3設計進度計劃
進度計劃這種東西一般出現(xiàn)在項目工程表中窑业，或者項目工程排期中（具體的可能根據(jù)不同公司钦幔，有所不同）。而交互稿中的設計進度排期的作用常柄，和前面兩個一樣鲤氢，一方面是給項目組成員一個共同的背景，另一方面西潘，是自己設計過程的記錄卷玉。
（書寫小貼士：1、按照設計過程喷市，可以大致分為需求整理相种、需求評審、交互設計东抹、交互評審蚂子、UI設計沃测、UI評審缭黔、開發(fā)食茎、測試，根據(jù)自己情況進行劃分馏谨；2别渔、個人經驗，此處的進度計劃不是整個項目很嚴謹?shù)墓こ逃媱澗寤ィ颂幍闹皇窃O計師與相關同事溝通協(xié)商工作的一個梗概哎媚，以及自己的記錄，自己看的明白就行）
? ? ? 2.2.4評審記錄
? ? ? ? ?區(qū)別于更新日志喊儡，評審記錄主要書寫于設計階段拨与。評審記錄主要分為內部評審（設計師（項目內交互和視覺）、UED負責人艾猜、UED相關設計師）和外部評審（設計師（項目內交互和視覺）买喧、UED負責人、UED相關設計師匆赃、業(yè)務負責人（產品和需求方）淤毛、技術負責人、技術相關人算柳、市場運營人員）
（書寫小貼士：1低淡、一般都伴隨著會議記錄出現(xiàn)，我一般會書寫好以后瞬项，直接剪切當會議記錄）
2.3蔗蹋、解析過程
? ? ? ?解析過程是我認為最重要的一部分，是產生信任和思維可視化的地方囱淋。在進行交互設計原型繪制之前纸颜，一定要以目標為導向拆分自己的思維，并將“虛擬”的目標轉化為各種設計元素绎橘。
? ? ? 說簡單的點胁孙，這塊就是設計維度的需求分析。不同人可能有不同的分析方法和展現(xiàn)形式称鳞，不管怎樣的方式涮较，只要能梳理自己思維幫助自己設計并且清晰的向自己伙伴傳達信息即可。
? ? ? ?以個人經驗冈止，根據(jù)不同類別的項目狂票，不同大小的產品，需求分析的維度和角度都有不同熙暴。此處我就簡單說一下闺属，我常用的一種需求分析方法慌盯。
以人為核心，以目標為導向的思維解析法
? ? ?我們做設計掂器，大到一個產品亚皂，小到一個頁面，在設計的時候都是有目的国瓮，也有需要達到的目標灭必。目的可能來自于公司戰(zhàn)略，來自于市場需求乃摹，或者來自于money禁漓，不管來自哪里，商業(yè)社會里孵睬，我們做產品肯定是有所圖播歼。同時，我們產品服務的用戶掰读，他們的特點有很多秘狞、所使用產品的環(huán)境有很多、用產品時的想法感覺也有很多磷支、他們也有自己的對產品的追求和要求谒撼。而我們是設計師，不是藝術家雾狈，我們需要在有限的條件下廓潜，利用我們的才能設計最貼合用戶需求，最能產生商業(yè)價值的產品善榛。這個過程就是下面這個需求分析推導的完整思路辩蛋。具體內容，我就不再這里展開解釋了移盆，可以仔細看下圖悼院。我針對各個具體環(huán)節(jié)做了一些簡單說明。將來如果有合適的咒循、可對外分享的案例了据途，我可以詳細說明下。
（書寫小貼士：1叙甸、書寫形式可以多樣颖医，只要能幫助自己理解需求、方便設計即可裆蒸；2熔萧、需求分析可以有更詳細的文檔，交互文檔里寫，還是那個目的佛致，讓上下游看到贮缕，能達成共識；3俺榆、我文檔中列舉的其他幾種方法感昼，只是一個例子，可根據(jù)具體情況使用）
2.4肋演、頁面交互方案
? ? ? ? 頁面交互方案抑诸，也就是我們常說的那種交互原型文檔烂琴。具體如何寫爹殊，在這里就不多說，具體業(yè)務具體討論奸绷。這里只說下梗夸，在日常工作中，常見的幾種交互文檔書寫的思路方法号醉，已經書寫的范圍和注意事項反症。
? ? 2.4.1流程圖
? ? ? ?重要性就不多說了，很重要畔派。另外铅碍，一定要在設計前梳理好流程圖（可以不完整），一定不要后續(xù)為了展示補流程圖线椰，那樣胞谈，流程圖就不能起到它本身的作用了。如果你原來不是這樣做的憨愉，可以調整下思路烦绳。
（書寫小貼士：1、流程簡單可以繪制一個流程圖配紫，如果流程多径密，建議拆分成各個子流程繪制；2躺孝、除了繪制功能流程圖外享扔，建議可以繪制業(yè)務流程圖；3植袍、繪制軟件多樣惧眠，可以axure，也可以使用第三方軟件奋单。）
? ? ?2.4.2信息架構圖
? ? ? ? 重要性也不說了锉试，很重要。繪制信息架構圖，只是一個展現(xiàn)結果呆盖，如何繪制才是核心拖云，方法就不在這里展開。
（書寫小貼士：1应又、信息架構圖可以從功能--頁面--模塊--元素這樣的維度書寫宙项；2、共通模塊可以并聯(lián)使用株扛；）
? ? ?2.4.3交互頁面
? ? ? ? ?交互頁面主要有兩部分構成尤筐，一部分是頁面，一部分交互說明洞就。
? ? ? ? 一個Axure頁面表達一個事效果最好盆繁，最受同事喜歡。什么叫做表達一個事呢旬蟋？一個事既可以指一個流程油昂，也可以指一個頁面。
? ? ? 一個axure頁面表達一個頁面倾贰。
（書寫小貼士：針對核心頁面具體說明冕碟，至于頁面所關聯(lián)的子頁面和流程就在其他頁面表達。）
? ? ? ? ?一個Axure頁面表達一個頁面的多種狀態(tài)：
? ? ? ? ?一個axure頁面表達一個流程
? ? ? ? ? 一個流程是指最小的一個子流程匆浙，子流程與母流程之間可以通過Axure文檔的樹結構表達
2.4.4交互說明文檔
一份合格的交互說明文檔應該包括但不限于
頁面內容說明（數(shù)據(jù)來源安寺，數(shù)據(jù)特點，內容類型首尼，范圍挑庶，極值，排序規(guī)則等）饰恕；
交互反饋挠羔，狀態(tài)；
交互動效埋嵌、視覺要求破加。
? ? ? 下面這個案例中，對頁面元素做了詳細說明雹嗦，包括數(shù)據(jù)特點范舀、計算規(guī)則、更新極值了罪、特殊情況說明锭环、狀態(tài)說明，視覺樣式說明等泊藕。
寫到這里基本就算完了辅辩，其他內容就是針對不同產品的個性化需求，做不同具體設計說明。
三玫锋、神助攻
就像文中開頭所說的交互設計規(guī)范的目的是提高工作效率蛾茉，降低溝通成本，提高設計質量撩鹿；至于這“兩個提高一個降低”能否實現(xiàn)谦炬，除了規(guī)范外，我這兒還有兩件“法寶”节沦。
?一键思、定制化的組件庫。結合自己的工作特點甫贯，定制一個符合自己業(yè)務范疇吼鳞，和工作習慣的組件庫，效率肯定會事半功倍获搏。組件庫不是一蹴而就赖条，而是自己根據(jù)業(yè)務特點和設計習慣失乾，慢慢調試的常熙。附件是我自己定制的一套符合自己設計特點的組件庫，大家可以在此基礎上修正調整碱茁。
二裸卫、團隊。團隊之間的默契纽竣，配合與協(xié)同墓贿，才是提高工作效率、降低溝通成本蜓氨，提高設計質量的制勝法寶聋袋。
看我啰嗦了這么多，我也有點不好意思穴吹，就奉上一份交互規(guī)范源文件和一份設計組件庫幽勒。供大家參考。多多溝通港令，多多交流啥容。
交互規(guī)范源文件：鏈接：https://pan.baidu.com/s/1PnRZpir8JJDmCNVLfEi0vQ?密碼：pew7
組件庫：鏈接：https://pan.baidu.com/s/1lS4DpO5mU0VtrMh-K3XFCw?密碼：r4rp
（ps：組件庫是在螞蟻金服開源的組件庫基礎上調整更新的）
