當(dāng)你第一次聽(tīng)見(jiàn)"扁平化設(shè)計(jì)"這個(gè)詞的時(shí)候，你是不是很不以為然?但事實(shí)上扁平化設(shè)計(jì)已經(jīng)搖身一變，成為當(dāng)下網(wǎng)站設(shè)計(jì)時(shí)尚圈的"寵兒"了。在過(guò)去幾年的時(shí)間里，扁平化設(shè)計(jì)發(fā)展速度很驚人，越來(lái)越多的網(wǎng)站已在UI(用戶界面)設(shè)計(jì)方面走上扁平式設(shè)計(jì)的路線。下面小飛就重點(diǎn)介紹一下什么是扁平化設(shè)計(jì)，扁平化設(shè)計(jì)有什么好處，以及我們?cè)诰W(wǎng)站上應(yīng)該怎樣應(yīng)用這種設(shè)計(jì)或者說(shuō)在應(yīng)用過(guò)程中有哪些注意點(diǎn)，一起來(lái)看看吧!

什么是扁平化設(shè)計(jì)?

扁平化的核心概念就在于去掉冗余、厚重和復(fù)雜的裝飾效果，重點(diǎn)突出"信息"本身。舉個(gè)栗子來(lái)說(shuō)，在非扁平化網(wǎng)頁(yè)設(shè)計(jì)中，按鈕常常是3D效果的，看到他們你都可以想象出自己按下這個(gè)按鈕的景象。但扁平化設(shè)計(jì)就不是這樣了，它放棄使用一切能夠做出3D效果的元素比如陰影、透視、漸變等，主要依賴于簡(jiǎn)單的圖像和布局。在UI界面上使用扁平化設(shè)計(jì)，能夠更加簡(jiǎn)單直接的展示信息或事物的工作方式，減少認(rèn)知障礙，能夠給用戶帶來(lái)更加良好的體驗(yàn)。

扁平化設(shè)計(jì)的好處：

近幾年，扁平化設(shè)計(jì)越來(lái)越受歡迎，這種現(xiàn)象背后有幾個(gè)主要原因。第一，扁平化設(shè)計(jì)很實(shí)用，與傳統(tǒng)網(wǎng)站相比，應(yīng)用這種設(shè)計(jì)的網(wǎng)站通常加載速度更快，這是因?yàn)樗鼪](méi)有動(dòng)畫(huà)或是復(fù)雜的圖形。另一個(gè)原因是扁平化設(shè)計(jì)更簡(jiǎn)約、條理清晰，可以輕松適用于不同的屏幕尺寸。隨著移動(dòng)設(shè)備在作為網(wǎng)頁(yè)瀏覽工具方面越來(lái)越流行，在網(wǎng)站中使用扁平化設(shè)計(jì)，對(duì)很多需要同時(shí)面對(duì)電腦和移動(dòng)用戶的站長(zhǎng)來(lái)說(shuō)是一個(gè)很大的優(yōu)勢(shì)。第三個(gè)原因是與扁平化設(shè)計(jì)所呈現(xiàn)的美感有關(guān)。簡(jiǎn)單、用戶友好的布局是扁平化設(shè)計(jì)的主要特征，與華麗的設(shè)計(jì)相比，很多設(shè)計(jì)師和用戶都被扁平化極簡(jiǎn)主義的風(fēng)格吸引，心中的天平都在往這邊傾斜。一個(gè)很好的栗子就是蘋果公司拋棄了IOS陳舊的設(shè)計(jì)，選用扁平化，設(shè)計(jì)出更加清晰的外觀。

在網(wǎng)站中怎樣使用扁平化設(shè)計(jì)?

在網(wǎng)站中使用扁平化設(shè)計(jì)，不僅有上面提到的那些好處，還能讓用戶們知道我們是緊跟設(shè)計(jì)潮流的。下面是一些關(guān)于在網(wǎng)站中怎樣使用扁平化設(shè)計(jì)的建議：

1.選擇簡(jiǎn)單的背景

忘掉那些華麗的或復(fù)雜的磚墻式圖片。在扁平化設(shè)計(jì)中，應(yīng)該選用樸素、淡雅的顏色或是色調(diào)相近的顏色。

2.拒絕特效

