前言：尋找寫作靈感？中文期刊網(wǎng)用心挑選的扁平化設(shè)計(jì)風(fēng)格在平面設(shè)計(jì)的應(yīng)用，希望能為您的閱讀和創(chuàng)作帶來靈感，歡迎大家閱讀并分享。

摘要：隨著社會(huì)的不斷加速發(fā)展，電子信息終端技術(shù)的蓬勃發(fā)展，扁平化設(shè)計(jì)逐漸成為界面設(shè)計(jì)和交互設(shè)計(jì)設(shè)計(jì)風(fēng)格的主流方向。扁平化設(shè)計(jì)作為一種全新的設(shè)計(jì)主流被受眾喜愛。本文通過對(duì)扁平化設(shè)計(jì)風(fēng)格研究，深入探索拓展扁平化設(shè)計(jì)風(fēng)格的應(yīng)用范圍，并突破UI設(shè)計(jì)的范疇，嘗試根據(jù)包裝設(shè)計(jì)、插畫設(shè)計(jì)等不同平面設(shè)計(jì)領(lǐng)域的設(shè)計(jì)特點(diǎn)，探索扁平化設(shè)計(jì)在不同領(lǐng)域上的可行性分析，為扁平化設(shè)計(jì)的應(yīng)用提供借鑒和思考。

關(guān)鍵詞：扁平化設(shè)計(jì);平面設(shè)計(jì);視覺元素

一、扁平化設(shè)計(jì)概述

（一）扁平化設(shè)計(jì)的概念

扁平化設(shè)計(jì)是近年來剛剛發(fā)展起來的一種全新的設(shè)計(jì)風(fēng)格，英文中常用翻譯為FlatDesign。作為一個(gè)全新的專業(yè)名詞，在設(shè)計(jì)領(lǐng)域沒有統(tǒng)一的定義。在英文版的維基百科中對(duì)扁平化設(shè)計(jì)的定義是：一種界面設(shè)計(jì)的風(fēng)格，在設(shè)計(jì)過程中去除所有具有三維空間效果的樣式和屬性，刪除一切具有陰影、高光、反光、漸變、陰影表面紋理及所有三維錯(cuò)覺的設(shè)計(jì)元素［1］。扁平化設(shè)計(jì)產(chǎn)生的核心是對(duì)信息的提煉使設(shè)計(jì)更注重功能本身，實(shí)現(xiàn)功能最大化。在表現(xiàn)形式上更注重簡(jiǎn)單元素平面化，去除所有產(chǎn)生立體感的特效，對(duì)排版和單一色彩進(jìn)行極簡(jiǎn)化處理。將想要傳達(dá)的信息更加簡(jiǎn)單明了，使用戶最大限度地接受有用的核心內(nèi)容，使界面設(shè)計(jì)更加高效合理。這一核心使設(shè)計(jì)師更傾向?qū)⒈馄交O(shè)計(jì)運(yùn)用在UI設(shè)計(jì)和人機(jī)交互設(shè)計(jì)中。扁平化設(shè)計(jì)風(fēng)格這種追求簡(jiǎn)約的設(shè)計(jì)風(fēng)格更依賴那些被精心篩選的本質(zhì)性元素，而非表面上的裝飾，一切設(shè)計(jì)都為功能服務(wù)，可以真正做到形式追隨功能。

（二）扁平化設(shè)計(jì)形成過程

1.從微軟公司的界面設(shè)計(jì)中誕生

扁平化設(shè)計(jì)風(fēng)格真正應(yīng)用于界面設(shè)計(jì)是由微軟公司2006年推出的名為Zune的音樂播放器。微軟推出了如圖1的Zune音樂播放器，為與蘋果的iPod播放器競(jìng)爭(zhēng)，從此開始名為Metro的設(shè)計(jì)。其特點(diǎn)主要突出顯示大文本并匹配背景圖像。這個(gè)版本的操作系統(tǒng)使用許多簡(jiǎn)單的形狀，清晰的印刷格式，明亮的對(duì)比色，復(fù)雜的細(xì)節(jié)和紋理已被刪除。就此Metro的名字已經(jīng)流傳了起來，而且很受歡迎，因此微軟之后將它應(yīng)用于Windows8系統(tǒng)。另外，這種設(shè)計(jì)風(fēng)格也用于其他軟件，比如Xbox360等。扁平化和極簡(jiǎn)主義設(shè)計(jì)為Web和移動(dòng)應(yīng)用提供了更多可用的設(shè)計(jì)解決方案。

2.掀起扁平化設(shè)計(jì)風(fēng)格熱潮

