請別終結(jié)擬物VS扁平這個話題！(4)

扁平與擬物兩派之爭，從來都是話題之王，今年扁平化勢力越來越強(qiáng)盛，于是有設(shè)計(jì)師喊出這個話題該終結(jié)了。現(xiàn)在擬物是華山劍宗一脈，雖然氣象衰微，仍有老羅這個風(fēng)清揚(yáng)在堅(jiān)持，今天令狐沖@牛MO王涵 小哥為其正名，孰對孰錯不要緊，爭出個美好就行。

前幾天看到有個朋友發(fā)表了一篇《擬物化VS扁平化話題終結(jié)者》的文章，其中一句“科技引領(lǐng)方向”深有感觸，所以特開UI系列綠色新“坑兒”，也想聊聊這個事兒。要說明的是，我不是來罵仗的，原文內(nèi)容我部分也很贊同，但是有些觀點(diǎn)咱們得慢慢聊聊，也希望大家一起交流探討，人類的思想和嘴巴就是要利用起來推動人類進(jìn)步的。好了，該開始了。另外，藍(lán)色理論坑兒我會慢慢補(bǔ)，橙色實(shí)戰(zhàn)案例坑兒正在籌備……太忙了，請諒解。

關(guān)于歷史和演變問題，我不能給予定論，也無法揣測古人們的思想。就像三國演義里描述的劉備大善，張飛莽夫，然而，如果事實(shí)上真有這樣的人物，他們真的是這種性格嗎？這不是故事的描述嗎？也有野史說張飛書畫文筆非常了得，因?yàn)楣适滦枰�才設(shè)定這樣的形象而且愈演愈烈。在我眼中，劉備才是三國里最小人的、最奸詐的人物，只靠下跪和眼淚就騙的眾多豪杰為其賣命，簡直就是邪教教主。

所以問題來了，誰能定論祖先們想書寫的第一個“圖形”不想往擬物走呢？見到鳥，如果他們能畫出真實(shí)的鳥，相信他們一定會的，所以逐漸衍生出了相機(jī)。在這里，的確是有關(guān)科技或者技術(shù)問題，但是我并不認(rèn)為這是引領(lǐng)，反而是限制。

我們先假設(shè)一下，如果沒有相機(jī)，人們想識別鳥類，這些是某設(shè)計(jì)師設(shè)計(jì)的“擬物”鳥類圖標(biāo)，相信看到名字再加上形象，大家已經(jīng)能夠識別了。如果沒有擬物設(shè)計(jì)的發(fā)展，直接扁平化呢？我們感受一下。

這個例子并不嚴(yán)格準(zhǔn)確，因?yàn)槲覀円呀?jīng)發(fā)明的相機(jī)。為什么發(fā)明了相機(jī)？是拍腦袋沒事想到的嗎？一定不是。而是因?yàn)楸蝗粘Ｉ�活所需要。接下來我要說的這個例子是：

雖然大家很少看到，但是一定知道這是twitter的logo，它足夠扁平了對嗎？它能看出來是一只小鳥，能想象到大家在twitter上嘰嘰喳喳的說話，非常成功，而且采用了扁平化設(shè)計(jì)也是非常正確，它讓每個用戶自己聯(lián)想自己是什么樣的鳥，雄鷹還是孔雀還是麻雀；可以讓用戶設(shè)定自己是什么顏色，是幸福的藍(lán)色還是七彩的還是其他。扁平帶給人無限的想象空間，說的俗一點(diǎn)就是個性化定制。如果將其擬物化，它的定位就是準(zhǔn)確的“藍(lán)色蜂鳥”，而這個形象會因?yàn)榇蟊姷牟煌瑢徝来嬖诓煌�的喜好，它不會�?yōu)于扁平化的設(shè)計(jì)。而這，和科技本身似乎沒什么關(guān)系。接著，我要說相機(jī)。

