不知道大家在畫原型時(shí)會(huì)不會(huì)遇到這樣的問(wèn)題：

1.“我問(wèn)下，這里是不是少了個(gè)狀態(tài),，點(diǎn)了之后這里XXX,，那么那里XXX？”

2.“這里這樣是不是不太合理,，不如這樣,？”

3.“你這里邏輯有問(wèn)題xxxx”

4.“你這原型畫的不夠細(xì)致，如果是這樣X(jué)XX,，那應(yīng)該XXX”

.......

在原型設(shè)計(jì)時(shí),，一定要注重細(xì)節(jié)，但是,，我們常說(shuō)在構(gòu)思原型時(shí)不要過(guò)早陷入到細(xì)節(jié)之中去,，到底應(yīng)該怎么做才好呢？

在畫原型前應(yīng)該在一個(gè)更高的層次上考慮用戶界面,，行為和整體產(chǎn)品結(jié)構(gòu)之間的關(guān)系,，這個(gè)階段叫做設(shè)計(jì)框架。比如設(shè)計(jì)一款汽車,，一定是先設(shè)計(jì)它的結(jié)構(gòu),，最后設(shè)計(jì)它的細(xì)節(jié)，如何開(kāi)門,，什么樣的車燈等,。

“設(shè)計(jì)框架定義了用戶體驗(yàn)的整個(gè)結(jié)構(gòu)，包括底層組織原則、屏幕上功能元素的排列,、工作流程,、產(chǎn)品交互、傳遞信息的視覺(jué)和形式語(yǔ)言,、功能性和品牌識(shí)別等,，形式設(shè)計(jì)和行為設(shè)計(jì)必須保持一致，交互設(shè)計(jì)者利用場(chǎng)景和需求創(chuàng)建屏幕和行為草圖,，完成交互框架設(shè)計(jì),。”

通過(guò)以下6個(gè)方法,，也許能夠幫助你在畫原型前更能清晰把握自己的思路

1,，產(chǎn)品定位，定義形式及交互模式

產(chǎn)品定位主要需要考慮三個(gè)問(wèn)題,；什么樣的用戶想要什么,？我們要做什么樣的產(chǎn)品（也可以只是個(gè)模塊或功能）？我們要做什么樣的,？

這是一個(gè)產(chǎn)品要考慮的基本問(wèn)題,，但如果這些問(wèn)題都沒(méi)考慮清楚，那么后期的設(shè)計(jì)一旦出了問(wèn)題,，全部將會(huì)重頭開(kāi)始,。一般可以根據(jù)需求，用戶畫像,，反饋痛點(diǎn),，運(yùn)營(yíng)同事，老大要求等對(duì)產(chǎn)品定位展開(kāi)分析,。

定義形式可以理解為用戶會(huì)投入多大的注意力和產(chǎn)品互動(dòng),，產(chǎn)品的行為會(huì)對(duì)用戶投入的注意力做出何種反饋。定義形式可以通過(guò)產(chǎn)品使用的情景場(chǎng)景,，環(huán)境等做出決策,。

交互模式即用戶與產(chǎn)品互動(dòng)的方式，受到產(chǎn)品定位和形式的影響,，如果是手機(jī)應(yīng)用,，那么交互模式基本就是單手觸控。手指點(diǎn)觸,，滑動(dòng)等,。web產(chǎn)品則是鼠標(biāo)點(diǎn)擊等，VR產(chǎn)品用視覺(jué)停留等,，不用的交互模式會(huì)有不同的限制,，應(yīng)該在早期就規(guī)劃清楚,。

2.定義功能和數(shù)據(jù)

這里的定義功能則是指的較為具體的功能及對(duì)應(yīng)的數(shù)據(jù)元素，與產(chǎn)品定位中考慮的功能不同,。這里將需要將宏觀的功能具體化,。

比如設(shè)計(jì)一個(gè)打車軟件，產(chǎn)品定位通常是簡(jiǎn)短的一句話：用戶打開(kāi)打開(kāi)軟件發(fā)送打車請(qǐng)求,，然后車就到了,。 具體的功能則需要考慮到：打開(kāi)軟件是否要告訴用戶附近有哪些車？發(fā)送請(qǐng)求是不是要多個(gè)催司機(jī)功能,？

