笪潔如,李亞軍

(南京理工大學(xué) 設(shè)計(jì)藝術(shù)與傳媒學(xué)院,江蘇 南京 210094)

0 引言

在移動(dòng)互聯(lián)網(wǎng)飛速發(fā)展、網(wǎng)絡(luò)技術(shù)飛速崛起的背景下,智能手機(jī)成為人們獲取信息、進(jìn)行社交活動(dòng)的重要媒介,傳統(tǒng)的多領(lǐng)域協(xié)同展示聲音、畫面和文字內(nèi)容的信息方式逐漸被時(shí)代淘汰,取而代之的是手機(jī)界面。手機(jī)界面設(shè)計(jì)中,圖片、文字和色彩的編排比例和分布位置都會(huì)影響用戶獲取信息的效率和用戶體驗(yàn)。現(xiàn)如今,大多數(shù)手機(jī)界面都存在包含信息量過(guò)大、無(wú)法讓用戶快速獲取目標(biāo)信息以及無(wú)法有效引導(dǎo)用戶把注意點(diǎn)放在設(shè)計(jì)者最想傳達(dá)的信息上等問(wèn)題,因此合理地手機(jī)視覺(jué)界面設(shè)計(jì)十分重要。

1 視覺(jué)感知機(jī)制

用戶在使用界面時(shí),通常是一個(gè)通過(guò)視覺(jué)通道進(jìn)行視覺(jué)搜索最后形成視覺(jué)感知的過(guò)程。因此在進(jìn)行界面設(shè)計(jì)前,先要對(duì)視覺(jué)感知機(jī)制進(jìn)行研究,設(shè)計(jì)出合理的界面展示和傳遞信息方式,使用戶快速獲取目標(biāo)信息;然后對(duì)用戶的視覺(jué)思維習(xí)慣進(jìn)行研究,通過(guò)視覺(jué)習(xí)慣引導(dǎo)用戶按照設(shè)計(jì)師預(yù)設(shè)的視覺(jué)動(dòng)線瀏覽界面,從而提升用戶獲取信息的效率和瀏覽界面時(shí)的感知愉悅性。

1.1 視覺(jué)通道

視覺(jué)通道是可視化中的重要概念,是個(gè)體接受視覺(jué)刺激產(chǎn)生視覺(jué)感知從而形成視覺(jué)反饋的通道,具有疲勞程度、視覺(jué)變化習(xí)慣、準(zhǔn)確性、觀察情況的優(yōu)先性、設(shè)計(jì)依據(jù)、接受程度、顏色的易辨認(rèn)順序、顏色相配對(duì)時(shí)的易辨認(rèn)順序等特征。

1.2 視覺(jué)搜索

視覺(jué)搜索由一系列與注意相關(guān)的動(dòng)作組成,通過(guò)眼睛運(yùn)動(dòng)從而發(fā)現(xiàn)目標(biāo)信息的視覺(jué)感知軌跡,視覺(jué)搜索的績(jī)效反映了操作者的認(rèn)知效率[1]。根據(jù)韋爾提出的視覺(jué)搜索的三層嵌套循環(huán)模型[2],視覺(jué)搜索過(guò)程即對(duì)原始信息進(jìn)行匹配,找出與目標(biāo)信息特征重合的信息,進(jìn)而重點(diǎn)關(guān)注。在此過(guò)程中,用戶通常會(huì)先關(guān)注視覺(jué)中心的信息,但是色彩或大小與其他信息對(duì)比強(qiáng)烈的邊緣信息也會(huì)吸引用戶注意。

1.3 視覺(jué)感知

視覺(jué)感知分為人眼接受分析客觀形象的過(guò)程和大腦提煉辨認(rèn)視覺(jué)形象的心理過(guò)程。常人的感知行為主要是通過(guò)視覺(jué)來(lái)獲取大量的信息,視覺(jué)占據(jù)著人體85%的感知行為信息獲取的比例,人們主要通過(guò)視覺(jué)所看到的畫面來(lái)感知外部世界[3]。