蘋果的相機(jī)icon，從擬物進(jìn)化到“扁平”（我一直覺得蘋果的設(shè)計(jì)不能叫純扁平，我不能肯定，windows8的純色塊在我看來才叫真正意義的扁平），拋除美感的因素，它的識別性足夠了，讓用戶第一眼知道，這是相機(jī)，可以了，可以說最新的ios 7設(shè)計(jì)讓更多的人知道，這是一個相機(jī)，因?yàn)樗鼘⑾鄼C(jī)的外形完美呈現(xiàn)了，只是它不夠嚴(yán)謹(jǐn)，不夠美。這個建立在系統(tǒng)功能上，讓大眾用戶快速了解熟知圖標(biāo)定義，扁平能更好的達(dá)到其效果。那么，如果我們要做一款相機(jī)應(yīng)用呢？都用扁平嗎？差異化在哪兒？

如果應(yīng)用商店里都是這些icon，它起到的就是告訴你：這是一個相機(jī)應(yīng)用。其他并沒有更多的信息傳達(dá)了，用戶能區(qū)分的，只有應(yīng)用截圖或者其他廣告渠道。如果你將你的應(yīng)用圖標(biāo)設(shè)計(jì)的非常棒，用戶是否也會聯(lián)想到，它的應(yīng)用也非常棒呢？會不會被其icon所吸引呢？

當(dāng)然，如果設(shè)計(jì)師能力不夠，圖標(biāo)不夠精美，用戶也會因?yàn)閳D標(biāo)就覺得這個應(yīng)用未必精致，這個時候扁平的優(yōu)勢就來了，因?yàn)楸馄皆O(shè)計(jì)哪怕設(shè)計(jì)師功底并不高，但是做了不會像擬物難度那么大。

再比如，我們在某個應(yīng)用中看到這樣一個圖標(biāo)：

它要傳達(dá)給用戶的意思：和汽車或者駕駛有關(guān)的功能，這個圖標(biāo)表達(dá)準(zhǔn)確，沒問題。如果，我們要做一款所有系列汽車的引用，這個圖標(biāo)代表車型，那么誰來告訴我，這是什么車？如果不是擬物化圖標(biāo)，它所傳達(dá)的視覺一定是非常低的。所以，即使要占用資源和內(nèi)存，也要把功能和體驗(yàn)完善，這是前提。

這個例子可能還不足以打動大家，但是這個認(rèn)證一個問題：設(shè)計(jì)不分扁平還是擬物，要的是符合產(chǎn)品本身需求，做合適的設(shè)計(jì)而不是強(qiáng)行跟隨哪種風(fēng)格或強(qiáng)行符合哪種技術(shù)。

扁平化目前深得大眾喜好，是因?yàn)楸馄交�衍生出多種風(fēng)格，這些風(fēng)格滿足用戶需求并且符合現(xiàn)代科技所產(chǎn)生的效果。尤其國內(nèi)，扁平更加大眾化，因?yàn)樗�很難去認(rèn)定它對或錯，而且用戶不懂、不了解何為真正的美。所以當(dāng)時喬幫主說：“很多人沒有準(zhǔn)確的審美”。舉個栗子：

一個“喜歡”的圖標(biāo)，你可以做出很多種，都表達(dá)的是心，可是你能分辨它們內(nèi)在的區(qū)別嗎？設(shè)計(jì)師是可以的，他們感受到創(chuàng)意、規(guī)范、圓角的處理、細(xì)節(jié)等等，可大眾不是的，他們只需要一個“心”的標(biāo)示就足夠了。誰管你規(guī)范或者顏色用的對錯，而你的設(shè)計(jì)，完全可能影響了其他人。10個人，有8個審美不夠的人說這個設(shè)計(jì)的好看，而2個有審美的人說，這個做的不夠好，難道8大于2就是對的？別較真，我這里說的是8個審美不好的特定因素。

這就是需要設(shè)計(jì)師去引導(dǎo)用戶，潛意識的告訴用戶什么是美的、創(chuàng)意的、規(guī)范的，而對于這個整個設(shè)計(jì)背后的過程，是其他人看不到的，我們深藏功與名。

