現(xiàn)如今以手機(jī)為主的信息技術(shù)和網(wǎng)絡(luò)傳播飛速發(fā)展，設(shè)計(jì)風(fēng)格是隨著社會(huì)的經(jīng)濟(jì)發(fā)展而變化，文化發(fā)展也注定成為設(shè)計(jì)風(fēng)格變化的主要因素，而網(wǎng)頁(yè)設(shè)計(jì)也越來(lái)越向數(shù)字藝術(shù)為主的扁平化風(fēng)格發(fā)展，對(duì)當(dāng)下的文化構(gòu)造和經(jīng)濟(jì)發(fā)展有著深遠(yuǎn)影響。在扁平化風(fēng)格的網(wǎng)頁(yè)界面設(shè)計(jì)中，設(shè)計(jì)師以提高用戶體驗(yàn)為切入點(diǎn)，通過(guò)各種簡(jiǎn)約的元素，使扁平化風(fēng)格在網(wǎng)頁(yè)界面設(shè)計(jì)中更加舒適、實(shí)用。

　　1 扁平化風(fēng)格的基本概念

　　其實(shí)，扁平化設(shè)計(jì)(flag design)是在擬物化設(shè)計(jì)基礎(chǔ)之上發(fā)展來(lái)的新潮流風(fēng)格，扁平化風(fēng)格簡(jiǎn)化了擬物化設(shè)計(jì)，改變高光陰影、漸變等傳統(tǒng)視野中的流行元素，將抽象、簡(jiǎn)化、符號(hào)化的元素整合，去掉那些繁瑣的細(xì)節(jié)和明暗處理，使設(shè)計(jì)風(fēng)格更加簡(jiǎn)約更加純粹，視覺(jué)上給人舒適、整潔的體驗(yàn)。扁平化風(fēng)格經(jīng)歷了過(guò)去幾年的快速發(fā)展，不僅僅是在數(shù)字領(lǐng)域深受喜愛(ài)，漸漸地在平面設(shè)計(jì)領(lǐng)域被廣泛使用，成了近幾年的重要設(shè)計(jì)趨勢(shì)之一。但扁平化并不是單單的將物品或板塊徹底抽象和變“扁”，而是將運(yùn)用的元素進(jìn)行提煉，多余的進(jìn)行去除，將特征留下，將裝飾去除，如中國(guó)傳統(tǒng)文化藝術(shù)中的皮影。

　　2 扁平化風(fēng)格的興起

　　新時(shí)代以來(lái)科學(xué)技術(shù)不斷發(fā)展，手機(jī)成為綜合性極強(qiáng)的生活智能工具，手機(jī)的小巧靈活的特點(diǎn)使原本流行多年的擬物化風(fēng)格受到打擊，擬物化風(fēng)格無(wú)法在手機(jī)上很好地發(fā)揮其立體、陰影等功能，而時(shí)代發(fā)展飛快，人們的生活壓力也越來(lái)越大，大眾也越來(lái)越偏向手機(jī)界面和網(wǎng)頁(yè)界面的簡(jiǎn)潔和舒適感，對(duì)簡(jiǎn)約的“綠色設(shè)計(jì)”在視覺(jué)上給人休閑的感受，對(duì)于設(shè)計(jì)而言，不變才是病態(tài)，改變和創(chuàng)新才是設(shè)計(jì)發(fā)展的常態(tài)。

　　3 扁平化風(fēng)格在網(wǎng)頁(yè)設(shè)計(jì)中的應(yīng)用

　　3.1 簡(jiǎn)約性圖形 3.1.1 圖片去底法從字面意思上來(lái)看，圖片去底法就是去掉圖片的底(背景)，這種方法可以讓想要呈現(xiàn)的圖片更突出。比如很多高端電子產(chǎn)品的網(wǎng)頁(yè)，用戶在打開(kāi)此商品頁(yè)面時(shí)直觀地看到產(chǎn)品本身超清的圖像，整體網(wǎng)頁(yè)簡(jiǎn)單卻抓住用戶的眼睛，產(chǎn)品本身非常突出，更加吸引用戶注意力。將圖片去底，只運(yùn)用產(chǎn)品本身的圖像呈現(xiàn)，網(wǎng)頁(yè)整體的畫(huà)面空間感被拉強(qiáng)。扁平化的網(wǎng)頁(yè)設(shè)計(jì)中不僅需要使用調(diào)整顏色或圖形形狀等方法改變網(wǎng)頁(yè)的風(fēng)格，圖片在網(wǎng)頁(yè)中也是非常重要的元素，使用圖片去底的方式將圖片與網(wǎng)頁(yè)設(shè)計(jì)的風(fēng)格主體相統(tǒng)一，就是一項(xiàng)優(yōu)秀的網(wǎng)頁(yè)設(shè)計(jì)作品。這種圖片去底的方式，設(shè)計(jì)者需要根據(jù)客戶對(duì)頁(yè)面的需要對(duì)板塊和文字都進(jìn)行處理調(diào)整，使頁(yè)面的具有較好的層次感，使它們有機(jī)排列增強(qiáng)視覺(jué)效果，讓頁(yè)面整體變得和諧和統(tǒng)一。圖片去底這種方式一般運(yùn)用在產(chǎn)品方面的網(wǎng)頁(yè)設(shè)計(jì)中。

