网页图片文字比例和复杂度对网页美学和可用性的影响 ——基于眼动研究
发布时间：2021-10-20 02:19
近年来网页设计中的视觉因素受到越来越多的重视,以前人们只重视网页功能的实现。后来人们发现网页的界面设计决定了用户在网页上停留的时间,信息提取的效率,对网页的成功产生重要的影响。在网页设计中,除了文字外设计师还会加入一些图片,不同的图片文字比例的网页对用户的体验带来很大的差异;网页复杂度是网页信息量的直观反映,它直接影响着用户的认知。然而我们尚不清楚图片文字比例和网页复杂度这两个重要的设计因素共同作用会对网页设计会产生什么样的影响。除此之外,既往的网页研究多为考虑网页元素的数量,少有结合美学原则进行研究,本文也探索了统一性这一美学原则对网页设计的影响。本研究结合生理数据、行为数据和心理数据研究了图片文字比例和复杂度对网页美学和可用性影响。结果发现了生理、心理、行为数据一致表明图片文字比和复杂度有交互效应。高文字比例的网页增加复杂度会使认知负荷增大、降低可用性和美学品质,而图片比例高的网页复杂度增加但认知负荷没有增加、可用性没有降低。随后笔者针对网页图片这一重要的设计因素本文进行了第二个实验,即结合美学统一性原则探索网页图片统一和图片分散对网页设计的影响,结果发现网页图片统一不但能增加网页...
【文章来源】：浙江大学浙江省 211工程院校 985工程院校 教育部直属院校
【文章页数】：100 页
【学位级别】：硕士
【部分图文】：
图２．１苹果公司主页??（２）空间变化??
??图２．１苹果公司主页??（２）空间变化??在页面上放入不同的元素来将网页区分为不同的空间，不同的空间将网页??区分为不同的部分，设计师可以对不同的部分进行不同风格的设计。在不同部??分的变化给用户带来了丰富的体验。不同部分的分界处是变化最强的区域，用??户的视线在页面中移动时能体验到强弱的变化。如下面这张网页被分为３个空??间，上下两个空间留白较多，这祥能轻松的凸显出文字信息而又不需要文字很??大，从而保持了美感（见图２．?２）。中间大图的空间其到吸引用户注意的视觉重??心的作用。不同的空间能起到引导用户阅读的作用，用户先被网页的中间部分??吸引让用户对网页产生兴趣，然后用户的视线移到网页的上下部分来阅读网页??信息。这样通过空间变化来清晰流畅的引导用户就能给用户带来美的体验。??另一种比较极端但常用的空间变化就是留白
同时车门把手的线条也与从车灯到尾灯的腰线融为一体，这样也增加了汽车的??统一性。从混乱中发现统一有利于欣赏和流程的认知处理，能够对元素进行认??知组合能带来愉悦。众所周知的斑点狗图片可以解释这种现象（见图２．３）。??ｖ?Ａ??一?ａ妙，??隱??图２．?３斑点狗图片??一张狗的图片最初被看作一些黑白点，但是当人们认识到这些点能组成斑点狗??时就会很惊喜，体验到愉悦。同样地这种通过认知到统一而获得愉悦也会出现??在网页、产品、艺术、音乐中［３３］。??由于我们的环境是由多样的元素构成，我们的感觉已经学会了在多变的信??息中进行精确的处理。如果输入的信息过于统一，我们的感觉就会迟钝［４１＇４２］。??我们也需要一些变化的挑战来平衡统一。因此人们从既有变化又有统一的刺激??中获得最大的美学愉悦。既往的研究大量的支持了变化统一在美学评价中的重??要性。在产品设计领域，虽然变化和统一是矛盾的。但是人们已经发行了它能??增加产品的美感。把变化和统一的特征最大化就能获得最好的美学体验［３３］。??２．６网页可用性理论??根据国际标准组织，可用性的定义是特定用户在特定的情况下实现特定目标??的效率、正确率、满意度等（ＩＳＯ
【参考文献】：
期刊论文
[1]图标视觉搜索行为的ACT-R认知模型分析[J]. 王海燕,黄雅梅,陈默,薛澄岐. 计算机辅助设计与图形学学报. 2016(10)
[2]多媒体学习研究中眼动跟踪实验法的应用[J]. 王雪. 实验室研究与探索. 2015(03)
[3]视觉模拟评分法[J]. 严广斌. 中华关节外科杂志(电子版). 2014(02)
[4]视线追踪技术在网页可用性评估中的应用[J]. 曾宇静,张彤,陈宜. 人类工效学. 2012(03)
[5]网页设计中的人的视觉搜索因素[J]. 王洪涛,何宁. 社会心理科学. 2009(05)
[6]网络视觉传达探讨[J]. 冯任军. 科技情报开发与经济. 2005(14)
硕士论文
[1]基于眼动的网页对称性和复杂度对用户认知的影响的研究[D]. 王雷.浙江大学 2017
[2]基于眼动数据的网页美学因素研究[D]. 潘聪.上海交通大学 2014
[3]基于认知心理学的网页情感化设计研究[D]. 钮玉.昆明理工大学 2011
[4]基于认知心理学的电子商务网站设计研究[D]. 曹越旗.上海交通大学 2010
[5]基于网页设计的视觉信息传达有效性的研究[D]. 何丽萍.浙江大学 2006
本文编号：3446055
【文章来源】：浙江大学浙江省 211工程院校 985工程院校 教育部直属院校
【文章页数】：100 页
【学位级别】：硕士
【部分图文】：
图２．１苹果公司主页??（２）空间变化??
??图２．１苹果公司主页??（２）空间变化??在页面上放入不同的元素来将网页区分为不同的空间，不同的空间将网页??区分为不同的部分，设计师可以对不同的部分进行不同风格的设计。在不同部??分的变化给用户带来了丰富的体验。不同部分的分界处是变化最强的区域，用??户的视线在页面中移动时能体验到强弱的变化。如下面这张网页被分为３个空??间，上下两个空间留白较多，这祥能轻松的凸显出文字信息而又不需要文字很??大，从而保持了美感（见图２．?２）。中间大图的空间其到吸引用户注意的视觉重??心的作用。不同的空间能起到引导用户阅读的作用，用户先被网页的中间部分??吸引让用户对网页产生兴趣，然后用户的视线移到网页的上下部分来阅读网页??信息。这样通过空间变化来清晰流畅的引导用户就能给用户带来美的体验。??另一种比较极端但常用的空间变化就是留白
同时车门把手的线条也与从车灯到尾灯的腰线融为一体，这样也增加了汽车的??统一性。从混乱中发现统一有利于欣赏和流程的认知处理，能够对元素进行认??知组合能带来愉悦。众所周知的斑点狗图片可以解释这种现象（见图２．３）。??ｖ?Ａ??一?ａ妙，??隱??图２．?３斑点狗图片??一张狗的图片最初被看作一些黑白点，但是当人们认识到这些点能组成斑点狗??时就会很惊喜，体验到愉悦。同样地这种通过认知到统一而获得愉悦也会出现??在网页、产品、艺术、音乐中［３３］。??由于我们的环境是由多样的元素构成，我们的感觉已经学会了在多变的信??息中进行精确的处理。如果输入的信息过于统一，我们的感觉就会迟钝［４１＇４２］。??我们也需要一些变化的挑战来平衡统一。因此人们从既有变化又有统一的刺激??中获得最大的美学愉悦。既往的研究大量的支持了变化统一在美学评价中的重??要性。在产品设计领域，虽然变化和统一是矛盾的。但是人们已经发行了它能??增加产品的美感。把变化和统一的特征最大化就能获得最好的美学体验［３３］。??２．６网页可用性理论??根据国际标准组织，可用性的定义是特定用户在特定的情况下实现特定目标??的效率、正确率、满意度等（ＩＳＯ
【参考文献】：
期刊论文
[1]图标视觉搜索行为的ACT-R认知模型分析[J]. 王海燕,黄雅梅,陈默,薛澄岐. 计算机辅助设计与图形学学报. 2016(10)
[2]多媒体学习研究中眼动跟踪实验法的应用[J]. 王雪. 实验室研究与探索. 2015(03)
[3]视觉模拟评分法[J]. 严广斌. 中华关节外科杂志(电子版). 2014(02)
[4]视线追踪技术在网页可用性评估中的应用[J]. 曾宇静,张彤,陈宜. 人类工效学. 2012(03)
[5]网页设计中的人的视觉搜索因素[J]. 王洪涛,何宁. 社会心理科学. 2009(05)
[6]网络视觉传达探讨[J]. 冯任军. 科技情报开发与经济. 2005(14)
硕士论文
[1]基于眼动的网页对称性和复杂度对用户认知的影响的研究[D]. 王雷.浙江大学 2017
[2]基于眼动数据的网页美学因素研究[D]. 潘聪.上海交通大学 2014
[3]基于认知心理学的网页情感化设计研究[D]. 钮玉.昆明理工大学 2011
[4]基于认知心理学的电子商务网站设计研究[D]. 曹越旗.上海交通大学 2010
[5]基于网页设计的视觉信息传达有效性的研究[D]. 何丽萍.浙江大学 2006
本文编号：3446055
本文链接：https://www.wllwen.com/kejilunwen/sousuoyinqinglunwen/3446055.html
