扁平化設(shè)計(jì)技術(shù)在網(wǎng)頁(yè)設(shè)計(jì)中的具體運(yùn)用

金燕飛

摘 要：扁平化設(shè)計(jì)是跟隨網(wǎng)頁(yè)設(shè)計(jì)語(yǔ)言一起出現(xiàn)的新的設(shè)計(jì)風(fēng)格和思路，它的主要功能在于將信息和事物的工作方式更簡(jiǎn)單直接地展現(xiàn)出來(lái)，減少用戶認(rèn)知障礙的產(chǎn)生。新的設(shè)計(jì)風(fēng)格和方式是伴隨著新的技術(shù)而產(chǎn)生的，新技術(shù)帶給我們更方便更快捷的工作方式，也讓設(shè)計(jì)師們有了更流暢表達(dá)設(shè)計(jì)思想的工具。

關(guān)鍵詞：扁平化設(shè)計(jì)；新技術(shù)；網(wǎng)頁(yè)設(shè)計(jì)；洛陽(yáng)分院

傳媒行業(yè)是信息的發(fā)布者，也是信息的加工者，如何使自己手中的信息迅速抓住人們的眼球，如何更好地將信息精準(zhǔn)地展示給受眾，是每一個(gè)傳媒人都應(yīng)該考慮的問題。本文通過對(duì)所參與的“中國(guó)民航飛行學(xué)院洛陽(yáng)分院官方網(wǎng)站改版”項(xiàng)目的設(shè)計(jì)與分析，簡(jiǎn)述扁平化設(shè)計(jì)及新技術(shù)在網(wǎng)頁(yè)設(shè)計(jì)中的運(yùn)用，探討新的設(shè)計(jì)理念與良好信息傳遞的關(guān)系，為今后的網(wǎng)頁(yè)設(shè)計(jì)提供一些思路與建議。

1 網(wǎng)頁(yè)設(shè)計(jì)簡(jiǎn)述

網(wǎng)頁(yè)設(shè)計(jì)是設(shè)計(jì)者根據(jù)企業(yè)希望向?yàn)g覽者傳遞的信息（包括產(chǎn)品、服務(wù)、理念、文化）進(jìn)行網(wǎng)站的功能策劃，然后通過使用合理的顏色、字體、圖片、樣式進(jìn)行頁(yè)面設(shè)計(jì)美化，在功能限定的情況下，盡可能給予用戶完美的視覺體驗(yàn)。作為企業(yè)對(duì)外宣傳物料的一種，精美的網(wǎng)頁(yè)設(shè)計(jì)，對(duì)于提升企業(yè)的互聯(lián)網(wǎng)品牌形象至關(guān)重要。網(wǎng)頁(yè)設(shè)計(jì)需要程序員通過一定的“超文本標(biāo)記語(yǔ)言”（如HTML 4、HTML 5）進(jìn)行信息的表示，設(shè)計(jì)語(yǔ)言的簡(jiǎn)潔、功能的全面以及良好的交互性能，可以使復(fù)雜的內(nèi)容表現(xiàn)得以“快速、優(yōu)雅”地躍然“紙”上，對(duì)于用戶來(lái)講，也可以得到更新穎、更便捷的感受。

2 扁平化設(shè)計(jì)在具體項(xiàng)目中的應(yīng)用

筆者在去年主持設(shè)計(jì)了“中國(guó)民航飛行學(xué)院洛陽(yáng)分院官方網(wǎng)站改版”項(xiàng)目，整個(gè)項(xiàng)目施行過程中，在頁(yè)面的設(shè)計(jì)和表現(xiàn)上主要以“扁平化設(shè)計(jì)”理念為表達(dá)方式，通過與程序員的配合協(xié)作，最終完成了整個(gè)改版工作。改版后的網(wǎng)頁(yè)是一個(gè)全新的樣式，從色調(diào)到風(fēng)格及布局進(jìn)行了徹頭徹尾的改變，該網(wǎng)站于2013年8月正式運(yùn)行，運(yùn)行順暢、視覺效果良好，得到了用戶的肯定（網(wǎng)站網(wǎng)址：http：//www3.cafuc.edu.cn/）。

2.1 扁平化設(shè)計(jì)

扁平化設(shè)計(jì)是跟隨網(wǎng)頁(yè)設(shè)計(jì)語(yǔ)言一起出現(xiàn)的新的設(shè)計(jì)風(fēng)格和思路。扁平化設(shè)計(jì)指使用簡(jiǎn)單特效，或者無(wú)特效來(lái)創(chuàng)建的設(shè)計(jì)方案，主要功能就在于將信息和事物的工作方式更簡(jiǎn)單直接地展現(xiàn)出來(lái)，減少用戶認(rèn)知障礙的產(chǎn)生。

