多研究些問(wèn)題，少談些主義

著手寫(xiě)這篇文章時(shí)，正是七月伊始。想起九十五年前的七月，胡適先生發(fā)表了那篇在接下來(lái)的一個(gè)世紀(jì)都將遭受批判的文章——《多研究些問(wèn)題，少談些主義》。其時(shí)的中國(guó)，正被各種社會(huì)問(wèn)題所困擾，也引發(fā)了學(xué)界對(duì)于各種“主義”的主張。針對(duì)這些主義，胡適闡明了自己的態(tài)度——　　現(xiàn)在輿論界大危險(xiǎn)，就是偏向紙上的學(xué)說(shuō)，不去實(shí)地考察中國(guó)今日的社會(huì)需要究竟是什么東西……某種社會(huì)，到了某時(shí)代，受了某種的影響，呈現(xiàn)某種不滿意的現(xiàn)狀。于是有一些有心人，以這種現(xiàn)象，想出某種救濟(jì)的法子。這是”主義’的原起。主義初起時(shí)，大都是一種救時(shí)的具體主張。后來(lái)這種主張傳播出去，傳播的人要圖簡(jiǎn)便，使用一兩個(gè)字來(lái)代表這種具體的主張，所以叫他做‘“某某主義”。主張成了主義，便由具體的計(jì)劃，變成一個(gè)抽象的名詞。……“主義”的大危險(xiǎn)，就是能使人心滿意足，自以為尋著包醫(yī)百病的“根本解決”，從此用不著費(fèi)心力去研究這個(gè)那個(gè)具體問(wèn)題的解決法了。

這里搬出這些文字，是想拋玉引磚，借真知來(lái)粉飾拙見(jiàn)，談一談眼下產(chǎn)品和設(shè)計(jì)業(yè)界里的“問(wèn)題”與“主義”。

擬物主義 VS 扁平主義？

　　眾所周知，自微軟創(chuàng)造出Metro伊始，關(guān)于“skeuomorphic（擬物化）”和“flat（扁平化）”的的爭(zhēng)議就未曾間歇過(guò)。這一公案，在6月11日蘋(píng)果發(fā)布iOS7后，更是被推上一個(gè)新的高潮。至于這段公案的詳情這里就不再贅述，看官可隨意Google之。

這段公案，其核心便在于大眾和業(yè)界人士眼中所謂“Skeuomorphic（擬物化）”和“Flat（扁平化）”的對(duì)立。“擬物主義”和“扁平主義”各執(zhí)一端，相持不下，征伐不已。而波及到現(xiàn)實(shí)工作中，也經(jīng)常可以看到很多產(chǎn)品經(jīng)理或設(shè)計(jì)師動(dòng)輒便將“擬物化”和“扁平化”放在嘴邊——“這個(gè)太平了，沒(méi)什么質(zhì)感，不上流”、“這是潮流，現(xiàn)在都追求扁平化”?？鬃釉贿^(guò)：“攻乎異端，斯害也已”，對(duì)于到底是該繼續(xù)堅(jiān)持?jǐn)M物主義，還是該追隨扁平主義？下文就來(lái)妄談一下，供看官一笑。

首先，請(qǐng)?jiān)u判一下，下圖中哪款設(shè)計(jì)是Skeuomorphic擬物設(shè)計(jì)？哪款又是Flat扁平設(shè)計(jì)？

答案看似是不言而喻的——左圖是Skeuomorphic擬物設(shè)計(jì)，右圖是Flat扁平設(shè)計(jì)。但是，真的是這樣嗎？這個(gè)問(wèn)題其實(shí)是個(gè)陷阱，而前面的答案則是不準(zhǔn)確的。因?yàn)?，兩款設(shè)計(jì)都是Skeuomorphic擬物設(shè)計(jì)，而只有右圖是Flat扁平設(shè)計(jì)。為什么這么說(shuō)呢？首先我們來(lái)看Skeuomorphic擬物設(shè)計(jì)的概念。Dictionary.com上對(duì)Skeuomorph的定義為——Skeuomorph ：an ornament or design on an object copied from a form of the object when made from another material or by other techniques, as an imitation metal rivet mark found on handles of prehistoric pottery.試譯之——Skeuomorph是一種裝飾手段或設(shè)計(jì)手法，用于在某個(gè)對(duì)象上復(fù)制來(lái)自其他材料或方法所制成對(duì)象的形式。例如，在陶器把手上添加模仿金屬鉚釘造型的裝飾，使得原材料為黏土的器皿看起來(lái)像是用金屬制成。這一過(guò)程可由下圖表示：

