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

這篇文章希望向你分享的是：如果你想開發(fā)一款A(yù)pp，而你請(qǐng)不起一個(gè)完整的開發(fā)團(tuán)隊(duì)，那么你如何借助外包公司來(lái)做好這件事；你如何去攬下立項(xiàng)、原型、系統(tǒng)、UI、交互，這些所有的工作，幾乎沒有任何面對(duì)面的交流，一切想法都通過文檔來(lái)跟外包溝通，最終拿到一個(gè)跟你的預(yù)期絲毫不差的精品App。

全文目錄：

【上篇】

一、解決一個(gè)問題就夠了（產(chǎn)品定位/需求分析）

二、拒絕數(shù)學(xué)公式，用感性來(lái)立項(xiàng)（產(chǎn)品立項(xiàng)）

三、直接開始設(shè)計(jì)App的門面（概念圖/交互設(shè)計(jì)）

四、用避免“反人類”的方法來(lái)設(shè)計(jì)原型（原型設(shè)計(jì)/文檔撰寫）

 

【下篇】

五、左右腦同時(shí)開工來(lái)制作擬物UI（UI設(shè)計(jì)/切圖/適配文檔）

六、虛擬迭代（成本控制）

由于字?jǐn)?shù)過多，這篇文章會(huì)分為上、下兩篇來(lái)發(fā)表。你現(xiàn)在看到的是上篇。

前言

我耗盡心思寫這篇文章，并不是想要給我的App打廣告，而是總結(jié)我過去一年創(chuàng)業(yè)開發(fā)這個(gè)App的過程中探索到的所有關(guān)鍵性的經(jīng)驗(yàn)，將它們凝聚到這27000字里，供給所有對(duì)App開發(fā)有興趣的人了解——因此，本文所有涉及到App名稱的地方，都會(huì)用「the App」來(lái)代替。

我曾是一個(gè)海淘平臺(tái)的產(chǎn)品負(fù)責(zé)人。一年前，我想給這個(gè)世界留下點(diǎn)自己的作品，于是辭職眾籌開始做「the App」。眾籌的錢并不夠我請(qǐng)一個(gè)完整的開發(fā)團(tuán)隊(duì)，幫我忙的幾位朋友除了一名是專業(yè)測(cè)試之外，其他人并不是業(yè)內(nèi)人士。于是，擺在我面前的只有一條路，那就是：代碼外包，其它所有工作都由我來(lái)負(fù)責(zé)。

一年之后，「the App」上線了，它和我想象中一模一樣，沒有1px或1個(gè)邏輯的誤差。雖然它存在一兩個(gè)開發(fā)時(shí)沒想到的毛病，還需要繼續(xù)迭代，但是它入選了“最美應(yīng)用”年度Top100，也拿到了不錯(cuò)的用戶量，它在理念、邏輯、顏值上，都可以算是一個(gè)精品應(yīng)用。

這篇文章希望向你分享的是，如果你想開發(fā)一款A(yù)pp，而你請(qǐng)不起一個(gè)完整的開發(fā)團(tuán)隊(duì)，那么你如何借助外包公司來(lái)做好這件事；你如何去攬下立項(xiàng)、原型、系統(tǒng)、UI、交互，這些所有的工作，幾乎沒有任何面對(duì)面的交流，一切想法都通過文檔來(lái)跟外包溝通，最終拿到一個(gè)跟你的預(yù)期絲毫不差的精品App。

如果你是一名有志于開發(fā)理想中的產(chǎn)品的創(chuàng)業(yè)者，這篇文章將會(huì)告訴你很多的細(xì)節(jié)；而如果你是一名產(chǎn)品經(jīng)理，這篇文章會(huì)從一名創(chuàng)業(yè)者的眼光帶你重新看待產(chǎn)品開發(fā)這件事，這里不再有PM和程序員、設(shè)計(jì)師之間的矛盾，只有純粹地追求做一個(gè)好產(chǎn)品，并為之付出自己的一切。

一、產(chǎn)品定位/需求分析：解決一個(gè)問題就夠了

一個(gè)產(chǎn)品能解決好一個(gè)問題就夠了，也許你會(huì)說，成功的產(chǎn)品需要“生態(tài)”和“盈利模式”。我只能說，除非你產(chǎn)品的核心功能本來(lái)就是去實(shí)現(xiàn)某種交易（例如p2p金融），或是致力于開發(fā)某種消費(fèi)的沖動(dòng)（例如“免費(fèi)”手游），否則，生態(tài)和盈利模式都是建立在“最重要的那個(gè)問題已解決”的基礎(chǔ)上的。

高屋建瓴一上來(lái)就要搞什么生態(tài)的App往往是認(rèn)準(zhǔn)了一個(gè)風(fēng)口，恨不得把所有功能都加上去，BP上能畫100個(gè)分析圖，然而基本功能卻做不到位，于是大多都被市場(chǎng)淘汰了。一個(gè)App的99%的營(yíng)收也許都來(lái)自于它的附加功能，然而如果我們不把99%的力氣花在那不起眼的、只占營(yíng)收1%的核心功能上，這件事就會(huì)很尷尬。

微信的核心

以微信為例，不論微信迭代多少個(gè)版本，它始終是一開始那個(gè)“取代手機(jī)發(fā)短信功能”的App（也許你已經(jīng)忘了，以前人與人之間是用短信來(lái)溝通的）。第一欄和第二欄永遠(yuǎn)是消息列表和通訊錄，就算朋友圈是中國(guó)最大的社交圈子，游戲欄目是中國(guó)最大的手游流量入口，它們都不可能突然跳出來(lái)影響你的日常使用?！叭恕庇肋h(yuǎn)是通訊的主體，即使后來(lái)出現(xiàn)了公眾號(hào)和應(yīng)用號(hào)，它們也永遠(yuǎn)是被收納在一個(gè)次級(jí)入口之中。

而當(dāng)你打開一個(gè)具體的對(duì)話，它的核心永遠(yuǎn)是文字之間的交流，因?yàn)檫@才是“取代手機(jī)短信”的體現(xiàn)。哪怕是后來(lái)推出了劃時(shí)代的“語(yǔ)音”，發(fā)送語(yǔ)音的按鈕也永遠(yuǎn)是在發(fā)送文字的旁邊，而語(yǔ)音的氣泡也永遠(yuǎn)不會(huì)出現(xiàn)很多人要求的“暫?！被颉昂笸恕保ǔ俏磥?lái)微信推出插件式功能），因?yàn)榱奶鞖馀莸闹黧w永遠(yuǎn)是文字氣泡，其它所有類型的氣泡，不管是現(xiàn)在的圖片、鏈接、視頻，還是未來(lái)的VR對(duì)話甚至是腦電波交流，它們?cè)诮换ド隙加肋h(yuǎn)不能凌駕于“文字氣泡”之上——除非文字已經(jīng)不再是人類的第一遠(yuǎn)程交流方式。哪天我們能像三體星人那樣用光的波長(zhǎng)和頻率來(lái)交流了，微信的這個(gè)最核心結(jié)構(gòu)才會(huì)改變，否則它就是走向庸俗，然后走向墮落。

「the?App」希望解決的唯一問題是：“這個(gè)世界上大多數(shù)人有動(dòng)力去改變自己，然而他們沒有一套行之有效的方法來(lái)堅(jiān)持正確的人生信念”。這個(gè)問題可以拆分成以下3種現(xiàn)象，每個(gè)現(xiàn)象都對(duì)「the App」提出了1個(gè)必須做到的要求。

1、我們一面收集人生觀，一面又在遺忘

當(dāng)你看到一本好書，你會(huì)把那些醍醐灌頂?shù)木渥诱聛?lái)，貼在書桌前，現(xiàn)在那張紙肯定早就不見了；當(dāng)你在朋友圈看到一篇好文章，你會(huì)立刻收藏下來(lái)，但你從來(lái)不會(huì)回頭去看；有時(shí)你突然頓悟，覺得從今天起就能重獲新生，但你一個(gè)月之后就變回老樣子了……

——這要求「the App」必須是一個(gè)能快速記錄，又能妥善保存的筆記工具。

