編者按：「擬物化不是扁平化的對(duì)立面，而是作為扁平化的一部分永存。」今天@特贊Tezign??這篇譯文，聊了聊擬物化和扁平化的關(guān)系，與平常看到的觀點(diǎn)不同，文章認(rèn)為擬物化并沒有死亡，依然存在于扁平化之中。至于原因，一起來(lái)看看漲姿勢(shì)。

「擬物化不是扁平化的對(duì)立面，而是作為扁平化的一部分永存。」

——村上春樹 ，《挪威的森林》

好啦，不騙你了，其實(shí)原文是「死」和「生」。

當(dāng)蘋果公司于2013年推出iOS 7系統(tǒng)，許多人都說(shuō)它宣判了擬物化設(shè)計(jì)的死刑。緊接著在2015年，當(dāng)谷歌公司推出Material Design這個(gè)設(shè)計(jì)語(yǔ)言，許多人都認(rèn)同這就是給擬物化設(shè)計(jì)的棺材上釘上了最后一根釘子。

不過(guò)，他們無(wú)疑是錯(cuò)的。

因?yàn)?a href="http://www.hx168888.com/tag/%e6%89%81%e5%b9%b3%e5%8c%96%e8%ae%be%e8%ae%a1" class="tag_a" target="_blank">扁平化設(shè)計(jì)——正如在蘋果的IOS和谷歌的Material Design系統(tǒng)中，數(shù)不勝數(shù)的熱門網(wǎng)站和我們?nèi)粘Ｓ玫腶pp中可以看到的那樣——事實(shí)上并不是擬物化設(shè)計(jì)的對(duì)立面。

要想徹底明白為什么，我們首先需要理解什么是真正的擬物化設(shè)計(jì)。

那么，什么是擬物化設(shè)計(jì)？

「擬物化設(shè)計(jì)」這個(gè)詞源于希臘語(yǔ)中的「skeuos」（意為器具或工具）和「morphe」（意為形狀）。在日常英語(yǔ)中，擬物化設(shè)計(jì)是對(duì)從一個(gè)對(duì)象到另一對(duì)象的視覺線索的應(yīng)用。

關(guān)于擬物化設(shè)計(jì)最常被引用的例子是蘋果公司 「舊有iOS 7系統(tǒng)” 的設(shè)計(jì)風(fēng)格。例如，iBooks應(yīng)用程序看起來(lái)像一個(gè)真實(shí)的書架——即有關(guān)一個(gè)書架的視覺線索（木質(zhì)紋理、陰影和縱深感等等）被使用在了應(yīng)用程序的用戶界面里。

擬物化設(shè)計(jì)的重點(diǎn)是為用戶提供即時(shí)語(yǔ)境：通過(guò)模仿公眾熟知的日常物體的視覺線索，擬物化設(shè)計(jì)能降低用戶去了解如何使用產(chǎn)品時(shí)需要的認(rèn)知負(fù)荷。

理解這些，你就能知道實(shí)際上擬物化設(shè)計(jì)不僅僅是一個(gè)設(shè)計(jì)趨勢(shì)。它還包括一個(gè)設(shè)計(jì)理念，即把現(xiàn)實(shí)生活中的對(duì)象用作視覺隱喻，使產(chǎn)品更便于使用。

我們?yōu)槭裁匆鰯M物化設(shè)計(jì)？

隨著iOS 7系統(tǒng)的發(fā)布，擬物化設(shè)計(jì)突然變的令人討厭了。大部分人都會(huì)抱怨它是難看的。人造皮革拼接的視覺設(shè)計(jì)矯枉過(guò)正，別人也會(huì)附和。而這些言辭一般都是真的，許多人已經(jīng)忘記了我們一開始為什么要做擬物化設(shè)計(jì)。

當(dāng)蘋果在2007的時(shí)候推出了iPhone，那時(shí)真的沒有其他產(chǎn)品像它一樣。通過(guò)在一塊玻璃上進(jìn)行觸摸、點(diǎn)擊以及捏動(dòng)來(lái)控制一臺(tái)設(shè)備，沒有人對(duì)這些操作此感到熟悉。那么蘋果如何向它的消費(fèi)者展示產(chǎn)品的使用方式呢？——

通過(guò)使操作直觀化的方式。所以你只需要看一遍，就能知道一款應(yīng)用程序是關(guān)于什么的，以及如何使用它。

