2014-6-10 藍(lán)藍(lán)設(shè)計(jì)的小編
轉(zhuǎn)載藍(lán)藍(lán)設(shè)計(jì)( tweetduck.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)格?!?/p>
在設(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)我們所熟悉的事物。”
由Justin Pervorse設(shè)計(jì)
下面再來(lái)看扁平化設(shè)計(jì)的案例,上圖通過(guò)簡(jiǎn)單的線條與清閑的色彩簡(jiǎn)化了保險(xiǎn)箱的物理外觀。顯然,這一設(shè)計(jì)已經(jīng)相當(dāng)“扁平化”,但其中仍然采用了諸多擬物化元素——因?yàn)槠渌悸啡匀皇窍M層脩粢煌浔kU(xiǎn)箱身份。圖中特征鮮明的保險(xiǎ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)單與清晰特性。”
這只是一般性的解釋,不過(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中,蘋果公司既嘗試了將擬物與扁平加以結(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í)世界相符的外觀與使用方式。人們往往喜歡把擬物化與蘋果聯(lián)系起來(lái)。沒(méi)錯(cuò),iCal與某些圖標(biāo)設(shè)計(jì)充分證明了蘋果對(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)??梢哉f(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)真思考哪種路線與自己的思路最為吻合。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://tweetduck.com