2、我們總在一個(gè)人生問題上重復(fù)糾結(jié)，無(wú)法做到不斷升華

例如，你的缺點(diǎn)是習(xí)慣向別人妥協(xié)，不能維持自己的底線。從小到大，你受到過很多次大的傷害，每次你都痛徹心扉，決定從明天起不再做個(gè)老好人。然而這么多年過去了，你對(duì)如何“不做老好人”并沒有什么更深入的經(jīng)驗(yàn)，因?yàn)槊看文愕膶?shí)踐周期都只有幾天，然后就把它忘得影都沒了，重新變成那個(gè)老好人，直到下一次重大挫折的到來(lái)。

——這要求「the App」必須是一個(gè)有效的知識(shí)整理軟件，能把不同時(shí)期記錄下來(lái)的，所有關(guān)于同一個(gè)人生道理的文字都匯集起來(lái)，并且給到你一種取其精華的整理方式，讓你對(duì)這個(gè)道理的認(rèn)識(shí)能不斷升華。

3、由于人的劣根性，我們總在不同的人生觀之間搖擺

人的本性是趨利避害，在一個(gè)浮躁的社會(huì)染缸里，我們很難頂住誘惑，去堅(jiān)持一個(gè)不變的人生哲學(xué)。

去年你拜訪了一個(gè)高僧，他告訴你要以德報(bào)怨，你激動(dòng)得差點(diǎn)要去做居士；半年前你換了公司，你上司整天給你穿小鞋，你決定要做一個(gè)“厚黑”的人來(lái)保護(hù)自己；三個(gè)月前你看了一篇心靈雞湯，講了一個(gè)窮孩子兜揣10元錢最終成為澳門賭王的勵(lì)志故事，你決定不再計(jì)較當(dāng)下困擾，無(wú)條件提升自己的實(shí)力和境界；這一周你又煲完了《紙牌屋》，于是決定要做男主角那樣能玩轉(zhuǎn)辦公室政治的人。你的人生觀一直在搖擺，然而卻鮮有成果，因?yàn)槟愫苌僭谝粋€(gè)不動(dòng)搖的人生方向上付出持續(xù)的努力。

——這要求「the App」必須擁有一套價(jià)值衡量體系，能精準(zhǔn)地衡量不同人生觀之間的優(yōu)劣，幫用戶淘汰掉那些劣質(zhì)的心靈雞湯和錯(cuò)誤價(jià)值觀，找到那個(gè)（或若干個(gè)）對(duì)自己最重要的人生方向，每天提醒自己來(lái)堅(jiān)持。

我會(huì)用眾籌資金的90%來(lái)解決這個(gè)唯一的問題。思索這個(gè)問題貫穿著「the App」開發(fā)的頭和尾，也將延續(xù)到未來(lái)每個(gè)版本。每當(dāng)我認(rèn)為產(chǎn)品設(shè)計(jì)已經(jīng)能完美解決問題時(shí)，過不了多久，我總會(huì)發(fā)現(xiàn)，我給產(chǎn)品增加了不少額外的功能，企圖用它們來(lái)滿足主要功能在智慧上的欠缺。

但最有效的問題解決方案永遠(yuǎn)是一條單一的路徑，如果這條路上還有一些小岔路，只證明我還沒有找到最優(yōu)的辦法。就像相對(duì)論把萬(wàn)有引力統(tǒng)一了進(jìn)來(lái)，M理論貌似也能把幾種弦理論、相對(duì)論和量子力學(xué)統(tǒng)一進(jìn)來(lái)，科學(xué)家一直在尋找用最簡(jiǎn)單的一個(gè)理論來(lái)概括宇宙所有的原理。從上帝或文明高度發(fā)展的外星人來(lái)看，也許我們的這種追求很渺小，還有太長(zhǎng)的路要走，但這個(gè)過程本身就是一種嘉獎(jiǎng)。

二、產(chǎn)品立項(xiàng)：拒絕數(shù)學(xué)公式，用感性來(lái)立項(xiàng)

App要解決的問題已經(jīng)擺在這里，接下來(lái)就是給產(chǎn)品設(shè)計(jì)一個(gè)大概的框架。按照套路，我應(yīng)該先把產(chǎn)品需要的功能全都列出來(lái)，然后再把它們轉(zhuǎn)化成干巴巴的、沒有任何藝術(shù)感染力的原型設(shè)計(jì)圖，這樣做的問題在于，直到產(chǎn)品的UI設(shè)計(jì)圖出爐之前，我沒法用眼睛去真實(shí)地看到產(chǎn)品是個(gè)什么樣子，我沒法對(duì)它產(chǎn)生一個(gè)主觀的感受。

人都是感覺的動(dòng)物，一個(gè)人依賴一個(gè)產(chǎn)品，往往是因?yàn)樗麗圻@個(gè)產(chǎn)品，而不是因?yàn)樗枰@個(gè)產(chǎn)品（除非你做的是剛需產(chǎn)品，而且沒有競(jìng)爭(zhēng)對(duì)手，例如12306；或者你壟斷了市場(chǎng)，例如淘寶），那么這些干巴巴的設(shè)計(jì)方案又怎能幫助我把握好產(chǎn)品的感覺呢？

我曾經(jīng)去某個(gè)大公司的UGC新平臺(tái)應(yīng)聘產(chǎn)品經(jīng)理，我提前去他們平臺(tái)看了看，網(wǎng)站設(shè)計(jì)得很糟糕，讓人沒有閱讀的欲望；明明是一個(gè)重度依賴用戶原創(chuàng)內(nèi)容的社區(qū)，然而各種困難的交互與產(chǎn)品中滲透出的強(qiáng)調(diào)權(quán)威的價(jià)值觀讓人沒有創(chuàng)作的動(dòng)力。于是，在重新規(guī)劃框架之余，我詳細(xì)地指出了每個(gè)頁(yè)面的問題，把理想中的頁(yè)面做成了效果圖，希望讓他們明白，我們要營(yíng)造什么樣的感覺才能讓用戶愛上它。

然而，當(dāng)我跟他們的產(chǎn)品總監(jiān)交談時(shí)，他對(duì)這些視覺化的方案完全沒有“感覺”，只是在一味地向我追問“用戶畫像”、“運(yùn)營(yíng)策略”這些比郁金香泡沫還要虛的東西，這場(chǎng)經(jīng)歷讓我更加確信：一個(gè)不愛用戶，不極力給產(chǎn)品營(yíng)造“感覺”，試圖用數(shù)學(xué)公式來(lái)推導(dǎo)產(chǎn)品設(shè)計(jì)的PM是永遠(yuǎn)沒法做出有魅力的產(chǎn)品的。

每個(gè)人心中都有一片“信念”的森林

上圖是我最開始設(shè)想的，也是最有魅力的場(chǎng)景概念。在這個(gè)概念下，產(chǎn)品設(shè)計(jì)極其簡(jiǎn)單，每個(gè)人的內(nèi)心都是一片草原，當(dāng)你進(jìn)入我的App，我就給你呈現(xiàn)你內(nèi)心的草原。你在生活中收集每一段感受，都是在這個(gè)草原上種一棵小樹苗。每天你都能領(lǐng)到一些水，你用這些水去灌溉那些你認(rèn)為最好的樹苗。隨著你度過的每一天，有些樹木因?yàn)殚L(zhǎng)期得不到水源而枯死了（草原的降雨量通常不足以支撐樹木的成長(zhǎng)，這是有科學(xué)依據(jù)的哼），那么這些枯樹就會(huì)被送到樹木墳場(chǎng)，提醒你再也不要相信這些虛偽的心靈雞湯。而在你的草原上，總會(huì)有某些樹苗長(zhǎng)得比其它的都快，它們變成了蒼天大樹，提醒你在它的指引下面對(duì)每天的生活。

Unity市場(chǎng)的3D資源千差萬(wàn)別

