轉(zhuǎn)載藍(lán)藍(lán)設(shè)計(jì)(   m.sillybuy.com  )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供有效的   BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、  ipad界面設(shè)計(jì)   、  包裝設(shè)計(jì) 、  圖標(biāo)定制 、  用戶體驗(yàn) 、交互設(shè)計(jì)、   網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

來(lái)源：http://www.cssn.cn/ysx/ysx_sjx/201310/t20131026_611976.shtmll

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中，   請(qǐng)點(diǎn)這里

由扁平化與擬物化兩種風(fēng)格所引發(fā)的設(shè)計(jì)之爭(zhēng)正愈演愈烈，而這一趨勢(shì)隨著iOS 7測(cè)試版的發(fā)布而進(jìn)入白熱化。盡管技術(shù)圈內(nèi)早已吵得不可開(kāi)交，但很多朋友可能還沒(méi)聽(tīng)說(shuō)過(guò)這兩個(gè)名詞、或者對(duì)其背后的含義不甚明了。今天，我們將共同探討扁平化設(shè)計(jì)的關(guān)鍵特點(diǎn)，了解這種設(shè)計(jì)理念與擬物化的區(qū)別所在。

以Dieter Rams為代表的一些著名設(shè)計(jì)師在設(shè)計(jì)原則中明確指出，扁平化設(shè)計(jì)（或者被稱為‘極簡(jiǎn)設(shè)計(jì)’）是實(shí)現(xiàn)可持續(xù)設(shè)計(jì)的最佳方式。

設(shè)計(jì)風(fēng)格通常被視為一種暫時(shí)性趨勢(shì)。每當(dāng)有新風(fēng)格出現(xiàn)，人們?cè)谛蕾p之余并不能肯定其是否真能獲得成功或者說(shuō)長(zhǎng)久存在。不過(guò)一方面更多業(yè)內(nèi)設(shè)計(jì)師開(kāi)始對(duì)某種特定設(shè)計(jì)風(fēng)格的迎合，卻也有不少獨(dú)特且實(shí)用的風(fēng)格陸續(xù)與大家見(jiàn)面。也就是說(shuō)，認(rèn)為扁平化設(shè)計(jì)屬于新生事物的觀點(diǎn)其實(shí)是種誤解。事實(shí)上，扁平化設(shè)計(jì)與其設(shè)計(jì)師早已存在，惟一稱得上新鮮的是近年來(lái)行業(yè)的宣傳攻勢(shì)以及對(duì)這種風(fēng)格的持續(xù)推崇。

iOS7倒向扁平化設(shè)計(jì)，極大的影響了設(shè)計(jì)之爭(zhēng)的戰(zhàn)局，現(xiàn)在扁平化已經(jīng)是設(shè)計(jì)趨勢(shì)，甚至連Android也因此受益，不過(guò)并不是說(shuō)擬物化就不好，在某些場(chǎng)景它仍有強(qiáng)大的生命力。

扁平化設(shè)計(jì)正當(dāng)其時(shí)！

谷歌推崇扁平化設(shè)計(jì)

大家都知道，谷歌公司一直以堅(jiān)持優(yōu)秀的設(shè)計(jì)方針而聲名顯著。他們的目的在于提供一套在視覺(jué)上存在承接性的風(fēng)格，即堅(jiān)持簡(jiǎn)單與現(xiàn)代路線。谷歌完全可以不無(wú)自豪地宣稱，其化繁為簡(jiǎn)的設(shè)計(jì)風(fēng)格、專注于色彩與幾何圖形的指導(dǎo)思想已經(jīng)相當(dāng)成熟。大家不妨點(diǎn)擊此處查看其在Behance網(wǎng)站上發(fā)布的視覺(jué)設(shè)計(jì)指南，相信會(huì)有不小的收獲。

微軟擁抱扁平化設(shè)計(jì)

Windows Mobile 6.5：微軟的早期扁平化嘗試

早在2010年，微軟公司就發(fā)現(xiàn)自己的傳統(tǒng)設(shè)計(jì)方案無(wú)法與用戶的體驗(yàn)與需求保持一致。除了關(guān)注產(chǎn)品功能之外，用戶使用體驗(yàn)也是不可忽視的一大重點(diǎn)，因此微軟決定重新思考自身在產(chǎn)品設(shè)計(jì)上的審美取向。

Windows Phone 8

這促使微軟采用了全新的設(shè)計(jì)理念，從而改變其產(chǎn)品的視覺(jué)效果與操作方式?；蛘哂梦④涀约鹤钕矏?ài)的表達(dá)——“事半功倍”。2012年底，微軟正式推出Windows 8，其顛覆性的外觀設(shè)計(jì)正是微軟對(duì)視覺(jué)設(shè)計(jì)思路的巨大變革，同時(shí)也成為新一輪設(shè)計(jì)戰(zhàn)略中的里程碑。

扁平化與擬物化的定義

