本文原題《360 OS發(fā)布之際，和老周說說視覺設(shè)計，干貨》，發(fā)于AK47論壇“說老周”版塊。本文主要評價了以蘋果為例的扁平化視覺設(shè)計理念，更是指出了現(xiàn)有扁平化設(shè)計的內(nèi)在矛盾。贊同了Windows phone在視覺設(shè)計上的成功，并對谷歌的新系統(tǒng)寄予厚望。

誰犯下了扁平化錯誤？

最近入了個錘子，讓我想起了曾經(jīng)把玩iOS 3.0的幸福時光，感觸良多。

一直都想把扁平化這種事情拿出來嘮一嘮，也一直找不到時間，恰好興致來了，就來說說我個人對于扁平化設(shè)計的看法。

起初iOS扁平化設(shè)計風(fēng)格出來之后，整個業(yè)界都在哀嚎為什么這個設(shè)計這么丑，更有甚者把“蘋果前設(shè)計師”的作品搬出來與之比較，來襯托 Jony Ive 的扁平化設(shè)計的失敗。

然而兩年過去，再回首當(dāng)年往事，只能微微一笑。

呵呵

說好的審美底線呢？

當(dāng)然這不是一篇抨擊扁平化設(shè)計的文章。最早在手機上施行扁平化設(shè)計的并不是蘋果，而是微軟。拋去Windows Phone不溫不火的現(xiàn)狀不談，我個人認(rèn)為Windows Phone的設(shè)計，起碼在視覺角度是成功的。微軟通過對色塊的塑造給予每一個色塊代表的功能定義，這種設(shè)計思路極其簡單，卻又十分易于理解。這樣的設(shè)計，可以說是成功的。

當(dāng)初iOS 7降臨的時候，國內(nèi)某知名評測人說過一句話，讓我印象很深刻：關(guān)于扁平或擬物的取舍，更多只是個人喜好罷了。我個人認(rèn)為，這樣說是毫無責(zé)任心的一種行為。

如果像FView在Smartisan T1評測里所提到的那樣，把扁平和擬物比喻為寫實派畫作和抽象派畫作，作為畫作而言是沒有任何問題的。而手機作為一個計算平臺，人們?nèi)粘Ｊ褂玫墓ぞ?，風(fēng)格上的改變很可能會徹底改變用戶的使用習(xí)慣——畢竟手機的所有操作都是基于視覺來進行的，如果一個操作系統(tǒng)的視覺風(fēng)格出現(xiàn)問題，那么對于使用者效率的影響也是巨大的。

我們先來看看iOS的設(shè)計思路

在當(dāng)初第一版iOS進行設(shè)計時，喬布斯就委托Scott Forstall（前iOS部門主管，已離職）和Jony Ive分別進行iOS操作界面的設(shè)計。喬布斯當(dāng)時就選擇了Scott Forstall的擬物化設(shè)計，相信喬布斯除了對于精致物品的喜愛之外，還有更深層次的考慮。

Ive的扁平化設(shè)計有兩個主要目的：一個是突出內(nèi)容，另一個是為信息分層。

在iOS UI的設(shè)計中，系統(tǒng)突出了一個功能：虛擬立體桌面（恕作者忘了這個高大上的英文名字），大概的作用是：通過陀螺儀感知手機的狀態(tài)、檢測手機的移動過程，從而調(diào)整壁紙和圖標(biāo)的相對位置產(chǎn)生“3D”的幻覺。這個設(shè)計的思路很好，可是原理卻是矛盾的。

我們都知道，3D技術(shù)的實現(xiàn)是基于兩個眼睛看到的景物不同而產(chǎn)生的景深感。而蘋果的設(shè)計卻是試圖在平面上塑造一個虛擬的空間，類似于2D電影，我們都知道里面的東西是如何擺放的，我們也知道他并不是真的3D，他還是在一個平面的維度上。

