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

李立欽 劉潤乾

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

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

引言

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

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

（一）一致性原則

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

（二）對比性原則

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

（三）用戶需求性原則

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

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

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

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

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

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

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

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

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

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

結(jié)論

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

參考文獻(xiàn)

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

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

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