論圖像學分析法對移動UI界面設計的應用研究

何揚帆　覃會優(yōu)

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

關鍵詞：UI設計；圖像學；界面設計

中圖分類號：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 設計

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

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

2圖像學分析法與UI設計的關系

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

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

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

2.1第一層級

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

2.2第二層級

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

2.3第三層級

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

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

3結語

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

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

參考文獻

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

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

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

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

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

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