動手畫原型時你都在想想什么，面對需求邓线，你是不是全部的堆積到原型上還是無從下手，亦或是現(xiàn)找網(wǎng)站截圖煌恢，然后copy骇陈。Oh.no!來本盟主告訴你打開原型設計的正確姿勢。
那些年瑰抵，不你雌，時間也不久，做產(chǎn)品剛滿一年二汛，恰好0歲婿崭。剛開始什么也不懂，就學習了幾天Axure就出來闖江湖了（大三一直到畢業(yè)）肴颊，到現(xiàn)在懂得了許多氓栈，也能夠發(fā)表自己的高見了（淚奔啊）婿着，產(chǎn)品路上遇到過許多坑授瘦，一個一個爬上來吧。以下是個人設計原型路上遇到的坑祟身，希望能幫助正在入門的產(chǎn)品們奥务。
盟主親歷篇
6月底接到一個項目，設計一個跟交易平臺袜硫，至今，原型還是需要改挡篓，接近200多個頁面婉陷，改的好痛苦。盟主總結錯誤來源在于:
錯誤根源一：
需求沒整明白就開始設計官研。需求是另外一個同事梳理的秽澳，稀里糊涂看了2天，大概明白做一件什么事戏羽，就開始設計担神。2周內(nèi)原型設計完畢，將近200頁啊始花。交付老大一看妄讯，大家都懵逼了孩锡。老大硬著頭皮一點一點看，覺得不合理一個字“改”亥贸，流程不對躬窜，一個字“改”。于是默默的改了快2周炕置。
So荣挨，不要認為懂了需求，就開始設計朴摊。請事先想想3w問題：
1.what's the aim?明確產(chǎn)品主要是做什么默垄。一句話概括產(chǎn)品是個什么樣的產(chǎn)品，例如：人人都是產(chǎn)品經(jīng)理網(wǎng)站甚纲，是一個產(chǎn)品愛好者學習口锭、交流的平臺。
2.Who's the users贩疙？產(chǎn)品的使用者讹弯？即用戶是誰？考慮這個產(chǎn)品的使用者是哪些用戶这溅？是否有群體特征组民。這是為下步做鋪墊。
3.what's the function悲靴？產(chǎn)品的核心功能是什么臭胜。在了解用戶后，考慮用戶會有哪些操作癞尚，這些操作的流程是什么耸三？明確產(chǎn)品的主要核心功能操作有哪些。列舉所有功能點浇揩，找出核心仪壮。
錯誤根源二：
創(chuàng)造新設計。說實在我常常喜歡創(chuàng)造胳徽。這給設計和開發(fā)帶來很大痛苦积锅。（請開發(fā)看到不要罵死我）一般開始設計原型時，我們都是找競品開始研究分析养盗。即便這樣缚陷，還是有許多不同之處。在這個將近200頁的原型中往核，自我創(chuàng)造許多東西箫爷，競品太復雜，干脆不看了。UI設計時很痛苦問我虎锚，這里硫痰，那里到底要放些什么，到底要不要翁都？這樣設計不符合用戶常規(guī)操作啊碍论。
S
o，不要自找麻煩柄慰。在設計時問問自己3h問題：
How to divide鳍悠？將產(chǎn)品照模塊劃，考慮每一個模塊包含的主要內(nèi)容坐搔。
How to design?模塊劃分好知乎藏研，考慮該如何設計。
How to combine? 每一個模塊設計是否能夠組合到一起概行，如果能如何更好的展示呢蠢挡。
錯誤根源三：
自我設限。業(yè)務流程繪制后凳忙，開始設計原型了业踏。按照流程，哦可能他需要這個操作涧卵，哦他可能不需要這個操作勤家。于是這里多添加了一個選擇按鈕，那里少了一個開關按鈕柳恐，更有甚者伐脖，算了交付給用戶自己選擇吧。
So乐设，不要自我設限（挖坑）讼庇。牽一發(fā)而動全身，不要覺得一個按鈕不重要近尚，一個詞不重要蠕啄。優(yōu)先的產(chǎn)品定的原型是絕對不允許被改動被改來改去。
要記住用戶都是懶的戈锻，不要把太多工作交給用戶介汹。設計時盡量做減法，減去不必要的功能舶沛。好好想一想，這個功能去掉會不會有影響窗价，這個詞這樣說如庭，會不會給用戶帶來疑惑。
錯誤根源四：業(yè)務邏輯沒梳理清楚。
設計過程中設計師不斷的跟你溝通坪它，此處指的是什么骤竹，這個邏輯有點不對吧，于是你說想一下（其實內(nèi)心是崩潰的往毡，一萬個草泥馬從內(nèi)心奔過蒙揣，罵自己怎么這個笨，心里承認設計師說的很對开瞭，卻不愿承認自己很low）懒震。好吧，設計師看的很頭大嗤详，勉為其難的將它設計完畢（優(yōu)秀的設計師會調(diào)整布局和取舍元素个扰，而不是原型設計成什么樣，設計成什么樣）葱色。到了開發(fā)階段递宅，開發(fā)看不懂，于是又會問你苍狰。如果你沒想明白整個業(yè)務流程办龄，接下來你又會陷入沉默...于是設計、開發(fā)都會在心里默默的罵你淋昭，整個項目都在不斷的溝通中進行俐填，預期的開發(fā)時間又要延期了...
圖1開發(fā)的心里是這樣的
So，業(yè)務邏輯沒搞明白是最讓人頭疼的事响牛。到開發(fā)期間發(fā)現(xiàn)錯誤玷禽，技術要改跟多，因此將業(yè)務梳理清楚至關重要呀打。多設想幾個用戶使用場景矢赁，在不同的場景下，用戶會有怎么樣的操作贬丛，根據(jù)這些優(yōu)化整個業(yè)務邏輯撩银。
因此我們在設計原型時，以上錯誤根源夠嗎豺憔？No,不夠额获。
動手畫之前請拿起你的2b鉛筆
Happy work在于思考，思考到位恭应，思考方向正確抄邀，這樣會減少后面與設計、開發(fā)的不斷溝通昼榛、不斷的開會確認境肾。那么動手前該思考些什么呢？
從0到1產(chǎn)品設計第一步：CEO定好產(chǎn)品的方向和模式。
方向決定產(chǎn)品的戰(zhàn)略奥喻。方向定位不準偶宫，會造成又一層的理解，那么做出來的產(chǎn)品容易跑偏环鲤。模式?jīng)Q定產(chǎn)品的生命力纯趋。對于模式，在一個昝新的領域冷离，行業(yè)首創(chuàng)吵冒，要考慮用戶會不會買單，接受度有多高酒朵，對于有市場的該如何吸引用戶桦锄。對于已經(jīng)有行業(yè)的，該如何建立自己的模式而不同于其他產(chǎn)品蔫耽，獲取用戶的關注结耀。
產(chǎn)品設計第二步：框架和業(yè)務邏輯。
產(chǎn)品負責人整理出需求的整個框架和業(yè)務邏輯匙铡。
框架幫助梳理產(chǎn)品包含哪些模塊图甜，每個模塊里會有哪些功能。
業(yè)務邏輯：上面也講述到要從多方面考慮業(yè)務邏輯鳖眼。如果一個產(chǎn)品有多個用戶群體黑毅，要考慮每個用戶群體的特征和功能操作。
產(chǎn)品第三步：請拿起你的2b鉛筆钦讳。
不管你是產(chǎn)品助理矿瘦，亦或是產(chǎn)品經(jīng)理，如果你想變得優(yōu)秀愿卒，一定要學會獨立思考缚去。以上思考點也是每個產(chǎn)品經(jīng)理必做的，因此琼开，在設計前先思考以上易结，做下設計方案。（更多請閱讀原文柜候，動手之前請先拿起你的2b鉛筆搞动。）
你的2b鉛筆，畫下你的思考框架和頁面渣刷、業(yè)務流程圖鹦肿。整體的框架可以幫你和團隊建立起對產(chǎn)品的認識。頁面可以幫助你取舍網(wǎng)頁元素布局辅柴、說明狮惜。業(yè)務流程圖幫你和開發(fā)梳理產(chǎn)品的核心流程高诺。Ok。在你最好方案后碾篡，大家無異議的情況下，就可以著手設計原型了筏餐。不要以為方案就是萬全的开泽，接下來設計時你也需要去思考：
頁面設計流程3步驟：
第一步：分析每個頁面包含的內(nèi)容，將其整理成模塊魁瞪。
模塊劃分這個沒有一個標準穆律，至今也在不斷的思考中。個人是認為按照展示信息來劃分导俘，然后根據(jù)展示信息的優(yōu)先級來進行排版峦耘，凸出核心，隱藏有關但不緊要的內(nèi)容旅薄。
分析信息結構：核心信息辅髓、信息模塊、信息類型少梁。如何分析：分析頁面包含哪些模塊洛口，每個模塊內(nèi)的信息元素有哪些？例如:人人都是產(chǎn)品經(jīng)理的首頁凯沪。模塊分為：導航第焰、推薦文章、搜索妨马、注冊登錄挺举、專欄作家、推廣模塊烘跺、推薦書欄湘纵、底部的合作伙伴、底部導航等液荸。
對于推薦文章：元素包括圖片瞻佛、文章標題、文章內(nèi)容推薦伤柄。站在用戶的角度去考慮，重要點在于：文章標題文搂，文章推薦語。因此這個模塊的設計應該凸出文章標題煤蹭、簡介字體要比標題小取视，提取文章的圖片、吸引用戶作谭。
對每一個模塊，我們要分析其包含的信息類型奄毡。例如：推薦文章模塊包含信息類型：圖片、標題吼过、文章推薦語。數(shù)據(jù)類型是動態(tài)的盗忱，時時更新，后臺管理員審核推薦趟佃，寫推薦語扇谣。級別非常重要，讓用戶看到優(yōu)秀的文章揖闸。
用戶操作揍堕。分析完模塊的信息內(nèi)容后，就該思考用戶會有哪些操作汤纸。哪些功能是明顯操作的衩茸，哪些應該被隱藏起來。這些功能的前置條件是什么贮泞？后置條件是什么楞慈？這些功能目前很重要嗎？
接著上面推薦文章分析啃擦。這個模塊用戶操作是點擊囊蓝，查看文章詳情。那么如何告訴用戶這個可以點擊呢令蛉？鼠標移入聚霜、移出文章、圖片有效果顯示珠叔。跳轉(zhuǎn)到文章詳情蝎宇，在文章詳情頁面可進行的操作是：用戶可以評論、收藏祷安、查看作者名片姥芥、查看、回復其他人的評論汇鞭。首先要思考凉唐，是否所有人都可以進行這些操作庸追，如果可以，以什么樣的方式合適台囱。因此設置條件淡溯，評論、收藏玄坦、查看血筑、回復其他人的評論的前置條件是：登錄之后方可評價、收藏煎楣、回復。
布局樣式
重要模塊及元素都具備了最后就要考慮一下布局樣式车伞。這樣做的原型也會很美觀择懂，不至于被噴太low。思考點：考慮核心信息的位置另玖、核心信息與操作的位置困曙。布局樣式要考慮包含哪些信息元素。
例如：文章詳情頁面谦去。包括：標簽慷丽、文章標題、發(fā)布時間鳄哭、閱讀量、評論量妆丘、收藏量、詳情奶赠、作者名片药有、評論、文章標簽苇经、點贊羊苟、分享。
那么我們從用戶角度開始考慮令花，這篇文章主要是哪一類呢？文章質(zhì)量怎么樣呢兼都？看到很爽時，作者是誰趟章，來出來給我看一下慎王。實在是爽爆了，快蜀漆，大爺給你贊一個咱旱。若太不符合胃口，評論過來鲜侥，一個差評描函。
因此主要信息布局是這樣子的搂赋，文章標簽，文章標題基公、評論量宋欺、收藏量、詳情酸休、作者名片祷杈、評論、文章標簽宿刮、點贊。講到這里了自己去設想幾種布局吧僵缺。
總結：在一年的學習中，做過4個產(chǎn)品翠胰，現(xiàn)在回頭看看簡直是大寫的丑自脯，無比的丑。丑且不說闺兢，整個過程的溝通成本很大，且80%會出現(xiàn)返工脚囊。不斷的總結宽档，不斷的思考酵幕，才能走的更穩(wěn)缓艳。
本文由 @路漫漫 原創(chuàng)發(fā)布于產(chǎn)品壹佰
