俗話說(shuō)：“珍愛(ài)生命，遠(yuǎn)離高保真！”沒(méi)錯(cuò)，筆者也一向秉持著這個(gè)觀點(diǎn)。但是在一些特殊的情況下，我們又不得不做高保真原型。這個(gè)時(shí)候不要亂，如果我們依舊能夠以產(chǎn)品思維來(lái)做高保真原型的話，那么我們就真的是在做有意義的事情，而不是純粹地浪費(fèi)時(shí)間！

前言

先說(shuō)一點(diǎn)題外話，針對(duì)今天這個(gè)話題，筆者對(duì)之前的一次面試經(jīng)歷記憶猶新。記得那次，我展示了自己的“高保真”原型，結(jié)果面試官對(duì)我的評(píng)價(jià)是：“你把UI的事情都做了，你還沒(méi)UI專業(yè)，并且你在原型中加入了色彩和圖標(biāo)，這也限制了UI的發(fā)揮！”（筆者當(dāng)時(shí)做的是個(gè)假的“高保真”，當(dāng)時(shí)水平很菜~）

我覺(jué)得這句話說(shuō)的很有道理呀，專業(yè)的人干專業(yè)的事。所以我自己是不建議大家在日產(chǎn)工作中，畫(huà)高保真原型的，真的沒(méi)有那個(gè)必要，而且結(jié)果還可能是事倍功半！

那么什么情況可以做高保真原型，并且我們?cè)撛趺醋瞿?？?qǐng)大家往下看！

什么情況可以做高保真？

（1）不得不做

假如原型是我們與客戶進(jìn)行現(xiàn)場(chǎng)溝通時(shí)的主要材料之一，合同的簽訂與否，就看現(xiàn)場(chǎng)給客戶演示原型的效果了。碰上這種情況，你說(shuō)做不做！

（2）提升技能

如果是想提升一下自己做原型的能力，并且你又有充足的時(shí)間和精力，那當(dāng)然可以做高保真的原型啦！

（3）B端產(chǎn)品

B端產(chǎn)品大多數(shù)是屬于工具類，而工具類產(chǎn)品一般對(duì)于產(chǎn)品體驗(yàn)五要素中的表現(xiàn)層要求不是很高。這個(gè)時(shí)候，我們就可以代替UI，直接產(chǎn)出高保真原型，交付給開(kāi)發(fā)啦！

我為什么做？

筆者的文章，都是實(shí)際工作當(dāng)中的內(nèi)容總結(jié)。筆者這次做高保真原型，除了第三條原因，我們做的是B端產(chǎn)品以外，還有另外一條附帶原因，也就是我們部門(mén)沒(méi)有UI~大公司的UI是一個(gè)專門(mén)的團(tuán)隊(duì)，找UI作圖，不僅要走流程，好像還需要付款，所以筆者就直接一條龍服務(wù)了。

概念

既然我們的大標(biāo)題立在了這里，我們就先拋出幾個(gè)概念。

（1）產(chǎn)品思維

從用戶價(jià)值出發(fā)，在滿足商業(yè)戰(zhàn)略和業(yè)務(wù)目標(biāo)的同時(shí)，尋求產(chǎn)品路徑，滿足用戶需求。

（2）線框圖、原型圖、效果圖

線框圖就是建筑框架，原型圖就是毛坯房，效果圖就是精裝房。

三者的面向的對(duì)象不同，制作目的和標(biāo)準(zhǔn)也就不同，大家可以感受一下。

（3）扁平化設(shè)計(jì)

去除冗余、厚重和繁雜的裝飾效果。而具體表現(xiàn)在去掉了多余的透視、紋理、漸變以及能做出3D效果的元素，這樣可以讓“信息”本身重新作為核心被凸顯出來(lái)。同時(shí)在設(shè)計(jì)元素上，則強(qiáng)調(diào)了抽象、極簡(jiǎn)和符號(hào)化。

這是某度的釋義，文字都認(rèn)識(shí)，但就是記不住~

我們來(lái)理解一下，說(shuō)起扁平化設(shè)計(jì)，與之對(duì)應(yīng)的就是擬物化設(shè)計(jì)，其實(shí)看下面這張圖就明白了，反正筆者理解的就是，擬物化就是三維設(shè)計(jì)，看起來(lái)更真實(shí)，扁平化就是二維設(shè)計(jì)，看起來(lái)更直觀。

為什么要提這個(gè)概念呢？因?yàn)槟壳爸髁鞯谋馄交O(shè)計(jì)風(fēng)格，降低了我們做高保真原型的門(mén)檻。

