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

羅園菁

摘要：扁平化是近年來的一種新潮流設(shè)計(jì)風(fēng)格，在網(wǎng)頁(yè)設(shè)計(jì)中體現(xiàn)了簡(jiǎn)約的特點(diǎn)，將網(wǎng)頁(yè)界面的信息進(jìn)行整合，采用舒適的顏色、圖形等，帶給人清新獨(dú)特的視覺體驗(yàn)，深受年輕人喜愛。本文作者主要分析了扁平化風(fēng)格在網(wǎng)頁(yè)界面設(shè)計(jì)中的應(yīng)用。

關(guān)鍵詞：扁平化風(fēng)格;網(wǎng)頁(yè);界面設(shè)計(jì);版式

中圖分類號(hào)：TP311? ? ? 文獻(xiàn)標(biāo)識(shí)碼：A

文章編號(hào)：1009-3044（2021）11-0189-02

現(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ì)也越來越向數(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)，通過各種簡(jiǎn)約的元素，使扁平化風(fēng)格在網(wǎng)頁(yè)界面設(shè)計(jì)中更加舒適、實(shí)用。

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

其實(shí)，扁平化設(shè)計(jì)（flag design）是在擬物化設(shè)計(jì)基礎(chǔ)之上發(fā)展來的新潮流風(fēng)格，扁平化風(fēng)格簡(jiǎn)化了擬物化設(shè)計(jì)，改變高光陰影、漸變等傳統(tǒng)視野中的流行元素，將抽象、簡(jiǎn)化、符號(hào)化的元素整合，去掉那些繁瑣的細(xì)節(jié)和明暗處理，使設(shè)計(jì)風(fēng)格更加簡(jiǎn)約更加純粹，視覺上給人舒適、整潔的體驗(yàn)。扁平化風(fēng)格經(jīng)歷了過去幾年的快速發(fā)展，不僅僅是在數(shù)字領(lǐng)域深受喜愛，漸漸地在平面設(shè)計(jì)領(lǐng)域被廣泛使用，成了近幾年的重要設(shè)計(jì)趨勢(shì)之一。

但扁平化并不是單單的將物品或板塊徹底抽象和變“扁”，而是將運(yùn)用的元素進(jìn)行提煉，多余的進(jìn)行去除，將特征留下，將裝飾去除，如中國(guó)傳統(tǒng)文化藝術(shù)中的皮影。

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

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

從字面意思上來看，圖片去底法就是去掉圖片的底（背景），這種方法可以讓想要呈現(xiàn)的圖片更突出。比如很多高端電子產(chǎn)品的網(wǎng)頁(yè)，用戶在打開此商品頁(yè)面時(shí)直觀地看到產(chǎn)品本身超清的圖像，整體網(wǎng)頁(yè)簡(jiǎn)單卻抓住用戶的眼睛，產(chǎn)品本身非常突出，更加吸引用戶注意力。將圖片去底，只運(yùn)用產(chǎn)品本身的圖像呈現(xiàn)，網(wǎng)頁(yè)整體的畫面空間感被拉強(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)視覺效果，讓頁(yè)面整體變得和諧和統(tǒng)一。圖片去底這種方式一般運(yùn)用在產(chǎn)品方面的網(wǎng)頁(yè)設(shè)計(jì)中。

3.1.2 圖形抽象法

扁平化網(wǎng)頁(yè)設(shè)計(jì)中最常見和最典型的就是對(duì)圖形進(jìn)行抽象化，在網(wǎng)頁(yè)設(shè)計(jì)中每個(gè)圖形呈現(xiàn)出的視覺感受就是扁平的，并不具有高光、陰影元素，沒有給人帶來凹凸感或動(dòng)感的圖形。扁平化的網(wǎng)頁(yè)設(shè)計(jì)中，通過對(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ū)分，給用戶帶來不一樣的體驗(yàn)，用戶在對(duì)網(wǎng)頁(yè)進(jìn)行點(diǎn)擊選擇時(shí)可以輕易地區(qū)分出點(diǎn)擊和未點(diǎn)擊狀態(tài)，輔助和引導(dǎo)用戶視覺的效果，從而做出正確的選擇。方便用戶瀏覽的同時(shí)，帶給用戶良好的視覺效果。

