起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識深度剖析原型設計：認知、設計和規范最佳實踐！
編輯導讀：原型設計是每一個產品經理的必修課，但很多新人產品經理對原型的作用、設計規范、設計流程和思路都是一知半解。本文作者根據自身工作經驗，對此進行了分析，與你分享。
產品原型設計是大部分產品經理日常工作中的高頻事項，原型設計的好不好是團隊內部扯皮的高發地區，甚至直接影響到產品上線效果。
很多的產品在畫原型時，是憑借自己的感覺去畫，或者套用行業模板，有時直接抄競品的樣式。而并沒有真正理解原型的本質，對于原型的作用、設計規范、設計流程和思路都是一知半解，甚至毫無概念。
不了解原型，短期內對自身沒有影響，倘若想往高階產品發展或期望有一個更好的職業發展生涯將會產生大大的不利。
我們在原型設計時，很多產品人多少都會有以下的現象：
- 不梳理信息，直接畫原型：拿到需求分析完，直接就畫原型，沒有搞清楚畫原型的目的，以及用戶對原型的信息訴求；
- 為了畫原型而畫原型：原型設計事無巨細，而忽略用戶真正的關注點；
- 原型設計不規范：沒有統一規范，造成溝通和認知困難。
面對這些情況，如何高效的制定原型設計，達到原型設計的目的？本文在信息架構梳理完畢后，開始著手產品原型設計，從產品原型認知、產品原型設計和常用原型設計規范幾個方面闡述了面對不同情況如何有效的采用原型類型進行原型設計，占領用戶心智模式。
01 產品原型認知
1. 什么是原型
什么是原型？百度百科定義為原來的類型或模型，特指文學藝術作品中塑造人物形象所依據的現實生活中的人。按照這個定義，任何能夠將想法從腦海中表示出來并讓其他人看見的東西都可以是原型。
對于數字化軟件產品，原型是指的軟件產品上線之前所依據的樣圖；對于建筑物，原型是建筑的設計圖稿；對于新房，原型是新房的戶型平面圖。
每個人對原型的定義可能會不同。開發人員可能認為原型必須以代碼形式生成，設計師可能認為原型是Axure設計的可交互的模型，客戶可能認為原型是一個簡單的DEMO演示。
不管爭議如何，原型是解決方案的簡單實驗模型，用于快速、廉價的測試或驗證概念，可以讓想法與用戶進行互動，不管用戶是否喜歡原型，我們都可以從中獲得反饋，并為用戶設計一個更好的方案。
作為一種低成本驗證產品可行性及產品體驗的途徑，從基礎的草圖到線框圖再到可交互的高保真原型，每個環節我們都在對原型進行持續測試和驗證，直到我們認為已規避大部分問題，才正式啟動產品的研發和上線。
沒有什么是完全完成的，即使發布的版本用戶感到滿意，用戶依然會提出反饋，而我們必須在未來的版本中進行調整。新的一輪原型測試和驗證也就開始了，這對產品本身大有裨益。
2. 為什么需要原型
原型的用途和作用很多，在產品的規劃和設計中，應該盡早的制作原型，通過原型不斷的測試和驗證想法。主要的原因包括明確問題和方案、高效溝通、驗證和改進。
- 明確問題和方案：基于正確的用戶問題確定解決方案；
- 高效溝通：為相關干系人確定設計方向和明確產品設計細節；
- 驗證和改進：不同階段多次驗證假設并改進方案。
1）明確問題和方案
原型設計可以幫助我們明確現有問題，發現其他隱含問題，找出更多解決問題的方法。
- 在設計的早期階段，用探索性的研究和原型設計去發現問題很有幫助，問題發現的越晚，付出的代價越高；
- 在設計的后期階段，幫你掌握整個業務流程以及每個節點所要做的設計，明確用戶界面，包括交互元素和內容
2）高效溝通
原型可以幫助你在團隊內部、客戶以及利益相關者之間展示你的想法，它能夠將你的想法轉化為物理或數字的媒介，并將模糊的，概括的的想法轉化為具體的對象。
沒有原型，其他人就會用他們自己的心智模型來可視化你的想法，這樣大家的期望和想法就很難達成一致。原型能過讓大家在短時間內保持聚焦，把注意力集中在實質性的溝通上，提高溝通效率。
原型能夠在會議和方案演示中更好的突出你的想法，這樣你對自己的想法會更有信心，它也是你前期為之投入的思考和努力。
3）驗證和改進
一開始不確定你的想法是否值得花時間制作原型和驗證，但是，可以憑直覺制定原型，不斷的進行驗證和改進。
在早期階段，需要了解和測試用戶心智模型，了解他們思考和感知世界的方式；如果設計的產品過于復雜，則需要頻繁的驗證和改進。
我們可以為每個想法或假設做一個原型，但假設和想法是基于可用的，有價值的策略。原型的驗證有助于設計更好的產品，通過原型與用戶互動，洞察他們的實際需要，而團隊也能從用戶的反饋中獲益。
3. 原型類型
基于原型想要達到的目的，選擇合適的原型類型。原型類型一般按保真度分為低保真原型、中保真原型和高保真原型。保真度意味著原型的外觀和行為與最終產品相似程度。
原型的制作通常是從低保真開始，并逐漸提高到高保真的水平，直到大部分假設都經過驗證和修正。
1）低保真原型
低保真原型呈現的是初步的概念和想法，可以使用不同的媒介，擁有不同尺寸的原型界面。這種原型是最簡單和便宜的，更換成本最低。它可以包括草圖、紙質原型、線框圖等。
①草圖
草圖是最初的想法或假設，基于業務流程的梳理，結合信息架構，將核心的用戶操作界面繪制出來，可以是白板草圖，紙質草圖等。通過繪制大量不同的版本來考慮解決界面交互的不同方法。
②線框圖
信息架構和草圖可以快速演變成線框圖。線框圖是靜態的頁面布局，讓我們思考如何在屏幕上放置不同元素，更好的將信息架構可視化。低保真的線框圖沒有視覺設計，交互方面有也只是簡單的跳轉事件，大多數都使用灰色色階和占位符來指示內容。
2）中保真原型
中保真原型在某些方面看起來像最終產品，它在成本和價值之間取得平衡，將視覺、交互和展示媒介結合在一起。包括，可點擊的原型、編碼原型等
用戶基于中保真原型能夠完成一個任務的閉環，也就是通過與原型界面的交互完成工作任務。
①可點擊的原型
一般使用原型設計軟件（比如Axure，墨刀）構建頁面，并給每個頁面增加交互式元素，做到頁面之間可進行交互。
②編碼原型
會編碼的產品，可以選在瀏覽器中創建中保真原型。這要求產品懂得HTML，CSS等技術，可以簡單的構建中保真原型，這種原型展示出的效果，就跟真實的界面很逼真。有興趣的同學，后文我會分享HTML，JS,CSS相關技術知識。
3）高保真原型
高保真原型經過視覺設計，這些原型具有真實界面的高度一致，數據的高度仿真，交互和動畫也具備，用戶能夠與之進行交互。雖然看起來像真的一樣，但它仍然是一個原型。
不同保真度原型付出的成本和帶來的效果是不一樣的，如何評估原型的保真度？
根據《原型設計：打造成功產品的實用方法及實踐》一書中，將保真度的評估劃分為五個維度，包括視覺細化、功能廣度、功能深度、交互性和數據模型。
- 視覺細化：指在界面中視覺像素級別設計的投入；
- 功能廣度：指原型中涵蓋了多少大的功能點；
- 功能深度：表明原型各個功能的詳細程度如何；
- 交互性：表示應用程序或產品的交互部分如何顯示給用戶；
- 數據模型：包含用戶在界面中交互的內容以及產品前端和后端使用的數據；
如何選擇原型保真度類型？
如果原型保真度過高，用戶就會以為設計已經完成，過分關注細節，而忽略整體方案；如果原型保真度太低，用戶可能會迷失方向，不理解原型的目的是什么。
我們需根據目標和產品所處的階段來選擇適當的保真度原型，在制作原型所花費的時間和驗證原型帶來價值之間取得平衡。
02 產品原型設計
1. 原型設計流程
不同的用戶，不同的目的選擇的原型保真度和制作原型流程也會不同
- 明確原型目的：原型的目的是確定方向，找到方案，還是驗證問題？
- 了解用戶或聽眾：繪制的原型面向用戶和團隊內部溝通對象是誰？
- 選擇原型類型：采用低保真、中保真，還是高保真原型？
- 制作原型：采用什么工具、軟件或者直接編碼制作產品原型？
- 呈現/驗證：原型的展示和交付，驗證原型的目的
- 反饋和改進：根據用戶或聽眾反饋，持續的優化和改進原型
1）明確原型的目的
原型設計之前，先明確這次原型設計的目的是什么。是為了明確產品方向？探索解決方案？還是驗證問題或假設？
明確產品方向：不知道如何下手設計產品，這個時候，可以采用MVP最小可用原型的方法，用最小的工作量制作一個簡易原型，模擬用戶實際業務操作流程，讓原型代替流程中每個環節的操作界面，最后將原型交付用戶進行測試驗證是否用戶所需的。
探索解決方案：主要是找到問題和探索如何解決問題。針對問題，可以發散多個解決方案，將類似的方案進行分類組合，對方案的優劣勢和價值進行評估和排序，制作簡易的原型，最后找出最佳的解決方案。
驗證問題：主要是優化產品或修復問題。找到需優化的問題，選擇原型保真度，構建原型和測試原型。
2）了解用戶或聽眾
基于原型不同的目的，我們需要選擇不用用戶溝通群體是誰，溝通目標是什么。獲得利益相關者認可？向客戶推銷產品？獲得設計師交互和視覺反饋？還是跟研發確認設計效果？
不同對象，背景不同，了解他們對產品的熟悉程度，向用戶或受眾演示原型，讓他們知道你的目標是什么，并記錄演示過程中的反饋。
3）選擇原型類型
基于原型不同的目的、受眾和產品所處的階段，我們需要選擇不用保真度的原型進行展示和溝通。
4）制作原型
基于前期的信息架構和草圖，制定低保真、中保真或高保真的原型界面，其界面內容取決于信息架構規劃和設計。不同類型的原型常用的制作工具，包括不限于以下：
- 草圖：白板、紙張
- 線框圖：Axure、慕客、墨刀、EXCEL、編碼實現等
原型展示的信息無非就是信息導航、信息分類、信息搜索、信息布局和常用的增刪改查（CRUD）等。具體到原型界面設計包括不限于以下內容：
①首頁
包括一級導航，二級導航，搜索、內容區和操作區等
②列表頁
具體單據列表頁面設計，包括列表查詢條件、列表操作、列表表格數據、數據排序、數據翻頁、數據字段等。
數據操作包括新增、修改、刪除、導入、導出和打印等。每項操作會涉及到具體的原型界面（見表單詳情頁）、業務邏輯、交互邏輯、數據校驗和權限控制等。
導入和導出數據一般在列表頁通過設定導入和導出模板方式完成數據導入和導出。這里要注意導入的時候，會有對數據進行規則和業務邏輯校驗。
③表單詳情頁
表單詳情頁多用于展示具體的內容信息，涉及到頁面信息布局、頁面操作等信息。新增、修改、查詢頁一般都會設計為同一頁面，通過不同單據狀態和權限控制頁面的編輯和查詢。
表單新增時，需考慮以下不限于：
- 界面展示可以更簡單，字段可以更少嗎？
- 用戶靠自己能順利完成單據填寫？
- 怎樣才能讓用戶填寫更少信息？
- 是否可避免大量機械化信息錄入？
- 用戶怎么盡量少犯錯？
- 如何幫助用戶提高錄入效率和準確性？
- 表單查詢時，需考慮以下不限于：
- 哪些角色會查詢該單據？
- 什么場景下使用單據？
- 他們主要完成哪些任務？
- 他們關心哪些信息，使用哪些功能？
單據的新增、編輯和查詢狀態，用戶關心的問題和需要完成任務都不相同。新增時，多數要準確，快速錄入信息；編輯時，要對有權限改動的數據改動；查詢時，不同角色，不同權限和不同場景下用戶關心的信息和處理的任務不同。
④幫助信息
產品的幫助信息包括提示，模態彈框，操作指引和幫助中心等。
提示：主要是提示用戶當前操作的信息提示，一般帶有說明文字的“氣泡”，包括保存，修改成功，提示語，警告等信息；
模態彈框：用于阻斷用戶主流程，經過用戶確認后，再返回主流程或直接退出主流程。包括確認彈框等信息
操作指引：在特定場景下，系統對用戶接下來的操作進行的指引。常見的有新手引導、新上線功能引導等。
幫助中心：一般會包括用戶手冊、視頻教程、常見問題和問題反饋路徑等相關內容，幫助用戶在遇到問題時，能夠查閱相關手冊自行解決。
原型設計的內容遠不止上面列舉的類型，這里旨在幫助大家有一個全面的認識，原型設計是一項必備的技能，根據業務場景設計的內容也會不同，具體設計技能，可參考相關原型設計書籍或視頻學習。
4）呈現和驗證原型
將原型呈現給團隊、利益相關人以及用戶，采用不同工具進行測試和驗證。我們可以兩人一組，在測試中，不要過多的引導用戶，觀看用戶的使用路徑，當用戶偏離路徑太遠時，也不要過快糾正他們，你可以從中獲得用戶的預期。
一般情況，選擇3-6人左右進行驗證，倘若人數不夠，也可以再多選擇幾個用戶進行驗證。驗證后，匯總所有的驗證資料，分析和總結所有用戶共性的問題和用戶關注點。
5）反饋和改進原型
針對原型驗證的問題，如何解決驗證出現的問題？這里需針對這些問題進行新的一輪討論和方案制定，重復前面的原型制定和驗證過程，保證設計的原型是用戶所需要。
原型的驗證是重復的周期，直到沒有發現新的大問題，各方都滿意了，就可以停止新一輪驗證，進行研發和發布。當然，發布后，我們又會接收其他的反饋和需求，新一輪的原型制作和驗證又開始了。
2. 原型設計誤區
原型設計是一項標準化的流程，實際工作中背景不同，情況不同，往往并沒有引起足夠的重視，甚至存在不同的看法。
- 不需要信息架構，直接畫原型：這種沒有前期的信息組織和分類的過程，往往畫出的原型不是用戶最想要的，需要經過多輪的修改和調整；
- 過分追求完美的原型：不注重產品階段，不關注受眾，花大力氣將原型的細節都描繪的十分清楚，這種情況一旦沒有抓住用戶需求，就是牽一發而動全身的調整，耗時耗力；
- 畫原型浪費時間：我們講提高工作效率，不是把原型省了，沒了原型，每個人的都會腦補一張圖，你的圖和他的圖未必就一致，最后的結果又得回來進行調整；
- 原型隨便畫一畫就行，不需要按規范來：有些小伙伴，不講究原型規范性，畫出的原型丑陋不堪，雖然在一定程度上是不會影響工作。但作為產品的你，交付這樣的原型給團隊，你還有審美么？可見你的工作習慣就不好，培養良好的工作習慣，是成功的保障。
03 原型設計規范
原型設計在滿足產品需求轉化為產品功能的過程中，需要遵循一定的設計規范，盡量保持原型圖的美觀整潔。良好的原型設計規范能夠體現產品人自身的審美觀，也能促進團隊之間和諧溝通。
1. 設計目標和使用用戶
原型作為團隊溝通工具，所涉及的用戶包括：利益相關者、產品、研發、測試、UI等角色。
基于原型使用用戶，明確原型設計規范的目標是保持原型風格統一，提高原型輸出效率，促使團隊高效溝通，減少產品返工率。
2. 設計原則
每一個優秀的設計中都應用了一些設計原則，《寫給大家看的設計書》中將設計原則劃分為對比、重復、對齊和親密性四大原則。
- 對比：基本思想是要避免頁面上的元素太過相似。如果元素（字體、顏色、大小，線寬，形狀，空間等）不相同，那么就干脆讓它們截然不同。要讓頁面引人注目，對比通常是最重要的一個因素。
- 重復：設計中視覺要素要在整個產品中重復出現。可以重復顏色，形狀，空間，線寬，字體，大小和圖片。這樣可以增加條理性和統一性。
- 對齊：任何東西都不能在頁面上隨意安放，每個元素都應當與頁面上的另一個元素有某種視覺聯系。這樣能建立一種清晰，精巧而且清爽的外觀；
- 親密性：彼此相關的項應當靠近，歸組在一起。如果多項相互之間存在很近的親密性，它們就會成為一個視覺單元，而不是多個孤立的元素。這有助于組織信息，減少混亂，提供清晰的結構。
3. 界面尺寸
為了讓原型的尺寸更接近實際應用環境，加強與UI的高效溝通，有必要遵循一些基本的尺寸要求。
APP和WEB端的尺寸就會因實際屏幕的大小，原型尺寸也會不同。
對于B端產品主要在WEB界面使用，常見的尺寸在1920*1080
對于主要在APP端使用的產品，像蘋果11的尺寸414*896，三星和OPPO的常見尺寸360*780。
另外，移動端，頂部狀態欄：20px；頂部導航欄高度：44px；底部導航欄高度：48px；一般字號：12px-14px
4. 設計風格
整個產品原型的設計元素風格應該保持一致，避免給用戶造成不一致的錯覺，影響到用戶體驗和感知。包括字體、顏色、圖標、圖片、視頻、音頻和布局等。
對于具體元素的設計規范，后文我會專門的拋磚引玉進行說明，具體的規范要求和標準可參考相關的設計網站和專業設計師。
設計規范是為了更好的建立統一的標準，給用戶留下深刻的品牌印象，要結合產品具體的應用場景，像B端產品更多的是企業用戶使用，更偏向于商務風格。
設計規范也不是一成不變，在逐漸的實踐和落地過程，可進行相應的調整，一般開始的時候就定下了主體的布局框架和設計風格。
最后，本文從產品原型認知、產品原型設計到產品原型設計規范全面的闡述了在原型設計過程中，產品人應該把握的知識點和技巧。
原型是從低保真逐步演化到高保真，我們應該在產品規劃和設計時，盡早的開始原型設計，通過對原型不斷的驗證和反饋，滿足用戶需求。
你現在對原型設計的內容和過程有了一定的理解，現在開始選擇你認為合適的軟件工具，開啟原型設計之旅吧！
本文由 @江渝。 原創發布于人人都是產品經理。未經許可，禁止轉載
題圖來自Pexels，基于CC0協議
好像看下來不知道最后講了啥