這是一系列關於用戶體驗設計的教程，針對剛開始學習UI/UX的小白。保證每週一更，希望我的小教程能夠幫助你快速入門。如果錯誤，還望指正。
學UX設計之前，一定要對產品原型有着深刻的理解。因爲原型是產品的框架結構，直接影響用戶體驗。今天開始《每天學一點UX》系列的第一篇：原型設計前，你應該瞭解這些！
01 爲什麼要做原型設計？
原型（prototype）這個概念最早出現在工業設計領域。是設計師用來更好呈現設計理念、驗證產品、打磨產品的一種方式，同時也能夠起到節約成本的效果。
如果設計師設計了一款杯子，除了手繪圖之外，可以通過原型真實感知到這個杯子握在手中的感覺，它是否舒適、美觀、合理。也可以拿給朋友，看看他們是否喜歡。那麼當這個概念被引入到互聯網行業時，它所表達的概念是相同的。
簡單的說，原型≈產品草圖。
通常包含界面圖、流程圖以及交互文檔說明。用簡單明瞭的方式，模擬用戶與界面的交互行爲，便於早期測試，收集用戶反饋。
* 注意，原型一定要能有交互關係。
不能只是單純的草圖、線框圖模型，要有說明文檔，知道這個點擊從哪來，到哪去。
02 原型有哪幾種？
當你拿着完整的設計稿去向老闆彙報，老闆大刀闊斧的修改你的方案。這時候想必你內心正在哭泣。那麼，怎麼避免設計資源的浪費？這時就要考慮原型做到哪個保真程度了。
原型根據保真程度，可分爲：
1.紙質原型
2.低保真原型
3.高保真原型
1.紙質原型
利用基礎的幾何圖形和線段，手繪表達產品的基本功能及內容佈局。
適用於前期概念探索階段，快速表達創意想法。但隨着項目的推進，紙質原型與最終產品之間的差距就越大。
▼ 對，這樣就能畫出來。是不是很像簡筆畫？
▼ 草圖也要加上流程圖和說明
優勢：
· 成本低。所見即所得。
· 方便調整。在測試期間就能進行修改，可快速繪製或擦除部分設計。
· 無門檻。實現起來幾乎無門檻，人人都能參與表達想法。
· 支持快速模擬效果。可以用幾個小部件，模擬出簡單的交互效果，例如：滾動。
缺點：
· 效果單薄。
· 無法模擬複雜的交互。
2.低保真原型
低保真原型是將概念，轉化爲可測試樣品的快捷方法。就像畫素描我們是先構圖，再上色一樣。
通過修改原型，表達界面佈局、功能與信息的關係，引發討論，實現產品的“快速迭代”。
* 注意，低保真原型最重要的作用——檢查和測試產品功能，而不是視覺外觀。
▼ 這是簡單的低保真原型
▼ 這是上面的進化版，但都屬於低保真
▼ 交互文檔，要求條理清晰，不要大段文字
優勢：
· 專注框架層和結構層。
· 修改方便。設計人員可根據用戶反饋輕鬆調整線框圖。
· 可複用成果。利用專業工具（例如墨刀），可直接把低保真深化爲高保真。
缺點：
· 非專業人士不易理解
3.高保真原型
高保真原型極度接近最終產品形態。
除了沒有真實的後臺數據支撐，幾乎可以模擬前端界面的所有功能。
▼ 這種屬於可交互的高級原型
優勢：
· 逼真細緻。在視覺、內容和交互上都無限接近最終上線效果，從而驗證設計的可能性。
· 無障礙溝通。非專業人士也能夠感知到產品功能及業務。
· 更可靠的測試反饋。高保真原型通常看起來像真正的產品。在可用性測試中，測試參與者將更真實地表現使用感受。
缺點：
· 成本較高。與低保真相比，高保真原型意味着更高的時間和資金。
▼ 從低保真到高保真，越來越接近實際產品效果
03 設計低保真還是高保真？
這會取決於具體場景。 產品初期，爲了快速討論、調整。通常會採用低保真原型的方式來展示方案。
把精力專注於產品最核心的結構層和框架層。
但一千個人眼中有一千個哈姆萊特。如果受衆是非專業人士，高保真原型無疑是更好的選擇：
對於開發，高保真原型能精準預測開發時間和精準度；對於測試，高保真原型意味着正確的測試樣本；對於種子用戶，高保真可以驗證你的產品是不是用戶所需。
不過據我所知，交互設計師日常還是低保真原型用的比較多，設計太多反而會干擾UI發揮。視覺工作交給設計師來就好。
▼ 選擇合適的保真程度，殺雞不用牛刀
04 原型由誰設計？
這就要看公司的具體分工了。
一般來說，交互設計師應該是原型的主力執行者，有的公司沒交互則是PM來完成。但目前全鏈路設計師的崛起，UX也會承擔一部分的原型設計工作。
總之，在深入地思考一個產品之前，原型可以讓你看到一片森林，而不僅僅是一棵樹木。
推薦一款簡單快速原型設計工具：摹客Mockplus
瞭解這些小知識，你離UX設計師又近了一步。下期準備講關於原型控件的文章，非常適合小白，下期再見～
原文：https://www.zcool.com.cn/article/ZMTEwMjI3Mg==.html