而數(shù)據(jù)元素則需要考慮到：告訴用戶附近有哪些車的時(shí)候,，要告訴他們具體是多少米？催司機(jī)時(shí)是否只用發(fā)送催司機(jī)的文本消息,？

每個(gè)功能及元素的定義要針對(duì)需求,，考慮周全了，產(chǎn)品各方面都有會(huì)有清晰的意圖,。

數(shù)據(jù)元素通常都是彼此關(guān)聯(lián)的,，建議在定義產(chǎn)品數(shù)據(jù)時(shí)可以通過(guò)畫數(shù)據(jù)流圖來(lái)分析，視覺(jué)化的數(shù)據(jù)元素將會(huì)讓你更能結(jié)構(gòu)化地去管理,，去分類排布,，讓你的設(shè)計(jì)逐漸清晰具體，讓開(kāi)發(fā)人員更好理解你的意圖,。

功能及數(shù)據(jù)就可以形成一個(gè)較為初步的設(shè)計(jì)方案了，這時(shí)就可以開(kāi)始對(duì)這個(gè)方案進(jìn)行檢測(cè)了,。檢驗(yàn)解決方案最好是從情景場(chǎng)景開(kāi)始,，分析人物畫像，用戶的目標(biāo),，用戶的的心理模型,。一個(gè)簡(jiǎn)單的需求將會(huì)有多種解決方案，這時(shí)候需要考驗(yàn)設(shè)計(jì)決策能力,，通?？梢詮囊韵聨讉€(gè)方面著手：

（1）最有效滿足用戶目標(biāo)

（2）最符合設(shè)計(jì)原則

（3）最適合當(dāng)前的技術(shù)水平和成本

（4）最能滿足其他條件等

滿足用戶目標(biāo)應(yīng)該是一個(gè)順暢的過(guò)程，減少用戶理解或?qū)W習(xí)成本,，讓用戶能夠順暢地操作軟件達(dá)成自己的目標(biāo),。檢驗(yàn)這個(gè)過(guò)程有個(gè)好方法，即用戶對(duì)該產(chǎn)品產(chǎn)生控制感,，能夠潛意識(shí)地完成操作,。

android和iOS的原則已經(jīng)考慮地較為詳細(xì)和周全了，使用它們將會(huì)對(duì)你的抉擇有很好的幫助,。

3.確定層級(jí)和頁(yè)面

確定一個(gè)頁(yè)面應(yīng)該放多少東西,，一個(gè)任務(wù)要分多少步來(lái)完成,，通常情況下，一個(gè)頁(yè)面能夠完成的任務(wù)不要分多個(gè)頁(yè)面完成,，盡量不要超過(guò)3個(gè)頁(yè)面,。

當(dāng)頁(yè)面元素居多時(shí)要保證用戶合理的視覺(jué)線，最需要用戶知道的東西要在最顯眼的地方,，次級(jí)居之,，就算是一個(gè)頁(yè)面也是有層級(jí)之分的，可以通過(guò)元素大小,，顏色,，來(lái)強(qiáng)化用戶對(duì)層次的感知。

也并非所有情況下都需要減少元素或是頁(yè)面來(lái)幫助用戶快速完成任務(wù),，比如支付頁(yè)面,，多級(jí)確認(rèn)讓用戶減少犯錯(cuò)成本。一些重要的操作多一個(gè)頁(yè)面確認(rèn)反而更能讓用戶安心,。

在這個(gè)階段通常需要考慮這樣一些問(wèn)題：

（1）哪些元素需要在一起

（2）如何組織才能優(yōu)化用戶工作流

（3）哪些元素需要捆綁使用,，哪些不需要

（4）相關(guān)聯(lián)的任務(wù)使用的順序如何

（5）哪些元素能幫助用戶做出決定

（6）采用何種交互模式和原則

（7）人物模型的心智模型如何影響元素組織

塔式塔原則也許能夠幫到你，即相關(guān)聯(lián)的控件應(yīng)該組合在一起,，控件應(yīng)該靠近所要控制的對(duì)象,。

4.繪制原型草圖