另外,視覺(jué)感知活動(dòng)可以分為2個(gè)路徑:自下而上和自上而下的路徑[2]。自下而上的路徑源自呈現(xiàn)在視網(wǎng)膜上的圖案視覺(jué)信息,是一種基于特征的視覺(jué)搜索;而自上而下的路徑則源自注意力的需要,即根據(jù)任務(wù)的需要來(lái)依次決定關(guān)注點(diǎn)。Wickens等[4]提出了SEEV模型,視覺(jué)注意力受到信息顯著性(Salience)、努力(Effort)、期望(Expectancy)和價(jià)值(Value)4個(gè)因素的影響。其中顯著性和努力是影響視覺(jué)注意力分配自下而上的主要因素,而期望和價(jià)值是影響視覺(jué)注意力分配自上而下的主要因素。因此,可以根據(jù)從上至下、由左至右的視覺(jué)習(xí)慣來(lái)指導(dǎo)視覺(jué)要素的編排。

2 界面設(shè)計(jì)研究現(xiàn)狀

用戶界面(User Interface,UI)就是把軟件呈獻(xiàn)給使用者的界面,包括界面的美觀、使用者與軟件的互動(dòng)、操作和算法等在內(nèi)的整體[5]。它使信息原本的內(nèi)部形式轉(zhuǎn)換成用戶可以理解的形式,是系統(tǒng)與用戶信息交換與交互的媒介。界面設(shè)計(jì)的優(yōu)良程度直接影響到用戶體驗(yàn)和運(yùn)用效果。隨著用戶對(duì)審美和信息量需求的不斷提高,界面設(shè)計(jì)的重心也越來(lái)越偏向豐富多彩、精美時(shí)尚。但是,界面設(shè)計(jì)并不是越豐富越美觀才被用戶所接受,而應(yīng)該更注重其易用性和可用性。

2.1 界面設(shè)計(jì)的基本原則

2.1.1 一致性原則

在視覺(jué)方面,無(wú)論是字體還是顏色的設(shè)計(jì),都需保證視覺(jué)上的風(fēng)格統(tǒng)一,使頁(yè)面整體結(jié)構(gòu)合理一致。在操作方式方面,預(yù)設(shè)的界面操作應(yīng)與用戶的操作習(xí)慣一致,減少經(jīng)驗(yàn)對(duì)用戶操作的影響,提高用戶的操作效率。

2.1.2 易用性原則

易用性是“以用戶為中心”為整個(gè)設(shè)計(jì)的基本理念[6],就是要保證用戶能輕松地使用。界面設(shè)計(jì)要保證界面功能的可用性,要確保操作的便捷性,尤其是關(guān)于操作路徑的設(shè)計(jì),來(lái)幫助用戶更加順利地操作和達(dá)到目的。

2.1.3 情感性原則

情感化設(shè)計(jì)能增加界面對(duì)用戶的吸引力,提升用戶的情感體驗(yàn)和感知愉悅性,從而獲得用戶的心理認(rèn)可度。例如當(dāng)用戶想要?jiǎng)h除某些內(nèi)容時(shí),跳出是否刪除的提示讓用戶再次確認(rèn),可以有效避免用戶誤刪。再例如在頁(yè)面加載時(shí),出現(xiàn)一個(gè)動(dòng)態(tài)的圖標(biāo)顯示加載進(jìn)程,可以緩解用戶等待時(shí)的焦躁心情。

2.1.4 直觀性原則

要求界面清晰直觀的傳達(dá)信息,所有視覺(jué)元素都清晰直觀而不過(guò)分修飾。設(shè)計(jì)是為內(nèi)容服務(wù)的,界面上所有的視覺(jué)元素都應(yīng)該為了突出界面的主要內(nèi)容而布局和設(shè)計(jì),以便用戶更快速地獲取目標(biāo)信息。

2.1.5 美觀性原則

滿足用戶的審美需求也是界面設(shè)計(jì)的要點(diǎn)之一,用戶對(duì)美的追求是天性,美觀性也是“以用戶為中心”這個(gè)基本設(shè)計(jì)理念的衍生原則。美觀的界面同樣增加用戶的感知愉悅性。

2.2 界面中的視覺(jué)元素

