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

由于字?jǐn)?shù)超限灵莲，這篇文章會(huì)分為<上><下>篇來(lái)發(fā)表。你現(xiàn)在看到的是下篇殴俱。

<下篇>包括——

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

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

<上篇>包括——

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

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

3李丰、直接開(kāi)始設(shè)計(jì)App的門(mén)面（概念圖/交互設(shè)計(jì)）

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

點(diǎn)這里回<上篇>

左右腦同時(shí)開(kāi)工來(lái)制作擬物UI

由于是擬物設(shè)計(jì)且注重顏值，「the App」的UI制作將會(huì)耗費(fèi)成噸的開(kāi)發(fā)精力趴泌，既包括我要一個(gè)人承擔(dān)所有的UI設(shè)計(jì)工作舟舒，也包括要耗費(fèi)大量iOS外包開(kāi)發(fā)的Manday——我沒(méi)有機(jī)會(huì)出錯(cuò)。

我沒(méi)有條件去盯著開(kāi)發(fā)者的電腦嗜憔，告訴他：“這里再往上1pt”秃励、“這個(gè)按鈕再往右一點(diǎn)”、“iPhone 6 Plus的啟動(dòng)icon再調(diào)大一點(diǎn)”——我必須在開(kāi)發(fā)之前徹底講清楚所有的問(wèn)題吉捶，把每張切圖夺鲜、每個(gè)排版細(xì)節(jié)皆尔、每個(gè)機(jī)型的適配方法都考慮進(jìn)去——只通過(guò)一套文檔，中間幾乎沒(méi)有任何溝通币励，開(kāi)發(fā)者只出一個(gè)版本慷蠕，就讓「the App」的UI在所有iOS機(jī)型上完美呈現(xiàn)。

正式做UI之前榄审，首先要做每張頁(yè)面的概念圖砌们，原則很簡(jiǎn)單——盡可能地偷懶，有些不重要的頁(yè)面你甚至可以直接拿別人的截圖來(lái)代替搁进。我見(jiàn)過(guò)很多UI設(shè)計(jì)師在設(shè)計(jì)概念圖時(shí)很糾結(jié)浪感，來(lái)來(lái)回回對(duì)齊不同的圖層，統(tǒng)一各種字號(hào)或顏色饼问，這樣的勞動(dòng)除了讓你多加班之外毫無(wú)意義影兽。做概念圖最緊要的就是“灑脫”二字。

不要有太多顧慮莱革。當(dāng)我做頁(yè)面B的時(shí)候峻堰，我無(wú)需去考慮它的美術(shù)風(fēng)格是否要跟剛剛做的頁(yè)面A統(tǒng)一起來(lái)，因?yàn)檎f(shuō)不定我在頁(yè)面B上突然有了很好的設(shè)計(jì)靈感盅视，做出了比頁(yè)面A更漂亮的界面捐名，那么反過(guò)來(lái)我重做頁(yè)面A就是了。把每個(gè)頁(yè)面當(dāng)做一個(gè)獨(dú)立的平面稿來(lái)設(shè)計(jì)闹击，這將大大節(jié)省你找到最優(yōu)設(shè)計(jì)方案的時(shí)間镶蹋。

（1/2）文件夾頁(yè)面的概念圖（左）

在幾天的概念設(shè)計(jì)之后，我發(fā)現(xiàn)其中2個(gè)頁(yè)面比較有意思赏半。第一個(gè)是文件夾頁(yè)面贺归，這個(gè)頁(yè)面是用戶在首頁(yè)（上圖右）點(diǎn)擊某個(gè)文件夾之后跳轉(zhuǎn)進(jìn)來(lái)的。我發(fā)現(xiàn)断箫，如果讓文件夾頁(yè)面變成墻壁的延伸（上圖左）會(huì)很有意思——用戶在首頁(yè)點(diǎn)擊某個(gè)文件夾之后拂酣，其余的文件夾直接消失，整個(gè)墻壁（包括光照）直接往右邊平移仲义，挪出左邊的空間婶熬，然后文件夾下面的紙張統(tǒng)統(tǒng)飛到右邊，形成文件列表埃撵。在我跟智超討論之后赵颅，這套酷炫的轉(zhuǎn)場(chǎng)效果被暫時(shí)擱置，因?yàn)槲页袚?dān)不起它所耗費(fèi)的Manday盯另，不過(guò)這并不影響我把文件夾頁(yè)面確定成這樣的設(shè)計(jì)性含，因?yàn)樗罘瞎适碌那榫场?/p>

（2/2）寫(xiě)作頁(yè)面的概念圖

第二個(gè)讓我感興趣的是用戶寫(xiě)東西的頁(yè)面（上圖），我當(dāng)時(shí)找來(lái)了很多主流日記鸳惯、記事App的寫(xiě)作界面截圖商蕴，發(fā)現(xiàn)其中那些比較優(yōu)秀的UI都有幾個(gè)共性：

1叠萍、文字一定要大，行間距和段間距也要大绪商，這樣你就算只寫(xiě)幾十個(gè)字也很有成就感苛谷，仿佛是寫(xiě)了一篇大作。

2格郁、光標(biāo)不能用默認(rèn)的腹殿，要用大的，閃爍起來(lái)要有呼吸感例书，而且最好不要被行高限制住锣尉，要往下延伸到下一行的頂部，這樣能激發(fā)人的寫(xiě)作欲望决采。

3自沧、最常用的按鈕不要放在頂部，而是放在鍵盤(pán)上面树瞭，而其中最重要的那個(gè)按鈕要放在右邊拇厢，這樣寫(xiě)完了之后不用抬手，右手大拇指輕松就能點(diǎn)到保存（老羅調(diào)研過(guò)晒喷，手機(jī)用戶中孝偎，右手為主的用戶比例雖然低于生活中右手為主的人，但還是輕松超過(guò)一半）凉敲。

所以衣盾，我就截了幾張UI放進(jìn)設(shè)計(jì)稿里，簡(jiǎn)單拼湊了一下荡陷，照葫蘆畫(huà)瓢做了個(gè)左圖中的UI雨效，順便把鍵盤(pán)改成跟上半部分統(tǒng)一的黑白色（iOS原生輸入法可以定制顏色）迅涮。

我覺(jué)得這樣的寫(xiě)作頁(yè)面沒(méi)有什么需要畫(huà)蛇添足的地方了废赞，再減一個(gè)元素就影響使用，再加一個(gè)元素就導(dǎo)致臃腫叮姑，那么現(xiàn)在我手上有兩個(gè)頁(yè)面的UI概念圖都達(dá)到了我要的標(biāo)準(zhǔn)唉地。

但問(wèn)題是，它們一個(gè)是純擬物传透，一個(gè)是純扁平耘沼，這要如何是好？經(jīng)過(guò)思考朱盐，雖然「the App」強(qiáng)調(diào)的是擬物群嗤，但是我可以把“擬物層”和“操作層”做成兩種對(duì)撞的風(fēng)格——所有關(guān)于紙張、墻壁這些“物理環(huán)境”的設(shè)計(jì)都做成純擬物兵琳，而所有交互的內(nèi)容都做成純扁平的狂秘，這樣看起來(lái)效果最好骇径。如果我一根筋地去把所有的交互界面都做成擬物的，反而會(huì)弱化紙張和墻壁的擬物感者春。所以我決定把“操作層”做成扁平的破衔，讓薄如蟬翼的“操作層”漂浮在厚重的“擬物層”之上，就會(huì)在帶來(lái)沉浸感的同時(shí)钱烟，給人一種操作起來(lái)很輕便的感覺(jué)晰筛。

依照這種設(shè)計(jì)思路，扁平和擬物的風(fēng)格不需要強(qiáng)行統(tǒng)一拴袭，反而是對(duì)比越強(qiáng)烈效果越好读第，這就讓我面臨一個(gè)問(wèn)題：怎樣的扁平設(shè)計(jì)是最純粹的？

