網(wǎng)頁設(shè)計中扁平化設(shè)計的趨勢探究

【摘要】：隨著新版谷歌和扁平化設(shè)計Windows8的推出與發(fā)展，扁平化設(shè)計的風(fēng)格逐漸廣泛應(yīng)用于各個領(lǐng)域的。隨著融匯了扁平化設(shè)計 Windows8 以及新版谷歌的推出，各類人氣網(wǎng)站紛紛采用這種扁平化的主題設(shè)計的網(wǎng)頁設(shè)計中，通過符號化、抽象化、簡化、的設(shè)計元素來表現(xiàn)，形成網(wǎng)頁設(shè)計的熱門趨勢。

【關(guān)鍵詞】：網(wǎng)頁設(shè)計；扁平化設(shè)計；趨勢探究

網(wǎng)頁扁平化設(shè)計通過符號化、抽象化、簡化、的設(shè)計元素來表現(xiàn)，形成網(wǎng)頁設(shè)計的熱門趨勢[1]。網(wǎng)頁扁平化設(shè)計的應(yīng)用取決于用戶的具體需求和具體產(chǎn)品的實際情況。扁平風(fēng)格比擬物化風(fēng)格更加簡單、直接、明了地將事物、信息、運作方式進(jìn)行展示，極大程度減少了用戶的認(rèn)知障礙。本文就扁平化設(shè)計定義、扁平化設(shè)計原則、扁平化設(shè)計操作、扁平化設(shè)計優(yōu)化這四個方面進(jìn)行網(wǎng)頁扁平化設(shè)計的探究。

一、扁平化設(shè)計定義

扁平化網(wǎng)頁設(shè)計隨著互聯(lián)網(wǎng)的革新而成為熱潮。扁平化設(shè)計指的是改變傳統(tǒng)網(wǎng)頁高光、漸變、陰影等擬真視覺效果，轉(zhuǎn)而打形成條理更清晰、簡約、易于理解和適應(yīng)的“平”面視覺的網(wǎng)頁設(shè)計。扁平化設(shè)計的頁面沒有陰影，而是利用扁平色塊鼓勵用戶進(jìn)行交流互動。同時，扁平化設(shè)計的頁面適度添加深度的元素加深用戶的理解。目前，最典范的扁平化設(shè)計頁面屬 Win8metro 界面和Facebook界面，其在視覺設(shè)計和結(jié)構(gòu)設(shè)計上均趨于扁平化，使用效果更佳，成為使用率極高的網(wǎng)站[2]。

二、扁平化設(shè)計原則

1.用戶需求原則：設(shè)計、時尚、建筑等領(lǐng)域的用戶普遍更喜歡和容易接受網(wǎng)頁扁平化風(fēng)格，應(yīng)根據(jù)不同類型用戶的需求進(jìn)行網(wǎng)頁扁平化設(shè)計。2.一致性原則：扁平化頁面的設(shè)計應(yīng)遵循視覺風(fēng)格和設(shè)計模式一致性原則，建立一致、完整的心智模型，提升整體的應(yīng)用體驗。3.布局原則：頁面布局應(yīng)增強視覺平衡，讓用戶的視線可以隨界面內(nèi)容路徑自然移動。4.對比原則：調(diào)整頁面布局、配色和尺寸使可點擊的界面元素與界面的其他元素在視覺上形成鮮明對比，易于識別、理解，方便應(yīng)用。5.降低摩擦力原則：盡量使界面簡化，減少用戶的目標(biāo)操作，使操作更加流暢，降低應(yīng)用摩擦力[3]。

三、扁平化設(shè)計操作

扁平化網(wǎng)頁設(shè)計尤其專注于頁面的布局與編排，以達(dá)成最佳視覺表現(xiàn)效果，提升用戶的視覺體驗。具體的扁平化設(shè)計根據(jù)扁平化設(shè)計原則主要包括如下幾個方面的操作：

1.版面布局：將首頁的標(biāo)志、主要圖片形象歸入主視覺區(qū)；選擇視覺效果強、符合客戶審美、喜好的圖片設(shè)置在圖片區(qū)域，將圖片區(qū)域規(guī)模適當(dāng)加大使其更加醒目，直觀明了的版面布局使用戶更易于理解和操作。

2.網(wǎng)站的欄目設(shè)置：作為網(wǎng)站最重要的部分，網(wǎng)站欄目承載著網(wǎng)站的基礎(chǔ)內(nèi)容。扁平化的欄目設(shè)置，使各個欄目條理清晰、分類規(guī)范、色彩對比鮮明、易于識別操作，幫助用戶迅速了解、使用、適應(yīng)網(wǎng)站，增加用戶的使用時長。

3.網(wǎng)站的內(nèi)容規(guī)劃：網(wǎng)頁內(nèi)容始終是吸引用戶使用網(wǎng)站的根本因素，是網(wǎng)頁扁平化設(shè)計的核心，是最關(guān)鍵的設(shè)計部分。應(yīng)當(dāng)將網(wǎng)頁內(nèi)容進(jìn)行系統(tǒng)地組織與提煉，在視覺上給予用戶一目了然又漂亮美觀的體驗，從而吸引、留住用戶。

4.扁平化設(shè)計常用的交互動畫設(shè)計：減少點、線、面交互設(shè)計的嵌套和層級，使之直觀顯示，點、線、面的結(jié)構(gòu)不同，拖動點會組成不同圖形；鼠標(biāo)經(jīng)過圖片時顯示該圖片所在信息與欄目。

