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

前言

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

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

那么什么情況可以做高保真原型，并且我們該怎么做呢？請大家往下看！

什么情況可以做高保真？

（1）不得不做

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

（2）提升技能

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

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

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

我為什么做？

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

概念

既然我們的大標題立在了這里，我們就先拋出幾個概念。

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

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

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

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

三者的面向的對象不同，制作目的和標準也就不同，大家可以感受一下。

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

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

這是某度的釋義，文字都認識，但就是記不住~

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

為什么要提這個概念呢？因為目前主流的扁平化設(shè)計風格，降低了我們做高保真原型的門檻。

進入正題

以上啰嗦了這么多，接下來就進入正題。

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

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

提取碼：ppf3

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

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

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

大家來看第一版設(shè)計的界面：

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

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

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

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

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

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

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

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

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

但我們做高保真原型時，就不能這個樣子了，因為開發(fā)會照著我們的樣子去實現(xiàn)（還是回到本文的前提，沒有UI參與）~

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

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

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

示例三：界面元素增減

先表明一個觀點：UI拿著我們的原型和需求做效果圖時，他們不會對界面的元素進行增減，他們考慮的，可能是一段文案過長，他們會對文案進行縮減。

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

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

同樣的，在維修師傅看進度條時，是否需要加入電話呢？

于是就想到了如下場景：維修師傅上門進行維修，來到了報修人填寫的地址處，沒有看到報修人，此時維修師傅肯定想打一通電話呀。于是，在高保真原型圖中，進度條就變成了這樣：

示例四：邏輯說明完善

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

這些我們在做原型圖時，可能就是一個提交按鈕放在那里了，然后等到開發(fā)的過程中，程序猿大哥們，一個個地提刀來問。

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

UI關(guān)注什么？

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

（1）風格

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

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

（2）文字

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

總結(jié)

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

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

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

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