扁平化設計在網頁設計中的運用研究

鐘文彥

（海南科技職業大學設計學院，海南 海口 571126）

0 引言

隨著互聯網的不斷發展應用，人們對網站的依賴水平不斷提升，不管是日常查找信息資料，還是分布信息資源，都有賴于通過網站得以進行，而人們對于網站的使用體驗很大程度上取決于網頁設計的設計水平[1]。近年來，扁平化設計憑借其一系列優勢特征，在網頁設計中得到越來越廣泛的應用，該種新型的設計風格逐漸成為設計行業的一大潮流。

1 扁平化設計概述

扁平化設計，即為將簡潔化、符號化及抽象化設計元素，代替紋理、陰影、透視等多余的裝飾，以對信息予以呈現的一種設計風格。就扁平化信息組織而言，其主要呈現為扁且寬的信息結構，并表現出自然清新、色彩多樣的風格特征。依托擬物化的設計，可實現紋理、陰影、高光等效果，而扁平化設計風格則與擬物化設計存在明顯的不同。就如今業界對扁平化設計的運用情況而言，其主要表現出以下幾項特征：一是排版簡潔、易讀；二是功能性強大；三是視覺層次分明；四是元素及形狀較為簡單；五是較為關注細節，比如對色彩的關注等[2]。扁平化設計憑借其優勢特征，在用戶界面設計中得到了廣泛運用，其可讓用戶獲得更良好的閱讀體驗，防止出現閱讀障礙等問題。同時，扁平化設計在網頁設計中也呈現出良好的運用前景，鑒于扁平化設計風格自然清新，具備突出的現代特征，讓設計人員可專注于對更專注于對實質內容的呈現?；诒馄交O計設計出的產品，不僅不易于過時，還可實現簡潔明了的效果。

2 扁平化設計在網頁設計中的運用原則

2.1 元素簡化

大數據時代背景下，互聯網每天都想要向人們傳遞海量的信息，而如何實現對各類信息的高效傳遞，是有待解決的一項重要問題。擬物化設計盡管可有效降低人們的學習成本，但太多的元素往往難以達到理想的傳遞效果。而扁平化設計則強調利用簡潔的表現手法，摒棄立體感的呈現，去除多余的裝飾效果，讓設計回歸目標本身。對于網頁設計而言，擬物化設計可實現突出的真實感，但與設計本身的目的性相背離，而在扁平化設計中，依托抽象化的表現手法，可讓語義得到有效簡化，進而很大程度上縮減不同國界、不同文化背景之間的認知差異。值得一提的是，扁平化設計并非盲目地對設計細節予以去除，元素簡化并不等同于設計過程中的敷衍了事，而是憑借總結、提煉以及對核心元素的全面整合，以化繁為簡的方式開展設計[3]。

2.2 強調色彩運用

扁平化設計十分強調對色彩元素的運用，作為影響視覺的關鍵因素，色彩可很好地加深人們的印象，進而達到傳遞情感的目的，所以，色彩該項形式元素在扁平化設計中不容忽視。實踐表明，扁平化設計的色彩運用主要分成對比色運用和同類色運用。其中，前者使依托富有活力的色彩搭配，以讓設計變得更具視覺沖擊力；后者則是將同種顏色的黑、白、灰三種色調結合在一起，在層次上顯得有層次、有對比，同時兼具整體感。

2.3 重視排版布局

鑒于扁平化設計所追求的極簡風格，所以排版布局是設計人員所需重視的重要一環。在實際設計中，扁平化設計廣泛運用網格布局，如此一來可讓頁面變得更具實用性，同時，對多余的內容予以去除，使設計內容的識別性得到有效提升。依托網格布局及圖標來展現頁面信息，可使不同層級相互間的關系變得更為分明，內容相互間更為自然、合理。另外，扁平化設計還應注重留白，該種設計手法不僅有助于給用戶留下更廣闊的想象空間，還可促進對產品或網頁信息的傳遞。

3 扁平化設計在網頁設計中的運用

3.1 在網頁界面元素設計中的運用