李黎[7]將手機(jī)界面設(shè)計(jì)的視覺(jué)構(gòu)成元素劃分為文本元素、色彩元素和圖形元素3大類,并認(rèn)為視覺(jué)元素的主要功能是傳播信息、充當(dāng)人機(jī)交互媒介和提升用戶感知愉悅性。

2.2.1 文本元素

文字是傳遞界面信息的主要載體,除此之外,具有設(shè)計(jì)感的文字還又提升界面的審美價(jià)值從而增強(qiáng)視覺(jué)傳達(dá)的效果,文字的編排與字符的選用會(huì)直接影響用戶對(duì)界面的感知愉悅性。

2.2.2 圖形元素

相比于文字元素,圖形元素更直觀生動(dòng),它不會(huì)被限制于語(yǔ)言和文化的界限與阻礙,讓用戶更容易理解和獲取信息,因此有“世界語(yǔ)”之稱。在界面設(shè)計(jì)中,圖形更能引起和激發(fā)用戶的視覺(jué)關(guān)注和游覽興趣,并帶給用戶更強(qiáng)的瞬間記憶,在信息傳播上更是具有“一圖頂萬(wàn)言”的效能。

2.2.3 色彩元素

色彩元素是表現(xiàn)界面形象的首要視覺(jué)元素,不同的色彩會(huì)讓用戶產(chǎn)生不一樣的心理效應(yīng)。視覺(jué)研究表明,好的色彩設(shè)計(jì)可以表現(xiàn)出強(qiáng)烈的視覺(jué)沖擊力和藝術(shù)感染力,能提高用戶瀏覽頁(yè)面時(shí)的舒適度和感知愉悅性。

2.3 常見(jiàn)的界面分析

用戶界面存在于所有人機(jī)交互的領(lǐng)域,好的界面設(shè)計(jì)能滿足用戶對(duì)界面的使用需求,使用戶快速找到目標(biāo)信息,引導(dǎo)用戶將注意力放在設(shè)計(jì)者想要他們關(guān)注的信息上,同時(shí)也能準(zhǔn)確傳達(dá)和反饋信息。

衣、食、住、行是人類社會(huì)生活的基本內(nèi)容,作為設(shè)計(jì)師,應(yīng)該將目光放在解決人類的基本生存問(wèn)題和最低需求上,即馬斯洛需求層次的最低需求,生理需求。隨著信息技術(shù)的不斷發(fā)展,人們?cè)絹?lái)越多地使用手機(jī)進(jìn)行點(diǎn)餐,點(diǎn)餐界面已經(jīng)成為人們生活的一部分,每天都要不可避免地接觸到。

通過(guò)對(duì)南京地區(qū)使用程度較高的3款點(diǎn)餐界面(南京大排檔、貓抓烤肉、海底撈)進(jìn)行分析,可以發(fā)現(xiàn)它們之間存在一些相同的特性。

2.3.1 視覺(jué)元素自下而上分布

結(jié)合用戶瀏覽模式中自下而上的路徑,可以將最想表達(dá)的重要信息分布在用戶的視覺(jué)興趣區(qū)內(nèi)(上部),可以增加信息的顯著性。此外,讓重點(diǎn)信息與周圍其他次要信息形成視覺(jué)差,例如將字體加粗放大、色彩對(duì)比、添加背景色、留白等,可以使其更加醒目。

2.3.2 引導(dǎo)視覺(jué)搜索

導(dǎo)航欄引導(dǎo)視覺(jué)查詢一般分為主導(dǎo)航和次導(dǎo)航。用戶通常使用大拇指完成界面上的手部操作,因此,主導(dǎo)航通常采用頂部或左部導(dǎo)航,而次導(dǎo)航一般采用頂部圖標(biāo)導(dǎo)航進(jìn)行搜索。主導(dǎo)航會(huì)對(duì)菜品進(jìn)行了一個(gè)大致的分類,可以幫助用戶快速獲取目標(biāo)信息,而次導(dǎo)航則可以讓用戶進(jìn)行精準(zhǔn)搜獲信息,二者結(jié)合可以提高視覺(jué)信息搜索效率。

2.3.3 色彩層級(jí)引導(dǎo)

