論扁平化界面設計在平臺中的應用

夏金紅

（西安工程大學，陜西 西安710048）

電子產(chǎn)品使用數(shù)量的日益增加、使用需求不斷提高、人們的認知不斷累積以及對事物概括及理解能力的提升，使得具象到抽象的界面設計風格成為發(fā)展趨勢。扁平化界面設計不管在移動界面設計還是交互界面設計上都給用戶一種新的體驗模式，都盡量用最簡潔的視覺語言來有效的傳達信息，以減少人們的認知障礙。本質(zhì)上，扁平化設計不僅僅是視覺上的改變，更是思維方式和設計語言的發(fā)展。

扁平化設計之所以被廣泛地應用并成為趨勢，主要是由于以蘋果和微軟為主的幾大公司在其界面設計上的發(fā)展。他們改變了之前所用的擬物化界面設計風格，放棄立體效果，去掉透視、陰影、立體等裝飾效果，尋求新的界面設計語言。這種設計風格以簡潔、平面化的方式呈現(xiàn)，達到言簡意賅的目的。扁平化設計給界面設計指明了新的發(fā)展方向，并為大眾所接受和追捧。

由于科技的不斷發(fā)展，電子產(chǎn)品成為人類生活不可或缺的物品，依賴報紙、圖書獲得信息的時代已經(jīng)過去。電腦、手機成了主要的信息渠道，因此界面設計至關重要。優(yōu)秀的界面設計能夠快速地引導用戶準確地獲取信息而不產(chǎn)生界面復雜和不知如何操作的現(xiàn)象，提供更好的用戶體驗。扁平化設計用簡潔的設計直觀傳達語言信息，提高了產(chǎn)品的可用性，也更符合大眾的審美需求，下面從移動平臺界面設計、交互設計兩方面分析扁平化設計的應用。

1 移動端界面設計方面

不僅谷歌放棄使用了擬物化設計，蘋果公司和安卓也在走向扁平化設計。大膽的平面化設計給大眾一種紙張化體驗的創(chuàng)新，視覺語言上的設計元素都是基于基礎平面設計。相較于網(wǎng)頁界面，人們在使用移動端獲取信息時，因為移動端的屏幕尺寸有限，所以移動端界面更需要簡潔、清晰的扁平化界面，使得人們精準地獲取信息，減少使用障礙，并且移動端層級結(jié)構(gòu)扁平化的信息呈現(xiàn)方式能使得承載信息的空間更大，也更符合快節(jié)奏生活方式下人們的需求。

之前的手機界面設計無論是圖標設計還是場景的使用，都極具擬物化。高度的相似及外觀精致是最大的賣點。但缺點是電子產(chǎn)品屏幕分辨率極高，尺寸也各式多樣，復雜繁瑣的擬物化設計顯然不能滿足這樣的要求。例如圖1。

圖1 ios系統(tǒng)的界面設計

1）蘋果公司最新版本iOS 7系統(tǒng)界面就是應用了扁平化設計風格，這是一個巨大的轉(zhuǎn)變，設計師放開設計思路改變之前所用的iOS 6系統(tǒng)界面擬物化的設計，無論是在顏色、背景、比例、質(zhì)感、效果上都有很大的改變。扁平化設計風格的iOS 7去掉了iOS 6厚重的背景，在細節(jié)上進行了修改，圖標簡單、應用明確、顏色煥然一新，不再是一味的逼真立體效果，讓人眼前一亮。蘋果公司對《iOS人機界面指南》里的設計原則也進行了更新：讓用戶更加輕松的使用體驗[1]。設計師們根據(jù)這個原則刪掉了多余的裝飾性按鈕，應用在整體上更加扁平、簡約。這次重大改變得到了大眾的喜愛，后面的iOS 8也將延用這種設計風格。

2）逼真的界面設計有時候也不一定會給用戶帶來好的感受，使用不當也會適得其反。在使用時，用戶是期望能在被還原的真實場景中體驗其帶來的視覺感受。但是當它不能達到人們的想象時，產(chǎn)品的體驗就會讓人失望。而人們的想象不盡相同也沒有標準，這樣就導致設計師花了很多時間、精力完成的某個逼真的呈現(xiàn)，但用戶卻并不能體驗到真正的效果，這就是糟糕的用戶體驗。這樣一味的仿真也會讓設計師們的創(chuàng)造力收到約束，設計師的藝術細胞被局限。

扁平化界面設計的就是一個突破，它是一種平面化、簡潔的設計風格，設計師在設計中加入更多的理性元素，使信息條理更加清晰。以簡明的圖形向用戶傳遞信息，也沒有影響工具的正常使用，大大減少設計師的工作量，更加注重視覺信息的傳遞，使用戶有了更好的體驗。并給設計師開創(chuàng)了新的設計思維和寬廣的設計空間，設計師可以根據(jù)用戶的要求制定所需要的界面，更加人性化，并且用戶有多種的選擇，可根據(jù)自己的要求選擇適合自己的界面呈現(xiàn)方式，也給界面設計添加了新的設計方式。