“現(xiàn)實(shí)風(fēng)格的設(shè)計(jì)成果必然屬于擬物化，但擬物化設(shè)計(jì)卻不一定屬于現(xiàn)實(shí)風(fēng)格。”

在設(shè)計(jì)領(lǐng)域，擬物化意味著嘗試再現(xiàn)那些用戶所熟知的事物。遺憾的是這個(gè)詞往往被從業(yè)者們誤讀與誤用。設(shè)計(jì)師們往往認(rèn)為擬物化意味著直接從現(xiàn)實(shí)世界中復(fù)制圖像。這里我要強(qiáng)調(diào)一點(diǎn)：擬物化設(shè)計(jì)并不一定要與參考對(duì)象保持高度一致！換言之，現(xiàn)實(shí)風(fēng)格的設(shè)計(jì)成果必然屬于擬物化，但擬物化設(shè)計(jì)卻不一定屬于現(xiàn)實(shí)風(fēng)格。更進(jìn)一步來(lái)說(shuō)，扁平化設(shè)計(jì)也可以符合擬物化標(biāo)準(zhǔn)（但并非必須）。

下面我們就看圖說(shuō)話，讓大家更加明確這一概念區(qū)分。

由Alex Volkov設(shè)計(jì)

大家一定已經(jīng)注意到，上圖以非常真實(shí)的設(shè)計(jì)再現(xiàn)了保險(xiǎn)箱圖像。這幅圖可謂擬物化設(shè)計(jì)的絕佳范例，因?yàn)樗噲D向我們展示每個(gè)人所了解的事物（真實(shí)的物理對(duì)象，也就是保險(xiǎn)箱）。另外，它也可以作為現(xiàn)實(shí)風(fēng)格的參照實(shí)例，因?yàn)槠湓O(shè)計(jì)包含了縱深、燈光、陰影、紋理等一切需要考慮的真實(shí)因素。

“擬物化試圖重現(xiàn)我們所熟悉的事物?！?/p>

由Justin Pervorse設(shè)計(jì)

下面再來(lái)看扁平化設(shè)計(jì)的案例，上圖通過(guò)簡(jiǎn)單的線條與清閑的色彩簡(jiǎn)化了保險(xiǎn)箱的物理外觀。顯然，這一設(shè)計(jì)已經(jīng)相當(dāng)“扁平化”，但其中仍然采用了諸多擬物化元素——因?yàn)槠渌悸啡匀皇窍Ｍ層脩粢煌浔ｋU(xiǎn)箱身份。圖中特征鮮明的保險(xiǎn)門(mén)就是最好的證明。

由Andrew Hesham設(shè)計(jì)

現(xiàn)在，我們?cè)賮?lái)看另一套出色的扁平化設(shè)計(jì)方案。雖然上圖沒(méi)有采用任何擬物化設(shè)計(jì)元素，但我們?nèi)匀豢梢愿惺艿綀D標(biāo)中盾牌與鑰匙孔的結(jié)合同安全概念之間的密切聯(lián)系。也就是說(shuō)，它并沒(méi)有執(zhí)著于表現(xiàn)真正的保險(xiǎn)箱外觀或者閉鎖裝置，而嘗試以更為婉轉(zhuǎn)的隱喻幫助用戶了解其作用?？偨Y(jié)起來(lái)：扁平化設(shè)計(jì)利用簡(jiǎn)單元素、幾何圖形與鮮艷色彩的搭配表達(dá)信息，強(qiáng)調(diào)方案的簡(jiǎn)單與清晰特性。

“扁平化設(shè)計(jì)利用簡(jiǎn)單元素、幾何圖形與鮮艷色彩的搭配表達(dá)信息，強(qiáng)調(diào)方案的簡(jiǎn)單與清晰特性?！?/p>

這只是一般性的解釋，不過(guò)確實(shí)有很多從業(yè)人員在談到“擬物化設(shè)計(jì)”時(shí)、其真正要表達(dá)的其實(shí)是“現(xiàn)實(shí)風(fēng)格設(shè)計(jì)”，也就是第一幅圖中的例子。而在扁平化設(shè)計(jì)方面，我們指的是更加簡(jiǎn)約的二維圖形方案。有時(shí)候我們也會(huì)使用“擬物扁平設(shè)計(jì)”這樣的表達(dá)，第二幅圖中的保險(xiǎn)箱就充分體現(xiàn)出二者相結(jié)合所帶來(lái)的出色效果。

在iOS 7中，蘋(píng)果公司既嘗試了將擬物與扁平加以結(jié)合——例如下圖左側(cè)的相機(jī)圖標(biāo)，也嘗試了純扁平化設(shè)計(jì)——例如下圖右側(cè)的照片圖標(biāo)。另外，新系統(tǒng)中的游戲中心圖標(biāo)也屬于純扁平化方案。

iOS 7圖標(biāo)

擬物化設(shè)計(jì)概述