界面配色一般由品牌色和輔助色構(gòu)成,品牌色可以直觀地展現(xiàn)品牌風(fēng)格和產(chǎn)品特征,輔助色則可以區(qū)分不同視覺(jué)要素的功能。通過(guò)相同的色彩形成相似性,通過(guò)不同的色彩形成對(duì)比來(lái)拉開(kāi)信息的視覺(jué)層級(jí)。以南京大排檔點(diǎn)餐界面為例,從其品牌Logo可知它的品牌色為深棕色,也是其界面字體的所用色,界面中的其他3個(gè)主要顏色均為品牌色的相似色,而某些菜品的特殊標(biāo)簽為輔助色紅色,紅色與其他顏色形成明顯的對(duì)比關(guān)系,可以引發(fā)用戶對(duì)有紅色標(biāo)簽的菜品更多的注意和關(guān)注。

2.3.4 文字和圖片的主次關(guān)系

文字在界面設(shè)計(jì)中是傳達(dá)信息的主要載體,圖片輔助文字做進(jìn)一步的信息說(shuō)明。圖片是界面中最容易被最先注意的元素,也是最直觀傳達(dá)信息的元素。設(shè)計(jì)師需運(yùn)用好文字的顏色、大小和樣式以及圖片的大小、排列和分布,可以讓整個(gè)界面的信息層次清晰,使用戶更快速有效地獲取信息。

3 視覺(jué)感知對(duì)界面設(shè)計(jì)的影響

3.1 視覺(jué)心理習(xí)慣

用戶的視覺(jué)心理習(xí)慣是界面設(shè)計(jì)和信息可視化的依據(jù),因此在進(jìn)行界面設(shè)計(jì)時(shí),設(shè)計(jì)師需要了解視覺(jué)心理習(xí)慣對(duì)用戶進(jìn)行視覺(jué)瀏覽時(shí)的影響。

在視覺(jué)心理中,格式塔視覺(jué)原理對(duì)界面設(shè)計(jì)有較大的影響,格式塔原理闡明了視覺(jué)元素之間的關(guān)系以及元素與背景的關(guān)系等,讓設(shè)計(jì)師可以依據(jù)其包含的原則做界面設(shè)計(jì)。

3.1.1 接近性原則

接近性原則是指在手界面中,用戶視覺(jué)上會(huì)將位置靠近的元素歸為同屬性。在界面設(shè)計(jì)時(shí),可以將同類的元素放在鄰近的位置,便于用戶歸類同組的信息,例如點(diǎn)餐界面中的菜單導(dǎo)航就是應(yīng)用了這一原則。

3.1.2 相似性原則

相似性原則是指擁有相似視覺(jué)特征的元素會(huì)被認(rèn)為是一組,這些視覺(jué)特征包括擁有相似的形狀或色彩等,相似性原則主要被應(yīng)用在界面的圖標(biāo)設(shè)計(jì)中。

3.1.3 閉合性原則

閉合性原則是指用戶視覺(jué)心理習(xí)慣會(huì)把一個(gè)局部元素認(rèn)知為一個(gè)整體的閉合的圖形。簡(jiǎn)單來(lái)說(shuō)就是當(dāng)我們看到物體的不完整部分時(shí),可以很快地依據(jù)過(guò)往經(jīng)驗(yàn)使其恢復(fù)原狀。

3.1.4 區(qū)域聯(lián)想原則

區(qū)域聯(lián)想原則是指用戶的視覺(jué)會(huì)根據(jù)自身大腦的記憶或經(jīng)驗(yàn),把一個(gè)區(qū)域內(nèi)現(xiàn)有的元素聯(lián)想為另一個(gè)相近的整體圖形。

3.1.5 連續(xù)性原則

連續(xù)性原則是指用戶的視覺(jué)心理會(huì)使其傾向于把原本斷續(xù)的元素組成連續(xù)的輪廓或重復(fù)的圖形。在界面設(shè)計(jì)中,將亂序的元素組成整齊的網(wǎng)格,可以使用戶在視覺(jué)上快速適應(yīng)這種連續(xù)的元素,從而增強(qiáng)用戶的視覺(jué)體驗(yàn)和感知愉悅性。

