中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

在我面試幾百個(gè)產(chǎn)品經(jīng)理的經(jīng)歷中，我發(fā)現(xiàn)很多產(chǎn)品新人都在學(xué)習(xí)一些質(zhì)量不高的教程。這些教程通常用前大半截的篇幅來(lái)介紹一些形而上的理論，真的到了實(shí)操階段卻草草收尾，只教你一些表面的東西，例如流程圖長(zhǎng)什么樣、動(dòng)態(tài)面板怎么畫，很少去討論在真正的工作中，一個(gè)PRD到底是怎樣誕生的。所以我想做一些教程給你們看，讓你們能夠真正掌握實(shí)操的過(guò)程。

但在我整理過(guò)去作品的這段時(shí)間里，我發(fā)現(xiàn)很少作品可以寫成圖文教程，因?yàn)槲也捎玫亩际敲嫦驅(qū)ο蟮脑O(shè)計(jì)方法，每個(gè)模塊都是靜態(tài)的，模塊之間是互相成就的，不存在一個(gè)“線性的流程”。用幾小時(shí)視頻加上我的嘴炮旁白是可以做到的，但是用圖文的形式就很難表達(dá)清楚。

每當(dāng)這種時(shí)候我都很希望能掌握電影《降臨》中外星人傳授給地球人的表意文字。一個(gè)水墨狀的圓弧上，每一個(gè)突觸都代表一個(gè)事物，突觸之間的位置關(guān)系代表了它們?cè)谶@個(gè)故事里的角色。這個(gè)故事沒(méi)有開(kāi)頭和結(jié)尾，你可以用一萬(wàn)個(gè)聲音去敘述這個(gè)故事，而故事本身卻并不復(fù)雜，因?yàn)闀r(shí)間的一維方向性在這里被打破，只有角色，和角色之間的所有的關(guān)系。

不過(guò)這個(gè)系統(tǒng)是個(gè)例外，它是我上家公司政務(wù)SAAS系統(tǒng)中的一個(gè)小功能，叫做簡(jiǎn)易表單系統(tǒng)。顧名思義，它比較簡(jiǎn)易，因此它有機(jī)會(huì)寫成圖文教程。

寫這篇教程之前，我花了半天的時(shí)間來(lái)整理它的提綱，然后花了一天半的時(shí)間從以前的文檔里慢慢找到配圖并PS。從提綱來(lái)看，雖然沒(méi)有介紹到全部的思路，但是我在敘事結(jié)構(gòu)上做了一些取舍，讓你可以更輕松地跟著我的思路走下去，所以現(xiàn)在我們進(jìn)入正題。

注：本文在第3章之前都是抽象邏輯探索，你可能會(huì)覺(jué)得枯燥而跳過(guò)。但是當(dāng)你看完后面的原型章節(jié)之后，你會(huì)發(fā)現(xiàn)，你還是得返回來(lái)重看一遍。

立項(xiàng)和整理需求

我不會(huì)人五人六地告訴你我是怎么調(diào)研市場(chǎng)和研究競(jìng)品的，因?yàn)檫@個(gè)項(xiàng)目不存在。在實(shí)際的互聯(lián)網(wǎng)公司工作中，很多痛點(diǎn)是痛到不行的，但是很多時(shí)候大家對(duì)痛苦的忍受程度、愚鈍程度也是超過(guò)你想象的，越大型、人均頭發(fā)數(shù)量越少的公司越是這樣。

這種時(shí)候，產(chǎn)品經(jīng)理也很容易因?yàn)閴毫ΧS波逐流，但你的使命就是去做指路人。只要把你的方案表述出來(lái)，告訴別人怎么你是怎么解決老板和大家的痛苦的，你就可以立項(xiàng)。調(diào)研報(bào)告和各種炫彩的ppt不是必須的，它們通常是因?yàn)槟愕牟邉澃覆粔蚱?，或者大家還不夠相信你。沒(méi)有什么ppt能比一個(gè)漂亮的落地計(jì)劃直接甩在大家臉上更有說(shuō)服力。

上圖是某個(gè)銀行給我們的Excel表，他們想把這套表格搬到線上來(lái)，圖里只是其中一個(gè)合作銀行的一部分的表格。而且，我們當(dāng)時(shí)在做的也不光是銀行的線上表單，剛好還有某個(gè)地區(qū)政府的科創(chuàng)局也需要上線一個(gè)系統(tǒng)，讓企業(yè)用在線表單填寫信息上傳上去。

當(dāng)你看到這樣的可怕的表格，不是上圖這一份，而是十幾份，你會(huì)怎樣做？

“讓我們直接一頁(yè)一頁(yè)畫成原型，然后交給程序員一個(gè)字段一個(gè)字段開(kāi)發(fā)吧！”——在我看到我的產(chǎn)品經(jīng)理莫名其妙地加班、程序員也在莫名其妙地加班之前，他們就是這樣做的。我現(xiàn)在截圖給你看，你會(huì)覺(jué)得這樣很愚蠢，然而當(dāng)你身臨其境的時(shí)候，每天被老板分配的任務(wù)壓到喘不過(guò)氣的時(shí)候，你真的會(huì)很容易失去跳出來(lái)說(shuō)皇帝沒(méi)穿衣服的勇氣。

顯然你要去制作一個(gè)通用的表單系統(tǒng)，這個(gè)表單系統(tǒng)能照顧到這些不同的數(shù)據(jù)填寫需求，讓程序員開(kāi)發(fā)出來(lái)，然后撒手不管，丟給客戶或者運(yùn)營(yíng)去配置具體的數(shù)據(jù)。

