編者按：完整的 UI 設(shè)計(jì)流程到底是怎樣的？從需求到產(chǎn)品上線，要經(jīng)歷多少個(gè)階段，每個(gè)階段有哪些應(yīng)該掌握的基礎(chǔ)知識，本次優(yōu)設(shè)獨(dú)家專題為你從零開始梳理出 UI 工作流程，適合新手閱讀學(xué)習(xí)。

本篇為工作流程第二節(jié)：原型設(shè)計(jì)。上期回顧：《超全面的 UI 設(shè)計(jì)工作流程指南（一）：需求分析》

原型設(shè)計(jì)的主要作用，是用戶體驗(yàn)設(shè)計(jì)師與 PM、網(wǎng)站開發(fā)工程師溝通最初的產(chǎn)品設(shè)想的重要工具，展示產(chǎn)品內(nèi)容和結(jié)構(gòu)及粗略的布局，說明用戶將如何與產(chǎn)品進(jìn)行交互，而不是視覺設(shè)計(jì)。

在大廠中，職位分工更為細(xì)致明確，大多原型都是由產(chǎn)品經(jīng)理制作的，而中小企業(yè)里，更多的是設(shè)計(jì)師也要具備制作原型的能力。原型圖階段中設(shè)計(jì)師需要和產(chǎn)品經(jīng)理溝通需求，并不是產(chǎn)品經(jīng)理向設(shè)計(jì)師下發(fā)需求，而是需要相互就自己擅長的方面進(jìn)行溝通。

原型類型區(qū)別

設(shè)計(jì)時(shí)原型的類別也需要關(guān)注，每個(gè)項(xiàng)目啟動時(shí)對原型的需求不一定都相同，交流的對象也有可能會對原型的類別產(chǎn)生混淆，以為線框圖（Wireframe）、原型（Prototype）和視覺稿（Mockup）是一個(gè)東西，設(shè)計(jì)開始前最好先與產(chǎn)品經(jīng)理/甲方確認(rèn)要繪制什么類型的原型。

三種類別雖然產(chǎn)出效果不同，但在本質(zhì)上都是一樣的，為設(shè)計(jì)開發(fā)服務(wù)，所以在產(chǎn)品研發(fā)時(shí)，并沒有硬性規(guī)定一定先產(chǎn)出哪一個(gè)類別的原型圖，一切以實(shí)際研發(fā)過程中的要求為準(zhǔn)。

交互設(shè)計(jì)原則

交互設(shè)計(jì)作為原型設(shè)計(jì)里的重要環(huán)節(jié)，了解交互設(shè)計(jì)原則，給交互設(shè)計(jì)提供更多設(shè)計(jì)支持。

1. Fitts’ Law / 菲茨定律（費(fèi)茨法則）

目標(biāo)離的越遠(yuǎn)，到達(dá)就越是費(fèi)勁。目標(biāo)越小，就越難點(diǎn)中。如果我們要想鼠標(biāo)比較快速地命中目標(biāo)可以采取兩個(gè)措施，要么減少鼠標(biāo)與目標(biāo)之間的距離，要么使目標(biāo)足夠大。

2. Hick’s Law / 席克定律（希克法則）

一個(gè)人面臨的選擇越多，所需要作出決定的時(shí)間就越長。在人機(jī)交互中界面中選項(xiàng)越多，意味著用戶做出決定的時(shí)間越長。

3. 神奇數(shù)字7±2法則

人類頭腦最好的狀態(tài)能記憶含有7（±2）項(xiàng)信息塊，在記憶了 5-9 項(xiàng)信息后就開始出錯(cuò)。與席克定律類似，神奇數(shù)字 7±2 法則也經(jīng)常被應(yīng)用在移動應(yīng)用交互設(shè)計(jì)上，如應(yīng)用的選項(xiàng)卡不會超過 5 個(gè)。

4. The Law Of Proximity 接近法則

根據(jù)格式塔（Gestalt）心理學(xué)：當(dāng)對象離得太近的時(shí)候，意識會認(rèn)為它們是相關(guān)的。在交互設(shè)計(jì)中表現(xiàn)為一個(gè)提交按鈕會緊挨著一個(gè)文本框，因此當(dāng)相互靠近的功能塊是不相關(guān)的話，就說明交互設(shè)計(jì)可能是有問題的。

5. Tesler’s Law 泰思勒定律（復(fù)雜性守恒定律）