首先，扁平化要求“拒絕特效”：顧名思義，扁平化設(shè)計(jì)僅僅采用二維元素。所有元素都不加修飾——陰影、斜面、突起、漸變這樣會(huì)帶來(lái)深度變化的設(shè)計(jì)都是不應(yīng)該的。從圖片框到按鈕，再到導(dǎo)航欄都干脆有力，需要極力避免羽化、陰影這樣的特效?，F(xiàn)實(shí)主義、3D、擬物化更是扁平化設(shè)計(jì)的大敵。扁平化設(shè)計(jì)中的層次和其他的一一對(duì)應(yīng)，但各個(gè)位面間沒有交叉，不會(huì)明確區(qū)分背景圖片、前景圖片、按鈕、文本、導(dǎo)航，等等。具體到“洛陽(yáng)分院網(wǎng)站”，最明顯的體現(xiàn)就是導(dǎo)航欄的改動(dòng)：導(dǎo)航欄從復(fù)雜的“擬按鈕化”形式演變成新版的只使用深淺色塊表示“選中”和“未選中”，給人以大方直觀的感覺，干凈利落。并且整個(gè)頁(yè)面取消了大部分3D和陰影效果，采用矩形大色塊設(shè)計(jì)，色塊之間直接相鄰，沒有交叉，體現(xiàn)了“拒絕特效”的要求。

其次，扁平化“僅使用簡(jiǎn)單的元素”：扁平設(shè)計(jì)中使用到很多簡(jiǎn)單的UI元素，比如按鈕和圖標(biāo)。設(shè)計(jì)師更常用矩形、圓形、方形等簡(jiǎn)單的形狀，元素獨(dú)立，正角、直角、圓弧都非常常見。UI元素在保持高可用性的前提下盡可能的簡(jiǎn)單，保證應(yīng)用或網(wǎng)站直觀、易用，無(wú)須引導(dǎo)。為了同時(shí)達(dá)到簡(jiǎn)單但直觀的效果，可以嘗試為按鈕填充深色，以鼓勵(lì)用戶點(diǎn)擊。在“洛陽(yáng)分院網(wǎng)站”項(xiàng)目中，筆者以標(biāo)志性特征的圖片用于導(dǎo)航欄、背景和主題畫面，圖片盡量采用簡(jiǎn)單明快。尤其是導(dǎo)航欄標(biāo)志的設(shè)計(jì)，采用單一色彩和簡(jiǎn)單的線條，既契合了整個(gè)頁(yè)面的風(fēng)格，也突出了所導(dǎo)航的內(nèi)容。同時(shí)建議用戶方整合優(yōu)化欄目版塊，在保留原VI色彩特征的同時(shí)簡(jiǎn)化界面，網(wǎng)頁(yè)風(fēng)格更趨平面化，簡(jiǎn)潔清爽。

第三，扁平化更加注重“排版”：因?yàn)楸馄交O(shè)計(jì)要求元素更簡(jiǎn)單，排版的重要性就更為突出了。字體的大小需要匹配整體設(shè)計(jì)，高度美化的字體會(huì)與極簡(jiǎn)設(shè)計(jì)原則相沖突。字形上可以使用粗線體，文案要求精簡(jiǎn)、干練，最終保證產(chǎn)品在視覺上和措辭上的一致性。字體選擇上使用簡(jiǎn)單的無(wú)襯線字體，通過字體大小和比重來(lái)區(qū)分元素。同時(shí)，也可以使用新奇的字體作為點(diǎn)綴，但不能過火。標(biāo)簽按鈕等其他元素應(yīng)當(dāng)更注重增強(qiáng)易用性和交互性。本項(xiàng)目中的文字，除用戶VI手冊(cè)中的logo文字外，大部分選擇了簡(jiǎn)大黑體和宋體。在色彩調(diào)整過程中，與程序技術(shù)員的溝通精確到色相比例，對(duì)于位置像素的偏移、圖片文字的對(duì)位也力求精準(zhǔn)，不厭測(cè)試，確保網(wǎng)頁(yè)視覺稿與在線稿的完美吻合。

第四，扁平化的核心思想是“極簡(jiǎn)主義”： 扁平化設(shè)計(jì)天生簡(jiǎn)約，提倡功能大于形式，提倡一種少即是多，留白大于填充的美學(xué)。這樣，最重要的元素便得以突顯，成為視覺焦點(diǎn)。設(shè)計(jì)中應(yīng)該驅(qū)除任何無(wú)關(guān)元素，盡可能地僅使用簡(jiǎn)單的顏色與文本。和舊版的網(wǎng)頁(yè)相比，新版的網(wǎng)頁(yè)在色調(diào)的選擇上趨于統(tǒng)一，所有模塊集中在兩行內(nèi)表現(xiàn)，盡量排除了不必要的詳細(xì)說明和內(nèi)容，這些改進(jìn)都體現(xiàn)了“極簡(jiǎn)主義”思想。本項(xiàng)目在二級(jí)頁(yè)面的設(shè)計(jì)中，同樣沿用了這樣的設(shè)計(jì)理念，使用戶瀏覽更具舒適，不會(huì)因內(nèi)容繁雜而無(wú)所適從，以至產(chǎn)生厭煩心理。

