扁平化設計在手機界面中的運用

唐　琴（四川理工學院，四川　自貢　　634000）

?

扁平化設計在手機界面中的運用

唐琴
（四川理工學院，四川自貢634000）

摘要：扁平化設計是近年來界面設計中運用的全新的設計風格。本文從手機界面設計方面出發，從用戶與界面之間的交互關系著眼，分析如何使扁平化風格和手機交互界面設計結合起來，從而設計出既符合時代審美潮流，又符合人機交互式體驗的產品。

關鍵詞：扁平化；界面設計

隨著信息時代的不斷發展，手機不再像傳統時期那樣，只是用來通訊和短信，如今的手機早已擺脫了傳統時期的單一模式，逐步向著多功能方向發展，要滿足人們對于社交、娛樂、學習等多方面的需求。手機界面已變得愈發的豐富，多樣的圖標設計也愈發的吸引眼球。扁平化適應新時代的需要，成為手機界面設計的新趨勢，它的優勢就在于可以更加簡單直接地將信息等展示出來，減少用戶認知的障礙。

一、扁平化設計

扁平化設計作為新的一種設計風格，在短時間內快速發展起來，并幾乎滲透到所有的設計領域，其優勢在于它拋棄了一切擬真的視覺效果，將信息以更加簡潔、直觀地方式表現出來，減少了用戶的認知障礙。

扁平化設計是相對應擬物化的一種設計風格。在形式上可以簡單的理解為拋棄多余的透視、紋理、漸變等擬真的視覺效果，使用簡單的色塊打造出一種看上去更“扁平”的設計風格。讓信息以更加簡潔直觀的方式表現出來，減少用戶認知障礙的產生。扁平不只是它的外在表現形式，其深層次的含義則是交互體驗的扁平化。同時在設計元素上，則強調了極簡和符號化。這種推崇簡約、平面化的表現形式，更易為現代快節奏生活中的人們欣賞和接受。對于設計師而言，提高用戶體驗是一切設計的出發點。扁平化風格已經成了當下最流行的界面設計風格，如何在保證用戶體驗的前提下，又達到視覺上的簡潔、清晰，是值得當代設計師思考的問題。

二、扁平化設計在手機界面中的表現

扁平化設計在信息架構上注重簡化結構，提高用戶信息訪問的效率。在表現形式上，則注重簡化裝飾元素，加強色彩對比，將主要信息直觀地展現出來，減少用戶的認知障礙。

（一）簡約的圖形。

扁平化設計使用極簡的表現方式，拋棄不必要的裝飾效果，所有元素的邊界都簡單干凈。不再使用高光、紋理、材質等擬物化的視覺元素。元素只是簡單的色塊和文字，基本形多由幾何形或線條組合而成，如放大鏡、書本、指南針等，圖形全部采用符號化的表現方式。突出主題，讓使用者對其內容一目了然，減少人們接受、適應信息時花費的時間和精力。

（二）鮮活的色彩。

色彩搭配是扁平化設計的重中之重，扁平化設計都有個共同的特點，色彩鮮艷、明亮，通過這個方面來增強圖標的視覺沖擊力。在其風格的作品中，色調層次很豐富，非常講究色彩之間的和諧搭配，顏色搭配溫和協調。扁平化設計多用色塊來表現各種關系，單純的顏色配合幾何形的塊面，讓人看上去干凈清晰，一目了然。

（三）合理的排版。

在扁平化設計中的視覺元素都相對簡約，因此字體與排版的匹配，應該與整體界面風格相協調。所以在扁平化設計中，盡量不要用生僻、高度裝飾的字體，那樣界面看起來就會不倫不類。此外，扁平化設計是由自然和簡約的理念形成設計風格，避免了過多的零碎出現在整個界面中。考慮到手機分辨率與屏幕的大小，簡單的顏色和文本的編排就已經足夠體現產品風格了。

三、從用戶體驗的角度分析扁平化的特點及其影響

智能手機是當前扁平化設計的主要載體，是扁平化設計發展的重要依托。扁平化的設計理念以用戶的情感、心理和信息需求為中心，注重提高用戶的使用效率，減少用戶的認知障礙。

（一）信息訪問效率高。

在手機界面的表現形式上，扁平化設計從界面布局、色彩搭配、圖標設計和字體設計上都進行了調整。在界面的布局上，扁平化設計通過信息分類整理、調整界面布局、擴展隱形空間等方法有效調整了界面的布局，突出了主要信息，提高用戶的訪問效率，有效地擴展了界面的空間。

（二）布局明確，滿足用戶的需求。

簡潔自然的扁平化設計，可以直接清晰地為用戶展現出所想要傳達的關鍵信息。扁平化的界面突出重要信息，弱化次要部分甚至隱藏在下拉菜單中，通過簡潔的線條和色彩搭配，簡單的信息布局，使用戶更方便的瀏覽界面，能夠對全局信息進行觀察，從而提高用戶的滿意度。

四、結束語

隨著生活水平的不斷提高，扁平化設計被廣泛地應用在UI設計中，但這并不表示扁平化設計是無懈可擊與完美的。手機界面的設計就應該更符合時代的發展，簡潔、便捷、舒適、美觀早已成為了現今手機界面在設計上的趨勢。在以用戶為中心的設計思潮中，扁平化的界面設計能夠較好的契合手機用戶需求，已經成為移動設備界面設計之趨。在未來的手機界面設計中，扁平化的思想將會搭載更加多樣化的交互技術呈現在用戶面前，為用戶與信息之間搭建起和諧互通的橋梁。

參考文獻：

［1］易敏哲.關于手機界面設計趨于扁平化設計風格.2014.

［2］龐博.從扁平化風格看界面設計的發展［M］.裝飾.2014.127-128

［3］WARECOLIN.設計中的視覺思維.［M］機械工業出版社.

中圖分類號：TP311.56

文獻標識碼：A

文章編號：1671-864X（2016）07-0287-01