起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識IBM高級設計師分享：你真的懂如何做原型設計嗎？
工作中常常出現這種情況：你花了無數個小時構思、設計理論模型，到了投入生產才發現完全忘記放上標識了。事實上，我們太容易陷入一個完美的產品快照中。為了提升你的設計能力，你需要專注于交互設計，通過原型設計可以幫助你實現這一目標。
原型設計是一個迭代過程，它讓你能夠對設計進行評估和測試。在過去的幾年里，針對每種場合和每個細節層次，我都會創建它們的原型?；仡櫸业脑O計過程，我發現：
- 原型為我提供了相當豐富的反饋
- 原型幫助我向利益相關者闡明我的想法和概念
- 原型節省了我的工作成本和時間
- 原型讓我成為一個更好更周全的、會講故事的用戶體驗設計師
在這篇文章中，我將向你介紹如何選擇正確的原型制作工具、讓你的原型更有真實感的技巧和竅門以及設計原型之前需要考慮的問題，幫助你的設計更上一層樓。
一、找到合適的工具：如何評估現有的工具
在比較原型設計工具時，我們常常會面臨一個選擇的困境：許多工具提供的功能和價格都是類似的，讓人難以做出選擇。我個人偏好的工具是 Flinto，由于軟件的速度和細節優勢，我用它來設計大部分的原型。不過保持靈活性也很重要：在某些情況下，我會改用像 HTML/CSS/JS 這樣的代碼編輯器來完成工作。
最后，你要選擇能使你的工作變得簡單高效的設計工具。請記住，我們要能夠根據項目、團隊和需求改變使用的工具。
在評估哪種工具最適合你時，請考慮以下事項：
1. 細節和自定義
選擇一個支持自定義過渡和多種手勢的工具，以滿足項目所需要的精細程度。
2. 選擇學習曲線
你最不想看到的事肯定是在實際設計之前必須從頭學習一個全新的工具。
因此，我建議你選擇一個學習曲線比較平緩的工具。
不管選擇哪種工具，它要能讓你應用于原型設計過程，并且使你專注于自己的時間和想法，而不是學習軟件本身。
3. 團隊協同
強烈建議你和同事使用相同的工具。
就像你可能會分享 Sketch 或 Illustrator 設計文件一樣，你也可以分享你的原型、重新調整素材和深入學習其他人是如何構建特定的交互設計的。
盡管還要考慮一些其他的因素（例如，易于共享和輸出代碼），但上述要點是在你決定使用哪種原型制作工具時一個很好的思考起點。
請記?。汗ぞ卟皇侵攸c，重點是工具賦予你的創造力。
二、超越設計保真度：如何讓原型真實感更強
當你在進行原型設計的時候，你可以使用一些技巧使你的原型真實感更強。
為什么真實感很重要呢？
因為如果一個原型讓人感覺真實，你收到的反饋也會更具有建設性，在上交給開發團隊之前你也可以更有效地迭代它。
典型的經驗法則告訴我們：設計保真度越高越好。不僅設計保真度本身很重要，而且交互的保真度還可以轉化為產品的可用性。
你可以從以下幾個原則來考慮整個用戶體驗，使你的原型脫穎而出：
1. 元素狀態
元素的狀態包括聚焦、活動和懸停。
出于某種原因，許多設計師會忽略這些——盡管它們只是交互設計的基本部分。
如果在用戶測試中，用戶表示找不到該點擊哪里或者不清楚怎么導航，這就是你的設計不包含元素狀態所導致的結果。
一個最佳的原型設計實踐要從構建組件狀態開始。它能告訴用戶有哪些可交互的內容，并為你提供更豐富的反饋。
懸停是桌面產品需要考慮的一個重要手勢，懸停效果有助于指示或強調用戶即將采取的操作。
我們以垃圾桶為例：
- 圖 1 將垃圾桶的的顏色改為紅色，表明這可能是一個危險的操作
- 圖 2 包括了一個工具提示，用于指示將要執行的操作
- 圖 3 更有趣，它使用圖標本身來說明你將要采取的操作
雖然這些只是微交互，但構建一致的懸停效果能使你的用戶獲得可預測的體驗和交互模式。
按/點擊/敲擊手勢也很重要，因為它為你剛剛進行的操作提供了視覺反饋。
如果用戶在點擊時沒有觀察到狀態變化，他們會疑惑自己剛剛是否完成了那項操作。這一點對移動設備端尤為重要，因為移動端不可能存在懸停的狀態。而在電腦桌面上，點擊手勢會觸發一個活動狀態。
讓我們一起看看這個例子（盡管有些夸張）：
點擊手勢能清楚顯示出操作已經完成，避免用戶產生困惑。除了敲擊，我們還可以給屏幕之間的切換增添滑動手勢。
滑動手勢在 iOS 和安卓操作系統中已經非常普及了，是用戶很熟悉的一種導航模式，因此在移動端做 UI 交互時也可以加入滑動手勢。
2. 過渡！過渡！過渡！
你是如何從一個頁面切換到另一個頁面的？
頁面間的過渡是一種能提供信息的手勢。
通過過渡動作往頁面中增加或者去除元素，你可以幫助用戶注意到頁面內容的變化，同時你也能依靠固定元素來錨定 UI。
- 圖 1：左推，iOS 系統中一個創造性的過渡手勢，可以在屏幕間滑動。這種方式在許多軟件包中很常見，但如果頁面間只有簡單的布局差異，使用這種方式過渡可能會對用戶產生干擾。
- 圖 2：沒有過渡，如果改變的元素比較少，使用直接切換的方式是很有效果的。
- 圖 3：自定義轉換，這樣可以弱化屏幕切換帶來的割裂感，還可以提示用戶有哪些信息改變了。
3. 讓用戶自己探索
對用戶而言，沒有什么比用戶自己對全局的控制感更真實的了。這就意味著有時候必須讓用戶自己探索甚至稍稍出一點錯。這是了解用戶如何自然地導航和如何學習使用 App 的一個好方法。
你可以通過為相同操作提供幾種不同的操作方法來確定哪種該作為主要方法，從而成功實現這一目標。
思考這個目錄列表的用例：
可以通過溢出菜單快速訪問操作
操作欄里對象的單個或批量操作
查看對象的其他詳細信息并提供相同的操作
4. （不要）滿足用戶期望
如果下載、上傳或搜索需要較長的等待時間怎么辦？
在屏幕上添加帶有計時的動畫效果，讓用戶做好等待的心理準備。用戶在使用流程中遇到錯誤是一個引導和糾正的好機會。
系統并不能做到完美，我們最好要了解如何才能幫助用戶成功，而不是僅僅在原型中提供一個順暢的路徑。問問你自己，怎樣能讓產品中有一些無傷大雅的小錯誤？
語音驗證就是一個很好的例子。
在設計原型時，我會故意放入一條提示錯誤的消息，讓用戶知道他們的聲音太小了。這樣我就能夠估量用戶對于系統表現不完美的反應，以此來調整消息和操作，最后取得成功。
5. 在目標媒介上查看
想要制作一個移動應用程序？
請把你的原型搬到真機上試一試。
你的目標媒介可能有自己的一套模式，你要留意這一點。如果原型沒有經過適當的測試，你可能會錯過一些有助于改善用戶體驗的數據。
手機就是一個很好的例子：在真機上的測試可以向你揭露一些人體工學上的用戶體驗問題（例如：用戶需要伸手去夠一個按鍵）
6. 創造力和真實感
充分發揮你所使用的工具的功能。運用視頻支持、創建 gif 動畫或者截屏，幫助模擬用戶界面。
一個讓用戶信以為真的原型能給他們留下深刻的印象。我們也知道，一點點“小伎倆”有時能帶來最好的效果。
三、在設計之前：根據受眾范圍設計需要的內容
既然你已經掌握了設計工具并了解如何設計出最好的產品原型，是時候開始考慮受眾問題了。問問你自己：這個原型是用來展示、交接還是用戶測試？你要記住：你做出來的原型不需要同時滿足所有人的要求。
原型設計與UX 框架結構保持一致，便于管理
除了與團隊保持一致以外，為了更好地確定你需要制作的內容，你要考慮以下幾種情況：
1. 通過視頻會議軟件展示你的原型
大多數視頻會議軟件在共享屏幕時都會有一點延遲，而且每個會議的幀速率也不盡相同，你要預想到你很大一部分的操作會被跳過或者丟失。
2. 與開發團隊共享
如果你要向開發團隊提供原型來傳達交互模式，那就把它做成較小的插圖。
專業提示：試著提取出動作的實際值，如持續時間、延遲、曲線等。
為了把所有的小插圖連接在一起，我喜歡用一個 IA 圖或者高級別的體驗地圖，這樣就能用作快速參考指南。（見下圖）
流程圖示例
通過簡單地表達屏幕的意圖和用戶動作，你就能讓開發人員高度關注動作的細節，同時也能了解動作實施的背景情況。
在此例中，內容和視覺保真度較低，因此我們可以清楚地展示批量操作欄和詳細信息面板的交互模式。
3. 用戶測試
這是你最希望原型盡可能接近真實的時候了。
在原型中，你不一定要讓操作按照步驟執行，而要給訪問的用戶提供多條路徑。不要強迫用戶一直沿著正確的路徑操作，相反地，你要讓用戶從與產品的互動中自己去領悟。
如果你采用的是遠程用戶測試，請確保原型的程序能夠輕松地被分享。
在這種情況下，InVision 是一個不錯的選擇，它擁有強大的共享功能。雖然 InVision 不支持你在轉換中自己選擇想要的自定義級別，但你可以輕松地通過創建基本元素狀態和屏幕間的鏈接來幫助用戶在原型中移動。
要點總結
- 選擇制作工具時不要太死板。任何工具都能做出你想要的原型，但也不要害怕在某一個高質量工具中投入太多。
- 運用一些技巧使你的原型感覺更真實。
- 原型是你的擴展團隊（即利益相關者、開發團隊、研究團隊等）的最佳資源之一。
- 通過強迫自己考慮整個設計過程，原型設計會幫助你成為一個更周全的設計師。
作者：即能，公眾號：「即能學習」
本文由 @?即能 原創發布于人人都是產品經理。未經許可，禁止轉載。
題圖來自 Unsplash，基于 CC0 協議。
不錯，看到里面提到的設計雖然很微妙，但很驚艷