簡單的一個“心”的圖標(biāo)，你可以用3秒鐘搞定它，PS有這個矢量圖形；你可以用2分鐘搞定它，再自帶的基礎(chǔ)上調(diào)整跟改進(jìn)；你也可能會花30分鐘搞定它，因?yàn)槟阋�用�?guī)范的規(guī)律的形狀和運(yùn)算角度來控制它的嚴(yán)謹(jǐn)；你也可能花10個小時去設(shè)計(jì)它，它的配色，它的多種創(chuàng)意圖形，它的轉(zhuǎn)角以及一些可以優(yōu)化的點(diǎn)。你可以對自己隨意，也可以對自己負(fù)責(zé)。

很多優(yōu)秀的設(shè)計(jì)來源于歐美或者平面來源于日本那樣，如果去過那些地方我們就發(fā)現(xiàn)，因?yàn)樗麄兊恼�體設(shè)計(jì)質(zhì)量就很高，哪怕街邊的路牌，和中國滿大街可笑的牌匾相比，設(shè)計(jì)氛圍就比我們好太多。那么你們說，在高質(zhì)量環(huán)境下成長的設(shè)計(jì)師，能爛到什么程度？這是耳融目染相互影響的。國內(nèi)近幾年所有設(shè)計(jì)水平飛躍性的提升，相對的整體設(shè)計(jì)質(zhì)量也在提高，難道不是環(huán)境所影響？沒有那些不斷創(chuàng)新、規(guī)范、前進(jìn)、糾結(jié)的設(shè)計(jì)者們?yōu)槲覀冮_路，我們只能評自己的能力理解美或者不美。就好似一些主題設(shè)計(jì)大賽，每次第一名的風(fēng)格，一定會被其他比賽沿用，因?yàn)榇蠹蚁嘈�，被認(rèn)可的就是美的。做設(shè)計(jì)，不要一直跟風(fēng)，而是要突破，這條路很難，但是值得我們?nèi)ヌ魬?zhàn)，因?yàn)橹挥虚_出一條路來，其他人才會跟著走。

在哪里都有對設(shè)計(jì)指點(diǎn)江山的人，所以，在擬物化設(shè)計(jì)的時候，一個icon你花費(fèi)了6個小時去設(shè)計(jì)，結(jié)果老板或者產(chǎn)品經(jīng)理或者設(shè)計(jì)總監(jiān)或者掃地阿姨不喜歡，都能讓你去修改，無奈你又花了6小時，不行再改，不行再改，不行再改，不行……不行辭職了。這個時間成本是多么可怕！可是如果你做扁平設(shè)計(jì)，可能一小時就搞定了，再改再改，改十次才10個小時，效率是大大降低的。這是目前扁平流行的一大因素，快速執(zhí)行和修正。

原作者拿這個ICON做了一個例子，我沒懂想表現(xiàn)什么，我自己的理解是：這樣復(fù)雜的icon在縮小尺寸很難看到精彩細(xì)節(jié)，只有大尺寸才美。基于這個點(diǎn)，我想舉個反栗子：

最小的識別性有了，那么大的呢？精彩在哪里？震撼到你了嗎？

原作者對不起，又要說你的大龍蝦了。我非常贊同，這就是畫畫了，不能算圖標(biāo)。畫的好就有錯嗎？肯定不是，我想我和原作者都不認(rèn)為畫的好有錯，關(guān)鍵是它是不是、能不能成為UI，這個事兒就得聊了。作為技法的展現(xiàn)，怎么把它變成“圖標(biāo)”，變成精美的圖標(biāo)，就是作者運(yùn)用的問題了（由于我沒有原作源文件，所以進(jìn)行簡單的PS處理，請諒解）。

這可不可以算作一個龍蝦美食應(yīng)用的icon呢？

如果結(jié)合小丑魚或者蜜蜂或者置換其中的元素，它算不算UI呢？

如果運(yùn)用在網(wǎng)站上，算不算是UI設(shè)計(jì)呢？會不會比拍照來的有趣？

再如樓主參加比賽，把每個細(xì)節(jié)和局部提出來，是不是也能算是一套寫實(shí)的主題設(shè)計(jì)呢？這些點(diǎn)都是可以用的。所以，在我之前的文章和問題上，我強(qiáng)調(diào)過也收到過這樣的問題，畫的好對UI有沒有用？有用，非常有用。即使扁平橫行的年代，仍然有用！這是一切的基礎(chǔ)，磨練自己的畫工肯定是有利無害的！

