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

前言：想要寫出一篇引人入勝的文章？我們特意為您整理了扁平化設(shè)計(jì)在網(wǎng)頁(yè)上的運(yùn)用優(yōu)勢(shì)范文，希望能給你帶來(lái)靈感和參考，敬請(qǐng)閱讀。

一、界面元素設(shè)計(jì)

扁平化設(shè)計(jì)使用的是正方形、長(zhǎng)方形或者多邊形等這樣的基本形狀，這些二維圖形弱化了視覺(jué)上的復(fù)雜性，讓瀏覽者不會(huì)過(guò)多的關(guān)注圖形，而是強(qiáng)化了要表達(dá)的內(nèi)容和信息，更加容易識(shí)別。當(dāng)然，設(shè)計(jì)師也要了解每個(gè)元素所代表的含義與作用，并且應(yīng)使用不同的形式來(lái)加以區(qū)別。扁平化設(shè)計(jì)強(qiáng)調(diào)的是信息本身，而不是繁復(fù)多余的界面元素。瀏覽者在瀏覽網(wǎng)頁(yè)時(shí)，主要是獲取信息，界面元素的主要功能是提示瀏覽者迅速找到他們所需要的信息。扁平化設(shè)計(jì)由于界面元素的簡(jiǎn)單且易于查找，所以更適合那些近視者和弱視者，能幫助到這些有特殊需求的人群。

二、色彩

扁平化設(shè)計(jì)頁(yè)面中，因?yàn)樽非髽O簡(jiǎn)主義，所以沒(méi)有其他多余的裝飾。因此，設(shè)計(jì)者在設(shè)計(jì)時(shí)需要更加注意色彩的搭配，這樣將會(huì)收到更好的視覺(jué)效果。從色塊、圖形、導(dǎo)航到版面，色彩是一個(gè)關(guān)鍵的組成元素，好的色彩搭配會(huì)給人帶來(lái)愉悅的心情和完美的視覺(jué)享受。總結(jié)扁平設(shè)計(jì)的色彩搭配大致分為兩種：同類色搭配：同類色搭配，最常用的是把同一種顏色的黑、白、灰三種色調(diào)結(jié)合在一起，形成層次上的對(duì)比。在扁平化設(shè)計(jì)中，單色的使用不僅能分清層次感，同時(shí)也能把握住整體感。如圖1，網(wǎng)頁(yè)的背景使用了一張深灰的圖片，界面元素則使用了紅色系的同類色搭配。在導(dǎo)航部分運(yùn)用了扁平化設(shè)計(jì)的樣式，使用了與標(biāo)志相同顏色的色塊來(lái)展示。設(shè)計(jì)者通過(guò)調(diào)整色彩的飽和度以及透明度使單色產(chǎn)生一定的變化，使頁(yè)面不單調(diào)，反看起來(lái)整體感十足，同時(shí)增加了信息的辨識(shí)度，讓人一目了然。對(duì)比色：對(duì)比色搭配的使用可以使頁(yè)面看起來(lái)極富活力又有豐富的色彩變幻，視覺(jué)效果醒目。在使用對(duì)比色進(jìn)行搭配時(shí)，設(shè)計(jì)師要注意到在設(shè)計(jì)時(shí)應(yīng)當(dāng)先了解網(wǎng)頁(yè)的主題，選用合適的顏色進(jìn)行搭配。如圖2，是一家房地產(chǎn)中心的首頁(yè)，導(dǎo)航部分的扁平化設(shè)計(jì)運(yùn)用了多種顏色來(lái)進(jìn)行搭配。導(dǎo)航中的藍(lán)色，綠色有藍(lán)天，草地的寓意，間接烘托出小區(qū)優(yōu)美的環(huán)境。黃色與藍(lán)紫色是對(duì)比色，對(duì)比色會(huì)帶給人一種色彩撞擊的感覺(jué)，增強(qiáng)了畫面的對(duì)比感，增添活力，使人眼前一亮。整體來(lái)看，網(wǎng)頁(yè)的背景色又與導(dǎo)航的顏色相呼應(yīng)，這樣不僅不會(huì)覺(jué)得顏色雜亂，反而有很好的集中視線的感覺(jué)。

三、布局

扁平化設(shè)計(jì)基本使用的是網(wǎng)格布局，網(wǎng)格布局能使網(wǎng)頁(yè)更便于使用，減少使用過(guò)程中的反復(fù)性，提升識(shí)別性。扁平化設(shè)計(jì)中刪除了網(wǎng)格布局中多余的線條和邊框，使用單純的二維色塊對(duì)頁(yè)面進(jìn)行大膽的分割，色塊上使用大小不一的文字來(lái)標(biāo)示內(nèi)容中心或是使用多標(biāo)題圖片，都可容納更多的內(nèi)容，使每個(gè)圖標(biāo)都有屬于自己的獨(dú)特風(fēng)格，同時(shí)內(nèi)容從一個(gè)邊緣流向另一個(gè)邊緣，在一個(gè)軸上進(jìn)行活動(dòng)，增加了穩(wěn)定感。在頁(yè)面上，扁平化設(shè)計(jì)還會(huì)有大部分的留白，很多交互式設(shè)計(jì)都會(huì)在網(wǎng)頁(yè)中盡可能的添加內(nèi)容，這樣反而讓使用者不能準(zhǔn)確的分辨出網(wǎng)頁(yè)要傳達(dá)的主題是什么，更多的留白空間才能使瀏覽者關(guān)注到主要信息。

四、字體

設(shè)計(jì)師通過(guò)文字來(lái)向?yàn)g覽者傳遞信息，提供導(dǎo)航服務(wù)。而字體的選擇不僅要符合扁平化設(shè)計(jì)的簡(jiǎn)約風(fēng)格，同時(shí)還要符合整個(gè)頁(yè)面主題的設(shè)計(jì)風(fēng)格。一般扁平化風(fēng)格的頁(yè)面會(huì)使用無(wú)襯線的簡(jiǎn)單字體，并且大多只使用一種字體，再通過(guò)對(duì)字體的放大、縮小進(jìn)行排版，文字的不同排版同樣也可以帶來(lái)不同的視覺(jué)體驗(yàn)，例如字號(hào)較大，或是粗體，都能幫助瀏覽者輕易地識(shí)別元素的指定功能，這樣在內(nèi)容上創(chuàng)造了一定的層次感。同時(shí)使用對(duì)比色的字體，可以提升內(nèi)容的易讀性和可讀性。

網(wǎng)站界面風(fēng)格似乎都在遵循著同一種設(shè)計(jì)審美，即：用擬物化的設(shè)計(jì)效果來(lái)突出界面元素的質(zhì)感。隨手打開一個(gè)網(wǎng)頁(yè)，我們就可以看到這樣的設(shè)計(jì)，不免會(huì)產(chǎn)生視覺(jué)疲勞。而扁平化設(shè)計(jì)既簡(jiǎn)單又明了，設(shè)計(jì)起來(lái)也非常方便。扁平化設(shè)計(jì)風(fēng)格的逐漸興起可以看作是對(duì)網(wǎng)頁(yè)界面多年以來(lái)對(duì)過(guò)度設(shè)計(jì)的一次沖擊。設(shè)計(jì)的本質(zhì)是形式服務(wù)于功能，作為設(shè)計(jì)師，我們不僅要考慮視覺(jué)呈現(xiàn)方面的問(wèn)題，而最重要的是應(yīng)當(dāng)關(guān)注到產(chǎn)品的功能上。（本文作者：張蕓 單位：中南民族大學(xué)美術(shù)學(xué)院）