很多產(chǎn)品經(jīng)理不知道去分辨老板哪些指令是專業(yè)的，哪些是業(yè)余的，自己甘心做一個(gè)“需求翻譯器”，還納悶為什么自己的需求不被人好好執(zhí)行。其實(shí)你的方案能讓大家少加班，還能讓大家出品更好，你的威信就在不斷建立，大家就會(huì)把你當(dāng)做指揮官。

當(dāng)遇到客戶或者老板丟給你十幾張Excel表的時(shí)候，你首先要看這些表格是不是規(guī)范的。如果是一張大寬表，所有的數(shù)據(jù)都被整理得井井有條的，那就不需要去梳理它，可以直接走下一步。但是如果你遇到的是我這樣的，不同的幾個(gè)機(jī)構(gòu)給的不同的表格，而你想把它們都做成一個(gè)表單系統(tǒng)，那你就需要先去好好梳理這些數(shù)據(jù)了。

梳理數(shù)據(jù)時(shí)不要挑軟柿子，而是要去挑那些最硬的柿子。比如有些表格要求用戶上傳各種附件，有些表格的行數(shù)是不確定的，有些表格的層級(jí)數(shù)量特別多……你并不是要把所有客戶給的數(shù)據(jù)項(xiàng)全部整理到xMind，而是把這些難點(diǎn)在梳理的過(guò)程中理順。一旦把這些都理順了，就不需要再繼續(xù)梳理下去了。

我在第二步（右圖）嘗試著把梳理出來(lái)的數(shù)據(jù)轉(zhuǎn)化成業(yè)務(wù)模型，新手不要這樣做。因?yàn)楫嬤@種模型的基礎(chǔ)，是你已經(jīng)可以很嫻熟地撰寫業(yè)務(wù)邏輯文檔，從而能夠直接憑空想象這些文檔，在大腦里直接把它圖形化。這種能力對(duì)我來(lái)說(shuō)，是在我寫過(guò)至少80萬(wàn)字的文檔之后才產(chǎn)生的。

撰寫后端邏輯文檔

大部分產(chǎn)品經(jīng)理不會(huì)撰寫后端邏輯文檔，而在傳統(tǒng)的游戲界，這個(gè)技能是普遍存在的。這跟互聯(lián)網(wǎng)行業(yè)資金太多，產(chǎn)品經(jīng)理門檻太低有直接關(guān)系，會(huì)用墨刀就能做PM，這是多少培訓(xùn)班的謊言。我這么說(shuō)有的人可能不服，“我明明也寫了很多文字類的文檔啊”。但是大多數(shù)這些文字類的文檔，都是對(duì)原型的補(bǔ)充說(shuō)明，是前端層面的，而不是接口層面的，更不是后端層面的。

抽象后端邏輯是我快速落地一個(gè)項(xiàng)目的法寶?？紤]周全的后端邏輯直接帶來(lái)后端大佬的好心情，后端大佬的好心情直接帶來(lái)好的接口，好的接口直接帶來(lái)前端大佬的好心情，前端大佬的好心情直接帶來(lái)好的用戶體驗(yàn)。跟后端程序員開(kāi)會(huì)的時(shí)候，我大部分時(shí)間只跟他們講后端邏輯文檔，至于原型長(zhǎng)什么樣子，其實(shí)除了接口方面，后端程序員根本不關(guān)心。如果你不能把后端邏輯說(shuō)清楚，而是一味地說(shuō)“這個(gè)按鈕點(diǎn)了之后就去到哪一頁(yè)”，證明你還是在用外行人的眼光來(lái)分解一個(gè)產(chǎn)品的構(gòu)成。

在你不熟悉后端邏輯文檔的情況下，你可以把本章內(nèi)容放在原型畫完的下一步來(lái)做。當(dāng)你嫻熟掌握之后，你會(huì)發(fā)現(xiàn)，先寫邏輯文檔可以省下你很多由于業(yè)務(wù)邏輯不清晰而畫出錯(cuò)誤原型的時(shí)間，對(duì)于后臺(tái)產(chǎn)品來(lái)說(shuō)尤其如此。

不管一個(gè)線上表單玩出什么花樣，最終的顆粒都是不同類型的字段，我把它們稱作“簡(jiǎn)單字段”。簡(jiǎn)單字段沒(méi)什么好探索的，無(wú)非是文字、圖片、附件、選擇題、聯(lián)動(dòng)選項(xiàng)等等一些不同類型的字段。這里的關(guān)鍵點(diǎn)是下圖所示的“復(fù)合型字段”。

為什么要設(shè)計(jì)這些復(fù)合型字段？

因?yàn)樵谇懊媸崂磉@些Excel表的時(shí)候你會(huì)發(fā)現(xiàn)，很多字段之間是有內(nèi)在關(guān)聯(lián)的，而我們?cè)O(shè)計(jì)一個(gè)后臺(tái)系統(tǒng)不管它再?gòu)?fù)雜，最終也是為了讓用戶填表的時(shí)候心情更爽。

