動(dòng)手畫原型時(shí)你都在想想什么，面對(duì)需求，你是不是全部的堆積到原型上還是無(wú)從下手，亦或是現(xiàn)找網(wǎng)站截圖，然后copy。Oh.no!來(lái)本盟主告訴你打開原型設(shè)計(jì)的正確姿勢(shì)。

那些年，不，時(shí)間也不久；做產(chǎn)品剛滿一年，恰好0歲。剛開始什么也不懂，就學(xué)習(xí)了幾天Axure就出來(lái)闖江湖了（大三一直到畢業(yè)），到現(xiàn)在懂得了許多，也能夠發(fā)表自己的高見了（淚奔啊），產(chǎn)品路上遇到過(guò)許多坑，一個(gè)一個(gè)爬上來(lái)吧。以下是個(gè)人設(shè)計(jì)原型路上遇到的坑，希望能幫助正在入門的產(chǎn)品們。

原型的四個(gè)錯(cuò)誤根源

6月底接到一個(gè)項(xiàng)目，設(shè)計(jì)一個(gè)跟交易平臺(tái)，至今，原型還是需要改，接近200多個(gè)頁(yè)面，改的好痛苦。盟主總結(jié)錯(cuò)誤來(lái)源在于：

錯(cuò)誤根源一：

需求沒整明白就開始設(shè)計(jì)。需求是另外一個(gè)同事梳理的，稀里糊涂看了2天，大概明白做一件什么事，就開始設(shè)計(jì)。2周內(nèi)原型設(shè)計(jì)完畢，將近200頁(yè)啊。交付老大一看，大家都懵逼了。老大硬著頭皮一點(diǎn)一點(diǎn)看，覺得不合理一個(gè)字“改”，流程不對(duì)，一個(gè)字“改”。于是默默的改了快2周。

So，不要認(rèn)為懂了需求，就開始設(shè)計(jì)。請(qǐng)事先想想3w問題：

• what’s the aim？明確產(chǎn)品主要是做什么。一句話概括產(chǎn)品是個(gè)什么樣的產(chǎn)品，例如：人人都是產(chǎn)品經(jīng)理網(wǎng)站，是一個(gè)產(chǎn)品愛好者學(xué)習(xí)、交流的平臺(tái)。
• Who’s the users？產(chǎn)品的使用者？即用戶是誰(shuí)？考慮這個(gè)產(chǎn)品的使用者是哪些用戶？是否有群體特征。這是為下步做鋪墊。
• what’s the function？產(chǎn)品的核心功能是什么。在了解用戶后，考慮用戶會(huì)有哪些操作，這些操作的流程是什么？明確產(chǎn)品的主要核心功能操作有哪些。列舉所有功能點(diǎn)，找出核心。

錯(cuò)誤根源二：

創(chuàng)造新設(shè)計(jì)。說(shuō)實(shí)在我常常喜歡創(chuàng)造。這給設(shè)計(jì)和開發(fā)帶來(lái)很大痛苦。（請(qǐng)開發(fā)看到不要罵死我）一般開始設(shè)計(jì)原型時(shí)，我們都是找競(jìng)品開始研究分析。即便這樣，還是有許多不同之處。在這個(gè)將近200頁(yè)的原型中，自我創(chuàng)造許多東西，競(jìng)品太復(fù)雜，干脆不看了。UI設(shè)計(jì)時(shí)很痛苦問我，這里，那里到底要放些什么，到底要不要？這樣設(shè)計(jì)不符合用戶常規(guī)操作啊。

So，不要自找麻煩。在設(shè)計(jì)時(shí)問問自己3h問題：

• How to divide？將產(chǎn)品照模塊劃，考慮每一個(gè)模塊包含的主要內(nèi)容。
• How to design？模塊劃分好后，考慮該如何設(shè)計(jì)。
• How to combine？每一個(gè)模塊設(shè)計(jì)是否能夠組合到一起，如果能如何更好的展示呢。

錯(cuò)誤根源三：

自我設(shè)限。業(yè)務(wù)流程繪制后，開始設(shè)計(jì)原型了。按照流程，哦可能他需要這個(gè)操作，哦他可能不需要這個(gè)操作。于是這里多添加了一個(gè)選擇按鈕，那里少了一個(gè)開關(guān)按鈕，更有甚者，算了交付給用戶自己選擇吧。

So，不要自我設(shè)限（挖坑）。牽一發(fā)而動(dòng)全身，不要覺得一個(gè)按鈕不重要，一個(gè)詞不重要。優(yōu)先的產(chǎn)品定的原型是絕對(duì)不允許被改動(dòng)被改來(lái)改去。

要記住用戶都是懶的，不要把太多工作交給用戶。設(shè)計(jì)時(shí)盡量做減法，減去不必要的功能。好好想一想，這個(gè)功能去掉會(huì)不會(huì)有影響，這個(gè)詞這樣說(shuō)，會(huì)不會(huì)給用戶帶來(lái)疑惑。