你認(rèn)為哪個(gè)扁平設(shè)計(jì)更純粹拥刻？

左圖是一個(gè)很純粹的扁平UI設(shè)計(jì)卦方；右圖相反，是一個(gè)四不像的扁平UI設(shè)計(jì)泰佳。左圖之所以夠純粹盼砍，仔細(xì)觀察可以發(fā)現(xiàn)原因：

1、雖然顏色看起來(lái)很繽紛逝她，但除了不同透明度的白色之外浇坐，實(shí)際上只有黃、藍(lán)對(duì)撞色黔宛。

2近刘、所有的圖形，甚至包括字體臀晃，都是圓角的觉渴，圓角的半徑也基本是相同的。

3徽惋、字體看起來(lái)很多案淋，但實(shí)際上字體和字號(hào)都只有一種，看起來(lái)多只是因?yàn)轭伾蚣哟謳?lái)的效果险绘。

當(dāng)時(shí)研究了很多例子踢京，發(fā)現(xiàn)優(yōu)秀的扁平化設(shè)計(jì)，毫無(wú)例外可以用一個(gè)觀點(diǎn)來(lái)概括：能用一種字號(hào)解決的宦棺，不要用兩種字號(hào)瓣距；能用一種顏色解決的，不要用兩種顏色……所以我就帶著這種思路重新整理了一下其余的概念圖（這就是為什么不要那么早確定設(shè)計(jì)標(biāo)準(zhǔn)）代咸，基本形成了「the App」在“扁平化”部分的設(shè)計(jì)規(guī)范：

將所有系統(tǒng)字精簡(jiǎn)為“大”蹈丸、“小”字

1、兩種字體

第一種是系統(tǒng)默認(rèn)字體，除了用戶自己寫(xiě)的文字內(nèi)容需要單獨(dú)來(lái)制定字號(hào)逻杖、行距慨默、段間距之外（因?yàn)檫@個(gè)內(nèi)容最重要，需要區(qū)別設(shè)計(jì)）弧腥，其它情況盡量用2種規(guī)格來(lái)解決（見(jiàn)上圖）厦取，那就是“大字”和“小字”。在設(shè)計(jì)規(guī)范中管搪，我分別定義了兩種字體的字號(hào)虾攻、行距、段間距更鲁。

得到它們具體規(guī)格的手段很簡(jiǎn)單霎箍，就是去復(fù)刻那些優(yōu)秀App界面中的字體，把它們應(yīng)用到你設(shè)計(jì)稿中的若干個(gè)主要頁(yè)面中澡为，輸出成幾個(gè)重要機(jī)型的效果圖漂坏，分別放到這些機(jī)子中去看實(shí)際效果，反復(fù)微調(diào)幾次就基本搞定了媒至。在這個(gè)過(guò)程中顶别，不要像很多人那樣，總是填上那些排版最好看的文字內(nèi)容拒啰，而是要盡可能讓文字的排版丑陋驯绎。例如，一行字多出一個(gè)字跑到第二行谋旦，連續(xù)兩次空行剩失，連續(xù)敲很多個(gè)句號(hào)……你永遠(yuǎn)無(wú)法預(yù)測(cè)到用戶會(huì)輸入什么文字，如果你能在文字最不適合排版的情況下册着，也能保證排版看得過(guò)去拴孤，那么你設(shè)置的字體才是最有適應(yīng)力的。

用“刻宋”體作為交互類字體甲捏，提升UI檔次

第二種是自帶字體演熟，這是由于我發(fā)現(xiàn)，之所以很多中文App用同樣的設(shè)計(jì)方法來(lái)做扁平化UI卻比不過(guò)歐美摊鸡，很大程度上是因?yàn)樽煮w的丑陋绽媒。

扁平化設(shè)計(jì)中蚕冬，字體是很主要的視覺(jué)元素——英文App可以隨隨便便就嵌入一個(gè)幾十k的字體免猾，而中文App嵌入一個(gè)字體就意味著多幾M的大小，而且簡(jiǎn)體字體制作成本超大（5000多個(gè)常用字）囤热，做出來(lái)也很少人有付費(fèi)意識(shí)去買正版猎提，所以精益求精的字體也很少。于是我購(gòu)買了為數(shù)不多非常耐看的造字工房的“刻宋”體，除了一些非常重要的標(biāo)題之外（例如用戶自己起的標(biāo)題）锨苏，我將盡量讓它只擁有一個(gè)最適合手指點(diǎn)擊的字號(hào)疙教，用來(lái)?yè)?dān)任絕大多數(shù)點(diǎn)擊類的字體。

黑白是更純粹的扁平化設(shè)計(jì)

2伞租、黑白設(shè)計(jì)

既然扁平化越純粹贞谓，就能越凸顯擬物和扁平的反差之美，那么我能想到的最極致的方案就是全黑白設(shè)計(jì)葵诈。市面上大多數(shù)App的UI設(shè)計(jì)濫用各種顏色裸弦，到處都是不同的彩色：這里需要強(qiáng)調(diào)，于是用綠色作喘，那里更需要強(qiáng)調(diào)理疙，于是用紅色，還有個(gè)地方是重大通知泞坦，于是就用紅色加粗加大窖贤，弄到最后，就變成了電線桿上的老軍醫(yī)廣告贰锁。最極致的扁平化設(shè)計(jì)赃梧，就是拿最少的元素，把它們組合成最合理的視覺(jué)搭配豌熄，讓它們自然地形成主次之分和操作引導(dǎo)槽奕。如果非要用紅色才能突出某個(gè)視覺(jué)重點(diǎn)，只能證明我的版式設(shè)計(jì)還不夠智慧粤攒。

《版式設(shè)計(jì)原理》，佐佐木剛士

關(guān)于版式設(shè)計(jì)囱持，我當(dāng)時(shí)買了佐佐木剛士的《版式設(shè)計(jì)原理》际邻，版式設(shè)計(jì)是日本的傳統(tǒng)強(qiáng)項(xiàng)芯丧，而且日語(yǔ)跟中文在視覺(jué)上有很多類似之處世曾，它們都不能完全照搬英語(yǔ)系的版式設(shè)計(jì)美學(xué)缨恒。紙質(zhì)讀物的設(shè)計(jì)元素很有限，大部分內(nèi)容都是黑色的字，沒(méi)有現(xiàn)在手機(jī)UI那么多變的視覺(jué)表現(xiàn)力骗露，那么在設(shè)計(jì)元素匱乏的情況下岭佳，怎樣區(qū)別不同內(nèi)容的輕重程度，讓讀者能自然地按照你設(shè)想的順序去閱讀這些內(nèi)容萧锉，這就是版式設(shè)計(jì)的智慧珊随。從以前的紙質(zhì)雜志到現(xiàn)在的扁平化UI，變化的是媒介柿隙，不變的是人類的視覺(jué)習(xí)慣玫恳。

化繁為簡(jiǎn)的“設(shè)計(jì)規(guī)范”

把每個(gè)頁(yè)面的效果圖基本跑通，然后盡我所能地抽象其中的設(shè)計(jì)元素优俘，我就得到了上圖這些設(shè)計(jì)規(guī)范京办，具體包括：導(dǎo)航欄的布局、常用對(duì)齊線帆焕、常用圖文按鈕排布方式惭婿、常用列表類頁(yè)面布局等等……這就是我為什么強(qiáng)調(diào)一開(kāi)始做概念圖的時(shí)候不要先確定設(shè)計(jì)規(guī)范，而是放開(kāi)靈感去做叶雹，因?yàn)樗鼈儗?shí)在太難以預(yù)測(cè)了财饥。只有把所有頁(yè)面效果圖確定到七七八八，你才能看到你需要多少種字體折晦、多少種透明度钥星、多少種對(duì)齊線……設(shè)計(jì)規(guī)范是用優(yōu)質(zhì)的概念圖總結(jié)出來(lái)的，而不是一開(kāi)頭就拍腦袋決定的满着。

