李立欽 劉潤(rùn)乾

摘 要：現(xiàn)如今信息網(wǎng)絡(luò)技術(shù)的日趨發(fā)達(dá)對(duì)于網(wǎng)頁(yè)界面設(shè)計(jì)提出了更高的要求，而以Windows8系統(tǒng)為代表的扁平化風(fēng)格引領(lǐng)了網(wǎng)頁(yè)界面設(shè)計(jì)領(lǐng)域的全新潮流。本文簡(jiǎn)要分析了網(wǎng)頁(yè)界面扁平化設(shè)計(jì)的主要原則，從網(wǎng)頁(yè)界面排版布局、網(wǎng)頁(yè)界面圖形配色等兩個(gè)層面入手，探討了扁平化風(fēng)格在網(wǎng)頁(yè)界面設(shè)計(jì)中的具體應(yīng)用，以供參考。

關(guān)鍵詞：網(wǎng)頁(yè)界面設(shè)計(jì);扁平化風(fēng)格;排版布局;圖形配色

引言

扁平化風(fēng)格實(shí)則是后現(xiàn)代主義理念的延伸，將簡(jiǎn)約、經(jīng)濟(jì)設(shè)定為設(shè)計(jì)的核心關(guān)鍵詞，強(qiáng)調(diào)設(shè)計(jì)應(yīng)當(dāng)追求簡(jiǎn)潔化與人文主義風(fēng)格，將一切多余、繁復(fù)的裝飾予以刨除，杜絕渲染與特效，將產(chǎn)品的功能直觀的呈現(xiàn)給受眾，提高信息的識(shí)別性與存儲(chǔ)能力，更適用于當(dāng)前信息爆炸時(shí)代現(xiàn)代人的信息獲取需要，符合現(xiàn)代人的審美需求。

一、網(wǎng)頁(yè)界面扁平化設(shè)計(jì)的主要原則

（一）一致性原則

扁平化設(shè)計(jì)的核心理念便是追求內(nèi)容與形式的整體扁平化設(shè)計(jì)，確保能夠在設(shè)計(jì)樣式方面保持一致性，優(yōu)化用戶的使用體驗(yàn)，引導(dǎo)用戶在點(diǎn)擊界面時(shí)能夠構(gòu)建相同的心智模型，深化用戶的理解[1]。

（二）對(duì)比性原則

扁平化設(shè)計(jì)并不意味著視覺(jué)效果的單一，相反追求借助色彩的和諧配比增添界面的層次感與濃度，確保能夠?qū)⒉煌存I進(jìn)行有效區(qū)分，引導(dǎo)用戶在使用的過(guò)程中能夠一目了然的掌握其內(nèi)容要義。

（三）用戶需求性原則

扁平化設(shè)計(jì)的最終目標(biāo)便是滿足用戶需求，為差異性用戶群體提供多元化選擇，以此來(lái)滿足絕大多數(shù)用戶的共性要求，進(jìn)而借助其細(xì)節(jié)設(shè)計(jì)擴(kuò)展用戶需求的覆蓋面積，進(jìn)一步贏得用戶的喜愛。

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

（一）在網(wǎng)頁(yè)界面排版布局中應(yīng)用扁平化風(fēng)格

作為現(xiàn)代計(jì)算機(jī)領(lǐng)域不可或缺的一部分，網(wǎng)頁(yè)設(shè)計(jì)主要依托視覺(jué)效應(yīng)將語(yǔ)言向受眾進(jìn)行傳導(dǎo)，借助排版、布局等方面的差異化設(shè)計(jì)實(shí)現(xiàn)用戶視角的巧妙轉(zhuǎn)變，為用戶視覺(jué)體驗(yàn)的豐富貢獻(xiàn)了有效價(jià)值。因此我們可以立足于現(xiàn)代人需求角度，在網(wǎng)頁(yè)界面排版布局中應(yīng)用扁平化風(fēng)格，使視覺(jué)設(shè)計(jì)更好的為用戶提供服務(wù)。具體來(lái)說(shuō)可以從以下兩方面入手：