因此，在照片應(yīng)用程序中的圖像看起來(lái)像一堆真實(shí)的照片。電子書看起來(lái)像真實(shí)的書籍，結(jié)合現(xiàn)實(shí)物理學(xué)應(yīng)用到翻頁(yè)。按鈕看起來(lái)像光滑的真實(shí)按鈕，所以用戶立馬知道他們可以按下。

這是擬物化設(shè)計(jì)的魔法：用戶界面在使用中變得順理成章。

這就是為什么我們?nèi)匀恍枰ú⑹褂茫M物化設(shè)計(jì)——因?yàn)闆]有它的設(shè)計(jì)會(huì)缺乏易于理解的情境。特別是面對(duì)復(fù)雜的任務(wù)時(shí)，這些設(shè)計(jì)變得很難操作。

等等，那么扁平化設(shè)計(jì)呢？

大多數(shù)我們所熟知的扁平化設(shè)計(jì)（在iOS 7及之后，材料設(shè)計(jì)等等）的特點(diǎn)是扁平化的明亮大膽的顏色。它注重排版，同時(shí)也避免過(guò)于豐富的紋理。

扁平化設(shè)計(jì)最早出現(xiàn)在20世紀(jì)40年代瑞士風(fēng)格的設(shè)計(jì)中，不過(guò)主要是因?yàn)轫憫?yīng)在不同屏幕尺寸的設(shè)備上的設(shè)計(jì)需要，才在最近幾年成為流行。

它的設(shè)計(jì)理念主要是圍繞消除盡可能多的視覺噪聲，為用戶提供一個(gè)專注（和快速加載）的經(jīng)驗(yàn)。

現(xiàn)在扁平化設(shè)計(jì)和擬物化設(shè)計(jì)的分歧變得越來(lái)越明顯，但他們不是相互對(duì)立的哲學(xué)。擬物化設(shè)計(jì)是通過(guò)使用其他對(duì)象的視覺特征來(lái)使物象直觀化；而扁平化設(shè)計(jì)是盡可能的減少視覺干擾。

的確，降低視覺噪聲的一個(gè)可取的方式是在界面中去掉擬物化設(shè)計(jì)的紋理。但是再多看一眼你的扁平化風(fēng)格的應(yīng)用程序和操作系統(tǒng)，你會(huì)發(fā)現(xiàn)擬物化設(shè)計(jì)的精神內(nèi)核仍然存在。

在扁平化設(shè)計(jì)中擬物化

首先，讓我們從擬物化被宣布死亡的iOS 7 +開始。

盡管iOS 7取消了大部分在以前版本中發(fā)現(xiàn)的人造結(jié)構(gòu)，它仍然依賴擬物化去提高自己的可用性。有幾個(gè)例子可以證明這一點(diǎn)。

ON/OFF開關(guān)根據(jù)扁平化設(shè)計(jì)的原則進(jìn)行了重新設(shè)計(jì)，但基本的擬物化靈感（一個(gè)真實(shí)的旋鈕）仍然被保留下來(lái)。從白色圓形旋鈕下方淺淺的陰影可以看出一個(gè)真按鈕的蛛絲馬跡，所以你的大腦不會(huì)花太長(zhǎng)的時(shí)間來(lái)辨認(rèn)：這個(gè)圓圈是一個(gè)可操作的按鈕。

陰影其實(shí)是擬物化平面設(shè)計(jì)的一個(gè)關(guān)鍵因素，因?yàn)樗鼈兏嬖V我們視覺元素的空間背景。這些，連同大量應(yīng)用視差和模糊系統(tǒng)相互作用的影響，當(dāng)面對(duì)iOS 7 +的視覺界面的時(shí)候，給人一種很真實(shí)的質(zhì)感。

iOS 9的App切換界面清晰地顯示了這些擬物化元素是如何集合起來(lái)讓扁平化設(shè)計(jì)富有生命的。這里，App的視覺靈感來(lái)自卡片。這些卡片用淺淺的陰影來(lái)區(qū)分邊界。模糊的背景也表示遠(yuǎn)處的卡片。它模仿了我們面對(duì)背景時(shí)視網(wǎng)膜在app上聚焦的狀態(tài)。

所列出的這些體現(xiàn)在iO平面設(shè)計(jì)上的擬物化有可能是不太確定的，但是你已經(jīng)掌握了大致的理念。

