編者按：完整的 UI 設計流程到底是怎樣的？從需求到產品上線，要經歷多少個階段，每個階段有哪些應該掌握的基礎知識，本次優設獨家專題為你從零開始梳理出 UI 工作流程，適合新手閱讀學習。
本篇為工作流程第二節：原型設計。上期回顧：《超全面的 UI 設計工作流程指南（一）：需求分析》
原型設計的主要作用，是用戶體驗設計師與 PM、網站開發工程師溝通最初的產品設想的重要工具，展示產品內容和結構及粗略的布局，說明用戶將如何與產品進行交互，而不是視覺設計。
在大廠中，職位分工更為細致明確，大多原型都是由產品經理制作的，而中小企業里，更多的是設計師也要具備制作原型的能力。原型圖階段中設計師需要和產品經理溝通需求，并不是產品經理向設計師下發需求，而是需要相互就自己擅長的方面進行溝通。
設計時原型的類別也需要關注，每個項目啟動時對原型的需求不一定都相同，交流的對象也有可能會對原型的類別產生混淆，以為線框圖（Wireframe）、原型（Prototype）和視覺稿（Mockup）是一個東西，設計開始前最好先與產品經理/甲方確認要繪制什么類型的原型。
三種類別雖然產出效果不同，但在本質上都是一樣的，為設計開發服務，所以在產品研發時，并沒有硬性規定一定先產出哪一個類別的原型圖，一切以實際研發過程中的要求為準。
交互設計作為原型設計里的重要環節，了解交互設計原則，給交互設計提供更多設計支持。
1. Fitts’ Law / 菲茨定律（費茨法則）
目標離的越遠，到達就越是費勁。目標越小，就越難點中。如果我們要想鼠標比較快速地命中目標可以采取兩個措施，要么減少鼠標與目標之間的距離，要么使目標足夠大。
2. Hick’s Law / 席克定律（希克法則）
一個人面臨的選擇越多，所需要作出決定的時間就越長。在人機交互中界面中選項越多，意味著用戶做出決定的時間越長。
3. 神奇數字7±2法則
人類頭腦最好的狀態能記憶含有7（±2）項信息塊，在記憶了 5-9 項信息后就開始出錯。與席克定律類似，神奇數字 7±2 法則也經常被應用在移動應用交互設計上，如應用的選項卡不會超過 5 個。
4. The Law Of Proximity 接近法則
根據格式塔（Gestalt）心理學：當對象離得太近的時候，意識會認為它們是相關的。在交互設計中表現為一個提交按鈕會緊挨著一個文本框，因此當相互靠近的功能塊是不相關的話，就說明交互設計可能是有問題的。
5. Tesler’s Law 泰思勒定律（復雜性守恒定律）
該定律認為每一個過程都有其固有的復雜性，存在一個臨界點，超過了這個點過程就不能再簡化了，你只能將固有的復雜性從一個地方移動到另外一個地方。如對于郵箱的設計，收件人地址是不能再簡化的，而對于發件人卻可以通過客戶端的集成來轉移它的復雜性。
6. 新鄉重夫：防錯原則
防錯原則認為大部分的意外都是由設計的疏忽，而不是人為操作疏忽。通過改變設計可以把過失降到最低。該原則最初是用于工業管理的，如在硬件設計上的 USB 插槽。而在界面交互設計中也是可以經常看到，如當使用條件沒有滿足時，常常通過使功能失效來表示（一般按鈕會變為灰色無法點擊），以避免誤按。
7. Occam’s Razor 奧卡姆剃刀原理（簡單有效原理）
這個原理被稱為「如無必要，勿增實體」，即如有兩個功能相等的設計，那么選擇最簡單的。
8. Steering Law 轉向定律
觸控技術（Touch）應用：
- 0° 方向是最利于操作者移動的方向，具有較好的視覺反饋，成功率相對最高；
- 120° 方向用戶在操作時最為困難，在用戶界面交互設計中應盡少使用；
- 用戶手指在各個方向的運動中，寬度低于 14 像素的 Touch 是用戶體驗最差的。
9. 帕累托定律（80/20原則）
任何大系統中，大部分的效果僅有少數幾項變量決定。用戶 80% 的時間花在了 20% 的功能上。
其實交互定律看起來有點枯燥，生搬硬套其實并不一定能套上去，列舉以上的設計原則更多的是為設計做參考，結合設計原則，是提升設計說服力的有效方法。
更多詳細的設計法則和完整案例請查看優設專題 → 《19條經典理論讓你的設計更有說服力！》
一套完整且專業的原型圖，除了按照需求文檔設計出所有頁面，串聯頁面以外，還包括一些讓人容易疏忽的地方，因為原型圖所交付的并不只有需求方，還有設計師與開發人員。
1. 原型圖標注，畫開發看得懂的圖
原型圖對于設計師來說，是為了查看產品功能頁面與邏輯路徑。對于開發人員來說，除了產品框架搭建，他們最關心的內容是產品使用中的邊界條件、頁面跳轉關系。原型設計時需要畫出功能的所有交互狀態，因此原型圖標注包括：定義好每個標注點的含義和事件，梳理所有對象和邏輯關系，狀態、模塊化區分和標記。
定義好每個標注點的含義和事件
在做交互稿標記之前，定義規范好每個標記的含義，形成統一的規范，使得團隊成員易于理解。如，用水滴表示標注的功能，用圓圈+箭頭的形式來標識頁面跳轉關系。
梳理所有對象和邏輯關系、狀態
下面的原型圖標注以餓了么商家詳情頁結算訂單為例，先用思維腦圖梳理功能狀態，這樣能避免遺漏一些邊界條件。
模塊化區分和標記
梳理好狀態后再在原型圖上寫產品用例，每個功能做成一個模塊，有利于往后的維護和迭代。
2. 在同一個頁面展示所有的交互狀態
當項目開始一段時間后，原型里的標注會逐漸變多，很多的開發和設計，沒有耐心看原型圖上的各種標注，所以盡量能一個頁面上顯示出所有的交互狀態，避免設計與開發時看漏。
3. 流程圖，梳理業務邏輯關系
用流程圖梳理產品業務的邏輯關系，常用的流程圖分為單向流程圖和泳道圖（涉及到多個角色）。
單向流程圖一般描述單一角色完成某個任務的整體過程，如登錄注冊過程、支付流程、填寫資料等。
繪制流程圖需要注意以下幾點：
- 確保產品流程的合理性；
- 有效傳達需求；
- 檢驗異常分支。
以上簡單的梳理了一下日常工作設計原型圖中容易讓人忽略的內容。
想要設計繪制更專業的原型圖，可參閱這兩篇文章：
4. 關于原型工具
Axure
很有名的原型設計工具，也算是日常工作中最常用的原型工具，成名很早，很多設計師、產品經理都有用它。它除了能夠高效率制作產品原型，快速繪制線框圖、流程圖、網站架構圖、示意圖、HTML 模板外，還支持 java script 交互的實現，并生成 Web 格式上傳到 Axure share 分享瀏覽。
當然，目前市面上有很多種原型工具，例如墨刀、摩客、ProtoPie?等，都適合用于原型交互設計。當然選擇哪個工具要看你自己，你的需求是什么，最適合自己工作流程的工具是哪種，有沒有電腦系統的要求等等。
5. 推薦設計應用Figma
Figma 是一個完全免費的在線設計軟件，支持 Windows 和 macOS 等多個平臺，是可以讓整個團隊的成員同時查看并修改協作的平臺。使用過 Sketch后，上手 Figma 幾乎沒有難度。
原型設計
在 figma 里面，你可以無縫完成從設計到原型演示的切換，不需要反復同步設計圖到第三方平臺，并且可以利用 Figma Mirror 在手機上預覽效果。單擊播放圖標將進入演示模式，可以在其中實時查看已完成的原型。
實時協作+內置評論
在 Figma 里，設計和協作可以是同時進行的，任何人都可以在設計圖的任何地方添加評論，你可以在評論中@其他人或將評論標記為已解決。
更多關于 Figma 的評測參考：
- 《Figma 3.0 版本重磅發布！為你揭秘這款2018年最值得體驗的設計軟件！》
- 《從 Sketch 遷移到 Figma 半年后：以為是個青銅結果是個王者？！》
- 《想取代 Sketch 的 Figma 好不好用？我花了一年時間給你答案！》
注：本系列文章為優設獨家專題，請勿轉載。
歡迎添加作者微信交流：
復制本文鏈接 文章為作者獨立觀點不代表優設網立場，未經允許不得轉載。
發評論！每天贏獎品
點擊 登錄 后，在評論區留言，系統會隨機派送獎品
2012年成立至今，是國內備受歡迎的設計師平臺，提供獎品贊助 聯系我們
標志設計標準教程
已累計誕生 729 位幸運星
發表評論 為下方 5 條評論點贊，解鎖好運彩蛋
↓ 下方為您推薦了一些精彩有趣的文章熱評 ↓