牛先生（MR.New）微信號：mrnewchina，專注全球市場研究創新方法、行業趨勢，發布最前沿的消費者洞察、創新案例與深度訪談。

關鍵詞：Prototype 交互原型 高效性 同理心 代入感 全局觀 合理化 指導性 及時性 同步化 舞臺感

　　做交互原型的工具越來越多了，已經由當年的僧多粥少變成了現在的眼花繚亂。

　　選擇工具之前，首先需要知道制作 prototype（設計原型）的目的是什么，然后再選擇合適的方法和工具。

　　為什么我們要做原型 ？

對于設計師，它可以幫助我們整理設計思路，推敲概念；

對于工作團隊，它可以用來交流，陳述方案，收集不同團隊成員對于設計的反饋，提高團隊協作效率；

對于用戶，它可以幫助用戶更容易地理解設計方案，有效地采集洞察，收集反饋，迭代方案；

　　交互原型的使用貫穿整個設計流程：

　　1. 設計調研階段

　　關鍵詞：高效性，同理心，代入感

　　在調研階段，我們可以制作一些簡單的原型讓用戶理解我們在做什么，激發用戶的同理心，實現對用戶現有使用行為的還原，以及與用戶 co-creation（共同創造），從而達到研究的目標。

　　在以下的案例中，設計師需要為老年人看護員設計一款軟件，但是設計師對于這個工作并不是很了解，所以在這里我們快速地制作了相關人物，地點和事件的紙質模型：

　　以及結合紙質的界面模型去與我們的最終用戶——老人看護員進行頭腦風暴，讓他們能夠更加具象地表達現有的工作流程與思考這款新軟件的功能。紙質模型能夠幫助終端用戶更具象地思考與表達，讓設計師能夠快速獲得同理心，發掘現存的痛點與設計的機會點。

　　2. 分析階段

　　關鍵詞：全局觀，合理化，指導性

　　在交互設計項目中，這個階段需要分析調研結果，并制作信息架構、交互模型以及流程線框圖來梳理產品的結構，分析現有產品的不足，并與客戶一起快速地改進，做出新的信息架構雛形，引導下一步的操作。

　　在整理現有的信息架構時，我們可以把每一個頁面的信息寫到一張小卡片上，然后再打亂他們，與客戶一起去重新排序，過濾掉不必要的頁面，整合近似的頁面：

　　最后與客戶一起整理出理想的信息架構雛形：

　　在項目過程中還需要不斷完善和修改信息架構，用于指導下一步的交互模型和流程線框圖的制作。

　　3. 創造階段

　　關鍵詞：激發性，迭代化，系統化

　　無論是產品設計、服務設計還是交互設計，頭腦風暴都是在創造階段非常重要的環節。一些有趣的工具能夠幫助我們在頭腦風暴中快速地制作。比如用樂高制作模型，搭建場景，既有玩玩具的愉悅感，也能幫助設計師進入場景，思考用戶的使用流程，激發靈感：

　　除了樂高以外，我們還可以收集身邊能找到的各種工具，通過不同材質和形態的碰撞激發靈感：

　　在研究物理空間與虛擬空間的連接與互動時，Arduino 也是一款對設計師非常友好的工具：

　　在界面交互設計項目中，我們會制作大量的 wireframes（線框圖）去展示產品的雛形，用線框圖制作的原型也幾乎是每個項目必備的環節。基于定義好的信息架構，我們從 low fidelity（低保真度）的線框圖開始，定義頁面的數量、邏輯，內容和框架結構。這個時候我們可以用與屏幕相同尺寸的紙，筆去畫一些草稿，做一些快速的迭代，理清頁面的交互行為與邏輯：

　　在線框圖的邏輯梳理清楚之后，就要推薦系統性，操作性都很強的 Sketch 作為制作 high fidelity（高保真度）線框圖的工具了。這個時候，我們需要有系統性的思維，確保線框圖能夠順利地向 UI 和開發過渡。Sketch 可以幫助我們快速建立一個設計語言系統，無論是在做線框圖還是 UI 設計，都非常實用。

　　用 Sketch 建立 Document Colors（顏色庫）：

　　用 Sketch 建立 Text Style（文本樣式）：

　　在制作 symbol（界面元素）時，Sketch 有一個非常贊的 override 功能，比如可以保留一個按鍵的樣式，但是改變按鍵里的文字內容：