該定律認(rèn)為每一個(gè)過程都有其固有的復(fù)雜性，存在一個(gè)臨界點(diǎn)，超過了這個(gè)點(diǎn)過程就不能再簡化了，你只能將固有的復(fù)雜性從一個(gè)地方移動到另外一個(gè)地方。如對于郵箱的設(shè)計(jì)，收件人地址是不能再簡化的，而對于發(fā)件人卻可以通過客戶端的集成來轉(zhuǎn)移它的復(fù)雜性。

6. 新鄉(xiāng)重夫：防錯(cuò)原則

防錯(cuò)原則認(rèn)為大部分的意外都是由設(shè)計(jì)的疏忽，而不是人為操作疏忽。通過改變設(shè)計(jì)可以把過失降到最低。該原則最初是用于工業(yè)管理的，如在硬件設(shè)計(jì)上的 USB 插槽。而在界面交互設(shè)計(jì)中也是可以經(jīng)常看到，如當(dāng)使用條件沒有滿足時(shí)，常常通過使功能失效來表示（一般按鈕會變?yōu)榛疑珶o法點(diǎn)擊），以避免誤按。

7. Occam’s Razor 奧卡姆剃刀原理（簡單有效原理）

這個(gè)原理被稱為「如無必要，勿增實(shí)體」，即如有兩個(gè)功能相等的設(shè)計(jì)，那么選擇最簡單的。

8. Steering Law 轉(zhuǎn)向定律

觸控技術(shù)（Touch）應(yīng)用：

• 0° 方向是最利于操作者移動的方向，具有較好的視覺反饋，成功率相對最高；
• 120° 方向用戶在操作時(shí)最為困難，在用戶界面交互設(shè)計(jì)中應(yīng)盡少使用；
• 用戶手指在各個(gè)方向的運(yùn)動中，寬度低于 14 像素的 Touch 是用戶體驗(yàn)最差的。

9. 帕累托定律（80/20原則）

任何大系統(tǒng)中，大部分的效果僅有少數(shù)幾項(xiàng)變量決定。用戶 80% 的時(shí)間花在了 20% 的功能上。

其實(shí)交互定律看起來有點(diǎn)枯燥，生搬硬套其實(shí)并不一定能套上去，列舉以上的設(shè)計(jì)原則更多的是為設(shè)計(jì)做參考，結(jié)合設(shè)計(jì)原則，是提升設(shè)計(jì)說服力的有效方法。

更多詳細(xì)的設(shè)計(jì)法則和完整案例請查看優(yōu)設(shè)專題 → 《19條經(jīng)典理論讓你的設(shè)計(jì)更有說服力！》

完整的原型圖

一套完整且專業(yè)的原型圖，除了按照需求文檔設(shè)計(jì)出所有頁面，串聯(lián)頁面以外，還包括一些讓人容易疏忽的地方，因?yàn)樵蛨D所交付的并不只有需求方，還有設(shè)計(jì)師與開發(fā)人員。

1. 原型圖標(biāo)注，畫開發(fā)看得懂的圖

原型圖對于設(shè)計(jì)師來說，是為了查看產(chǎn)品功能頁面與邏輯路徑。對于開發(fā)人員來說，除了產(chǎn)品框架搭建，他們最關(guān)心的內(nèi)容是產(chǎn)品使用中的邊界條件、頁面跳轉(zhuǎn)關(guān)系。原型設(shè)計(jì)時(shí)需要畫出功能的所有交互狀態(tài)，因此原型圖標(biāo)注包括：定義好每個(gè)標(biāo)注點(diǎn)的含義和事件，梳理所有對象和邏輯關(guān)系，狀態(tài)、模塊化區(qū)分和標(biāo)記。

定義好每個(gè)標(biāo)注點(diǎn)的含義和事件

在做交互稿標(biāo)記之前，定義規(guī)范好每個(gè)標(biāo)記的含義，形成統(tǒng)一的規(guī)范，使得團(tuán)隊(duì)成員易于理解。如，用水滴表示標(biāo)注的功能，用圓圈+箭頭的形式來標(biāo)識頁面跳轉(zhuǎn)關(guān)系。

梳理所有對象和邏輯關(guān)系、狀態(tài)

下面的原型圖標(biāo)注以餓了么商家詳情頁結(jié)算訂單為例，先用思維腦圖梳理功能狀態(tài)，這樣能避免遺漏一些邊界條件。

