扁平化風格在網頁界面設計中的應用探究

米麗莎

摘要：扁平化設計風格的出現，引起了新一輪設計潮流，在網頁界面設計上受到了眾多追捧，當然也存在著一些問題，對設計師更是提出了新的要求。本文試圖從扁平化風格的起源、網頁界面設計的發展、扁平化風格在網頁界面設計中的應用等方面，來探究扁平化風格的網頁界面設計。

關鍵詞：扁平化風格;網頁界面設計;應用

1.扁平化風格的基本概述

1.1何為扁平化

扁平化風格是近幾年較為流行的設計風格，從字面含義來理解，就是設計的整體效果都趨于平薄，無立體感。扁平化風格的核心是，在不使用投影、漸變等裝飾性元素的情況下，只依靠符號化或簡化的圖形設計元素來表現。扁平化風格的設計大多采用矢量圖，與之前流行的擬物化風格相比較，扁平化風格去除了一些裝飾效果強，看上去更加立體的元素。這樣的設計風格能讓用戶忽略其他因素，從而將注意力集中在信息本身。

1.2扁平化風格的起源

扁平化風格到底是什么時候出現，到現在也沒有一個統一的說法，似乎在其他的設計上也很難找到準確的論據。扁平化風格的來源可以追溯到三種藝術風格，分別是國際主義平面設計風格（也被稱為瑞士平面設計風格），極簡主義和包豪斯風格。上個世紀五六十年代，國際主義平面設計風格的出現和流行，被看做是扁平化風格的起點。

在微軟和蘋果幾大公司的推動下，扁平化風格受到了廣泛的關注，這種風格的出現并不是設計師的一時興起。而是當20世紀60年代出現重裝飾的后現代主義時引發了70、80年代的設計潮流，過多華麗、精致的圖形出現在人們眼前，在視覺環境逐漸飽和時，出現了更加符合人們審美標準的新的設計風格

2.網頁界面設計的概述

2.1界面設計的概述

界面設計是指界面外觀的美化，操作的邏輯性以及人與機器之間交互的整合設計。在我們生活中常見的界面設計有：手機設備用戶界面設計、網頁界面設計、智能家電界面設計（電視、冰箱、洗衣機等）、軟件界面設計、平板設備用戶界面等等。

進入21世紀以后，人類已步入了一個嶄新的信息時代，界面設計就成為了機器的外表，怎樣能給予用戶更好的視覺體驗則成為了當今所有設計師所必須具備的基本素質。由于界面設計的范圍很廣泛，因此文中我主要淺析的為網頁界面設計這一領域。

2.2網頁界面設計的原則

不同的網站適用于不同的用戶，不同的用戶則代表不同的需求。所以，網頁界面的設計應該立足于用戶的需求，滿足用戶的某一特定目標，使用戶能夠無障礙的找到其所需要的信息。一份合格的網頁界面設計，也需要滿足以下幾點要求：

1.布局合理性：網站形式統一，界面風格一致，使用戶視線跟隨內容本身移動，增強界面視覺平衡。2.主題明確性：對于網頁的主題形象構思明確，使用戶更易于接受。在網頁界面中以更適合大多數用戶的視覺形象為主，越明確，越通俗越好。3.一致性：網頁界面的一致性是實用的根本，在設計中需要給用戶帶來統一性。在實用上，構成不要太復雜，主要表達內容應設計在引人注意的地方。

3.扁平化風格在網頁界面設計中的應用及效果分析

3.1扁平化風格在網頁界面設計中的應用

1、簡約圖形的應用。圖形在網頁界面設計中扮演著很重要的角色，相較于文字，圖形能夠給人留下更強烈的視覺印象。圖形不僅美化了網頁界面，也是更為直觀的表現方式，圖形更能夠吸引人的眼球并激發用戶的閱讀興趣。扁平化風格中，更多運用的圖形是經過概括，看起來更加堅決的，每個圖形看起來是被壓扁了一般，沒有立體的觸覺感。例如，嘉上傳媒網頁界面，界面中拋棄了具象的圖形，反而是人們的視覺更多的集中在商品信息上，從而用戶在瀏覽時能夠將目光集中在商品上，也能快速做出更好的選擇。