手機和電影不同，我們需要通過與手機互動來進行操作，期間手機必然造成手機位置的相對運動，我們會默認(rèn)為這個屏幕就是一個靜止的平面，但是在操作的過程中，虛擬3D桌面必定會模仿真實空間來進行位置變換，這也是蘋果虛擬3D原理的根本所在。本身我們?nèi)梭w在操作手機的時候是沒有移動的。不知道大家有沒有類似的感受，那就是在坐車的時候玩手機會有惡心的感覺。那就是因為我們所看到的物體的運動狀態(tài)和我們本身的運動狀態(tài)不同所導(dǎo)致的。在iOS7正式上架的初期有很多用戶在使用蘋果設(shè)備時都出現(xiàn)了不適和眩暈，以及后來蘋果出臺關(guān)閉動態(tài)效果等補救措施都是因為這種虛擬3D的運動與我們本身的運動狀態(tài)相互沖突，才導(dǎo)致了視覺上的眩暈。

還有就是，突出的信息層級，限制了蘋果對于動態(tài)效果的運用，進入后臺的縮放，應(yīng)用程序的進出特效都讓人很難分清到底我們是還停留在應(yīng)用程序?qū)蛹?，還是已經(jīng)躍入了一個更深的邏輯層次。也許這些事情在我們使用的時候不會刻意去想，但是當(dāng)我們在使用時感覺到費解的時候，就足以證明設(shè)計的失敗了。

所以說，這種在平面上虛擬空間的想法是好的，但是違背了人對于世界最基本的認(rèn)知，所以可以說是失敗的設(shè)計。

除此之外，蘋果為統(tǒng)一虛擬桌面的視覺效果，對于圖標(biāo)的設(shè)計進行了縮減，去掉了陰影高光和材質(zhì)等效果，進一步加大了用戶的辨識成本，由于圖標(biāo)過于抽象，圖標(biāo)下的應(yīng)用程序名稱又沒有明顯的陰影無法看清，使得在整個扁平化的設(shè)計中尋找一款應(yīng)用程序成為了一個“靠熟練度”的事情。

UI作為操作的載體，運行于平面上，有著銜接人與機器的重任。相比于蘋果的將圖標(biāo)簡化到無以比擬，然后再通過復(fù)雜的虛擬視覺層級突出信息的重要性，擬物化設(shè)計中的陰影和美麗的圖標(biāo)看起來要比扁平化性價比高的多。

包豪斯的設(shè)計理念

包豪斯強調(diào)造型藝術(shù)的結(jié)合，提出藝術(shù)與技術(shù)相結(jié)合的思想；強調(diào)新的工業(yè)產(chǎn)品的使用價值與審美價值的辯證關(guān)系；強調(diào)使用新的物質(zhì)材料、新技術(shù)和實用功能決定的現(xiàn)代抽象形式；強調(diào)藝術(shù)設(shè)計才能與工藝制作勞動相結(jié)合；強調(diào)藝術(shù)家之間的協(xié)作和打破藝術(shù)家與匠師之間的壁壘。而扁平化的設(shè)計其實有些取進求遠(yuǎn)的意思。

在新時代的移動設(shè)備UI設(shè)計標(biāo)準(zhǔn)中，除了像Smartisan這樣固執(zhí)的堅持絕對精致工匠主義，我反倒覺得Google提出的Material Design更符合包豪斯理念的定義。將屏幕抽象為紙張，用不同層次的陰影突出信息層級，去掉無用的光線與材質(zhì)，甚至連整個界面的虛擬光線照射角度都有簡潔明確的規(guī)定，雖然用戶感受不到，但是視覺上的簡潔和易于理解卻是可以真真切切感受得到的。當(dāng)然Material Design也有缺點。蘋果的扁平化設(shè)計雖然不算成功，可是也有自成一體的視覺邏輯，Material Design卻讓人感覺所有功能在視覺上是無規(guī)則而獨立的，沒有任何邏輯可言，希望谷歌可以優(yōu)化一下安卓系統(tǒng)的設(shè)計，讓移動設(shè)備的UI設(shè)計更進一步。

說了這么多，相信大家也大致了解了，那就是無論何時絕對的扁平和擬物都是不可取的，盲目的擬物和扁平都會造成內(nèi)容的不直觀。目前來講，谷歌的新設(shè)計語言大有可為，還需要進一步強化開發(fā)者的視覺風(fēng)格規(guī)范，繼續(xù)完善Material Design的視覺語言，結(jié)束安卓混亂一片的現(xiàn)狀，指日可待。

作者微信公眾號：NativeBC

來源：虎嗅

原文地址：http://www.huxiu.com/article/112018/1.html?f=wangzhan