一個(gè)簡(jiǎn)單地例子，關(guān)于Google界面設(shè)計(jì)。

陰影大量使用在應(yīng)用程序上，用來(lái)創(chuàng)造深度感和層次。事實(shí)上，谷歌對(duì)材料設(shè)計(jì)的解釋是一種幾乎完全擬物化的方法：

材質(zhì)是隱喻……材料是在觸覺的現(xiàn)實(shí)基礎(chǔ)上，由紙張和墨水的研究的啟發(fā)而來(lái)，盡管現(xiàn)在技術(shù)已經(jīng)很先進(jìn)了而且有開放的想象力和魔力。

有了基于現(xiàn)實(shí)生活中紙的視覺效果和動(dòng)作設(shè)計(jì)，材料設(shè)計(jì)就能保證其視覺語(yǔ)言能直觀地抓住用戶眼球，甚至是第一次使用的用戶。

擬物化設(shè)計(jì)可以在大多數(shù)操作系統(tǒng)中找到，尤其是在臺(tái)式機(jī)（因?yàn)樗苁箯?fù)雜的界面直觀），或是最受歡迎的網(wǎng)站（比如臉譜網(wǎng)和Pinterest的卡接口）。

但它也生長(zhǎng)于一個(gè)看似無(wú)關(guān)的領(lǐng)域：影像學(xué)。

擬物化圖標(biāo)可能是平面設(shè)計(jì)和擬物化和諧共存的最鮮明的例子。我們每天使用的大多數(shù)圖標(biāo)都是來(lái)源于現(xiàn)實(shí)生活中的（通常是過(guò)時(shí)的）相似物。

以iOS中新聞應(yīng)用程序圖標(biāo)為例，它參考了一堆報(bào)紙的意象。或是郵件應(yīng)用程序的圖標(biāo)，它顯示了一個(gè)紙信封的樣子。或是在材料設(shè)計(jì)中的鬧鈴圖標(biāo)，來(lái)自一個(gè)雙鈴鬧鐘。

這些圖標(biāo)無(wú)疑是扁平的，但他們?nèi)匀皇菙M物的。

因此平面設(shè)計(jì)和擬物化設(shè)計(jì)不是相對(duì)的設(shè)計(jì)風(fēng)格流派。我們需要把擬物化從設(shè)計(jì)理念到一個(gè)單一的、基于結(jié)構(gòu)的尺寸簡(jiǎn)化出來(lái)，也是采用一個(gè)純粹主義者對(duì)扁平化設(shè)計(jì)的理解。

我們不會(huì)因其復(fù)雜的直觀界面而停止使用擬物化。但同時(shí)，扁平化設(shè)計(jì)可以使我們更加關(guān)注App、網(wǎng)頁(yè)和操作系統(tǒng)設(shè)計(jì)的重點(diǎn)，讓所有多余的視覺噪聲消除。

所以別緊張。兩種設(shè)計(jì)理念不是相互沖突的。相反，我們現(xiàn)在看到的那些迭代的界面設(shè)計(jì)是每種設(shè)計(jì)做的最好的產(chǎn)品。

作者 | Yu Siang Teo 翻譯 | 李鑫然 校對(duì) | 王沁雪

譯者微信號(hào)：

【職場(chǎng)經(jīng)驗(yàn)之看完轉(zhuǎn)系列！】

想成為總監(jiān)？來(lái)看看這個(gè)！
《優(yōu)設(shè)重磅首發(fā)！聊聊從設(shè)計(jì)師到總監(jiān)的晉級(jí)路線》

牛魔王的重磅之作！面試到簡(jiǎn)歷全部搞定！
《優(yōu)設(shè)重磅首發(fā)！全方位揭開簡(jiǎn)歷和面試話術(shù)的秘密》

成為職場(chǎng)大牛的11種必備能力！
《設(shè)計(jì)師進(jìn)階教程！成為優(yōu)秀設(shè)計(jì)師必備的11種職場(chǎng)能力》

原文地址：mp.weixin.qq

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國(guó)內(nèi)人氣最高的網(wǎng)頁(yè)設(shè)計(jì)師學(xué)習(xí)平臺(tái)，專注分享網(wǎng)頁(yè)設(shè)計(jì)、無(wú)線端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書：史上最全的設(shè)計(jì)師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量112萬(wàn)的人氣微博@優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁(yè)設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com