何揚帆　覃會優(yōu)

摘 要：隨著當(dāng)今社會信息時代高速發(fā)展，數(shù)字化媒體技術(shù)也更加廣泛的應(yīng)用在各個行業(yè)之中。在數(shù)字化媒體的快速更新的背景下，UI界面交互設(shè)計行業(yè)更展現(xiàn)出欣欣向榮的趨勢。圖像學(xué)是藝術(shù)學(xué)的研究對象，本文以圖像學(xué)分析方法為理論依據(jù)，闡明其在UI交互設(shè)計中的推動作用，把圖像學(xué)應(yīng)用在移動端UI設(shè)計中，目的在于讓UI設(shè)計師從基本的設(shè)計理論出發(fā)，可以讓設(shè)計師更加提升人機交互的體驗，進一步實現(xiàn)移動端UI 界面設(shè)計的價值性，這也是本文探討圖像學(xué)分析法在UI設(shè)計中啟示的目的。

關(guān)鍵詞：UI設(shè)計；圖像學(xué)；界面設(shè)計

中圖分類號：J524 文獻標識碼：A

文章編碼：1672-7053（2017）08-0109-02

Abstract：With the rapid development of the information age in the society， digital media technology is also more widely used in various industries. In the context of rapid updating of digital media， the UI interface design industry is showing a thriving trend.The image is the study object of art， based on image analysis method as the theoretical basis， to clarify its role in the interactive design of UI， the image in the mobile terminal in the UI design， the purpose is to let the UI designer design starting from the basic theory， can make designers more to enhance human-computer interaction experience， further realize the value of the UI interface design of mobile terminal， which is to explore the image analysis method in the design of UI to the enlightenment.

Key Words：UI design； image； man-machine interactive experience

1 UI 設(shè)計

隨著信息技術(shù)的高速發(fā)展，信息設(shè)計也成為文化產(chǎn)業(yè)不可分割的一部分，它悄悄的滲透到各行各業(yè)之中。而UI設(shè)計作為信息設(shè)計的一份子，在信息產(chǎn)業(yè)中占據(jù)著至關(guān)重要的地位。UI是User Interface（用戶界面）的簡稱，它通常可以指具備信息傳遞功能的產(chǎn)品設(shè)計（包括硬體和軟體）、信息傳遞方式的設(shè)計以及人機軟件界面設(shè)計等[1]。同時也產(chǎn)生了人機交互——一門研究系統(tǒng)和用戶之間交互關(guān)系學(xué)問。其中系統(tǒng)可以是各種各樣的機器，也可以是計算機的系統(tǒng)和軟件，人機交互界面通常是指用戶可見部分[2]。隨著移動用戶的增加，移動UI設(shè)計更成為如今最熱門的話題之一。在移動界面設(shè)計理念層面上，UI 設(shè)計不僅指視覺傳達中所指的通過界面美化設(shè)計，讓應(yīng)用軟件更加有個性、有品味，還蘊涵用戶與界面的交互體驗的設(shè)計思想，同時移動界面設(shè)計還要和用戶體驗研究相成、并駕齊驅(qū)，這是一個不斷修正、改善從而滿足用戶視覺體驗和操作體驗的過程。

總所周知，我們已經(jīng)進入一個互聯(lián)網(wǎng)時代，當(dāng)下的政府更提出“互聯(lián)網(wǎng)+”的政策，而移動互聯(lián)網(wǎng)更占據(jù)舉足輕重的地位，因此移動產(chǎn)品成了這個時代的必需品，同時“移動”互聯(lián)網(wǎng)也成了當(dāng)下的時事熱點對于移動界面的視覺設(shè)計而言，漂亮的外觀能夠引起用戶的關(guān)注，但同時也不容忽視外觀好看卻不便于用戶對信息甄別的情況發(fā)生，否則這樣的界面終究會被淘汰。如今設(shè)計師們越來越重視用戶體驗在設(shè)計中的地位和作用。而將藝術(shù)理論引入計算機處理技術(shù)，已成為計算機視覺領(lǐng)域的研究熱點。實踐證明，善于利用藝術(shù)設(shè)計學(xué)理論和提升用戶體驗可以抓住用戶群，產(chǎn)品也因此才能更具有價值[3]。在界面設(shè)計中要以用戶的喜好為出發(fā)點，不斷更新和改善產(chǎn)品設(shè)計以滿足用戶的需要，從而提高產(chǎn)品的實用性。

2圖像學(xué)分析法與UI設(shè)計的關(guān)系