基本確定了設(shè)計(jì)規(guī)范之后（并不是說(shuō)要100%確定下來(lái)谦炒，因?yàn)樵诰唧w設(shè)計(jì)的過(guò)程中，設(shè)計(jì)規(guī)范的添加或修改是在所難免的）风喇，接下來(lái)就是做正式效果圖宁改，這個(gè)環(huán)節(jié)跟扁平化UI設(shè)計(jì)會(huì)有一些不同：

1、100%還原圖

扁平化設(shè)計(jì)中魂莫，你可以只做大致的效果圖还蹲，做效果圖的目的只是確定UI文檔該怎么寫(xiě)，前端看的是文檔耙考，效果圖只是視覺(jué)參照谜喊。在一個(gè)優(yōu)秀的扁平化UI制作流程中，幾乎所有設(shè)計(jì)素材都是單獨(dú)儲(chǔ)存的倦始，有一個(gè)完整的素材庫(kù)斗遏，只需按照設(shè)計(jì)規(guī)范把這些素材一個(gè)個(gè)擺進(jìn)設(shè)計(jì)稿里就行了，而在設(shè)計(jì)稿里新產(chǎn)生的素材也會(huì)被迅速加入素材庫(kù)中楣号。最后它們可以從素材庫(kù)里一次性切圖最易。

擬物元素不能相互遮擋

但在「the App」中怒坯，很多視覺(jué)元素是擬物的炫狱，如果我不在正式界面里做到100%還原藻懒，我就沒(méi)法確定一個(gè)文件夾的封面是不是會(huì)不小心壓住上面的吊燈（上圖左）；也沒(méi)法確定文字的標(biāo)題是否會(huì)跟“孔”重疊起來(lái)（上圖右）视译。因此嬉荆，我必須把涉及到擬物的頁(yè)面效果圖做到100%還原，以此來(lái)撰寫(xiě)我的適配文檔酷含。

2、最大機(jī)型畫(huà)布

扁平化設(shè)計(jì)中，一般效果圖只需要做一個(gè)大小適中装黑、主流的機(jī)型扼褪，例如很多人在設(shè)計(jì)iOS

App時(shí)只做iPhone 6的效果圖。然而呀舔，位圖跟矢量圖不同弥虐，它只能縮小不能放大，所以我的100%還原圖必須用6 Plus畫(huà)布來(lái)做媚赖，因?yàn)楹芏鄶M物切圖要直接從這里取材霜瘪。

同時(shí)我還要另外去做各種小機(jī)型的，不必100%還原的效果圖惧磺，來(lái)確保我的對(duì)齊方案在任何機(jī)型上都不會(huì)反常（例如颖对，上文提到的，不能讓封面遮住吊燈）磨隘。

鑒于以上兩個(gè)原因缤底，我就開(kāi)始去做主要頁(yè)面的iPhone 6 Plus 100%效果圖。這里的“主要頁(yè)面”包括兩類番捂，一類是需要從效果圖中直接拿到切圖資源的頁(yè)面训堆，也就是擬物設(shè)計(jì)非常強(qiáng)的一些頁(yè)面；另一類是模板類頁(yè)面白嘁，例如我們有三四個(gè)列表類頁(yè)面坑鱼，顯然只做好其中一個(gè)就行了，其余的無(wú)需煞費(fèi)苦心絮缅，只要一個(gè)大概的效果就足夠了鲁沥。

做完上述工作，就要開(kāi)始出正式文件了耕魄。對(duì)于前端開(kāi)發(fā)而言画恰，需要的正式文件包括：效果圖、適配文檔吸奴、切圖允扇。這個(gè)章節(jié)的標(biāo)題提到左右腦同時(shí)開(kāi)工缠局，之前的工作用右腦就能完成，而從這里開(kāi)始就得用左腦了考润。

為了解決全部的適配問(wèn)題狭园，我先解決一個(gè)小問(wèn)題，我的工作從這5張“紙”開(kāi)始：

統(tǒng)一處理App中所有出現(xiàn)過(guò)的“紙”

這5張紙是「the App」UI中所有會(huì)出現(xiàn)的紙糊治，為了適配方便唱矛，我得把它們的文本位做成相同的。由于最右邊兩種紙的左上角有回形針井辜，所以“標(biāo)題”統(tǒng)一往下調(diào)整绎谦，以免壓住回形針。

用RGB通道來(lái)確定“紙”的切圖范圍

紙的光環(huán)境是燈泡從右上角照過(guò)來(lái)粥脚，因此它陰影的邊緣自然在左邊和下邊窃肠。為了拿到切圖，我必須確定邊緣刷允，從效果圖（左上）里直接找到邊緣很困難冤留，用通道+曲線很容易就找到了（左下）。有了左下角的邊緣之后恃锉，我就能完整把它切出來(lái)搀菩。為了文本對(duì)齊方便，顯然我在紙張的頂部和右邊也要留相同的空隙破托，這樣紙張切圖“紙”的部分就能剛好處在切圖的中心（右）肪跋。

形成“紙”的統(tǒng)一文檔

那么接下來(lái)就是給這張通用的“紙”來(lái)寫(xiě)文檔。見(jiàn)上圖：

1土砂、文本框的寬州既、高，以及它相對(duì)于這張紙切圖的位置萝映，我都用它們與切圖尺寸的比例關(guān)系來(lái)表示吴叶。這樣做之所以可以成功適配，是因?yàn)椴徽摷垙堄袔追N規(guī)格的切圖（@3x序臂、@2x蚌卤，或以后更高規(guī)格的切圖），我們要明白一個(gè)特點(diǎn)奥秆，那就是文本框與切圖的比例關(guān)系是不應(yīng)該發(fā)生改變的逊彭。

2、標(biāo)題的底部距離文本框的高度构订，并不需要用具體數(shù)值來(lái)表示侮叮，而是可以剛好隔開(kāi)一行文本的距離，那么在文檔中我就定義這個(gè)距離=正文的字號(hào)悼瘾。也就是說(shuō)囊榜，假設(shè)正文的字號(hào)是12pt审胸，那么它們的間隔就是12pt。這樣做的好處在于卸勺，不論我怎么調(diào)整正文字體的大小砂沛，標(biāo)題與正文看上去永遠(yuǎn)剛好隔著一行。

3孔庭、標(biāo)題的字號(hào)不是一個(gè)具體的數(shù)值尺上，而是正文字號(hào)的1.4倍材蛛。因?yàn)閺脑O(shè)計(jì)上來(lái)講圆到，標(biāo)題之所以看上去是標(biāo)題，就是因?yàn)樗日牡淖忠蠡蛘吒帧?.4倍剛好可以體現(xiàn)這個(gè)關(guān)系卑吭。當(dāng)我后期要調(diào)整正文字號(hào)的時(shí)候芽淡，標(biāo)題就可以隨之而改變大小，無(wú)需我手動(dòng)去調(diào)整了豆赏。

4挣菲、紙張下方的小字，由于切圖底部已經(jīng)留出了空隙掷邦，所以直接讓它0間距對(duì)齊就行了白胀。

從上面整個(gè)文檔來(lái)看，幾乎所有的“約束條件”（元素之間的相對(duì)空間關(guān)系）都是用“比例”來(lái)表示抚岗，這就意味著或杠，前端工程師只要把這套條件放進(jìn)去，我們就無(wú)需考慮具體的機(jī)型宣蔚，大到iPad小到iPhone 4都能完美呈現(xiàn)向抢。同時(shí)意味著，如果我們對(duì)其中某個(gè)地方不滿意胚委，也無(wú)需去修改每個(gè)機(jī)型的數(shù)值挟鸠，而是從宏觀上去修改某個(gè)比例關(guān)系就行了。