模塊化區(qū)分和標(biāo)記

梳理好狀態(tài)后再在原型圖上寫產(chǎn)品用例，每個(gè)功能做成一個(gè)模塊，有利于往后的維護(hù)和迭代。

2. 在同一個(gè)頁面展示所有的交互狀態(tài)

當(dāng)項(xiàng)目開始一段時(shí)間后，原型里的標(biāo)注會逐漸變多，很多的開發(fā)和設(shè)計(jì)，沒有耐心看原型圖上的各種標(biāo)注，所以盡量能一個(gè)頁面上顯示出所有的交互狀態(tài)，避免設(shè)計(jì)與開發(fā)時(shí)看漏。

3. 流程圖，梳理業(yè)務(wù)邏輯關(guān)系

用流程圖梳理產(chǎn)品業(yè)務(wù)的邏輯關(guān)系，常用的流程圖分為單向流程圖和泳道圖（涉及到多個(gè)角色）。

單向流程圖一般描述單一角色完成某個(gè)任務(wù)的整體過程，如登錄注冊過程、支付流程、填寫資料等。

繪制流程圖需要注意以下幾點(diǎn)：

• 確保產(chǎn)品流程的合理性；
• 有效傳達(dá)需求；
• 檢驗(yàn)異常分支。

以上簡單的梳理了一下日常工作設(shè)計(jì)原型圖中容易讓人忽略的內(nèi)容。

想要設(shè)計(jì)繪制更專業(yè)的原型圖，可參閱這兩篇文章：

• 《超全面總結(jié)！如何畫出專業(yè)的原型圖？（上）》
• 《超全面總結(jié)！如何畫出專業(yè)的原型圖？（下）》

4. 關(guān)于原型工具

Axure

官網(wǎng)鏈接：http://www.axure.com/

很有名的原型設(shè)計(jì)工具，也算是日常工作中最常用的原型工具，成名很早，很多設(shè)計(jì)師、產(chǎn)品經(jīng)理都有用它。它除了能夠高效率制作產(chǎn)品原型，快速繪制線框圖、流程圖、網(wǎng)站架構(gòu)圖、示意圖、HTML 模板外，還支持 java script 交互的實(shí)現(xiàn)，并生成 Web 格式上傳到 Axure share 分享瀏覽。

當(dāng)然，目前市面上有很多種原型工具，例如墨刀、摩客、ProtoPie?等，都適合用于原型交互設(shè)計(jì)。當(dāng)然選擇哪個(gè)工具要看你自己，你的需求是什么，最適合自己工作流程的工具是哪種，有沒有電腦系統(tǒng)的要求等等。

5. 推薦設(shè)計(jì)應(yīng)用Figma

官網(wǎng)鏈接：https://www.figma.com/

Figma 是一個(gè)完全免費(fèi)的在線設(shè)計(jì)軟件，支持 Windows 和 macOS 等多個(gè)平臺，是可以讓整個(gè)團(tuán)隊(duì)的成員同時(shí)查看并修改協(xié)作的平臺。使用過 Sketch后，上手 Figma 幾乎沒有難度。

原型設(shè)計(jì)

在 figma 里面，你可以無縫完成從設(shè)計(jì)到原型演示的切換，不需要反復(fù)同步設(shè)計(jì)圖到第三方平臺，并且可以利用 Figma Mirror 在手機(jī)上預(yù)覽效果。單擊播放圖標(biāo)將進(jìn)入演示模式，可以在其中實(shí)時(shí)查看已完成的原型。

實(shí)時(shí)協(xié)作+內(nèi)置評論

在 Figma 里，設(shè)計(jì)和協(xié)作可以是同時(shí)進(jìn)行的，任何人都可以在設(shè)計(jì)圖的任何地方添加評論，你可以在評論中@其他人或?qū)⒃u論標(biāo)記為已解決。

更多關(guān)于 Figma 的評測參考：

1. 《Figma 3.0 版本重磅發(fā)布！為你揭秘這款2018年最值得體驗(yàn)的設(shè)計(jì)軟件！》
2. 《從 Sketch 遷移到 Figma 半年后：以為是個(gè)青銅結(jié)果是個(gè)王者？！》
3. 《想取代 Sketch 的 Figma 好不好用？我花了一年時(shí)間給你答案！》

注：本系列文章為優(yōu)設(shè)獨(dú)家專題，請勿轉(zhuǎn)載。

歡迎添加作者微信交流：