3.2 視覺(jué)游覽軌跡

用戶主要通過(guò)眼睛從界面上獲取信息,因此了解用戶的視覺(jué)瀏覽模式對(duì)界面設(shè)計(jì)至關(guān)重要?！癋”型模式是2006年尼爾森諾曼發(fā)表的《眼球軌跡的研究》一文中提及,他研究發(fā)現(xiàn)用戶在界面上的瀏覽軌跡呈現(xiàn)為“F”型[8],如圖1所示,用戶的視線通常最先對(duì)界面的上半部分區(qū)域做水平方向的快速瀏覽運(yùn)動(dòng),形成一條趨于橫向的運(yùn)動(dòng)軌跡,即“F”的第一條橫線。然后用戶的視線通常會(huì)略微下移,對(duì)中部偏上的區(qū)域做第二次水平方向的快速瀏覽,即“F”字母的第二條橫線。

圖1 三種不同性質(zhì)網(wǎng)頁(yè)的眼動(dòng)熱點(diǎn)圖

通過(guò)“F”型瀏覽模式可以發(fā)現(xiàn)頁(yè)面頂部和左側(cè)的信息更能引起用戶的關(guān)注,因此,設(shè)計(jì)師在設(shè)計(jì)界面時(shí)應(yīng)盡可能將最想傳達(dá)的內(nèi)容放在界面的頂部和左側(cè)。

除此以外的瀏覽模式還有割草機(jī)模式、彈球模式、分層蛋糕模式和斑點(diǎn)模式[9]。在界面設(shè)計(jì)中,可以利用這些瀏覽模式,合理分配界面元素和信息要素,從而提升用戶瀏覽效率和感知愉悅性。

4 基于點(diǎn)餐界面的眼動(dòng)實(shí)驗(yàn)設(shè)計(jì)

4.1 目標(biāo)和假設(shè)

基于上述研究和理論,本實(shí)驗(yàn)旨在探討界面設(shè)計(jì)中的視覺(jué)要素如何影響用戶注意力和視覺(jué)感知愉悅性。在選擇點(diǎn)餐界面時(shí),針對(duì)該界面中的圖形元素和文字元素這2個(gè)主要元素進(jìn)行實(shí)驗(yàn),得出用戶的注意力和視覺(jué)感知愉悅性與這些視覺(jué)要素的關(guān)系。

假設(shè)圖形元素的不同大小和分布會(huì)吸引用戶不同程度的注意力,相比其他元素,圖片元素本身就更具吸引力,而較大的圖片更會(huì)被用戶第一時(shí)間關(guān)注到,根據(jù)視線瀏覽軌跡的“F”模型,偏上部的圖片也會(huì)吸引更多的注意力。然后,根據(jù)視覺(jué)心理習(xí)慣的接近性原則,假設(shè)越靠近吸引人的圖形的文字會(huì)吸引用戶更多的注意力。

4.2 方法

4.2.1 實(shí)驗(yàn)人員

6名參與者加入實(shí)驗(yàn)(年齡范圍:21—23歲),都是同一專業(yè)的大學(xué)生自愿參加這項(xiàng)研究,所有參與者視力正?；虺C正視力正常。

4.2.2 材料

使用3張自己制作的點(diǎn)餐界面,除了最大圖片的位置分布外,其他均相同。每張界面的字體有大小、顏色以及背景的不同,每張界面的圖片有大小和位置分布的不同。

使用Tobii x-120眼動(dòng)儀(ET)記錄參與者對(duì)每張界面的視覺(jué)探索。Tobii系統(tǒng)允許研究人員對(duì)每個(gè)參與者進(jìn)行快速和自動(dòng)的校準(zhǔn)程序,該系統(tǒng)是無(wú)障礙的,允許自由的頭部運(yùn)動(dòng),允許自發(fā)的行為。

4.2.3 程序