• 聯(lián)合字段的目標(biāo)：在用戶端把幾個(gè)字段連在一起，消掉它們之間的間距，讓用戶知道這幾個(gè)字段是一起的；
• 主從字段的目標(biāo)：幾個(gè)字段也是一起的，但是它們之間有從屬關(guān)系。這個(gè)時(shí)候哪個(gè)字段在最上面，就代表它是老大。例如，主字段是“2016總營(yíng)收”，而兩個(gè)從屬的字段是“其中高新科技收入”和“其中醫(yī)藥產(chǎn)品收入”；
• 多條組的目標(biāo)：我們不知道用戶要填多少項(xiàng)數(shù)據(jù)，只能粗略地設(shè)定一個(gè)上限，讓用戶自由添加條目。例如我們要求用戶填寫他公司的股東信息，我們只知道用戶每個(gè)股東的信息都要填寫姓名、職位和占股比例，但是具體用戶要填多少條，是用戶自己點(diǎn)“添加”按鈕的次數(shù)來(lái)決定的；
• 二維表的目標(biāo)：有些數(shù)據(jù)是由橫縱交錯(cuò)的行和列組成的，例如財(cái)務(wù)報(bào)表，縱向是具體的財(cái)務(wù)報(bào)表數(shù)據(jù)，橫向是時(shí)間軸。這種表格顯然不管是在網(wǎng)頁(yè)端還是手機(jī)端，都應(yīng)該跳轉(zhuǎn)到一個(gè)單獨(dú)的頁(yè)面來(lái)填寫。

所以這個(gè)時(shí)候就可以寫字段部分的后端邏輯文檔了。不管這些字段在手機(jī)里的交互能玩出什么花樣來(lái)，我們現(xiàn)在這一步只需要關(guān)注它在后端儲(chǔ)存哪些屬性，以及管理員可以對(duì)它進(jìn)行什么操作（我在文檔里用“func_”表示）。

簡(jiǎn)單字段是字段的最小顆粒，而復(fù)合型字段是對(duì)這些簡(jiǎn)單字段的進(jìn)一步拼裝。不過(guò)上圖其實(shí)有誤，因?yàn)槲仪懊娼榻B的復(fù)合字段有4種，而上圖文檔里只有2種，因?yàn)槲以诮Y(jié)合兩三個(gè)產(chǎn)品文檔來(lái)寫這個(gè)教程，請(qǐng)大家假裝看到我寫對(duì)了吧。

下一步就是把這兩種字段封裝起來(lái)，把它們統(tǒng)稱“獨(dú)立字段”。在設(shè)計(jì)后端文檔的時(shí)候，什么情況下需要封裝呢？

就是當(dāng)你搞了幾種東西，而這幾種東西有很多統(tǒng)一的屬性，或者在很多情況下需要統(tǒng)一的管理。例如，你山寨一個(gè)小微博功能，用戶分為普通、黃V、藍(lán)V，顯然你應(yīng)該在“用戶”層面封裝一層，然后把通用的功能例如關(guān)注、發(fā)推等等都放在這里來(lái)描述。

1. 字段的基本屬性：例如一個(gè)字段的標(biāo)題叫什么，描述是什么；
2. 字段的額外屬性：其實(shí)，設(shè)計(jì)到額外屬性的時(shí)候，我才覺(jué)得有必要把簡(jiǎn)單字段和復(fù)合字段封裝起來(lái)。因?yàn)樵诮o這些字段附加一些buff的時(shí)候，不管它是什么類型的，運(yùn)營(yíng)人員都應(yīng)該直接當(dāng)做一個(gè)對(duì)象來(lái)操作。例如，運(yùn)營(yíng)人員決定把8個(gè)字段構(gòu)成的“股東信息”標(biāo)記成注冊(cè)必填，那么顯然它們要作為一個(gè)整體來(lái)對(duì)待，不準(zhǔn)運(yùn)營(yíng)人員節(jié)選其中的某些字段來(lái)標(biāo)記。否則，整個(gè)系統(tǒng)的重心會(huì)被打亂；
3. 字段的操作：同理，一個(gè)字段也好，一串關(guān)聯(lián)的字段也好，對(duì)于操作來(lái)講都是整體的。即使復(fù)合字段內(nèi)部有另外的操作，也不影響它作為一個(gè)整體進(jìn)行操作；
4. 字段數(shù)據(jù)的儲(chǔ)存：略。

接下來(lái)你就要考慮，剛才形成的那些一個(gè)個(gè)獨(dú)立字段，要怎樣進(jìn)一步儲(chǔ)存起來(lái)？

在剛才我們梳理數(shù)據(jù)的時(shí)候，你會(huì)發(fā)現(xiàn)這些數(shù)據(jù)是一層一層裝起來(lái)的，而且不同的甲方在歸類這些數(shù)據(jù)時(shí)的偏好也不相同。有些可能比較喜歡套娃，五六層目錄才看到數(shù)據(jù)；有些數(shù)據(jù)量比較少，一兩層數(shù)據(jù)就可以搞定。所以獨(dú)立字段最外面肯定是由N層目錄包裹起來(lái)的。我們把目錄做成套娃的模樣，甲方爸爸喜歡多少層套娃，我們就給他多少層套娃。

但是，是不是用戶打開(kāi)最后一層套娃之后，就直接看到一個(gè)個(gè)字段了？

這又需要你從后臺(tái)的思維跳脫出來(lái)，去考慮用戶體驗(yàn)的事情了。

之前我看到一個(gè)網(wǎng)友的提問(wèn)：“HR說(shuō)我只有后臺(tái)經(jīng)驗(yàn)，所以覺(jué)得我不具備用戶端方面的才能”（大意），我想說(shuō)，HR這個(gè)行業(yè)的平均水平可能還不如產(chǎn)品經(jīng)理的平均水平，牛逼的后臺(tái)產(chǎn)品經(jīng)理設(shè)計(jì)任何一個(gè)后臺(tái)功能的時(shí)候，都會(huì)去想象它在前端會(huì)長(zhǎng)什么樣。后臺(tái)直接決定了一個(gè)產(chǎn)品的用戶端好不好用，而反過(guò)來(lái)，如果你只設(shè)計(jì)C端，而不了解后端，那么你設(shè)計(jì)的東西可能在數(shù)據(jù)結(jié)構(gòu)上完全沒(méi)法跟服務(wù)器搭上，那么你想它怎么落地呢？

