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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

五、結(jié)語(yǔ)

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

參考文獻(xiàn)：

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

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

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

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