而唯一能影響這些比例關(guān)系的變量就是正文的“字號(hào)”（切圖大小是固定的亩冬，所以它不會(huì)影響比例關(guān)系）艘希，所以接下來(lái)就是來(lái)定義這個(gè)“字號(hào)”了。

（1/2）“日記字”在“紙”上的不同大小

首先硅急，見(jiàn)上圖覆享，這張紙?jiān)趇Phone 6P的3倍圖里，和在iPhone 6/5/4的2倍圖里铜秆，有兩種不同的大小淹真。（2倍圖是共用的，我必須在最窄的屏幕（iPhone 5s连茧、5和4）中確定2倍圖的大小核蘸，以免紙張?zhí)笪∨矗谧×擞疫叺牡鯚艉头饷妫?倍圖比較大，2倍圖比較小客扎，如果字號(hào)相同祟峦，那么2倍圖容納的字?jǐn)?shù)就會(huì)少很多。然而徙鱼，從產(chǎn)品理念上來(lái)講宅楞，我希望不同機(jī)型上的紙所容納的文字摘要字?jǐn)?shù)基本相同，因?yàn)樽謹(jǐn)?shù)太多會(huì)導(dǎo)致很多紙張顯示不滿袱吆，給人一種空虛的感覺(jué)厌衙；而字?jǐn)?shù)太少就沒(méi)法形成摘要，每張紙都要點(diǎn)進(jìn)去才能知道具體寫(xiě)的是什么绞绒。

為了滿足這個(gè)理念婶希，具體某個(gè)分辨率紙張上的字號(hào)，就應(yīng)該跟紙張的大小掛鉤蓬衡。紙?jiān)酱笥麒荆痔?hào)就越大，紙?jiān)叫≌恚痔?hào)就越小——這樣就能保證每個(gè)機(jī)型所顯示的摘要字?jǐn)?shù)相近筒饰。這個(gè)概念確定之后，先別急壁晒，再來(lái)看閱讀界面的字體瓷们。

（2/2）“日記字”在閱讀界面的不同大小

感覺(jué)到了嗎？在閱讀界面讨衣，同樣是這個(gè)道理（如上圖）换棚。如果我只設(shè)置一種字號(hào)，那么要么是6plus用戶覺(jué)得字太小反镇，寫(xiě)很多內(nèi)容都撐不滿屏幕固蚤，沒(méi)有成就感；要么就是小機(jī)型用戶覺(jué)得字太大歹茶，一屏幕只能看幾句話——我同樣應(yīng)該設(shè)計(jì)成：大屏幕字大夕玩，小屏幕字小，所以惊豺，結(jié)合上面的“紙”燎孟，你應(yīng)該猜得到我打算怎么做了——

用一句話來(lái)概括所有的“日記字”

如圖，所有機(jī)型尸昧，不論是閱讀頁(yè)面的字揩页，還是紙上的正文，它們用這簡(jiǎn)簡(jiǎn)單單一套規(guī)則就可以概括了烹俗。我們確定唯一的參照標(biāo)準(zhǔn)爆侣，就是當(dāng)文本框?qū)挾葹?63pt的時(shí)候萍程，字的大小、行距兔仰、段間距分別是21pt茫负、10pt、14pt乎赴，而其它所有的情況忍法，無(wú)論是6plus紙上的字號(hào)，還是iPhone 4閱讀界面的字號(hào)榕吼，都從文本框的寬度直接換算比例得到饿序。

以上就是「the App」UI制作的核心思想：把幾種機(jī)型幾十個(gè)頁(yè)面的不同元素，從設(shè)計(jì)的角度把它們歸納起來(lái)友题，用一層一層的變量關(guān)系來(lái)嵌套嗤堰，像一棵樹(shù)那樣戴质，追溯到最后度宦，它只有為數(shù)不多的幾個(gè)數(shù)值。改變這幾個(gè)數(shù)值就能改變整個(gè)App告匠。

這些為數(shù)不多的數(shù)值就是前端層面的“設(shè)計(jì)規(guī)范”戈抄，它與UI制作的“設(shè)計(jì)規(guī)范”實(shí)際上是一式兩用的。在前端上后专，它們形成了設(shè)計(jì)規(guī)范的“宏”划鸽，這個(gè)宏定義了UI適配中的所有變量。當(dāng)我描述一個(gè)長(zhǎng)度的時(shí)候戚哎，我并不說(shuō)這個(gè)長(zhǎng)度是15pt裸诽，而說(shuō)它是1.3{小字}，這里的{小字}就是一個(gè)變量型凳，往前追溯丈冬，就能查詢到我對(duì)“小字”事先約定的設(shè)計(jì)規(guī)范。

下面再舉幾個(gè)例子甘畅。

一套規(guī)則埂蕊，適應(yīng)所有機(jī)型

在上圖中，由于中間的選項(xiàng)文字的段落屬性是居中的疏唾，所以確定左右25%的對(duì)齊線就能讓他們?nèi)菁{最大字?jǐn)?shù)的內(nèi)容蓄氧，而不會(huì)超出屏幕。唯一需要用數(shù)值來(lái)表示的是這些具體選項(xiàng)之間的間距槐脏，這里定義它是43pt喉童，因?yàn)榻?jīng)過(guò)測(cè)試，小于這個(gè)距離就容易誤觸（這類情況比較少顿天，否則可以定義一個(gè)叫做{最小按鈕間隙}的變量）堂氯。然后重抖，這個(gè)主要模塊當(dāng)然可以定義成居中于屏幕，于是我們就可以進(jìn)一步定義：上祖灰、下模塊各自從剩余的空間中取得中心對(duì)齊線——整個(gè)界面只有1個(gè)具體數(shù)值钟沛，其余都是變量，且適配于所有機(jī)型局扶。

同樣恨统，一套規(guī)則，適應(yīng)所有機(jī)型

在跟用戶寫(xiě)的文字相關(guān)的界面中（例如上圖）三妈，用戶的文字是{日記字}的格式畜埋，它是這些界面視覺(jué)的核心，所以大部分的間距都要跟著{日記字}的段間距來(lái)走畴蒲。確定了大致的視覺(jué)之后悠鞍，把各種間距換算成它與{日記字}的比例關(guān)系。當(dāng)屏幕變大變小模燥，{日記字}會(huì)隨之變大變小咖祭，而不同的間距都會(huì)隨之變大變小，但它們看起來(lái)永遠(yuǎn)是和諧的蔫骂，因?yàn)?b>思考這些變量關(guān)系本身就是在思考“各種視覺(jué)元素以何種比例關(guān)系呈現(xiàn)出來(lái)才是最有美感的”么翰。

將所有切圖匯集到素材庫(kù)，統(tǒng)一管理

當(dāng)切圖都匯集到素材庫(kù)（上圖）之后辽旋，還要給每類切圖都單獨(dú)制作一份適配文檔浩嫌，這是由于擬物UI的復(fù)雜性導(dǎo)致的。扁平化UI中补胚，一般我們會(huì)把一個(gè)具體的切圖定義為只有一個(gè)規(guī)格码耐，例如不管在3倍圖還是2倍圖中，某個(gè)按鈕的大小都是30pt * 50pt溶其，這樣它在不同的分辨率中都會(huì)有相近的物理大小骚腥。

BTW：

之所以手機(jī)開(kāi)發(fā)用的單位不是px（像素）而是pt（點(diǎn)）握联，就是因?yàn)槊靠钍謾C(jī)的像素顆粒大小不同代芜，屏幕的精度（ppi）越高钞速，單個(gè)的像素就越小渴语。

假設(shè)你定義一個(gè)字的字號(hào)是99px调违，這就意味著這個(gè)字的高度是99像素，你在你的電腦屏幕上看它有一個(gè)櫻桃那么大虚婿，在iPhone 4里看它有大拇指指甲蓋那么大筑煮，但是在iPhone 6 plus里看起來(lái)就只有黃豆那么大了虑凛。這是因?yàn)?plus的屏幕精度很高，在一個(gè)黃豆的尺寸里就有99 * 99個(gè)像素。