這套后臺(tái)做好之后，它所定制的表單，用戶在手機(jī)和網(wǎng)頁(yè)都可以訪問(wèn)，兩個(gè)端的設(shè)計(jì)也會(huì)有不同。這個(gè)時(shí)候最好的辦法就是去思考它在手機(jī)端的效果。手機(jī)的屏幕小，對(duì)體驗(yàn)的要求更苛刻，如果你的設(shè)計(jì)在手機(jī)走得通，那么在網(wǎng)頁(yè)端只會(huì)走得更通。

在手機(jī)端YY（不一定要畫出原型來(lái)）之后你會(huì)發(fā)現(xiàn)，最后一層數(shù)據(jù)的體驗(yàn)是上圖這樣才會(huì)比較舒服。當(dāng)用戶進(jìn)到某個(gè)最終的目錄，他首先會(huì)看到一些入口（左圖），這些入口點(diǎn)進(jìn)去就是一個(gè)小型的表單（右圖）。這樣設(shè)計(jì)之后，用戶的填表壓力就被拆解了，同時(shí)，用戶進(jìn)入一個(gè)小表單之后，上下滑動(dòng)就可以填寫所有的數(shù)據(jù)，不需要再左右跳轉(zhuǎn)層級(jí)了。

所以這個(gè)小表單我把它定義為“數(shù)據(jù)體”。一堆有關(guān)聯(lián)的字段裝進(jìn)一個(gè)數(shù)據(jù)體里，然后這個(gè)數(shù)據(jù)體放在目錄里，最后形成整個(gè)業(yè)務(wù)的表單。

你可能會(huì)想，我直接讓前端把最后一層目錄自動(dòng)展示成這樣不行嗎？這樣不是更簡(jiǎn)潔嗎？為什么還要多一個(gè)“數(shù)據(jù)體”的概念？

這是因?yàn)椤?/p>

第一，數(shù)據(jù)體只能儲(chǔ)存平級(jí)字段，從邏輯上直接避免字段跟目錄混搭。這樣就能有效地保證，用戶面對(duì)的都是一整頁(yè)的字段，上下滑動(dòng)就可以填寫完畢。我們考慮重要功能的時(shí)候，一定要假設(shè)運(yùn)營(yíng)人員是懶惰的，是跟你完全對(duì)著干的，在重要的用戶體驗(yàn)上，要用邏輯的強(qiáng)制性來(lái)對(duì)抗人性的普遍弱點(diǎn)。正因?yàn)檫\(yùn)營(yíng)人員可能是懶惰的，所以當(dāng)你設(shè)計(jì)了數(shù)據(jù)體之后，他更傾向于把同類的數(shù)據(jù)全部裝進(jìn)一個(gè)數(shù)據(jù)體，而不是勤勞地創(chuàng)建多個(gè)數(shù)據(jù)體，這就保證了用戶填表的爽快感。

第二，每個(gè)數(shù)據(jù)體都是有主題的。例如，某個(gè)數(shù)據(jù)體叫做“個(gè)人信貸記錄”，里面有幾十個(gè)字段讓用戶填寫這方面的數(shù)據(jù)。那么，它需不需要整體的教程？在未來(lái)需不需要作為一個(gè)討論話題開(kāi)放給用戶社區(qū)？所以，當(dāng)你遇到這種業(yè)務(wù)上有必要?dú)w類的東西時(shí)，你可以考慮它的未來(lái)場(chǎng)景。如果在未來(lái)它應(yīng)該具備一些場(chǎng)景，那么你就可以提前把它設(shè)計(jì)成一個(gè)獨(dú)立的主體。

根據(jù)上面的討論，數(shù)據(jù)體和目錄的文檔就寫出來(lái)了，整個(gè)后端邏輯文檔的主體就大概成型了。文檔寫好之后，你再設(shè)計(jì)相應(yīng)的后臺(tái)原型會(huì)發(fā)現(xiàn)真的相當(dāng)輕松，你可以開(kāi)著音樂(lè)來(lái)畫原型，因?yàn)槟阍诖蟮姆较蛏喜豢赡苡惺裁催z漏。比如有了上圖結(jié)尾的“目錄的操作”之后，當(dāng)你畫到目錄的原型時(shí)，你難道會(huì)漏掉“調(diào)整排序”這個(gè)按鈕嗎？

找到原型的套路

對(duì)于一個(gè)任意復(fù)雜度的后臺(tái)系統(tǒng)來(lái)講，只要你能寫出上面的邏輯文檔來(lái)，那么其實(shí)你的原型已經(jīng)可以consider it done了。只有畫出來(lái)好不好看、好不好用的區(qū)別，沒(méi)有功能實(shí)現(xiàn)上的區(qū)別。不過(guò)恰好那段時(shí)間我比較閑，所以畫了一個(gè)很規(guī)范的單頁(yè)應(yīng)用原型。也正因如此，我選了這個(gè)產(chǎn)品來(lái)寫教程。

