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

摘 要：在以往的網頁設計中，設計者們更青睞于利用各種藝術效果來裝飾網頁，以求吸引用戶的注意力。但是隨著網站數量和種類的增加，紛繁復雜的網頁設計風格會讓用戶產生視覺疲勞，影響到用戶的操作體驗。扁平化設計風格強調網頁界面設計的簡潔性，而且還能夠降低功耗，延長待機時間和提高運算速度，更加適用于移動終端系統。文章首先闡述了扁平化風格的設計特征，然后對扁平化設計風格在網頁界面設計中的應用進行分析，為提高網頁設計水平提供參考。

關鍵詞：扁平化;網頁設計;簡潔性;用戶體驗

0 引言

隨著網絡技術的快速發展，人們利用網站的頻率大幅提升，無論是在工作中還是日常生活中，都會應用到網站。在網頁設計時，有些網站和應用程序需要根據屏幕的尺寸和分辨率設計出不同的擬物化設計，而扁平化設計風格能夠適用于所有尺寸的屏幕，具有較強的適應性。尤其是在人們利用手機和平板等移動終端越來越多的背景下，在有限的屏幕尺寸上，更希望能夠快速找到自己需要的信息，以提升瀏覽網頁的速度。較多的裝飾性效果不僅會影響到用戶的操作體驗，同時還會占用一定的系統內存，縮短設備的待機時間，影響系統的反應速度。為了更好地解決用戶在使用移動終端瀏覽網頁時遇到的問題，采用扁平化設計風格具有很強的實用性。扁平化設計去除了冗余、厚重和繁雜的裝飾效果，注重對核心信息的體現，有些甚至是以抽象、極簡和符號化的方式來表達信息，界面更加簡潔干凈，用戶操作起來會有良好的體驗，所以扁平化設計風格會成為網頁界面設計的發展趨勢。

1 扁平化風格的設計特征

扁平化的設計風格主要是以簡潔大方為核心，減少了擬物化設計中的透視、紋理和陰影等效果，更加傾向于用圖標、抽象和文字的方式來表現信息。隨著使用移動終端進行網頁瀏覽的用戶數量的增加，這種扁平化風格更加適用于小尺寸屏幕的移動終端。簡約的設計風格能夠在有限的屏幕上更加明確地呈現網頁信息，便于用戶更加快速地搜索信息。而在組織結構上的扁平化設計，有利于減少用戶逐級深入地搜索信息，縮短傳播鏈，提高用戶瀏覽效率。扁平化設計風格能夠適用于任何尺寸的屏幕，占用系統內存少，有助于提高網頁運行的流暢性，這會增加用戶使用移動終端瀏覽網頁的便捷性。目前，扁平化風格主要應用于手機領域，在部分網站設計中也逐漸體現出扁平化的趨勢，這種簡潔大方的風格更具有現代氣息，但是在實際使用過程中，還是需要根據網站的功能、用戶群體特征、終端呈現方式等因素進行綜合考量，最終確定適宜的設計風格。

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

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

扁平化風格在網頁設計中體現得最為明顯的是界面設計，與復雜的界面相比，簡潔的界面元素不僅能夠減少用戶的閱讀障礙，還更易于用戶接近事物的本質，從而提升體驗感。在傳統的擬物化設計中，界面元素的設計盡量與實際物體接近，以達到一種更加真實的效果，一般會通過添加陰影或者漸變等方式來實現。擬物化設計雖然能夠得到一部分用戶的喜愛，但同時也限制了用戶想象的空間，同時過于復雜的設計還會占用過多的時間。在網站數量和種類不斷增多的背景下，用戶對于復雜的界面設計，會形成信息提取費時、視覺觀感疲勞等現象。而扁平化風格的核心是簡潔大方，去掉各種特效的渲染，以最為簡約的界面風格為用戶帶來最為舒適的操作體驗^[1]。尤其是在當下，人們使用手機的頻率快速增加，扁平化風格更適用于手機的屏幕尺寸。簡潔的界面設計能夠更加直觀地凸顯重要的信息，拉近用戶與網頁內容之間的距離，能夠讓用戶快速檢索到自己想要的操作信息，有效提升用戶的操作體驗。

2.2 扁平化風格在網頁布局中的應用

網頁的整體布局方式決定了信息的呈現效果以及用戶的操作體驗，在擬物化設計中更加注重精美的排版和圖片效果，希望以這種方式來降低用戶的認知成本，為用戶操作提供便捷。但是隨著數碼產品的普及以及人們使用網頁熟練度的提升，在長時間瀏覽網頁的過程中，過于復雜的圖片反而會讓用戶產生視覺疲勞，并且增加了提取信息的難度。而扁平化風格則更多地使用了文字、圖標等方式，這種頁面布局方式更加簡潔，呈現的信息也更加明確，用戶可以快速找到需要的信息進行操作，縮短信息檢索的時間，并且在視覺觀感上也更加清晰透徹^[2]。此外，擬物化設計還無法適應在不同尺寸和分辨率的屏幕間轉換，尤其是在小尺寸的手機屏幕上，可能會出現無法識別圖標的現象，直接影響用戶的操作體驗。而扁平化風格能夠適用于任何尺寸的屏幕，尤其是其簡約的布局方式更適用于小屏幕的手機網頁。因為扁平化風格不會受到屏幕尺寸的限制，所以給設計師提供了更大的設計空間，能夠更加完整且完美地呈現頁面布局。

