扁平化設計在網頁設計中的運用研究

任冬巧 楊春燕

（嘉興學院，浙江 嘉興 314001）

隨著社會的發展，網絡的使用已越來越頻繁，網絡已經成為人們生活中必不可少的一部分。每天，人們都會通過各個網站來查詢資料、購物、游覽信息等等。而網頁則是構成網站的基本元素，是承載各種網站應用的平臺。但它不是隨隨便便就能產生的，它的設計是要符合一定設計原則。扁平化設計逐漸成為一種設計的潮流，無論在界面設計上，還是在字體、色彩、排版方面上，都有非常鮮明的特點，即簡潔明了，又極具特色；即減少用戶在學習新交互方式過程中的成本，又使功能界定清晰一目了然。自2010年windows phone率先使用扁平化設計開始，它已經成為一種設計風格，并且是當今最潮流的設計趨勢。如果將這種設計原則運用到網頁的界面中，那么將使瀏覽者的操作變得更加舒適、簡單，能讓用戶更加專注于內容本身，簡單易用。

1 扁平化設計

那么什么是扁平化設計呢？扁平化設計是完全屬于二次元，這個概念最核心的地方就是放棄一切裝飾效果，諸如陰影，透視，紋理，漸變等等能做出3D效果的元素一概不用。所有的元素的邊界都干凈利落，沒有任何羽化，漸變，或者陰影。尤其在手機上，更少的按鈕和選項使得界面干凈整齊，使用起來格外簡潔。可以更加簡單直接的將信息和事物的工作方式展示出來，減少認知障礙的產生。

其實生活中處處可見扁平化設計作品，比如蘋果手機，采用棱角分明的線條，加上蘋果的部分應用設計界面，單色鮮明的對比，非常漂亮。扁平化設計與當下最常見擬物化設計形成鮮明對比，Android系統界面均采用擬物化，蘋果IOS系統也采用擬物化，但作為手機領域的風向標品牌蘋果手機最新推出的IOS7使用了扁平化設計，鮮明的個性與特點，讓人記憶深刻，是一種非常新穎及簡便的設計美學原則在手機網頁界面設計中運用的典型案例。

2 扁平化設計的原則

然而，不是任何“片面化”的設計形式都可稱為扁平化設計，它還是有自己的設計原則的。Designmodo設計師Carrie Cousins總結了扁平化的五大特點。

（1）拒絕特效——就是扁平化設計僅僅采用二維元素，所有元素都不加元素。

（2）僅使用簡單的元素——就是扁平設計中簡單的UI元素，比如按鈕和圖標。

（3）注重排版——因為扁平化設計要求元素更簡單，排版的重要性就更為突出了，無論文案、字體都應該以簡潔為主。

（4）關注色彩——色彩應采用鮮艷、明亮的顏色，必須擁有很多的色調。

（5）極簡主義——設計中應該驅除任何無關元素，盡可能地僅使用簡單的顏色與文本。

3 扁平化設計在網頁中運用的優勢

一種設計方式的創新，有好的一面，也有不好一面，不是所有的人都能完全的接受新的創新方式。有人會認為扁平化設計在學習時，需要一定的學習成本，傳達的感情也不豐富，甚至過于冰冷。但是一種全新的設計方式的出現，并被大部分人所接受，甚至成為新的設計潮流，那么它的優點必定大于缺點，以下便是扁平化設計這一美學原則在網頁中運用所帶來的各種便捷與優勢。

3.1 界面設計

一個優秀的界面，不僅要獨樹一幟，而且還要簡潔明了，讓用戶使用起來更加簡單、方便、舒適。往常設計師設計的界面往往傾向于擬物化設計，擬物化設計則是通過漸變、陰影、紋理、高光等擬真的視覺效果使得按鈕更加真實，使得用戶看到后擁有一種親切感，但是擬物化設計的按鈕、圖標太過于繁瑣，太過于真實，用久之后用戶會產生視覺疲勞。而在目前所出現的扁平設計中，設計師們使用矩形、圓形、方形等簡單的形狀，不僅在保持高度可用性的前提下盡可能的簡單，而且還保證網站直觀、易用，無需引導。扁平化設計通常采用的菱角分明的形狀來代替擬物化設計中的圓角效果，更加直接和方便，減少用戶在學習新交互方式過程中的成本，功能界定清晰且一目了然。

3.2 字體