在扁平化設(shè)計(jì)中不要有陰影、高光或是動(dòng)畫(huà)特效。就像我們之前了解扁平化設(shè)計(jì)的定義一樣，它就是要避免在設(shè)計(jì)中使用任何透視、紋理或能做出3D效果的元素。所有元素的邊界都應(yīng)干凈利落，沒(méi)有任何羽化、漸變。

3.使用圖標(biāo)

扁平化設(shè)計(jì)經(jīng)常使用圖標(biāo)，這是因?yàn)閳D標(biāo)可以用來(lái)提供簡(jiǎn)單、流線型的用戶體驗(yàn)。圖標(biāo)不僅方便用戶點(diǎn)擊，另外由于用戶憑經(jīng)驗(yàn)?zāi)艽蟾胖烂總€(gè)圖標(biāo)代表了什么 ，還可以極大的減少用戶學(xué)習(xí)新交互方式的成本。所以在網(wǎng)站設(shè)計(jì)中記得使用圖標(biāo)，但是也要確保圖標(biāo)是通用的、大家都知道的，不受地域、種族、文化、語(yǔ)言等因素影響的。如果我們使用的圖標(biāo)不能很快容易被訪問(wèn)者們理解，使用它們還有什么意義呢?

4.玩轉(zhuǎn)各種圖形

各種各樣的圖形在扁平化設(shè)計(jì)中很流行。圓形、正方形和線條不僅是設(shè)計(jì)布局美化的一個(gè)元素，還可以作為網(wǎng)站內(nèi)容的分界線，讓每個(gè)部分內(nèi)容的層次更加分明，有助于訪問(wèn)者明白網(wǎng)站每個(gè)頁(yè)面的整體框架。

5.慣用明亮配色

配色在網(wǎng)站中的重要性，相信大家都深有體會(huì)了，小飛在這就不多說(shuō)了。扁平化設(shè)計(jì)通常采用比其他風(fēng)格更明亮、絢麗的顏色，就像粉紅色、藍(lán)色、綠色和黃色等在這種設(shè)計(jì)中都很常見(jiàn)。但是，這種設(shè)計(jì)風(fēng)格往往傾向于使用單色調(diào)，甚至是純色，還有一點(diǎn)要注意的是這些顏色的使用不要太過(guò)，一個(gè)頁(yè)面最好不要使用超過(guò)3種顏色，太多的顏色會(huì)讓網(wǎng)站看起來(lái)凌亂、沒(méi)有美感。

6.主菜單清晰

主菜單、按鈕以及所有的鏈接都應(yīng)該看起來(lái)很簡(jiǎn)潔、清晰，不要有任何陰影或強(qiáng)調(diào)效果。一般而言，在扁平化設(shè)計(jì)中，按鈕常放在一個(gè)簡(jiǎn)單的框(矩形或圓形)里面，或者以更加簡(jiǎn)潔的設(shè)計(jì)方法：什么圖形都不用，只使用文本本身。

7.重視字體排版

目前文本已經(jīng)成為一種重要的可視化元素，扁平化設(shè)計(jì)鼓勵(lì)在網(wǎng)站上使用大膽、創(chuàng)新的字體和排版，這能讓網(wǎng)頁(yè)充滿趣味，不單調(diào)。不過(guò)要記得任何時(shí)候都不能為了時(shí)尚或噱頭犧牲字體的可讀性，如果用戶無(wú)法正常瀏覽網(wǎng)站，還談什么排版和設(shè)計(jì)風(fēng)格。

8.使用起飛頁(yè)的模板

在 起飛頁(yè)自助建站平臺(tái)（），這有一些扁平化設(shè)計(jì)的模板，您只需點(diǎn)擊一下就可以使用它們，能幫您節(jié)約不少時(shí)間和精力。

網(wǎng)頁(yè)設(shè)計(jì)的潮流和大眾的審美觀念一直在變，扁平化設(shè)計(jì)的風(fēng)能夠吹多久誰(shuí)也不知道。我們能做就是緊跟時(shí)代的潮流，做好當(dāng)下的事，所以快來(lái)起飛頁(yè)自助建站平臺(tái)做一個(gè)屬于自己的扁平化設(shè)計(jì)風(fēng)格的網(wǎng)站吧。