基于移動終端交互界面設計的審美原則探析

姜旬恂　韓凱迪

摘 要：以移動設備的交互界面設計為研究對象，從視覺審美角度探討目前三大主流平臺比較流行的扁平化風格的設計形式及審美原則。針對目前移動端進行交互界面設計僅限于傳統平面印刷模板式的常規表現形式，提出交互界面視覺設計迫切需要注意的視覺審美形式要素問題，即：針對交互界面視覺設計的個性化、情感性、多維性及導向性等審美原則性問題進行分析與探討。目的是為跨平臺進行UI設計的設計師提供理性認識上的參考，同時推動移動應用程序在功能的適用性、提升審美蘊性及滿足精神需求等方面為用戶帶來更佳的功能與情感上的愉悅體驗。

關鍵詞：移動設備；交互界面設計；審美原則

近幾年，智能手機及其他移動端設備在社會生活中的普及，給我們的生活方式和生活習慣帶來了巨大的改變，移動互聯網及應用程序的使用已經成為我們日常生活中的重要組成部分，人們的生活質量開始變得與移動產品的設計水平息息相關了，挑剔的移動端用戶們從最開始較多的關注應用程序的功能，慢慢地在界面視覺設計的審美形式上開始有了更高、更深層次的心理要求。因此，必然使得設計師們對于移動端交互界面的設計開始有了更多的關注和思考。

1 移動端交互界面設計的特點

其一，從移動設備的物理特征來看，由于其便捷的可操作性及便攜性，智能手機都以觸屏操作為主，它的屏幕尺寸較小，而且屏幕尺寸的種類繁多，這就要求我們在對交互界面進行設計的時候要珍惜寶貴的屏幕空間資源，合理布局導航、層級界面及界面內信息，并注重同一應用程序在不同屏幕尺寸下的設計元素布局以及響應式的適配設計，對于按鈕及可觸控區域空間的設計也要符合人的手指的尺寸來進行設計的考量，一般來說，根據食指及拇指對移動設備屏幕的接觸面積來看，按鈕的面積最小的范圍區間應在57～72像素之間，[1]如圖1所示。

其二，從移動設備的媒體特征來看，它可以從視覺、聽覺、觸覺多個通道來對內容進行呈現。聽覺及觸覺的設備反饋配合優秀的交互界面設計，可以讓用戶有更真實的沉浸感，設計師們在進行設計的時候可以對多種媒體資源進行調用。例如，在以枯燥的數據信息為主的內容的交互界面設計中，適當加入信息動畫的元素，能夠增加人們使用的樂趣，提高瀏覽頁面的興趣。例如，在iOS平臺上有一款由KYU TAE PARK開發的應用程序《溫濕度計》，在界面的設計上就充分運用了信息動畫的形式來向用戶展示當日的溫度、濕度、氣壓等方面的氣象信息，讓這樣的信息更容易被人們所接受（如圖2所示）。

其三，從移動設備的使用環境特征來看，由于它的體積較小，幾乎可以被我們攜帶到任何地方，并且幾乎在任何時候都可以使用，這種時間和空間的自由性會使環境光對交互界面設計的影響加劇。例如，同一屏幕的內容，在環境光低照度下閱讀，屏幕亮度過高，長時間閱讀會對視力造成損傷；而在環境光高照度，屏幕亮度過低的情況下，使用者會看不清屏幕的內容。

2 移動終端交互界面設計的視覺審美原則

從目前世界范圍內的三大主流移動平臺（蘋果公司的iOS平臺、谷歌公司的Android平臺和微軟公司的Windows Phone平臺）的設計風格來看，扁平化的設計風格已經成為當今移動終端交互界面設計的最主流的視覺設計風格了，扁平化設計風格主張拋棄那些任何能使作品凸顯立體效果的特性，不像大多設計師們經常會用到的透視、陰影、紋理等高度擬真的視覺效果，而通過抽象、簡化、符號化的設計元素來進行信息的傳達，這種風格現代氣息濃郁，視覺上給人一種干凈利落的感受。[2]

但其實追溯到扁平化設計風格的起源，它的靈感來自于平面設計領域及印刷出版領域，目前比較公認的靈感來源風格是：瑞士風格（國際主義平面設計風格）、包豪斯風格和極簡主義設計風格。所以，我們在進行移動終端交互界面設計的時候，尤其是對處理圖形元素和頁面布局間的關系的時候，除了考慮移動終端固有的特點以外，還可以在視覺設計方面參考版式設計的一些審美原則和規律。

（1）交互界面視覺設計的個性化原則。據今年年初移動市場研究公司AppFigures發布的一項報告顯示，截止到2014年底，Google Play Store上已擁有143萬款應用，而iOS App Store上的應用也有121萬款之多，在這樣龐大的應用市場當中挑選我們需要的應用程序，實在是件不容易的事。設計師們也不甘心自己設計的作品在趨于功能同質化的市場中因缺乏個性而被埋沒，所以，追求新穎、獨特、個性化的藝術表現形式成了設計師們在做設計時思考的重點之一。由美國《紐約時報》開發的一款旅游類的應用程序《The Scoop》，主要分享本地人最喜歡的餐廳、酒吧、咖啡店，有趣的表演和一日游等活動。在界面風格及導航圖標的視覺設計方面就別出心裁（如圖3、圖4所示），使用了色塊和可愛插畫的表現形式，擺脫了以往旅游類應用嚴肅的唯美的界面風格，得到了一種幽默、風趣的視覺感受。

