扁平化設(shè)計(jì)在網(wǎng)頁上應(yīng)用的優(yōu)勢

摘要：隨著時代的發(fā)展，扁平化設(shè)計(jì)作為網(wǎng)頁設(shè)計(jì)的一種界面風(fēng)格，只需要有良好配色、布局和字體，而不需要考慮多余的陰影、高光、漸變等等。作為2013年顯著的流行趨勢，正在逐漸蔓延到設(shè)計(jì)的各個方向。它簡潔明了的設(shè)計(jì)風(fēng)格也得到了越來越多的設(shè)計(jì)師的青睞。

關(guān)鍵詞：界面元素設(shè)計(jì)；色彩；布局；字體

隨著時代的發(fā)展，網(wǎng)絡(luò)已經(jīng)逐漸深入在人們生活的各個方面，人們通過網(wǎng)站進(jìn)行購物、瀏覽等等。網(wǎng)頁作為構(gòu)成網(wǎng)站的基本元素，是企業(yè)向用戶提供信息，展示商品的平臺，如同其他設(shè)計(jì)一樣，必須符合一定的設(shè)計(jì)原則。扁平化設(shè)計(jì)作為網(wǎng)頁設(shè)計(jì)的一種界面風(fēng)格，它能給人帶來舒適簡單的操作體驗(yàn)以及完美互動性的享受，作為2013年顯著的流行趨勢，正在逐漸蔓延到設(shè)計(jì)的各個方向。它簡潔明了的設(shè)計(jì)風(fēng)格也得到了越來越多的設(shè)計(jì)師的青睞。

1 扁平化設(shè)計(jì)

扁平化設(shè)計(jì)從理論上來講，就是在設(shè)計(jì)中不使用漸變、陰影、紋理、高光等擬真的視覺效果，拋棄所有的修飾元素，以極簡主義方式表達(dá)主題。使用一些簡單的純色塊，以達(dá)到一種看上去更“扁”更“平”的界面。所以扁平化設(shè)計(jì)的原則就是：單純色塊，沒有陰影，利用顏色去鼓勵用戶進(jìn)行交互。扁平風(fēng)格的優(yōu)勢在于它可以更加簡單直接的將使用者想要的信息展示出來，從而減少認(rèn)知障礙的產(chǎn)生。

2 扁平化設(shè)計(jì)在網(wǎng)頁上的具體應(yīng)用中的優(yōu)勢

（1）界面元素設(shè)計(jì)。好的界面設(shè)計(jì)不僅能突出網(wǎng)頁的個性，而且能讓瀏覽者的操作變得舒適、簡單。界面元素的設(shè)計(jì)有助于增加扁平化設(shè)計(jì)的強(qiáng)度，提升界面元素的表現(xiàn)性、可見性和清晰性。在擬物化設(shè)計(jì)里，設(shè)計(jì)師喜歡模仿現(xiàn)實(shí)生活中真實(shí)物品的顏色、形狀等，例如：在設(shè)計(jì)頁面時設(shè)計(jì)師會為界面當(dāng)中的按鈕添加漸變和陰影效果以符合現(xiàn)實(shí)中真實(shí)按鈕的視覺特征，讓瀏覽者在使用時產(chǎn)生親切的感覺。然而，這樣的設(shè)計(jì)給瀏覽者帶來的卻是一種不符預(yù)期的體驗(yàn)，這些看上去真實(shí)的按鈕卻不能產(chǎn)生真實(shí)的觸摸感受。扁平化設(shè)計(jì)使用的是正方形、長方形或者多邊形等這樣的基本形狀，這些二維圖形弱化了視覺上的復(fù)雜性，讓瀏覽者不會過多的關(guān)注圖形，而是強(qiáng)化了要表達(dá)的內(nèi)容和信息，更加容易識別。當(dāng)然，設(shè)計(jì)師也要了解每個元素所代表的含義與作用，并且應(yīng)使用不同的形式來加以區(qū)別。扁平化設(shè)計(jì)強(qiáng)調(diào)的是信息本身，而不是繁復(fù)多余的界面元素。瀏覽者在瀏覽網(wǎng)頁時，主要是獲取信息，界面元素的主要功能是提示瀏覽者迅速找到他們所需要的信息。扁平化設(shè)計(jì)由于界面元素的簡單且易于查找，所以更適合那些近視者和弱視者，能幫助到這些有特殊需求的人群。

（2）色彩。扁平化設(shè)計(jì)頁面中，因?yàn)樽非髽O簡主義，所以沒有其他多余的裝飾。因此，設(shè)計(jì)者在設(shè)計(jì)時需要更加注意色彩的搭配，這樣將會收到更好的視覺效果。從色塊、圖形、導(dǎo)航到版面，色彩是一個關(guān)鍵的組成元素，好的色彩搭配會給人帶來愉悅的心情和完美的視覺享受。總結(jié)扁平設(shè)計(jì)的色彩搭配大致分為兩種：