所以為了設(shè)計(jì)師的方便和機(jī)型的轉(zhuǎn)換，大家就設(shè)計(jì)了pt這個(gè)單位，你在iPhone 4的效果圖里設(shè)計(jì)了一個(gè)60* 60像素的圖標(biāo)蝉绷，放到iPhone 4里看起來(lái)是一個(gè)小拇指蓋的大小鸭廷，你覺(jué)得剛剛好。那么由于iPhone 4的1pt = 2px熔吗，所以你就告訴程序員說(shuō)辆床，這個(gè)圖標(biāo)的大小是30 * 30pt。

某一天你打開(kāi)iPhone 6 plus桅狠，發(fā)現(xiàn)這個(gè)圖標(biāo)看起來(lái)也是小拇指蓋的大小讼载，這是因?yàn)?plus知道自己像素很小，所以它告訴你的App說(shuō)“我的1pt = 3px哦”中跌，所以你的App就自動(dòng)把這個(gè)圖標(biāo)放大到90 * 90像素給它了（當(dāng)然前提是你切圖格式是矢量pdf咨堤，否則就模糊了）。

過(guò)了10年漩符，iPhone 100問(wèn)世了一喘，它的像素密度已經(jīng)高到了匪夷所思的程度，但是蘋(píng)果工程師聰明地設(shè)置了1pt = 1000px（當(dāng)然了嗜暴，這已經(jīng)超過(guò)人眼極限凸克，這里只是夸張舉例），所以你這個(gè)App在iPhone 100里打開(kāi)闷沥，它依然是小拇指蓋的大小萎战。

——跨越不同終端不同屏幕之間的差異，為人的眼睛去尋找一個(gè)統(tǒng)一的標(biāo)尺狐赡，這就是pt這個(gè)單位存在的意義撞鹉。

封面圖必須完美嵌入紙堆疟丙，不能有絲毫誤差

然而，「theApp」中的某些擬物元素并不能依據(jù)我們想要展現(xiàn)的物理大小來(lái)決定鸟雏，而是要依據(jù)它與周圍元素的位置關(guān)系來(lái)決定享郊。例如上圖中，封面的圖片必須完美地嵌入封面的切圖中孝鹊，不能有1pt的誤差炊琉，否則看起來(lái)就不像是一個(gè)整體。這個(gè)時(shí)候又活，只能是下苦功苔咪，分別制作@3x、@2x兩個(gè)規(guī)格的切圖柳骄，然后老老實(shí)實(shí)量出圖片位的具體大小团赏。

用切圖的留白，來(lái)代替復(fù)雜的適配

也有一些適配情況是極難用變量來(lái)描述的耐薯。例如舔清，在上圖左的界面里，封面的兩張切圖要完美契合在一起曲初，非常難適配体谒，所以我就干脆把這個(gè)工作攬過(guò)來(lái)，直接在效果圖里設(shè)計(jì)好切圖臼婆，給這些切圖上下左右預(yù)留好精準(zhǔn)的空隙抒痒。這樣，程序員就無(wú)需適配颁褂，直接讓兩個(gè)切圖中心對(duì)齊故响，就能呈現(xiàn)出最完美的視覺(jué)效果。

動(dòng)畫(huà)效果“沖擊波”的時(shí)間軸設(shè)計(jì)

交互效果的設(shè)計(jì)則簡(jiǎn)單很多痢虹，我們同樣先確定一些變量被去，然后用這些變量來(lái)描述具體的時(shí)間軸就行了。如果你使用過(guò)Flash或其它動(dòng)畫(huà)奖唯、特效軟件，你一定很熟悉時(shí)間軸糜值。實(shí)際上丰捷，你越熟悉時(shí)間軸，你就越不需要去做真正的動(dòng)畫(huà)給程序員看寂汇，因?yàn)槟隳茉谀X子里很輕松地視覺(jué)化這些時(shí)間軸病往，很確定它能實(shí)現(xiàn)你要的效果。

不過(guò)要注意的是骄瓣，變量的設(shè)計(jì)要巧妙停巷，用最少的變量來(lái)給你的動(dòng)畫(huà)埋下最多的后期可塑性。例如上圖是“沖擊波”效果的時(shí)間軸設(shè)計(jì)，我設(shè)計(jì)了變量o畔勤，調(diào)整o就能調(diào)整整個(gè)動(dòng)畫(huà)的速度蕾各，而調(diào)整4o為其它倍數(shù)（例如5o、3o）就能調(diào)整“沖擊波”的寬度庆揪，兩者一起調(diào)整就能實(shí)現(xiàn)很多不同的視覺(jué)效果式曲。

整個(gè)UI制作的過(guò)程是很苦的，但最終我實(shí)現(xiàn)了預(yù)期的設(shè)想——僅通過(guò)一次開(kāi)發(fā)缸榛，「the App」的UI就基本在所有機(jī)型達(dá)到了完美的適配效果吝羞，后續(xù)的改動(dòng)也很輕松，因?yàn)槎际轻槍?duì)變量和比例關(guān)系的改動(dòng)内颗，無(wú)需在每個(gè)具體機(jī)型中反復(fù)調(diào)整钧排。「the App」在這個(gè)階段省下的Manday足夠開(kāi)發(fā)一個(gè)同級(jí)別的產(chǎn)品。

虛擬迭代

「the App」曾經(jīng)開(kāi)發(fā)過(guò)1.0版本均澳，雖然我對(duì)它的操作體驗(yàn)下足了功夫恨溜，但是體驗(yàn)只是給你產(chǎn)品加分的東西，它掩蓋不了一個(gè)產(chǎn)品的致命傷负懦。如下圖筒捺，當(dāng)時(shí)的設(shè)計(jì)是這樣的：

1.0版本的“微博”設(shè)計(jì)

假設(shè)一個(gè)想要寫(xiě)下一條人生方向，例如：“我最致命的缺點(diǎn)是過(guò)分思考卻不行動(dòng)”纸厉，這條人生方向就形成了一篇“微博”系吭，而每當(dāng)這個(gè)人有了關(guān)于對(duì)“過(guò)分思考卻不行動(dòng)”的新看法，在生活中對(duì)它有了新的體驗(yàn)颗品，或是看到一篇文章講的也是這個(gè)話題肯尺，他都可以附帶上新的觀點(diǎn)來(lái)“轉(zhuǎn)發(fā)”這條微博。

當(dāng)他每天打開(kāi)某個(gè)文件夾躯枢，例如這篇文章所在的“行動(dòng)的巨人”文件夾则吟，他就看到了一個(gè)完整的微博小站。這些微博默認(rèn)按照時(shí)間流來(lái)排序锄蹂，他可以看到他最近轉(zhuǎn)發(fā)了什么氓仲，原創(chuàng)了什么。而當(dāng)他切換到另一種排序方法的時(shí)候得糜，「the App」只向他展示原創(chuàng)的微博敬扛，而且那些轉(zhuǎn)發(fā)次數(shù)最多的將會(huì)排在最前面，提醒他最重視的人生信念是什么朝抖。

上線前我對(duì)這套邏輯信心滿滿啥箭，然而上線后才使用了兩周，我就發(fā)現(xiàn)了其中的大問(wèn)題治宣。其一急侥，越是轉(zhuǎn)發(fā)次數(shù)越多的微博砌滞，我就對(duì)原文越不滿意，因?yàn)槲业乃伎家恢痹谕白呋倒郑黄涠慈螅?dāng)我靈感一現(xiàn)，想要掏出「the App」來(lái)寫(xiě)東西的時(shí)候陕悬，我往往會(huì)愣住题暖，因?yàn)槲也挥浀梦矣袥](méi)有寫(xiě)過(guò)類似的“原創(chuàng)”，如果有捉超，我也很難第一時(shí)間找到它來(lái)轉(zhuǎn)發(fā)胧卤。于是，我往往都是寫(xiě)去寫(xiě)一篇新的原創(chuàng)拼岳，這套轉(zhuǎn)發(fā)機(jī)制逐漸成了擺設(shè)枝誊；其三，轉(zhuǎn)發(fā)次數(shù)最多的微博惜纸，并不一定是我最應(yīng)該去堅(jiān)持的人生信念叶撒，有時(shí)候，它反而代表一個(gè)我走過(guò)很多彎路的錯(cuò)誤信念耐版。