　　3.1.2 圖形抽象法扁平化網(wǎng)頁(yè)設(shè)計(jì)中最常見(jiàn)和最典型的就是對(duì)圖形進(jìn)行抽象化，在網(wǎng)頁(yè)設(shè)計(jì)中每個(gè)圖形呈現(xiàn)出的視覺(jué)感受就是扁平的，并不具有高光、陰影元素，沒(méi)有給人帶來(lái)凹凸感或動(dòng)感的圖形。扁平化的網(wǎng)頁(yè)設(shè)計(jì)中，通過(guò)對(duì)圖片或物體的抽象刪減呈現(xiàn)簡(jiǎn)約化的圖形，使網(wǎng)頁(yè)更簡(jiǎn)約、大氣。比如一些網(wǎng)站的網(wǎng)頁(yè)中，將功能圖標(biāo)進(jìn)行設(shè)計(jì)，在正常呈現(xiàn)的狀態(tài)下是一種圖標(biāo)，當(dāng)鼠標(biāo)進(jìn)行點(diǎn)擊圖形時(shí)，又會(huì)轉(zhuǎn)變圖形樣式，利用圖形的變化樣式進(jìn)行區(qū)分，給用戶帶來(lái)不一樣的體驗(yàn)，用戶在對(duì)網(wǎng)頁(yè)進(jìn)行點(diǎn)擊選擇時(shí)可以輕易地區(qū)分出點(diǎn)擊和未點(diǎn)擊狀態(tài)，輔助和引導(dǎo)用戶視覺(jué)的效果，從而做出正確的選擇。方便用戶瀏覽的同時(shí)，帶給用戶良好的視覺(jué)效果。

　　3.2 色彩 3.2.1 視覺(jué)色彩頁(yè)設(shè)計(jì)中的重要元素就是色彩，扁平化網(wǎng)頁(yè)設(shè)計(jì)中的色彩是非常重要的，應(yīng)該做到“總體協(xié)調(diào)，局部對(duì)比”的原則，色彩還決定了作品的風(fēng)格走向。日常中見(jiàn)到的扁平化網(wǎng)頁(yè)設(shè)計(jì)中往往比其他風(fēng)格的網(wǎng)站色彩更加的明亮和炫目。比如像優(yōu)衣庫(kù)的RECIPE，與其他平常的網(wǎng)頁(yè)設(shè)計(jì)來(lái)講，更加吸引顧客的眼球，視覺(jué)上給人明亮的感覺(jué)。而且，扁平化風(fēng)格的網(wǎng)頁(yè)設(shè)計(jì)中運(yùn)用的色彩也要多于其他風(fēng)格的網(wǎng)頁(yè)，一般來(lái)講網(wǎng)頁(yè)設(shè)計(jì)中會(huì)用到三種的主要顏色，而扁平化風(fēng)格不僅色彩平均會(huì)比其他風(fēng)格多五種，色調(diào)用到的也會(huì)更豐富。所有的網(wǎng)頁(yè)設(shè)計(jì)中的色彩都在布局關(guān)系和形體關(guān)系上有著重要作用，使作品的風(fēng)格走向更鮮明，扁平化風(fēng)格網(wǎng)頁(yè)設(shè)計(jì)也是如此，扁平化設(shè)計(jì)中還有一些非常常見(jiàn)和熱門的扁平化網(wǎng)頁(yè)設(shè)計(jì)中的色彩，例如藍(lán)色、綠色、紫色、復(fù)古淺黃。若想讓用戶在較短時(shí)間內(nèi)接收到需要的目標(biāo)相關(guān)信息，作為設(shè)計(jì)者需要我們對(duì)色彩把握在媒體的特點(diǎn)表達(dá)，在用戶打開(kāi)頁(yè)面時(shí)進(jìn)行有效的視覺(jué)刺激，現(xiàn)代簡(jiǎn)約化的色彩明亮度以及純度、亮度，活力、趣味地呈現(xiàn)在扁平化風(fēng)格的頁(yè)面設(shè)計(jì)中。 3.2.2 情感色彩導(dǎo)向色彩具有很強(qiáng)的綜合性功能，在網(wǎng)頁(yè)設(shè)計(jì)中起到情感導(dǎo)向作用。作為設(shè)計(jì)者，我們應(yīng)該想表達(dá)的情感導(dǎo)向來(lái)建立基礎(chǔ)的網(wǎng)頁(yè)色彩基調(diào)，將色彩與所設(shè)計(jì)的網(wǎng)頁(yè)主題相統(tǒng)一。在網(wǎng)頁(yè)設(shè)計(jì)中的色彩選擇上，充分考慮使人產(chǎn)生情感的視覺(jué)感受。如：冷暖感、軟硬感、動(dòng)靜感和輕重感，將這些可以使人產(chǎn)生視覺(jué)情感的色彩搭配合理化。在扁平化的網(wǎng)頁(yè)設(shè)計(jì)中，色彩的情感導(dǎo)向需要根據(jù)電商的商品類型、視覺(jué)感受、風(fēng)格、特點(diǎn)來(lái)設(shè)計(jì)色彩的搭配和色彩的組合，表現(xiàn)電商的視覺(jué)傳達(dá)效果。對(duì)需要設(shè)計(jì)的網(wǎng)頁(yè)先設(shè)定一個(gè)標(biāo)準(zhǔn)色，以標(biāo)準(zhǔn)色為基點(diǎn)選擇界面的輔助顏色。而色彩基調(diào)與網(wǎng)頁(yè)主題相符合，會(huì)產(chǎn)生情感導(dǎo)向作用，如星巴克網(wǎng)站整體基調(diào)為綠色，大自然的綠色與健康，繁榮和環(huán)保舉措緊密相關(guān)。綠色為基調(diào)可以給人帶來(lái)清新、環(huán)保、健康等情感導(dǎo)向，非常適合各種有機(jī)或天然產(chǎn)品以及專注于戶外和自然的品牌。