誰引導(dǎo)誰，可能原文中沒有說的太清楚，卻有很多人都評論并且肯定的說：“科技引領(lǐng)設(shè)計(jì)”，這點(diǎn)我不能認(rèn)同。

看過鋼鐵俠電影的，相信對里面的科幻界面都有很深的印象，這些是UI中的界面設(shè)計(jì)，對么？現(xiàn)在科技能達(dá)到嗎？達(dá)不到，對嗎？那我們就不去思考，不去創(chuàng)新，不去探索了嗎？答案一定是否定的！正因?yàn)闊o論是設(shè)計(jì)者或者創(chuàng)意家設(shè)想出這個畫面，然后通過設(shè)計(jì)師來設(shè)計(jì)整個效果和細(xì)節(jié)，這樣呈現(xiàn)給全世界，全世界的科學(xué)家或者是程序員才會通過這個創(chuàng)意進(jìn)行探索和研究，讓科技努力達(dá)到這樣的效果。很多這些幕后的事情，是我們根本看不到的，所以才會出現(xiàn)那么多概念產(chǎn)品（比如概念汽車，概念手機(jī)系統(tǒng)）。

早期的手機(jī)，比iPhone更早以前，都在做擬物化設(shè)計(jì)，即使是分辨率顯示不夠，但是要做一款漂亮的擬物圖標(biāo)也是可以實(shí)現(xiàn)的。如果當(dāng)時有人提出或者開創(chuàng)出扁平風(fēng)格，或許扁平已經(jīng)橫行十幾年了。只不過，那個時候，沒有牛逼的設(shè)計(jì)師提出扁平這個概念。

谷歌最新的Material Design，絕對大大引領(lǐng)了設(shè)計(jì)風(fēng)潮，無論是細(xì)節(jié)、圖形設(shè)計(jì)、規(guī)則、配色等等，都非常棒。為這套設(shè)計(jì)加分的不僅僅是扁平設(shè)計(jì)，更多的是因?yàn)槟琴澋奖�的交互動效。這的確是需要技術(shù)的支持，但是我并不認(rèn)為說是科技的“引領(lǐng)”，誰能去采訪一下谷歌公司，是否是有了這套Material風(fēng)格的設(shè)計(jì)，再去想辦法加以實(shí)現(xiàn)精彩的動效？我不覺得是有了這套技術(shù)，然后去套一個符合這套技術(shù)的設(shè)計(jì)。所以，這是在做適合的設(shè)計(jì)，而不能片面的認(rèn)為這是追隨扁平時代的潮流。

接著不得不說錘子UI的事兒，從以前的文章來看，原作者絕對不是錘粉，甚至深深的對擬物化設(shè)計(jì)具有抵觸思想。而有意思的是，我在以前的設(shè)計(jì)中提倡擬物不死，因?yàn)槲蚁嘈旁O(shè)計(jì)是循環(huán)的，現(xiàn)在擬物的衰落因?yàn)榇蠹?ldquo;看膩了”，大家更愿意被牛逼的交互動效所吸引。但是當(dāng)這些也膩了的時候，三十年河?xùn)|，三十年河西�。″N子在最開始的UI，是重?cái)M物，當(dāng)時我覺得非常帥，但是并不認(rèn)為那是一套適合的設(shè)計(jì)。而最新的錘子UI，我認(rèn)為非常贊，這是一種輕擬物，也大家都在改進(jìn)和突破的設(shè)計(jì)。這種輕擬物可以實(shí)現(xiàn)很多動效，也不會因?yàn)樘�多�?xì)節(jié)和占用所謂的資源、內(nèi)存，當(dāng)然肯定會高一點(diǎn)點(diǎn)。