2013年9月，蘋果公司了ios7，ios操作系統(tǒng)出現(xiàn)后開始進(jìn)行了操作系統(tǒng)用戶界面的升級(jí)。如圖2所示中IOS6系統(tǒng)（左）與IOS7系統(tǒng)（右）對(duì)比可以看出ios7完全放棄了擬物化設(shè)計(jì)，并從所有圖標(biāo)和界面中刪除了所有細(xì)節(jié)，紋理和陰影等顛覆性的調(diào)整。同時(shí)，國(guó)內(nèi)主流互聯(lián)網(wǎng)產(chǎn)品，例如：騰訊QQ、360瀏覽器、新浪微博、包括微信等，操作系統(tǒng)如魅f(wàn)ly-me3.0，小米MIUI6等，都已經(jīng)開始采用扁平化設(shè)計(jì)風(fēng)格，在產(chǎn)品界面圖標(biāo)和標(biāo)志的基礎(chǔ)上均進(jìn)行了改革。扁平化設(shè)計(jì)開始推向設(shè)計(jì)熱潮的高潮，逐漸成為移動(dòng)互聯(lián)網(wǎng)和界面設(shè)計(jì)中最受關(guān)注的術(shù)語(yǔ)之一。

二、扁平化設(shè)計(jì)原則

（一）圖形設(shè)計(jì)簡(jiǎn)化

圖形簡(jiǎn)化是最可以具體描述扁平化設(shè)計(jì)風(fēng)格的設(shè)計(jì)特點(diǎn)，這種簡(jiǎn)單的設(shè)計(jì)趨向意味著它可以增強(qiáng)設(shè)計(jì)的功能性。扁平化設(shè)計(jì)風(fēng)格的圖形特征最主要的是有著鮮艷的色彩、清晰的邊緣和開放的空間。扁平化設(shè)計(jì)最常見的是圖標(biāo)式圖形設(shè)計(jì)，從圖形設(shè)計(jì)中看出這一設(shè)計(jì)并不是減少真實(shí)世界的對(duì)象或使用模擬圖形。這意味著扁平化設(shè)計(jì)會(huì)在現(xiàn)實(shí)世界和技術(shù)世界之間產(chǎn)生差距。

1.簡(jiǎn)化提取

扁平化設(shè)計(jì)是時(shí)代的產(chǎn)物。事實(shí)上，扁平化設(shè)計(jì)走向設(shè)計(jì)主流方向的確是因?yàn)樗軌虿粩鄡?yōu)化自身，使其更能適應(yīng)時(shí)代的發(fā)展。但事實(shí)上，使扁平化設(shè)計(jì)應(yīng)用在不同設(shè)計(jì)領(lǐng)域中，絕不是一件簡(jiǎn)單的事情。扁平化設(shè)計(jì)是絕對(duì)提取，需要有更扎實(shí)的基本功，其實(shí)與書法的道理相似筆畫越少，書寫越難，筆畫越多越容易書寫。

2.去除特效

扁平化設(shè)計(jì)完全屬于二維空間的產(chǎn)物，這就意味著它不會(huì)過度設(shè)計(jì)。因此，在扁平化設(shè)計(jì)風(fēng)格中不會(huì)有倒角，投影，漸變或其他效果應(yīng)用于圖層。不難看出所有扁平化設(shè)計(jì)風(fēng)格的界面設(shè)計(jì)，它們大多只有尖銳的邊緣，沒有投影。一個(gè)簡(jiǎn)單的形狀加上一個(gè)沒有景深的平面。

3.圖形幾何化

扁平化設(shè)計(jì)會(huì)使用一些簡(jiǎn)單的用戶界面元素，如有的按鈕和圖標(biāo)設(shè)計(jì)，設(shè)計(jì)師只需尋找簡(jiǎn)單的形狀，如矩形、圓形或正方形，以保持每個(gè)形狀的獨(dú)立。形狀的邊緣可以完美定位或包含一點(diǎn)曲率。每個(gè)用戶界面元素都很簡(jiǎn)單，并且易于點(diǎn)擊或切換。對(duì)用戶而言直觀的交互，沒有設(shè)計(jì)中的過度設(shè)計(jì)。刪除簡(jiǎn)單的樣式并鼓勵(lì)用粗體可點(diǎn)擊的按鈕進(jìn)行著色。但是，這并不意味著簡(jiǎn)單的幾何元素就是簡(jiǎn)單的設(shè)計(jì)。通常幾何形狀會(huì)給用戶帶來更大的虛構(gòu)空間，這是直觀和清晰的。當(dāng)然，一個(gè)更簡(jiǎn)潔和通用的圖標(biāo)，它攜帶的信息量更大，并且使功能最大化。

（二）風(fēng)格配色的選擇