對(duì)于一個(gè)專業(yè)寫文檔的產(chǎn)品經(jīng)理來(lái)講（不知道什么時(shí)候起，追求專業(yè)的文檔被當(dāng)做一個(gè)產(chǎn)品經(jīng)理可有可無(wú)的特性？好像還會(huì)被人當(dāng)做手作人那樣帶點(diǎn)居高臨下的味道？各種數(shù)字報(bào)表和商業(yè)計(jì)劃ppt被當(dāng)成了時(shí)代首選技能？），沒(méi)有固定的原型套路，只有最適合當(dāng)前產(chǎn)品的原型套路。如果不是以前的套路，那就去發(fā)明一種新的套路，這樣你的套路就會(huì)越來(lái)越多，所以接下來(lái)我們就看看這個(gè)產(chǎn)品適合哪種套路。

在不知道怎么動(dòng)手的時(shí)候，與其在那里不斷規(guī)劃（實(shí)際上是拖延癥），往往不如直接開(kāi)工把最硬的骨頭先啃下來(lái)，對(duì)這個(gè)產(chǎn)品來(lái)講先去畫主界面就對(duì)了。上圖就是我畫的主界面。畫完之后你會(huì)發(fā)現(xiàn)，整個(gè)后臺(tái)其實(shí)只有這一頁(yè)。左邊是目錄，中間是這個(gè)目錄下的數(shù)據(jù)體，而右邊是選中了一個(gè)數(shù)據(jù)體之后的具體配置。

但是這一頁(yè)是分三種狀態(tài)的，除了平時(shí)的狀態(tài)之外，還有兩種特殊的狀態(tài)。當(dāng)用戶在目錄里選擇的不是普通的目錄，而是回收站的時(shí)候，由于回收站的功能會(huì)比較受限，所以頁(yè)面的布局和元素也出現(xiàn)了閹割，從而影響了整個(gè)頁(yè)面的布局。然而這三種狀態(tài)又有很多共用的元素。如果在原型里把它們分開(kāi)去講述，顯然就是把工作量擴(kuò)大了至少三倍。

在純粹具象的原型設(shè)計(jì)思路上，這個(gè)頁(yè)面分為三種狀態(tài)，意味著三份重復(fù)勞動(dòng)；而從最抽象的眼光來(lái)看，這三種狀態(tài)有100%的元素都是共用的，就好像除了靈魂和記憶之外，我們可以把一個(gè)人看做等價(jià)于他身上的任意一個(gè)、沒(méi)有癌變的細(xì)胞，但是用這種眼光去欣賞你的同類又顯得有點(diǎn)乏味了。

這兩種做法都比較極端，你的目標(biāo)就是去找到其中的平衡點(diǎn)，也就是我在前面提到的，去找到符合這個(gè)產(chǎn)品的套路。每個(gè)人的性格都不一樣，原型畫風(fēng)和用戶理念也不一樣，套路自然也不一樣。以我個(gè)人比較潔癖的性格為例，以下是我找到的套路。

1. 把三種主界面的形態(tài)畫成三個(gè)頁(yè)面（使用“CASE_”前綴）；
2. 把頁(yè)面的共同元素抽離出來(lái)，作為一個(gè)單獨(dú)的對(duì)象（使用“#obj_”前綴，其中井號(hào)在我的原型中的意義是：它并不代表一個(gè)真實(shí)的頁(yè)面，只是某個(gè)頁(yè)面中的一個(gè)提取出來(lái)的東西，例如對(duì)象、彈窗或流程）來(lái)描述；
3. 把這個(gè)對(duì)象做成超鏈接小方塊，扔進(jìn)使用這個(gè)對(duì)象的頁(yè)面里。一個(gè)對(duì)象在多少個(gè)頁(yè)面出現(xiàn)，你就扔多少個(gè)小方塊在這些頁(yè)面，而具體這個(gè)對(duì)象的文檔，你只需要維護(hù)一頁(yè)；
4. 在原型的第一頁(yè)寫上閱讀說(shuō)明。上圖的閱讀說(shuō)明是我從其它原型里翻出來(lái)的，所以有些東西對(duì)不上號(hào)，請(qǐng)大家假裝看到了正確的閱讀說(shuō)明。

我這樣說(shuō)比較抽象，下面先舉一個(gè)簡(jiǎn)單的例子——

如上圖所示，主界面的兩個(gè)狀態(tài)都出現(xiàn)了數(shù)據(jù)體列表，所以我把鏈接到數(shù)據(jù)體列表的小方塊扔進(jìn)了這兩頁(yè)中。程序員不管在其中那一頁(yè)，只要他說(shuō)“這個(gè)列表是怎么展示的？哦，下面有個(gè)小方塊，我點(diǎn)進(jìn)去看一下”，他都會(huì)進(jìn)到下面這個(gè)文檔里。

我做原型基本上都是用這些小方塊來(lái)跳轉(zhuǎn)的，除非是用來(lái)給客戶演示的原型，否則我很少在頁(yè)面元素本身做交互。都是把所有跳轉(zhuǎn)的按鈕放在小方塊里，然后單獨(dú)擺在頁(yè)面上。頁(yè)面是頁(yè)面，方塊是方塊。為什么這樣？因?yàn)榈臅r(shí)候太舒服了，我從來(lái)不用去尋找動(dòng)態(tài)面板里面的動(dòng)態(tài)面板里面的交互，所有的鏈接都是平鋪出來(lái)的，所見(jiàn)即可拖。

有的人就要說(shuō)了，“Axure不是這樣用的，你得做交互！”——我為什么要做交互？

我們不妨深入想一想這個(gè)問(wèn)題，就是我們?yōu)槭裁匆鼜腁xure設(shè)計(jì)思維的問(wèn)題。Axure并不是一個(gè)純粹的原型設(shè)計(jì)軟件。從使用體驗(yàn)上，他要照顧新手，所以搞了很多所見(jiàn)即所得的效果，但是它的這些效果實(shí)際上是高不成低不就的。