2、色彩的巧妙運用。色彩的合理搭配能夠直接影響用戶的觀賞興趣，當進入到頁面時，留下最直觀的印象就是該網頁的色彩搭配。主打感情色彩的網頁就會使人產生情感的導向作用。扁平化的網頁界面，通常會使用讓人看起來更清爽的純色來承載網頁中的信息。較受歡迎的復古色也是扁平化風格的主打色系，這種色系飽和度較低，但是看起來更加柔美，也比較受女性歡迎。同類色配色風格在扁平化風格中應用廣泛，往往這樣的色彩能給人更大的視覺沖擊。所以，合理的色彩搭配在網頁界面設計中是不可或缺的。

3、合理的排版。扁平化風格一般都使用較為簡單的設計元素，因此在網頁界面設計中排版就顯得尤為重要。作為一名設計師來講，要做到優秀的版式排列，首先要做到的是考慮整體頁面的空間布局，切不可為了追隨扁平化潮流而刻意制造扁平化。其次，整體色彩，圖片的統一也是很重要的，切不可讓用戶感到突兀感。

3.2扁平化風格在網頁界面設計中的效果分析

扁平化風格的流行，使得扁平化網頁界面越來越多，特別是歐美網站，扁平化風格在網頁界面中的效果怎樣，我通過粗略的調查研究，簡單總結以下幾點：

1.傳遞信息更清晰：扁平化風格使網站可以更清晰的傳遞信息，將給更好的網頁瀏覽體驗提供給用戶，以便做出更加合理的判斷。扁平化風格的表現形式減弱視覺上的復雜性，將用戶的注意力從圖形轉向信息，從而強化網頁所要傳遞的信息內容，使之更具辨識性。2.更易被接受：在扁平化中，更多的使用了人們已經接受并且熟知的元素，這就讓扁平化風格很容易被更多的用戶所接受，從而更好的表達界面中所要表達的信息。3.簡單的設計感：扁平化風格的設計給人更多的感覺是簡單，所以說生活節奏的加快這樣簡單的設計，讓用戶更加方便的抓取想要的信息是很關鍵的。4.緩解視覺疲勞：設計都是由繁到簡再循環的過程，當對擬物化風格視覺有一些疲勞之后，扁平化風格的出現無疑緩解了人們的審美疲勞，讓人們體驗到全新的設計風格。

結論：對于網頁界面設計的現狀及走向，不同的設計師都有不同的理解和看法。誠然，扁平化風格有這樣或那樣的優勢，但也不能做蓋棺定論，說扁平化設計風格絕對比其他的設計風格好，每個設計風格都有自己的優勢和缺陷，扁平化設計風格也不例外。也不能保證扁平化風格的網頁界面在未來不會消失，或是被其他風格所代替。但是，扁平化風格在當下更能順應時代的潮流，在今后的一段時間里，扁平化風格也將繼續成為網頁界面設計的主流。

參考文獻：

[1]金景文化，Hi！扁平化Pohotoshop扁平化用戶界面設計教程[M]﹒北京：人民郵電出版社，2015.5

[2]趙大羽，關東升﹒交互設計的藝術：iOS7擬物化到扁平化革命[M].北京：清華大學出版社，2014

[3]鄧文達，贠亞男﹒網頁界面設計與制作[M].北京：人民郵電出版社，2012.8.1

[4]羅軍﹒網頁界面設計[M].北京：北京大學出版社，2014.5.1

[5][美]SusanWeinschenk.設計師要懂心理學[M].北京：人民郵電出版社，2013.5

[6][美]加瑞特.用戶體驗要素[M].北京：機械工業出版社，2011.7

[7][美]SusanWeinschenk.網頁設計心理學[M].北京：人民郵電出版社，2013.2

[8][美]PatrickMcNeil.網頁設計創意書.第二卷[M].北京：人民郵電出版社，2013.1

[9]伊拉姆﹒網絡系統與版式設計[M].上海：上海人民美術出版社，2013

[10]韓曉墨﹒繼承與發展并重——論扁平化設計的席卷[J].現代裝飾（理論），2013（7）：9

（作者信息：南京師范大學泰州學院美術學院）