扁平化設計在網頁設計中的運用，尤為常見的是在界面設計中的運用，相較于繁雜的界面，簡潔的界面元素既能夠減少用戶的閱讀障礙，還可讓用戶更深入了解事物的內涵，進一步獲取良好的閱讀體驗。在以往的擬物化設計中，設計人員在網頁界面元素設計時，偏向于對真實物體色彩、形狀等的模范，以期展現一種趨于真實的效果，在這過程中會通過引入陰影、漸變等效果以加深用戶的真實體驗。該種設計盡管可贏得一些用戶的青睞，但同樣會很大程度擠占用戶的想象空間，并且還會延長設計開發周期。而扁平化設計在網頁界面元素設計中，運用的是各種基本形狀，去除陰影、漸變等各種裝飾性效果，強調以盡可能簡潔的界面風格以讓用戶可獲得良好使用體驗[4]。特別隨著移動互聯網的迅猛發展，人們越來越青睞于通過手機網頁獲取信息資訊，而扁平化設計可很好地適用于手機的小屏幕。通過扁平化設計進行簡潔的界面設計，可更為直觀地呈現網頁信息，建立起用戶與網絡信息之間的有效聯系，提升用戶瀏覽閱讀體驗。

3.2 在網頁布局中的運用

網頁的整體布局方式重要影響著信息的傳遞效果及用戶的使用體驗。在擬物化設計中，設計人員強調通過精美的排版及圖片效果，以期降低用戶的認知成本，為用戶實際使用帶來便利。而隨著人們網頁使用熟練度的逐步提升，在長時間瀏覽網頁過程中，太過繁雜的圖片不僅不利于為用戶帶來便利，相反會讓用戶產生審美疲勞，并加大用戶獲取有價值信息的難度。而扁平化設計在網頁布局中的運用，通過運用各式各樣扁平化的圖表、矢量圖形及圖標字體，以此不僅可更好地滿足現代人的審美需求，還可實現對相關信息的明確呈現，讓用戶可高效提取自身需求的信息，提升信息檢索效率，除此之外，擬物化設計還難以適應于不同尺寸及分辨率的屏幕間轉換，特別是在諸如手機等小屏幕上，擬物化的圖表很難識別，以此對用戶實際使用造成不利影響。而扁平化設計則可適用于各種尺寸的屏幕，依托廣泛運用矢量圖形，不過多依賴于像素精度，以此設計人員可更好地發揮自身的創意聯想，設計出可滿足用戶切實需求的網頁界面[5]。

3.3 在網頁交互方式中的運用

隨著如今社會生活節奏的不斷加快，以讀圖的方式獲取信息得到越來越人的青睞，圖像憑借其一系列優勢特征，可通過多種不同方式以實現對信息內容的生動呈現，并且如今圖像已不斷由靜態圖向動態圖發展。相較于靜態圖，動態圖具備更突出的視覺吸引力，具備更豐富的創意思維，以及可讓圖像實現敘事功能等。擬物化設計要想進行動態圖像設計，需要投入大量的成本，加之各個動態圖像都存在著尤為復雜的協調運動。而扁平化設計則不會出現此類問題，其可高效便捷地滿足動態圖像設計的需求，同時不同圖像相互間的互動也較為簡單，網頁中的動態交互可有效提升網頁活力，使用戶獲得良好的使用體驗。近年來，網頁設計呈現出由擬物到符號、由繁到簡的發展趨勢，由此重要體現了用戶審美趣味的發展轉變，這同時也是社會發展的一種必然。也正是基于對這一發展規律的有效遵循，讓扁平化設計得以實現飛速發展。扁平化設計中的“簡”，并非簡單粗暴地對煩瑣設計細節予以去除，二是經由腦力勞動的簡化處理，是在取與舍之間的合理選擇。

3.4 在網頁其他元素設計中的應用

網頁設計包含諸多要素，除去以上要素之外，還涉及導航設計、首頁設計、標識設計、等方面，而要將扁平化設計有效運用于這些要素設計中，需要設計人員開展全面規劃。比如，在色彩、字體設計方面，因為扁平化注重簡化設計，使得整體頁面較為簡約，所以色彩設計上盡可能高避免單調，可引入同類色搭配以營造層次感，也可引入對比色，以凸顯重要信息。因此，扁平化設計在網頁設計中的運用，并非簡單的排列組合，對設計人員專業素養仍提出了較高的要求，需要設計人員可在簡潔的網頁設計中，為用戶提供更為良好的使用體驗及感官體驗。

4 結語

總而言之，隨著科學技術的不斷發展，社會大眾對網頁設計要求的不斷提升，將扁平化設計運用于網頁設計中，成為如今的一大趨勢。相較于傳統設計風格，扁平化設計可促進提升用戶的使用體驗，降低用戶信息采集成本，值得在網頁設計中進行廣泛推廣。