扁平化風(fēng)格在網(wǎng)頁界面設(shè)計(jì)中的應(yīng)用

楊曄

摘要：扁平風(fēng)格設(shè)計(jì)在現(xiàn)代計(jì)算機(jī)設(shè)計(jì)領(lǐng)域中被廣泛的應(yīng)用，隨著融合了扁平化設(shè)計(jì)的Windows8系統(tǒng)發(fā)布之后，在大多數(shù)網(wǎng)站設(shè)計(jì)中，逐漸開始應(yīng)用到扁平化設(shè)計(jì)這一設(shè)計(jì)風(fēng)格。本文根據(jù)現(xiàn)代網(wǎng)頁設(shè)計(jì)中的主要發(fā)展趨勢，將扁平化設(shè)計(jì)風(fēng)格在其中的應(yīng)用以及效果進(jìn)行詳細(xì)的分析。

關(guān)鍵詞：扁平化；網(wǎng)頁界面；設(shè)計(jì)；應(yīng)用

扁平化設(shè)計(jì)風(fēng)格在現(xiàn)代網(wǎng)頁設(shè)計(jì)中屬于新型的風(fēng)格設(shè)計(jì)類型，主要是將原本網(wǎng)頁中較為擬物化的界面轉(zhuǎn)變?yōu)椤捌健钡慕缑妫@種界面在形式上更加簡單，能夠幫助用戶將思路變得更為明晰，使用戶在進(jìn)行使用的過程中，能夠高效快速的進(jìn)行辦公類活動(dòng)。

一、扁平化風(fēng)格的基本概念

（一）基本概念

扁平化設(shè)計(jì)的基本概念是：追求一種扁平化內(nèi)容，將原本流行多年的透視、紋理、高光等一切有關(guān)于擬真視覺效果的內(nèi)容轉(zhuǎn)變，應(yīng)用顏色幫助用戶實(shí)現(xiàn)交互內(nèi)容，排除原本的陰影、羽化、漸變等效果，使界面整體變得干凈利落，突出信息的本身內(nèi)容。

（二）設(shè)計(jì)原則

（1）一致性。為了改善用戶的體驗(yàn)，幫助服務(wù)的更加易用性，采用一致性的設(shè)計(jì)形式，讓用戶在使用的過程中，能夠建立起相同的心智模型，保證用戶的快速理解。

（2）對(duì)比。色彩等方面的配比能夠幫助用戶將界面中的按鍵和感官中的按鍵進(jìn)行區(qū)分，將不同的色彩進(jìn)行渲染，保證用戶在使用的過程中，能夠直接明了的了解內(nèi)容。

（3）布局。在布局上幫助用戶的感官產(chǎn)生平衡的感覺，采用簡單的布局設(shè)計(jì)，讓用戶能夠直接進(jìn)行相關(guān)內(nèi)容的查詢，引導(dǎo)用戶跟隨設(shè)計(jì)所指定的路線進(jìn)行搜尋，使其最大限度的簡潔化。

（4）減少摩擦力。創(chuàng)造用戶的通暢體驗(yàn)就需要降低用戶實(shí)現(xiàn)目標(biāo)所用的時(shí)間和環(huán)節(jié)，所以，在設(shè)計(jì)的過程中，不論哪種類型都進(jìn)行簡潔化的設(shè)計(jì)。

（5）用戶需求。用戶需求會(huì)根據(jù)不同的類型選擇，多元化用戶的選擇風(fēng)格自然是多元化的，時(shí)尚領(lǐng)域中的用戶可能對(duì)扁平化風(fēng)格的簡潔較為喜愛，而在普通大眾的眼中，這種風(fēng)格設(shè)計(jì)與原本的傳統(tǒng)風(fēng)格有著較大的差異，用戶可能并不會(huì)全部適應(yīng)。

二、扁平化風(fēng)格在網(wǎng)頁設(shè)計(jì)中的運(yùn)用

