《深度剖析原型設(shè)計(jì)：認(rèn)知、設(shè)計(jì)和規(guī)范最佳實(shí)踐！》

產(chǎn)品原型認(rèn)知

1、什么是原型

什么是原型？百度百科定義為原來(lái)的類型或模型，特指文學(xué)藝術(shù)作品中塑造人物形象所依據(jù)的現(xiàn)實(shí)生活中的人。按照這個(gè)定義，任何能夠?qū)⑾敕◤哪X海中表示出來(lái)并讓其他人看見的東西都可以是原型。

對(duì)于數(shù)字化軟件產(chǎn)品，原型是指的軟件產(chǎn)品上線之前所依據(jù)的樣圖；對(duì)于建筑物，原型是建筑的設(shè)計(jì)圖稿；對(duì)于新房，原型是新房的戶型平面圖。

每個(gè)人對(duì)原型的定義可能會(huì)不同。開發(fā)人員可能認(rèn)為原型必須以代碼形式生成，設(shè)計(jì)師可能認(rèn)為原型是Axure設(shè)計(jì)的可交互的模型，客戶可能認(rèn)為原型是一個(gè)簡(jiǎn)單的DEMO演示。

不管爭(zhēng)議如何，原型是解決方案的簡(jiǎn)單實(shí)驗(yàn)?zāi)Ｐ停糜诳焖佟⒘畠r(jià)的測(cè)試或驗(yàn)證概念，可以讓想法與用戶進(jìn)行互動(dòng)，不管用戶是否喜歡原型，我們都可以從中獲得反饋，并為用戶設(shè)計(jì)一個(gè)更好的方案。

作為一種低成本驗(yàn)證產(chǎn)品可行性及產(chǎn)品體驗(yàn)的途徑，從基礎(chǔ)的草圖到線框圖再到可交互的高保真原型，每個(gè)環(huán)節(jié)我們都在對(duì)原型進(jìn)行持續(xù)測(cè)試和驗(yàn)證，直到我們認(rèn)為已規(guī)避大部分問題，才正式啟動(dòng)產(chǎn)品的研發(fā)和上線。

沒有什么是完全完成的，即使發(fā)布的版本用戶感到滿意，用戶依然會(huì)提出反饋，而我們必須在未來(lái)的版本中進(jìn)行調(diào)整。新的一輪原型測(cè)試和驗(yàn)證也就開始了，這對(duì)產(chǎn)品本身大有裨益。

2、為什么需要原型

原型的用途和作用很多，在產(chǎn)品的規(guī)劃和設(shè)計(jì)中，應(yīng)該盡早的制作原型，通過(guò)原型不斷的測(cè)試和驗(yàn)證想法。主要的原因包括明確問題和方案、高效溝通、驗(yàn)證和改進(jìn)。

• 明確問題和方案：基于正確的用戶問題確定解決方案；

• 高效溝通：為相關(guān)干系人確定設(shè)計(jì)方向和明確產(chǎn)品設(shè)計(jì)細(xì)節(jié)；
  

• 驗(yàn)證和改進(jìn)：不同階段多次驗(yàn)證假設(shè)并改進(jìn)方案。

（1）明確問題和方案

原型設(shè)計(jì)可以幫助我們明確現(xiàn)有問題，發(fā)現(xiàn)其他隱含問題，找出更多解決問題的方法。

• 在設(shè)計(jì)的早期階段，用探索性的研究和原型設(shè)計(jì)去發(fā)現(xiàn)問題很有幫助，問題發(fā)現(xiàn)的越晚，付出的代價(jià)越高；

• 在設(shè)計(jì)的后期階段，幫你掌握整個(gè)業(yè)務(wù)流程以及每個(gè)節(jié)點(diǎn)所要做的設(shè)計(jì)，明確用戶界面，包括交互元素和內(nèi)容

（2）高效溝通

原型可以幫助你在團(tuán)隊(duì)內(nèi)部、客戶以及利益相關(guān)者之間展示你的想法，它能夠?qū)⒛愕南敕ㄞD(zhuǎn)化為物理或數(shù)字的媒介，并將模糊的，概括的的想法轉(zhuǎn)化為具體的對(duì)象。

沒有原型，其他人就會(huì)用他們自己的心智模型來(lái)可視化你的想法，這樣大家的期望和想法就很難達(dá)成一致。原型能過(guò)讓大家在短時(shí)間內(nèi)保持聚焦，把注意力集中在實(shí)質(zhì)性的溝通上，提高溝通效率。

原型能夠在會(huì)議和方案演示中更好的突出你的想法，這樣你對(duì)自己的想法會(huì)更有信心，它也是你前期為之投入的思考和努力。

（3）驗(yàn)證和改進(jìn)

一開始不確定你的想法是否值得花時(shí)間制作原型和驗(yàn)證，但是，可以憑直覺制定原型，不斷的進(jìn)行驗(yàn)證和改進(jìn)。

在早期階段，需要了解和測(cè)試用戶心智模型，了解他們思考和感知世界的方式；如果設(shè)計(jì)的產(chǎn)品過(guò)于復(fù)雜，則需要頻繁的驗(yàn)證和改進(jìn)。

