扁平化設計在網頁上應用的優勢

摘要：隨著時代的發展，扁平化設計作為網頁設計的一種界面風格，只需要有良好配色、布局和字體，而不需要考慮多余的陰影、高光、漸變等等。作為2013年顯著的流行趨勢，正在逐漸蔓延到設計的各個方向。它簡潔明了的設計風格也得到了越來越多的設計師的青睞。

關鍵詞：界面元素設計；色彩；布局；字體

隨著時代的發展，網絡已經逐漸深入在人們生活的各個方面，人們通過網站進行購物、瀏覽等等。網頁作為構成網站的基本元素，是企業向用戶提供信息，展示商品的平臺，如同其他設計一樣，必須符合一定的設計原則。扁平化設計作為網頁設計的一種界面風格，它能給人帶來舒適簡單的操作體驗以及完美互動性的享受，作為2013年顯著的流行趨勢，正在逐漸蔓延到設計的各個方向。它簡潔明了的設計風格也得到了越來越多的設計師的青睞。

1 扁平化設計

扁平化設計從理論上來講，就是在設計中不使用漸變、陰影、紋理、高光等擬真的視覺效果，拋棄所有的修飾元素，以極簡主義方式表達主題。使用一些簡單的純色塊，以達到一種看上去更“扁”更“平”的界面。所以扁平化設計的原則就是：單純色塊，沒有陰影，利用顏色去鼓勵用戶進行交互。扁平風格的優勢在于它可以更加簡單直接的將使用者想要的信息展示出來，從而減少認知障礙的產生。

2 扁平化設計在網頁上的具體應用中的優勢

（1）界面元素設計。好的界面設計不僅能突出網頁的個性，而且能讓瀏覽者的操作變得舒適、簡單。界面元素的設計有助于增加扁平化設計的強度，提升界面元素的表現性、可見性和清晰性。在擬物化設計里，設計師喜歡模仿現實生活中真實物品的顏色、形狀等，例如：在設計頁面時設計師會為界面當中的按鈕添加漸變和陰影效果以符合現實中真實按鈕的視覺特征，讓瀏覽者在使用時產生親切的感覺。然而，這樣的設計給瀏覽者帶來的卻是一種不符預期的體驗，這些看上去真實的按鈕卻不能產生真實的觸摸感受。扁平化設計使用的是正方形、長方形或者多邊形等這樣的基本形狀，這些二維圖形弱化了視覺上的復雜性，讓瀏覽者不會過多的關注圖形，而是強化了要表達的內容和信息，更加容易識別。當然，設計師也要了解每個元素所代表的含義與作用，并且應使用不同的形式來加以區別。扁平化設計強調的是信息本身，而不是繁復多余的界面元素。瀏覽者在瀏覽網頁時，主要是獲取信息，界面元素的主要功能是提示瀏覽者迅速找到他們所需要的信息。扁平化設計由于界面元素的簡單且易于查找，所以更適合那些近視者和弱視者，能幫助到這些有特殊需求的人群。

（2）色彩。扁平化設計頁面中，因為追求極簡主義，所以沒有其他多余的裝飾。因此，設計者在設計時需要更加注意色彩的搭配，這樣將會收到更好的視覺效果。從色塊、圖形、導航到版面，色彩是一個關鍵的組成元素，好的色彩搭配會給人帶來愉悅的心情和完美的視覺享受。總結扁平設計的色彩搭配大致分為兩種：

同類色搭配：同類色搭配，最常用的是把同一種顏色的黑、白、灰三種色調結合在一起，形成層次上的對比。在扁平化設計中，單色的使用不僅能分清層次感，同時也能把握住整體感。如圖1，網頁的背景使用了一張深灰的圖片，界面元素則使用了紅色系的同類色搭配。在導航部分運用了扁平化設計的樣式，使用了與標志相同顏色的色塊來展示。設計者通過調整色彩的飽和度以及透明度使單色產生一定的變化，使頁面不單調，反看起來整體感十足，同時增加了信息的辨識度，讓人一目了然。對比色：對比色搭配的使用可以使頁面看起來極富活力又有豐富的色彩變幻，視覺效果醒目。在使用對比色進行搭配時，設計師要注意到在設計時應當先了解網頁的主題，選用合適的顏色進行搭配。如圖2，是一家房地產中心的首頁，導航部分的扁平化設計運用了多種顏色來進行搭配。導航中的藍色，綠色有藍天，草地的寓意，間接烘托出小區優美的環境。黃色與藍紫色是對比色，對比色會帶給人一種色彩撞擊的感覺，增強了畫面的對比感，增添活力，使人眼前一亮。整體來看，網頁的背景色又與導航的顏色相呼應，這樣不僅不會覺得顏色雜亂，反而有很好的集中視線的感覺。

（3）布局。扁平化設計基本使用的是網格布局，網格布局能使網頁更便于使用，減少使用過程中的反復性，提升識別性。扁平化設計中刪除了網格布局中多余的線條和邊框，使用單純的二維色塊對頁面進行大膽的分割，色塊上使用大小不一的文字來標示內容中心或是使用多標題圖片，都可容納更多的內容，使每個圖標都有屬于自己的獨特風格，同時內容從一個邊緣流向另一個邊緣，在一個軸上進行活動，增加了穩定感。在頁面上，扁平化設計還會有大部分的留白，很多交互式設計都會在網頁中盡可能的添加內容，這樣反而讓使用者不能準確的分辨出網頁要傳達的主題是什么，更多的留白空間才能使瀏覽者關注到主要信息。

（4）字體。設計師通過文字來向瀏覽者傳遞信息，提供導航服務。而字體的選擇不僅要符合扁平化設計的簡約風格，同時還要符合整個頁面主題的設計風格。一般扁平化風格的頁面會使用無襯線的簡單字體，并且大多只使用一種字體，再通過對字體的放大、縮小進行排版，文字的不同排版同樣也可以帶來不同的視覺體驗，例如字號較大，或是粗體，都能幫助瀏覽者輕易地識別元素的指定功能，這樣在內容上創造了一定的層次感。同時使用對比色的字體，可以提升內容的易讀性和可讀性。

3 總結

網站界面風格似乎都在遵循著同一種設計審美，即：用擬物化的設計效果來突出界面元素的質感。隨手打開一個網頁，我們就可以看到這樣的設計，不免會產生視覺疲勞。而扁平化設計既簡單又明了，設計起來也非常方便。扁平化設計風格的逐漸興起可以看作是對網頁界面多年以來對過度設計的一次沖擊。設計的本質是形式服務于功能，作為設計師，我們不僅要考慮視覺呈現方面的問題，而最重要的是應當關注到產品的功能上。

參考文獻：

[1] 邁耶（美）.CSS權威指南[M].3版.中國電力出版社，2007.

[2] 黃在賢（韓）.設計師談精彩網頁設計[M].宏聚宸翻譯中心，譯.電子工業出版社，2004.

[3] Dave Shea.Molly E.Holzschiag（美）.CSS禪意花園[M].陳黎夫，山崺颋，譯.人民郵電出版社，2007.

[4] Sun I 視覺設計.字體設計法則[M].電子工業出版社，2012.

[5]伊達千代，內藤孝彥（日）.版面設計的原理：版面設計所必需的知識和技巧[M].周淳，譯.中信出版社，2011.