這些圖標(biāo)風(fēng)格并不是超真實(shí)擬物，但是也絕對不是狠狠的扁平。利用淡淡的漸變色和一些光影來達(dá)到兩者之間，識別性高又不失美感。要說最大的問題，應(yīng)該就是第三方圖標(biāo)了，畢竟不是出自一個設(shè)計(jì)師之手，所以對這種風(fēng)格來說很難去把握。只說目前系統(tǒng)默認(rèn)的圖標(biāo)，我認(rèn)為，真的很好看�？吹竭@里心里默默鄙視我是羅粉的請淡定，我用的還是iPhone，以前我也說我非常非常討厭ios7風(fēng)格的設(shè)計(jì)，但是我卻喜歡整套功能和交互，ios7最讓我接受不了的不認(rèn)真的設(shè)計(jì)�；蛟S說不認(rèn)真不準(zhǔn)確，至少達(dá)不到我理想的認(rèn)真。

左邊的圖是在IOS7發(fā)布以后，dribbble上一位設(shè)計(jì)師進(jìn)行的重新設(shè)計(jì)，如果ios是左圖這樣的設(shè)計(jì)，那么我認(rèn)為它是“認(rèn)真”的。大家也可以去細(xì)細(xì)感受一下，色彩上的輕微調(diào)整，還有規(guī)范的設(shè)計(jì)細(xì)節(jié)，比如相機(jī)，比如備忘錄，比如指南針，比如郵件，比如瀏覽器。我沒有說蘋果現(xiàn)在的設(shè)計(jì)是“丑”的，是“壞”的，是我感覺不夠“認(rèn)真”。

我理解的認(rèn)真，比如相機(jī)圖標(biāo)，原設(shè)計(jì)有左上角一個按鈕和兩條白線，而我認(rèn)為，如果要做成極簡，這個圖形可以再簡練！比如天氣圖標(biāo)，它背景的漸變色是從上到下從深入淺，而其他的設(shè)計(jì)比如電話，都是由淺入深（如果說模擬真實(shí)天空顏色，那么原作是正確的，可是不是說不擬物嗎，那可以根據(jù)規(guī)范統(tǒng)一一下�。�；比如照片和游戲中心的圖標(biāo)，它們使用的色系是一致的，但是處理的方法和質(zhì)感不同，為什么要加一些高光？有必要嗎？模擬氣泡？不是不擬物嗎？比如備忘錄，備忘錄和便簽差不多，那么多的線想表達(dá)的就是一個事兒，這個圖形可以更簡練；比如safari，采用很多周圍的小點(diǎn)，這些小點(diǎn)表達(dá)的是指南針羅盤吧，可是這么多密集的排布在如此小的圖標(biāo)上，反而很亂，這些都是可以更簡潔一些，這是我認(rèn)為原作“不夠認(rèn)真”。原設(shè)計(jì)的配色是根據(jù)大眾最喜歡的調(diào)查結(jié)果，所以喜歡原作的人有很多可能是喜歡其“配色”，并沒有去較真這些細(xì)節(jié)圖形的表達(dá)，扁平優(yōu)勢在于極簡的高識別，那么就應(yīng)該在保證識別度的情況下深挖它的極簡和圖形的提煉。

說到這里可能有些偏題了，回過頭我要問，誰定義的蘋果最新設(shè)計(jì)是扁平風(fēng)？就是因?yàn)橛幸恍┘兩珗D形？那魅族、MIUI等等，這類也是扁平嗎？這個事情不對吧。別說這是一個扁平時代，到底目前最流行的一些UI設(shè)計(jì)是不是扁平還不能下結(jié)論呢。WIN8，谷歌，我認(rèn)為這是最具代表性的扁平，純色塊搭配極簡提煉的圖形，達(dá)到視覺識別效果。如果說帶一點(diǎn)漸變色，搭配一些純色圖形，也是扁平，即是說IOS、MIUI都是扁平，那好，我們從這個定義上走，錘子它也是扁平啊，同樣的淡色漸變，加配一些淡淡投影。如果誰能把這個邏輯給我說清楚，我非常希望得到賜教和一起探討。

最近的一些主題比賽非常有意思，大家都在畫昆蟲，這三個是我很喜歡的設(shè)計(jì)，拋出來問問大家，這是擬物？還是扁平？（注意看圖標(biāo)的排序是不是很有趣）