我們可以為每個(gè)想法或假設(shè)做一個(gè)原型，但假設(shè)和想法是基于可用的，有價(jià)值的策略。原型的驗(yàn)證有助于設(shè)計(jì)更好的產(chǎn)品，通過(guò)原型與用戶互動(dòng)，洞察他們的實(shí)際需要，而團(tuán)隊(duì)也能從用戶的反饋中獲益。

3、原型類型

基于原型想要達(dá)到的目的，選擇合適的原型類型。原型類型一般按保真度分為低保真原型、中保真原型和高保真原型。保真度意味著原型的外觀和行為與最終產(chǎn)品相似程度。

原型的制作通常是從低保真開始，并逐漸提高到高保真的水平，直到大部分假設(shè)都經(jīng)過(guò)驗(yàn)證和修正。

（1）低保真原型

低保真原型呈現(xiàn)的是初步的概念和想法，可以使用不同的媒介，擁有不同尺寸的原型界面。這種原型是最簡(jiǎn)單和便宜的，更換成本最低。它可以包括草圖、紙質(zhì)原型、線框圖等。

①草圖

草圖是最初的想法或假設(shè)，基于業(yè)務(wù)流程的梳理，結(jié)合信息架構(gòu)，將核心的用戶操作界面繪制出來(lái)，可以是白板草圖，紙質(zhì)草圖等。通過(guò)繪制大量不同的版本來(lái)考慮解決界面交互的不同方法。如下圖：

②線框圖

信息架構(gòu)和草圖可以快速演變成線框圖。線框圖是靜態(tài)的頁(yè)面布局，讓我們思考如何在屏幕上放置不同元素，更好的將信息架構(gòu)可視化。低保真的線框圖沒有視覺設(shè)計(jì)，交互方面有也只是簡(jiǎn)單的跳轉(zhuǎn)事件，大多數(shù)都使用灰色色階和占位符來(lái)指示內(nèi)容，如下圖：

（2）中保真原型

中保真原型在某些方面看起來(lái)像最終產(chǎn)品，它在成本和價(jià)值之間取得平衡，將視覺、交互和展示媒介結(jié)合在一起。包括，可點(diǎn)擊的原型、編碼原型等

用戶基于中保真原型能夠完成一個(gè)任務(wù)的閉環(huán)，也就是通過(guò)與原型界面的交互完成工作任務(wù)。

①可點(diǎn)擊的原型

一般使用原型設(shè)計(jì)軟件（比如Axure，墨刀）構(gòu)建頁(yè)面，并給每個(gè)頁(yè)面增加交互式元素，做到頁(yè)面之間可進(jìn)行交互。如下圖：

②編碼原型

會(huì)編碼的產(chǎn)品，可以選在瀏覽器中創(chuàng)建中保真原型。這要求產(chǎn)品懂得HTML，CSS等技術(shù)，可以簡(jiǎn)單的構(gòu)建中保真原型，這種原型展示出的效果，就跟真實(shí)的界面很逼真。有興趣的同學(xué)，后文我會(huì)分享HTML，JS,CSS相關(guān)技術(shù)知識(shí)。

（3）高保真原型

高保真原型經(jīng)過(guò)視覺設(shè)計(jì)，這些原型具有真實(shí)界面的高度一致，數(shù)據(jù)的高度仿真，交互和動(dòng)畫也具備，用戶能夠與之進(jìn)行交互。雖然看起來(lái)像真的一樣，但它仍然是一個(gè)原型。如下圖：

不同保真度原型付出的成本和帶來(lái)的效果是不一樣的，如何評(píng)估原型的保真度？

根據(jù)《原型設(shè)計(jì)：打造成功產(chǎn)品的實(shí)用方法及實(shí)踐》一書中，將保真度的評(píng)估劃分為五個(gè)維度，包括視覺細(xì)化、功能廣度、功能深度、交互性和數(shù)據(jù)模型。

• 視覺細(xì)化：指在界面中視覺像素級(jí)別設(shè)計(jì)的投入；

• 功能廣度：指原型中涵蓋了多少大的功能點(diǎn)；
  

• 功能深度：表明原型各個(gè)功能的詳細(xì)程度如何；

• 交互性：表示應(yīng)用程序或產(chǎn)品的交互部分如何顯示給用戶；
  

• 數(shù)據(jù)模型：包含用戶在界面中交互的內(nèi)容以及產(chǎn)品前端和后端使用的數(shù)據(jù)；
  

如何選擇原型保真度類型？

如果原型保真度過(guò)高，用戶就會(huì)以為設(shè)計(jì)已經(jīng)完成，過(guò)分關(guān)注細(xì)節(jié)，而忽略整體方案；如果原型保真度太低，用戶可能會(huì)迷失方向，不理解原型的目的是什么。

我們需根據(jù)目標(biāo)和產(chǎn)品所處的階段來(lái)選擇適當(dāng)的保真度原型，在制作原型所花費(fèi)的時(shí)間和驗(yàn)證原型帶來(lái)價(jià)值之間取得平衡。下表是不同保真度原型的適宜范圍、場(chǎng)景以及優(yōu)劣勢(shì)：