感性過后，就要回到專業(yè)的角度去衡量它的可行性。這個(gè)方案一共有兩種執(zhí)行辦法：3D和2D。經(jīng)過跟以前做游戲的同事探討，3D最可行的方式是Unity 3D，然而當(dāng)我花了一兩周時(shí)間了解Unity之后，我發(fā)現(xiàn)，直接在Unity市場(chǎng)買來(lái)的模型并不能拼湊出一個(gè)和諧的場(chǎng)景，因?yàn)椴煌Ｐ偷馁N圖風(fēng)格、面數(shù)、骨骼、動(dòng)作都有很大的差異（如上圖），我需要一個(gè)既有很強(qiáng)的原畫功底以便能修改貼圖，又會(huì)改模型和調(diào)動(dòng)作的資深3D設(shè)計(jì)師才能把所有買來(lái)的素材統(tǒng)一化。而在程序方面，找到一個(gè)精通Unity且熟悉手機(jī)適配的C#工程師，其耗費(fèi)的錢財(cái)和難度都遠(yuǎn)遠(yuǎn)高于去找一個(gè)制作原生iOS App的資深工程師。所以這個(gè)方案已經(jīng)遠(yuǎn)遠(yuǎn)超出了預(yù)算。

用分層動(dòng)畫來(lái)實(shí)現(xiàn)透視效果

而如果采用2D的方案，草原作為主場(chǎng)景實(shí)現(xiàn)起來(lái)并不困難，如上圖，場(chǎng)景從近到遠(yuǎn)分成若干個(gè)圖層，最近的前景（小草、雜石等）尺寸最長(zhǎng)，而最遠(yuǎn)的天空背景尺寸最短。在iOS前端，我們只需要定義一條規(guī)則：滑到最左邊時(shí)，所有的圖層都靠在屏幕最左邊；滑到最右邊時(shí)，所有的圖層都靠在最右邊。那么自然地，當(dāng)用戶滑動(dòng)屏幕時(shí)，他會(huì)發(fā)現(xiàn)前景滑動(dòng)得很快，而背景滑動(dòng)得很慢，不同的圖層都有不同的速度，于是就形成了透視的感覺。

場(chǎng)景是很好解決，那么物件是不是也很簡(jiǎn)單呢？我們的最主要物件是“樹”，也就是用戶撰寫的某個(gè)人生道理。為了確定“樹”要怎么做，首先我得確定這個(gè)“樹”包括哪些元素、操作以及它們以何種組織方式來(lái)呈現(xiàn)。

“樹”應(yīng)該是某種人生道理的集合

首先，如上圖，我的App不可能設(shè)計(jì)成用戶寫的每一篇文字都算作一棵樹。因?yàn)檫@個(gè)App的其中一個(gè)核心特點(diǎn)就是避免像日記或筆記應(yīng)用那樣：你收集了大量的文字，卻發(fā)現(xiàn)很多文字講的是同一個(gè)人生道理。我們必須把相同的人生道理歸納在一起，讓它們組成同一棵樹。例如，如果你收集了8篇文章，講的都是關(guān)于“怎樣利用好自己的內(nèi)向性格”這個(gè)話題，顯然它們應(yīng)該放進(jìn)同一個(gè)樹里，而不是每次閱讀他們都要去找到8顆不同的樹。

在一顆樹上，我不可能把這8篇文章設(shè)計(jì)成8個(gè)葉子。因?yàn)槿~子要放在樹枝上，8個(gè)葉子倒容易呈現(xiàn)，如果別人寫100篇文章呢？我難道顯示100個(gè)葉子和相對(duì)應(yīng)的100根樹枝？就算可以這樣做，那么這100根樹枝的組合必須符合樹的生長(zhǎng)規(guī)律，否則看起來(lái)就變成了反人類，這算法的編寫和UI的重構(gòu)又要耗費(fèi)多少M(fèi)anday呢？其次，樹的高度取決于你給它澆過多少次水，而不取決于它有多少個(gè)樹葉，那么顯然，一個(gè)很矮的小樹苗上長(zhǎng)著100根樹枝的情況是無(wú)法讓我接受的。所以，我只能把具體的文章入口呈現(xiàn)為浮窗的列表里，點(diǎn)擊某棵樹之前，你頂多知道這棵樹包括多少篇內(nèi)容，但具體內(nèi)容列表需要你點(diǎn)擊之后彈出浮窗才能看到。

2D所需的美術(shù)資源是超限的

上面關(guān)于“樹葉”、“樹枝”的思考其實(shí)是不需要的，因?yàn)樗鼈兌急灰黄狈駴Q了，只要你看看上圖就明白了。一棵樹會(huì)隨著澆水次數(shù)的增加而不斷長(zhǎng)大，如果是3D模型，我們可以把樹分解成幾個(gè)組成部分，然后給樹木定義成幾個(gè)階段，每個(gè)階段都設(shè)計(jì)一套隨機(jī)算法來(lái)組合成符合這個(gè)年齡段特征的樹木，在一個(gè)階段內(nèi)讓樹的零件數(shù)量與模型大小、貼圖在兩個(gè)端點(diǎn)之間平滑漸變就行了。然而這里是2D的樹，不論是樹干、樹枝還是樹葉，你都無(wú)法直接拉伸它們，因?yàn)檫@樣帶來(lái)的視覺效果會(huì)違背自然。那么我只能給樹木做大量的實(shí)體圖片，也許是10個(gè)、100個(gè)、1000個(gè)，這顯然是非常愚蠢的方案，它導(dǎo)致的木桶效應(yīng)意味著2D方案的破產(chǎn)。

那么我為什么還要提到關(guān)于“樹枝”和“樹葉”的思考呢？因?yàn)閷?duì)這個(gè)細(xì)節(jié)的思考最終改變了「the App」的核心設(shè)計(jì)?！竧he App」最終版本確定下來(lái)的原型設(shè)計(jì)，是從一次又一次失敗的設(shè)計(jì)里提取出來(lái)的亮點(diǎn)組合而成的，而不是走流程走出來(lái)的。我想向你表達(dá)的是，如果你是一名PM，你的上司和團(tuán)隊(duì)要求你先設(shè)計(jì)原型，請(qǐng)你明白，他們并不一定是正確的。

你應(yīng)該盡量避免那么早進(jìn)入原型設(shè)計(jì)的階段，原型設(shè)計(jì)牽扯太多全局性的東西，很多時(shí)候一個(gè)漏洞就意味著整個(gè)原型設(shè)計(jì)的報(bào)廢。除非你并不在意這個(gè)App是否完美，否則，在進(jìn)入正式設(shè)計(jì)前，請(qǐng)你多開腦洞，多去思考一些關(guān)鍵性的細(xì)節(jié)，并且跟開發(fā)、設(shè)計(jì)團(tuán)隊(duì)去討論它們的可行性以及實(shí)現(xiàn)的代價(jià)，這樣，你和你的團(tuán)隊(duì)都可以少走很多彎路。

你更愿意下載哪個(gè)App？

上面提到的3D和2D方案，它們的出發(fā)點(diǎn)都相同，那就是一個(gè)具有感染力的情景是最能打動(dòng)用戶的。例如左圖這款風(fēng)靡Appstore很久的時(shí)間管理軟件Forest，右圖是我把它遷移到一個(gè)普通界面后的效果，左右兩個(gè)App功能完全相同，但如果它是右圖這樣的界面，你還有沖動(dòng)去購(gòu)買它嗎？把產(chǎn)品的主線功能巧妙地融入一個(gè)情景之中，用App來(lái)打造這個(gè)情景，用這個(gè)情景的感染力來(lái)給用戶洗腦，我至今仍然認(rèn)為這將是成功速度最快的方案。

那既然沒有成本去做這件事，除了“情境化”之外，我手上的選項(xiàng)就只剩一個(gè)“專業(yè)化”了。我決定把「the App」打造成一個(gè)邏輯清晰、功能齊全、所有操作完美契合的專業(yè)化工具。產(chǎn)品的Point不再是“用情景給用戶洗腦”，而是用專業(yè)化的工具設(shè)計(jì)來(lái)強(qiáng)調(diào)自己是這個(gè)細(xì)分市場(chǎng)上的不二選擇，也就是強(qiáng)調(diào)細(xì)分的競(jìng)爭(zhēng)力。雖然身邊的人總提到我的競(jìng)爭(zhēng)對(duì)手是日記類App、記事類App和個(gè)人管理App，但如果我在“自我成長(zhǎng)”這個(gè)細(xì)分領(lǐng)域做到足夠的專業(yè)性，那么我也就不存在什么競(jìng)爭(zhēng)對(duì)手了。