在網頁界面設計中，文字是最重要的構成元素之一，具有比其他視覺元素更加易于辨識的信息傳達功能。文字是設計師向用戶傳遞信息的最佳媒介，因此，在網頁界面設計中，字體的設計不僅要考慮到界面的總體設想，更要考慮到瀏覽者的情況。所以在扁平化設計的網頁中，字體的選擇，既要符合扁平化設計的簡約風格，又要符合網頁的整體風格，所以我們應該選擇無襯線字體或者默認字體，這樣更方便用戶游覽和信息的傳達。

3.3 色彩

色彩是網頁界面設計中不可缺少的視覺元素。在網頁界面設計中，色彩總的應用原則是“總體協調，局部對比”。扁平化設計中，色彩的搭配是非常重要的。你可能已經發現了，扁平化設計的網站，應用色彩明顯要比其他風格網站更加炫麗、明亮。此外扁平化設計的項目也擁有更多的色調。比如，其他設計的網站中最多只包含兩三種主要顏色，但是扁平化設計中會平均使用六到八種顏色。另外還有一些顏色也挺受歡迎，如復古色淺橙、紫色、綠色、藍色等……正如圖一優衣庫出品的RECIPE，相對于圖二平常的網頁設計，使用扁平化設計的圖一網站，則顯得更加的明亮，更吸引用戶的眼球。

圖1

圖2

3.4 排版

網頁版面設計，是在有限的屏幕空間將多媒體元素進行有機組合。 其目的在于幫助用戶理解設計。扁平化設計的要求是讓元素更簡單，因此排版的重要性就更為突出了。不僅字體的大小應該匹配整體設計，字形上應該可以使用粗體，而且文案要求精簡、干練，最終保證產品在視覺上和措辭上的一致性。如果一定需要視覺元素，可以添加簡單的圖形，但一定要記得不能過火。

4 總結

在Win8 metro界面中可以發現，有使用了完全的扁平化設計；在蘋果產品及IOS系統中，可以看到部分扁平化設計影子，在Google中，也同樣可以看到準扁平化設計模式，并且在Google中體驗良好。越來越多的網站設計已在UI上走扁平式設計的路線。談到設計，無論是一個網站還是一個應用程序，扁平化和極簡的設計正在成為新的趨勢，人們正在遠離一直很受歡迎的擬物化設計。

隨著網站和應用程序在許多平臺涵蓋了越來越多不同的屏幕尺寸，創建多個屏幕尺寸和分辨率的擬物化設計既繁瑣又費時，網站設計正朝著更加扁平化的設計，可以一次保證在所有的屏幕尺寸上它會很好看。而且，以往網站界面的風格設計潮流基本都是通過擬物化的設計手法來體現，長期使用會產生視覺疲勞。而扁平化設計潮流的出現，使得用戶眼前一亮，極簡主義的風格使得界面更加簡潔明了。但是不管是擬物化還是扁平化，重點不在于追趕潮流，潮流只是一時的流行，只是在改變食物的表面，并沒有改變實質，因此它會慢慢淡去，被新的潮流所替代。設計師設計一款應用的時候，讓外觀充分表現產品的內容才是王道。但有人會認為“扁平化設計”，是簡單的把圓角方形+挑選顏色+使用免費圖標=完事；扁平化設計看起來簡單，設計起來是很難的。設計師只有根據內容要求恰當的使用扁平化設計的美學原則，把精力集中到每一處細節上，將一切元素合理整合，才能設計出沒有絲毫三維、陰影等效果的界面。

[1]張蕓.扁平化設計在網頁上應用的優勢[J].藝術科技,2013,(7):58-59.

[2]韓曉墨.承與發展并重_論扁平化設計的席卷[J].現代裝飾(理論),2013,(7):101-102.

[3]宿子順.能手機界面設計形式與感性價值[J].青春歲月,2013,(7):90-92.

[4]宋方,金錦虹,逯新輝.析“扁平化”手機界面設計[J].包裝工程,2012,(7):110-112.

[5]王水雄.結構博弈:互聯網導致社會扁平化的剖析[M].華夏出版社,2003.

[6](美)Patrick McNeil.網頁設計創意書[M].圖靈編輯部譯.北京:人民郵電出版社,2013.

[7](美)Penny Mcintire.web 視覺設計[M].葉永彬,譯. 北京:機械工業出版社,2008.

[8](美)貝爾德.完美網頁的視覺設計法則[M].石屹,譯. 北京:電子工業出版社,2011.

[9]劉永東.視覺設計基礎[M].北京:中央廣播電視大學出版社,2007.

[10]蔣廣喜.色彩視覺表現·設計色彩[M].天津:天津大學出版社,2010.