一般情況下，擬物化應(yīng)用程序設(shè)計(jì)思路希望軟件能擁有與真實(shí)世界相符的外觀與使用方式。人們往往喜歡把擬物化與蘋(píng)果聯(lián)系起來(lái)。沒(méi)錯(cuò)，iCal與某些圖標(biāo)設(shè)計(jì)充分證明了蘋(píng)果對(duì)擬物設(shè)計(jì)的出色把握（存在于iOS以前版本中）。

擬物化設(shè)計(jì)風(fēng)格通常來(lái)說(shuō)極具挑戰(zhàn)，因?yàn)楝F(xiàn)實(shí)生活中的事物很難在二維環(huán)境下被完美重現(xiàn)。另外，設(shè)計(jì)師們往往會(huì)把現(xiàn)實(shí)元素融入擬物設(shè)計(jì)中以進(jìn)一步改善視覺(jué)效果。設(shè)計(jì)師面臨的最大難題就是要讓成品看起來(lái)“不錯(cuò)”。一旦決定創(chuàng)建現(xiàn)實(shí)風(fēng)格方案，用戶將很容易從設(shè)計(jì)中發(fā)現(xiàn)失誤。我們不得不投入大量時(shí)間與精力用于為圖標(biāo)或界面設(shè)計(jì)理想的紋理、陰影、縱深以及色彩。不過(guò)擬物化設(shè)計(jì)對(duì)于大齡用戶群體非常友善，這些對(duì)數(shù)字化世界以及數(shù)碼產(chǎn)品并不熟悉的使用者能從擬物風(fēng)格中理清使用方法，并通過(guò)熟悉的外觀與使用感受幫助他們消除抗拒心理。不過(guò)話說(shuō)回來(lái)，如今幾乎每個(gè)人都已經(jīng)適應(yīng)了數(shù)字化表達(dá)方式，而且界面之下掩藏的也往往是同一種數(shù)字化操作模式。

扁平化設(shè)計(jì)概述

扁平化設(shè)計(jì)強(qiáng)調(diào)的是易用性與簡(jiǎn)潔性。通常情況下，扁平化風(fēng)格借助簡(jiǎn)約的線條與鮮艷的色彩來(lái)實(shí)現(xiàn)信息傳遞。每當(dāng)聽(tīng)到設(shè)計(jì)師討論扁平化設(shè)計(jì)這個(gè)話題，“用戶體驗(yàn)”這個(gè)詞往往會(huì)在他們口中多次出現(xiàn)。可以說(shuō)大多數(shù)人都認(rèn)為扁平化設(shè)計(jì)能帶來(lái)比擬物化設(shè)計(jì)更好的易用性與使用體驗(yàn)。

以Dieter Rams為代表的一些著名設(shè)計(jì)師在設(shè)計(jì)原則中明確指出，扁平化設(shè)計(jì)（或者被稱為‘極簡(jiǎn)設(shè)計(jì)’）是實(shí)現(xiàn)可持續(xù)設(shè)計(jì)的最佳方式。

Hype Machine扁平化設(shè)計(jì)截圖

爭(zhēng)斗仍在繼續(xù)？

“設(shè)計(jì)真理：選擇一種個(gè)人喜愛(ài)的風(fēng)格，并努力拿出最完美的方案?！?/p>

一般來(lái)說(shuō)，討論扁平化與擬物化設(shè)計(jì)的文章總結(jié)都會(huì)變成爭(zhēng)辯一場(chǎng)兩種風(fēng)格孰優(yōu)孰劣的對(duì)抗。雖然二者各有自己的專長(zhǎng)與局限，但有一條真理足以闡明一切：選擇一種個(gè)人喜愛(ài)的風(fēng)格，并努力拿出最完美的方案。扁平化設(shè)計(jì)看起來(lái)比擬物化設(shè)計(jì)簡(jiǎn)單一些，但拿出優(yōu)秀的扁平設(shè)計(jì)方案的難度與擬物方面其實(shí)旗鼓相當(dāng)。設(shè)計(jì)出平庸的扁平風(fēng)格成果并不費(fèi)力，但要讓成果廣為稱道則難上加難。簡(jiǎn)潔的效果不易達(dá)成，精雕細(xì)琢也耗時(shí)甚長(zhǎng)。

總結(jié)

即使對(duì)普通用戶來(lái)說(shuō)，扁平與擬物之間的區(qū)別也取決于個(gè)人喜好。有些人喜歡擬物風(fēng)格、另一些人則喜歡扁平風(fēng)格，更有不少用戶對(duì)二者都樂(lè)于接受。作為設(shè)計(jì)師，我強(qiáng)烈建議同行們能百花齊放、拿出豐富多彩的設(shè)計(jì)風(fēng)格來(lái)。相對(duì)于揪住沖突不放，我們更應(yīng)該接納不同方案間的分歧、使其真正成為提升應(yīng)用程序使用感受的助力。良好的設(shè)計(jì)有助于產(chǎn)品在市場(chǎng)中脫穎而出，因此請(qǐng)認(rèn)真思考哪種路線與自己的思路最為吻合。