進(jìn)入正題

以上啰嗦了這么多，接下來(lái)就進(jìn)入正題。

注意：以下內(nèi)容與需求和原型關(guān)系較密切，如果閱讀起來(lái)有困難，建議您可先閱讀《做需求分析，你要弄明白的5件事》，然后再對(duì)照著原型進(jìn)行閱讀，原型下載地址如下：

鏈接：https://pan.baidu.com/s/1qW_9BmG_7iKLYVpVsq1VFA

提取碼：ppf3

筆者接下來(lái)舉四個(gè)示例，來(lái)闡述做高保真時(shí)，是如何保持產(chǎn)品思維的。

示例一：用戶行為路徑優(yōu)化

我們拿管理員派工界面舉例，筆者再簡(jiǎn)述一下需求：產(chǎn)品是一個(gè)學(xué)校的網(wǎng)絡(luò)報(bào)修平臺(tái)，報(bào)修人（老師或者學(xué)生）發(fā)現(xiàn)有東西壞了，在平臺(tái)上填寫(xiě)報(bào)修單，然后管理員看到單子以后，需要指派維修師傅過(guò)去維修。

大家來(lái)看第一版設(shè)計(jì)的界面：

我們這一版用戶的行為路徑為：管理員在列表頁(yè)可以看到待派工的工單，然后進(jìn)入到詳情頁(yè)，看完工單的詳細(xì)信息以后，在最下方選擇維修師傅前去維修。

在做高保真原型時(shí)，我們做了哪些改變呢？

首先，做高保真原型，肯定會(huì)先參考競(jìng)品。打開(kāi)手機(jī)，淘寶、京東、美團(tuán)，這些大廠的產(chǎn)品中，到處都是列表頁(yè)。但我們發(fā)現(xiàn)，這些列表頁(yè)中不僅僅只是信息的展示，還有操作按鈕，例如評(píng)價(jià)啊，收貨啊等等。

于是筆者就思考了這個(gè)問(wèn)題，發(fā)現(xiàn)確實(shí)應(yīng)該是這個(gè)樣子的，我在這里直接說(shuō)下結(jié)論：

1. 對(duì)于管理員來(lái)說(shuō)，他進(jìn)入到這個(gè)界面的目的就是進(jìn)行派工，所以在看到列表頁(yè)的主要信息之后，在這里直接選擇維修師傅派工即可，所以在這個(gè)界面應(yīng)該加上派工按鈕！
2. 只有當(dāng)列表頁(yè)的主要信息不足以支撐管理員做決定時(shí)，管理員才會(huì)查看詳情界面。所以詳情界面的最上方一定是信息展示，等管理員看完整個(gè)詳細(xì)信息以后，才會(huì)進(jìn)行操作。也就是詳情頁(yè)面，上方是信息展示，下方為操作按鈕。

于是我們做高保真原型圖時(shí)，就成了這樣：

示例二：功能優(yōu)先級(jí)排序

工單肯定不止一條，然后我們?cè)谧龉δ芨旁O(shè)時(shí)，理所應(yīng)當(dāng)?shù)叵氲接幸粋€(gè)搜索功能很正常吧。然后在做原型時(shí)，就做成了這樣：

是不是看著很丑？沒(méi)關(guān)系，這才是原型應(yīng)該有的樣子，原型是為了讓開(kāi)發(fā)能夠一覽無(wú)遺地看到界面都有哪些元素，都有哪些功能，所以這個(gè)樣子，其實(shí)他們是喜歡的！

但我們做高保真原型時(shí)，就不能這個(gè)樣子了，因?yàn)殚_(kāi)發(fā)會(huì)照著我們的樣子去實(shí)現(xiàn)（還是回到本文的前提，沒(méi)有UI參與）~

怎么辦呢，同樣，我們還是先去參考競(jìng)品。筆者發(fā)現(xiàn)搜索有兩類，一類是很明顯的搜索框，例如淘寶，另一類只是一個(gè)搜索按鈕擺放在那里，例如我們的人人都是產(chǎn)品經(jīng)理APP。于是乎，這又引起了筆者的思考。

來(lái)，我們這里同樣說(shuō)下結(jié)論：對(duì)于我們這個(gè)報(bào)修平臺(tái)的用戶來(lái)說(shuō)，他們用產(chǎn)品的目的，主要是處理當(dāng)前事務(wù)，而對(duì)于歷史數(shù)據(jù)的查詢，只有在特殊情況下才會(huì)用到，一般情況下是不會(huì)用的。而且也不存在對(duì)于其他類型數(shù)據(jù)的查詢，能看到的，只是和自己相關(guān)的工單數(shù)據(jù)。

