這篇文章希望向你分享的是涯穷，如果你想開發(fā)一款A(yù)pp，而你請(qǐng)不起一個(gè)完整的開發(fā)團(tuán)隊(duì)藏雏，那么你如何借助外包公司來做好這件事求豫；你如何去攬下立項(xiàng)、原型诉稍、系統(tǒng)蝠嘉、UI、交互杯巨，這些所有的工作蚤告，幾乎沒有任何面對(duì)面的交流，一切想法都通過文檔來跟外包溝通服爷，最終拿到一個(gè)跟你的預(yù)期絲毫不差的精品App杜恰。
由于字?jǐn)?shù)超限，這篇文章會(huì)分為<上><下>篇來發(fā)表仍源。你現(xiàn)在看到的是上篇心褐。
<上篇>包括——
1、解決一個(gè)問題就夠了（產(chǎn)品定位/需求分析）
2笼踩、拒絕數(shù)學(xué)公式逗爹，用感性來立項(xiàng)（產(chǎn)品立項(xiàng)）
3、直接開始設(shè)計(jì)App的門面（概念圖/交互設(shè)計(jì)）
4嚎于、用避免“反人類”的方法來設(shè)計(jì)原型（原型設(shè)計(jì)/文檔撰寫）
<下篇>包括——
5掘而、左右腦同時(shí)開工來制作擬物UI（UI設(shè)計(jì)/切圖/適配文檔）
6、虛擬迭代（成本控制）
我耗盡心思寫這篇文章于购，并不是想要給我的App打廣告袍睡，而是總結(jié)我過去一年創(chuàng)業(yè)開發(fā)這個(gè)App的過程中探索到的所有關(guān)鍵性的經(jīng)驗(yàn)，將它們凝聚到這27000字里肋僧，供給所有對(duì)App開發(fā)有興趣的人了解——因此斑胜，本文所有涉及到App名稱的地方控淡，都會(huì)用「the App」來代替。
黃聯(lián)樵止潘，原創(chuàng)
我曾是一個(gè)海淘平臺(tái)的產(chǎn)品負(fù)責(zé)人掺炭。一年前，我想給這個(gè)世界留下點(diǎn)自己的作品覆山，于是辭職眾籌開始做「the App」。眾籌的錢并不夠我請(qǐng)一個(gè)完整的開發(fā)團(tuán)隊(duì)泥栖，幫我忙的幾位朋友除了一名是專業(yè)測(cè)試之外簇宽，其他人并不是業(yè)內(nè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ì)本缠，那么你如何借助外包公司來做好這件事斥扛；你如何去攬下立項(xiàng)、原型丹锹、系統(tǒng)犹赖、UI、交互卷仑，這些所有的工作峻村，幾乎沒有任何面對(duì)面的交流，一切想法都通過文檔來跟外包溝通锡凝，最終拿到一個(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)品馁启，并為之付出自己的一切。
解決一個(gè)問題就夠了
一個(gè)產(chǎn)品能解決好一個(gè)問題就夠了芍秆，也許你會(huì)說惯疙，成功的產(chǎn)品需要“生態(tài)”和“盈利模式”，我只能說妖啥，除非你產(chǎn)品的核心功能本來就是去實(shí)現(xiàn)某種交易（例如p2p金融）霉颠，或是致力于開發(fā)某種消費(fèi)的沖動(dòng)（例如“免費(fèi)”手游），否則荆虱，生態(tài)和盈利模式都是建立在“最重要的那個(gè)問題已解決”的基礎(chǔ)上的蒿偎。
高屋建瓴一上來就要搞什么生態(tài)的App往往是認(rèn)準(zhǔn)了一個(gè)風(fēng)口，恨不得把所有功能都加上去怀读，BP上能畫100個(gè)分析圖诉位，然而基本功能卻做不到位，于是大多都被市場(chǎng)淘汰了菜枷。一個(gè)App的99%的營(yíng)收也許都來自于它的附加功能不从，然而如果我們不把99%的力氣花在那不起眼的、只占營(yíng)收1%的核心功能上犁跪，這件事就會(huì)很尷尬椿息。
以微信為例，不論微信迭代多少個(gè)版本坷衍，它始終是一開始那個(gè)“取代手機(jī)發(fā)短信功能”的App（也許你已經(jīng)忘了寝优，以前人與人之間是用短信來溝通的）。第一欄和第二欄永遠(yuǎn)是消息列表和通訊錄枫耳，就算朋友圈是中國最大的社交圈子乏矾，游戲欄目是中國最大的手游流量入口，它們都不可能突然跳出來影響你的日常使用迁杨∽晷模“人”永遠(yuǎn)是通訊的主體，即使后來出現(xiàn)了公眾號(hào)和應(yīng)用號(hào)铅协，它們也永遠(yuǎn)是被收納在一個(gè)次級(jí)入口之中捷沸。
而當(dāng)你打開一個(gè)具體的對(duì)話，它的核心永遠(yuǎn)是文字之間的交流狐史，因?yàn)檫@才是“取代手機(jī)短信”的體現(xiàn)痒给。哪怕是后來推出了劃時(shí)代的“語音”说墨，發(fā)送語音的按鈕也永遠(yuǎn)是在發(fā)送文字的旁邊，而語音的氣泡也永遠(yuǎn)不會(huì)出現(xiàn)很多人要求的“暫筒园兀”或“后退”（除非未來微信推出插件式功能）尼斧，因?yàn)榱奶鞖馀莸闹黧w永遠(yuǎn)是文字氣泡，其它所有類型的氣泡试吁，不管是現(xiàn)在的圖片棺棵、鏈接、視頻熄捍，還是未來的VR對(duì)話甚至是腦電波交流烛恤，它們?cè)诮换ド隙加肋h(yuǎn)不能凌駕于“文字氣泡”之上——除非文字已經(jīng)不再是人類的第一遠(yuǎn)程交流方式。哪天我們能像三體星人那樣用光的波長(zhǎng)和頻率來交流了治唤，微信的這個(gè)最核心結(jié)構(gòu)才會(huì)改變棒动，否則它就是走向庸俗糙申，然后走向墮落宾添。
「the?App」希望解決的唯一問題是：“這個(gè)世界上大多數(shù)人有動(dòng)力去改變自己，然而他們沒有一套行之有效的方法來堅(jiān)持正確的人生信念”柜裸。這個(gè)問題可以拆分成以下3種現(xiàn)象缕陕，每個(gè)現(xiàn)象都對(duì)「the App」提出了1個(gè)必須做到的要求。
1疙挺、我們一面收集人生觀扛邑，一面又在遺忘——當(dāng)你看到一本好書，你會(huì)把那些醍醐灌頂?shù)木渥诱聛眍砣唬N在書桌前蔬崩，現(xiàn)在那張紙肯定早就不見了；當(dāng)你在朋友圈看到一篇好文章搀暑，你會(huì)立刻收藏下來沥阳，但你從來不會(huì)回頭去看；有時(shí)你突然頓悟自点，覺得從今天起就能重獲新生桐罕，但你一個(gè)月之后就變回老樣子了……
——這要求「the App」必須是一個(gè)能快速記錄，又能妥善保存的筆記工具桂敛。
2功炮、我們總在一個(gè)人生問題上重復(fù)糾結(jié)，無法做到不斷升華——例如术唬，你的缺點(diǎn)是習(xí)慣向別人妥協(xié)薪伏，不能維持自己的底線。從小到大粗仓，你受到過很多次大的傷害毅该，每次你都痛徹心扉博秫，決定從明天起不再做個(gè)老好人。然而這么多年過去了眶掌，你對(duì)如何“不做老好人”并沒有什么更深入的經(jīng)驗(yàn)挡育，因?yàn)槊看文愕膶?shí)踐周期都只有幾天，然后就把它忘得影都沒了朴爬，重新變成那個(gè)老好人即寒，直到下一次重大挫折的到來。
——這要求「the App」必須是一個(gè)有效的知識(shí)整理軟件召噩，能把不同時(shí)期記錄下來的母赵，所有關(guān)于同一個(gè)人生道理的文字都匯集起來，并且給到你一種取其精華的整理方式具滴，讓你對(duì)這個(gè)道理的認(rèn)識(shí)能不斷升華凹嘲。
3、由于人的劣根性构韵，我們總在不同的人生觀之間搖擺——人的本性是趨利避害周蹭，在一個(gè)浮躁的社會(huì)染缸里，我們很難頂住誘惑疲恢，去堅(jiān)持一個(gè)不變的人生哲學(xué)凶朗。
去年你拜訪了一個(gè)高僧，他告訴你要以德報(bào)怨显拳，你激動(dòng)得差點(diǎn)要去做居士棚愤；半年前你換了公司，你上司整天給你穿小鞋杂数，你決定要做一個(gè)“厚黑”的人來保護(hù)自己宛畦；三個(gè)月前你看了一篇心靈雞湯，講了一個(gè)窮孩子兜揣10元錢最終成為澳門賭王的勵(lì)志故事揍移，你決定不再計(jì)較當(dāng)下困擾次和，無條件提升自己的實(shí)力和境界；這一周你又煲完了《紙牌屋》羊精，于是決定要做男主角那樣能玩轉(zhuǎn)辦公室政治的人斯够。你的人生觀一直在搖擺，然而卻鮮有成果喧锦，因?yàn)槟愫苌僭谝粋€(gè)不動(dòng)搖的人生方向上付出持續(xù)的努力读规。
——這要求「the App」必須擁有一套價(jià)值衡量體系，能精準(zhǔn)地衡量不同人生觀之間的優(yōu)劣燃少，幫用戶淘汰掉那些劣質(zhì)的心靈雞湯和錯(cuò)誤價(jià)值觀束亏，找到那個(gè)（或若干個(gè)）對(duì)自己最重要的人生方向，每天提醒自己來堅(jiān)持阵具。
我會(huì)用眾籌資金的90%來解決這個(gè)唯一的問題碍遍。思索這個(gè)問題貫穿著「the App」開發(fā)的頭和尾定铜，也將延續(xù)到未來每個(gè)版本。每當(dāng)我認(rèn)為產(chǎn)品設(shè)計(jì)已經(jīng)能完美解決問題時(shí)怕敬，過不了多久揣炕，我總會(huì)發(fā)現(xiàn)，我給產(chǎn)品增加了不少額外的功能东跪，企圖用它們來滿足主要功能在智慧上的欠缺畸陡。
但最有效的問題解決方案永遠(yuǎn)是一條單一的路徑，如果這條路上還有一些小岔路虽填，只證明我還沒有找到最優(yōu)的辦法丁恭。就像相對(duì)論把萬有引力統(tǒng)一了進(jìn)來，M理論貌似也能把幾種弦理論斋日、相對(duì)論和量子力學(xué)統(tǒng)一進(jìn)來牲览，科學(xué)家一直在尋找用最簡(jiǎn)單的一個(gè)理論來概括宇宙所有的原理。從上帝或文明高度發(fā)展的外星人來看恶守，也許我們的這種追求很渺小第献，還有太長(zhǎng)的路要走，但這個(gè)過程本身就是一種嘉獎(jiǎng)熬的。
拒絕數(shù)學(xué)公式痊硕，用感性來立項(xiàng)
App要解決的問題已經(jīng)擺在這里赊级，接下來就是給產(chǎn)品設(shè)計(jì)一個(gè)大概的框架押框。按照套路，我應(yīng)該先把產(chǎn)品需要的功能全都列出來理逊，然后再把它們轉(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íng)造什么樣的感覺才能讓用戶愛上它。
然而腹躁，當(dāng)我跟他們的產(chǎn)品總監(jiān)交談時(shí)桑包，他對(duì)這些視覺化的方案完全沒有“感覺”，只是在一味地向我追問“用戶畫像”纺非、“運(yùn)營(yíng)策略”這些比郁金香泡沫還要虛的東西哑了，這場(chǎng)經(jīng)歷讓我更加確信：一個(gè)不愛用戶，不極力給產(chǎn)品營(yíng)造“感覺”烧颖，試圖用數(shù)學(xué)公式來推導(dǎo)產(chǎn)品設(shè)計(jì)的PM是永遠(yuǎn)沒法做出有魅力的產(chǎn)品的弱左。
上圖是我最開始設(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ì)每天的生活。
感性過后葵姥，就要回到專業(yè)的角度去衡量它的可行性荷鼠。這個(gè)方案一共有兩種執(zhí)行辦法：3D和2D。經(jīng)過跟以前做游戲的同事探討榔幸，3D最可行的方式是Unity 3D允乐，然而當(dāng)我花了一兩周時(shí)間了解Unity之后，我發(fā)現(xiàn)牡辽，直接在Unity市場(chǎng)買來的模型并不能拼湊出一個(gè)和諧的場(chǎng)景喳篇，因?yàn)椴煌Ｐ偷馁N圖風(fēng)格敞临、面數(shù)态辛、骨骼、動(dòng)作都有很大的差異（如上圖）挺尿，我需要一個(gè)既有很強(qiáng)的原畫功底以便能修改貼圖奏黑，又會(huì)改模型和調(diào)動(dòng)作的資深3D設(shè)計(jì)師才能把所有買來的素材統(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ù)算窄俏。
而如果采用2D的方案蹂匹，草原作為主場(chǎng)景實(shí)現(xiàn)起來并不困難，如上圖凹蜈，場(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è)“樹”包括哪些元素、操作以及它們以何種組織方式來呈現(xiàn)蛾洛。
首先养铸，如上圖，我的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ī)律哀墓，否則看起來就變成了反人類忘苛，這算法的編寫和UI的重構(gòu)又要耗費(fèi)多少M(fèi)anday呢麦锯？其次，樹的高度取決于你給它澆過多少次水镇眷，而不取決于它有多少個(gè)樹葉季惯，那么顯然吠各，一個(gè)很矮的小樹苗上長(zhǎng)著100根樹枝的情況是無法讓我接受的。所以勉抓，我只能把具體的文章入口呈現(xiàn)為浮窗的列表里贾漏，點(diǎn)擊某棵樹之前，你頂多知道這棵樹包括多少篇內(nèi)容藕筋，但具體內(nèi)容列表需要你點(diǎn)擊之后彈出浮窗才能看到纵散。
上面關(guān)于“樹葉”、“樹枝”的思考其實(shí)是不需要的隐圾，因?yàn)樗鼈兌急灰黄狈駴Q了伍掀，只要你看看上圖就明白了。一棵樹會(huì)隨著澆水次數(shù)的增加而不斷長(zhǎng)大暇藏，如果是3D模型蜜笤，我們可以把樹分解成幾個(gè)組成部分，然后給樹木定義成幾個(gè)階段盐碱，每個(gè)階段都設(shè)計(jì)一套隨機(jī)算法來組合成符合這個(gè)年齡段特征的樹木把兔，在一個(gè)階段內(nèi)讓樹的零件數(shù)量與模型大小、貼圖在兩個(gè)端點(diǎn)之間平滑漸變就行了瓮顽。然而這里是2D的樹县好，不論是樹干、樹枝還是樹葉暖混，你都無法直接拉伸它們缕贡，因?yàn)檫@樣帶來的視覺效果會(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ì)。「the App」最終版本確定下來的原型設(shè)計(jì)酣藻，是從一次又一次失敗的設(shè)計(jì)里提取出來的亮點(diǎn)組合而成的曹洽，而不是走流程走出來的。我想向你表達(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ì)都可以少走很多彎路莉测。
上面提到的3D和2D方案唧喉，它們的出發(fā)點(diǎn)都相同捣卤，那就是一個(gè)具有感染力的情景是最能打動(dòng)用戶的。例如左圖這款風(fēng)靡Appstore很久的時(shí)間管理軟件Forest八孝，右圖是我把它遷移到一個(gè)普通界面后的效果董朝，左右兩個(gè)App功能完全相同，但如果它是右圖這樣的界面干跛，你還有沖動(dòng)去購買它嗎子姜？把產(chǎn)品的主線功能巧妙地融入一個(gè)情景之中，用App來打造這個(gè)情景楼入，用這個(gè)情景的感染力來給用戶洗腦哥捕，我至今仍然認(rèn)為這將是成功速度最快的方案。
那既然沒有成本去做這件事嘉熊，除了“情境化”之外遥赚，我手上的選項(xiàng)就只剩一個(gè)“專業(yè)化”了。我決定把「the App」打造成一個(gè)邏輯清晰阐肤、功能齊全凫佛、所有操作完美契合的專業(yè)化工具讲坎。產(chǎn)品的Point不再是“用情景給用戶洗腦”，而是用專業(yè)化的工具設(shè)計(jì)來強(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)域的門外漢來普及的四濒。
當(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)爆炸，做事沒有主次喳资，以至于迷失自我觉吭。
既然定好了要做專業(yè)化的工具，那么我就去找參照仆邓。從我下載的眾多App中鲜滩，我發(fā)現(xiàn)了Paper 51，這是個(gè)了不起的參照樣本节值，因?yàn)樗还饽芟癖愫炨愎琛⑷沼浤菢涌焖賹憱|西，而且用戶寫的每條內(nèi)容都是一片紙搞疗，這些紙張能自由拖拽嗓蘑，堆疊在一起，形成一個(gè)個(gè)紙堆——沒有比這更直觀的文字整理方式了（很遺憾匿乃，上圖并沒有展示紙張堆疊起來的效果桩皿，因?yàn)樵诮貓D時(shí)我發(fā)現(xiàn)，新版Paper51已經(jīng)放棄了這個(gè)設(shè)計(jì)）幢炸。
而從視覺上來講泄隔，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……”這種句式來表達(dá)绽慈。
確定了「the App」的主要視覺元素是“紙”和“紙堆”之后恨旱，那么接下來就是思考怎樣用這幾個(gè)素材來解決上個(gè)章節(jié)提到的那3個(gè)要求，這樣我就能給產(chǎn)品立項(xiàng)坝疼，以便開始具體的工作了搜贤。
第1個(gè)要求是，「the App」必須是一個(gè)能快速記錄和妥善保存的筆記工具裙士。從目前iPhone的特性來看入客，在我不聯(lián)通Siri也不跟其它App互通接口的情況下，快速記錄最少的步驟包括：
1腿椎、單擊打開App桌硫。
2、輸入文字或粘貼文字啃炸。
3铆隘、單擊保存。
但如果打開App默認(rèn)就能直接輸入文字南用，那么就意味著App啟動(dòng)的默認(rèn)畫面是輸入界面膀钠，這樣當(dāng)用戶不是想輸入文字掏湾，而是想查看內(nèi)容時(shí)，就要多一個(gè)退出的操作肿嘲，這顯然是反人類的設(shè)計(jì)融击。而如果換種思路，在首頁常備一個(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è)輸入框鹅士，從操作上來講并沒有節(jié)省一個(gè)步驟。
綜上所述惩坑，必須在步驟1和2之間加上一個(gè)“點(diǎn)擊撰寫新文字”的步驟掉盅，這樣App才能獲得最好的交互體驗(yàn)。最終得到的結(jié)論是旭贬，首頁必須常駐一個(gè)空白的紙怔接，點(diǎn)擊或拖拽這張紙，就能立馬寫東西稀轨，然后單擊保存就能回到主界面（如上圖步驟）扼脐。
第2個(gè)要求是，「the App」能把關(guān)于同一個(gè)人生道理的記錄整合到一起奋刽，然后讓用戶取其精華瓦侮。這就要求「the App」在用戶不那么忙的時(shí)候，能呈現(xiàn)用戶記錄的所有臨時(shí)的紙張佣谐，用戶從里面挑選那些相同的人生道理肚吏，把它們合并起來。這個(gè)過程是多次且可逆的狭魂，當(dāng)用戶覺得某篇文字實(shí)際上并不屬于某個(gè)人生道理罚攀，他可以隨時(shí)把這張紙從紙堆里抽出來；當(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í)踐來克服這個(gè)問題秽梅，他對(duì)這個(gè)問題的理解就越來越深刻抹蚀，那么他就可以定期回到這個(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è)越來越低的“定價(jià)”，提醒用戶把這個(gè)人生觀“拉黑”剪返，在未來整個(gè)人生中都不要去重蹈覆轍废累；而對(duì)于那些不易堅(jiān)持卻對(duì)人生最有長(zhǎng)期效果的正品價(jià)值觀，「the App」會(huì)協(xié)助用戶給它越來越高的“定價(jià)”脱盲，直至形成每個(gè)人的“核心人生觀排行榜”邑滨，堅(jiān)守那些少數(shù)的，實(shí)踐證明最有效的人生觀钱反，就能保證心靈的高速成長(zhǎng)（如上圖）掖看。
這第3個(gè)要求是最難實(shí)現(xiàn)的，它并沒有在立項(xiàng)之初就找到最好的設(shè)計(jì)面哥，在后面的“虛擬迭代”章節(jié)哎壳，你將看到它詳細(xì)的誕生過程。
直接開始設(shè)計(jì)App的門面
確定好產(chǎn)品大致框架之后幢竹，我依然沒有開始做原型耳峦，而是直接著手設(shè)計(jì)App的首頁——既然我選擇了Paper 51做視覺參照，我就必須先眼見為實(shí)焕毫，確定這樣真的能做出一個(gè)視覺效果達(dá)到并超過Paper 51的App蹲坷。首頁的視覺也會(huì)反過來影響到原型的設(shè)計(jì)驶乾，在線框圖里看上去很有條理的首頁原型，做成最終的效果并不一定能達(dá)到我要求的美感循签，這就會(huì)導(dǎo)致我設(shè)計(jì)的某些流程將連鎖地報(bào)廢级乐，所以最保險(xiǎn)的方案就是先把首頁的視覺確定到9成。
首先是美術(shù)風(fēng)格的確立县匠。由于已經(jīng)放棄了3D风科，或是用2D分層動(dòng)畫來實(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)格，但它有我們所不具備的拖拽交互方式玖姑，這種交互方式給人帶來很強(qiáng)烈的物理感愕秫，彌補(bǔ)了矢量風(fēng)格的不足。所以焰络，為了超越Paper 51的視覺戴甩，我唯有選擇擬物。
確定了擬物風(fēng)格之后闪彼，我就開始找背景圖甜孤，我花了十多個(gè)小時(shí)去圖庫里找素材，但當(dāng)我看到負(fù)責(zé)測(cè)試的穎爺手上的錘子手機(jī)壁紙時(shí)（上圖左）备蚓，我立馬就認(rèn)為非它莫屬了课蔬。老羅是個(gè)尊重藝術(shù)家的人，錘子系統(tǒng)的每一張壁紙都標(biāo)注了作者郊尝，于是我順利地在Depositphotos搜到了這張?jiān)瓐D（「the App」所有設(shè)計(jì)素材都是正版購買的）二跋。原圖是大白天的光環(huán)境，而「the App」的風(fēng)格應(yīng)該是安靜和隱私的流昏，我希望給用戶營(yíng)造一種無人打擾的地下車庫的感覺扎即，在這里，他可以向這面墻壁傾訴任何內(nèi)心深處的事况凉，所以我把這張圖處理成了黑夜的光環(huán)境（上圖右）谚鄙。
首頁擺放的肯定是入口級(jí)的東西，那么顯然就要先設(shè)計(jì)“紙堆”刁绒。Paper 51的紙堆是用算法自動(dòng)地把它所包含的紙張堆疊起來闷营，比如說，如果這個(gè)紙堆含有3張紙，那么就顯示3張紙堆疊而成的樣子傻盟。但是在制作效果圖的時(shí)候我發(fā)現(xiàn)速蕊，「the App」的紙張是擬物的，如果只有一個(gè)“紙”的素材娘赴，僅靠隨機(jī)角度來堆疊规哲，就會(huì)失去真實(shí)感，必須設(shè)計(jì)幾張不同的紙來隨機(jī)顯示诽表；另外唉锌，紙張的陰影并不能像矢量圖那樣直接運(yùn)算生成，必須手繪才顯得真實(shí)竿奏，而手繪陰影帶來的問題就是袄简，這個(gè)陰影的投射將不受控制：紙張A在紙張B的上面，它的陰影只應(yīng)該投射在紙張B上议双，不應(yīng)該投射在墻壁和紙張C上痘番，這就要求紙張A在投影時(shí)必須以紙張B的輪廓作為遮罩區(qū)，因此實(shí)現(xiàn)起來會(huì)耗費(fèi)大量Manday平痰。
所以伍纫，最終我“偷懶”地給“紙堆”直接設(shè)計(jì)了一個(gè)整體的切圖（上圖左）宗雇，而由于背景墻的頂部有個(gè)吊燈，所以這些紙堆只能放在屏幕中間莹规，列表的滑動(dòng)方式也只能是橫向滑動(dòng)赔蒲，加上肯定要放在底部才能用起來順手的“新增”按鈕，首頁的布局基本就確定下來了（上圖右）良漱。
最讓我興奮的是我發(fā)現(xiàn)了如何讓整個(gè)首頁突破靜態(tài)PNG切圖擬物的局限舞虱，達(dá)到真實(shí)光照效果的辦法。我用通道+筆刷做了一個(gè)半透明的陰影覆蓋層（上圖中間）母市，放在場(chǎng)景圖層的最頂部矾兜。這樣，滑動(dòng)到屏幕兩端的紙堆就會(huì)逐漸被陰影所吞噬患久，而中間不受陰影層所影響的部分椅寺，在對(duì)比之下看起來就像是被吊燈照亮了（上圖右）。
最后蒋失，我想著返帕，既然強(qiáng)調(diào)了光影的變化，不如再做極致一些吧篙挽。于是我花了一兩天的時(shí)間荆萤，給首頁設(shè)計(jì)了開/關(guān)燈的交互效果∠晨ǎ「the App」在未來很多用戶的手上是個(gè)很隱私的東西链韭，沒人愿意在「the App」里寫上“我很懦弱邑闲，從今天開始我要采用××辦法改變這個(gè)現(xiàn)狀”然后被其他人隨意翻閱。所以梧油，關(guān)燈的狀態(tài)剛好可以做成鎖定界面苫耸，如果用戶設(shè)置了密碼，那么這個(gè)界面就會(huì)顯示密碼盤儡陨，解鎖之后才能開燈褪子。
開/關(guān)燈對(duì)適配來講是一個(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)容琅拌。
于是缨伊，如上圖，我整理出了從下到上的：背景进宝、內(nèi)容刻坊、壓蓋、懸浮党晋，這四個(gè)大組谭胚。開關(guān)燈能通過這些大組的UI響應(yīng)來實(shí)現(xiàn)，后續(xù)要加進(jìn)去什么內(nèi)容或按鈕未玻，也能根據(jù)它的特點(diǎn)來加到“內(nèi)容”或“懸浮”這兩個(gè)組里灾而，因?yàn)閺那榫成蟻碚f，所有真實(shí)擬物的按鈕或入口扳剿，都應(yīng)該加在“內(nèi)容”這個(gè)組里旁趟，這個(gè)組在“光影”組的下層，所以會(huì)受到光影的影響舞终，看起來就能跟整個(gè)場(chǎng)景融為一體轻庆；而所有附加功能的按鈕或入口，都應(yīng)該放在“懸浮”這個(gè)組里敛劝，這個(gè)組的內(nèi)容會(huì)漂浮在整個(gè)空間之上余爆，不受光影的影響，以強(qiáng)調(diào)它們是超越這個(gè)空間的夸盟，獨(dú)立的存在蛾方。
最后，用表格的方式來標(biāo)注它們的排列順序，以及顯示/隱藏的細(xì)則（實(shí)際上桩砰，從開發(fā)來講拓春，這就是規(guī)范了每個(gè)UI組對(duì)于開/關(guān)燈“廣播”所響應(yīng)的“態(tài)”），然后再標(biāo)準(zhǔn)化所有切圖文件的命名亚隅，這樣硼莽，在整理首頁交互思路之余，開關(guān)燈效果的文檔也就順便做好了煮纵。
用避免“反人類”的方法來設(shè)計(jì)原型
我之所以強(qiáng)調(diào)設(shè)計(jì)原型的方法不要“反人類”懂鸵，是因?yàn)槲乙娺^很多人設(shè)計(jì)原型的方法的確是反人類的（至少在我看來覺得很心痛，也許他們有自己的思維方式這也說不準(zhǔn)）行疏，這里的“反人類”包括兩方面匆光，一個(gè)是違背你自己設(shè)計(jì)原型的最佳思考方式，另一個(gè)則是違背程序員開發(fā)的工作方式酿联。
Axure是我見過的最反人類且最普遍的原型設(shè)計(jì)方式终息，之所以說是“設(shè)計(jì)方式”而非“工具”，是因?yàn)檎耆茫兴鳛橐粋€(gè)工具的合理性（例如周崭，用它來說服投資方、不懂產(chǎn)品的上司震桶，設(shè)計(jì)交互休傍，在原型完成之后做定稿，或進(jìn)行虛擬迭代）蹲姐，但如果用它來從零設(shè)計(jì)原型，我覺得這種行為就像是用十字螺絲刀來擰一個(gè)內(nèi)五角螺絲——心累人柿。首先我講講Axure原型從程序員開發(fā)的角度來看為何反人類：
假設(shè)這張瀑布流效果頁是產(chǎn)品經(jīng)理（或交互設(shè)計(jì)師）用Axure做給前端工程師的柴墩。它很美，沒錯(cuò)凫岖，然而這跟你直接去其它網(wǎng)站截個(gè)圖給程序員江咳，然后說“照這樣做”沒什么太大區(qū)別，實(shí)際上這張圖本來就是瀑布流鼻祖Pinterest的截圖哥放。
用Visio做就不同了歼指，見上圖，首先來定義瀑布流的單個(gè)“零件”甥雕。實(shí)際上還有一些圖中沒有說清楚的細(xì)節(jié)踩身，例如文字位如果超過5行要怎樣設(shè)計(jì)“展開”方式，以及整個(gè)“零件”的熱區(qū)構(gòu)成……這里只是大致的示例社露。
接著用第二張圖來定義布局（上圖）挟阻。同樣這只是個(gè)示意，很多細(xì)節(jié)沒辦法寫出來，且只局限于前端附鸽，但意思已經(jīng)表達(dá)清楚了脱拼。當(dāng)你拿著這兩張圖，配上UI設(shè)計(jì)師做出來的UI說明圖坷备、切圖熄浓，前端（或重構(gòu)）工程師就能很輕松地一次性交給你想象中的頁面，也無需你那么辛苦地跟進(jìn)工作省撑。原型設(shè)計(jì)最有效的方式并不是去“直接呈現(xiàn)你想要的東西”赌蔑，而是“用模塊來重組產(chǎn)品，用最抽象的方式來概括全部的細(xì)節(jié)”丁侄。
而對(duì)于設(shè)計(jì)原型的人而言惯雳，Axure同樣是反人類的，因?yàn)樗`背了正常人類的思維過程鸿摇。為什么很多人私底下講話妙語連珠石景，大會(huì)上卻變成口吃？因?yàn)樗降紫逻@些人講話是“發(fā)散”的拙吉，想到什么就說什么潮孽，信手拈來疯潭；但是在大會(huì)上轧飞，他們不敢這樣隨意講話含滴，把嘴邊的靈感都咽了下去菩颖，硬生生地用一些高大上的“首先呢”沪么、“其次呢”山憨、“第一點(diǎn)”劳翰、“既要……又要”這種句型來套路自己印颤，把自己套路成了啞巴请祖，這種扼殺靈感的思維方式就是“歸納”的订歪。
Axure的使用方法就是“歸納”的，當(dāng)你用它設(shè)計(jì)原型時(shí)肆捕，你就很容易變成思維上的“口吃”刷晋。它一上來就要求你做一個(gè)頁面，緊接著做下一個(gè)慎陵，緊接著就要確定這兩個(gè)頁面之間的關(guān)聯(lián)眼虱。但事實(shí)上，頁面席纽、模塊和鏈接的成型是一個(gè)反復(fù)試錯(cuò)的過程捏悬，在Axure里，你一旦做出幾十個(gè)頁面胆筒，再想變動(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è)方塊焕窝，然后在方塊里寫上幾句話用來備忘；當(dāng)我想細(xì)化它時(shí)维贺，我就把這個(gè)方塊做成一個(gè)稍微詳細(xì)一點(diǎn)的頁面它掂，然后用箭頭把它連接到某個(gè)地方。
我無需站在多么宏觀的角度去思考要怎么設(shè)計(jì)頁面溯泣，我只是盯著這個(gè)畫布虐秋，一遍又一遍地假設(shè)我是用戶，順著箭頭走垃沦，看看到了哪一步會(huì)遇到什么問題熟妓，被什么東西卡住，或是需要什么新的功能栏尚。做Visio原型是我在整個(gè)「the App」開發(fā)中最享受的一個(gè)環(huán)節(jié)，我會(huì)聽著FreeTEMPO喝著咖啡來做這件事只恨，可惜它占整個(gè)開發(fā)的時(shí)間并不長(zhǎng)译仗，只怪它效率太高了。
如果你用的是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è)維度的東西，它就是展開的演闭。
一眨眼不跟，整個(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ì)越來越多吴趴，內(nèi)部的箭頭和連接線也越來越多漆诽，如果不用容器裝起來，那么內(nèi)部锣枝、外部的連接就會(huì)混雜起來厢拭，讓你難以專注。
在專心設(shè)計(jì)某個(gè)容器內(nèi)部的功能時(shí)撇叁，我通常會(huì)把整個(gè)容器拖開老遠(yuǎn)供鸠，跟其它部分完全隔離開，以便我能不被其它模塊分心陨闹。在這個(gè)階段楞捂，由于畫布已經(jīng)被撐得很大薄坏，所以我強(qiáng)烈建議你買一個(gè)帶有橫向滾輪的鼠標(biāo)，Visio沒有類似于PS的手型工具以便用來自由拖拽畫布（抑或是我沒找到）寨闹，橫向滾輪+縱向滾輪可以描述任意一個(gè)二維空間向量胶坠，讓你在越來越大的原型畫布上自由沖浪。
當(dāng)原型設(shè)計(jì)到這一步的時(shí)候鼻忠，整個(gè)格局已經(jīng)大致確定下來涵但，不再需要每天給它做大手術(shù)了。此時(shí)如果我繼續(xù)在一整張畫布上作圖帖蔓，就會(huì)比較難受（卡頓矮瘟，加上頻繁的縮放和跳轉(zhuǎn)），那么這時(shí)候就可以把原型根據(jù)模塊來分成若干個(gè)頁面塑娇。如上圖澈侠，首頁的原型被我單獨(dú)分成一個(gè)頁面，用5個(gè)橙色的方塊來代表箭頭對(duì)應(yīng)的模塊埋酬，寫上“詳見××模塊”哨啃。
見上圖，這是原型的其中一個(gè)具體模塊——“閱讀”模塊写妥，你看到的這個(gè)示例是「the App」早期的一個(gè)原型拳球，當(dāng)時(shí)的設(shè)計(jì)跟現(xiàn)在的有所不同，但它挺適合用來體現(xiàn)模塊化思維珍特。
如上圖，從后端來講扎筒，“感悟”包括“未淬火”和“已淬火”兩類莱找，而“信念”則應(yīng)該定義為：個(gè)數(shù)∈[1，限定額]的若干個(gè)“已淬火感悟”的“組”——它們并不是平等的嗜桌。但前端設(shè)計(jì)上它們有很多類似的地方奥溺。
如上圖骨宠，左邊是“感悟”的閱讀頁浮定，右邊是“信念”的閱讀頁，它們閱讀區(qū)域层亿、刪除壶唤、移動(dòng)功能都是相近的，只不過是有一些細(xì)節(jié)的區(qū)別棕所。
模塊化的設(shè)計(jì)思維也好，面向?qū)ο蟮拈_發(fā)思維也好悯辙，其實(shí)都是合并同類項(xiàng)琳省。
在用Visio做原型時(shí)迎吵，當(dāng)我發(fā)現(xiàn)這兩個(gè)頁面有很多類似的地方，我就用鼠標(biāo)把它們拖到一起针贬，然后試著合并同類項(xiàng)击费。如上圖，我把這兩個(gè)頁面的閱讀模塊擺到左右兩邊桦他，把其中雷同的模塊隱掉蔫巩，放到中間的黑色容器來統(tǒng)一描述，就像一個(gè)夾心餅干快压。前端工程師拿到這頁文檔圆仔，只要開發(fā)中間黑色的餡兒就行了。
而至于“刪除”功能就更簡(jiǎn)單了蔫劣，畫上一個(gè)流程圖坪郭，它就是一個(gè)直接能翻譯成代碼的狀態(tài)機(jī)。不管刪除的是感悟還是信念脉幢，實(shí)際上只是一開始走的支路不同歪沃，而且這些支路僅限于前端展示，當(dāng)狀態(tài)機(jī)走到后端層面時(shí)嫌松，其實(shí)處理的邏輯都是完全一樣的沪曙。
上面列舉的這兩件事，是把“信念”和“感悟”在原型層面能看到的一些相同之處歸納起來萎羔，讓它們共享一些模塊液走，但這種抽象能不能更高級(jí)一些？我發(fā)現(xiàn)一個(gè)現(xiàn)象：雖然“信念”在概念上是“感悟”的組外驱，它們級(jí)別不同育灸，但是在整個(gè)原型中它們很多的處理邏輯都相同，例如：移動(dòng)昵宇、列表展示磅崭、打孔……這是因?yàn)樵谝曈X設(shè)計(jì)上，它們只是不同類型的“紙”瓦哎，必然會(huì)有很多雷同的地方砸喻，所以，何不直接把它們劃分到一個(gè)“類”蒋譬？
一個(gè)很火的恐怖游戲《黎明殺機(jī)》最近出了個(gè)很大的BUG割岛，各大平臺(tái)主播都在玩這個(gè)BUG，玩出了很多搞笑的效果犯助。首先說下這個(gè)游戲是怎么玩的癣漆，很簡(jiǎn)單，四個(gè)玩家扮演“逃生者”剂买，一個(gè)玩家扮演“屠夫”惠爽。逃生者被屠夫抓住掛在樹上就會(huì)死癌蓖，要順利逃出去你必須跟屠夫玩躲貓貓，偷偷修好5個(gè)發(fā)電機(jī)以便開啟逃生門逃走婚肆。
屠夫一共有6種租副，他們的能力都是固定的，分別是能在草叢里偷偷放捕獸夾來陰人的“夾子屠夫”较性；手里拿著電鋸用僧，電鋸拉開就能高速?zèng)_到你面前的“電鋸?fù)婪颉保磺靡磺免忚K就能隱身的“小叮當(dāng)”赞咙；喜歡在地上畫個(gè)圈圈詛咒別人的“李奶奶”责循；《月光光心慌慌》的男主角“殺人鬼”和擁有瞬移能力的“護(hù)士”。
而作為逃生者人弓，他們手上可以拿一些道具沼死，例如可以用來晃瞎屠夫幾秒鐘的手電筒，或是可以用來包扎傷口的急救包崔赌。
于是奇怪的事情發(fā)生了意蛀，有一天，某個(gè)國外玩家發(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游戲伸头，高效是必須的）匾效。從玩家角度來看，不同的屠夫的能力都是固定的恤磷，但是從這個(gè)BUG可以看出面哼，實(shí)際上這個(gè)“能力”都是由道具所賦予的。
電鋸?fù)婪蛑岳婁徔梢詻_刺扫步，并不是因?yàn)檫@個(gè)屠夫比其它屠夫多了一些專有代碼魔策，而是“電鋸”這個(gè)道具本身就能賦予一個(gè)屠夫“高速?zèng)_刺”的能力；電鋸沖刺的分?jǐn)?shù)獎(jiǎng)勵(lì)河胎，也并不是由其它模塊來負(fù)責(zé)具體的計(jì)算闯袒，而是這個(gè)道具在使用時(shí)就會(huì)自動(dòng)計(jì)算分?jǐn)?shù)，然后把結(jié)算出來的分?jǐn)?shù)“通知”給那個(gè)統(tǒng)一的計(jì)分模塊；而逃生者手上可以拿電鋸搁吓，屠夫可以像逃生者一樣從地上撿起它則說明原茅，所有的道具，不論是逃生者的急救包還是屠夫的電鋸堕仔，它們都有很多共享的屬性，例如：可以被撿起來晌区、可以裝備在手上摩骨、點(diǎn)右鍵可以發(fā)揮它的功能、屏幕左下角會(huì)用圖標(biāo)顯示這個(gè)道具的狀態(tài)……
如上圖朗若，實(shí)際上恼五，在《黎明殺機(jī)》中，所有的道具都有一個(gè)通用的模板哭懈，這個(gè)總的模板就是“父類”灾馒，在此基礎(chǔ)上細(xì)分下去，形成各有特點(diǎn)的屠夫和幸存者道具的“子類”遣总，直到最后睬罗，變成實(shí)實(shí)在在的，某個(gè)具體的可以拿在手上的“對(duì)象”旭斥，例如工具箱和電鋸容达。
回到「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)來建立不同層級(jí)的頁面熙揍，然后把做好的Visio圖形粘貼到各個(gè)頁面里……其它的模塊也都用模塊化的思路整理到OneNote里，到了這一步近速，一個(gè)完整的App文檔就差不多搞定了诈嘿。
同步這個(gè)OneNote文檔給程序員，給他們分配閱讀權(quán)限削葱，我們就能協(xié)同工作了奖亚。「the App」除了設(shè)計(jì)素材都是正版購買之外析砸，所有軟件也都是正版購買的昔字，所以協(xié)同工作對(duì)我來講只是點(diǎn)一下“保存到云”。正版是一種生活方式，每個(gè)月我大概花500月費(fèi)來供養(yǎng)我整個(gè)電腦的所有軟件和服務(wù)作郭，這是愛的供養(yǎng)陨囊，這讓我從來不需要到處去找破解版軟件，我的電腦從不會(huì)中毒夹攒，我重裝電腦之后所有軟件的云端設(shè)置都會(huì)自動(dòng)還原蜘醋，我的所有資料也一直在付費(fèi)云端增量更新，我從不擔(dān)心它們會(huì)丟失咏尝，每天我一打開電腦就能安心工作压语。
Onenote文檔中不光得有Visio原型，還需要很多的附加文檔编检，從性質(zhì)上看胎食，主要包括“宏”、“系統(tǒng)文檔”和“集中說明”允懂。它們并不是我一開始就明白要去單獨(dú)做的厕怜，而是做原型的過程中，遇到了用Visio無法說清的問題蕾总，或是即使說清了粥航，也會(huì)讓Visio圖形變得太過臃腫，于是就自然而然地想到要另起爐灶了谤专。
首先說“宏”躁锡。“宏”一般用來歸納那些App中零散出現(xiàn)的置侍，但是不便于統(tǒng)一成某個(gè)模塊的東西映之。上圖是一個(gè)用來歸納「the App」中所有后期可能要變動(dòng)的數(shù)值的Excel表格，例如蜡坊，打孔器的冷卻時(shí)間是多少個(gè)小時(shí)杠输？打一次孔的加分是多少？每個(gè)信念最多能容納的感悟數(shù)量是多少秕衙？……這些數(shù)值我無法一次確定下來蠢甲，需要在試用過程中不斷調(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ū)懴聛碇缶祝?小時(shí)才能淬火——我只有1分鐘的耐心碟狞。那么很簡(jiǎn)單，我在表格中多加入一列“測(cè)試數(shù)值”婚陪，寫上“1分鐘”族沃，到時(shí)要個(gè)測(cè)試版就行了。
然后說說“系統(tǒng)文檔”泌参。Visio原型比較善于表達(dá)前端的流程或狀態(tài)機(jī)的邏輯竭业，而如果你想要詳細(xì)闡述某個(gè)系統(tǒng)的原理就比較難了〖吧幔「the App」中“文件夾”這個(gè)概念，在Visio中主要描述的是看得到的部分窟绷，而看不到的細(xì)節(jié)就要用Word文檔來描述了（上圖左）锯玛，例如：文件夾是否可以重名？是否可以為空兼蜈？?jī)蓚€(gè)欄目的文件排序規(guī)則分別是什么攘残？這些東西在Word文檔中用論文的結(jié)構(gòu)可以很輕松地交代明白。
「the App」的文件夾都有封面为狸，這些封面包括3種歼郭，第1種是特殊文件夾的固定封面（包括不設(shè)置封面時(shí)的默認(rèn)代圖），第2種是用戶自己拍攝或?qū)胝掌簦?種是系統(tǒng)自帶的封面病曾。那么這就帶來一些問題，例如：固定封面是否屬于系統(tǒng)自帶封面可供選擇漾根？用戶自己拍攝的照片被替換掉之后泰涂，是否繼續(xù)保存？……
這些問題很難用簡(jiǎn)潔的文字來概括辐怕，所以我做了一些“偽數(shù)據(jù)結(jié)構(gòu)”（例如上圖右）逼蒙，雖然這個(gè)數(shù)據(jù)結(jié)構(gòu)設(shè)計(jì)得很外行，直接采用可能會(huì)引起手機(jī)爆炸寄疏，但文檔的意義在于溝通是牢，偽數(shù)據(jù)結(jié)構(gòu)的表達(dá)方式在這里能用最少的廢話講清楚我要干什么，那么它就是最好的溝通方式陕截。同理驳棱，你甚至可以用偽代碼的方式來描述一些文字不便形容的邏輯，只要程序員能輕松理解到跟你完全一樣的想法艘策，何樂而不為呢蹈胡？
最后一種情況是“集中說明”，顧名思義，「the App」中很多東西是零散的罚渐，不便于在主文檔中出現(xiàn)的却汉。例如左圖歸納了App中所有出現(xiàn)的文本輸入窗口的具體屬性，包括它們的窗口名荷并、初始文本……這樣我在原型中就不必列舉每個(gè)文本輸入頁面的具體屬性合砂；再例如右圖歸納了App中所有教程的出現(xiàn)時(shí)機(jī)、地點(diǎn)源织、展現(xiàn)方式翩伪，同理，這些凌亂的東西根本不應(yīng)該出現(xiàn)在主文檔不是嗎谈息？
“上篇”結(jié)束缘屹，點(diǎn)這里去“下篇”