從這件事情之后祠够，我決定「the App」以后每個(gè)版本在開(kāi)發(fā)之前，都要經(jīng)歷足夠多的“虛擬迭代”粪牲。這個(gè)名詞是智超后來(lái)幫我總結(jié)出來(lái)的古瓤，它的含義是：在產(chǎn)品真正投入開(kāi)發(fā)之前，盡最大努力在內(nèi)心去虛擬這個(gè)產(chǎn)品上線之后真正的樣子腺阳，不斷地“使用”這個(gè)產(chǎn)品落君，從這個(gè)“使用”過(guò)程中提前發(fā)現(xiàn)產(chǎn)品的問(wèn)題，不經(jīng)過(guò)開(kāi)發(fā)亭引，直接進(jìn)行下個(gè)版本的迭代绎速。

如果一個(gè)產(chǎn)品原先要開(kāi)發(fā)10個(gè)版本才能成功，通過(guò)虛擬迭代焙蚓，你可能用3個(gè)版本就能達(dá)到同樣的效果纹冤。由于「the App」是外包開(kāi)發(fā)，所以我這邊“虛擬迭代”的時(shí)候购公，外包公司的人力費(fèi)用并不需要我承擔(dān)赵哲，所以你可能會(huì)說(shuō)，我的情況并不能適用在一個(gè)需要每天養(yǎng)活開(kāi)發(fā)團(tuán)隊(duì)的公司里君丁。

但是反過(guò)來(lái)講，為了讓設(shè)計(jì)組将宪、程序組不空轉(zhuǎn)绘闷，就強(qiáng)行趕鴨子讓產(chǎn)品組草率地設(shè)計(jì)一個(gè)版本出來(lái)橡庞，其中很多問(wèn)題都沒(méi)有仔細(xì)驗(yàn)證，上線之后立刻就改需求印蔗，一個(gè)想法接著一個(gè)想法扒最，源代碼被弄得千瘡百孔，產(chǎn)品實(shí)際要解決的問(wèn)題卻還沒(méi)找到關(guān)鍵的門(mén)路华嘹，隨時(shí)面臨打倒重來(lái)的危險(xiǎn)吧趣，這樣難道就是有效率的企業(yè)運(yùn)作方式？

PM一個(gè)人再厲害也有很多情況是考慮不周的耙厚。當(dāng)產(chǎn)品設(shè)計(jì)在不斷“虛擬迭代”時(shí)强挫，設(shè)計(jì)和開(kāi)發(fā)組不必那么快就進(jìn)入正式開(kāi)發(fā)的工作，設(shè)計(jì)組可以趁這個(gè)時(shí)間多做一些概念圖薛躬，跟PM一起把產(chǎn)品視覺(jué)確定下來(lái)俯渤，一起跟前端工程師去探討每個(gè)細(xì)節(jié)的可行性。而開(kāi)發(fā)組則可以提前梳理產(chǎn)品需要的模塊和技術(shù)型宝，提前攻破某些技術(shù)難點(diǎn)八匠，跟PM一起討論每個(gè)產(chǎn)品模塊的性價(jià)比：哪些該做，哪些該尋找替代方案……所有人坐在一起討論產(chǎn)品未來(lái)可能的走向趴酣，以便提前設(shè)計(jì)好一個(gè)拓展性最強(qiáng)的框架梨树，減少未來(lái)迭代的成本——最好的產(chǎn)品一定是這個(gè)團(tuán)隊(duì)所有人作為一個(gè)整體來(lái)完成的，強(qiáng)行劃分成策劃岖寞、UI抡四、開(kāi)發(fā)的步驟，或是強(qiáng)行說(shuō)：“你是UI設(shè)計(jì)師慎璧，你不要參與功能設(shè)計(jì)”床嫌、“我不管你們?cè)趺丛O(shè)計(jì)，我等你的文檔出來(lái)然后寫(xiě)代碼”胸私，這跟工廠流水線生產(chǎn)罐頭又有什么區(qū)別呢厌处？

把產(chǎn)品設(shè)計(jì)在腦海里具象化

在「the App」開(kāi)發(fā)中，虛擬迭代分兩步岁疼，第一步是讓我在腦海里具象化這個(gè)App上線之后的樣子阔涉，所以我會(huì)把效果圖都貼在白板上，盯著他們看捷绒，想象自己在這些頁(yè)面跳轉(zhuǎn)瑰排；我也會(huì)拜托智豪同學(xué)幫我把效果圖擺進(jìn)墨客或Axure里，做成一個(gè)可以在手機(jī)里點(diǎn)擊的高仿真H5原型暖侨。

當(dāng)我從這一步中建立了我對(duì)這個(gè)App整體的視覺(jué)和操作記憶之后椭住，我就會(huì)進(jìn)行下一步，那就是做一份Word文檔格式的“「the App」”字逗，它很像桌游京郑，我當(dāng)做自己在使用真正的「the App」那樣操作它宅广，每天記錄很多東西，就像是在使用真的App一樣些举。

我在辦公室跟狱、咖啡廳、湖邊和菜市場(chǎng)寫(xiě)東西户魏，我在醒著和睡著的時(shí)候?qū)憱|西驶臊，幾個(gè)月里寫(xiě)了十幾萬(wàn)字的個(gè)人思考和摘錄。每當(dāng)我在原型或效果圖里覺(jué)得某個(gè)功能已經(jīng)設(shè)計(jì)得很棒的時(shí)候叼丑，過(guò)不了幾天我就會(huì)在“使用”Word版「the App」時(shí)發(fā)現(xiàn)這樣那樣的問(wèn)題关翎，然后我就去修改設(shè)計(jì)方案，哪怕是打倒重來(lái)幢码。

首先是第一次虛擬迭代笤休。既然靈感來(lái)襲的時(shí)候，我也不知道到底該“原創(chuàng)”還是“轉(zhuǎn)發(fā)”症副，那么就去掉它們之間的差別——所有寫(xiě)下的東西都是一篇“感悟”店雅，我每次記錄的文字之間不再有高低之分。等到我閑暇的時(shí)候贞铣，我就把某些描述同一個(gè)人生道理的“感悟”匯集到一起闹啦。例如，我發(fā)現(xiàn)我有3篇感悟都是在反思自己容易情緒化的毛病辕坝，還有5篇是從網(wǎng)上收集來(lái)的關(guān)于情緒管理的文章片段窍奋，那么我就把這8篇內(nèi)容匯集到一個(gè)“信念”之中，然后給它起名叫“控制情緒”酱畅。

第一次虛擬迭代：“打孔”

并且琳袄，一個(gè)信念的權(quán)重也不再取決于他所包括的文件數(shù)量，而是你給它打了多少次孔纺酸。每天用戶都將獲得一個(gè)打孔器窖逗，選擇當(dāng)天對(duì)他生活起到真正幫助的那條信念，去給它打孔餐蔬。日積月累碎紊，人生信念就會(huì)形成一個(gè)排行榜（如上圖）。

當(dāng)你看到一篇信念有50次打孔的時(shí)候樊诺，你就知道仗考，它在生活中給了你50次的實(shí)際幫助，也許它是一個(gè)不起眼的大道理词爬，但是你應(yīng)該堅(jiān)持下去秃嗜；當(dāng)你發(fā)現(xiàn)某個(gè)以前看到流淚的心靈雞湯只有2次打孔呛梆，你就知道厂汗，原來(lái)它屬于劣質(zhì)的地?cái)偝晒W(xué)奕枢，它講的都是虛的嗽元，它對(duì)你沒(méi)什么幫助岛马。

