嘗試著在畫(huà)原型之前多考慮這些步驟，畫(huà)原型應(yīng)該是一個(gè)占時(shí)較少的過(guò)程。

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

• “我問(wèn)下，這里是不是少了個(gè)狀態(tài)，點(diǎn)了之后這里XXX，那么那里XXX？”
• “這里這樣是不是不太合理，不如這樣？”
• “你這里邏輯有問(wèn)題xxxx”
• “你這原型畫(huà)的不夠細(xì)致，如果是這樣X(jué)XX，那應(yīng)該XXX”
• “你看看別人家的這個(gè)是這樣設(shè)計(jì)的，你是不是該XXX？”

…….

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

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

“設(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è)方法，也許能夠幫助你在畫(huà)原型前更能清晰把握自己的思路

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ù)需求，用戶畫(huà)像，反饋痛點(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ē)軟件，產(chǎn)品定位通常是簡(jiǎn)短的一句話：用戶打開(kāi)打開(kāi)軟件發(fā)送打車(chē)請(qǐng)求，然后車(chē)就到了。 具體的功能則需要考慮到：打開(kāi)軟件是否要告訴用戶附近有哪些車(chē)？發(fā)送請(qǐng)求是不是要多個(gè)催司機(jī)功能？

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

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

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

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

• 最有效滿足用戶目標(biāo)
• 最符合設(shè)計(jì)原則
• 最適合當(dāng)前的技術(shù)水平和成本
• 能滿足其他條件等

滿足用戶目標(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)題：

• 哪些元素需要在一起
• 如何組織才能優(yōu)化用戶工作流
• 哪些元素需要捆綁使用，哪些不需要
• 相關(guān)聯(lián)的任務(wù)使用的順序如何
• 哪些元素能幫助用戶做出決定
• 采用何種交互模式和原則
• 人物模型的心智模型如何影響元素組織

塔式塔原則也許能夠幫到你，即相關(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)然不是原型畫(huà)完了工作就結(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ù)以下四類(lèi)主要的場(chǎng)景驗(yàn)證

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

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

（2）必要場(chǎng)景：指的一些必定會(huì)發(fā)生的，但又不常用的場(chǎng)景，比如清除緩存，注銷(xiāo)賬號(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)的邏輯。比如昵稱(chē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ò)誤等情況。

嘗試著在畫(huà)原型之前多考慮這些步驟，畫(huà)原型應(yīng)該是一個(gè)占時(shí)較少的過(guò)程，嘗試著在畫(huà)原型前更加系統(tǒng)地思考，這樣在評(píng)審會(huì)上才能更好占據(jù)主導(dǎo)權(quán)。

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