專業(yè)性意味著一切，如果支付寶手機(jī)版能做好自己在“手機(jī)支付”這一塊的專業(yè)性，那么當(dāng)微信去做紅包的時(shí)候，它就不會(huì)沒有主見地采取跟隨戰(zhàn)略，而是早就忙著布局移動(dòng)支付了。這導(dǎo)致的結(jié)局是，我身邊便利店的手機(jī)支付大多都是微信這個(gè)支付領(lǐng)域的門外漢來(lái)普及的。

當(dāng)一個(gè)產(chǎn)品永遠(yuǎn)只關(guān)注怎樣把自己的核心訴求做得更棒的時(shí)候，它就能保持自己的競(jìng)爭(zhēng)力；而當(dāng)一個(gè)產(chǎn)品不看自己，總在看各種競(jìng)爭(zhēng)對(duì)手和假想敵的時(shí)候，它就會(huì)心態(tài)爆炸，做事沒有主次，以至于迷失自我。

擁有酷炫交互的Paper 51

既然定好了要做專業(yè)化的工具，那么我就去找參照。從我下載的眾多App中，我發(fā)現(xiàn)了Paper 51，這是個(gè)了不起的參照樣本，因?yàn)樗还饽芟癖愫?、日記那樣快速寫東西，而且用戶寫的每條內(nèi)容都是一片紙，這些紙張能自由拖拽，堆疊在一起，形成一個(gè)個(gè)紙堆——沒有比這更直觀的文字整理方式了（很遺憾，上圖并沒有展示紙張堆疊起來(lái)的效果，因?yàn)樵诮貓D時(shí)我發(fā)現(xiàn)，新版Paper51已經(jīng)放棄了這個(gè)設(shè)計(jì)）。

而從視覺上來(lái)講，Paper 51作為一個(gè)工具化的App有著了不起的交互效果，而這些效果竟然都是簡(jiǎn)單的2D切圖構(gòu)成的，這從成本上非常符合「the App」的開發(fā)思路——只要我能把2D切圖、適配方案和交互設(shè)計(jì)做到完美，那么只靠一名原生iOS工程師就能把「the App」做出和Paper 51一樣絢麗的視覺效果。

現(xiàn)在唯一不確定的是“紙張拖拽”的開發(fā)代價(jià)，我詢問過我的外包合作者智超，智超也不確定紙張拖拽到底好不好做、會(huì)出現(xiàn)多少Bug。對(duì)待這個(gè)問題，其實(shí)解決方案很簡(jiǎn)單，那就是劃清界限，讓拖拽功能變成一個(gè)附加的功能，它的存在或去除并不影響這個(gè)App的其它模塊。一方面，我們先做出一個(gè)沒有拖拽功能的App，先上線再說；而另一方面，什么時(shí)候我們有閑余資金去開發(fā)拖拽功能了，它能作為一個(gè)單獨(dú)的模塊加到App里面，并不影響原有的布局。之所以這樣考慮，是因?yàn)椤巴献А北旧砭褪且粋€(gè)快捷操作，快捷操作的本質(zhì)在于它是一個(gè)“捷徑”，它只是“主要路徑”的腳本化，它們都可以用“執(zhí)行已有功能1+執(zhí)行已有用能2……”這種句式來(lái)表達(dá)。

確定了「the App」的主要視覺元素是“紙”和“紙堆”之后，那么接下來(lái)就是思考怎樣用這幾個(gè)素材來(lái)解決上個(gè)章節(jié)提到的那3個(gè)要求，這樣我就能給產(chǎn)品立項(xiàng)，以便開始具體的工作了。

第1個(gè)要求：「the App」必須是一個(gè)能快速記錄和妥善保存的筆記工具

從目前iPhone的特性來(lái)看，在我不聯(lián)通Siri也不跟其它App互通接口的情況下，快速記錄最少的步驟包括：

1. 單擊打開App。
2. 輸入文字或粘貼文字。
3. 單擊保存。

但如果打開App默認(rèn)就能直接輸入文字，那么就意味著App啟動(dòng)的默認(rèn)畫面是輸入界面，這樣當(dāng)用戶不是想輸入文字，而是想查看內(nèi)容時(shí)，就要多一個(gè)退出的操作，這顯然是反人類的設(shè)計(jì)。而如果換種思路，在首頁(yè)常備一個(gè)輸入框體，那么，假設(shè)這個(gè)輸入框體在啟動(dòng)時(shí)默認(rèn)就處于激活狀態(tài)，那么鍵盤也會(huì)默認(rèn)存在，不想寫東西的用戶照樣多了一個(gè)退出的步驟；假設(shè)這個(gè)輸入框體的默認(rèn)狀態(tài)是不激活，那么當(dāng)用戶要寫東西時(shí)，一樣需要一次點(diǎn)擊操作才能激活這個(gè)輸入框，從操作上來(lái)講并沒有節(jié)省一個(gè)步驟。

快速記錄的最簡(jiǎn)步驟

綜上所述，必須在步驟1和2之間加上一個(gè)“點(diǎn)擊撰寫新文字”的步驟，這樣App才能獲得最好的交互體驗(yàn)。最終得到的結(jié)論是，首頁(yè)必須常駐一個(gè)空白的紙，點(diǎn)擊或拖拽這張紙，就能立馬寫東西，然后單擊保存就能回到主界面（如上圖步驟）。

人生道理的整理過程

第2個(gè)要求：「the App」能把關(guān)于同一個(gè)人生道理的記錄整合到一起，然后讓用戶取其精華

這就要求「the App」在用戶不那么忙的時(shí)候，能呈現(xiàn)用戶記錄的所有臨時(shí)的紙張，用戶從里面挑選那些相同的人生道理，把它們合并起來(lái)。這個(gè)過程是多次且可逆的，當(dāng)用戶覺得某篇文字實(shí)際上并不屬于某個(gè)人生道理，他可以隨時(shí)把這張紙從紙堆里抽出來(lái)；當(dāng)用戶某一天又收集了一篇新的人生感悟，他隨時(shí)能把這張紙加入一個(gè)已存在的紙堆里。就像上圖所示的那樣。

不斷提煉和升華自己的人生觀

當(dāng)用戶形成了一個(gè)紙堆之后，他能隨時(shí)去橫向比較其中不同紙張的優(yōu)劣，把那些過時(shí)或不夠好的觀點(diǎn)淘汰掉，精簡(jiǎn)這個(gè)紙堆。例如，小明最近發(fā)現(xiàn)自己最大的問題在于“擔(dān)心沒發(fā)生的事情”，他經(jīng)常寫一些關(guān)于這方面的感想，也經(jīng)常收集一些知乎、壹心理、朋友圈、書籍上的有用文章，并且把它們都整理到了同一個(gè)紙堆里。隨著他在生活中用實(shí)踐來(lái)克服這個(gè)問題，他對(duì)這個(gè)問題的理解就越來(lái)越深刻，那么他就可以定期回到這個(gè)紙堆，淘汰掉那些不夠深刻的文字，只保留對(duì)自己最有幫助的文字。同時(shí)，這個(gè)過程中也伴隨著會(huì)發(fā)現(xiàn)一些超越這個(gè)話題的存在，那么小明這時(shí)就可以去為它開辟一個(gè)新的人生道理。就像上圖所示的那樣。

形成人生觀的“排行榜”

第3個(gè)要求：「the App」必須設(shè)計(jì)一套嚴(yán)謹(jǐn)而方便的流程