其中，F(xiàn)不僅僅單指狹義的外觀樣式，更多的是指布局、方式、體裁等?；仡^再看上面的例子，就會(huì)發(fā)現(xiàn)，兩圖都是對(duì)現(xiàn)實(shí)中的鐘表所做的模仿，并沒(méi)有跳出現(xiàn)實(shí)的框架而設(shè)計(jì)出某種全新的計(jì)時(shí)形式。不同的是，右圖沒(méi)有使用漸變、高光等額外的特效處理，左圖則僅在真實(shí)感的模擬上比右圖更近了一步?？梢?jiàn)，通常情況下，人們對(duì)Skeuomorphic擬物主義和Flat扁平主義的爭(zhēng)論焦點(diǎn)并未跳出表象，而更多是簡(jiǎn)單地糾結(jié)于視覺(jué)層面的特效處理孰優(yōu)孰劣上。這種爭(zhēng)論，往往將兩者簡(jiǎn)單粗暴地置于對(duì)立面，卻忽視了Skeuomorphic和Flat問(wèn)題的重點(diǎn)——視覺(jué)是服務(wù)于產(chǎn)品的，到底該使用Skeuomorphic還是Flat，這個(gè)問(wèn)題應(yīng)該站在產(chǎn)品層面來(lái)考慮。我把這種選擇比喻為漁網(wǎng)和釣線的選擇，用漁網(wǎng)的人指責(zé)釣線的簡(jiǎn)單單一，用釣線的人指責(zé)漁網(wǎng)的復(fù)雜粗放，卻都忽視了兩者的目的、使用場(chǎng)景和使用者的差異所在。

因此，在做設(shè)計(jì)之前，要先明確好產(chǎn)品的定位，做有針對(duì)性的設(shè)計(jì)，用設(shè)計(jì)去解決切實(shí)的問(wèn)題，而非僅僅停留在表象去爭(zhēng)論風(fēng)格的好壞、主義的優(yōu)劣。那么，什么才是有針對(duì)性的設(shè)計(jì)？

為解決問(wèn)題而設(shè)計(jì)

探討上文的問(wèn)題之前，先來(lái)看個(gè)例子——

給出的替代方案，是以機(jī)器人代替工人完成重物的遠(yuǎn)距離搬送。

固然這個(gè)人形機(jī)器人看起來(lái)很酷，夠科技，也有人情味，但這是一個(gè)好的設(shè)計(jì)嗎？將設(shè)計(jì)作品等同于對(duì)現(xiàn)實(shí)的模擬，其實(shí)是一項(xiàng)膚淺而又耗費(fèi)資源的工作。如果站在實(shí)際角度去解決切實(shí)的問(wèn)題，可以得到一個(gè)更加扁平高效的方案如下。

那么是否就是說(shuō)，這種扁平化的機(jī)器人設(shè)計(jì)解決方案就是正確的呢？再看下圖。

顯然，每一種設(shè)計(jì)風(fēng)格都是有局限性的。當(dāng)目的不同時(shí)，適用的設(shè)計(jì)解決方案是不同的，也無(wú)法認(rèn)定一種風(fēng)格是優(yōu)于另一種風(fēng)格的。在有針對(duì)性的設(shè)計(jì)中，設(shè)計(jì)要解決的問(wèn)題是最重要的，至于采用哪種視覺(jué)語(yǔ)言，應(yīng)當(dāng)首先取決于產(chǎn)品要達(dá)到的目的，而非時(shí)下流行的設(shè)計(jì)風(fēng)格。以iOS6和iOS7的“返回”為例——