　　一個完整的命名系統也很重要。如果我們把 Sketch 源文件用 InVision Sync 同步到 InVision 的網頁端，可以通過文件名能夠更加高效地找到相對應的頁面進行編輯：

　　在進行網頁設計的項目時，我們還要考慮界面在不同尺寸屏幕上的表現，這時需要定義界面變化的規整，附上 Material Design 的 breakpoint 劃分方法：

　　在制作線框流程圖的時候，也可以考慮 Axure，這是款制作線框圖的資深軟件，功能非常強大，能夠完成復雜的交互邏輯，只是操作比較死板，界面不是很人性化，與 Sketch 這類的新工具也不是能夠很好地結合起來使用：

　　Flinto 是另外一款能夠與 Sketch 良好結合的工具，在做對于流程圖的可視化，交互效果的定制化都有較好的表現，感興趣的朋友可以試試：

　　4. 交流階段

　　關鍵詞：及時性，同步化，舞臺感

　　對于設計概念的交流會發生在項目的各個時期，在運用原型交流設計方案時，需要保證項目相關成員能夠及時地給予反饋。InVision 可以幫助我們做到與團隊的實時交流，包括直接在界面上留言與回復，并且能夠很方便地管理不同的項目，對于在異地工作的團隊來講非常有效：

　　但在團隊協作時，要慎用 InVision Sync 同步 Sketch 源文件。在網絡不好的狀況下會出現同步延遲，你的舊版本 Sketch 文件有可能會覆蓋其他人上傳的新版本。

　　Figma 是第一款可以允許多人同時在線設計界面的工具，也可以導入 Sketch 文件，如果穩定性夠好的話，會解決很多團隊合作與交流的痛點，很有潛力：

　　在交流階段，還需要把設計概念的閃光點展示給別人，所以我們制作的原型還要有舞臺感。在產品設計項目中，我們會制作 1 比 1 的模型：

　　在界面設計中，我們會通過 Keynote、After Effects 等工具去模擬界面交互的動效，去展示設計的最終效果：

　　5. 精進階段

　　關鍵詞：愉悅感，審美感，完成度

　　不斷完善設計，也是設計師的樂趣所在。在精進階段，我們要完善整個設計，給用戶帶去更多的愉悅，也為世界增添一點美。以下三點在精進階段值得注意：

　　a. 文本內容：通常是我們做 prototype 時容易忽略的一塊，但其實是非常重要的一個環節，文字內容要做到簡明扼要，并且親切友好；

　　b. 轉場效果：轉場效果可以不用很華麗，但是一定要有意義，要去引導用戶理解界面的邏輯，從而更加容易地去完成操作；

　　c. Micro Interaction（微交互）: 在用戶與界面的交互過程中，如何激發（點擊，滑動或者語音？），如何反饋（動畫，聲音，震動，還是燈光？），甚至藏在界面中的彩蛋，都是需要設計師去反復琢磨的；

　　Framer 能夠精確地定義激發與反饋的行為，是出色的設計微交互的工具。它也能夠方便地導入 Sketch 源文件，識別出已經定義好的圖層：

　　Framer 的缺點就是很難管理大量的線框流程圖，而且需要學習不是所有設計師都感興趣的程序語言。Origami Studio 在不需要程序語言的情況下，對于微交互也有非常好的掌控性，如果對編程不感興趣的朋友可以嘗試一下：

　　6. 測試階段

　　關鍵詞：目的性，可用性，互動性

　　在測試階段，設計師首先要知道測試的目的是什么，并不是界面完成度越高，測試效果越好，如果要測試整個交互的邏輯，黑白的線框圖反而能讓用戶更加地專注于操作的邏輯，也會更輕松地表達自己的看法：

　　在有的項目中甚至可以把整個 context（用戶環境）都做成一個原型，讓用戶有一個加沉浸式的體驗：

　　從項目一開始，到產品真正上線前，我們都在不斷地做原型，還是像文章剛開始說的那樣，我們要先明白做原型的目的，以及項目所處的階段，再選擇合適的工具。

　　原文轉載：frog 交互設計師肖又歌（ID:frog_China)

　　轉載原文版權歸frog公眾號所有。我們尊重版權，除非確實無法確認，都會注明作者和來源。部分文章推送時未能與原作者取得聯系，十分抱歉。如有標注來源錯誤，煩請聯系我們協商解決，直接在本微信號后臺留言即可。

如需轉載請與牛先生聯系，或注明來源于牛先生微信公眾號（ID：mrnewchina）