只要每天堅(jiān)持使用，那么用戶就能自然而然地完成對(duì)他記錄的每一條人生信念的“定價(jià)”。對(duì)于那些讓自己在生活中摔跟頭的劣質(zhì)心靈雞湯或是錯(cuò)誤人生觀，「the App」會(huì)協(xié)助用戶給它一個(gè)越來(lái)越低的“定價(jià)”，提醒用戶把這個(gè)人生觀“拉黑”，在未來(lái)整個(gè)人生中都不要去重蹈覆轍；而對(duì)于那些不易堅(jiān)持卻對(duì)人生最有長(zhǎng)期效果的正品價(jià)值觀，「the App」會(huì)協(xié)助用戶給它越來(lái)越高的“定價(jià)”，直至形成每個(gè)人的“核心人生觀排行榜”，堅(jiān)守那些少數(shù)的，實(shí)踐證明最有效的人生觀，就能保證心靈的高速成長(zhǎng)（如上圖）。

這第3個(gè)要求是最難實(shí)現(xiàn)的，它并沒有在立項(xiàng)之初就找到最好的設(shè)計(jì)，在后面的“虛擬迭代”章節(jié)，你將看到它詳細(xì)的誕生過程。

三、概念圖/交互設(shè)計(jì)：直接開始設(shè)計(jì)App的門面

確定好產(chǎn)品大致框架之后，我依然沒有開始做原型，而是直接著手設(shè)計(jì)App的首頁(yè)——既然我選擇了Paper 51做視覺參照，我就必須先眼見為實(shí)，確定這樣真的能做出一個(gè)視覺效果達(dá)到并超過Paper 51的App。首頁(yè)的視覺也會(huì)反過來(lái)影響到原型的設(shè)計(jì)，在線框圖里看上去很有條理的首頁(yè)原型，做成最終的效果并不一定能達(dá)到我要求的美感，這就會(huì)導(dǎo)致我設(shè)計(jì)的某些流程將連鎖地報(bào)廢，所以最保險(xiǎn)的方案就是先把首頁(yè)的視覺確定到9成。

首先是美術(shù)風(fēng)格的確立。由于已經(jīng)放棄了3D，或是用2D分層動(dòng)畫來(lái)實(shí)現(xiàn)偽3D，那我只剩3個(gè)選項(xiàng)：扁平、矢量風(fēng)格和擬物。首先排除扁平風(fēng)格，因?yàn)槲覀兊脑O(shè)計(jì)元素都要圍繞著“紙”，而扁平化最不擅長(zhǎng)表現(xiàn)的就是實(shí)體感。Paper 51用的是簡(jiǎn)潔的矢量風(fēng)格，但它有我們所不具備的拖拽交互方式，這種交互方式給人帶來(lái)很強(qiáng)烈的物理感，彌補(bǔ)了矢量風(fēng)格的不足。所以，為了超越Paper 51的視覺，我唯有選擇擬物。

我第一眼就愛上的背景圖

確定了擬物風(fēng)格之后，我就開始找背景圖，我花了十多個(gè)小時(shí)去圖庫(kù)里找素材，但當(dāng)我看到負(fù)責(zé)測(cè)試的穎爺手上的錘子手機(jī)壁紙時(shí)（上圖左），我立馬就認(rèn)為非它莫屬了。老羅是個(gè)尊重藝術(shù)家的人，錘子系統(tǒng)的每一張壁紙都標(biāo)注了作者，于是我順利地在Depositphotos搜到了這張?jiān)瓐D（「the App」所有設(shè)計(jì)素材都是正版購(gòu)買的）。原圖是大白天的光環(huán)境，而「the App」的風(fēng)格應(yīng)該是安靜和隱私的，我希望給用戶營(yíng)造一種無(wú)人打擾的地下車庫(kù)的感覺，在這里，他可以向這面墻壁傾訴任何內(nèi)心深處的事，所以我把這張圖處理成了黑夜的光環(huán)境（上圖右）。

首頁(yè)擺放的肯定是入口級(jí)的東西，那么顯然就要先設(shè)計(jì)“紙堆”。Paper 51的紙堆是用算法自動(dòng)地把它所包含的紙張堆疊起來(lái)，比如說，如果這個(gè)紙堆含有3張紙，那么就顯示3張紙堆疊而成的樣子。但是在制作效果圖的時(shí)候我發(fā)現(xiàn)，「the App」的紙張是擬物的，如果只有一個(gè)“紙”的素材，僅靠隨機(jī)角度來(lái)堆疊，就會(huì)失去真實(shí)感，必須設(shè)計(jì)幾張不同的紙來(lái)隨機(jī)顯示；另外，紙張的陰影并不能像矢量圖那樣直接運(yùn)算生成，必須手繪才顯得真實(shí)，而手繪陰影帶來(lái)的問題就是，這個(gè)陰影的投射將不受控制：紙張A在紙張B的上面，它的陰影只應(yīng)該投射在紙張B上，不應(yīng)該投射在墻壁和紙張C上，這就要求紙張A在投影時(shí)必須以紙張B的輪廓作為遮罩區(qū)，因此實(shí)現(xiàn)起來(lái)會(huì)耗費(fèi)大量Manday。

設(shè)計(jì)“紙堆”，初步形成首頁(yè)

所以，最終我“偷懶”地給“紙堆”直接設(shè)計(jì)了一個(gè)整體的切圖（上圖左），而由于背景墻的頂部有個(gè)吊燈，所以這些紙堆只能放在屏幕中間，列表的滑動(dòng)方式也只能是橫向滑動(dòng)，加上肯定要放在底部才能用起來(lái)順手的“新增”按鈕，首頁(yè)的布局基本就確定下來(lái)了（上圖右）。

實(shí)現(xiàn)真實(shí)的光照效果

最讓我興奮的是我發(fā)現(xiàn)了如何讓整個(gè)首頁(yè)突破靜態(tài)PNG切圖擬物的局限，達(dá)到真實(shí)光照效果的辦法。我用通道+筆刷做了一個(gè)半透明的陰影覆蓋層（上圖中間），放在場(chǎng)景圖層的最頂部。這樣，滑動(dòng)到屏幕兩端的紙堆就會(huì)逐漸被陰影所吞噬，而中間不受陰影層所影響的部分，在對(duì)比之下看起來(lái)就像是被吊燈照亮了（上圖右）。

用“開關(guān)燈”進(jìn)一步強(qiáng)化光影

最后，我想著，既然強(qiáng)調(diào)了光影的變化，不如再做極致一些吧。于是我花了一兩天的時(shí)間，給首頁(yè)設(shè)計(jì)了開/關(guān)燈的交互效果?！竧he App」在未來(lái)很多用戶的手上是個(gè)很隱私的東西，沒人愿意在「the App」里寫上“我很懦弱，從今天開始我要采用××辦法改變這個(gè)現(xiàn)狀”然后被其他人隨意翻閱。所以，關(guān)燈的狀態(tài)剛好可以做成鎖定界面，如果用戶設(shè)置了密碼，那么這個(gè)界面就會(huì)顯示密碼盤，解鎖之后才能開燈。

開/關(guān)燈對(duì)適配來(lái)講是一個(gè)比較繁瑣的過程，我的辦法是，首先在PS設(shè)計(jì)稿里把所有圖層重新整理一遍，變成最精簡(jiǎn)的結(jié)構(gòu)。然后從這個(gè)圖層結(jié)構(gòu)中去思考：我們?cè)贏pp需要把圖層分成幾個(gè)大組，才能最方便地實(shí)現(xiàn)開關(guān)燈的效果，而且能有最高的擴(kuò)展性，隨時(shí)能加進(jìn)去新的按鈕或內(nèi)容。

提煉出首頁(yè)的4個(gè)UI大組

于是，如上圖，我整理出了從下到上的：背景、內(nèi)容、壓蓋、懸浮，這四個(gè)大組。開關(guān)燈能通過這些大組的UI響應(yīng)來(lái)實(shí)現(xiàn)，后續(xù)要加進(jìn)去什么內(nèi)容或按鈕，也能根據(jù)它的特點(diǎn)來(lái)加到“內(nèi)容”或“懸浮”這兩個(gè)組里，因?yàn)閺那榫成蟻?lái)說，所有真實(shí)擬物的按鈕或入口，都應(yīng)該加在“內(nèi)容”這個(gè)組里，這個(gè)組在“光影”組的下層，所以會(huì)受到光影的影響，看起來(lái)就能跟整個(gè)場(chǎng)景融為一體；而所有附加功能的按鈕或入口，都應(yīng)該放在“懸浮”這個(gè)組里，這個(gè)組的內(nèi)容會(huì)漂浮在整個(gè)空間之上，不受光影的影響，以強(qiáng)調(diào)它們是超越這個(gè)空間的，獨(dú)立的存在。