顏色是扁平化設(shè)計(jì)風(fēng)格在表達(dá)功能性時(shí)最重要的部分。在扁平化設(shè)計(jì)中，色彩運(yùn)用得是否到位，無(wú)疑是這種設(shè)計(jì)風(fēng)格中很重要的一個(gè)環(huán)節(jié)。很多UI設(shè)計(jì)作品在色彩上更多地強(qiáng)調(diào)更亮、更鮮艷。在以往的設(shè)計(jì)中，大多數(shù)情況下設(shè)計(jì)一個(gè)作品更專注在兩三種顏色之間，在界面設(shè)計(jì)中使用的顏色模式往往比其他調(diào)色板更引人注目，更明亮。

（三）字體的運(yùn)用

字體是扁平化設(shè)計(jì)中非常重要的元素。扁平化設(shè)計(jì)將界面中所有元素清晰簡(jiǎn)潔，設(shè)計(jì)師可以在字體創(chuàng)建時(shí)使用自己所期望的樣式和色調(diào)，可以使用自定義和特定字體設(shè)置整個(gè)界面框架的基調(diào)。如今的“扁平”字體通常由單一字體組成，或者是兩種非常接近的字體。在不同風(fēng)格、功能設(shè)置下的字體選擇，均為易讀、易辨識(shí)且簡(jiǎn)單的字體。這正是關(guān)鍵所在，不能使字體分散注意力。如果字母帶有過多的風(fēng)格與個(gè)性，就會(huì)阻礙用戶的閱讀流程。通常的做法是“隱形的設(shè)計(jì)”，換句話說，就是做出讓用戶不會(huì)注意到的設(shè)計(jì)。因?yàn)槊慨?dāng)用戶留意設(shè)計(jì)，就會(huì)喪失沉浸式的體驗(yàn)。

（四）版式布局

1.網(wǎng)格

網(wǎng)格在扁平化設(shè)計(jì)中起著非常重要的作用，特別是在界面設(shè)計(jì)中。通過網(wǎng)格將視覺元素整合在一起，可以使整個(gè)設(shè)計(jì)更有次序和直觀。網(wǎng)格不僅可以顯示視覺順序，還可以使用網(wǎng)格劃分內(nèi)容和功能組，無(wú)須使用直線或框劃分組對(duì)象。網(wǎng)格中簡(jiǎn)單的對(duì)齊和間距設(shè)置可以更好地幫助用戶了解功能和結(jié)構(gòu)。嘗試打破網(wǎng)格結(jié)構(gòu)，突出重要元素，以吸引用戶的注意力。告別假3D元素裝飾、物理比例和定位等基本布局原則同樣是展示視覺順序的關(guān)鍵。使用更密集的網(wǎng)格，當(dāng)減少視覺色彩匹配元素時(shí)，會(huì)發(fā)現(xiàn)這種設(shè)計(jì)方法可以承載更復(fù)雜的結(jié)構(gòu)并且不會(huì)顯得雜亂。如果想要表達(dá)的其他內(nèi)容信息就可以單獨(dú)放置。

2.半透明

自蘋果IOS7系統(tǒng)推出扁平化設(shè)計(jì)風(fēng)格以來，主打的半透明設(shè)計(jì)就開始被廣泛應(yīng)用，這種設(shè)計(jì)手法主要以半透明磨砂玻璃風(fēng)格引起大家的關(guān)注。基于透明度的使用，蘋果公司還提高了系統(tǒng)對(duì)外部環(huán)境感知的敏感度。使用半透明效果最大的好處是可以使畫面產(chǎn)生對(duì)比，設(shè)計(jì)師可以通過色塊，圖片上的大字體或者多種顏色層次創(chuàng)造視覺中心。這種效果如果運(yùn)用得當(dāng)就可以很快將畫面層次展現(xiàn)出來。但是使用這一效果時(shí)需要謹(jǐn)慎，因?yàn)檫@種效果很難處理得當(dāng)，需要遵循如下原則：圖片和文字一定要有可讀性，這樣使用半透明效果才有意義。在決定半透明位置的時(shí)候，要構(gòu)思好需要遮擋什么內(nèi)容，遮擋的部分是否合理。透明度的錯(cuò)誤使用會(huì)影響整體的設(shè)計(jì)效果和閱讀性，不可以在對(duì)比非常強(qiáng)烈的圖片上放置半透明元素。

三、扁平化風(fēng)格在平面設(shè)計(jì)領(lǐng)域的應(yīng)用

（一）包裝設(shè)計(jì)中的扁平化設(shè)計(jì)風(fēng)格

