散文網(wǎng) » 科技 »數(shù)碼 » 超全面的 UI 工作流程指南（二）：原型設計

超全面的 UI 工作流程指南（二）：原型設計

2021-01-15 17:30 作者:ween0077 0人讀過 | 我要投稿

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

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

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

原型類型區(qū)別

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

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

交互設計原則

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

1. Fitts’ Law / 菲茨定律（費茨法則）

目標離的越遠，到達就越是費勁。目標越小，就越難點中。如果我們要想鼠標比較快速地命中目標可以采取兩個措施，要么減少鼠標與目標之間的距離，要么使目標足夠大。

2. Hick’s Law / 席克定律（?？朔▌t）

一個人面臨的選擇越多，所需要作出決定的時間就越長。在人機交互中界面中選項越多，意味著用戶做出決定的時間越長。

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

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

4. The Law Of Proximity 接近法則

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

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

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

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

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

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

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

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

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

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

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

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

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

完整的原型圖

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

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

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

定義好每個標注點的含義和事件

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

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

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

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

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

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

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

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

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

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

繪制流程圖需要注意以下幾點：

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

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

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

Axure

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

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