然而枚荣，當(dāng)我在Word版「the App」“使用”這套新設(shè)計(jì)時(shí)桥滨，我又很快發(fā)現(xiàn)了兩個(gè)大問(wèn)題摆碉。

其一是我可以作弊芽唇。我并不是每天都對(duì)生活有新感覺(jué)顾画，但這些日子里，如果我不用打孔器它就會(huì)被浪費(fèi)掉匆笤，為了不虧研侣，我就隨便找了個(gè)沒(méi)用的信念給它打孔。等到我有一天突然發(fā)現(xiàn)一個(gè)好的觀點(diǎn)時(shí)炮捧，我立馬把那個(gè)沒(méi)用信念跟它合并了起來(lái)庶诡，再把沒(méi)用的部分刪掉，這樣它的打孔數(shù)就立刻上升了咆课。

其二是我的內(nèi)容很亂末誓。我最感興趣的一條信念是稻盛和夫的“做正確的事”，我每天都有新感想寫(xiě)進(jìn)去书蚪，但實(shí)際上很多并不是思想上有什么新的認(rèn)識(shí)喇澡，而是我當(dāng)天做了什么事。這些相當(dāng)于流水賬的內(nèi)容摻雜到信念里殊校，讓我每天打開(kāi)它不知道該看什么重點(diǎn)晴玖。

于是，在第二次“虛擬迭代”中为流，我設(shè)計(jì)了“涅盤(pán)”和“流水賬”來(lái)解決上個(gè)版本的問(wèn)題呕屎。

第二次虛擬迭代：“涅槃”

如上圖，每個(gè)信念只能容納9個(gè)最精華的感悟敬察，多余的必須要“涅槃”秀睛，涅槃實(shí)際上就是讓你從感情上接受去刪除那些不重要的思想，它約等于刪除静汤，但它的“英靈”永遠(yuǎn)存在于這個(gè)信念的一個(gè)小入口內(nèi)琅催，不允許徹底清除，供你瞻仰虫给。

同時(shí)藤抡，用戶在打孔數(shù)上作弊也沒(méi)那么自在了，假設(shè)你為了把一個(gè)20次打孔的信念提高到50次抹估，而合并進(jìn)來(lái)一個(gè)打孔30次的不相關(guān)信念缠黍，那么當(dāng)你去除那些不相關(guān)內(nèi)容的時(shí)候，它將永遠(yuǎn)保留在涅盤(pán)區(qū)扎你的眼药蜻，讓你不舒服瓷式。即使你先偷偷把那個(gè)不相關(guān)信念的內(nèi)容都清除掉也沒(méi)門(mén)替饿，因?yàn)樾拍畹暮喜⒁舶ㄋ鼈兡P(pán)區(qū)的合并。

而“流水賬”就能把每天的實(shí)踐體會(huì)跟那些具有指導(dǎo)作用的文字隔離開(kāi)贸典，有什么實(shí)踐體會(huì)视卢，寫(xiě)流水賬就行了，沒(méi)必要寫(xiě)進(jìn)信念里廊驼。但問(wèn)題在于据过，寫(xiě)流水賬這個(gè)功能并不在「the App」的主線上，而一個(gè)完善的流程設(shè)計(jì)應(yīng)該是“你一定會(huì)按照我的設(shè)計(jì)來(lái)做”而不是“某個(gè)功能你可以用也可以不用”妒挎。這個(gè)時(shí)候绳锅，我犯了一個(gè)非常愚蠢的錯(cuò)誤，那就是額外設(shè)計(jì)了一套“分?jǐn)?shù)”機(jī)制來(lái)保證用戶會(huì)使用流水賬這個(gè)功能——有時(shí)候酝掩，你沉浸在你的勞動(dòng)中鳞芙，于是忘記了你也曾是鄙視某種做法的人。

第三次虛擬迭代：“流水賬”與“打孔”的結(jié)合

在接下來(lái)的“使用”中期虾，我遇到的問(wèn)題主要集中在流水賬的設(shè)計(jì)上原朝。在第三個(gè)虛擬迭代版本中，我終于找到了解決辦法彻消，那就是把“打孔”跟“流水賬”結(jié)合起來(lái)（上圖）竿拆。用戶如果要打孔，就必須結(jié)合這個(gè)信念寫(xiě)下今天的流水賬宾尚，講一講今天為什么要給這個(gè)信念打孔丙笋，發(fā)生了什么，自己做得如何煌贴，有什么感想御板。例如，你今天遇到一個(gè)老油條給你甩鍋牛郑，但是你突然想起你寫(xiě)的一篇叫做“不做老好人”的信念怠肋，于是你戰(zhàn)勝了這個(gè)老油條，那么今晚回到家淹朋，你就找到這個(gè)信念去給它打孔笙各，打孔的時(shí)候你就寫(xiě)上了今天的流水賬，講述今天這個(gè)值得慶祝的事情础芍。

這樣的設(shè)計(jì)就讓流水賬融入了主線之中杈抢。另外，我設(shè)計(jì)了讓流水賬不能刪除仑性，寫(xiě)了就永遠(yuǎn)在那里惶楼，以保證每次的打孔必須是嚴(yán)謹(jǐn)?shù)亩荒苁请S意的。

在第四個(gè)虛擬迭代版本中，我還設(shè)計(jì)過(guò)一個(gè)叫“導(dǎo)航器”的東西歼捐，因?yàn)楫?dāng)我想要給一個(gè)信念打孔何陆，或給它添加一個(gè)新的感悟時(shí)，有時(shí)候我很難立刻找到它豹储。不過(guò)由于我一直堅(jiān)信“附加功能”往往都是設(shè)計(jì)上智慧欠缺的遮羞布贷盲，所以我最終發(fā)現(xiàn)原來(lái)問(wèn)題的癥結(jié)來(lái)自于現(xiàn)有排序規(guī)則還不夠完善，于是我就去掉了這個(gè)功能颂翼，然后完善了排序的規(guī)則晃洒。

最終，第N個(gè)虛擬迭代版本在我UI制作的一個(gè)月反復(fù)“使用”朦乏，一直沒(méi)有發(fā)現(xiàn)新的問(wèn)題，于是我就提交文檔給外包公司正式開(kāi)發(fā)了氧骤。中間收到過(guò)30個(gè)左右的測(cè)試Build呻疹，經(jīng)歷了大概80次電話溝通，3次當(dāng)面溝通和2000個(gè)左右的需求提交（包括Bug筹陵、細(xì)節(jié)改動(dòng)刽锤，使用Worktitle平臺(tái)），接著就有了現(xiàn)在的「the App」2.0——感謝我的朋友李穎朦佩、陳智豪并思、劉明清，后面這些工作很多是由他們幫我完成的语稠，我一己之力是根本無(wú)法做到的宋彼；也感謝我的外包公司的老板鄧智超，「the App」做到后期仙畦，很多模塊的Manday都遠(yuǎn)遠(yuǎn)超出了預(yù)估输涕，但是他沒(méi)有多收我一分錢，因?yàn)樗仓饾u愛(ài)上了這個(gè)產(chǎn)品慨畸。

虛擬迭代畢竟不是真實(shí)迭代莱坎，我總有一些地方會(huì)犯錯(cuò)，我會(huì)收到用戶的各種反饋寸士，正確看清這些反饋檐什，我才能知道下一個(gè)版本迭代的重點(diǎn)在哪里。

《守望先鋒》弱卡，源氏

《守望先鋒》現(xiàn)在逐漸退熱乃正，很多用戶都在抱怨各種問(wèn)題，主要集中在英雄這個(gè)話題谐宙。有的抱怨“不能玩源氏了”烫葬，有的抱怨“DVA太強(qiáng)了應(yīng)該削弱”，有的抱怨“憑什么我每天要玩奶媽”，有的抱怨“說(shuō)好的一個(gè)月出一個(gè)英雄呢搭综？”……

