淺談UI設計中“扁平化設計”的運用和發展趨勢
——以IOS UI為例

杜翔宇 （徐州工程學院藝術學院 221008）

淺談UI設計中“扁平化設計”的運用和發展趨勢
——以IOS UI為例

杜翔宇 （徐州工程學院藝術學院 221008）

作為移動應用端上流行的UI設計風格，“扁平化”設計理念目前在UI設計中得到了廣泛的應用。基于這種認識，本文對UI設計中“擬物化”“扁平化”設計概念和內涵進行了分析，然后以IOS UI 為例對“扁平化設計”的運用方法展開了研究。最后，本文則對UI設計中“扁平化設計”的發展趨勢進行了探討，以期為關注這一話題的人們提供參考。

“扁平化”；“擬物化”；UI設計；運用方法；發展趨勢

所謂的UI，其實就是用戶界面的英文簡稱。就目前來看，UI設計風格可以劃分為兩種，即“擬物化”和“扁平化”設計風格。而“扁平化”設計理念在IOS UI上的成功運用，使得該種設計風格為人們所熟知，并且逐漸成為了一種獲得大眾認可的設計風格。因此，相關人員有必要對UI設計中“扁平化設計”的運用和發展趨勢展開研究，以便更好的運用該種設計理念。

一、UI設計中“擬物化”“扁平化”設計概念和內涵

（一）“擬物化”設計

所謂的“擬物化”設計，其實就是一種強調模擬實物質感、明暗和材質等特性的界面設計理念，可以在實現交互的同時進行現實操作形式的模擬。采取該種設計理念，可以實現富有感性化色彩的交互設計，能夠幫助人們憑借經驗盡快學會操作界面。以ibook這一交互界面為例，其從視覺效果到感官手勢都對真正的書籍進行了模擬，甚至實現了對翻書聲音的模擬，能夠給人帶來更具趣味性和親和力的界面操作體驗。

（二）“扁平化”設計

“扁平化”設計其實是一種摒棄一切裝飾效果的設計理念，可以借助簡單直接的方式進行事物和信息的展現，可以避免用戶對界面產生過多的認知障礙。從特點上來看，“扁平化”設計以簡約為核心，追求層級優化。

1.以簡約為核心

以簡約為核心，就是對透視感和光影效果進行摒棄，從而使設計元素變得符號化和抽象化。在這樣的界面上，所有元素都擁有鮮明的形狀和邊緣，效果如同將所有元素“拍扁了”。如同中國水墨畫，“扁平化”設計注重留白，以便通過增強界面主體內容存在感使人體會簡約的魅力。

2.追求層級優化

Synthesis and crystal structure of 10-phenyl-6,7,8,10-tetrahydro-cyclopenta[b]pyrrolo[3,2-f]quinolin

近年來，互聯網終端開始變得多樣化，其使用場景也越發復雜，從而使用戶對界面操作失去了耐心。信息層級優化則是“扁平化”的一大特征，其實現了信息從屬層級關系的簡化，突顯的都是與核心內容相關的交互元素，能夠幫助用戶盡快獲得需要的信息。而這樣的設計不僅能夠提高用戶操作效率，還能夠體現對用戶的關懷。

二、以IOS UI 為例探討UI設計中“扁平化設計”的運用方法

（一）IOS UI設計中由“擬物化”到“扁平化”的演變過程

相較于“擬物化”設計，“扁平化”設計無疑是性的設計風格，是目前得到廣泛爭論的設計形式。自從蘋果公司進行IOS7的推出后，其UI設計就開始由“擬物化”向“扁平化”演變，從而使扁平化設計風格在移動端的操作系統中得到了推廣應用。如下圖1所示，為iPhone IOS6與iPhone IOS7的對比圖。從視覺效果上來看，IOS7的色彩顯得更加艷麗，圖形也更加簡約，實現了抽象化表達。比較“擬物化”和“扁平化”的IOS UI界面可以發現，擬物化系統僅僅是進行事物表面的模擬，并未進行內容的延展，并且也缺乏想象空間。在看圖的過程中，受眾雖然能夠較快接受，但是很難進行延伸拓展。所以，刻意進行交互界面的“擬物化”設計，將導致界面的操作效率遭到降低。隨著數碼的普及應用，人們對產品的使用要求顯然發生了變化1。但是“擬物化”設計的審美追求顯得單一，所以無法滿足人們的審美需求。而扁平化設計可以實現多余裝飾的剔除，可以幫助用戶排除復雜圖標外觀的干擾，將注意力集中在軟件功能上，從而使用戶可以盡快獲得想要的信息。因此，IOS UI的“扁平化”設計已然成為了一種設計風格，可以引領UI設計潮流。

