任冬巧 楊春燕

（嘉興學(xué)院，浙江 嘉興 314001）

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

1 扁平化設(shè)計(jì)

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

其實(shí)生活中處處可見扁平化設(shè)計(jì)作品，比如蘋果手機(jī)，采用棱角分明的線條，加上蘋果的部分應(yīng)用設(shè)計(jì)界面，單色鮮明的對(duì)比，非常漂亮。扁平化設(shè)計(jì)與當(dāng)下最常見擬物化設(shè)計(jì)形成鮮明對(duì)比，Android系統(tǒng)界面均采用擬物化，蘋果IOS系統(tǒng)也采用擬物化，但作為手機(jī)領(lǐng)域的風(fēng)向標(biāo)品牌蘋果手機(jī)最新推出的IOS7使用了扁平化設(shè)計(jì)，鮮明的個(gè)性與特點(diǎn)，讓人記憶深刻，是一種非常新穎及簡(jiǎn)便的設(shè)計(jì)美學(xué)原則在手機(jī)網(wǎng)頁(yè)界面設(shè)計(jì)中運(yùn)用的典型案例。

2 扁平化設(shè)計(jì)的原則

然而，不是任何“片面化”的設(shè)計(jì)形式都可稱為扁平化設(shè)計(jì)，它還是有自己的設(shè)計(jì)原則的。Designmodo設(shè)計(jì)師Carrie Cousins總結(jié)了扁平化的五大特點(diǎn)。

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

（2）僅使用簡(jiǎn)單的元素——就是扁平設(shè)計(jì)中簡(jiǎn)單的UI元素，比如按鈕和圖標(biāo)。

（3）注重排版——因?yàn)楸馄交O(shè)計(jì)要求元素更簡(jiǎn)單，排版的重要性就更為突出了，無論文案、字體都應(yīng)該以簡(jiǎn)潔為主。

（4）關(guān)注色彩——色彩應(yīng)采用鮮艷、明亮的顏色，必須擁有很多的色調(diào)。

（5）極簡(jiǎn)主義——設(shè)計(jì)中應(yīng)該驅(qū)除任何無關(guān)元素，盡可能地僅使用簡(jiǎn)單的顏色與文本。

3 扁平化設(shè)計(jì)在網(wǎng)頁(yè)中運(yùn)用的優(yōu)勢(shì)

一種設(shè)計(jì)方式的創(chuàng)新，有好的一面，也有不好一面，不是所有的人都能完全的接受新的創(chuàng)新方式。有人會(huì)認(rèn)為扁平化設(shè)計(jì)在學(xué)習(xí)時(shí)，需要一定的學(xué)習(xí)成本，傳達(dá)的感情也不豐富，甚至過于冰冷。但是一種全新的設(shè)計(jì)方式的出現(xiàn)，并被大部分人所接受，甚至成為新的設(shè)計(jì)潮流，那么它的優(yōu)點(diǎn)必定大于缺點(diǎn)，以下便是扁平化設(shè)計(jì)這一美學(xué)原則在網(wǎng)頁(yè)中運(yùn)用所帶來的各種便捷與優(yōu)勢(shì)。

3.1 界面設(shè)計(jì)

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

3.2 字體

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

3.3 色彩

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

圖1

圖2

3.4 排版

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

4 總結(jié)

在Win8 metro界面中可以發(fā)現(xiàn)，有使用了完全的扁平化設(shè)計(jì)；在蘋果產(chǎn)品及IOS系統(tǒng)中，可以看到部分扁平化設(shè)計(jì)影子，在Google中，也同樣可以看到準(zhǔn)扁平化設(shè)計(jì)模式，并且在Google中體驗(yàn)良好。越來越多的網(wǎng)站設(shè)計(jì)已在UI上走扁平式設(shè)計(jì)的路線。談到設(shè)計(jì)，無論是一個(gè)網(wǎng)站還是一個(gè)應(yīng)用程序，扁平化和極簡(jiǎn)的設(shè)計(jì)正在成為新的趨勢(shì)，人們正在遠(yuǎn)離一直很受歡迎的擬物化設(shè)計(jì)。

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

[1]張蕓.扁平化設(shè)計(jì)在網(wǎng)頁(yè)上應(yīng)用的優(yōu)勢(shì)[J].藝術(shù)科技,2013,(7):58-59.

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

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

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

[5]王水雄.結(jié)構(gòu)博弈:互聯(lián)網(wǎng)導(dǎo)致社會(huì)扁平化的剖析[M].華夏出版社,2003.

[6](美)Patrick McNeil.網(wǎng)頁(yè)設(shè)計(jì)創(chuàng)意書[M].圖靈編輯部譯.北京:人民郵電出版社,2013.

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

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

[9]劉永東.視覺設(shè)計(jì)基礎(chǔ)[M].北京:中央廣播電視大學(xué)出版社,2007.

[10]蔣廣喜.色彩視覺表現(xiàn)·設(shè)計(jì)色彩[M].天津:天津大學(xué)出版社,2010.