設(shè)計(jì)動(dòng)態(tài)交互上，為什么不去畫時(shí)間軸或者直接用AE呢？幾個(gè)吭哧吭哧的動(dòng)畫，幾個(gè)動(dòng)態(tài)面板的特效，就能代表所有瀏覽器和移動(dòng)設(shè)備的交互效果嗎？

從用戶群上，他更不是針對(duì)產(chǎn)品經(jīng)理的，而是針對(duì)那些要看原型的外行老板們。老板們不會(huì)裝專用客戶端，所以Axure最終輸出的是網(wǎng)頁(yè)，因此它的所有交互事件也都建立在瀏覽器事件上，同時(shí)它還只是瀏覽器的閹割版，不論是事件的傳遞、一個(gè)前端對(duì)象的狀態(tài)切換，還是頁(yè)面元素之間的布局關(guān)系，全都不如直接寫代碼來(lái)的簡(jiǎn)單。

例如在iOS開(kāi)發(fā)App時(shí)，想要讓一個(gè)按鈕左右離屏幕20pt，自動(dòng)拉伸，并且懸浮在頁(yè)面底部100pt處，你只需要填幾個(gè)數(shù)字就行了，而在Axure里你反而要寫很多的邏輯才能實(shí)現(xiàn)。

就是這樣的繞路實(shí)現(xiàn)，還被很多人當(dāng)成技術(shù)的炫耀，我覺(jué)得跟整天探索“茴”字有幾種寫法是沒(méi)有任何區(qū)別的。更不用提Axure那種故作高級(jí)的態(tài)度了，例如把回收站功能和圖片壓縮選項(xiàng)都取消掉，好像這樣顯得比較“簡(jiǎn)潔”。

Axure它只是一個(gè)工具，同時(shí)很不幸的是，目前（我拿到投資之前），我們基本只有這個(gè)工具能用。但這并不影響工具的使用者不是去服務(wù)工具，而是讓工具服務(wù)使用者。

話說(shuō)回我怎樣讓Axure服務(wù)于我，我們接著看我的原型。

有堅(jiān)不摧的對(duì)象繼承鏈條

如果一個(gè)產(chǎn)品上線之后不需要迭代，畫原型只需要一個(gè)版本就結(jié)束工作，那么我接下來(lái)說(shuō)的全都是廢話。所以我在下文展示原型圖的時(shí)候會(huì)重點(diǎn)告訴你：為什么對(duì)于產(chǎn)品迭代來(lái)講，我需要這樣的設(shè)計(jì)。

接下來(lái)就承接上一章的設(shè)計(jì)套路，為你展現(xiàn)原型里最重要的“數(shù)據(jù)體”模塊的“對(duì)象繼承鏈條”。你現(xiàn)在不需要知道這個(gè)鏈條具體的概念，只需要打起精神來(lái)，跟著我的7個(gè)連環(huán)鏈條（倒敘）走下去，不要中途走神。

鏈條第7環(huán)：數(shù)據(jù)體

數(shù)據(jù)體就是前文提過(guò)的，主界面中最主要的一個(gè)模塊，用來(lái)配置一個(gè)具體的數(shù)據(jù)體。還記得數(shù)據(jù)體在后端邏輯文檔里面的規(guī)劃嗎？

沒(méi)錯(cuò)，數(shù)據(jù)體就是用來(lái)直接裝載字段的東西。所以數(shù)據(jù)體在原型里，除了自身頭部信息之外，主要就是用來(lái)裝載具體的字段了。另外，上圖中所有的菜單功能，你如果翻回前面的后端邏輯文檔，你會(huì)發(fā)現(xiàn)我早就已經(jīng)用“func_”把它們都規(guī)劃完了。這就是我說(shuō)的，后端邏輯文檔寫完之后，你可以聽(tīng)著音樂(lè)畫原型。

鏈條第6環(huán)：獨(dú)立字段

從剛才標(biāo)注了獨(dú)立字段的鏈接，就可以進(jìn)入獨(dú)立字段的說(shuō)明頁(yè)?；貞浺幌潞蠖诉壿嬑臋n，獨(dú)立字段是什么？

沒(méi)錯(cuò)，獨(dú)立字段是我們提前規(guī)劃好的，對(duì)兩種字段的封裝，這兩種字段分別是“簡(jiǎn)單字段”和“復(fù)合型字段”。所以，必然地，獨(dú)立字段的具體展示也要分兩種情況來(lái)介紹給前端程序員了。

你問(wèn)后端程序員去哪了？

后端程序員看完我的邏輯文檔早就開(kāi)發(fā)完了，正在催著前端程序員趕緊聯(lián)調(diào)。如果前端程序員在這一頁(yè)粗心大意，沒(méi)有按照我的設(shè)計(jì)把獨(dú)立字段的具體展示分成兩種，我根本不用去管，后端接口的報(bào)錯(cuò)已經(jīng)用滿屏的紅色閃現(xiàn)在前端程序員的屏幕上了。

鏈條第5環(huán)：添加或修改字段中轉(zhuǎn)頁(yè)

在前面兩個(gè)環(huán)節(jié)，你看到了數(shù)據(jù)體，也看到了數(shù)據(jù)體下面的獨(dú)立字段。這兩個(gè)環(huán)節(jié)不是平級(jí)的，但是它倆都具備添加或修改字段的功能。

為什么會(huì)這樣？因?yàn)閿?shù)據(jù)體本身肯定可以添加字段，而數(shù)據(jù)體下面的具體字段，你得提供再次修改這些字段的功能啊，你不能讓運(yùn)營(yíng)的人每次錄入都簽字無(wú)悔啊。