（2）交互界面視覺設計的情感性原則?！耙郧閯尤恕睅缀跏撬幸曈X藝術創作門類當中都要遵循的表現規律，無論是攝影作品、電影作品，甚至推及到平面設計的各個門類，一件作品既然稱得上優秀，就要能夠打動觀者，能夠讓觀者產生強烈的心理共鳴，甚至影響到觀者的情緒和行為。移動終端的交互界面視覺設計也是如此，界面的使用方法及交互模式要符合我們日常生活的心理模型，這樣才能提高使用者的認知程度及使用效率。如圖5、圖6所示，由韓國VCNC公司開發的《News Gallery》，是一款新聞類的應用程序，界面的信息設計采用了畫廊的展覽形式，而且用戶可以根據自己的閱讀偏好來制定畫廊展覽的內容，讓使用的體驗更接近展覽館的閱讀感受。

（3）交互界面視覺設計的多維性原則。手機屏幕雖然是一個二維的空間，但是由于計算機技術手段的不斷進步及各種藝術表現風格的需要，在手機屏幕上甚至可以達到裸眼3D的視覺效果，這就給交互界面的視覺設計在展現空間距離方面帶來了更多的可能性。谷歌公司在2014年的網絡開發者年會上推出了一種全新的設計語言：Material Design。它同樣具有扁平化設計風格的特征，但是它最大的特點就是非常重視動效在交互界面設計過程中的使用，通過添加動效的方式將頁面內的元素、頁面與頁面之間有機的連接起來，巧妙的表現不同層級界面間的過渡，而且通過吸收水墨浸染紙張這一過程的靈感，采用觸摸反饋漣漪的方式給用戶帶來更加有趣的使用體驗。Material design設計語言中還在元素的層級排列中引入了z軸的概念，它假設把app的界面放在了一個容器當中，z軸垂直于屏幕，用來表現元素的層疊關系，如圖7、圖8所示。z值（高度）越高，元素離界面底層（水平面）越遠，投影面積越大。[3]所有元素都有默認的相對高度，對它進行操作會抬升它的相對高度，操作結束后，它應該落回默認高度。

（4）交互界面視覺設計的導向性原則。在版式設計中，視覺流程是一種“空間的運動”，是人的視線隨版式設計中諸多視覺藝術語言形態在版式空間沿一定軌跡運動的過程。在移動端的交互界面設計中也存在著“視線流”這一概念，而且除了用戶的主動注意外，視覺注意力還很容易被運動的元素所吸引，造成注意力的被動轉移。視覺的焦點需要運用在應用程序所要傳遞的信息的聚焦點上，如何引導用戶看到他們想要的信息，或者是產品需要用戶看到的內容，是設計師們需要事先考慮好的問題。如圖9所示，是一款購物類應用程序的搜索列表的原型草圖，左側的界面，由于有活動指示器的存在，所以用戶的視線流的起點就落在的進度指示器上，又由于多加入了一個返回的按鈕在界面的左上角位置，用戶的視線流最終就落在了左上角上，整個視線流的流線稍顯混亂，而相比之下，右側的搜索列表界面在視線流的引導上就顯得更加流暢了。

3 結語

扁平化設計風格在近幾年的移動終端交互界面視覺設計方面，正在被廣泛地應用和快速地發展著，但實質上它只是印刷出版美學在當今數字世界的一次重現，我們無法準確預知扁平化設計風格的最終走向趨勢，又將被什么樣的設計風格所取代。設計師們在進行跨平臺應用開發時，更需要注意研究每個平臺的設計語言及美學風格，并挖掘應用的典型交互方式和視覺特征，盡可能地保留能傳達應用品牌的設計特征，使移動產品在符合各個平臺的設計審美原則的同時，又能將品牌的形象傳遞給客戶。畢竟，對于很多用戶來說，界面的視覺效果和個性化體驗才是他們選擇應用程序的重要依據。

參考文獻：

[1] 楊煥.智能手機移動互聯網應用的界面設計研究[D].武漢理工大學，2013.

[2] 劉浩然.扁平化交互設計的美學研究[J].藝術品鑒，2015（11）.

[3] 趙大羽，關東升.品味移動設計：ios、Android、Window Phone用戶體驗設計最佳實踐[M].北京：人民郵電出版社，2013.

[4] 耿陽.基于杜威實用主義美學思想的人機交互研究[J].包裝工程，2012（02）.

[5] 陳星海，楊煥，廖海進.基于效率的移動界面視覺設計美學發展研究[J].包裝工程，2015（16）.

[6] 傅小貞，胡甲超，鄭元攏.移動設計[M].北京：電子工業出版社，2013.

作者簡介：姜旬恂，女，美術學碩士，吉林動畫學院游戲學院副教授，研究方向：信息設計與新媒體應用。

韓凱迪，男，設計藝術學碩士，吉林動畫學院游戲學院助教，研究方向：交互設計。