網(wǎng)頁設(shè)計(jì)在現(xiàn)代計(jì)算機(jī)領(lǐng)域中是較為重要的一項(xiàng)設(shè)計(jì)內(nèi)容，其不僅能夠在視覺上幫助語言的傳導(dǎo)，更能夠根據(jù)排版的不同和布局的不同來轉(zhuǎn)變用戶的視覺視角，使用戶在使用的過程中，能夠產(chǎn)生視覺特效的感覺。為了能夠更享受視覺特效，排版布局的合理性成為了主要設(shè)計(jì)的內(nèi)容。

（1）布局排版。扁平化設(shè)計(jì)在進(jìn)行排版的過程中，需要將首頁的標(biāo)識(shí)和導(dǎo)航首先進(jìn)行編排，一般會(huì)將首頁的標(biāo)示選在主要的視覺區(qū)，導(dǎo)航等內(nèi)容也盡可能的實(shí)現(xiàn)簡化的設(shè)計(jì)，圖片在設(shè)計(jì)的過程中，一般會(huì)在大面積的排版內(nèi)，將一些用戶覺得有趣的內(nèi)容進(jìn)行放置，保證在用戶進(jìn)入主面時(shí)，能夠直接看到感興趣的內(nèi)容，幫助用戶進(jìn)行更為快捷的活動(dòng)。

（2）內(nèi)容組織。扁平化風(fēng)格在設(shè)計(jì)的過程中，并不是將設(shè)計(jì)的內(nèi)容也變得簡單，而是將設(shè)計(jì)的內(nèi)容主要的核心突顯出來，在新的設(shè)計(jì)風(fēng)格影響下，網(wǎng)頁的設(shè)計(jì)還需要將內(nèi)容作為主體，不論外觀多么吸引用戶的視覺，但在內(nèi)容的設(shè)計(jì)上，還需要進(jìn)行更深層次的考慮，保證網(wǎng)頁的內(nèi)容能夠有效的將用戶的注意力吸引過來。

（3）網(wǎng)頁欄目。網(wǎng)頁欄目主要是將網(wǎng)頁中的一些主要的內(nèi)容進(jìn)行歸納，將網(wǎng)頁中的一些核心的內(nèi)容首先突出的顯示出來，保證在用戶進(jìn)入網(wǎng)站之后，能夠直接將自身需要找尋的內(nèi)容看到，方便用戶的直觀體驗(yàn)。

（4）交互性動(dòng)畫。交互性動(dòng)畫在主要指的是，在鼠標(biāo)停住在圖片或者視頻上時(shí)，能夠直接將視頻或者圖片中所包含的信息顯示出來，另外，還有一種是點(diǎn)、線之間的交互設(shè)計(jì)，通過鼠標(biāo)的拖動(dòng)將點(diǎn)、線構(gòu)成多樣化的圖形內(nèi)容，在邏輯的層面上，極大的減少了繁瑣的層次，使用戶在使用時(shí)，能夠更加簡潔快速。

（5）首頁設(shè)計(jì)。一般在用戶進(jìn)行瀏覽網(wǎng)頁的過程中，首先進(jìn)入的是網(wǎng)頁的首頁界面，在這一過程中，設(shè)計(jì)者需要保證首頁界面能夠第一時(shí)間將用戶的視覺停駐，讓用戶在瀏覽的同時(shí)，找尋到自身所關(guān)注的內(nèi)容。

（6）標(biāo)識(shí)設(shè)計(jì)。標(biāo)識(shí)設(shè)計(jì)主要在網(wǎng)頁中的特定位置，一般情況下將其放置在網(wǎng)頁的左上方，為了更加方便用戶的尋找，這也是大多數(shù)的網(wǎng)頁的設(shè)計(jì)方式。

（7）導(dǎo)航設(shè)計(jì)。在進(jìn)行導(dǎo)航設(shè)計(jì)的過程中，首先考慮的使用戶的使用方便性，為了防止用戶在使用過程中，產(chǎn)生迷路的情況，在設(shè)置導(dǎo)航功能的時(shí)候，要將導(dǎo)航的位置選在明顯的地方，同時(shí)，還要將導(dǎo)航中的一些漸變的效果去除，將簡單的色彩作為主要的使用背景，并將導(dǎo)航的說明附加其上，這樣就能夠幫助用戶最快的識(shí)別導(dǎo)航的標(biāo)識(shí)。

