擬物VS扁平?請別終結這個話題!
編者按:扁平與擬物兩派之爭,從來都是話題之王,今年扁平化勢力越來越強盛,于是有設計師喊出這個話題該終結了?,F在擬物是華山劍宗一脈,雖然氣象衰微,仍有老羅這個風清揚在堅持,今天令狐沖@牛MO王涵?小哥為其正名,孰對孰錯不要緊,爭出個美好就行。
前幾天看到有個朋友發表了一篇《擬物化VS扁平化話 題終結者》的文章,其中一句“科技引領方向”深有感觸,所以特開UI系列綠色新“坑兒”,也想聊聊這個事兒。要說明的是,我不是來罵仗的,原文內容我部分 也很贊同,但是有些觀點咱們得慢慢聊聊,也希望大家一起交流探討,人類的思想和嘴巴就是要利用起來推動人類進步的。好了,該開始了。另外,藍色理論坑兒我 會慢慢補,橙色實戰案例坑兒正在籌備……太忙了,請諒解。
差異化
關于歷史和演變問題,我不能給予定論,也無法揣測古人們的思想。就像三國演義里描述的劉備大善,張飛莽夫,然而,如果事實上真有這樣的人物,他們真 的是這種性格嗎?這不是故事的描述嗎?也有野史說張飛書畫文筆非常了得,因為故事需要才設定這樣的形象而且愈演愈烈。在我眼中,劉備才是三國里最小人的、 最奸詐的人物,只靠下跪和眼淚就騙的眾多豪杰為其賣命,簡直就是邪教教主。
所以問題來了,誰能定論祖先們想書寫的第一個“圖形”不想往擬物走呢?見到鳥,如果他們能畫出真實的鳥,相信他們一定會的,所以逐漸衍生出了相機。在這里,的確是有關科技或者技術問題,但是我并不認為這是引領,反而是限制。
我們先假設一下,如果沒有相機,人們想識別鳥類,這些是某設計師設計的“擬物”鳥類圖標,相信看到名字再加上形象,大家已經能夠識別了。如果沒有擬物設計的發展,直接扁平化呢?我們感受一下。
這個例子并不嚴格準確,因為我們已經發明的相機。為什么發明了相機?是拍腦袋沒事想到的嗎?一定不是。而是因為被日常生活所需要。接下來我要說的這個例子是:
雖然大家很少看到,但是一定知道這是twitter的logo,它足夠扁平了對嗎?它能看出來是一只小鳥,能想象到大家在twitter上嘰嘰喳喳 的說話,非常成功,而且采用了扁平化設計也是非常正確,它讓每個用戶自己聯想自己是什么樣的鳥,雄鷹還是孔雀還是麻雀;可以讓用戶設定自己是什么顏色,是 幸福的藍色還是七彩的還是其他。扁平帶給人無限的想象空間,說的俗一點就是個性化定制。如果將其擬物化,它的定位就是準確的“藍色麻雀”,而這個形象會因 為大眾的不同審美存在不同的喜好,它不會優于扁平化的設計。而這,和科技本身似乎沒什么關系。接著,我要說相機。
蘋果的相機icon,從擬物進化到“扁平”(我一直覺得蘋果的設計不能叫純扁平,我不能肯定,windows8的純色塊在我看來才叫真正意義的扁 平),拋除美感的因素,它的識別性足夠了,讓用戶第一眼知道,這是相機,可以了,可以說最新的ios 7設計讓更多的人知道,這是一個相機,因為它將相機的外形完美呈現了,只是它不夠嚴謹,不夠美。這個建立在系統功能上,讓大眾用戶快速了解熟知圖標定義, 扁平能更好的達到其效果。那么,如果我們要做一款相機應用呢?都用扁平嗎?差異化在哪兒?
如果應用商店里都是這些icon,它起到的就是告訴你:這是一個相機應用。其他并沒有更多的信息傳達了,用戶能區分的,只有應用截圖或者其他廣告渠道。如果你將你的應用圖標設計的非常棒,用戶是否也會聯想到,它的應用也非常棒呢?會不會被其icon所吸引呢?
當然,如果設計師能力不夠,圖標不夠精美,用戶也會因為圖標就覺得這個應用未必精致,這個時候扁平的優勢就來了,因為扁平設計哪怕設計師功底并不高,但是做了不會像擬物難度那么大。
再比如,我們在某個應用中看到這樣一個圖標:
它要傳達給用戶的意思:和汽車或者駕駛有關的功能,這個圖標表達準確,沒問題。如果,我們要做一款所有系列汽車的引用,這個圖標代表車型,那么誰來 告訴我,這是什么車?如果不是擬物化圖標,它所傳達的視覺一定是非常低的。所以,即使要占用資源和內存,也要把功能和體驗完善,這是前提。
這個例子可能還不足以打動大家,但是這個認證一個問題:設計不分扁平還是擬物,要的是符合產品本身需求,做合適的設計而不是強行跟隨哪種風格或強行符合哪種技術。
效率
扁平化目前深得大眾喜好,是因為扁平化衍生出多種風格,這些風格滿足用戶需求并且符合現代科技所產生的效果。尤其國內,扁平更加大眾化,因為它很難去認定它對或錯,而且用戶不懂、不了解何為真正的美。所以當時喬幫主說:“很多人沒有準確的審美”。舉個栗子:
一個“喜歡”的圖標,你可以做出很多種,都表達的是心,可是你能分辨它們內在的區別嗎?設計師是可以的,他們感受到創意、規范、圓角的處理、細節等 等,可大眾不是的,他們只需要一個“心”的標示就足夠了。誰管你規范或者顏色用的對錯,而你的設計,完全可能影響了其他人。10個人,有8個審美不夠的人 說這個設計的好看,而2個有審美的人說,這個做的不夠好,難道8大于2就是對的?別較真,我這里說的是8個審美不好的特定因素。
這就是需要設計師去引導用戶,潛意識的告訴用戶什么是美的、創意的、規范的,而對于這個整個設計背后的過程,是其他人看不到的,我們深藏功與名。
簡單的一個“心”的圖標,你可以用3秒鐘搞定它,PS有這個矢量圖形;你可以用2分鐘搞定它,再自帶的基礎上調整跟改進;你也可能會花30分鐘搞定 它,因為你要用規范的規律的形狀和運算角度來控制它的嚴謹;你也可能花10個小時去設計它,它的配色,它的多種創意圖形,它的轉角以及一些可以優化的點。 你可以對自己隨意,也可以對自己負責。
很多優秀的設計來源于歐美或者平面來源于日本那樣,如果去過那些地方我們就發現,因為他們的整體設計質量就很高,哪怕街邊的路牌,和中國滿大街可笑 的牌匾相比,設計氛圍就比我們好太多。那么你們說,在高質量環境下成長的設計師,能爛到什么程度?這是耳融目染相互影響的。國內近幾年所有設計水平飛躍性 的提升,相對的整體設計質量也在提高,難道不是環境所影響?沒有那些不斷創新、規范、前進、糾結的設計者們為我們開路,我們只能評自己的能力理解美或者不 美。就好似一些主題設計大賽,每次第一名的風格,一定會被其他比賽沿用,因為大家相信,被認可的就是美的。做設計,不要一直跟風,而是要突破,這條路很 難,但是值得我們去挑戰,因為只有開出一條路來,其他人才會跟著走。
在哪里都有對設計指點江山的人,所以,在擬物化設計的 時候,一個icon你花費了6個小時去設計,結果老板或者產品經理或者設計總監或者掃地阿姨不喜歡,都能讓你去修改,無奈你又花了6小時,不行再改,不行 再改,不行再改,不行……不行辭職了。這個時間成本是多么可怕!可是如果你做扁平設計,可能一小時就搞定了,再改再改,改十次才10個小時,效率是大大降 低的。這是目前扁平流行的一大因素,快速執行和修正。
原作者拿這個ICON做了一個例子,我沒懂想表現什么,我自己的理解是:這樣復雜的icon在縮小尺寸很難看到精彩細節,只有大尺寸才美。基于這個點,我想舉個反栗子:
最小的識別性有了,那么大的呢?精彩在哪里?震撼到你了嗎?
畫的畫沒用嗎?
原作者對不起,又要說你的大龍蝦了。我非常贊同,這就是畫畫了,不能算圖標。畫的好就有錯嗎?肯定不是,我想我和原作者都不認為畫的好有錯,關鍵是 它是不是、能不能成為UI,這個事兒就得聊了。作為技法的展現,怎么把它變成“圖標”,變成精美的圖標,就是作者運用的問題了(由于我沒有原作源文件,所 以進行簡單的PS處理,請諒解)。
這可不可以算作一個龍蝦美食應用的icon呢?
如果結合小丑魚或者蜜蜂或者置換其中的元素,它算不算UI呢?
如果運用在網站上,算不算是UI設計呢?會不會比拍照來的有趣?
再如樓主參加比賽,把每個細節和局部提出來,是不是也能算是一套寫實的主題設計呢?這些點都是可以用的。所以,在我之前的文章和問題上,我強調過也 收到過這樣的問題,畫的好對UI有沒有用?有用,非常有用。即使扁平橫行的年代,仍然有用!這是一切的基礎,磨練自己的畫工肯定是有利無害的!
指引
誰引導誰,可能原文中沒有說的太清楚,卻有很多人都評論并且肯定的說:“科技引領設計”,這點我不能認同。
看過鋼鐵俠電影的,相信對里面的科幻界面都有很深的印象,這些是UI中的界面設計,對么?現在科技能達到嗎?達不到,對嗎?那我們就不去思考,不去 創新,不去探索了嗎?答案一定是否定的!正因為無論是設計者或者創意家設想出這個畫面,然后通過設計師來設計整個效果和細節,這樣呈現給全世界,全世界的 科學家或者是程序員才會通過這個創意進行探索和研究,讓科技努力達到這樣的效果。很多這些幕后的事情,是我們根本看不到的,所以才會出現那么多概念產品 (比如概念汽車,概念手機系統)。
早期的手機,比iPhone更早以前,都在做擬物化設計,即使是分辨率顯示不夠,但是要做一款漂亮的擬物圖標也是可以實現的。如果當時有人提出或者開創出扁平風格,或許扁平已經橫行十幾年了。只不過,那個時候,沒有牛逼的設計師提出扁平這個概念。
谷歌最新的Material Design, 絕對大大引領了設計風潮,無論是細節、圖形設計、規則、配色等等,都非常棒。為這套設計加分的不僅僅是扁平設計,更多的是因為那贊到爆的交互動效。這的確 是需要技術的支持,但是我并不認為說是科技的“引領”,誰能去采訪一下谷歌公司,是否是有了這套Material風格的設計,再去想辦法加以實現精彩的動 效?我不覺得是有了這套技術,然后去套一個符合這套技術的設計。所以,這是在做適合的設計,而不能片面的認為這是追隨扁平時代的潮流。
接著不得不說錘子UI的事兒,從以前的文章來看,原作者絕對不是錘粉,甚至深深的對擬物化設計具有抵觸思想。而有意思的是,我在以前的設計中提倡擬 物不死,因為我相信設計是循環的,現在擬物的衰落因為大家“看膩了”,大家更愿意被牛逼的交互動效所吸引。但是當這些也膩了的時候,三十年河東,三十年河 西?。″N子在最開始的UI,是重擬物,當時我覺得非常帥,但是并不認為那是一套適合的設計。而最新的錘子UI,我認為非常贊,這是一種輕擬物,也大家都在 改進和突破的設計。這種輕擬物可以實現很多動效,也不會因為太多細節和占用所謂的資源、內存,當然肯定會高一點點。
這些圖標風格并不是超真實擬物,但是也絕對不是狠狠的扁平。利用淡淡的漸變色和一些光影來達到兩者之間,識別性高又不失美感。要說最大的問題,應該 就是第三方圖標了,畢竟不是出自一個設計師之手,所以對這種風格來說很難去把握。只說目前系統默認的圖標,我認為,真的很好看。看到這里心里默默鄙視我是 羅粉的請淡定,我用的還是iPhone,以前我也說我非常非常討厭ios7風格的設計,但是我卻喜歡整套功能和交互,ios7最讓我接受不了的不認真的設 計。或許說不認真不準確,至少達不到我理想的認真。
左邊的圖是在IOS7發布以后,dribbble上一位設計師進行的重新設計,如果ios是左圖這樣的設計,那么我認為它是“認真”的。大家也可以 去細細感受一下,色彩上的輕微調整,還有規范的設計細節,比如相機,比如備忘錄,比如指南針,比如郵件,比如瀏覽器。我沒有說蘋果現在的設計是“丑”的, 是“壞”的,是我感覺不夠“認真”。
我理解的認真,比如相機圖標,原設計有左上角一個按鈕和兩條白線,而我認為,如果要做成極簡,這個圖形可以再簡練!比如天氣圖標,它背景的漸變色是 從上到下從深入淺,而其他的設計比如電話,都是由淺入深(如果說模擬真實天空顏色,那么原作是正確的,可是不是說不擬物嗎,那可以根據規范統一一下啊); 比如照片和游戲中心的圖標,它們使用的色系是一致的,但是處理的方法和質感不同,為什么要加一些高光?有必要嗎?模擬氣泡?不是不擬物嗎?比如備忘錄,備 忘錄和便簽差不多,那么多的線想表達的就是一個事兒,這個圖形可以更簡練;比如safari,采用很多周圍的小點,這些小點表達的是指南針羅盤吧,可是這 么多密集的排布在如此小的圖標上,反而很亂,這些都是可以更簡潔一些,這是我認為原作“不夠認真”。原設計的配色是根據大眾最喜歡的調查結果,所以喜歡原 作的人有很多可能是喜歡其“配色”,并沒有去較真這些細節圖形的表達,扁平優勢在于極簡的高識別,那么就應該在保證識別度的情況下深挖它的極簡和圖形的提 煉。
說到這里可能有些偏題了,回過頭我要問,誰定義的蘋果最新設計是扁平風?就是因為有一些純色圖形?那魅族、MIUI等等,這類也是扁平嗎?這個事情 不對吧。別說這是一個扁平時代,到底目前最流行的一些UI設計是不是扁平還不能下結論呢。WIN8,谷歌,我認為這是最具代表性的扁平,純色塊搭配極簡提 煉的圖形,達到視覺識別效果。如果說帶一點漸變色,搭配一些純色圖形,也是扁平,即是說IOS、MIUI都是扁平,那好,我們從這個定義上走,錘子它也是 扁平啊,同樣的淡色漸變,加配一些淡淡投影。如果誰能把這個邏輯給我說清楚,我非常希望得到賜教和一起探討。
最近的一些主題比賽非常有意思,大家都在畫昆蟲,這三個是我很喜歡的設計,拋出來問問大家,這是擬物?還是扁平?(注意看圖標的排序是不是很有趣)
哦,對了還有分辨率的問題。一款icon的誕生,做UI的人都知道,要先從1024像素做,然后512像素,微調;然后256像素,微調;128像素,微調;96像素、72像素、64像素、48像素、32像素、24像素、16像素等等……‘’
負責的設計師,應該對每個尺寸的icon都進行調整,雖然這個工作非常耗費時間,可是這是一種責任。扁平的優勢在于,利用代碼能寫出一些圖形,進行 自身放大縮小都能保持比較好的視覺識別和清晰度,都能,保持,比較好的,清晰度。但是如果做出一個產品,你同樣要去在每個分辨率下進行試看和調整修改。分 辨率問題,僅僅是耗時,這事情愿意不愿意做,交給產品負責人,交給設計師,我們真的沒必要去糾結它。做的好,是應該的,做不好,是你自己的錯,不要去怪技 術不要去怪分辨率(不過目前這些該死的分辨率真的很頭疼,尤其是圖標類,可是如果你用矢量工具去做,用嚴格的矢量圖形去切割融合,在各個分辨率下進行絕對 準確數值的調整,那么會大大降低工作量,所以放棄從網上下載PNG素材,做自己的設計才是王道)。
結語
結束前,想起一個設計,或許它不算是UI。在原研哉的《設計中的設計》一書中,有一個案例,衛生紙的設計。
引文:圖片顯示了坂茂對衛生紙的再設計。方形紙管形成紙卷芯。由于芯是方的,結果上面的紙也卷成了方的。放在紙架上拉出來用時,方紙卷會費勁地發出 “咔噠咔噠”聲。而傳統的圓紙卷轉起來則輕松順暢,一拉“嗖嗖”的。所以,傳統設計的圓紙卷被你拉出來的紙比你實際需要的多。而方紙卷則由于阻力,起到了 降低資源消耗的作用,并傳遞了節省的信息。包裝上也是,圓紙卷間隙較大,方紙卷能緊靠在一起,節省了運輸和儲存空間。
一個簡單的日常家用衛生紙,與科技無關,但是和設計有關,和生活有關。在最后放出這樣一個案例,供大家娛樂和思考。
的確,我本人偏愛擬物,但是我相信我是相對冷靜和客觀的人,在時下我在做項目和案例的時候,也會更多的考慮用到扁平設計。因為,我要對產品負責,不能因為個人喜好而去強行做什么樣的風格,我要做的只有:做適合的設計。
之所以寫下這篇,是因為原文有一點我最不能贊同:話題終結者。這個話題我真的不希望終結,只有我們彼此創新、彼此辯論、彼此用自己的方式或者執行的 設計來對比,才能有更多的可能性去改變這個世界,難道我們中國的設計就一定要跟國外的風嗎!?現在無論做什么你的客戶或者老板都會說:你看蘋果,你看谷 歌,你看推特,有一天你的設計改變了潮流,蘋果的設計師對他們BOSS說:“Hey,boss,you look look this Chinese design……”(看這英文說得,多么適合大眾口味!括弧笑)。
對,我就是個愛做夢的人,你可以盡情的嘲笑我。
但是,你們永遠不能阻止我去追夢。
繼續爭吵吧,為了明天的美好。
原文來自:優設
作者:@牛MO王涵
低智商噴子文。ps. 不考慮生產工藝的設計師都不是好的設計師。