哦，對了還有分辨率的問題。一款icon的誕生，做UI的人都知道，要先從1024像素做，然后512像素，微調(diào)；然后256像素，微調(diào)；128像素，微調(diào)；96像素、72像素、64像素、48像素、32像素、24像素、16像素等等……‘’

負(fù)責(zé)的設(shè)計(jì)師，應(yīng)該對每個尺寸的icon都進(jìn)行調(diào)整，雖然這個工作非常耗費(fèi)時間，可是這是一種責(zé)任。扁平的優(yōu)勢在于，利用代碼能寫出一些圖形，進(jìn)行自身放大縮小都能保持比較好的視覺識別和清晰度，都能，保持，比較好的，清晰度。但是如果做出一個產(chǎn)品，你同樣要去在每個分辨率下進(jìn)行試看和調(diào)整修改。分辨率問題，僅僅是耗時，這事情愿意不愿意做，交給產(chǎn)品負(fù)責(zé)人，交給設(shè)計(jì)師，我們真的沒必要去糾結(jié)它。做的好，是應(yīng)該的，做不好，是你自己的錯，不要去怪技術(shù)不要去怪分辨率（不過目前這些該死的分辨率真的很頭疼，尤其是圖標(biāo)類，可是如果你用矢量工具去做，用嚴(yán)格的矢量圖形去切割融合，在各個分辨率下進(jìn)行絕對準(zhǔn)確數(shù)值的調(diào)整，那么會大大降低工作量，所以放棄從網(wǎng)上下載PNG素材，做自己的設(shè)計(jì)才是王道）。

結(jié)束前，想起一個設(shè)計(jì)，或許它不算是UI。在原研哉的《設(shè)計(jì)中的設(shè)計(jì)》一書中，有一個案例，衛(wèi)生紙的設(shè)計(jì)。

引文：圖片顯示了坂茂對衛(wèi)生紙的再設(shè)計(jì)。方形紙管形成紙卷芯。由于芯是方的，結(jié)果上面的紙也卷成了方的。放在紙架上拉出來用時，方紙卷會費(fèi)勁地發(fā)出“咔噠咔噠”聲。而傳統(tǒng)的圓紙卷轉(zhuǎn)起來則輕松順暢，一拉“嗖嗖”的。所以，傳統(tǒng)設(shè)計(jì)的圓紙卷被你拉出來的紙比你實(shí)際需要的多。而方紙卷則由于阻力，起到了降低資源消耗的作用，并傳遞了節(jié)省的信息。包裝上也是，圓紙卷間隙較大，方紙卷能緊靠在一起，節(jié)省了運(yùn)輸和儲存空間。

一個簡單的日常家用衛(wèi)生紙，與科技無關(guān)，但是和設(shè)計(jì)有關(guān)，和生活有關(guān)。在最后放出這樣一個案例，供大家娛樂和思考。

的確，我本人偏愛擬物，但是我相信我是相對冷靜和客觀的人，在時下我在做項(xiàng)目和案例的時候，也會更多的考慮用到扁平設(shè)計(jì)。因?yàn)椋�我要對產(chǎn)品負(fù)責(zé)，不能因?yàn)閭�人喜好而去強(qiáng)行做什么樣的風(fēng)格，我要做的只有：做適合的設(shè)計(jì)。

之所以寫下這篇，是因?yàn)樵�文有一點(diǎn)我最不能贊同：話題終結(jié)者。這個話題我真的不希望終結(jié)，只有我們彼此創(chuàng)新、彼此辯論、彼此用自己的方式或者執(zhí)行的設(shè)計(jì)來對比，才能有更多的可能性去改變這個世界，難道我們中國的設(shè)計(jì)就一定要跟國外的風(fēng)嗎！？現(xiàn)在無論做什么你的客戶或者老板都會說：你看蘋果，你看谷歌，你看推特，有一天你的設(shè)計(jì)改變了潮流，蘋果的設(shè)計(jì)師對他們BOSS說：“Hey，boss，you look look this Chinese design……”（看這英文說得，多么適合大眾口味！括弧笑）。

對，我就是個愛做夢的人，你可以盡情的嘲笑我。

但是，你們永遠(yuǎn)不能阻止我去追夢。

繼續(xù)爭吵吧，為了明天的美好。