iOS6的返回在視覺(jué)上更像一個(gè)“按”鈕，通過(guò)使用更接近真實(shí)物理世界觀的陰影、高光和漸變對(duì)返回操作區(qū)域進(jìn)行闡釋，給予人一種可以點(diǎn)觸的視覺(jué)觀感。這一設(shè)計(jì)所帶來(lái)的好處是，通過(guò)具有強(qiáng)烈操作暗示（局部范圍的點(diǎn)觸感）和方向暗示（箭頭造型和被箭頭包裹的文字）的擬物手法，降低使用者的學(xué)習(xí)成本，并提升使用者對(duì)操作結(jié)果預(yù)判的準(zhǔn)確度。這種設(shè)計(jì)手段在iPhone尚未淪為街機(jī)的那些年頭是非常有價(jià)值的，能夠以友好的姿態(tài)，使具備任何認(rèn)知程度的使用者都能快速上手，有利于發(fā)展iOS的用戶群體。iOS7的返回，則通過(guò)扁平化的處理，在視覺(jué)上擺脫了“按”這一動(dòng)作隱喻，并主要強(qiáng)調(diào)一種與整個(gè)屏幕更加一體化的方向感。這種改變并非僅僅為了服從整體設(shè)計(jì)風(fēng)格的變化，而更多可以解讀為一種適應(yīng)產(chǎn)品現(xiàn)狀的進(jìn)化——

　　1、從普通屏到retina屏的升級(jí)，使原先擬物化的設(shè)計(jì)需要占用更多的系統(tǒng)資源。屏幕的增大意味著切圖尺寸的增加，切圖尺寸的增加勢(shì)必帶來(lái)占用系統(tǒng)空間的增長(zhǎng)。而在特定尺寸下，需要大量視覺(jué)細(xì)節(jié)的擬物化設(shè)計(jì)必然會(huì)使用到更多的顏色，從而使切圖的數(shù)據(jù)量成倍增加。這一點(diǎn)在屏幕尺寸分化中所帶來(lái)的影響是極為嚴(yán)重的。而由于扁平化的設(shè)計(jì)對(duì)細(xì)節(jié)元素的使用更為克制，能夠較好地解決在不同分辨率下的適配問(wèn)題，而不需要耗費(fèi)太多的資源（包括系統(tǒng)資源和人力投入資源）。如下圖所模擬的結(jié)果，iOS6按鈕切圖的數(shù)據(jù)量在三種尺寸下成倍增加，而iOS7按鈕切圖的數(shù)據(jù)量增加并不多。

2、從3.5英寸屏幕到4英寸屏幕的升級(jí)，使得手指完成屏幕左上角點(diǎn)觸操作所需的路徑增長(zhǎng)。同時(shí)，在iOS6的返回按鈕設(shè)計(jì)上，實(shí)際的點(diǎn)觸響應(yīng)區(qū)域要大于視覺(jué)限定的區(qū)域，手指即使未能精確點(diǎn)觸到視覺(jué)上的按鈕區(qū)域，也會(huì)觸發(fā)返回的動(dòng)作。

結(jié)合這兩點(diǎn)考慮，顯然在大屏幕上，有明確觸控范圍的點(diǎn)觸樣式不再是一個(gè)理想的視覺(jué)展現(xiàn)形式，過(guò)于強(qiáng)調(diào)點(diǎn)觸區(qū)域的精確度會(huì)在一定程度上增加用戶心理上的疲勞感。反之，iOS7的返回則規(guī)避了這一問(wèn)題，對(duì)點(diǎn)觸區(qū)域的模糊化處理在一定程度上釋放了用戶的操作壓力。

3、iOS7對(duì)手勢(shì)操作和頭部感應(yīng)操作的支持，可以讓返回操作不再像iOS6一樣只能依賴于點(diǎn)觸動(dòng)作。這一點(diǎn)使得強(qiáng)調(diào)點(diǎn)觸行為的按鈕樣式失去了存在的價(jià)值，取而代之的是在表現(xiàn)方向感上更加純粹的扁平化設(shè)計(jì)。

