扁平化風格在網頁界面設計中的應用

羅園菁

摘要：扁平化是近年來的一種新潮流設計風格，在網頁設計中體現了簡約的特點，將網頁界面的信息進行整合，采用舒適的顏色、圖形等，帶給人清新獨特的視覺體驗，深受年輕人喜愛。本文作者主要分析了扁平化風格在網頁界面設計中的應用。

關鍵詞：扁平化風格;網頁;界面設計;版式

中圖分類號：TP311? ? ? 文獻標識碼：A

文章編號：1009-3044（2021）11-0189-02

現如今以手機為主的信息技術和網絡傳播飛速發展，設計風格是隨著社會的經濟發展而變化，文化發展也注定成為設計風格變化的主要因素，而網頁設計也越來越向數字藝術為主的扁平化風格發展，對當下的文化構造和經濟發展有著深遠影響。在扁平化風格的網頁界面設計中，設計師以提高用戶體驗為切入點，通過各種簡約的元素，使扁平化風格在網頁界面設計中更加舒適、實用。

1 扁平化風格的基本概念

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

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

2 扁平化風格的興起

新時代以來科學技術不斷發展，手機成為綜合性極強的生活智能工具，手機的小巧靈活的特點使原本流行多年的擬物化風格受到打擊，擬物化風格無法在手機上很好地發揮其立體、陰影等功能，而時代發展飛快，人們的生活壓力也越來越大，大眾也越來越偏向手機界面和網頁界面的簡潔和舒適感，對簡約的“綠色設計”在視覺上給人休閑的感受，對于設計而言，不變才是病態，改變和創新才是設計發展的常態。

3 扁平化風格在網頁設計中的應用

3.1 簡約性圖形

3.1.1 圖片去底法

從字面意思上來看，圖片去底法就是去掉圖片的底（背景），這種方法可以讓想要呈現的圖片更突出。比如很多高端電子產品的網頁，用戶在打開此商品頁面時直觀地看到產品本身超清的圖像，整體網頁簡單卻抓住用戶的眼睛，產品本身非常突出，更加吸引用戶注意力。將圖片去底，只運用產品本身的圖像呈現，網頁整體的畫面空間感被拉強。扁平化的網頁設計中不僅需要使用調整顏色或圖形形狀等方法改變網頁的風格，圖片在網頁中也是非常重要的元素，使用圖片去底的方式將圖片與網頁設計的風格主體相統一，就是一項優秀的網頁設計作品。這種圖片去底的方式，設計者需要根據客戶對頁面的需要對板塊和文字都進行處理調整，使頁面的具有較好的層次感，使它們有機排列增強視覺效果，讓頁面整體變得和諧和統一。圖片去底這種方式一般運用在產品方面的網頁設計中。

3.1.2 圖形抽象法

扁平化網頁設計中最常見和最典型的就是對圖形進行抽象化，在網頁設計中每個圖形呈現出的視覺感受就是扁平的，并不具有高光、陰影元素，沒有給人帶來凹凸感或動感的圖形。扁平化的網頁設計中，通過對圖片或物體的抽象刪減呈現簡約化的圖形，使網頁更簡約、大氣。比如一些網站的網頁中，將功能圖標進行設計，在正常呈現的狀態下是一種圖標，當鼠標進行點擊圖形時，又會轉變圖形樣式，利用圖形的變化樣式進行區分，給用戶帶來不一樣的體驗，用戶在對網頁進行點擊選擇時可以輕易地區分出點擊和未點擊狀態，輔助和引導用戶視覺的效果，從而做出正確的選擇。方便用戶瀏覽的同時，帶給用戶良好的視覺效果。

3.2 色彩

3.2.1 視覺色彩

頁設計中的重要元素就是色彩，扁平化網頁設計中的色彩是非常重要的，應該做到“總體協調，局部對比”的原則，色彩還決定了作品的風格走向。日常中見到的扁平化網頁設計中往往比其他風格的網站色彩更加的明亮和炫目。