圖1 IOS6與IOS7比較圖

（二）簡約圖標的設計運用

在移動應用客戶端上，設置圖標的目的就是為了幫助用戶識別各軟件功能，所以圖標的美觀性并不是最主要的設計考量因素。根據“扁平化”設計理念，在設計圖標時就應該進行簡約圖標的運用，從而引導用戶關注軟件的功能。在IOS UI的“扁平化”設計中，使用的圖標具有明顯的“扁平化”特征，其組成元素未添加斜面、漸變、羽化和陰影等修飾，僅僅使用簡單到極致的單色塊組合，從而使圖標和按鈕等界面元素得到了簡化。如下圖2所示，IOS7中各圖標基本形都由幾何形與幾何形或曲直線與幾何形構成，如指南針、相機等，表現方式比較簡練。而利用簡潔的線條實現圖形的高度概括，則對設計師有較高的要求。因為，在進行簡單圖形設計時，設計師必須要實現事物圖形特點的高度提煉，需要達到使用戶一目了然的目的，從而使用戶適應信息和接受信息的時間得以減少。

圖2 IOS7圖標

（三）鮮活色彩的設計運用

將不必要的裝飾放棄后，就只剩下形狀和色彩。所以，“扁平化”設計十分注重色彩的設計和運用。從IOS UI設計來看，IOS7顯然具有色彩鮮艷、明亮的特點，與其他采取“扁平化”設計的UI在色彩上具有相似性。如下圖3所示，IOS7界面色調擁有豐富的層次，色彩之間的搭配十分和諧溫和。利用多用色塊和單純顏色配合，則給人帶來了干凈、清晰的感受，也能夠使界面各種關系得以清楚的表現出來。在應用軟件界面上，IOS UI使用的是單色調，可以給軟件帶來一個系統視覺主題，從而使整個操作界面擁有統一協調色彩，繼而使界面顯得干凈和簡潔2。比如在IOS7通訊APP中，統一使用白色和綠色組合。對于使用者來講，經過長時間交互，用戶會形成固定思維，認定白色和綠色組合為通訊，從而迅速完成圖標的查找。之所以進行單一主題色的確定，則是為了緩解UI界面中過多元素組成給人帶來的負荷感。在IOS UI的“扁平化”設計中，僅僅依靠不同純色塊的相互配比，就可以利用簡單的純色進行良好視覺效果的營造。

圖3 IOS7色彩搭配

在IOS UI的“扁平化”設計中，所有的視覺元素都保持著簡單、自然的特點，其字體排版與界面風格一致，也體現了簡約和自然的設計理念。在界面排版方面，采取“扁平化”界面可以進行重要信息的突出，并且將次要信息隱藏起來，從而為用戶提供需要傳達的關鍵信息。如下圖4所示，IOS7界面將次要信息隱藏在下拉菜單中，利用簡單的信息布局為用戶瀏覽界面提供了便利，同時也有利于用戶觀察全局信息，因此可以使用戶的滿意度得到提升。而在字體應用方面，界面中較為重要的字體明顯要更大一些，從而達成了突出文本的作用。同時，所有元素都有統一參照物，并且有規律的放置。此外，IOS UI界面上的文字中貫穿著標點，使得文字顯得簡潔且并不突兀，可以起到幫助讀者理解文字的作用。為更好的實現信息傳遞，蘋果公司推出的IOS9甚至采用了全新字體方案，為用戶打造了新字體3。目前，該種字體被稱之為蘋方，具有清晰易讀的顯示效果，并且能夠為簡體、繁體的切換提供支持。相較于之前的字體，該種字體擁有清晰棱角，更容易閱讀。

