悅姐聊設計22年的Flag之一是要輸出《交互設計基礎課程》，所以計劃每周一篇，歡迎大家持續關注和監督👀今天給大家講講《如何輸出一份專業的交互設計文檔》，抱着以終為始的理念，讓大家以最終產物為目標，心態歸零，看看需要輸入哪些信息，經過哪些思考，才能最終輸出一份專業的交互設計稿。交互設計 · 第 4 講
👉如何輸出一份專業的交互設計文檔👈
工欲善其事必先利其器，先為大家簡單介紹一下交互設計的創作工具。根據2021年底IXDC發布的《中國互聯網行業體驗設計工具報告》，Sketch、Axure和Figma是線框圖工具的前三甲，Sketch是Mac電腦首選，Axure是Win電腦的首選，而國外異軍突起遙遙領先的figma經過一年時間從20年的第6名躍升為21年的第3名，漲勢非常迅猛。
我剛入行那會（11年），交互和產品都用Axture畫原型，輸出物是靜態html，內容和形式都比較接近網頁的體驗，左邊是導航目錄，可以快速索引定位，右邊是內容區，可以有錨點和鏈接方便點擊跳轉，不管是設計還是瀏覽都非常便捷的。（太難找我早期的作品了，所以從網上找了這張圖給大家作參考）
▲圖2 Axure原型圖（圖片來自呆呆龍的設計日記）到了15年前後，隨着扁平化設計的興起，交互視覺設計產出物差異開始變小，國內很多UED設計師開始轉型為體驗設計師，由一個設計師負責產出交互+視覺設計稿，sketch因其UI創作優勢開始逐漸流行。
到19年前後，Figma走進大家的視線，因其強大的在線協同創作優勢（支持多名設計師同時在一份文檔上協同創作、修改、分發）迅速吸引了一大批前瞻性的設計師。
我們vivo VMIC UED團隊經過慎重考察和對比，也於2021年年中全員開始轉投Figma，核心原因有三個：1、設計效率更高：Figma不吃內存，無需等待，工作更絲滑（Sketch卡起來讓人頭大，加了內存條也沒用）。2、設計師協同更便捷：多人同時在線編輯、評審、修改，迭代一氣呵成。3、項目協同更方便：文件不用來回發，不用命名多個版本，按需查看/取用切圖。（再也不用命名終稿，終終稿，打死不改稿，打死不改稿2…，經過近一年的使用，設計小夥伴都反饋Figma真香）
作為交互設計師，我們需要了解一下各個設計工具的優劣勢，根據自身團隊和硬件的情況，選擇合適的設計工具。
作為一名體驗設計師，要時刻秉承和練習UCD的思維方式。我們的交互設計，是為了最終用戶的體驗而設計的，也是為了內部項目成員而設計的，只有很好的服務了內部項目成員，才能在大家的共同努力下，為外部真正的用戶創造他們願意使用的產品。
通過上圖，我們可以很清楚的發現我們交互設計文檔的直接用戶：1、產品經理：需要根據交互文檔完善產品需求文檔PRD。3、研發工程師：需要根據交互文檔進行頁面結構、框架、狀態、交互行為的編程。4、測試工程師：需要根據交互文檔編寫各種狀態和交互效果的測試用例並進行測試。雖然大家的分工不同，但對交互設計文檔都有一個相同的訴求：1、交互設計方案合理：避免返工，浪費大家的前期投入。2、交互流程和狀態全面：避免後期被研發測試催促，倉促補場景，一方面影響大家對自己專業性的評價，另一方面避免因為異常狀態推翻主設計的災難。3、細節描述簡潔清晰：用戶都是不愛閱讀的，即使是為了工作，要把對用戶界面設計的標準，運用到交互細節的撰寫中，儘量做到言簡意賅。4、視覺層次美觀清晰：交互設計師也需要具備一定的視覺審美和排版能力，以保證我們的視覺設計稿能夠給內部用戶留下良好的第一印象。所以，作為交互設計師，我們要有用戶導向意識，也要有服務設計意識，不止為了最終用戶而設計，也為了直接用戶而設計，這能幫助我們做出更專業的交互設計文檔。我以我們的交互設計模板為例講解，大家可以把這種標準應用到各種設計工具的輸出物中。（對比上圖Axure/Sketch原型大家可以看出，Axure的導航層級相對深一點，Figma和skech相對扁平，二者各有利弊）
為了兼容ABC級各種需求，交互模板包含的模塊較多，所以顯得有些複雜。真實情況中，大家是按需擇用，多數交互稿會比上圖簡單些。我們可以把交互文檔簡單分為文檔框架、項目背景、設計分析、設計方案4大部分，我們分別來介紹一下。
文檔框架主要包含5類信息：業務logo或名稱+需求名稱+設計相關方+修訂記錄+版權信息。
跨業務協作時，方便其他項目成員一目了然確認是否是目標文檔。 在業務正確的前提下，方便項目成員快速確認是否是對應的目標文檔。 複雜需求建議顯示修訂記錄，方便項目成員及時跟進最新變更，簡單需求省略。 彰顯設計團隊品牌及理念，也時刻提醒設計師的設計價值觀。在交互設計文檔中展示項目背景，一方面是督促設計師在設計之前，和上游產品/運營/商務同學充分溝通，理解需求背景、產品目標以及目標用戶，方便後續設計決策，另一方面也是為直接用戶服務，有利於下游同學理解我們交互設計的背景和目標。
理解需求是設計師前期最重要的事，包括需求的來源、背景、業務價值、商業價值和用戶價值，只有這步做到位了，後面的設計分析才不會出現偏差。 新功能或者重大功能改版時，需要根據目標用戶的特徵重新思考設計框架，所以需要目標用戶的描述。日常小功能迭代，目標用戶無變化，則可以省略。設計分析一方面可以幫助我們理清設計思路，做出更合理的設計方案，另一方面也可以幫助提升設計文檔的專業性和說服力。設計分析一般包含4類信息：數據分析，用研支撐，競品分析，設計目標/策略及衡量指標。 用戶展示當前設計的數據現況，通過競品對比/歷史對比/分維對比等方式，發現並展示可以優化的機會點。比如我們的轉化率10%，競品30%，有較大的提升空間。
從用戶研究中發現的可以指導設計優化的用戶洞察。比如掃一掃在用戶搜索方式占比中達到了45%，所以我們有必要接入掃一掃功能。
如果競品中有值得參考借鑑的設計點，則需要把競品分析頁面和結論放進來，方便大家評估競品的合理性，以及借鑑到本業務的合理性。
根據前面所有信息推導出來的設計分析結論及衡量指標，為接下來的方案設計指明方向。設計方案是內外部用戶最為關注的核心產出，主要包含3類信息：產品信息架構、任務流程圖、交互流程及交互細節描述。 從0到1做一個產品和功能時，建議繪製，方便自己和他人全覽所有功能、內容，並理解它們之間的關係。可以從腦圖中導入，也可以在原型文件中繪製。
涉及到3個及以上的交互觸點或分支邏輯時，建議繪製，方便大家了解任務的複雜度，跳轉邏輯，頁面關係，也能幫助自己梳理場景邏輯，避免遺漏。
這是文檔核心的核心，文檔結構按照先整體後局部的4步方式進行呈現。 第一步，如果涉及到任務鏈路的，先把主鏈路流程繪製出來，讓大家可以知道核心的任務路徑及頁面的之間的跳轉關係。如果分支鏈路只有1~2條，可以直接在主鏈路上延伸，如果分支鏈路較多，則單獨編號繪製。
第二步，如果涉及到重要頁面重構的，需要把頁面的信息框架描述清楚，定義好每個模塊的定位及內容。
第三步，如果涉及到一個頁面多個狀態的，需要把多個狀態全部羅列出來。
第四步，對於普通頁面，或者頁面模塊，或者模塊內細節優化的，則直接在旁邊描述交互細節即可。
好了，如何輸出一份專業的交互設計文檔就介紹到這裡了，如果你對任意模塊的撰寫有疑問，請加悅姐微信yuechats，加入悅姐交互小課堂，聽悅姐為你詳細拆解~下節課，我們將開始正式進入交互設計的專業課程：
交互設計 · 第 5 講預告
👉 交互設計師的設計觀👈
作為交互設計師，我們應該具備哪些頂層的設計觀，指引我們設計的方向呢？悅姐將在下堂課為你揭曉，歡迎持續關注👀
🎉🎉🎉
悅姐最近新組建了【交互小課堂】
每周日晚8:00，騰訊會議開講文章拓展知識，並免費解答大家的交互設計疑問。
系列課程20堂+，幫助大家交互設計從入門到專業。
前100名限時特價199元加入，101~200名限時定價299元。
有需要的小夥伴請添加悅姐微信yuechats，備註【交互小課堂】
我是悅姐，一個愛學習和分享的設計專家~
歡迎關注，2022年和悅姐一起交互進階~
留言列表