2014-5-23 藍(lán)藍(lán)設(shè)計(jì)的小編
轉(zhuǎn)載藍(lán)藍(lán)設(shè)計(jì)( m.820esy.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(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ù)
來源:http://www.csdn.net/article/2012-08-22/2809011
究竟什么是扁平化設(shè)計(jì)
對于沒接觸過的人來說,“扁平化設(shè)計(jì)”是一種設(shè)計(jì)風(fēng)格術(shù)語,它拋棄任何能使得作品突顯3D效果的特性。通俗地說,設(shè)計(jì)中不使用透視、紋理、陰影等效果。
設(shè)計(jì)師們?nèi)缃袼坪跽馄交L(fēng)格傾斜,因?yàn)檫@種風(fēng)格干凈利索,現(xiàn)代氣息濃郁,而且能讓設(shè)計(jì)師專注最重要的內(nèi)容和信息要素。這樣設(shè)計(jì)出來的作品不容易過時(shí),而且看起來簡潔、。
談到扁平化設(shè)計(jì),我們不得不提及它的對立面:復(fù)合設(shè)計(jì)(Rich design)。這種設(shè)計(jì)方法使用盡可能多的效果元素,如反射、投影和紋理變化等等。它帶給用戶一種觸覺感知,在使用應(yīng)用或?yàn)g覽網(wǎng)頁時(shí)也很實(shí)用。
值得注意的是,復(fù)合設(shè)計(jì)不是擬物化設(shè)計(jì)(Skeuomorphism)。擬物化設(shè)計(jì)是使作品更接近實(shí)際的物體,故意讓他們看起來有種很熟悉的感覺。
扁平化設(shè)計(jì)源自何處
我們在網(wǎng)站或數(shù)字世界里看到的設(shè)計(jì)元素大多源自印刷出版物和美學(xué)先驅(qū)。我們現(xiàn)在很難界定扁平化設(shè)計(jì)的起源時(shí)間及地點(diǎn),不過有幾個(gè)藝術(shù)設(shè)計(jì)時(shí)期是扁平化設(shè)計(jì)靈感的來源。
瑞士風(fēng)格(Swiss Style)
在扁平化設(shè)計(jì)的發(fā)展歷程中,瑞士風(fēng)格(也叫國際主義平面設(shè)計(jì)風(fēng)格)值得一提。瑞士風(fēng)格源自瑞士,在20世紀(jì)四五十年代發(fā)展為主流。
瑞士風(fēng)格注重網(wǎng)格以及無襯線字體的使用,層次分明。在那個(gè)年代,瑞士風(fēng)格通常是一張很大的圖片,配上簡潔、極小的字體。
由于印刷字體樣式是瑞士風(fēng)格的重要元素,廣受喜愛的Helvetica字體于1957年應(yīng)運(yùn)而生,并得到廣泛使用。
就像扁平化風(fēng)格在流行之前沉寂過一段時(shí)間一樣,瑞士風(fēng)格設(shè)計(jì)最早可追溯到20世紀(jì)20年代的德國。但瑞士人真正使得它發(fā)揚(yáng)光大。
極簡設(shè)計(jì)(Minimalist Design)
另一個(gè)對扁平化設(shè)計(jì)有深遠(yuǎn)影響的是極簡設(shè)計(jì)。“極簡”這個(gè)詞現(xiàn)在經(jīng)常和扁平化設(shè)計(jì)捆綁出現(xiàn),但極簡的歷史更長,而且涉及建筑、視覺藝術(shù)多個(gè)領(lǐng)域,遠(yuǎn)早于網(wǎng)絡(luò)出現(xiàn)之前。
雖然極簡設(shè)計(jì)的歷史很長、覆蓋的媒介很多,但它真正產(chǎn)生藝術(shù)魅力的地方還是視覺藝術(shù)表達(dá)領(lǐng)域。所謂極簡就是移除事物多種元素,只留下必要的成分。幾何圖形、少數(shù)的元素、明亮的色彩和干凈的線條主導(dǎo)多數(shù)極簡風(fēng)格設(shè)計(jì)。
可以說瑞士風(fēng)格和極簡設(shè)計(jì)共同成就了扁平化設(shè)計(jì)。
扁平化設(shè)計(jì)在數(shù)字世界里的興起
歷史不斷重演,這一點(diǎn)也適用于當(dāng)前的扁平化設(shè)計(jì)趨勢。由上可見,扁平化設(shè)計(jì)可追溯到20世紀(jì)20年代,并一直影響到現(xiàn)在。雖然很多設(shè)計(jì)師在設(shè)計(jì)網(wǎng)站和其他藝術(shù)品時(shí)都青睞扁平化設(shè)計(jì),但真正將它推向主流的還是微軟和蘋果等科技巨頭。
微軟和它的Metro Design
2006年末,微軟為了和蘋果的iPod播放器競爭,推出了Zune音樂播放器。從那時(shí)起,微軟也提出一種名為Metro的設(shè)計(jì)風(fēng)格。這種風(fēng)格突出字大號的圖片及小寫字母菜單。Zune的桌面軟件也配合Zune采用相同的設(shè)計(jì),創(chuàng)造一種完整的用戶體驗(yàn)。
Zune系統(tǒng)的設(shè)計(jì)風(fēng)格跟當(dāng)時(shí)微軟傳統(tǒng)的Windows風(fēng)格有很大的不同。當(dāng)2010年推出Windows Phone 7系統(tǒng)時(shí),微軟利用從Zune設(shè)計(jì)中積累的經(jīng)驗(yàn),改良了新版操作系統(tǒng)Windows Phone 7的設(shè)計(jì),大號、明亮、網(wǎng)格形狀、簡潔的自已和扁平的圖標(biāo)主宰了全部風(fēng)格,由此Metro風(fēng)格流傳開來。它是如此的流行,以至于微軟還把它應(yīng)用在了之后的Windows 8,更別提其他的軟件、當(dāng)前的網(wǎng)站及其他產(chǎn)品(如:Xbox360)等等。
蘋果和它的擬物化設(shè)計(jì)
當(dāng)微軟研究它的扁平化風(fēng)格設(shè)計(jì)時(shí),蘋果也不甘示弱。它不斷暗示將放棄擬物化的使用。2013年iOS7發(fā)布后,蘋果徹底放棄擬物化設(shè)計(jì)。
由于蘋果用戶人數(shù)較多,iOS7的發(fā)布使得扁平化設(shè)計(jì)一夜爆紅。不得不承認(rèn),蘋果的設(shè)計(jì)美學(xué)是大部分網(wǎng)站和應(yīng)用程序的設(shè)計(jì)風(fēng)向標(biāo)。很多設(shè)計(jì)師認(rèn)為蘋果的設(shè)計(jì)更加現(xiàn)代、更吸引人。因此,當(dāng)蘋果選擇扁平化的風(fēng)格時(shí),擬物化設(shè)計(jì)幾乎瞬間過時(shí)。使用這種風(fēng)格設(shè)計(jì)的網(wǎng)站和開發(fā)者很快發(fā)現(xiàn)他們需要重新設(shè)計(jì)。
這一點(diǎn)從iOS7中更新的應(yīng)用中就可以看出來,他們都追隨了扁平化的風(fēng)格,也逐漸被用戶所熟悉和接受。
響應(yīng)性設(shè)計(jì)(Responsive Design)
近幾年扁平化設(shè)計(jì)之所以如此流行,和響應(yīng)性設(shè)計(jì)的發(fā)展密不可分。隨著越來越多的設(shè)備接入網(wǎng)站,加之各種設(shè)備屏幕大小、瀏覽器的限制,設(shè)計(jì)師們發(fā)現(xiàn),當(dāng)他們的設(shè)計(jì)風(fēng)格過分依賴紋理、投影時(shí),如果畫面收縮為更小的尺寸,效果不是很理想。
扁平化設(shè)計(jì)能讓網(wǎng)站設(shè)計(jì)更加。由于沒有太多的設(shè)計(jì)元素,網(wǎng)站加載速度更快、收縮彈性更強(qiáng)。
另外,設(shè)備屏幕的分辨率越來越高,所以需要顯示更加簡潔明快的圖案。顯示簡單的圖形和字體總比為不同的屏幕設(shè)計(jì)不用的圖案方便得多。
扁平化設(shè)計(jì)的未來
我們都沒有水晶球,無法準(zhǔn)確預(yù)知扁平化設(shè)計(jì)最終走向什么軌跡,又將被什么樣的設(shè)計(jì)所取代。
但是扁平化設(shè)計(jì)在數(shù)字世界的確有幾個(gè)顯而易見的缺點(diǎn)(比如去除了必要的線索要素,你無法分辨一個(gè)按鈕是否被點(diǎn)擊)。隨著設(shè)計(jì)師們不斷的實(shí)驗(yàn)、測試和學(xué)習(xí),扁平化設(shè)計(jì)最終將演變成一種新的風(fēng)格。
我們目前可以發(fā)現(xiàn)的線索之一就是當(dāng)前谷歌(微博)的設(shè)計(jì)。雖然谷歌的設(shè)計(jì)也有扁平化設(shè)計(jì)的痕跡,但它并未移除投影等元素,而且它依然以巧妙的方、運(yùn)用紋理。這家公司似乎很好地平衡了扁平化設(shè)計(jì)與復(fù)合設(shè)計(jì)的優(yōu)勢。
總的來說,扁平化設(shè)計(jì)正得到快速發(fā)展。它只是印刷出版美學(xué)在當(dāng)今數(shù)字世界的一次重現(xiàn)。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://m.820esy.cn