但是，問(wèn)題在于，“添加修改簡(jiǎn)單字段”和“添加修改復(fù)合型字段”我是分成兩個(gè)具體頁(yè)面來(lái)畫原型的。從數(shù)據(jù)體的菜單添加一個(gè)字段的時(shí)候，用戶在菜單里直接就選擇了一個(gè)字段類型，所以是直接前往具體的原型頁(yè)面。而修改一個(gè)獨(dú)立字段的時(shí)候，由于我已經(jīng)抽象了兩種字段的菜單，所以我是不知道你到底要去哪個(gè)具體原型頁(yè)面的。

這個(gè)時(shí)候，只要加多一個(gè)上級(jí)的中轉(zhuǎn)頁(yè)面，然后把這兩頁(yè)具體文檔變成它的子頁(yè)面就行了。然后，你在中轉(zhuǎn)頁(yè)面里把這兩頁(yè)的鏈接放進(jìn)去。使用這個(gè)功能時(shí)，當(dāng)邏輯不確定的時(shí)候，你就鏈接中轉(zhuǎn)頁(yè)；邏輯很確定的時(shí)候，你就鏈接具體的文檔。你可能要問(wèn)了，我為什么要搞這么麻煩呢？因?yàn)檫@個(gè)中轉(zhuǎn)頁(yè)對(duì)以后的迭代是有重大意義的。

在以后迭代的時(shí)候，如果字段的復(fù)合類型變多了，那么添加修改字段的文檔也就不止兩頁(yè)了，可能有十頁(yè)。到了那個(gè)時(shí)候，如果你要增加第11種文檔，你要把整個(gè)原型所有用到添加修改字段功能的頁(yè)面全部更新一遍。

而我這樣做就不需要了，因?yàn)槠渌?yè)面只是指向這個(gè)中轉(zhuǎn)頁(yè)，你每次在中轉(zhuǎn)頁(yè)下面增加一個(gè)頁(yè)面，就記得把它的鏈接也放進(jìn)中轉(zhuǎn)頁(yè)，這不就不用整個(gè)原型改一遍嗎？

鏈條第4環(huán)：修改復(fù)合型字段

從剛才所說(shuō)的中轉(zhuǎn)頁(yè)或者具體的鏈接，我們就進(jìn)入了“添加或修改一個(gè)復(fù)合型字段”的頁(yè)面。復(fù)合型字段除了本身的字段描述信息之外，主要就是由簡(jiǎn)單字段構(gòu)成的了。所以這個(gè)模塊主要的功能自然就是去添加、修改和刪除這些簡(jiǎn)單字段。

再次重申，由于復(fù)合字段中可以對(duì)簡(jiǎn)單字段進(jìn)行哪些操作，我們?cè)缇驮诤蠖诉壿嬑臋n里用“func_”整理完畢了，所以這里你可以完全放空大腦就能無(wú)遺漏地把這些功能菜單設(shè)計(jì)齊全，根本輪不到別人挑你的BUG。

我的記憶力極差，初中的時(shí)候背一首唐詩(shī)背到放學(xué)一小時(shí)老師還不準(zhǔn)我回家，到現(xiàn)在我女朋友還整天說(shuō)我是花生仁那么大的腦袋。但是我發(fā)原型文檔給程序員時(shí)，每次都說(shuō)“一個(gè)設(shè)計(jì)BUG請(qǐng)吃飯一次”，然而最近兩三年基本沒(méi)人吃到我的謝罪大餐，靠的就是先寫邏輯文檔。

鏈條第3環(huán)：修改簡(jiǎn)單字段

在前面一個(gè)環(huán)節(jié)里，你會(huì)發(fā)現(xiàn)復(fù)合型字段是由簡(jiǎn)單字段構(gòu)成的，所以，雖然在文檔中，修改簡(jiǎn)單字段和修改復(fù)合字段是平級(jí)的。但是用戶在復(fù)合型字段中修改或者添加一個(gè)簡(jiǎn)單字段的時(shí)候，實(shí)際調(diào)用的是修改簡(jiǎn)單字段的功能。所以，除了第5環(huán)節(jié)的中轉(zhuǎn)頁(yè)之外，復(fù)合型字段也可以調(diào)用這個(gè)修改簡(jiǎn)單字段的功能。

修改簡(jiǎn)單字段的功能，就是終于接觸到最終的實(shí)際字段了。但是我在上圖里為什么只畫了“選擇題”這一種情況呢？其它類型的字段我為什么沒(méi)畫在這里，而是又鏈接到其它頁(yè)面呢？難道我就這么喜歡套娃？

鏈條第2環(huán)：字段表傳送門

不是我喜歡套娃，而是“簡(jiǎn)單字段的配置與展示”出現(xiàn)的地方飄忽不定。所以我必須到處安插傳送門，至于這個(gè)傳送門通向什么領(lǐng)域，你馬上就會(huì)知道。

鏈條第1環(huán)：字段表

所有的傳送門都通向這張字段表。我們?cè)谶@里把所有類型字段的展示、配置都放進(jìn)來(lái)，然后好好維護(hù)它。

為什么要這樣做？

想必你也知道了——這畢竟是一個(gè)表單系統(tǒng)，表單系統(tǒng)的基石就是字段，字段在未來(lái)的擴(kuò)充肯定是相當(dāng)頻繁的。