（8）文本設(shè)計(jì)。為了讓使用者在使用的過程中，能夠?qū)⒂杏玫男畔⒖焖俚奶釤挘谠O(shè)計(jì)這些內(nèi)容時(shí)，需要將實(shí)用性放在首位，通過扁平化設(shè)計(jì)的風(fēng)格，將網(wǎng)頁主要內(nèi)容中的文字區(qū)域進(jìn)行特殊的區(qū)分，這樣才能有效的幫助用戶分辨選擇的內(nèi)容，從而提升了使用的效率。

（9）圖片設(shè)計(jì)。這一部分的設(shè)計(jì)也能夠主要突出網(wǎng)頁中的重要內(nèi)容，選用圖片能夠直接影響到網(wǎng)頁的瀏覽效果，越是全新的設(shè)計(jì)風(fēng)格類型，越能夠吸引用戶的眼球，在扁平化風(fēng)格的影響下，能夠讓設(shè)計(jì)的內(nèi)容變得簡單有效，通過極少的裝飾內(nèi)容來進(jìn)行設(shè)計(jì)，不僅能夠?qū)D片設(shè)計(jì)的內(nèi)容突顯出來，更能夠節(jié)省用戶的找尋時(shí)間，快速的幫助用戶提升辦公活動(dòng)速度。

三、扁平化風(fēng)格在網(wǎng)頁設(shè)計(jì)中的效果分析

（一）效果分析

扁平化風(fēng)格設(shè)計(jì)的使用，能夠讓用戶在信息層面上將應(yīng)用的過程簡化，一定程度上幫助系統(tǒng)更為流暢的運(yùn)行，傳統(tǒng)的設(shè)備運(yùn)行的過程中，會(huì)因?yàn)橛行┵Y源不能使用同一軟件進(jìn)行設(shè)定而出現(xiàn)下載多軟件的情況，極大的降低了設(shè)備運(yùn)行的速度。而扁平化風(fēng)格設(shè)計(jì)在使用的過程中，能夠有效的將設(shè)計(jì)的內(nèi)容簡單化，信息資源在進(jìn)行多層次的表現(xiàn)時(shí)，沒有多余的內(nèi)容，直接由前一層轉(zhuǎn)移到下一層的信息中不用多余的操作就能將信息快速的瀏覽完畢。

（二）優(yōu)化設(shè)計(jì)

交互設(shè)計(jì)的方式要保證按鍵和圖片的表現(xiàn)更加簡單，和整體的搭配要協(xié)調(diào)，同時(shí)還要將各個(gè)頁面之間的跳轉(zhuǎn)變得指向性更加鮮明一些。在進(jìn)行文字設(shè)計(jì)的過程中，選用文字的類型要更加突顯文字的線條感，使其在展現(xiàn)出來時(shí)，能夠更加飽滿。而在色彩的搭配中，需要將網(wǎng)頁設(shè)計(jì)的主要內(nèi)容體現(xiàn)出來，色彩要選用一些鮮明的進(jìn)行填充，同時(shí)，還要保證輔助色的搭配，保證在選擇的過程中，能夠和主體內(nèi)容形成一種富有層次感的效果。

四、結(jié)論

扁平化設(shè)計(jì)風(fēng)格主要是將原本的多元化的表現(xiàn)形式進(jìn)行簡化，方便用戶體現(xiàn)的同時(shí)，也能考驗(yàn)設(shè)計(jì)人員的表現(xiàn)能力，怎樣在簡潔的設(shè)計(jì)中找出突顯設(shè)計(jì)內(nèi)容的方式，成了現(xiàn)代設(shè)計(jì)人員主要思考的問題。

參考文獻(xiàn)：

[1]秦歲明，何夢楠.扁平化風(fēng)格在網(wǎng)頁界面設(shè)計(jì)中的應(yīng)用[J].包裝工程，2015（3）.

[2]龔波.網(wǎng)頁界面設(shè)計(jì)的視覺要素探究[J].信息記錄材料，2018（3）.