3.2 色彩

3.2.1 視覺色彩

頁(yè)設(shè)計(jì)中的重要元素就是色彩，扁平化網(wǎng)頁(yè)設(shè)計(jì)中的色彩是非常重要的，應(yīng)該做到“總體協(xié)調(diào)，局部對(duì)比”的原則，色彩還決定了作品的風(fēng)格走向。日常中見到的扁平化網(wǎng)頁(yè)設(shè)計(jì)中往往比其他風(fēng)格的網(wǎng)站色彩更加的明亮和炫目。

比如像優(yōu)衣庫(kù)的RECIPE，與其他平常的網(wǎng)頁(yè)設(shè)計(jì)來講，更加吸引顧客的眼球，視覺上給人明亮的感覺。而且，扁平化風(fēng)格的網(wǎng)頁(yè)設(shè)計(jì)中運(yùn)用的色彩也要多于其他風(fēng)格的網(wǎng)頁(yè)，一般來講網(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ì)中還有一些非常常見和熱門的扁平化網(wǎng)頁(yè)設(shè)計(jì)中的色彩，例如藍(lán)色、綠色、紫色、復(fù)古淺黃。若想讓用戶在較短時(shí)間內(nèi)接收到需要的目標(biāo)相關(guān)信息，作為設(shè)計(jì)者需要我們對(duì)色彩把握在媒體的特點(diǎn)表達(dá)，在用戶打開頁(yè)面時(shí)進(jìn)行有效的視覺刺激，現(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)向來建立基礎(chǔ)的網(wǎng)頁(yè)色彩基調(diào)，將色彩與所設(shè)計(jì)的網(wǎng)頁(yè)主題相統(tǒng)一。在網(wǎng)頁(yè)設(shè)計(jì)中的色彩選擇上，充分考慮使人產(chǎn)生情感的視覺感受。如：冷暖感、軟硬感、動(dòng)靜感和輕重感，將這些可以使人產(chǎn)生視覺情感的色彩搭配合理化。

在扁平化的網(wǎng)頁(yè)設(shè)計(jì)中，色彩的情感導(dǎo)向需要根據(jù)電商的商品類型、視覺感受、風(fēng)格、特點(diǎn)來設(shè)計(jì)色彩的搭配和色彩的組合，表現(xiàn)電商的視覺傳達(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)可以給人帶來清新、環(huán)保、健康等情感導(dǎo)向，非常適合各種有機(jī)或天然產(chǎn)品以及專注于戶外和自然的品牌。

3.2.3 色彩層級(jí)搭配法

我們?nèi)粘＝?jīng)常見到的網(wǎng)頁(yè)設(shè)計(jì)色彩表達(dá)為飽和度搭配進(jìn)行的，如低飽和度和高飽和度的色彩相結(jié)合的頁(yè)面。現(xiàn)在的扁平化風(fēng)格網(wǎng)頁(yè)設(shè)計(jì)比較常用的是純色色彩搭配進(jìn)行設(shè)計(jì)的，設(shè)計(jì)者要對(duì)畫面色彩搭配給人心曠神怡的視覺感，對(duì)網(wǎng)頁(yè)中的層次感也要進(jìn)行表達(dá)和體現(xiàn)，使用戶更好地進(jìn)行瀏覽網(wǎng)頁(yè)。扁平化風(fēng)格相比擬物化風(fēng)格的突出感是平穩(wěn)的，設(shè)計(jì)者要用顏色分出信息的層次，主體信息和輔助信息，通過顏色表達(dá)空間感。注意留白的運(yùn)用，給用戶充分的呼吸空間，讓用戶更好的消化頁(yè)面信息并確定網(wǎng)頁(yè)中的優(yōu)先級(jí)。

3.3 網(wǎng)頁(yè)布局