　　3.3 網(wǎng)頁(yè)布局扁平化的網(wǎng)頁(yè)設(shè)計(jì)相對(duì)其他風(fēng)格的網(wǎng)頁(yè)來(lái)說(shuō)更方便用戶對(duì)網(wǎng)頁(yè)的使用和操作，更好地展示功能性還傳達(dá)了簡(jiǎn)潔美。很好的代替了傳統(tǒng)網(wǎng)頁(yè)中對(duì)精美圖片和元素的追求，不再利用拋光和陰影等煩瑣的光影效果，也不再有精美的布局，扁平化風(fēng)格更關(guān)注與想呈現(xiàn)的目標(biāo)內(nèi)容。人們生活壓力日益增加，而網(wǎng)頁(yè)的簡(jiǎn)潔舒適感更符合現(xiàn)代人的審美。以圖片排版為例，設(shè)計(jì)者可以采取以下幾種版式： 1)正常圖片版式：等大小圖片+統(tǒng)一間距; 2)版式設(shè)計(jì)排版：圖片按柵格分割，最大圖片的寬/高等于分割后小圖片聘妻的寬/高; 3)照片墻式排版：圖片大小不一，比較松散隨意; 4)瀑布流式排版：圖片全部等寬，垂直排列，視覺(jué)上有點(diǎn)像瀑布，是一種使用頻率很高的排版方式，常見(jiàn)的比如花瓣網(wǎng)。

　　4 結(jié)束語(yǔ)

　　新時(shí)代的人們的審美觀念不斷提升，網(wǎng)頁(yè)設(shè)計(jì)風(fēng)格隨著各種社會(huì)和人文因素不斷發(fā)展變化，扁平化的設(shè)計(jì)風(fēng)格與當(dāng)下人們的生活與商業(yè)需要相貼合，很好的滿足于當(dāng)代社會(huì)。設(shè)計(jì)者基于擬物化設(shè)計(jì)風(fēng)格對(duì)網(wǎng)頁(yè)視覺(jué)層面中的圖片、文字等元素進(jìn)行抽象的簡(jiǎn)化，對(duì)文字和色彩進(jìn)行搭配，有效的表達(dá)信息的主次關(guān)系，不僅僅在用戶瀏覽網(wǎng)頁(yè)時(shí)提高效率和便捷性，而這種吸引人目光卻簡(jiǎn)潔明了的設(shè)計(jì)風(fēng)格深受大家喜愛(ài)，設(shè)計(jì)者需要不斷地更新個(gè)人觀念，追尋更多的表達(dá)方式。

　　參考文獻(xiàn)：

　　[1] 秦歲明,何夢(mèng)楠.扁平化風(fēng)格在網(wǎng)頁(yè)界面設(shè)計(jì)中的應(yīng)用[J].包裝工程,2015,36(6):41-44,54.

　　[2] 李江玲.扁平化設(shè)計(jì)在視覺(jué)形象中的運(yùn)用[J].藝術(shù)科技,2015, 28(8):203.

　　[3] 許曉云,王一琳.扁平化——以簡(jiǎn)約為核心的產(chǎn)品交互設(shè)計(jì)研究[J].設(shè)計(jì),2015(19):80-81.

　　《扁平化風(fēng)格在網(wǎng)頁(yè)界面設(shè)計(jì)中的應(yīng)用》來(lái)源：《電腦知識(shí)與技術(shù)》，作者：羅園菁

轉(zhuǎn)載請(qǐng)注明來(lái)自：http://www.jinnzone.com/meixuelw/72448.html