錯(cuò)誤根源四：

業(yè)務(wù)邏輯沒梳理清楚。

設(shè)計(jì)過(guò)程中設(shè)計(jì)師不斷的跟你溝通，此處指的是什么，這個(gè)邏輯有點(diǎn)不對(duì)吧，于是你說(shuō)想一下（其實(shí)內(nèi)心是崩潰的，罵自己怎么這個(gè)笨，心里承認(rèn)設(shè)計(jì)師說(shuō)的很對(duì)，卻不愿承認(rèn)自己很low）。好吧，設(shè)計(jì)師看的很頭大，勉為其難的將它設(shè)計(jì)完畢（優(yōu)秀的設(shè)計(jì)師會(huì)調(diào)整布局和取舍元素，而不是原型設(shè)計(jì)成什么樣，設(shè)計(jì)成什么樣）。到了開發(fā)階段，開發(fā)看不懂，于是又會(huì)問你。如果你沒想明白整個(gè)業(yè)務(wù)流程，接下來(lái)你又會(huì)陷入沉默…于是設(shè)計(jì)、開發(fā)都會(huì)在心里默默的罵你，整個(gè)項(xiàng)目都在不斷的溝通中進(jìn)行，預(yù)期的開發(fā)時(shí)間又要延期了…

So，業(yè)務(wù)邏輯沒搞明白是最讓人頭疼的事。到開發(fā)期間發(fā)現(xiàn)錯(cuò)誤，技術(shù)要改跟多，因此將業(yè)務(wù)梳理清楚至關(guān)重要。多設(shè)想幾個(gè)用戶使用場(chǎng)景，在不同的場(chǎng)景下，用戶會(huì)有怎么樣的操作，根據(jù)這些優(yōu)化整個(gè)業(yè)務(wù)邏輯。

因此我們?cè)谠O(shè)計(jì)原型時(shí)，以上錯(cuò)誤根源夠嗎？No！不夠。

動(dòng)手畫之前請(qǐng)拿起你的2b鉛筆

Happy work在于思考，思考到位，思考方向正確，這樣會(huì)減少后面與設(shè)計(jì)、開發(fā)的不斷溝通、不斷的開會(huì)確認(rèn)。那么動(dòng)手前該思考些什么呢？

從0到1產(chǎn)品設(shè)計(jì)第一步：CEO定好產(chǎn)品的方向和模式。

方向決定產(chǎn)品的戰(zhàn)略。方向定位不準(zhǔn)，會(huì)造成又一層的理解，那么做出來(lái)的產(chǎn)品容易跑偏。模式?jīng)Q定產(chǎn)品的生命力。對(duì)于模式，在一個(gè)昝新的領(lǐng)域，行業(yè)首創(chuàng)，要考慮用戶會(huì)不會(huì)買單，接受度有多高，對(duì)于有市場(chǎng)的該如何吸引用戶。對(duì)于已經(jīng)有行業(yè)的，該如何建立自己的模式而不同于其他產(chǎn)品，獲取用戶的關(guān)注。

產(chǎn)品設(shè)計(jì)第二步：框架和業(yè)務(wù)邏輯。

產(chǎn)品負(fù)責(zé)人整理出需求的整個(gè)框架和業(yè)務(wù)邏輯。

框架幫助梳理產(chǎn)品包含哪些模塊，每個(gè)模塊里會(huì)有哪些功能。

業(yè)務(wù)邏輯：上面也講述到要從多方面考慮業(yè)務(wù)邏輯。如果一個(gè)產(chǎn)品有多個(gè)用戶群體，要考慮每個(gè)用戶群體的特征和功能操作。

產(chǎn)品第三步：請(qǐng)拿起你的2b鉛筆。

不管你是產(chǎn)品助理，亦或是產(chǎn)品經(jīng)理，如果你想變得優(yōu)秀，一定要學(xué)會(huì)獨(dú)立思考。以上思考點(diǎn)也是每個(gè)產(chǎn)品經(jīng)理必做的，因此，在設(shè)計(jì)前先思考以上，做下設(shè)計(jì)方案。

動(dòng)用你的2b鉛筆，畫下你的思考框架和頁(yè)面、業(yè)務(wù)流程圖。整體的框架可以幫你和團(tuán)隊(duì)建立起對(duì)產(chǎn)品的認(rèn)識(shí)。頁(yè)面可以幫助你取舍網(wǎng)頁(yè)元素布局、說(shuō)明。業(yè)務(wù)流程圖幫你和開發(fā)梳理產(chǎn)品的核心流程。Ok。在你最好方案后，大家無(wú)異議的情況下，就可以著手設(shè)計(jì)原型了。不要以為方案就是萬(wàn)全的，接下來(lái)設(shè)計(jì)時(shí)你也需要去思考：