最后，用表格的方式來(lái)標(biāo)注它們的排列順序，以及顯示/隱藏的細(xì)則（實(shí)際上，從開發(fā)來(lái)講，這就是規(guī)范了每個(gè)UI組對(duì)于開/關(guān)燈“廣播”所響應(yīng)的“態(tài)”），然后再標(biāo)準(zhǔn)化所有切圖文件的命名，這樣，在整理首頁(yè)交互思路之余，開關(guān)燈效果的文檔也就順便做好了。

四、原型設(shè)計(jì)/文檔撰寫：用避免“反人類”的方法來(lái)設(shè)計(jì)原型

我之所以強(qiáng)調(diào)設(shè)計(jì)原型的方法不要“反人類”，是因?yàn)槲乙娺^很多人設(shè)計(jì)原型的方法的確是反人類的（至少在我看來(lái)覺得很心痛，也許他們有自己的思維方式這也說不準(zhǔn)），這里的“反人類”包括兩方面，一個(gè)是違背你自己設(shè)計(jì)原型的最佳思考方式，另一個(gè)則是違背程序員開發(fā)的工作方式。

Axure是我見過的最反人類且最普遍的原型設(shè)計(jì)方式，之所以說是“設(shè)計(jì)方式”而非“工具”，是因?yàn)樗兴鳛橐粋€(gè)工具的合理性（例如，用它來(lái)說服投資方、不懂產(chǎn)品的上司，設(shè)計(jì)交互，在原型完成之后做定稿，或進(jìn)行虛擬迭代），但如果用它來(lái)從零設(shè)計(jì)原型，我覺得這種行為就像是用十字螺絲刀來(lái)擰一個(gè)內(nèi)五角螺絲——心累。首先我講講Axure原型從程序員開發(fā)的角度來(lái)看為何反人類：

Axure原型跟直接截圖沒區(qū)別

假設(shè)這張瀑布流效果頁(yè)是產(chǎn)品經(jīng)理（或交互設(shè)計(jì)師）用Axure做給前端工程師的。它很美，沒錯(cuò)，然而這跟你直接去其它網(wǎng)站截個(gè)圖給程序員，然后說“照這樣做”沒什么太大區(qū)別，實(shí)際上這張圖本來(lái)就是瀑布流鼻祖Pinterest的截圖。

（1/2）用Visio定義瀑布流的“零件”

用Visio做就不同了，見上圖，首先來(lái)定義瀑布流的單個(gè)“零件”。實(shí)際上還有一些圖中沒有說清楚的細(xì)節(jié)，例如文字位如果超過5行要怎樣設(shè)計(jì)“展開”方式，以及整個(gè)“零件”的熱區(qū)構(gòu)成……這里只是大致的示例。

（2/2）用Visio定義瀑布流的布局

接著用第二張圖來(lái)定義布局（上圖）。同樣這只是個(gè)示意，很多細(xì)節(jié)沒辦法寫出來(lái)，且只局限于前端，但意思已經(jīng)表達(dá)清楚了。當(dāng)你拿著這兩張圖，配上UI設(shè)計(jì)師做出來(lái)的UI說明圖、切圖，前端（或重構(gòu)）工程師就能很輕松地一次性交給你想象中的頁(yè)面，也無(wú)需你那么辛苦地跟進(jìn)工作。原型設(shè)計(jì)最有效的方式并不是去“直接呈現(xiàn)你想要的東西”，而是“用模塊來(lái)重組產(chǎn)品，用最抽象的方式來(lái)概括全部的細(xì)節(jié)”。