圖像學(xué)源于19 世紀在歐洲美術(shù)史研究領(lǐng)域里發(fā)展起來的圖像志研究，它所關(guān)心的是藝術(shù)客體的主題內(nèi)容以及題材背后延伸的深層喻意。自然減少了對藝術(shù)作品的形式和表現(xiàn)風(fēng)格的關(guān)注，在這一點上同傳統(tǒng)的藝術(shù)史研究方法背道而馳。20 世紀以來圖像志的研究領(lǐng)域不斷擴展，與其它學(xué)科的聯(lián)系日益密切，發(fā)展成為一種蓄勢取代傳統(tǒng)藝術(shù)史研究方法的新方法——圖像學(xué)[4]。

潘若夫斯基指出圖像學(xué)研究的三種形態(tài)：（1）解釋作品的本質(zhì)內(nèi)容，即象征意義。（2）考察西方美術(shù)中的古典傳統(tǒng)，古典母題在藝術(shù)發(fā)展中的延續(xù)和變化。（3）考察一個母題在形式和意義上的變化[5]。筆者試圖通過圖像學(xué)分析法闡述UI設(shè)計的的基本理論支撐點。UI設(shè)計作為一種的圖像元素的設(shè)計語言其本身性質(zhì)跟受眾主體之間會產(chǎn)生相互作用的原則，這些原則貫穿受眾之間的的視覺語言，筆者將從圖像學(xué)三個層級分析法來解釋UI設(shè)計中的圖像語法。在 UI 設(shè)計中使用圖形學(xué)分析法為人機互動形式的形成和建構(gòu)的動力機制做引導(dǎo)，讓我們對圖像學(xué)分析法在設(shè)計語言上有全新的理解。

在UI交互設(shè)計系統(tǒng)中，界面設(shè)計是用戶與設(shè)備互動過程中的橋梁，溝通聯(lián)系了人與移動設(shè)備，讓用戶可以更快進入移動設(shè)備的世界，對其進行操控與使用。而圖像學(xué)雖然最早是用于西方繪畫的分析方法論，但是從其中衍生出來分析法對UI設(shè)計的上的形的研究有一定的幫助，研究結(jié)果表明我們每個人對形都具有一種與生俱來的組織能力，然而不同的形由于它的大小、方向、位置等發(fā)生變化，就會有不同的組織水平并伴隨著不同感受，這種感受是大腦皮層對外界刺激進行積極組織的結(jié)果[6]。這種視覺刺激的過程中，圖像學(xué)分析的三個層級方法論對著UI移動設(shè)計起著促進與指導(dǎo)性作用。下面將以圖像學(xué)分析法，探討其在移動界面視覺設(shè)計的影響。

2.1第一層級

在圖像學(xué)分析法中第一層級是“前圖像描述”，說的是界面設(shè)計元素之間的產(chǎn)品的本質(zhì)內(nèi)容，即象征意義，在移動UI界面設(shè)計中，解釋設(shè)計元素的本質(zhì)內(nèi)容，有助于讓我們的視覺經(jīng)驗在第一時間自動組織并將數(shù)據(jù)或事物向著簡化的方式解析，并賦予它們簡化視覺元素更優(yōu)化的視覺體驗與象征意義。以當(dāng)下微信界面為例，其界面的本質(zhì)內(nèi)容的描述分析是整個界面沒有過多地使用分界線去區(qū)分各個區(qū)域，而是利用圖標與選項文字間的左右距離以及每個選項間的上下距離，以及背景淺灰色的塊面，同時通過顏色展示元素之間的關(guān)聯(lián)性或者非關(guān)聯(lián)性，傳遞一種有組織，有聯(lián)系有層次的感覺。這都能讓用戶明白界面中的每個選項是如何分配的，讓人們在視覺上得到更多的優(yōu)化體驗，不會造成信息混亂的交互體驗。因此，在設(shè)計UI系統(tǒng)的過程中，要善于利用“圖像描述分析法”分析大量的的UI設(shè)計作品，吸收其優(yōu)秀的視覺設(shè)計語言。

2.2第二層級