同類色搭配：同類色搭配，最常用的是把同一種顏色的黑、白、灰三種色調(diào)結(jié)合在一起，形成層次上的對比。在扁平化設(shè)計(jì)中，單色的使用不僅能分清層次感，同時也能把握住整體感。如圖1，網(wǎng)頁的背景使用了一張深灰的圖片，界面元素則使用了紅色系的同類色搭配。在導(dǎo)航部分運(yùn)用了扁平化設(shè)計(jì)的樣式，使用了與標(biāo)志相同顏色的色塊來展示。設(shè)計(jì)者通過調(diào)整色彩的飽和度以及透明度使單色產(chǎn)生一定的變化，使頁面不單調(diào)，反看起來整體感十足，同時增加了信息的辨識度，讓人一目了然。對比色：對比色搭配的使用可以使頁面看起來極富活力又有豐富的色彩變幻，視覺效果醒目。在使用對比色進(jìn)行搭配時，設(shè)計(jì)師要注意到在設(shè)計(jì)時應(yīng)當(dāng)先了解網(wǎng)頁的主題，選用合適的顏色進(jìn)行搭配。如圖2，是一家房地產(chǎn)中心的首頁，導(dǎo)航部分的扁平化設(shè)計(jì)運(yùn)用了多種顏色來進(jìn)行搭配。導(dǎo)航中的藍(lán)色，綠色有藍(lán)天，草地的寓意，間接烘托出小區(qū)優(yōu)美的環(huán)境。黃色與藍(lán)紫色是對比色，對比色會帶給人一種色彩撞擊的感覺，增強(qiáng)了畫面的對比感，增添活力，使人眼前一亮。整體來看，網(wǎng)頁的背景色又與導(dǎo)航的顏色相呼應(yīng)，這樣不僅不會覺得顏色雜亂，反而有很好的集中視線的感覺。

（3）布局。扁平化設(shè)計(jì)基本使用的是網(wǎng)格布局，網(wǎng)格布局能使網(wǎng)頁更便于使用，減少使用過程中的反復(fù)性，提升識別性。扁平化設(shè)計(jì)中刪除了網(wǎng)格布局中多余的線條和邊框，使用單純的二維色塊對頁面進(jìn)行大膽的分割，色塊上使用大小不一的文字來標(biāo)示內(nèi)容中心或是使用多標(biāo)題圖片，都可容納更多的內(nèi)容，使每個圖標(biāo)都有屬于自己的獨(dú)特風(fēng)格，同時內(nèi)容從一個邊緣流向另一個邊緣，在一個軸上進(jìn)行活動，增加了穩(wěn)定感。在頁面上，扁平化設(shè)計(jì)還會有大部分的留白，很多交互式設(shè)計(jì)都會在網(wǎng)頁中盡可能的添加內(nèi)容，這樣反而讓使用者不能準(zhǔn)確的分辨出網(wǎng)頁要傳達(dá)的主題是什么，更多的留白空間才能使瀏覽者關(guān)注到主要信息。

（4）字體。設(shè)計(jì)師通過文字來向?yàn)g覽者傳遞信息，提供導(dǎo)航服務(wù)。而字體的選擇不僅要符合扁平化設(shè)計(jì)的簡約風(fēng)格，同時還要符合整個頁面主題的設(shè)計(jì)風(fēng)格。一般扁平化風(fēng)格的頁面會使用無襯線的簡單字體，并且大多只使用一種字體，再通過對字體的放大、縮小進(jìn)行排版，文字的不同排版同樣也可以帶來不同的視覺體驗(yàn)，例如字號較大，或是粗體，都能幫助瀏覽者輕易地識別元素的指定功能，這樣在內(nèi)容上創(chuàng)造了一定的層次感。同時使用對比色的字體，可以提升內(nèi)容的易讀性和可讀性。

3 總結(jié)

網(wǎng)站界面風(fēng)格似乎都在遵循著同一種設(shè)計(jì)審美，即：用擬物化的設(shè)計(jì)效果來突出界面元素的質(zhì)感。隨手打開一個網(wǎng)頁，我們就可以看到這樣的設(shè)計(jì)，不免會產(chǎn)生視覺疲勞。而扁平化設(shè)計(jì)既簡單又明了，設(shè)計(jì)起來也非常方便。扁平化設(shè)計(jì)風(fēng)格的逐漸興起可以看作是對網(wǎng)頁界面多年以來對過度設(shè)計(jì)的一次沖擊。設(shè)計(jì)的本質(zhì)是形式服務(wù)于功能，作為設(shè)計(jì)師，我們不僅要考慮視覺呈現(xiàn)方面的問題，而最重要的是應(yīng)當(dāng)關(guān)注到產(chǎn)品的功能上。

參考文獻(xiàn)：

[1] 邁耶（美）.CSS權(quán)威指南[M].3版.中國電力出版社，2007.

[2] 黃在賢（韓）.設(shè)計(jì)師談精彩網(wǎng)頁設(shè)計(jì)[M].宏聚宸翻譯中心，譯.電子工業(yè)出版社，2004.

[3] Dave Shea.Molly E.Holzschiag（美）.CSS禪意花園[M].陳黎夫，山崺颋，譯.人民郵電出版社，2007.

[4] Sun I 視覺設(shè)計(jì).字體設(shè)計(jì)法則[M].電子工業(yè)出版社，2012.

[5]伊達(dá)千代，內(nèi)藤孝彥（日）.版面設(shè)計(jì)的原理：版面設(shè)計(jì)所必需的知識和技巧[M].周淳，譯.中信出版社，2011.