如果暴雪一條一條去改正這些問(wèn)題垢箕，它就輸了，因?yàn)檫@些抱怨背后的原因都是一致的——那就是過(guò)分強(qiáng)調(diào)團(tuán)隊(duì)配合兑巾。一個(gè)團(tuán)戰(zhàn)基因太強(qiáng)的游戲（參見(jiàn)暴雪的《風(fēng)暴英雄》）条获，它必然導(dǎo)致很多人要補(bǔ)位，因?yàn)樗^的配合體系就是“肉蒋歌、DPS帅掘、奶”的固定搭配；它必然導(dǎo)致每個(gè)版本都會(huì)出現(xiàn)一些最強(qiáng)勢(shì)的英雄組合堂油，于是就有人玩不了源氏修档；它必然導(dǎo)致出英雄的難度會(huì)隨著英雄數(shù)量上升而呈幾何指數(shù)加大，因?yàn)椴邉澬枰紤]的不是單個(gè)英雄之間的平衡府框，而是巨量的英雄組合之間的平衡吱窝，于是就有人抱怨出新英雄的速度太慢……

用戶會(huì)向你暗示產(chǎn)品的問(wèn)題，但很少能直接指出產(chǎn)品的問(wèn)題迫靖。你要做的不是挨個(gè)地去滿足每個(gè)用戶的需求院峡，而是去思考它們背后指向了產(chǎn)品的哪個(gè)根本性的癥結(jié)。永遠(yuǎn)都會(huì)有人抱怨和質(zhì)疑你的產(chǎn)品系宜，你要做的不是去迎合照激，而是借助他們的智慧來(lái)更徹底地做自己。

「the App」在Appstore的平均評(píng)分是4.5盹牧，它的評(píng)分是兩極分化的俩垃，好評(píng)的人給的幾乎都是滿分，有些人寫(xiě)了幾百字的評(píng)論欢策；差評(píng)的人有時(shí)給的只有1分吆寨，然后配上“垃圾玩意兒不知道怎么用”這種憤怒的文字。但在我眼里踩寇，不論是給最高分還是給最低分的人啄清，他們使用「the App」的體驗(yàn)都是一樣的，我不能因?yàn)槟切┖迷u(píng)就認(rèn)為「the App」只不過(guò)是門(mén)檻比較高俺孙，對(duì)于有心鉆研的用戶才能敞開(kāi)他的大門(mén)辣卒。實(shí)際上，給最高分的人睛榄，他們所認(rèn)同的是「the App」優(yōu)秀的那一面荣茫，從用戶交流來(lái)看，他們一樣會(huì)遇到那些給1分差評(píng)的用戶遇到的問(wèn)題场靴，只不過(guò)他們對(duì)「the App」更加寬容罷了啡莉。

有些人反映“進(jìn)去不知道怎么用”港准，有些人反映“是不是雞湯App？”咧欣，有些人反映“教程太過(guò)文藝”浅缸，有些人反映“建立了一個(gè)文件夾之后，不知道怎么開(kāi)始寫(xiě)”魄咕，有些人反映“信念和感悟到底有什么區(qū)別”衩椒，有些人反映“打孔器到底是干嘛的？”哮兰。經(jīng)過(guò)對(duì)產(chǎn)品核心的審視毛萌，這些問(wèn)題的產(chǎn)生絕大多數(shù)都來(lái)自于同一個(gè)錯(cuò)誤，那就是我之前提到的喝滞，那個(gè)愚蠢的錯(cuò)誤——為了把流水賬功能融入主線阁将，而額外設(shè)計(jì)了“分?jǐn)?shù)”這個(gè)體系。雖然后來(lái)我改變了流水賬的設(shè)計(jì)右遭，但我并沒(méi)有去掉“分?jǐn)?shù)”這套體系冀痕。

由于“分?jǐn)?shù)”體系綁定的是文件夾，而文件夾代表的是“人生目標(biāo)”狸演，所以目前整個(gè)「the

App」的主線上，都會(huì)過(guò)于強(qiáng)調(diào)“人生目標(biāo)”這個(gè)概念僻他。由于“人生目標(biāo)”卡在「the App」和用戶內(nèi)容之間宵距，我就無(wú)法避開(kāi)它來(lái)直接呈現(xiàn)「the App」的核心思想，我還得另外去寫(xiě)一些教程來(lái)引導(dǎo)用戶吨拗，完整的用戶流程中間出現(xiàn)了一個(gè)多余的環(huán)節(jié)满哪，于是就產(chǎn)生了上述用戶所抱怨的一切。

每個(gè)the App用戶所追求的劝篷，都是成為更好的自己

實(shí)際上哨鸭，大多數(shù)用戶，包括我本人娇妓，只是偶然看到了書(shū)上一句點(diǎn)亮人生的話像鸡，只是偶然走在湖邊，突然想通了從今以后要怎樣面對(duì)這個(gè)世界哈恰。然后只估，我們不約而同地打開(kāi)了「the App」，只是想把這句話寫(xiě)進(jìn)去着绷，再在閑暇時(shí)把他歸類到某個(gè)人生信念里蛔钙，以便讓雙眼能更加清晰地看到前方的路。在這個(gè)過(guò)程中荠医，我們并不關(guān)心人生目標(biāo)是什么吁脱，因?yàn)樗小竧he?App」用戶的人生目標(biāo)都是一致的桑涎，那就是去做更好的自己。

但如果不是虛擬迭代兼贡，我也許要在第5版攻冷、第10版才能發(fā)現(xiàn)這個(gè)問(wèn)題，而不是在第3版就能解決它紧显。在「the App」接下來(lái)的2.1（或3.0）版本中讲衫，你將會(huì)看到一個(gè)更簡(jiǎn)潔但更有智慧的個(gè)人成長(zhǎng)應(yīng)用。

整個(gè)「the?App」的開(kāi)發(fā)過(guò)程孵班，如果說(shuō)有什么最重要的信念涉兽，那就是在極力減少每個(gè)版本Manday的同時(shí)，用虛擬迭代的方式讓每個(gè)版本之間的跨度盡可能地?cái)U(kuò)大篙程，因?yàn)橐粋€(gè)產(chǎn)品很少在第一版就能成功枷畏，在有限的成本內(nèi)，我們需要更多的虱饿、更有質(zhì)量的試錯(cuò)空間拥诡。

在給「the App」做UI之前，我的設(shè)計(jì)水平還停留在剛畢業(yè)時(shí)業(yè)余設(shè)計(jì)一些公益廣告的階段氮发，我并不知道@3x的真正意義是什么渴肉，那么我就去查知乎、研究別人的作品爽冕，用盡各種辦法把首頁(yè)做出來(lái)仇祭，啃下這塊硬骨頭之后，后面的UI設(shè)計(jì)也就輕松多了颈畸；

ASO和H5架設(shè)我都沒(méi)接觸過(guò)乌奇，那么我就去萬(wàn)能的淘寶，看那些店家說(shuō)自己是怎樣做的眯娱，然后動(dòng)手學(xué)過(guò)來(lái)礁苗；

當(dāng)我在人員完備的互聯(lián)網(wǎng)公司里做產(chǎn)品時(shí)，我曾對(duì)外包開(kāi)發(fā)嗤之以鼻徙缴，覺(jué)得不天天盯著開(kāi)發(fā)豈能做出一個(gè)滿意的產(chǎn)品來(lái)试伙？而后來(lái)，我們認(rèn)識(shí)了智超娜搂，然后我們做到了迁霎。

過(guò)程很簡(jiǎn)單，那就是像「the App」所要求的那樣百宇，去不斷追求更好的自己考廉。

全篇完，點(diǎn)這里回到<上篇>