網(wǎng)頁圖片文字比例和復(fù)雜度對(duì)網(wǎng)頁美學(xué)和可用性的影響 ——基于眼動(dòng)研究
發(fā)布時(shí)間:2021-10-20 02:19
近年來網(wǎng)頁設(shè)計(jì)中的視覺因素受到越來越多的重視,以前人們只重視網(wǎng)頁功能的實(shí)現(xiàn)。后來人們發(fā)現(xiàn)網(wǎng)頁的界面設(shè)計(jì)決定了用戶在網(wǎng)頁上停留的時(shí)間,信息提取的效率,對(duì)網(wǎng)頁的成功產(chǎn)生重要的影響。在網(wǎng)頁設(shè)計(jì)中,除了文字外設(shè)計(jì)師還會(huì)加入一些圖片,不同的圖片文字比例的網(wǎng)頁對(duì)用戶的體驗(yàn)帶來很大的差異;網(wǎng)頁復(fù)雜度是網(wǎng)頁信息量的直觀反映,它直接影響著用戶的認(rèn)知。然而我們尚不清楚圖片文字比例和網(wǎng)頁復(fù)雜度這兩個(gè)重要的設(shè)計(jì)因素共同作用會(huì)對(duì)網(wǎng)頁設(shè)計(jì)會(huì)產(chǎn)生什么樣的影響。除此之外,既往的網(wǎng)頁研究多為考慮網(wǎng)頁元素的數(shù)量,少有結(jié)合美學(xué)原則進(jìn)行研究,本文也探索了統(tǒng)一性這一美學(xué)原則對(duì)網(wǎng)頁設(shè)計(jì)的影響。本研究結(jié)合生理數(shù)據(jù)、行為數(shù)據(jù)和心理數(shù)據(jù)研究了圖片文字比例和復(fù)雜度對(duì)網(wǎng)頁美學(xué)和可用性影響。結(jié)果發(fā)現(xiàn)了生理、心理、行為數(shù)據(jù)一致表明圖片文字比和復(fù)雜度有交互效應(yīng)。高文字比例的網(wǎng)頁增加復(fù)雜度會(huì)使認(rèn)知負(fù)荷增大、降低可用性和美學(xué)品質(zhì),而圖片比例高的網(wǎng)頁復(fù)雜度增加但認(rèn)知負(fù)荷沒有增加、可用性沒有降低。隨后筆者針對(duì)網(wǎng)頁圖片這一重要的設(shè)計(jì)因素本文進(jìn)行了第二個(gè)實(shí)驗(yàn),即結(jié)合美學(xué)統(tǒng)一性原則探索網(wǎng)頁圖片統(tǒng)一和圖片分散對(duì)網(wǎng)頁設(shè)計(jì)的影響,結(jié)果發(fā)現(xiàn)網(wǎng)頁圖片統(tǒng)一不但能增加網(wǎng)頁...
【文章來源】:浙江大學(xué)浙江省 211工程院校 985工程院校 教育部直屬院校
【文章頁數(shù)】:100 頁
【學(xué)位級(jí)別】:碩士
【部分圖文】:
圖2.1蘋果公司主頁??(2)空間變化??
??圖2.1蘋果公司主頁??(2)空間變化??在頁面上放入不同的元素來將網(wǎng)頁區(qū)分為不同的空間,不同的空間將網(wǎng)頁??區(qū)分為不同的部分,設(shè)計(jì)師可以對(duì)不同的部分進(jìn)行不同風(fēng)格的設(shè)計(jì)。在不同部??分的變化給用戶帶來了豐富的體驗(yàn)。不同部分的分界處是變化最強(qiáng)的區(qū)域,用??戶的視線在頁面中移動(dòng)時(shí)能體驗(yàn)到強(qiáng)弱的變化。如下面這張網(wǎng)頁被分為3個(gè)空??間,上下兩個(gè)空間留白較多,這祥能輕松的凸顯出文字信息而又不需要文字很??大,從而保持了美感(見圖2.?2)。中間大圖的空間其到吸引用戶注意的視覺重??心的作用。不同的空間能起到引導(dǎo)用戶閱讀的作用,用戶先被網(wǎng)頁的中間部分??吸引讓用戶對(duì)網(wǎng)頁產(chǎn)生興趣,然后用戶的視線移到網(wǎng)頁的上下部分來閱讀網(wǎng)頁??信息。這樣通過空間變化來清晰流暢的引導(dǎo)用戶就能給用戶帶來美的體驗(yàn)。??另一種比較極端但常用的空間變化就是留白
同時(shí)車門把手的線條也與從車燈到尾燈的腰線融為一體,這樣也增加了汽車的??統(tǒng)一性。從混亂中發(fā)現(xiàn)統(tǒng)一有利于欣賞和流程的認(rèn)知處理,能夠?qū)υ剡M(jìn)行認(rèn)??知組合能帶來愉悅。眾所周知的斑點(diǎn)狗圖片可以解釋這種現(xiàn)象(見圖2.3)。??v?A??一?a妙,??隱??圖2.?3斑點(diǎn)狗圖片??一張狗的圖片最初被看作一些黑白點(diǎn),但是當(dāng)人們認(rèn)識(shí)到這些點(diǎn)能組成斑點(diǎn)狗??時(shí)就會(huì)很驚喜,體驗(yàn)到愉悅。同樣地這種通過認(rèn)知到統(tǒng)一而獲得愉悅也會(huì)出現(xiàn)??在網(wǎng)頁、產(chǎn)品、藝術(shù)、音樂中[33]。??由于我們的環(huán)境是由多樣的元素構(gòu)成,我們的感覺已經(jīng)學(xué)會(huì)了在多變的信??息中進(jìn)行精確的處理。如果輸入的信息過于統(tǒng)一,我們的感覺就會(huì)遲鈍[41'42]。??我們也需要一些變化的挑戰(zhàn)來平衡統(tǒng)一。因此人們從既有變化又有統(tǒng)一的刺激??中獲得最大的美學(xué)愉悅。既往的研究大量的支持了變化統(tǒng)一在美學(xué)評(píng)價(jià)中的重??要性。在產(chǎn)品設(shè)計(jì)領(lǐng)域,雖然變化和統(tǒng)一是矛盾的。但是人們已經(jīng)發(fā)行了它能??增加產(chǎn)品的美感。把變化和統(tǒng)一的特征最大化就能獲得最好的美學(xué)體驗(yàn)[33]。??2.6網(wǎng)頁可用性理論??根據(jù)國(guó)際標(biāo)準(zhǔn)組織,可用性的定義是特定用戶在特定的情況下實(shí)現(xiàn)特定目標(biāo)??的效率、正確率、滿意度等(ISO
【參考文獻(xiàn)】:
期刊論文
[1]圖標(biāo)視覺搜索行為的ACT-R認(rèn)知模型分析[J]. 王海燕,黃雅梅,陳默,薛澄岐. 計(jì)算機(jī)輔助設(shè)計(jì)與圖形學(xué)學(xué)報(bào). 2016(10)
[2]多媒體學(xué)習(xí)研究中眼動(dòng)跟蹤實(shí)驗(yàn)法的應(yīng)用[J]. 王雪. 實(shí)驗(yàn)室研究與探索. 2015(03)
[3]視覺模擬評(píng)分法[J]. 嚴(yán)廣斌. 中華關(guān)節(jié)外科雜志(電子版). 2014(02)
[4]視線追蹤技術(shù)在網(wǎng)頁可用性評(píng)估中的應(yīng)用[J]. 曾宇靜,張彤,陳宜. 人類工效學(xué). 2012(03)
[5]網(wǎng)頁設(shè)計(jì)中的人的視覺搜索因素[J]. 王洪濤,何寧. 社會(huì)心理科學(xué). 2009(05)
[6]網(wǎng)絡(luò)視覺傳達(dá)探討[J]. 馮任軍. 科技情報(bào)開發(fā)與經(jīng)濟(jì). 2005(14)
碩士論文
[1]基于眼動(dòng)的網(wǎng)頁對(duì)稱性和復(fù)雜度對(duì)用戶認(rèn)知的影響的研究[D]. 王雷.浙江大學(xué) 2017
[2]基于眼動(dòng)數(shù)據(jù)的網(wǎng)頁美學(xué)因素研究[D]. 潘聰.上海交通大學(xué) 2014
[3]基于認(rèn)知心理學(xué)的網(wǎng)頁情感化設(shè)計(jì)研究[D]. 鈕玉.昆明理工大學(xué) 2011
[4]基于認(rèn)知心理學(xué)的電子商務(wù)網(wǎng)站設(shè)計(jì)研究[D]. 曹越旗.上海交通大學(xué) 2010
[5]基于網(wǎng)頁設(shè)計(jì)的視覺信息傳達(dá)有效性的研究[D]. 何麗萍.浙江大學(xué) 2006
本文編號(hào):3446055
【文章來源】:浙江大學(xué)浙江省 211工程院校 985工程院校 教育部直屬院校
【文章頁數(shù)】:100 頁
【學(xué)位級(jí)別】:碩士
【部分圖文】:
圖2.1蘋果公司主頁??(2)空間變化??
??圖2.1蘋果公司主頁??(2)空間變化??在頁面上放入不同的元素來將網(wǎng)頁區(qū)分為不同的空間,不同的空間將網(wǎng)頁??區(qū)分為不同的部分,設(shè)計(jì)師可以對(duì)不同的部分進(jìn)行不同風(fēng)格的設(shè)計(jì)。在不同部??分的變化給用戶帶來了豐富的體驗(yàn)。不同部分的分界處是變化最強(qiáng)的區(qū)域,用??戶的視線在頁面中移動(dòng)時(shí)能體驗(yàn)到強(qiáng)弱的變化。如下面這張網(wǎng)頁被分為3個(gè)空??間,上下兩個(gè)空間留白較多,這祥能輕松的凸顯出文字信息而又不需要文字很??大,從而保持了美感(見圖2.?2)。中間大圖的空間其到吸引用戶注意的視覺重??心的作用。不同的空間能起到引導(dǎo)用戶閱讀的作用,用戶先被網(wǎng)頁的中間部分??吸引讓用戶對(duì)網(wǎng)頁產(chǎn)生興趣,然后用戶的視線移到網(wǎng)頁的上下部分來閱讀網(wǎng)頁??信息。這樣通過空間變化來清晰流暢的引導(dǎo)用戶就能給用戶帶來美的體驗(yàn)。??另一種比較極端但常用的空間變化就是留白
同時(shí)車門把手的線條也與從車燈到尾燈的腰線融為一體,這樣也增加了汽車的??統(tǒng)一性。從混亂中發(fā)現(xiàn)統(tǒng)一有利于欣賞和流程的認(rèn)知處理,能夠?qū)υ剡M(jìn)行認(rèn)??知組合能帶來愉悅。眾所周知的斑點(diǎn)狗圖片可以解釋這種現(xiàn)象(見圖2.3)。??v?A??一?a妙,??隱??圖2.?3斑點(diǎn)狗圖片??一張狗的圖片最初被看作一些黑白點(diǎn),但是當(dāng)人們認(rèn)識(shí)到這些點(diǎn)能組成斑點(diǎn)狗??時(shí)就會(huì)很驚喜,體驗(yàn)到愉悅。同樣地這種通過認(rèn)知到統(tǒng)一而獲得愉悅也會(huì)出現(xiàn)??在網(wǎng)頁、產(chǎn)品、藝術(shù)、音樂中[33]。??由于我們的環(huán)境是由多樣的元素構(gòu)成,我們的感覺已經(jīng)學(xué)會(huì)了在多變的信??息中進(jìn)行精確的處理。如果輸入的信息過于統(tǒng)一,我們的感覺就會(huì)遲鈍[41'42]。??我們也需要一些變化的挑戰(zhàn)來平衡統(tǒng)一。因此人們從既有變化又有統(tǒng)一的刺激??中獲得最大的美學(xué)愉悅。既往的研究大量的支持了變化統(tǒng)一在美學(xué)評(píng)價(jià)中的重??要性。在產(chǎn)品設(shè)計(jì)領(lǐng)域,雖然變化和統(tǒng)一是矛盾的。但是人們已經(jīng)發(fā)行了它能??增加產(chǎn)品的美感。把變化和統(tǒng)一的特征最大化就能獲得最好的美學(xué)體驗(yàn)[33]。??2.6網(wǎng)頁可用性理論??根據(jù)國(guó)際標(biāo)準(zhǔn)組織,可用性的定義是特定用戶在特定的情況下實(shí)現(xiàn)特定目標(biāo)??的效率、正確率、滿意度等(ISO
【參考文獻(xiàn)】:
期刊論文
[1]圖標(biāo)視覺搜索行為的ACT-R認(rèn)知模型分析[J]. 王海燕,黃雅梅,陳默,薛澄岐. 計(jì)算機(jī)輔助設(shè)計(jì)與圖形學(xué)學(xué)報(bào). 2016(10)
[2]多媒體學(xué)習(xí)研究中眼動(dòng)跟蹤實(shí)驗(yàn)法的應(yīng)用[J]. 王雪. 實(shí)驗(yàn)室研究與探索. 2015(03)
[3]視覺模擬評(píng)分法[J]. 嚴(yán)廣斌. 中華關(guān)節(jié)外科雜志(電子版). 2014(02)
[4]視線追蹤技術(shù)在網(wǎng)頁可用性評(píng)估中的應(yīng)用[J]. 曾宇靜,張彤,陳宜. 人類工效學(xué). 2012(03)
[5]網(wǎng)頁設(shè)計(jì)中的人的視覺搜索因素[J]. 王洪濤,何寧. 社會(huì)心理科學(xué). 2009(05)
[6]網(wǎng)絡(luò)視覺傳達(dá)探討[J]. 馮任軍. 科技情報(bào)開發(fā)與經(jīng)濟(jì). 2005(14)
碩士論文
[1]基于眼動(dòng)的網(wǎng)頁對(duì)稱性和復(fù)雜度對(duì)用戶認(rèn)知的影響的研究[D]. 王雷.浙江大學(xué) 2017
[2]基于眼動(dòng)數(shù)據(jù)的網(wǎng)頁美學(xué)因素研究[D]. 潘聰.上海交通大學(xué) 2014
[3]基于認(rèn)知心理學(xué)的網(wǎng)頁情感化設(shè)計(jì)研究[D]. 鈕玉.昆明理工大學(xué) 2011
[4]基于認(rèn)知心理學(xué)的電子商務(wù)網(wǎng)站設(shè)計(jì)研究[D]. 曹越旗.上海交通大學(xué) 2010
[5]基于網(wǎng)頁設(shè)計(jì)的視覺信息傳達(dá)有效性的研究[D]. 何麗萍.浙江大學(xué) 2006
本文編號(hào):3446055
本文鏈接:http://www.sikaile.net/kejilunwen/sousuoyinqinglunwen/3446055.html
最近更新
教材專著