而對(duì)于設(shè)計(jì)原型的人而言，Axure同樣是反人類的，因?yàn)樗`背了正常人類的思維過程。為什么很多人私底下講話妙語(yǔ)連珠，大會(huì)上卻變成口吃？因?yàn)樗降紫逻@些人講話是“發(fā)散”的，想到什么就說什么，信手拈來(lái)；但是在大會(huì)上，他們不敢這樣隨意講話，把嘴邊的靈感都咽了下去，硬生生地用一些高大上的“首先呢”、“其次呢”、“第一點(diǎn)”、“既要……又要”這種句型來(lái)套路自己，把自己套路成了啞巴，這種扼殺靈感的思維方式就是“歸納”的。

Axure的使用方法就是“歸納”的，當(dāng)你用它設(shè)計(jì)原型時(shí)，你就很容易變成思維上的“口吃”。它一上來(lái)就要求你做一個(gè)頁(yè)面，緊接著做下一個(gè)，緊接著就要確定這兩個(gè)頁(yè)面之間的關(guān)聯(lián)。但事實(shí)上，頁(yè)面、模塊和鏈接的成型是一個(gè)反復(fù)試錯(cuò)的過程，在Axure里，你一旦做出幾十個(gè)頁(yè)面，再想變動(dòng)其中的大模塊就太難了，約等于重做。它讓你喪失了不斷推翻自己原型設(shè)計(jì)的勇氣，變得害怕靈感。

而用Visio設(shè)計(jì)原型則能做到“發(fā)散”和“歸納”自由切換，用它做原型時(shí)，我能像個(gè)精神分裂患者一樣，一會(huì)切換成磕了藥的藝術(shù)家狀態(tài)，在畫布上隨意涂鴉我的靈感；一會(huì)又能切換成有點(diǎn)精神潔癖的理科男狀態(tài)，給剛才那個(gè)人收拾戰(zhàn)場(chǎng)，把那些亂七八糟的靈感整理成規(guī)整的文書——做原型最好的方式就是精神分裂。

自由繪制靈感草圖

見上圖，實(shí)際上，初期階段的原型比上圖的要復(fù)雜很多倍，到處都是密密麻麻的靈感和連線。這里為了你看得清上面的字，我就把它簡(jiǎn)化了一下。每當(dāng)我想到一個(gè)新點(diǎn)子，我只需要畫一個(gè)方塊，然后在方塊里寫上幾句話用來(lái)備忘；當(dāng)我想細(xì)化它時(shí)，我就把這個(gè)方塊做成一個(gè)稍微詳細(xì)一點(diǎn)的頁(yè)面，然后用箭頭把它連接到某個(gè)地方。

我無(wú)需站在多么宏觀的角度去思考要怎么設(shè)計(jì)頁(yè)面，我只是盯著這個(gè)畫布，一遍又一遍地假設(shè)我是用戶，順著箭頭走，看看到了哪一步會(huì)遇到什么問題，被什么東西卡住，或是需要什么新的功能。做Visio原型是我在整個(gè)「the App」開發(fā)中最享受的一個(gè)環(huán)節(jié)，我會(huì)聽著FreeTEMPO喝著咖啡來(lái)做這件事，可惜它占整個(gè)開發(fā)的時(shí)間并不長(zhǎng)，只怪它效率太高了。

輕松調(diào)整流程

如果你用的是Axure，當(dāng)你流程設(shè)計(jì)有問題時(shí)，你需要把所有關(guān)于這一步的入口、出口都修改掉，隨著原型詳細(xì)度不斷增加，可能每一次修改都會(huì)耗費(fèi)你幾十分鐘甚至一天的勞動(dòng)。然而在Visio設(shè)計(jì)圖中，一切都是二維展開的，你需要修改的功能，有什么箭頭指向它，以及它的箭頭指向哪些模塊，一切都一目了然，只需拖動(dòng)幾下鼠標(biāo)就能調(diào)整整個(gè)流程，一次大改動(dòng)一般只耗費(fèi)幾分鐘的時(shí)間。

做原型最緊要的就是得比它高一個(gè)維度，四維空間（空間4維，不是3維空間+1維時(shí)間）的人看人類，五臟六腑都是展開的，所以看你一眼就知道你昨晚吃了什么。目前人類的App都是二維的，做在Axure里，你也只能困在那個(gè)二維空間里去探索，但做在Visio里，你就能一眼看到它的全局，因?yàn)樵谀硞€(gè)維度中去看低一個(gè)維度的東西，它就是展開的。

初具規(guī)模的App原型

一眨眼，整個(gè)原型變成了上圖的樣子（上圖只是案發(fā)現(xiàn)場(chǎng)還原，因?yàn)楫?dāng)時(shí)的原型已經(jīng)直接被繼續(xù)細(xì)化了），一個(gè)有大概流程的原型稿。你可以注意到，原型已經(jīng)被若干個(gè)灰色的“容器”分割成了幾塊，這樣做的原因在于，當(dāng)你開始細(xì)化某個(gè)模塊時(shí)，它的內(nèi)容就會(huì)越來(lái)越多，內(nèi)部的箭頭和連接線也越來(lái)越多，如果不用容器裝起來(lái)，那么內(nèi)部、外部的連接就會(huì)混雜起來(lái)，讓你難以專注。

在專心設(shè)計(jì)某個(gè)容器內(nèi)部的功能時(shí)，我通常會(huì)把整個(gè)容器拖開老遠(yuǎn)，跟其它部分完全隔離開，以便我能不被其它模塊分心。在這個(gè)階段，由于畫布已經(jīng)被撐得很大，所以我強(qiáng)烈建議你買一個(gè)帶有橫向滾輪的鼠標(biāo)，Visio沒有類似于PS的手型工具以便用來(lái)自由拖拽畫布（只能點(diǎn)擊鼠標(biāo)中間來(lái)拖拽，但操作體驗(yàn)不流暢），橫向滾輪+縱向滾輪可以描述任意一個(gè)二維空間向量，讓你在越來(lái)越大的原型畫布上自由沖浪。

用模塊來(lái)拆分原型

當(dāng)原型設(shè)計(jì)到這一步的時(shí)候，整個(gè)格局已經(jīng)大致確定下來(lái)，不再需要每天給它做大手術(shù)了。此時(shí)如果我繼續(xù)在一整張畫布上作圖，就會(huì)比較難受（卡頓，加上頻繁的縮放和跳轉(zhuǎn)），那么這時(shí)候就可以把原型根據(jù)模塊來(lái)分成若干個(gè)頁(yè)面。如上圖，首頁(yè)的原型被我單獨(dú)分成一個(gè)頁(yè)面，用5個(gè)橙色的方塊來(lái)代表箭頭對(duì)應(yīng)的模塊，寫上“詳見××模塊”。

具體模塊之：閱讀模塊

見上圖，這是原型的其中一個(gè)具體模塊——“閱讀”模塊，你看到的這個(gè)示例是「the App」早期的一個(gè)原型，當(dāng)時(shí)的設(shè)計(jì)跟現(xiàn)在的有所不同，但它挺適合用來(lái)體現(xiàn)模塊化思維。

（1/2）從后端而言，兩種閱讀內(nèi)容是不平等的

如上圖，從后端來(lái)講，“感悟”包括“未淬火”和“已淬火”兩類，而“信念”則應(yīng)該定義為：個(gè)數(shù)∈[1，限定額]的若干個(gè)“已淬火感悟”的“組”——它們并不是平等的。但前端設(shè)計(jì)上它們有很多類似的地方。

（2/2）從前端來(lái)看，兩者有很多共同點(diǎn)

如上圖，左邊是“感悟”的閱讀頁(yè)，右邊是“信念”的閱讀頁(yè)，它們閱讀區(qū)域、刪除、移動(dòng)功能都是相近的，只不過是有一些細(xì)節(jié)的區(qū)別。

合并同類項(xiàng)

模塊化的設(shè)計(jì)思維也好，面向?qū)ο蟮拈_發(fā)思維也好，其實(shí)都是合并同類項(xiàng)。

在用Visio做原型時(shí)，當(dāng)我發(fā)現(xiàn)這兩個(gè)頁(yè)面有很多類似的地方，我就用鼠標(biāo)把它們拖到一起，然后試著合并同類項(xiàng)。如上圖，我把這兩個(gè)頁(yè)面的閱讀模塊擺到左右兩邊，把其中雷同的模塊隱掉，放到中間的黑色容器來(lái)統(tǒng)一描述，就像一個(gè)夾心餅干。前端工程師拿到這頁(yè)文檔，只要開發(fā)中間黑色的餡兒就行了。

用一個(gè)流程圖來(lái)表達(dá)兩個(gè)功能

而至于“刪除”功能就更簡(jiǎn)單了，畫上一個(gè)流程圖，它就是一個(gè)直接能翻譯成代碼的狀態(tài)機(jī)。不管刪除的是感悟還是信念，實(shí)際上只是一開始走的支路不同，而且這些支路僅限于前端展示，當(dāng)狀態(tài)機(jī)走到后端層面時(shí)，其實(shí)處理的邏輯都是完全一樣的。

上面列舉的這兩件事，是把“信念”和“感悟”在原型層面能看到的一些相同之處歸納起來(lái)，讓它們共享一些模塊，但這種抽象能不能更高級(jí)一些？我發(fā)現(xiàn)一個(gè)現(xiàn)象：雖然“信念”在概念上是“感悟”的組，它們級(jí)別不同，但是在整個(gè)原型中它們很多的處理邏輯都相同，例如：移動(dòng)、列表展示、打孔……這是因?yàn)樵谝曈X設(shè)計(jì)上，它們只是不同類型的“紙”，必然會(huì)有很多雷同的地方，所以，何不直接把它們劃分到一個(gè)“類”？

《黎明殺機(jī)》

一個(gè)很火的恐怖游戲《黎明殺機(jī)》最近出了個(gè)很大的BUG，各大平臺(tái)主播都在玩這個(gè)BUG，玩出了很多搞笑的效果。首先說下這個(gè)游戲是怎么玩的，很簡(jiǎn)單，四個(gè)玩家扮演“逃生者”，一個(gè)玩家扮演“屠夫”。逃生者被屠夫抓住掛在樹上就會(huì)死，要順利逃出去你必須跟屠夫玩躲貓貓，偷偷修好5個(gè)發(fā)電機(jī)以便開啟逃生門逃走。

屠夫一共有6種，他們的能力都是固定的，分別是能在草叢里偷偷放捕獸夾來(lái)陰人的“夾子屠夫”；手里拿著電鋸，電鋸拉開就能高速?zèng)_到你面前的“電鋸?fù)婪颉?；敲一敲鈴鐺就能隱身的“小叮當(dāng)”；喜歡在地上畫個(gè)圈圈詛咒別人的“李奶奶”；《月光光心慌慌》的男主角“殺人鬼”和擁有瞬移能力的“護(hù)士”。

而作為逃生者，他們手上可以拿一些道具，例如可以用來(lái)晃瞎屠夫幾秒鐘的手電筒，或是可以用來(lái)包扎傷口的急救包。

于是奇怪的事情發(fā)生了，有一天，某個(gè)國(guó)外玩家發(fā)現(xiàn)了一個(gè)BUG：通過鬼畜地在“屠夫”和“逃生者”兩個(gè)界面之間切換和點(diǎn)擊，“逃生者”手上竟然可以拿到“電鋸?fù)婪颉钡碾婁?，而如果這個(gè)人被一個(gè)“夾子屠夫”殺死了，夾子屠夫竟然可以撿起這把電鋸，右鍵拉動(dòng)電鋸就能像電鋸?fù)婪蛞粯右?0km/h的速度沖刺鋸翻逃生者，還能拿到電鋸?fù)婪驅(qū)Ｓ械摹半婁彌_刺”獎(jiǎng)勵(lì)分?jǐn)?shù)。

雖然這個(gè)BUG很重大，不應(yīng)該出現(xiàn)，但是從這里可以看到《黎明殺機(jī)》通過對(duì)“類”的精妙劃分而實(shí)現(xiàn)的高效開發(fā)（對(duì)于一個(gè)只有20人左右的小團(tuán)隊(duì)，能制作出占據(jù)Steam榜首的PC游戲，高效是必須的）。從玩家角度來(lái)看，不同的屠夫的能力都是固定的，但是從這個(gè)BUG可以看出，實(shí)際上這個(gè)“能力”都是由道具所賦予的。

電鋸?fù)婪蛑岳婁徔梢詻_刺，并不是因?yàn)檫@個(gè)屠夫比其它屠夫多了一些專有代碼，而是“電鋸”這個(gè)道具本身就能賦予一個(gè)屠夫“高速?zèng)_刺”的能力；電鋸沖刺的分?jǐn)?shù)獎(jiǎng)勵(lì)，也并不是由其它模塊來(lái)負(fù)責(zé)具體的計(jì)算，而是這個(gè)道具在使用時(shí)就會(huì)自動(dòng)計(jì)算分?jǐn)?shù)，然后把結(jié)算出來(lái)的分?jǐn)?shù)“通知”給那個(gè)統(tǒng)一的計(jì)分模塊；而逃生者手上可以拿電鋸，屠夫可以像逃生者一樣從地上撿起它則說明，所有的道具，不論是逃生者的急救包還是屠夫的電鋸，它們都有很多共享的屬性，例如：可以被撿起來(lái)、可以裝備在手上、點(diǎn)右鍵可以發(fā)揮它的功能、屏幕左下角會(huì)用圖標(biāo)顯示這個(gè)道具的狀態(tài)……

《黎明殺機(jī)》對(duì)“類”的劃分

如上圖，實(shí)際上，在《黎明殺機(jī)》中，所有的道具都有一個(gè)通用的模板，這個(gè)總的模板就是“父類”，在此基礎(chǔ)上細(xì)分下去，形成各有特點(diǎn)的屠夫和幸存者道具的“子類”，直到最后，變成實(shí)實(shí)在在的，某個(gè)具體的可以拿在手上的“對(duì)象”，例如工具箱和電鋸。

“類”：NOTE

回到「the App」原型設(shè)計(jì)，經(jīng)過跟iOS開發(fā)者智超的討論，我們決定把“感悟”和“信念”設(shè)計(jì)成同一個(gè)叫做Note的“類”（上圖），有了這個(gè)類的劃分，我就能進(jìn)一步去整合Visio原型中除了上面提到的“閱讀”和“刪除”之外的模塊了。

Visio原型制作完之后，我把它們轉(zhuǎn)移到OneNote之中，專門建立了一個(gè)描述“Note”的分區(qū)，按照類的結(jié)構(gòu)來(lái)建立不同層級(jí)的頁(yè)面，然后把做好的Visio圖形粘貼到各個(gè)頁(yè)面里……其它的模塊也都用模塊化的思路整理到OneNote里，到了這一步，一個(gè)完整的App文檔就差不多搞定了。

同步這個(gè)OneNote文檔給程序員，給他們分配閱讀權(quán)限，我們就能協(xié)同工作了。「the App」除了設(shè)計(jì)素材都是正版購(gòu)買之外，所有軟件也都是正版購(gòu)買的，所以協(xié)同工作對(duì)我來(lái)講只是點(diǎn)一下“保存到云”。正版是一種生活方式，每個(gè)月我大概花500月費(fèi)來(lái)供養(yǎng)我整個(gè)電腦的所有軟件和服務(wù)，這是愛的供養(yǎng)，這讓我從來(lái)不需要到處去找破解版軟件，我的電腦從不會(huì)中毒，我重裝電腦之后所有軟件的云端設(shè)置都會(huì)自動(dòng)還原，我的所有資料也一直在付費(fèi)云端增量更新，我從不擔(dān)心它們會(huì)丟失，每天我一打開電腦就能安心工作。

Onenote文檔中不光得有Visio原型，還需要很多的附加文檔，從性質(zhì)上看，主要包括“宏”、“系統(tǒng)文檔”和“集中說明”。它們并不是我一開始就明白要去單獨(dú)做的，而是做原型的過程中，遇到了用Visio無(wú)法說清的問題，或是即使說清了，也會(huì)讓Visio圖形變得太過臃腫，于是就自然而然地想到要另起爐灶了。

（1/3）附加文檔：宏

（1）首先說“宏”

“宏”一般用來(lái)歸納那些App中零散出現(xiàn)的，但是不便于統(tǒng)一成某個(gè)模塊的東西。上圖是一個(gè)用來(lái)歸納「the App」中所有后期可能要變動(dòng)的數(shù)值的Excel表格，例如，打孔器的冷卻時(shí)間是多少個(gè)小時(shí)？打一次孔的加分是多少？每個(gè)信念最多能容納的感悟數(shù)量是多少？……這些數(shù)值我無(wú)法一次確定下來(lái)，需要在試用過程中不斷調(diào)整，顯然，如果我今天在A文檔里去改數(shù)值α，明天在B文檔里去改數(shù)值β，我和智超之間至少有一個(gè)人會(huì)瘋掉的。

當(dāng)我寫一個(gè)宏文檔，智超就會(huì)在代碼里寫一個(gè)宏，在這個(gè)宏里他就能直接修改這些數(shù)值，并能自動(dòng)應(yīng)用到所有關(guān)聯(lián)的代碼，只需要幾秒鐘就搞定了。而在后期測(cè)試的時(shí)候，我顯然不能像數(shù)值中要求的那樣：一個(gè)感悟?qū)懴聛?lái)之后，隔9小時(shí)才能淬火——我只有1分鐘的耐心。那么很簡(jiǎn)單，我在表格中多加入一列“測(cè)試數(shù)值”，寫上“1分鐘”，到時(shí)要個(gè)測(cè)試版就行了。

（2/3）附加文檔：系統(tǒng)文檔

（2）“系統(tǒng)文檔”

Visio原型比較善于表達(dá)前端的流程或狀態(tài)機(jī)的邏輯，而如果你想要詳細(xì)闡述某個(gè)系統(tǒng)的原理就比較難了?！竧he App」中“文件夾”這個(gè)概念，在Visio中主要描述的是看得到的部分，而看不到的細(xì)節(jié)就要用Word文檔來(lái)描述了（上圖左），例如：文件夾是否可以重名？是否可以為空？?jī)蓚€(gè)欄目的文件排序規(guī)則分別是什么？這些東西在Word文檔中用論文的結(jié)構(gòu)可以很輕松地交代明白。

「the App」的文件夾都有封面，這些封面包括3種，第1種是特殊文件夾的固定封面（包括不設(shè)置封面時(shí)的默認(rèn)代圖），第2種是用戶自己拍攝或?qū)胝掌?，?種是系統(tǒng)自帶的封面。那么這就帶來(lái)一些問題，例如：固定封面是否屬于系統(tǒng)自帶封面可供選擇？用戶自己拍攝的照片被替換掉之后，是否繼續(xù)保存？……

這些問題很難用簡(jiǎn)潔的文字來(lái)概括，所以我做了一些“偽數(shù)據(jù)結(jié)構(gòu)”（例如上圖右），雖然這個(gè)數(shù)據(jù)結(jié)構(gòu)設(shè)計(jì)得很外行，直接采用可能會(huì)引起手機(jī)爆炸，但文檔的意義在于溝通，偽數(shù)據(jù)結(jié)構(gòu)的表達(dá)方式在這里能用最少的廢話講清楚我要干什么，那么它就是最好的溝通方式。同理，你甚至可以用偽代碼的方式來(lái)描述一些文字不便形容的邏輯，只要程序員能輕松理解到跟你完全一樣的想法，何樂而不為呢？

（3/3）附加文檔：集中說明

最后一種情況是“集中說明”，顧名思義，「the App」中很多東西是零散的，不便于在主文檔中出現(xiàn)的。例如左圖歸納了App中所有出現(xiàn)的文本輸入窗口的具體屬性，包括它們的窗口名、初始文本……這樣我在原型中就不必列舉每個(gè)文本輸入頁(yè)面的具體屬性；再例如右圖歸納了App中所有教程的出現(xiàn)時(shí)機(jī)、地點(diǎn)、展現(xiàn)方式，同理，這些凌亂的東西根本不應(yīng)該出現(xiàn)在主文檔不是嗎？

【未完待續(xù)……】

作者：黃聯(lián)樵（微信：arubagod），歡迎交流。

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