2.2 新技術(shù)的運(yùn)用

作為設(shè)計(jì)人員，在與程序技術(shù)員合作的過程中，首先需要大致了解當(dāng)前先進(jìn)的技術(shù)水平，只有通過與技術(shù)的合作，才能將所設(shè)計(jì)的視覺稿實(shí)現(xiàn)在線動(dòng)態(tài)發(fā)布。

首先，在早期的網(wǎng)頁(yè)設(shè)計(jì)中，程序員將網(wǎng)頁(yè)劃分成固定大小的“表格”，在每個(gè)表格中填充不同的內(nèi)容。這樣的設(shè)計(jì)雖然簡(jiǎn)化了排版，但是卻造成網(wǎng)頁(yè)看上去非常死板，如果某個(gè)模塊內(nèi)沒有內(nèi)容，網(wǎng)頁(yè)不會(huì)自動(dòng)調(diào)整，而是留下表格中的空白。運(yùn)用新技術(shù)設(shè)計(jì)的網(wǎng)站會(huì)自動(dòng)調(diào)整網(wǎng)頁(yè)的寬度和長(zhǎng)度用于適應(yīng)不同的顯示器，這是網(wǎng)頁(yè)設(shè)計(jì)中“自適應(yīng)”模式的優(yōu)勢(shì)。舊版在寬屏顯示器上會(huì)出現(xiàn)大量的空白，而新版能很好地適應(yīng)寬屏顯示器，無(wú)論是網(wǎng)頁(yè)頁(yè)眉還是網(wǎng)頁(yè)底部都自動(dòng)填充了左右兩邊的空白，獲得了更好的效果。

其次，采用新的網(wǎng)頁(yè)設(shè)計(jì)技術(shù)，網(wǎng)頁(yè)可以獲得更好的動(dòng)態(tài)感。例如，打開進(jìn)入現(xiàn)在的“中國(guó)民航飛行學(xué)院洛陽(yáng)分院的官方網(wǎng)頁(yè)”可以看到，主頁(yè)上的圖片展示采用了動(dòng)態(tài)演示的效果，圖片在變換的時(shí)候漸入漸出。當(dāng)主頁(yè)標(biāo)題被選中時(shí)，標(biāo)題欄被指向的色塊會(huì)逐漸展開變寬，同時(shí)變成稍深一些的顏色，相應(yīng)的標(biāo)志和文字也會(huì)變成白色用于更好地顯示內(nèi)容。

可以看出，網(wǎng)站的交互性問題、綜合頁(yè)面的動(dòng)態(tài)感和整體設(shè)計(jì)的統(tǒng)一以及用戶使用的感受，所有的關(guān)于網(wǎng)頁(yè)設(shè)計(jì)的問題，并不是單一的程序員或者設(shè)計(jì)師可以獨(dú)立而為的，視覺設(shè)計(jì)師的工作一定包含著與程序員的合作，程序員有了設(shè)計(jì)師的配合才能將技術(shù)發(fā)揮到極致與完美。

3 總結(jié)

新的設(shè)計(jì)風(fēng)格和方式總是伴隨著新的技術(shù)而產(chǎn)生。電腦技術(shù)的普及、各類設(shè)計(jì)軟件的開發(fā)運(yùn)用，讓平面設(shè)計(jì)從紙上進(jìn)化到鼠標(biāo)和鍵盤之間，而網(wǎng)頁(yè)新技術(shù)帶給我們的，是程序員更方便更快捷的工作方式，是設(shè)計(jì)師新的描繪工具。新一代網(wǎng)頁(yè)標(biāo)準(zhǔn)和技術(shù)，也引導(dǎo)人們逐漸轉(zhuǎn)換到“扁平化”思維、交互式頁(yè)面和響應(yīng)式布局等新的設(shè)計(jì)理念中來(lái)。網(wǎng)頁(yè)的設(shè)計(jì)，需要和用戶進(jìn)行更深層次的溝通。網(wǎng)站的功能，需要從原先的“單向式”展示變?yōu)椤半p向式”的交流。這些都是設(shè)計(jì)師在網(wǎng)頁(yè)設(shè)計(jì)中必須重視的方面。