2.3 扁平化風格在網頁信息組織結構中的應用

從某種程度上講，扁平化風格是和擬物化設計進行的對比，其在組織結構上的體現更加明顯。擬物化設計主要是以層級化結構為主，以金字塔的形式進行信息的展示。一般金字塔結構方式所包含的信息量較大，無法在同一級中完全展示出來，所以需要通過增加層級的方式來延長傳播的路徑，以確保呈現信息存在完整的邏輯性。但是這種方式會耗費用戶很多的時間，因為深入的層級越多，返回時也需要經歷同樣的層級，無疑會增加閱讀的時間。而扁平化風格相當于壓扁的金字塔，以最大限度地減少組織結構的層級、增加橫向信息的方式來減少用戶搜索信息的時間成本，有助于用戶快速進行信息的瀏覽。在使用扁平化風格的組織結構時，一個層級所呈現的信息內容量會增加，傳播路徑大大減少，但是這種方式僅適用于信息量較少的網頁，如果單層信息量過大，反而會增加用戶檢索信息的難度。所以在組織結構設計時，應該根據網頁包含的信息量而選擇適宜的風格，避免盲目地跟風而產生負面效應^[3]。

2.4 扁平化風格在網頁交互方式中的應用

交互性是網頁設計時的重要元素，網頁所呈現出來的內容，并不只是簡單對內容排版布局，而是更應該從用戶的使用體驗入手，從用戶的視角出發進行頁面設計，以提高網頁和用戶之間的交互性。良好的交互性是提高用戶體驗的重要方式，也是增加網頁瀏覽量的重要途徑，所以通過交互性設計能夠為用戶帶來良好的視覺體驗和心理體驗。其中動畫或動態圖的扁平化設計能夠更好地吸引用戶的注意，與靜態圖相比，動態圖和動畫不僅能夠滿足用戶的審美需求，還能夠提高用戶搜集信息的效果。比如當用戶的鼠標停留在某一視頻或圖片上時，視頻或圖片中的信息就能夠及時地顯示出來，從而提升用戶的信息瀏覽效率。在采用交互式動畫的扁平化設計時，還應對用戶群體進行細分，了解用戶群體的操作習慣，然后有針對性地進行交互性設計，以提高用戶對網頁的使用效率^[4]。

2.5 扁平化風格在網頁其他元素設計中的應用

網頁設計包含多種要素，除了上述分析，還包括首頁設計、標識設計、導航設計、文本設計等，而要將扁平化風格體現在這些要素中，還需要設計人員進行全面的規劃。比如在顏色和字體上的設計，因為扁平化追求簡潔大方，不需要太多的裝飾，但是還要給用戶呈現更好的視覺體驗，所以在色彩使用方面就需要合理搭配。因為整體頁面已經非常簡約，所以顏色上應該盡量避免單調，可以采用同類色搭配的形式呈現一種層次感，也可以采用對比色的方式來突出重要信息。所以扁平化風格的使用，并不是簡單的排列，也沒有降低設計人員的設計水平，相反還更加考驗設計人員的能力，需要在簡潔的頁面設計中給用戶創造更加舒適的操作體驗和視覺體驗。

3 結語

網頁設計的好壞直接影響到用戶的體驗，進而影響到網站的瀏覽量和企業的經濟效益，所以網頁設計要根據用戶的體驗來調整風格，以適應用戶的體驗需求。在快節奏的工作和生活狀態下，人們更希望能夠在有限的時間內提取更多有用的信息，所以對于過于復雜的頁面風格會讓用戶感到疲勞，降低用戶的體驗。扁平化風格更適用于移動終端，既減少了以往擬物化設計的次數，在占用系統內存、運行速度以及待機時間方面又更適用于移動終端。扁平化風格的極簡性使得主題更加鮮明，更迎合現代用戶的體驗需求，但同時也增加了設計人員的難度。簡潔并不是簡單，所以在簡潔的基礎上還要具有一定的內涵，能夠從更多的維度和更深的層次體現網頁的功能及其背后的意義。

[參考文獻]

[1]王啟賓.手機圖形界面扁平化集合設計研究[J].智庫時代，2019（5）：285-286.

[2]楊曄.扁平化風格在網頁界面設計中的應用[J].科技風，2018（25）：97，100.

[3]馮貴蘭，李正楠.扁平化風格在高校門戶網站設計中的應用研究[J].現代計算機（專業版），2017（18）：49-51.

[4]宋雅麗.扁平化設計在網頁版式中的應用探析[J].電腦編程技巧與維護，2016（17）：78-79.

（編輯?王永超）

Discussion of the application of flat style to web interface design

Sun Ruping

（Bayingol Vocational and Technical College， Korla 841000， China）

Abstract：In the past， designers prefer to use various artistic effects to decorate web pages in order to attract the attention of users. However， with the increase of the number and type of websites， the complicated design style of web pages will make users have visual fatigue and affect their operation experience. Flat design style emphasizes the simplicity of web interface design， and can reduce power consumption， prolong standby time and improve operation speed， which is more suitable for mobile terminal system. This paper first expounds the design characteristics of flat style， and then analyzes the application of flat design style in web interface design， which provides reference for improving the level of web design.

Key words：flat; web design; simplicity; user experience

作者簡介：孫汝萍（1982—?），女，河南獲嘉人，講師，碩士;研究方向：計算機應用教學。