在畫(huà)原型的時(shí)候，如果邏輯不清晰就會(huì)導(dǎo)致反復(fù)的修改或者漏掉一部分內(nèi)容，我們要使得畫(huà)原型這個(gè)步驟更為高效的話(huà)，我們得明確自己的目的，內(nèi)容，以及所要用到的工具。

對(duì)于內(nèi)容較少的頁(yè)面，或者是在已有的頁(yè)面上做細(xì)節(jié)優(yōu)化，畫(huà)原型比較簡(jiǎn)單，但是一旦涉及到相對(duì)功能比較復(fù)雜的頁(yè)面，尤其是從無(wú)到有的過(guò)程中，如果邏輯不夠清晰，想到哪畫(huà)到哪，很可能反復(fù)修改，或者漏掉一些內(nèi)容。所謂磨刀不誤砍柴工，畫(huà)原型之前做好必要的準(zhǔn)備工作，會(huì)讓你的工作更高效。

1. 目的

第一點(diǎn)是明確目的。每一次產(chǎn)品迭代重點(diǎn)要解決的問(wèn)題是不一樣的，比如：電商產(chǎn)品的商品詳情頁(yè)，當(dāng)前版本的主要目的可能是優(yōu)化交互體驗(yàn)，也可能是提高購(gòu)買(mǎi)轉(zhuǎn)化，還可能要降低跳出。如果幾個(gè)目的同時(shí)考慮難免邏輯混亂，可以一個(gè)版本重點(diǎn)解決一個(gè)問(wèn)題，即使需要同時(shí)解決多個(gè)問(wèn)題，也分開(kāi)來(lái)一一解決。

這里我們假設(shè)這次產(chǎn)品迭代的目的是商品詳情頁(yè)優(yōu)化購(gòu)買(mǎi)選項(xiàng)的交互體驗(yàn)，實(shí)際工作中目的需要更明確，比如：實(shí)現(xiàn)版本、顏色的雙向選擇。然后我們把這句話(huà)寫(xiě)在原型的旁邊，如圖16-1。

圖16-1 第一點(diǎn)：明確目的

What？還要寫(xiě)下來(lái)？搞這么麻煩有必要嗎？

非常有必要！寫(xiě)下來(lái)的好處是，這樣隨時(shí)可以看到，時(shí)刻提醒自己防止跑偏，并且可以原型畫(huà)到哪里，就把文字拖動(dòng)到哪里，效果非常神奇，你試下就知道了。就好像考試審題的時(shí)候，嘴里不出聲的讀題，然后讓筆尖跟隨著題目的文字移動(dòng)，讀到哪里筆尖就移動(dòng)到哪里，可以在考試過(guò)程中更好的集中精力。

2.?內(nèi)容

第二點(diǎn)是明確內(nèi)容。直白點(diǎn)講就是，你要在頁(yè)面上放什么東西，比如：商品詳情頁(yè)的購(gòu)買(mǎi)選項(xiàng)部分，包括了顏色、版本等，每一項(xiàng)還包括了更詳細(xì)的內(nèi)容，我們都把它用文字的方式描述出來(lái)，以自己能看懂為準(zhǔn)。

比如：

1. 顏色：默認(rèn)展示全部顏色，設(shè)置最小寬度，超出則增加寬度；
2. 版本：默認(rèn)展示全部版本，設(shè)置最小寬度，超出則增加寬度；
3. 套餐：套餐名稱(chēng)、價(jià)格、節(jié)省金額，默認(rèn)選擇推薦套餐。

明確之后，如圖16-2。

圖16-2 第二點(diǎn)：明確內(nèi)容

3. 工具

目的、內(nèi)容都明確了，最后一點(diǎn)，確定這些內(nèi)容的展示形式和交互方式，也就是說(shuō)，以已經(jīng)確定的內(nèi)容為基礎(chǔ)，你用什么方式來(lái)達(dá)到最初設(shè)定的目的。

如圖16-3，我們看到小米商城的手機(jī)購(gòu)買(mǎi)選項(xiàng)，只能先選擇版本再選擇顏色，不能先選擇顏色后選擇版本，假設(shè)我們的需求就是，提供一種更好的交互方式，來(lái)實(shí)現(xiàn)版本、顏色的雙向選擇。

比如：

1. 選中版本后，缺失的顏色文案置灰，并增加刪除線(xiàn)，該顏色選項(xiàng)不可點(diǎn)擊；
2. 選中顏色后，缺失的版本文案同樣置灰，并增加刪除線(xiàn)，該版本選項(xiàng)不可點(diǎn)擊。

圖16-3 小米版本、顏色選擇（圖片來(lái)源：小米商城）

明確之后，如圖16-4。

圖16-4 第三點(diǎn)：明確工具

看到圖16-4的描述，有沒(méi)有感覺(jué)思路清晰、胸有成竹？

現(xiàn)在一切準(zhǔn)備就緒，可以開(kāi)始動(dòng)起來(lái)啦！我個(gè)人的習(xí)慣是，看著描述，完成一條刪除一條，全部完成之后，整個(gè)描述就全部刪掉了，如果你覺(jué)得有必要，也可能一直保留，作為日后版本迭代的參考。

總結(jié)

準(zhǔn)備工作的大體思路非常簡(jiǎn)單，就好像最早做產(chǎn)品的時(shí)候，是沒(méi)有畫(huà)原型這一步的，設(shè)計(jì)師了解需求之后直接出設(shè)計(jì)稿，花了很長(zhǎng)時(shí)間設(shè)計(jì)好之后又修改，效率太低了，所以在這個(gè)過(guò)程中插入一步線(xiàn)框圖，把頁(yè)面元素、布局、交互等先明確好，再來(lái)設(shè)計(jì)效率就高很多。

那我們現(xiàn)在要提高畫(huà)原型的效率，也是同樣的思路，在動(dòng)手之前先用文字的形式把目的、內(nèi)容、工具先明確下來(lái)。

這套方法，是我剛?cè)胄械臅r(shí)候，當(dāng)時(shí)的產(chǎn)品總監(jiān)手把手教我的，很多年過(guò)去了一直沿用至今，對(duì)于新產(chǎn)品和復(fù)雜頁(yè)面尤其有效，可以說(shuō)是名副其實(shí)的私家珍藏版，雖然之后也看了很多產(chǎn)品相關(guān)的書(shū)，竟然沒(méi)有一本書(shū)講到這個(gè)問(wèn)題，現(xiàn)在把它分享出來(lái)希望對(duì)你有所幫助。

#專(zhuān)欄作家#

張旭東，微信公眾號(hào)：旭東愛(ài)折騰，人人都是產(chǎn)品經(jīng)理專(zhuān)欄作家。努比亞手機(jī)商城產(chǎn)品經(jīng)理，前華強(qiáng)旗艦店產(chǎn)品經(jīng)理，F(xiàn)ON樂(lè)隊(duì)吉他手。

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

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