包裝設(shè)計(jì)中的扁平化風(fēng)格主要體現(xiàn)在：文字清晰化、顏色簡(jiǎn)化和圖形簡(jiǎn)化、版面簡(jiǎn)約化。對(duì)復(fù)雜圖形、煩瑣文字、擁擠版面，采用扁平圖形、清晰文字、單純色彩，秉持“簡(jiǎn)約而不簡(jiǎn)單”的設(shè)計(jì)理念，傳遞產(chǎn)品信息的同時(shí)強(qiáng)化了品牌形象，完美達(dá)到了包裝設(shè)計(jì)的目的。

（二）插畫設(shè)計(jì)中的扁平化設(shè)計(jì)風(fēng)格

扁平化風(fēng)格的插畫色彩對(duì)比較強(qiáng)，在顏色的使用和選擇上，大多數(shù)插畫師們會(huì)選擇特有的或者商業(yè)需求的色彩語(yǔ)言體系進(jìn)行繪制，并且削弱物體固有的陰影及其明暗關(guān)系的強(qiáng)烈感，增強(qiáng)顏色與顏色之間的塊面感、統(tǒng)一感或是對(duì)比感，讓顏色整體或是在畫面內(nèi)顏色與顏色有一定的對(duì)比。有些插畫師會(huì)選擇直接用純色的色塊上色，有的插畫師會(huì)選擇用拼貼、多色塊疊加進(jìn)行繪制。此外，在色塊的內(nèi)部也會(huì)使用疊加輕微的紋理讓色塊更加豐富，紋理和拼貼的圖案在制作方面，有些插畫師會(huì)選擇在紙上手繪出想要的圖案圖形，再通過軟件后期到畫面當(dāng)中，這樣做是為了讓紋理看起來更加自然，色塊外部偶爾會(huì)根據(jù)實(shí)際情況用勾線的方法將外部輪廓凸顯出來。

（三）企業(yè)形象設(shè)計(jì)中的扁平化設(shè)計(jì)風(fēng)格

扁平化設(shè)計(jì)風(fēng)格進(jìn)入VI設(shè)計(jì)系統(tǒng)的關(guān)鍵是對(duì)其設(shè)計(jì)理念的影響，體現(xiàn)企業(yè)文化與內(nèi)涵。因此，根據(jù)扁平化設(shè)計(jì)原則企業(yè)形象設(shè)計(jì)時(shí)應(yīng)對(duì)VI設(shè)計(jì)的字體和顏色至關(guān)重要，對(duì)于企業(yè)形象設(shè)計(jì)而言，合適的字體和顏色將達(dá)到突出的視覺效果，會(huì)很容易讓人感受到企業(yè)文化的核心意義。扁平化設(shè)計(jì)開始僅僅存在于界面設(shè)計(jì)，而現(xiàn)在在不同的設(shè)計(jì)領(lǐng)域隨處可見，以移動(dòng)客戶端的界面出現(xiàn)在人們的視野，人們從持有批評(píng)或中立的態(tài)度到現(xiàn)在完全接受它，并廣泛地應(yīng)用在平面設(shè)計(jì)的各個(gè)領(lǐng)域。由此可見，扁平化設(shè)計(jì)風(fēng)格順應(yīng)了時(shí)代的發(fā)展，同時(shí)社會(huì)的發(fā)展帶動(dòng)了扁平化設(shè)計(jì)風(fēng)格的發(fā)展，滿足了社會(huì)發(fā)展的需求。扁平化風(fēng)格設(shè)計(jì)重視實(shí)現(xiàn)產(chǎn)品的功能性，淡化復(fù)雜的裝飾外觀，帶來簡(jiǎn)潔清晰的圖像及出色的功能，在界面設(shè)計(jì)和交互界面上已經(jīng)取得成功。設(shè)計(jì)師應(yīng)抓住其中的設(shè)計(jì)要點(diǎn)，在不同設(shè)計(jì)領(lǐng)域探索和應(yīng)用起到不一樣的作用。

參考文獻(xiàn)：

［1］張欣.視覺符號(hào)在扁平化界面設(shè)計(jì)中的應(yīng)用［J］.藝術(shù)探索，2013（6）：104-105.

［2］P迪.做好扁平化設(shè)計(jì)－視覺篇［EB/OL］.

［3］劉暢.淺析扁平化設(shè)計(jì)的發(fā)展趨勢(shì)、優(yōu)勢(shì)與成因［J］.美術(shù)大觀，2014（12）：99.

［4］崔天劍.大數(shù)據(jù)時(shí)代扁平化設(shè)計(jì)趨勢(shì)研究［J］.創(chuàng)意與設(shè)計(jì)，2014（32）：16-20.

［5］周黎鈴.基于用戶體驗(yàn)的扁平化互聯(lián)網(wǎng)產(chǎn)品界面設(shè)計(jì)研究［D］.杭州：浙江工商大學(xué)，2014.

作者:?冬梅 單位:齊齊哈爾工程學(xué)院