三、UI設計中“扁平化設計”的發展趨勢

（一）適應性不斷增強

隨著互聯網終端的復雜化發展，“扁平化”設計的適應性也將不斷增強。近年來，移動終端的尺寸、界面分辨率都在不斷改變。而采取“扁平化”的設計方式，則能夠為不同分辨率屏幕提供良好的界面支持，能夠使小圖片和高分辨率之間的矛盾在一定程度上得到化解，所以能夠為用戶提供擁有更好顯示效果和更高適用性的界面。因此在大屏時代，“扁平化”設計能夠更好的適應時代的發展需求，并且也能夠為小屏終端UI設計提供更好的途徑。此外，使用“扁平化”設計元素，占用的存儲空間也較小，能夠確保終端運行的流暢性，從而使用戶獲得更好的體驗。所以在UI設計中，“扁平化”設計的較強適應性在未來將得到更好的體現。

（二）結構輕量化發展

信息化時代的到來，使得人們的生活中充斥著大量的信息碎片，從而給用戶瀏覽操作帶來了較大的負擔。實現信息結構的輕量化，則能夠使用戶的操作邏輯更加清晰，從而使用戶能夠更輕松的進行信息獲取。所以，隨著時代的發展，“扁平化”設計將進一步實現信息結構的輕量化。通過使信息層級變得“扁平化”，則可以使內容本身得到強化，從而減少用戶因理解信息結構和邏輯花費的成本，因此能夠使用戶獲取信息的距離得到縮短。例如，百度手機助手的瀏覽頁面設計就使用了半層彈層這種“扁平化”設計模式，從而通過簡化信息框架增強了信息的存在感，為用戶帶來了更為輕松自然的操作體驗。

（三）更符合大眾審美

無論是從文字發展還是繪畫發展角度來看，人們在最初發展階段都是追求寫實模仿。而當實現了極致寫實之后，人們就可以使進行抽象文字和抽象繪畫的探索。UI界面設計也是一種藝術形式，其發展也將尊崇這一規律，從而更好的滿足大眾的審美需求。所以，盡管“擬物化”設計受到了人們的喜愛，但是“扁平化”設計必將會成為一種潮流4。隨著數字產品審美趨勢的變化，“扁平化”設計也將進一步借助自身優勢取得審美上的突破。在生活中充斥大量炫酷的擬物效果的背景下，“扁平化”界面將憑借其簡潔、質樸、大方的特點給人帶來全新的感受，從而使人們的審美疲勞得以有效緩解。

（四）更注重用戶體驗

從根本上來講，UI設計追究的就是給用戶帶來更好的體驗。而“扁平化”UI設計同樣需要追求為用戶帶來更好的體驗，同時也并非是完全依靠想象得到的，其也是擬物的，但更加抽象化。所以，為增強用戶體驗，還要在“扁平化”設計的基礎上進行效果元素的添加，從而使界面元素的辨識度得到提高。IOS8界面之所以引起較大的爭論，就是由于其過度“扁平化”，卻忽視了給用戶帶來的體驗5。因此，相信隨著設計師對用戶體驗的重視程度的加深，“扁平化”設計也將達成提升用戶體驗的UI設計目標。

四、結論

憑借簡約和信息透明化的優勢，“扁平化”設計方式在UI設計中得到了廣泛的應用。而隨著信息時代的到來，這種優勢將更加明顯，從而使其獲得更好的應用前景。

注釋：

1.林陽.UI設計中扁平化理念應用研究——創造平面功能化[J].藝術科技，2014（1）:267.

2.陶薇薇,張小玲.UI界面中扁平化設計的原則與技巧[J].科技傳播，2014（13）:176+155.

3.卜祥維.關于UI扁平化設計在移動終端的應用與價值探究[J].戲劇之家，2014（13）:161-162.

4.王凡,黃迅.探析扁平化Metro UI設計與“少即是多”設計原則的相關性[J].包裝世界，2015（2）:92-93.

5.徐亞非,王勤勤.“互聯網+”時代下的UI設計發展趨勢[J].藝術科技，2015（9）:204+236.