參與者來(lái)到實(shí)驗(yàn)室,先對(duì)被試人員進(jìn)行編號(hào),按照編號(hào)順序依次進(jìn)行實(shí)驗(yàn),實(shí)驗(yàn)每人進(jìn)行一次。要求被試人員坐在設(shè)備前,雙眼位于屏幕正中,且距離屏幕約60 cm。實(shí)驗(yàn)前需進(jìn)行校準(zhǔn),校準(zhǔn)由系統(tǒng)自動(dòng)執(zhí)行。實(shí)驗(yàn)時(shí)圖片將由計(jì)算機(jī)系統(tǒng)自動(dòng)呈現(xiàn)在顯示器上,每張實(shí)驗(yàn)圖片展示10 s,在每張實(shí)驗(yàn)圖片切換間隙插入一張純黑背景作為過(guò)渡,防止過(guò)渡太快導(dǎo)致視覺(jué)殘留現(xiàn)象造成影響,過(guò)渡圖片展示3 s。展示結(jié)束后實(shí)驗(yàn)自動(dòng)結(jié)束,儀器自帶軟件會(huì)記錄實(shí)驗(yàn)數(shù)據(jù)。

4.3 實(shí)驗(yàn)數(shù)據(jù)分析

4.3.1 軌跡圖分析

不同階段的眼動(dòng)注視點(diǎn)圖如圖2所示。當(dāng)最大圖在頂部時(shí),如圖2(a)所示,從6個(gè)被試人員的軌跡圖的視線點(diǎn)的數(shù)量分布來(lái)看,首先,頂部最大的圖片在圖形元素中分布了最多的視線點(diǎn),且注視點(diǎn)數(shù)量由上往下遞減。其次,在白色背景上的文字比在圖片背景上的文字分布更多的注視點(diǎn)。最后,與圖片更靠近的文字比距離圖片較遠(yuǎn)的文字分布更多的注視點(diǎn)。從視線點(diǎn)的順序分布來(lái)看,視線點(diǎn)1—10的聚集區(qū)域主要分布在界面的頂部圖片,不難看出大多的被試人員都是最先關(guān)注到頂部最大的那張圖。

圖2 不同階段的眼動(dòng)注視點(diǎn)圖

當(dāng)最大圖在中部時(shí),如圖2(b)所示,從6個(gè)被試人員的軌跡圖的視線點(diǎn)的數(shù)量分布來(lái)看,中部最大的圖片在圖形元素中分布了最多的視線點(diǎn),且注視點(diǎn)數(shù)量由最大的那張圖往周圍遞減。當(dāng)最大圖在中部時(shí),用戶的注視點(diǎn)更多的分布在圖片上,而非文字上。從視線點(diǎn)的順序分布來(lái)看,視線點(diǎn)1—10的聚集區(qū)域主要分布在界面的中部和頂部,不難看出大多的被試人員都是最先關(guān)注到最大的那張圖,也有部分被試人員最先關(guān)注頂部的圖片。

當(dāng)最大圖在底部時(shí),如圖2(c)所示,從6個(gè)被試人員的軌跡圖的視線點(diǎn)的數(shù)量分布來(lái)看,底部最大的圖片在圖形元素中分布了最多的視線點(diǎn),且注視點(diǎn)數(shù)量由下往上遞減,但總體分布較為平均,沒(méi)有顯著的差異。當(dāng)最大圖在底部時(shí),用戶的注視點(diǎn)更多的分布在文字上,且注視點(diǎn)數(shù)量由下往上遞減,但總體分布較為平均,沒(méi)有顯著的差異。從視線點(diǎn)的順序分布來(lái)看,視線點(diǎn)1—10的聚集區(qū)域主要分布在界面的底部,不難看出大多的被試人員都是最先關(guān)注到最大的那張圖,也有部分被試人員最先關(guān)注偏上的圖片。

4.3.2 熱點(diǎn)圖分析

如圖3所示,從左到右分別是最大圖位于上、中、下時(shí)6位被試人員的總體熱點(diǎn)圖。可以看出,當(dāng)最大圖位于頂部時(shí),被試人員的視線熱點(diǎn)集中在最大圖及下面;當(dāng)最大圖位于中部時(shí),被試人員的視線熱點(diǎn)集中在最大圖及周邊;當(dāng)最大圖位于底部時(shí),被試人員的視線熱點(diǎn)則分布較為均勻,且中部稍有集中。

