金燕飛

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

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

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

1 網(wǎng)頁設(shè)計簡述

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

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

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

2.1 扁平化設(shè)計

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

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

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

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

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

2.2 新技術(shù)的運用

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

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

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

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

3 總結(jié)

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