2 軟件設計方面

微軟界面集體革新大規(guī)模使用扁平化設計風格是最好的例子，微軟就是用win 8的metro化設計語言打開了扁平化設計風格的大門。這種風格也在設計界掀起了一股風潮，它不僅僅是一種設計風格的出現(xiàn)僅此而已，更說明了設計要注重用戶的需要，堅持以人為本的設計原則，最終目的是為了給用戶提供方便來適應現(xiàn)在的快節(jié)奏的生活和工作環(huán)境[2]。

圖2 WIN8界面

在微軟的win8界面設計中，如圖2，其交互設計正是利用了這一點：重要的不是設計裝飾元素，而是內(nèi)容。它新的“開始”界面采用了極個性的平面化版面布局，用戶只需點擊圖標應用就會直觀的展現(xiàn)、瀏覽、查看東西一目了然。最大改變是無邊框全屏顯示，內(nèi)容就是界面中的主體，強調(diào)信息信息內(nèi)容，刪除了不必要的界面元素。通過上下滑動來獲得原有按鈕，讓屏幕盡大的顯示信息，這種扁平化的設計讓用戶能快速獲取精準信息，帶來很好的沉浸感[3]。并且扁平化界面設計在不同尺寸的屏幕上顯示及橫豎屏切換自由、靈活，更加注重界面的適應性和用戶體驗。

3 網(wǎng)頁設計方面

最初網(wǎng)頁常常用仿真的界面設計給用戶視覺帶來沖擊，以此吸引用戶注意。但是伴隨著web2.0的出現(xiàn)，使得更大的信息量和更復雜的交互產(chǎn)生，網(wǎng)頁的內(nèi)容就尤為重要，無需界面設計來喧賓奪主，這時候簡潔的界面設計就可以很好地突出內(nèi)容，做到兩全[4]。歐洲的設計師很喜歡使用扁平化的設計風格，用個性化表現(xiàn)獨具一格的視覺呈現(xiàn)，通過顏色的搭配和設計，反而有質(zhì)感的設計也能看出設計師的設計表現(xiàn)能力。

4 交互設計方面

扁平化設計在交互設計方面與單純的界面圖形扁平化有所不同，它是與層級界面設計相比較的。由于人們生活工作繁忙，獲取信息也處在斷斷續(xù)續(xù)的狀態(tài)，這樣使得扁平化的界面信息呈現(xiàn)更加適合這樣的人群生活。在人機交互中，縱向的樹形層級結(jié)構(gòu)容易引起用戶的厭倦，會因為突然終斷而無法繼續(xù)，橫向的扁平化交互設計減少了層級結(jié)構(gòu)，在同一級中更多的展現(xiàn)信息，也增加了層與層之間的切換渠道，有益于用戶隨時隨地查看重要的信息，使其使用流程更加方便、通暢[5]。

目前，國內(nèi)的設計行業(yè)不斷受到重視，人們對設計的要求也在提高。一些設計師、公司也嘗試使用扁平化設計，例如騰訊、新浪、京東等，這些我們常用到的網(wǎng)站，都在革新，開始使用簡潔的視覺表現(xiàn)，更加注重信息排版和交互，去掉了繁雜、無用的界面裝飾，給用戶煥然一新的感受并獲得了大眾的喜愛。但是簡潔的扁平化設計要更注重細節(jié)和人的因素，避免在減少復雜的同時，忽視了功能，造成冷漠、缺乏人情味的弊端。

5 總結(jié)

隨著產(chǎn)品類型和用戶需求的不斷增加，為了滿足用戶多樣化的需求，適應節(jié)奏的新設計方式必然出現(xiàn)。人們快節(jié)奏的生活需要的是傳遞信息精確，且擬物化設計缺點過多，以不再受到人們的喜愛。簡潔的界面、清晰的扁平化設計更符合人們習慣。它秉承以人為本的設計原則，注重功能、內(nèi)容，具有全新的交互體驗模式。在擬物化設計接近飽和的時候，新興的扁平化設計將順應時代的潮流，成為大眾的新寵。

［1］汪叢青.蘋果革新人機互動未來[J].蘋果革新人機互動未來，2010（38）：33.

［2］朱宏，亓光宇，李孟曉.超越想象[J].Windows 8應用設計與開發(fā)，2013-(1):8-7.

［3］三金.為設計Metro風格的應用準備著:Windows 8設計指南翻譯[EB/OL]. http://cdc.tencent.com/?p=5189,2012-02-13.

［4］Smashing Magazine,趙俊婷.眾妙之門:網(wǎng)頁設計專業(yè)之道[M].北京:人民郵電出版社,2013.

［5］張亞先.UI設計中圖標設計的釋義方式[J].機械設計，2013，30（6）：107109..