這篇文章希望向你分享的是：如果你想開(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ù)過(guò)多，這篇文章分為了上、下兩篇來(lái)發(fā)表。你現(xiàn)在看到的是下篇。（上篇《探索外包開(kāi)發(fā)的極限：一個(gè)精品App誕生的全過(guò)程（上）》）

五、UI設(shè)計(jì)/切圖/適配文檔：左右腦同時(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」所要求的那樣，去不斷追求更好的自己。

【全篇完】

相關(guān)閱讀

探索外包開(kāi)發(fā)的極限：一個(gè)精品App誕生的全過(guò)程（上）

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

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