頁(yè)面設(shè)計(jì)流程3步驟：

第一步：分析每個(gè)頁(yè)面包含的內(nèi)容，將其整理成模塊。

模塊劃分這個(gè)沒有一個(gè)標(biāo)準(zhǔn)，至今也在不斷的思考中。個(gè)人是認(rèn)為按照展示信息來(lái)劃分，然后根據(jù)展示信息的優(yōu)先級(jí)來(lái)進(jìn)行排版，凸出核心，隱藏有關(guān)但不緊要的內(nèi)容。

分析信息結(jié)構(gòu)：核心信息、信息模塊、信息類型。如何分析：分析頁(yè)面包含哪些模塊，每個(gè)模塊內(nèi)的信息元素有哪些？例如:人人都是產(chǎn)品經(jīng)理的首頁(yè)。模塊分為：導(dǎo)航、推薦文章、搜索、注冊(cè)登錄、專欄作家、推廣模塊、推薦書欄、底部的合作伙伴、底部導(dǎo)航等。

對(duì)于推薦文章：元素包括圖片、文章標(biāo)題、文章內(nèi)容推薦。站在用戶的角度去考慮，重要點(diǎn)在于：文章標(biāo)題，文章推薦語(yǔ)。因此這個(gè)模塊的設(shè)計(jì)應(yīng)該凸出文章標(biāo)題、簡(jiǎn)介字體要比標(biāo)題小，提取文章的圖片、吸引用戶。

對(duì)每一個(gè)模塊，我們要分析其包含的信息類型。例如：推薦文章模塊包含信息類型：圖片、標(biāo)題、文章推薦語(yǔ)。數(shù)據(jù)類型是動(dòng)態(tài)的，時(shí)時(shí)更新，后臺(tái)管理員審核推薦，寫推薦語(yǔ)。級(jí)別非常重要，讓用戶看到優(yōu)秀的文章。

用戶操作。分析完模塊的信息內(nèi)容后，就該思考用戶會(huì)有哪些操作。哪些功能是明顯操作的，哪些應(yīng)該被隱藏起來(lái)。這些功能的前置條件是什么？后置條件是什么？這些功能目前很重要嗎？

接著上面推薦文章分析。這個(gè)模塊用戶操作是點(diǎn)擊，查看文章詳情。那么如何告訴用戶這個(gè)可以點(diǎn)擊呢？鼠標(biāo)移入、移出文章、圖片有效果顯示。跳轉(zhuǎn)到文章詳情，在文章詳情頁(yè)面可進(jìn)行的操作是：用戶可以評(píng)論、收藏、查看作者名片、查看、回復(fù)其他人的評(píng)論。首先要思考，是否所有人都可以進(jìn)行這些操作，如果可以，以什么樣的方式合適。因此設(shè)置條件，評(píng)論、收藏、查看、回復(fù)其他人的評(píng)論的前置條件是：登錄之后方可評(píng)價(jià)、收藏、回復(fù)。

布局樣式：

重要模塊及元素都具備了最后就要考慮一下布局樣式。這樣做的原型也會(huì)很美觀，不至于被噴太low。思考點(diǎn)：考慮核心信息的位置、核心信息與操作的位置。布局樣式要考慮包含哪些信息元素。

例如：文章詳情頁(yè)面。包括：標(biāo)簽、文章標(biāo)題、發(fā)布時(shí)間、閱讀量、評(píng)論量、收藏量、詳情、作者名片、評(píng)論、文章標(biāo)簽、點(diǎn)贊、分享。

那么我們從用戶角度開始考慮，這篇文章主要是哪一類呢？文章質(zhì)量怎么樣呢？看到很爽時(shí)，作者是誰(shuí)，來(lái)出來(lái)給我看一下。實(shí)在是爽爆了，快，大爺給你贊一個(gè)。若太不符合胃口，評(píng)論過(guò)來(lái)，一個(gè)差評(píng)。

因此主要信息布局是這樣子的，文章標(biāo)簽，文章標(biāo)題、評(píng)論量、收藏量、詳情、作者名片、評(píng)論、文章標(biāo)簽、點(diǎn)贊。講到這里了自己去設(shè)想幾種布局吧。

總結(jié)：

在一年的學(xué)習(xí)中，做過(guò)4個(gè)產(chǎn)品，現(xiàn)在回頭看看簡(jiǎn)直是大寫的丑，無(wú)比的丑。丑且不說(shuō)，整個(gè)過(guò)程的溝通成本很大，且80%會(huì)出現(xiàn)返工。不斷的總結(jié)，不斷的思考，才能走的更穩(wěn)。

作者：路漫漫，有點(diǎn)拖延癥的逗比范產(chǎn)品。

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