比如像優衣庫的RECIPE，與其他平常的網頁設計來講，更加吸引顧客的眼球，視覺上給人明亮的感覺。而且，扁平化風格的網頁設計中運用的色彩也要多于其他風格的網頁，一般來講網頁設計中會用到三種的主要顏色，而扁平化風格不僅色彩平均會比其他風格多五種，色調用到的也會更豐富。所有的網頁設計中的色彩都在布局關系和形體關系上有著重要作用，使作品的風格走向更鮮明，扁平化風格網頁設計也是如此，扁平化設計中還有一些非常常見和熱門的扁平化網頁設計中的色彩，例如藍色、綠色、紫色、復古淺黃。若想讓用戶在較短時間內接收到需要的目標相關信息，作為設計者需要我們對色彩把握在媒體的特點表達，在用戶打開頁面時進行有效的視覺刺激，現代簡約化的色彩明亮度以及純度、亮度，活力、趣味地呈現在扁平化風格的頁面設計中。

3.2.2 情感色彩導向

色彩具有很強的綜合性功能，在網頁設計中起到情感導向作用。作為設計者，我們應該想表達的情感導向來建立基礎的網頁色彩基調，將色彩與所設計的網頁主題相統一。在網頁設計中的色彩選擇上，充分考慮使人產生情感的視覺感受。如：冷暖感、軟硬感、動靜感和輕重感，將這些可以使人產生視覺情感的色彩搭配合理化。

在扁平化的網頁設計中，色彩的情感導向需要根據電商的商品類型、視覺感受、風格、特點來設計色彩的搭配和色彩的組合，表現電商的視覺傳達效果。對需要設計的網頁先設定一個標準色，以標準色為基點選擇界面的輔助顏色。而色彩基調與網頁主題相符合，會產生情感導向作用，如星巴克網站整體基調為綠色，大自然的綠色與健康，繁榮和環保舉措緊密相關。綠色為基調可以給人帶來清新、環保、健康等情感導向，非常適合各種有機或天然產品以及專注于戶外和自然的品牌。

3.2.3 色彩層級搭配法

我們日常經常見到的網頁設計色彩表達為飽和度搭配進行的，如低飽和度和高飽和度的色彩相結合的頁面?，F在的扁平化風格網頁設計比較常用的是純色色彩搭配進行設計的，設計者要對畫面色彩搭配給人心曠神怡的視覺感，對網頁中的層次感也要進行表達和體現，使用戶更好地進行瀏覽網頁。扁平化風格相比擬物化風格的突出感是平穩的，設計者要用顏色分出信息的層次，主體信息和輔助信息，通過顏色表達空間感。注意留白的運用，給用戶充分的呼吸空間，讓用戶更好的消化頁面信息并確定網頁中的優先級。

3.3 網頁布局

扁平化的網頁設計相對其他風格的網頁來說更方便用戶對網頁的使用和操作，更好地展示功能性還傳達了簡潔美。很好的代替了傳統網頁中對精美圖片和元素的追求，不再利用拋光和陰影等煩瑣的光影效果，也不再有精美的布局，扁平化風格更關注與想呈現的目標內容。人們生活壓力日益增加，而網頁的簡潔舒適感更符合現代人的審美。以圖片排版為例，設計者可以采取以下幾種版式：

1）正常圖片版式：等大小圖片+統一間距;

2）版式設計排版：圖片按柵格分割，最大圖片的寬/高等于分割后小圖片聘妻的寬/高;

3）照片墻式排版：圖片大小不一，比較松散隨意;

4）瀑布流式排版：圖片全部等寬，垂直排列，視覺上有點像瀑布，是一種使用頻率很高的排版方式，常見的比如花瓣網。

3.4 字體

3.4.1 字體的應用

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

字體不僅僅在于信息的表達，還可以在網頁上直觀的進行設計，舊金山的一家設計公司Godfrey Dadich在其網頁主頁上運用熒光綠的高亮部分來突出重點。有利于用戶在瀏覽時抓住關鍵信息。正如我們在課本上重點處涂上鮮艷色彩來突出一樣，設計者在網頁設計中也可以運用，正所謂設計源于生活。

3.4.2 字號的應用

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

設計者可以充分利用文字的這些特性，在扁平化風格的網頁設計中發揮創意體現所傳遞信息的簡潔和情感。

4 結束語

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

參考文獻：

[1] 秦歲明，何夢楠.扁平化風格在網頁界面設計中的應用[J].包裝工程，2015，36（6）：41-44，54.

[2] 李江玲.扁平化設計在視覺形象中的運用[J].藝術科技，2015，28（8）：203.

[3] 許曉云，王一琳.扁平化——以簡約為核心的產品交互設計研究[J].設計，2015（19）：80-81.

【通聯編輯：李雅琪】