一方面從排版布局角度入手，主要需在版面、欄目、導(dǎo)航、標(biāo)識(shí)等方面運(yùn)用扁平化設(shè)計(jì)。具體來(lái)說(shuō)，應(yīng)當(dāng)注重在排版時(shí)將首頁(yè)標(biāo)識(shí)與導(dǎo)航進(jìn)行合理排布，通常在主視覺(jué)區(qū)內(nèi)應(yīng)當(dāng)放置首頁(yè)的標(biāo)識(shí)，這樣可以使用戶點(diǎn)擊網(wǎng)頁(yè)時(shí)一目了然的明確網(wǎng)頁(yè)的大體內(nèi)容方向，還要注重針對(duì)導(dǎo)航內(nèi)容進(jìn)行精簡(jiǎn)化設(shè)計(jì)，確保能夠使用戶在最短時(shí)間內(nèi)捕捉到導(dǎo)航的不同功能，選取自己所需要的服務(wù)。在面積較大的板塊中，還可以適當(dāng)結(jié)合用戶需求創(chuàng)設(shè)部分具有獨(dú)特趣味性的內(nèi)容，使用戶在點(diǎn)進(jìn)網(wǎng)頁(yè)時(shí)注意力能夠第一時(shí)間被吸引。在進(jìn)行欄目設(shè)計(jì)時(shí)，通常需要將網(wǎng)頁(yè)中涵蓋的主體內(nèi)容進(jìn)行概括整理，確保在欄目中突出核心內(nèi)容，在用戶點(diǎn)進(jìn)網(wǎng)頁(yè)時(shí)能夠剛好與用戶需求相符合，賦予用戶以直觀形象的體驗(yàn)感。在進(jìn)行首頁(yè)標(biāo)識(shí)設(shè)計(jì)時(shí)，通常應(yīng)將標(biāo)識(shí)排布在界面的左上方位置，便于用戶最短時(shí)間內(nèi)查找到自身所需要的內(nèi)容。在進(jìn)行導(dǎo)航設(shè)計(jì)時(shí)，應(yīng)當(dāng)基于便捷角度進(jìn)行導(dǎo)航設(shè)計(jì)，確保將導(dǎo)航放置在醒目位置，并將其中的一些漸變、陰影等效果去除，確保色彩簡(jiǎn)潔、飽和度適中，并添加相應(yīng)的指示說(shuō)明，以此確保用戶能夠最短時(shí)間內(nèi)尋求到導(dǎo)航標(biāo)識(shí)，查詢到其所需信息。

另一方面從內(nèi)容與效果層面入手，應(yīng)當(dāng)強(qiáng)化內(nèi)容在網(wǎng)頁(yè)界面設(shè)計(jì)中的主體性地位，依據(jù)用戶需求與注意力進(jìn)行內(nèi)容的選擇，確保內(nèi)容的實(shí)用性突出，能夠滿足用戶的知識(shí)獲取需求，還要針對(duì)主要內(nèi)容的文字部分進(jìn)行特殊區(qū)分，以此更好的使用戶明確重點(diǎn)，提升網(wǎng)頁(yè)的實(shí)際使用效率。在進(jìn)行網(wǎng)頁(yè)的視覺(jué)效果設(shè)計(jì)時(shí)，應(yīng)當(dāng)注重圖片與動(dòng)畫的選擇，盡量減少繁瑣的裝飾，在圖片設(shè)計(jì)上也要兼顧整體的簡(jiǎn)約風(fēng)格，使用戶一目了然的明確內(nèi)容主旨。還應(yīng)當(dāng)注重交互性動(dòng)畫的設(shè)計(jì)，借助簡(jiǎn)潔的點(diǎn)、線等圖形將內(nèi)容、圖片或視頻信息進(jìn)行大體展示，以便進(jìn)一步提高用戶在使用過(guò)程中的便捷性。以IOS系統(tǒng)中的網(wǎng)頁(yè)界面設(shè)計(jì)為例，該系統(tǒng)主要使用ultra light作為頁(yè)面字體，其無(wú)襯線設(shè)計(jì)既具有時(shí)尚感又優(yōu)化了頁(yè)面視覺(jué)效果，行距的恰當(dāng)設(shè)計(jì)以及文本與圖片位置的巧妙排布給人以較強(qiáng)的舒適感體驗(yàn)，深受用戶的青睞。

