基于移動終端交互界面設(shè)計(jì)的審美原則探析

姜旬恂　韓凱迪

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

關(guān)鍵詞：移動設(shè)備；交互界面設(shè)計(jì)；審美原則

近幾年，智能手機(jī)及其他移動端設(shè)備在社會生活中的普及，給我們的生活方式和生活習(xí)慣帶來了巨大的改變，移動互聯(lián)網(wǎng)及應(yīng)用程序的使用已經(jīng)成為我們?nèi)粘Ｉ钪械闹匾M成部分，人們的生活質(zhì)量開始變得與移動產(chǎn)品的設(shè)計(jì)水平息息相關(guān)了，挑剔的移動端用戶們從最開始較多的關(guān)注應(yīng)用程序的功能，慢慢地在界面視覺設(shè)計(jì)的審美形式上開始有了更高、更深層次的心理要求。因此，必然使得設(shè)計(jì)師們對于移動端交互界面的設(shè)計(jì)開始有了更多的關(guān)注和思考。

1 移動端交互界面設(shè)計(jì)的特點(diǎn)

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

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

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

2 移動終端交互界面設(shè)計(jì)的視覺審美原則

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

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

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

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

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

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

3 結(jié)語

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

參考文獻(xiàn)：

[1] 楊煥.智能手機(jī)移動互聯(lián)網(wǎng)應(yīng)用的界面設(shè)計(jì)研究[D].武漢理工大學(xué)，2013.

[2] 劉浩然.扁平化交互設(shè)計(jì)的美學(xué)研究[J].藝術(shù)品鑒，2015（11）.

[3] 趙大羽，關(guān)東升.品味移動設(shè)計(jì)：ios、Android、Window Phone用戶體驗(yàn)設(shè)計(jì)最佳實(shí)踐[M].北京：人民郵電出版社，2013.

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

[5] 陳星海，楊煥，廖海進(jìn).基于效率的移動界面視覺設(shè)計(jì)美學(xué)發(fā)展研究[J].包裝工程，2015（16）.

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

作者簡介：姜旬恂，女，美術(shù)學(xué)碩士，吉林動畫學(xué)院游戲?qū)W院副教授，研究方向：信息設(shè)計(jì)與新媒體應(yīng)用。

韓凱迪，男，設(shè)計(jì)藝術(shù)學(xué)碩士，吉林動畫學(xué)院游戲?qū)W院助教，研究方向：交互設(shè)計(jì)。