可見(jiàn)，iOS7的“返回”并非因?yàn)橐獟仐墧M物主義才成為現(xiàn)在的樣子，而是使用這種更扁平的設(shè)計(jì)手法切實(shí)解決了產(chǎn)品的實(shí)際問(wèn)題。這一點(diǎn)可以用Jonathan Ive曾說(shuō)過(guò)的一段話加以印證——

　　If we’re thinking about a lunchbox, we’d be really careful about not having the word box already, to give you a bunch of ideas that could be quite narrow. Because you think of a box as being square and like a cube. So we’re quite careful with the words that you use, because those can be narrow and can determine the path that you go down.

　　大意是：如果要設(shè)計(jì)一個(gè)lunchbox，最好先把“box”這個(gè)字眼拋開(kāi)，因?yàn)?rdquo;box”這個(gè)字眼會(huì)決定你接下來(lái)的思路，將你的想象力限定在某種立方體造型上。（注: a box is a square or rectangular container with hard or stiff sides.）

因此，在做設(shè)計(jì)的時(shí)候，要先放空自己對(duì)事物的既有認(rèn)知，再?gòu)母旧先タ紤]最適合的設(shè)計(jì)形式。這便是一種從設(shè)計(jì)的原本目的出發(fā)，拋棄一切外在影響，針對(duì)產(chǎn)品本身給出解決方案的設(shè)計(jì)方法。

現(xiàn)在再看前文的問(wèn)題，什么是有針對(duì)性的設(shè)計(jì)？有針對(duì)性的設(shè)計(jì)就是——拋開(kāi)不論是擬物主義還是扁平主義或是XX主義的干擾，為產(chǎn)品中遇到的問(wèn)題提供最合適的設(shè)計(jì)解決方案。那些為了貫徹?cái)M物主義理念或追隨扁平主義潮流，強(qiáng)行在視覺(jué)上將產(chǎn)品擬物化或扁平化，甚至以不惜犧牲產(chǎn)品體驗(yàn)為代價(jià)的膚淺做法，可以休矣。

四個(gè)衡量維度

　　空談?wù)`國(guó)，即使有道理的話說(shuō)濫了也便成了空洞的XX主義。證完“擬物主義VS扁平主義”是一個(gè)偽命題后，還得回到實(shí)際問(wèn)題上——在為產(chǎn)品而設(shè)計(jì)時(shí)，如何判斷這個(gè)產(chǎn)品是適用更接近真實(shí)的擬物化的設(shè)計(jì)，還是適用更加扁平化的設(shè)計(jì)？通常我會(huì)采用基于存在環(huán)境、自身價(jià)值、用戶關(guān)系及進(jìn)化趨勢(shì)等四個(gè)衡量維度來(lái)對(duì)產(chǎn)品進(jìn)行簡(jiǎn)單的判斷，初步確定所適用的設(shè)計(jì)風(fēng)格。

　　適應(yīng)性：你的產(chǎn)品是否需要在多個(gè)平臺(tái)具備一致性展現(xiàn)？

　　呈現(xiàn)性：你的產(chǎn)品是否以大塊的信息內(nèi)容展現(xiàn)為主？

　　易用性：你的產(chǎn)品是否具有便于理解的操作隱喻（包括對(duì)層級(jí)結(jié)構(gòu)和交互行為的暗示）？

　　趨勢(shì)性：你的產(chǎn)品是否依賴于流行文化的認(rèn)同？針對(duì)以上四個(gè)維度的答案如果為“是”，則請(qǐng)傾向選擇更加扁平化的設(shè)計(jì)方案。然而，任何衡量方法都是死板的，在進(jìn)行具體設(shè)計(jì)工作時(shí)，建立在大量經(jīng)驗(yàn)基礎(chǔ)上的直覺(jué)和判斷力更值得信賴。

　　總之——多研究產(chǎn)品存在的現(xiàn)實(shí)問(wèn)題，針對(duì)產(chǎn)品的現(xiàn)實(shí)問(wèn)題找到最佳的視覺(jué)解決方案；而不要受某某設(shè)計(jì)主義的干擾，為迎合所謂潮流趨勢(shì)而影響了產(chǎn)品的體驗(yàn)——這才是吾輩產(chǎn)品設(shè)計(jì)者們對(duì)產(chǎn)品的真正價(jià)值