“圖像學(xué)分析法”的第二層級是考察與分析圖像母體延續(xù)和變化，當(dāng)我們看到幾個組合的視覺元素時，視覺區(qū)域中的信息有著不止一個可能的延續(xù)和變化，但我們的視覺經(jīng)驗會在第一時間自動組織并將數(shù)據(jù)或事物向著簡化的方式解析，并賦予它們簡化視覺元素的設(shè)計語法。以新浪微博網(wǎng)頁版為例，在冗長的微博信息中，UI設(shè)計師將各個區(qū)域進行分類管理各類信息被安排在了界面的左右兩側(cè)，但當(dāng)瀏覽‘我的關(guān)注”中的內(nèi)容與信息時，其他模塊的信息會自動屏蔽，頁面亦會轉(zhuǎn)調(diào)到“我的關(guān)注”的頁面，視覺元素頁面便會自動將界面簡化處理，與此同時，也利用顏色上的的見簡化對比，讓界面信息更加明了。色彩部分的延續(xù)和變化是 UI 用戶交互設(shè)計中一種非常有用的工具，但是它與圖形語言一樣依賴用戶的本能感知，對于大部分用戶來說視覺感知器官中的色彩感知部分有著特定的局限和特征，當(dāng)然也受用戶的個人喜好不同而有所差別。母體設(shè)計語言延續(xù)和變化的分析方法在交互設(shè)計中的合理運用能使交互過程更加地高效而舒適，但是若不根據(jù)改分析方法的運用，看似簡單的色彩便會困擾用戶甚至帶來操作失誤。

2.3第三層級

在帕諾夫斯基關(guān)于圖像學(xué)的三段式中，第三個層級的則是圖像學(xué)的階段進入了其圖像元素的整體，它在這個空間中與其他的符號形式發(fā)生聯(lián)系而形成視覺的語言的上的整體思維慣性，同時它也具有這些符號形式的痕跡。在人機互動的過程中，受眾的視覺神經(jīng)系統(tǒng)傾向于將不連貫的離散信息進行視覺上整體化補充。所以即使我們看的是不完整視覺語言，我們的視覺經(jīng)驗會傾向于將其完整化。

以中國移動的流量計時器為例，通過圖像學(xué)第三層級的分析法對其進行剖析，中國移動的流量計時器是一個斷開的圓環(huán)，圓環(huán)圖形中不同的顏色跟文字的相結(jié)合起到表現(xiàn)信息數(shù)據(jù)與功能的作用，畫面簡潔干凈，在圓環(huán)上的斷開處以及圓下面解釋文字一定程度的破壞的的然圓環(huán)的整體性。在視覺上，我們雖然感受到了圓環(huán)圖形的變化和不同部分的差別，卻并沒有強烈地感受到圓環(huán)圖形的碎片感，我們依舊能感受到圓環(huán)是個整體，是個完整的存在，其他元素并沒有影響我們對人體的識別。這種構(gòu)圖方式使得有邊界的頁面在無形中被放大，界面在神經(jīng)系統(tǒng)中的延伸讓視覺效果變得更加廣闊。我們的視覺神經(jīng)系統(tǒng)可以有意識的組織離散元素，根據(jù)以往經(jīng)驗形成完整圖像，這樣的設(shè)計使得界面的沖擊力更強。其實這便圖像學(xué)分析法的第三階段，充分考慮的到設(shè)計元素發(fā)生在視覺神經(jīng)上聯(lián)系的。

3結(jié)語

隨著手機用戶的不斷增加，電子普及化迅速發(fā)展，智能手機正飛速改變著人們的生活方式。這些智能設(shè)備都有一個共同的特點，都將繁瑣的實體按鍵操作改為全屏觸摸式操作，顯示界面的變大，用戶希望移動用戶界面更加前衛(wèi)、炫酷，重視通過個性化、時尚化、多樣化來提升本身的視覺刺激感。如今移動應(yīng)用軟件界面設(shè)計越來越受到人們重視，對移動應(yīng)用界面的設(shè)計要求也越來越高。

本論文從交互UI視覺元素角度出發(fā)，介紹了移動界面視覺設(shè)計的背景，闡釋了關(guān)于圖像學(xué)分析法在UI移動界面視覺設(shè)計的原理。通過結(jié)合案例及本人實踐設(shè)計經(jīng)歷，探討了如何合理的運用視覺元素來使得移動應(yīng)用界面在操作時更加流暢、舒適、人機交互體驗更好，讓移動界面既美觀又不失明確的交互及實用價值，讓用戶更輕易去解讀我們的界面，也讓設(shè)計更有影響及使用價值。

參考文獻

[1]屠秀棟，淺談 UI 設(shè)計[J]. 2010，07-1706-02.

[2]尹家鳴，朱雨晴.基于基于心理學(xué)的人機交互界面的的變異與常則[J].包裝工程，2014，35（16），26-30.

[3]王曉慧，覃京燕.基于深度學(xué)習(xí)的情感化設(shè)計[J].包裝工程，2017，38（6），13-16.

[4] （英）貢布里希，范景中等譯.圖像與眼睛.浙江攝影出版，1989.

[5] （法）阿爾維托·曼谷埃爾，薛絢譯.意象地圖[M].云南人民出版社，2004.

[6]魯?shù)婪颉ぐ⒍骱Ｄ匪囆g(shù)與視知覺，中國社會科學(xué)出版社，1984.