原型設計介紹，了解一下？

05-21

原型設計介紹，了解一下？

來自專欄 UIcircle

作者：Hindy

原文地址：uicircle.club/a/203

轉載無限歡迎，但請註明「作者」和「原文地址」。感謝您對作者版權的尊重。

前言

本文是 UI 設計進階系列的第 6-2 篇，系列目錄：uicircle.club/a/128。

通過本文，你將快速認識原型是什麼，以及我們為什麼要做原型。

原型介紹

我們前面所做的工作放到雙鑽流程中可以歸為 Discover、Define 和 Develop，而接下來要做的工作就是 Deliver 了，重在建造和測試（build and test）。

我們知道做工業產品設計時會建立一系列的模型（model），來對設計進行一系列測試。而原型（prototype）則相當於數字產品的模型。你也可能會聽到有人叫它 demo 版。

我們為什麼要做原型？我在之前的文章中其實就有介紹，任何低保真原型都具有以下作用：

在早期檢測和修復主要問題
構建起來容易、成本低
讓人更有迭代的動力和意願
得出的反饋側重於高層次的概念而不是執行
易於攜帶，展開測試活動

原型的分類

按保真程度分，原型可以籠統地分為：

Low-fidelity Prototype（低保真原型）
High-fidelity Prototype（高保真原型）

在 GUI 設計中，高保真原型我這習慣將其歸為視覺稿（即便不是最終版），而低保真原型又可以有以下這些形式：

Sketch（草圖）：快速表達概念。
Storyboard（故事板）：視覺化表現產品如何工作。
Paper Prototype（紙面原型）：將頁面畫在一張張紙上用作演示。
Wireframe（線框圖）：視覺化呈現一個個獨立頁面及交互邏輯。

另外，還有：

Interactive Prototype（可交互原型）：可供用戶操作的原型，它可以是低保真的，也可以是高保真的。

故事板和草圖我們在前面的文章都已經介紹過了（請自行查閱）。本文稍微再介紹下紙面原型、線框圖以及可交互原型。

紙面原型

紙面原型製作起來非常方便，基本就是畫完草圖，然後將畫面裁剪成「模型」就行。相比草圖，它的擬真度更高，對於交互的表達也更直觀。

線框圖

線框圖則已經非常接近最終的視覺稿了。但相比視覺，線框圖允許忽視美感，只注重功能和信息的呈現。而如果繪製人員擁有基礎的設計能力，那麼他很可能會在這步就重視頁面的布局和版式。

在國內，線框圖通常由產品經理或交互設計師繪製。視情況，可能還會將其做成流程圖，寫上交互邏輯和開發細節。（具體我就不具體介紹了，大家可以觀察下圖就能發現很多特點。）

可交互原型

顧名思義，可交互原型就是可讓人進行互動操作的原型。一般還是先繪製靜態頁面，然後添加各種操作效果，最基礎的比如滑動、跳轉頁面等。

值得提的一點是，我們經常看到的頁面細節動效，並非「可交互原型」。它們更多是為了開發某一效果而做的演示。可交互原型更像是一個正常的產品，可供人使用。因此當我們做原型測試時，可交互原型是最好的選擇。

原型設計工具的選擇

網上有很多原型設計工具，尤其是近些年新興了許多，我們究竟如何選擇適合我們的工具呢？

在做原型前，不妨先讓我們回答下面幾個問題：

你為什麼要做這次原型設計？
你是在為什麼平台做設計，手機、平板、桌面……？
你要做什麼類型的原型，需要什麼程度的保真度？
你有多少時間完成設計？
你需要展示多少的產品體驗？

明確上面的目標後，我們再去選擇設計工具。

設計諮詢公司 Cooper 做了一個非常有意思的原型設計工具篩選器，大家可以上去看看都有哪些軟體：www.cooper.com/prototyping-tools?

然而我們實際投入工作使用的可能就那麼幾款，下面是我個人推薦的：

追求速度可以用：

Marvel
InVision
Principle
墨刀

追求保真度可以用：

Origami
Framer
InVision
Webflow

原型測試

在《Don』t make me think》（中譯《點石成金》）一書中，令我印象最深的有兩句話：

測試一個用戶也比不做測試好一倍！
早測試一個用戶，好過最後測試五十個用戶！

雖然看著有點誇張，但用意就是告誡我們測試至關重要。在早期找三五人簡單試用下，就能發現絕大多數問題。而更多關於用戶測試的方法與細節，等到第 9 章再完整介紹罷，see ya~

免費獲取完整 PPT，請關注公眾號 uicircle，回復「原型設計」即可。

UI 設計進階系列目錄：uicircle.club/a/128。

如果你想提升設計能力，亦或充實自己的周末，歡迎加入我們的會員社區??

→點這報名

參考閱讀

Designer』s Toolkit: Prototyping Tools：www.cooper.com/prototyping-tools?
Rapid Prototyping：www.youtube.com/watch?v=JMjozqJS44M&list=PL9KVIdeJ2K8NDpsiyYpcbB_qifd3y5CYZ
《點石成金》：book.douban.com/subject/1827702/