圖3 不同階段的眼動(dòng)熱點(diǎn)圖

4.3.3 數(shù)據(jù)表格分析

從第一次注視時(shí)間的表格來(lái)看,如表1所示,當(dāng)最大圖在頂部時(shí),被試人員可以最快地注視到,平均需要0.98 s;當(dāng)最大圖在中部時(shí),平均需要1.15 s;而當(dāng)最大圖在底部時(shí),被試人員注視到的時(shí)間最長(zhǎng),需要1.22 s。

表1 最大圖所處不同位置的反應(yīng)時(shí)間和平均值

從注視時(shí)間總時(shí)長(zhǎng)的表格來(lái)看,如表2所示,當(dāng)最大圖在頂部時(shí),被試人員注釋的時(shí)間最長(zhǎng),平均注視1.53 s;其次是當(dāng)最大圖在中部時(shí),平均注視1.41 s;而當(dāng)最大圖在底部時(shí),被試人員注視的時(shí)間最短,平均注視1.26 s。

表2 最大圖所處不同位置的注視時(shí)間和平均值

4.4 實(shí)驗(yàn)結(jié)果

4.4.1 圖形元素結(jié)果

通過(guò)對(duì)實(shí)驗(yàn)數(shù)據(jù)的分析總結(jié),當(dāng)最大圖位于頂部時(shí)可以吸引用戶更多的注意力,并且最大圖的分布位置也可以連帶增加其周圍圖片的關(guān)注度,但是當(dāng)最大圖位于底部時(shí),往往不能因?yàn)榇笮〉膬?yōu)勢(shì)吸引更多的注意力,大多的用戶還是會(huì)按照視覺(jué)感知習(xí)慣由上往下進(jìn)行游覽。因此,在界面設(shè)計(jì)時(shí),應(yīng)該將最想傳達(dá)的圖片信息放大并置于界面頂部,并將其次想傳達(dá)的圖片信息盡量靠近最大圖放置,有利于用戶快速獲取目標(biāo)信息。

4.4.2 文字元素結(jié)果

通過(guò)對(duì)實(shí)驗(yàn)數(shù)據(jù)的分析總結(jié),文字背景是白色時(shí)吸引到的用戶注意力大于文字背景是圖片時(shí)吸引到的用戶注意力;越靠近圖片的文字越能吸引更多的注意力。因此,在界面設(shè)計(jì)時(shí),應(yīng)該盡量保持文字背景的簡(jiǎn)約空白,并且給最想傳達(dá)的文字信息加以配圖片或圖標(biāo),以引起用戶的游覽興趣和關(guān)注,有利于用戶快速獲取目標(biāo)信息。

5 結(jié)語(yǔ)

本文在信息科技飛速發(fā)展,手機(jī)界面應(yīng)用廣泛的背景下,首先對(duì)界面設(shè)計(jì)的基礎(chǔ)和依據(jù)即視覺(jué)感知機(jī)制進(jìn)行了闡述。然后分析了界面設(shè)計(jì)的研究現(xiàn)狀,了解了界面設(shè)計(jì)的基本原則、界面的視覺(jué)要素以及對(duì)現(xiàn)有使用較多的界面進(jìn)行具體的分析。其次研究了視覺(jué)感知對(duì)界面設(shè)計(jì)的影響,根據(jù)用戶的視覺(jué)習(xí)慣,合理分配界面和信息要素,從而提升用戶感知愉悅性和游覽效率。最后根據(jù)以上研究和理論,針對(duì)點(diǎn)餐界面設(shè)計(jì)眼動(dòng)實(shí)驗(yàn),分析數(shù)據(jù)得出結(jié)論,從而驗(yàn)證假設(shè),得出更合理的界面設(shè)計(jì)方案。但本文還存在諸多不足,例如沒(méi)有對(duì)色彩元素進(jìn)行進(jìn)一步實(shí)驗(yàn)、被試人員數(shù)量過(guò)少等。希望本文可以給設(shè)計(jì)師在界面設(shè)計(jì)上更多的參考和啟發(fā)。