扁平化設計技術在網頁設計中的具體運用

金燕飛

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

關鍵詞：扁平化設計；新技術；網頁設計；洛陽分院

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

1 網頁設計簡述

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

2 扁平化設計在具體項目中的應用

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

2.1 扁平化設計

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

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

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

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

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

2.2 新技術的運用

作為設計人員，在與程序技術員合作的過程中，首先需要大致了解當前先進的技術水平，只有通過與技術的合作，才能將所設計的視覺稿實現在線動態發布。

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

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

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

3 總結

新的設計風格和方式總是伴隨著新的技術而產生。電腦技術的普及、各類設計軟件的開發運用，讓平面設計從紙上進化到鼠標和鍵盤之間，而網頁新技術帶給我們的，是程序員更方便更快捷的工作方式，是設計師新的描繪工具。新一代網頁標準和技術，也引導人們逐漸轉換到“扁平化”思維、交互式頁面和響應式布局等新的設計理念中來。網頁的設計，需要和用戶進行更深層次的溝通。網站的功能，需要從原先的“單向式”展示變為“雙向式”的交流。這些都是設計師在網頁設計中必須重視的方面。