何揚(yáng)帆　覃會(huì)優(yōu)

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

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

中圖分類號(hào)：J524 文獻(xiàn)標(biāo)識(shí)碼：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è)計(jì)

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

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

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

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

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

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

2.1第一層級(jí)

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

2.2第二層級(jí)

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

2.3第三層級(jí)

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

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

3結(jié)語

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

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

參考文獻(xiàn)

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

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

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

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

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

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