（二）在網(wǎng)頁(yè)界面圖形配色中應(yīng)用扁平化風(fēng)格

除整體網(wǎng)頁(yè)界面的排版布局之外，還可以從圖形、配色等細(xì)節(jié)層面進(jìn)行扁平化風(fēng)格的有機(jī)運(yùn)用。

其一從圖形角度入手，相較于如今網(wǎng)絡(luò)環(huán)境中大量充斥著的具有仿真效果的圖形形態(tài)而言，扁平化風(fēng)格的圖形通常只運(yùn)用了圖形的基本形態(tài)，例如將幾何形、直線、曲線等圖形進(jìn)行排列組合，以此來(lái)構(gòu)建簡(jiǎn)潔直觀的界面風(fēng)格。以Mac系統(tǒng)的界面設(shè)計(jì)為例，其圖形設(shè)計(jì)便顯著運(yùn)用了扁平化元素，界面共包含放大鏡、書本、鉆石、靶心、國(guó)旗等八個(gè)圖形元素，以深色圓形為底，線條簡(jiǎn)潔、勾勒清晰，摒棄了繁雜的裝飾，圖像更具簡(jiǎn)潔性與凝練性[2]。雖然其圖形設(shè)計(jì)較為簡(jiǎn)潔，但設(shè)計(jì)難度也相應(yīng)加大，要求設(shè)計(jì)者在生活中選取不同素材，將事物的圖形特點(diǎn)進(jìn)行高度凝練的概括，借助明確主題還原圖形所傳遞出的符號(hào)意義，從而更好的給予用戶以直觀的使用體驗(yàn)，使用戶的時(shí)間與精力得到有效節(jié)約。

其二從配色角度入手，通常扁平化設(shè)計(jì)在色彩使用上都運(yùn)用了平涂手法，摒棄了借助光影手段塑造的立體感，注重界面的簡(jiǎn)約潔凈感。以Windows8系統(tǒng)為例，該系統(tǒng)的界面便運(yùn)用了扁平化的色彩設(shè)計(jì)風(fēng)格，雖然所選用的色調(diào)差異小，但其層次感與搭配感卻極為豐富，在同一界面中運(yùn)用了MOCHA、TAUPE、TAN、CAMEL、OLIVE等色調(diào)，整體色彩飽和度較低但層次分明，并無(wú)過(guò)多淡化、柔化效果，進(jìn)一步營(yíng)造了舒適的畫面體驗(yàn)。

結(jié)論

總而言之，在當(dāng)前大數(shù)據(jù)時(shí)代，人們每天都要接受大量龐雜的數(shù)據(jù)信息，飽受信息量膨脹問(wèn)題的困擾，相應(yīng)也催生了人們對(duì)于簡(jiǎn)潔、高效視覺(jué)呈現(xiàn)效果的追求。扁平化設(shè)計(jì)便依托其顯著的簡(jiǎn)約風(fēng)格，依靠簡(jiǎn)化形式、濃縮功能的性能優(yōu)勢(shì)贏得了現(xiàn)代人的喜愛與接受，未來(lái)還應(yīng)著重從情感傳遞、審美效果等層面入手進(jìn)行相應(yīng)的調(diào)整與創(chuàng)新，從而更好的實(shí)現(xiàn)對(duì)人們動(dòng)態(tài)需求的有效滿足，進(jìn)一步提升扁平化設(shè)計(jì)效果。

參考文獻(xiàn)

[1]陸原.淺談界面設(shè)計(jì)中的“扁平化”現(xiàn)象[J].南京藝術(shù)學(xué)院學(xué)報(bào)（美術(shù)與設(shè)計(jì)），2014，（6）：213-216.

[2]廖騰峰，陳靜.淺談扁平化設(shè)計(jì)在移動(dòng)終端界面設(shè)計(jì)中的優(yōu)勢(shì)[J].中國(guó)設(shè)備工程，2016，（11）：112-113.

（作者單位：大連工業(yè)大學(xué)藝術(shù)與信息工程學(xué)院藝術(shù)設(shè)計(jì)系）