扁平化的網(wǎng)頁(yè)設(shè)計(jì)相對(duì)其他風(fēng)格的網(wǎng)頁(yè)來說更方便用戶對(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）瀑布流式排版：圖片全部等寬，垂直排列，視覺上有點(diǎn)像瀑布，是一種使用頻率很高的排版方式，常見的比如花瓣網(wǎng)。

3.4 字體

3.4.1 字體的應(yīng)用

扁平化風(fēng)格中的字體有著很重要的作用，與色彩導(dǎo)向相同，每種字體都有著情感含義，不同的字體表達(dá)著不同的情感導(dǎo)向，設(shè)計(jì)者在選擇扁平化風(fēng)格網(wǎng)頁(yè)中的字體時(shí)，將網(wǎng)頁(yè)的主題視覺目的與字體相統(tǒng)一，設(shè)計(jì)出與客戶想表達(dá)情感相同的風(fēng)格和網(wǎng)頁(yè)整體基調(diào)。例如，宋體這種字體，是設(shè)計(jì)者們使用最為廣泛的一種。帶給人的感覺就是典雅和端莊的味道，宋體在網(wǎng)頁(yè)中有著占據(jù)的版面較小的優(yōu)點(diǎn)，字體較為秀麗，非常適合用于網(wǎng)頁(yè)文字表達(dá)較多的情況，進(jìn)行大面積的文字排版，正文中大多使用的也是宋體。宋體和新宋體在Windows系統(tǒng)網(wǎng)頁(yè)中使用范圍比較廣泛。黑體的字形嚴(yán)肅莊重，給人的感覺是非常干凈和醒目的，不會(huì)拖泥帶水，設(shè)計(jì)者可以選擇黑體作為標(biāo)題或重點(diǎn)信息，便于展示主旨信息，正黑和微軟雅黑使用頻率較多。

字體不僅僅在于信息的表達(dá)，還可以在網(wǎng)頁(yè)上直觀的進(jìn)行設(shè)計(jì)，舊金山的一家設(shè)計(jì)公司Godfrey Dadich在其網(wǎng)頁(yè)主頁(yè)上運(yùn)用熒光綠的高亮部分來突出重點(diǎn)。有利于用戶在瀏覽時(shí)抓住關(guān)鍵信息。正如我們?cè)谡n本上重點(diǎn)處涂上鮮艷色彩來突出一樣，設(shè)計(jì)者在網(wǎng)頁(yè)設(shè)計(jì)中也可以運(yùn)用，正所謂設(shè)計(jì)源于生活。

3.4.2 字號(hào)的應(yīng)用

設(shè)計(jì)者在進(jìn)行網(wǎng)頁(yè)文字排版時(shí)，字號(hào)也可以作為一項(xiàng)設(shè)計(jì)元素，字號(hào)的特征可以有效地向用戶傳遞重點(diǎn)信息，比如高對(duì)比色的大字號(hào)字體、高清的自定義字體和平衡的文字段落都是當(dāng)前流行的網(wǎng)頁(yè)編排字號(hào)設(shè)計(jì)。例如CreativeDoc的首頁(yè)中，6個(gè)加粗的白色字母在強(qiáng)烈的黑色背景中，對(duì)比強(qiáng)烈十分醒目。另外Octoplus Group是一個(gè)散步信件來講述故事的通信機(jī)構(gòu)，網(wǎng)站首頁(yè)就是借助小而粗的字母來充當(dāng)導(dǎo)航元素。這種設(shè)計(jì)從品牌信息傳達(dá)和故事性的角度上來看是非常有趣且有效的。

設(shè)計(jì)者可以充分利用文字的這些特性，在扁平化風(fēng)格的網(wǎng)頁(yè)設(shè)計(jì)中發(fā)揮創(chuàng)意體現(xiàn)所傳遞信息的簡(jiǎn)潔和情感。

4 結(jié)束語

新時(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è)視覺層面中的圖片、文字等元素進(jìn)行抽象的簡(jiǎn)化，對(duì)文字和色彩進(jìn)行搭配，有效的表達(dá)信息的主次關(guān)系，不僅僅在用戶瀏覽網(wǎng)頁(yè)時(shí)提高效率和便捷性，而這種吸引人目光卻簡(jiǎn)潔明了的設(shè)計(jì)風(fēng)格深受大家喜愛，設(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ì)在視覺形象中的運(yùn)用[J].藝術(shù)科技，2015，28（8）：203.

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

【通聯(lián)編輯：李雅琪】