有了以上的構(gòu)思這一步就會(huì)變得容易，但要注意的是,，最好是從整體且高層次的框架開(kāi)始構(gòu)建,，（若使用axure繪制原型，這個(gè)地方就可以考慮好使用母版避免以后較多重復(fù)的修改）不要被細(xì)節(jié)分散了注意力,，細(xì)節(jié)留到最后去仔細(xì)推敲,。

5.構(gòu)建用戶行為路線

當(dāng)然不是原型畫完了工作就結(jié)束了，在拿去評(píng)審或是交付給研發(fā)之前,，要盡可能詳細(xì)地完成自檢,。構(gòu)建用戶行為路線則是考慮好用戶使用產(chǎn)品不同界面的主要路徑。

如當(dāng)用戶打開(kāi)app后,，新用戶在什么地方提示登錄,，用戶在什么時(shí)候，什么樣的場(chǎng)景下先點(diǎn)擊什么,，再點(diǎn)擊什么,，在不同的頁(yè)面之間是如何跳轉(zhuǎn)完成任務(wù)的等等。

這里需要考慮的是用戶最頻繁也是日常的一個(gè)行為路徑,，可以通過(guò)給用戶設(shè)想不同的情景下完成什么任務(wù)來(lái)構(gòu)建,。構(gòu)建完成后可以自己先行走查，刪除不必要的元素,，優(yōu)化重要的元素,，使得用戶的主要任務(wù)行為路線是最為清晰且易記憶的,。

注意用戶的行為也可能不是線性的過(guò)程，可能會(huì)在幾個(gè)頁(yè)面之間往返,。

6.通過(guò)場(chǎng)景驗(yàn)證檢查設(shè)計(jì)

通過(guò)用戶行為路線調(diào)整了整個(gè)流程或框架,，確保主要場(chǎng)景沒(méi)有問(wèn)題后，可以將重心轉(zhuǎn)移到一些次的流程和場(chǎng)景之中,，目的在于,，找到原型或邏輯的漏洞，調(diào)整并優(yōu)化,。

通?？梢愿鶕?jù)以下四類主要的場(chǎng)景驗(yàn)證

（1）路徑分岔點(diǎn)：指的是用戶對(duì)多種選擇時(shí)停留的位置。

用購(gòu)物行為來(lái)舉個(gè)例子,，你的用戶行為中,，用戶是加入購(gòu)物車，下訂單,，付款等一整套流程,，這個(gè)流程中，加入購(gòu)物車,，下訂單,，付款都有分岔點(diǎn)，如用戶取消訂單,，用戶放棄付款,，這些行為背后的邏輯該是如何的？

（2）必要場(chǎng)景：指的一些必定會(huì)發(fā)生的,，但又不常用的場(chǎng)景,，比如清除緩存，注銷賬號(hào)等,。雖然用戶會(huì)較少用到，但這部分的設(shè)計(jì)也是需要合理且易用的,。因?yàn)橛脩舨唤?jīng)常用到,， 缺少對(duì)這種操作的學(xué)習(xí)過(guò)程，用戶可能會(huì)忘記如何操作,。

（3）邊緣情景場(chǎng)景：也就是通常說(shuō)的邊緣情況,，這部分的問(wèn)題測(cè)試同學(xué)會(huì)經(jīng)常考慮到,，但在測(cè)試之前應(yīng)該考慮清楚對(duì)應(yīng)的邏輯,。比如昵稱重名，重復(fù)提交取消訂單,，頻繁發(fā)送好友申請(qǐng)等等,。

邊緣情景通常還需要考慮一個(gè)極限值問(wèn)題,，比如一天可以添加多少好友？達(dá)到好友上線后如何,？

這部分需要特別關(guān)注,，也許還需要向研發(fā)咨詢對(duì)應(yīng)的代碼策略。

（4）特殊場(chǎng)景：通常不是用戶主觀造成的問(wèn)題,，比如app崩潰,，網(wǎng)絡(luò)請(qǐng)求延遲，網(wǎng)頁(yè)404錯(cuò)誤等情況,。

嘗試著在畫原型之前多考慮這些步驟,，畫原型應(yīng)該是一個(gè)占時(shí)較少的過(guò)程，嘗試著在畫原型前更加系統(tǒng)地思考,。

*著作權(quán)歸作者所有,，轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)。