這張表看起來(lái)現(xiàn)在還沒(méi)什么，但是如果不去這樣設(shè)計(jì)它，那么你每一次迭代這個(gè)系統(tǒng)，都要花一半的時(shí)間去修改每個(gè)具體頁(yè)面所展現(xiàn)的字段。真要這樣頭鐵，那么恭喜你，你離人類的本質(zhì)越走越近了。

你說(shuō)，你沒(méi)有我這么多的后臺(tái)設(shè)計(jì)經(jīng)驗(yàn)，不知道字段表需要拆出來(lái)單獨(dú)維護(hù)，不知道要把頻繁更新的功能放進(jìn)中轉(zhuǎn)頁(yè)，也不知道不同層級(jí)的模塊要怎么拆分、怎么互相連接？再看一眼這一章的標(biāo)題：“有堅(jiān)不摧”的對(duì)象繼承鏈條。

沒(méi)有任何文檔撰寫套路是無(wú)堅(jiān)不摧的。如果有一篇文章在你的feed里冒出來(lái)，告訴你“掌握這20個(gè)技巧，就能讓你設(shè)計(jì)一個(gè)專業(yè)的XXXX原型”，那么你應(yīng)該趕緊點(diǎn)進(jìn)去屏蔽這個(gè)人，然后再舉報(bào)這篇文章，然后再返回你的feed點(diǎn)擊“我不感興趣”。

你唯一能做的，就是每次反省自己原型設(shè)計(jì)的問(wèn)題，每次迭代的時(shí)候看一看自己做了多少無(wú)用功，把每個(gè)周末的時(shí)間都花在完善自己的文檔上，力圖讓它達(dá)到你現(xiàn)在的100分。然后等下一次迭代的時(shí)候，輕蔑地看它一眼，說(shuō)一聲“垃圾原型，50分鑒定完畢”，存?zhèn)€版本，然后開(kāi)一個(gè)新的文檔，把有用的東西復(fù)制進(jìn)來(lái)，把沒(méi)用的結(jié)構(gòu)打散扔掉，然后再力圖把它變成新的100分……

結(jié)語(yǔ)

在結(jié)語(yǔ)部分，我們先用一張關(guān)系圖來(lái)回顧一下，前兩章我花了那么大的篇幅來(lái)講原型的繪制，我到底講了什么。

是的，我檢查了很多遍，我仔細(xì)檢查了右圖的每個(gè)方塊、每條連線，最后我才說(shuō)服自己相信，這張關(guān)系圖已經(jīng)完整、沒(méi)有遺漏地，表達(dá)了我在前面兩個(gè)章節(jié)煞費(fèi)口舌地描述的所有模塊之間的關(guān)系。

我統(tǒng)計(jì)了一下，那兩個(gè)章節(jié)我寫了大概4400字，其中用來(lái)表述模塊之間的關(guān)聯(lián)關(guān)系的，我們算它有3000字。而圖表里面的漢字是128字。圖表里除了漢字之外，就只剩下方塊、位置、線條這些圖形關(guān)系了。所以，圖形帶來(lái)的文字表達(dá)效率之比是24比1。

——你需要注意的是，我畫的是關(guān)系圖，而不是流程圖。流程圖是具有方向性的，本質(zhì)上只是更簡(jiǎn)潔的文字。而關(guān)系圖是沒(méi)有方向性的（這就是為什么我的連線沒(méi)有箭頭），從任何一個(gè)局部都可以順著線條向外推導(dǎo)，推導(dǎo)出任何你想講述的故事。

關(guān)系圖是簡(jiǎn)潔、低調(diào)和安靜的，但正如老劉說(shuō)的：“記得大三的一次信息課中，教授掛出了兩幅大圖片，一幅是畫面龐雜精細(xì)的《清明上河圖》，另一幅是一張空曠的天空照片，空蕩蕩的藍(lán)天上只有一縷似有似無(wú)的白云。教授問(wèn)這兩幅畫中哪一幅所包含的信息量更大，答案是后者要比前者大一至兩個(gè)數(shù)量級(jí)”。

這就是我在文章開(kāi)頭提到的，我多么希望我能掌握《降臨》里外星人使用的表意文字。為了講清楚我的產(chǎn)品設(shè)計(jì)思路，我講了很多的話，你花了很久的功夫來(lái)閱讀。但是實(shí)際上，我真正希望你掌握的，是這門安靜的語(yǔ)言，是純粹圖形化的思維。我指的不光是前面的原型繪制部分，其實(shí)更包括后端邏輯文檔的部分，它們都可以被圖形化。

事實(shí)上，在我寫完這篇教程之前，我根本不知道原來(lái)我要講這么多的話。整個(gè)產(chǎn)品的設(shè)計(jì)過(guò)程里，我的腦子里基本是不存在語(yǔ)言的，只有一個(gè)個(gè)的形狀像狄拉克海那樣，從虛空里不斷潮起潮落。你把它們摘下來(lái)，不斷地重組它們，當(dāng)你把它們捏成一團(tuán)一團(tuán)之后，你會(huì)發(fā)現(xiàn)，你已經(jīng)完成了對(duì)一個(gè)產(chǎn)品的整個(gè)設(shè)計(jì)過(guò)程。

當(dāng)你越來(lái)越適應(yīng)這種圖形化思維之后，你會(huì)發(fā)現(xiàn)，你能比別人快很多倍地構(gòu)思一個(gè)復(fù)雜的系統(tǒng)出來(lái)。唯一的缺點(diǎn)是，你的圖形思維模塊會(huì)侵占你的語(yǔ)言中樞——你更說(shuō)不過(guò)那些喜歡講ppt的人了。

作者：黃聯(lián)樵，微信：arubagod

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

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