于是我們做高保真原型圖時(shí)，就成了這樣，此交互設(shè)計(jì)，大家可以查看原型：

示例三：界面元素增減

先表明一個(gè)觀點(diǎn)：UI拿著我們的原型和需求做效果圖時(shí)，他們不會(huì)對(duì)界面的元素進(jìn)行增減，他們考慮的，可能是一段文案過(guò)長(zhǎng)，他們會(huì)對(duì)文案進(jìn)行縮減。

我們來(lái)拿維修進(jìn)度的步驟條舉例，當(dāng)時(shí)考慮的是，對(duì)于不同的角色，報(bào)修人、維修師傅、后勤管理員，他們的詳情界面中，統(tǒng)一展示工單的進(jìn)度即可，這樣既有助于用戶對(duì)報(bào)修情況的整體把握，對(duì)于開(kāi)發(fā)來(lái)說(shuō)，也是只制作一個(gè)統(tǒng)一模板就夠了。

步驟條的比對(duì)，大家自己看原型吧，筆者這里就不給大家截圖了。這里需要說(shuō)明的一點(diǎn)，步驟條的優(yōu)化靈感，同樣來(lái)源于競(jìng)品。我們看淘寶收貨的步驟條是這樣的，上面有快遞員的電話，并且能夠直接撥打。

同樣的，在維修師傅看進(jìn)度條時(shí)，是否需要加入電話呢？

于是就想到了如下場(chǎng)景：維修師傅上門(mén)進(jìn)行維修，來(lái)到了報(bào)修人填寫(xiě)的地址處，沒(méi)有看到報(bào)修人，此時(shí)維修師傅肯定想打一通電話呀。于是，在高保真原型圖中，進(jìn)度條就變成了這樣：

示例四：邏輯說(shuō)明完善

舉一個(gè)簡(jiǎn)單的例子：在報(bào)修人填寫(xiě)報(bào)修單以后，分別都會(huì)有什么提示？提交成功之后，界面又將跳轉(zhuǎn)到哪個(gè)地方？

這些我們?cè)谧鲈蛨D時(shí)，可能就是一個(gè)提交按鈕放在那里了，然后等到開(kāi)發(fā)的過(guò)程中，程序猿大哥們，一個(gè)個(gè)地提刀來(lái)問(wèn)。

所以說(shuō)，做高保真原型，有助于我們對(duì)邏輯說(shuō)明的完善，如圖所示：

UI關(guān)注什么？

大家看這張圖，這些是UI關(guān)注的內(nèi)容，而我們做高保真原型時(shí)，關(guān)注的重點(diǎn)依舊是以滿足用戶需求為出發(fā)點(diǎn)，這是最根本的區(qū)別。那么以上這些內(nèi)容，有哪些是我們做高保真原型時(shí)，能做的呢？

（1）風(fēng)格

整體的風(fēng)格，我們還是可以設(shè)計(jì)一下的。還是回到我們的前提，產(chǎn)品對(duì)表現(xiàn)層要求不高。如果是C端產(chǎn)品，例如最近比較火的“美團(tuán)變黃了”，這個(gè)黃色可是有戰(zhàn)略意義的~

界內(nèi)對(duì)于顏色都是有一套規(guī)范的，建議使用較為安全的藍(lán)色作為主色調(diào)，用作界面中核心元素及重要按紐的配色，相關(guān)非核心元素統(tǒng)一使用灰色色調(diào)。輔助用色是具有代表性的顏色，常用于信息提示，比如：成功、警告和失敗，中性色常用于文本、背景、邊框、陰影等，可以體現(xiàn)出頁(yè)面的層次結(jié)構(gòu)。

（2）文字

文字的顏色不同，是代表不同的主次關(guān)系的，這個(gè)我們?cè)谠O(shè)計(jì)高保真原型時(shí)，同樣可以把握一下呀。

總結(jié)

好了，這篇文章終于寫(xiě)完了，產(chǎn)品思維是我們作為一只產(chǎn)品汪的基本思維方式，無(wú)論何時(shí)何地，大家一定要保持這種思維。

好了，以上就是今日分享的內(nèi)容了，很希望大家在評(píng)論區(qū)內(nèi)，留下您寶貴的意見(jiàn)

本文由 @曉莊同學(xué) 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來(lái)自Unsplash，基于CC0協(xié)議。