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

關(guān)鍵詞：Prototype 交互原型 高效性 同理心 代入感 全局觀 合理化 指導(dǎo)性 及時性 同步化 舞臺感

　　做交互原型的工具越來越多了，已經(jīng)由當年的僧多粥少變成了現(xiàn)在的眼花繚亂。

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

　　為什么我們要做原型 ？

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

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

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

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

　　1. 設(shè)計調(diào)研階段

　　關(guān)鍵詞：高效性，同理心，代入感

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

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

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

　　2. 分析階段

　　關(guān)鍵詞：全局觀，合理化，指導(dǎo)性

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

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

　　最后與客戶一起整理出理想的信息架構(gòu)雛形：

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

　　3. 創(chuàng)造階段

　　關(guān)鍵詞：激發(fā)性，迭代化，系統(tǒng)化

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

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

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

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

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

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

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

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

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

　　在進行網(wǎng)頁設(shè)計的項目時，我們還要考慮界面在不同尺寸屏幕上的表現(xiàn)，這時需要定義界面變化的規(guī)整，附上 Material Design 的 breakpoint 劃分方法：

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

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

　　4. 交流階段

　　關(guān)鍵詞：及時性，同步化，舞臺感

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

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

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

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

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

　　5. 精進階段

　　關(guān)鍵詞：愉悅感，審美感，完成度

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

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

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

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

　　Framer 能夠精確地定義激發(fā)與反饋的行為，是出色的設(shè)計微交互的工具。它也能夠方便地導(dǎo)入 Sketch 源文件，識別出已經(jīng)定義好的圖層：

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

　　6. 測試階段

　　關(guān)鍵詞：目的性，可用性，互動性

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

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

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

　　原文轉(zhuǎn)載：frog 交互設(shè)計師肖又歌（ID:frog_China)

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

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