5.首頁：作為網(wǎng)站的整體形象，首頁用戶視線與行為聚焦的部分。將用戶最關(guān)注、需求的內(nèi)容設(shè)置在首頁。首頁的頁面視覺中心應(yīng)包含平鋪式導(dǎo)航、標(biāo)志、圖片，消除冗余的元素，色彩應(yīng)用鮮明且具有整體性，使用戶一目了然；反復(fù)推敲整體布局，使之合理優(yōu)化，盡可能消除漸變、陰影的擬物效果，為用戶提供流暢的最佳視覺體驗[4]。

6.圖片：作為網(wǎng)站重要組成部分，圖片的美觀度、類型對網(wǎng)站的應(yīng)用產(chǎn)生直接影響。在扁平化設(shè)計中，應(yīng)減少對圖片的修飾，但選擇的圖片質(zhì)量要有保證，使簡約美觀的圖片直觀地展示給用戶，方便用戶使用。

7.網(wǎng)站標(biāo)志：將網(wǎng)頁標(biāo)志設(shè)置在網(wǎng)站頁面的突出、固定位置；通常將標(biāo)志設(shè)置在網(wǎng)站頁面的左上方更符合用戶的視覺熱區(qū)與使用習(xí)慣，能夠方便用戶查找和使用，提高網(wǎng)站使用效率。

8.文本：文字內(nèi)容是網(wǎng)站核心內(nèi)容，保證了網(wǎng)站的可用性，涵蓋與用戶相關(guān)的各類文本內(nèi)容。在扁平化設(shè)計中，應(yīng)為網(wǎng)站提供優(yōu)質(zhì)的文本內(nèi)容，將重要的字段、文字進(jìn)行鮮明區(qū)分，便于用戶讀取重點內(nèi)容，提高用戶的使用效率，節(jié)省用戶的時間。

9.導(dǎo)航：網(wǎng)站導(dǎo)航具有引導(dǎo)用戶使用網(wǎng)站，為用戶在應(yīng)用網(wǎng)頁的過程中提供方向的基礎(chǔ)作用。在扁平化設(shè)計中，應(yīng)當(dāng)消除導(dǎo)航欄的漸變和質(zhì)感，單純使用色塊作為背景，用色彩鮮明突出導(dǎo)航欄上的文字，讓用戶通過醒目的導(dǎo)航迅速地定位相關(guān)內(nèi)容地頁面。

四、扁平化設(shè)計優(yōu)化

1.網(wǎng)站頁面設(shè)計優(yōu)化：選擇網(wǎng)站使用圖片應(yīng)更為慎重，不但保證圖片的質(zhì)量與簡潔度，還要求圖片與網(wǎng)站的整體風(fēng)格具有協(xié)調(diào)一致性，從而進(jìn)一步加深用戶對信息的印象，充分發(fā)揮圖片的導(dǎo)向作用。在首頁設(shè)計中適當(dāng)增加交互設(shè)計，在視覺上給用戶更為親切的體驗。

2.網(wǎng)站的交互設(shè)計優(yōu)化：（1）圖片瀏覽的呈現(xiàn)方式：呈現(xiàn)方式盡可能簡潔、易操作。（2）按鈕的交互性：使按鈕更突出、與畫面協(xié)調(diào)、易點擊。（3）各頁面之前的鏈接：具有明確指向，使用戶在使用時跳轉(zhuǎn)順暢。

3.色彩協(xié)調(diào)搭配：色彩協(xié)調(diào)搭配是扁平化網(wǎng)站優(yōu)化設(shè)計的重點內(nèi)容，注重強調(diào)在色彩搭配中突出鮮明對比內(nèi)容，提升用戶視覺感受，給其耳目一新的感覺。進(jìn)行扁平化網(wǎng)站優(yōu)化前，先對圖片顏色、網(wǎng)站搭配、用戶需求進(jìn)行綜合調(diào)查、研究。考量用戶情緒體驗，選用不同主題的色彩，傾向使用暖色調(diào)的色彩，幫助用戶獲得良好的情緒。輔色調(diào)的選擇以近似色為主，使用戶在視覺上獲得富有層次感和統(tǒng)一性的色彩享受。

4.文字設(shè)計：進(jìn)行扁平化網(wǎng)站優(yōu)化時，應(yīng)減少使用特殊字體，符合大眾使用需求。微軟雅黑作為目前流行的網(wǎng)站主字體，比宋體寬一像素，更為飽滿，具有線條感。可選擇微軟字體作為網(wǎng)站的主字體，使用戶網(wǎng)頁瀏覽閱讀更為順暢。

五、結(jié)語

扁平化設(shè)計將是網(wǎng)頁設(shè)計的必然趨勢，這一設(shè)計不僅符合網(wǎng)站用戶的審美，更符合數(shù)碼化程度飛速提升的生活、工作需求，滿足用戶的高質(zhì)量、高效率體驗。時代的發(fā)展與革新會促使擬物化作用退出主流互聯(lián)網(wǎng)市場，增加網(wǎng)頁扁平化的需求與創(chuàng)新。

參考文獻(xiàn)：

[1]朱兼白.扁平化在高校圖書館門戶網(wǎng)站改版設(shè)計中的應(yīng)用研究——以浙江機電職業(yè)技術(shù)學(xué)院為例[J].內(nèi)蒙古科技與經(jīng)濟(jì)，2016（14）：160-161.

[2]張巖.網(wǎng)頁設(shè)計中扁平化設(shè)計的趨勢[J].美術(shù)大觀 ，2014（5）：132-132.

[3]金燕飛.扁平化設(shè)計技術(shù)在網(wǎng)頁設(shè)計中的具體運用——以中國民航飛行學(xué)院洛陽分院網(wǎng)站改版為例[J].藝術(shù)科技 ，2015（6）：49-49.

[4]曹舒.淺析扁平化設(shè)計在現(xiàn)代設(shè)計中的地位和作用[J].美術(shù)教育研究，2014（3）：106-107.