用户体验设计中的视觉影响因素

👀 一、人类视觉的基本特征

🔥影响人类对所见内容的感知因素

• 过去的经历

过去的经历会引导、影响人们去期待他们所看到的的东西，也可以理解为是先验知识会影响我们对新事物的判断。

观察上图你可以发现什么不一样的东西吗

是的这里有一个人头你发现了吗？如果你没有发现这个人头，说明你受到你以往对咖啡豆影响的影响。

• 当前的上下文情境

Turn on the light
You are the light of life
He loves light music
She is a light sleeper
你这是什么意思
没什么意思，意思意思而已
你这就不够意思了
小意思，小意思
你这人真有意思

通过上述中英文，我们可以感受到语言在不同上下文中有着不同的意思

• 符合对未来的目标

只有符合我们的目标我们才会去关注它，这时我们往往就会忽视那些不在目标中的。例如给你3秒钟的时间，让你在一张图片中去找特定目标。等我问你除了这个目标外，你还观察到什么你可能就不记得。

又比如，鸡尾酒会效应：指的就是人的一种听力选择能力，在这种情况下，注意力集中在某一个人的谈话之中而忽略背景中其他的对话或噪音。 该效应揭示了人类听觉系统中令人惊奇的能力，使我们可以在噪声中谈话。

📄二、视觉原则

🔥格式塔原则

格式塔的感知原理有助消除设计中的”猜测“。一旦定义了页面中要呈现的内容，并且确定了目标人群，格式塔就能够帮助你高效的确定如何在页面上分布元素、如何使用线条、平衡背景阴影、是否使用渐变、元素该如何分组等问题。

😄相似性原则

如果一些物体有共同的视觉特征，那么我们就会认为他们是有关联的，是一组的。

对于这一组，他们的属性很明显不同，容易划分。再看下一组，有两个可以区分的要素，形状和颜色

你更倾向于依据什么划分呢？是不是颜色呢？这说明不同的要素在我们划分时所占的权重是不一样的。

启示

对于相似的对象，我们需要让他们按照相同的要素进行设计；如果想要突出某一个对象，那么它的设计元素就要不一样（从颜色、尺寸、形状）

😄邻近性原则

我们会关注画面中物体之间的距离，一般我们会认为相对较近的是一组。

常用手段

利用空白、留白，可以帮助我们对不同物体的划分。

😄连续性原则

把事物安排在直线或者曲线上更能吸引人，因为这是一个序列，人眼更容易沿着序列看完，符合我们对一个模式的延展。并且这种连续性的影响比颜色还要大。

😄对称性原则

对称的设计能令人感到稳固，和谐。左上角有一个元素，那么右下角也应该有一个。

😄共同区域

我们常常把一组成员放在一个闭合的区域，这样可以区分不同的元素，同时还可以实现等级的划分（例如更多的区域）

就是这样右边三个我们可以很明显看出分组，即使有一个不一样的

😄共象性原则

针对动态对象。那些有着相同的运动方向的对象更容易被看做一组。例如多级菜单都会朝着同一个方向弹出

😄封闭性原则

通过减少一些信息但是又可以表达完整的信息。这样可以让视觉看上去不那么累

😄主体背景原则

视觉可以把所见分割成前景和背景，更重要的要放在前景。例如给人拍照片，要把人放在画面的主体，而不能让背景占据主要视觉。一般来说深色更吸引人一点。

📖三、阅读的设计

文字的出现要晚于语言，对于阅读的学习都是后天习来的。在阅读的过程中，包括两种类型，一种是自下向上，基本部分（点、线）驱动；一种是自上而下，上下文驱动。前者是由点线再到偏旁部首再到字；后者是由一段话去分解成单词、字符，这个对阅读者的能力有要求。所以不同能力的人有不同的阅读习惯。

例如对于受众是年轻人，在文字的呈现就不用考虑太多。

影响因素

字型（有衬线和无衬线），有衬线就是会延展一些，可以把目光吸引到下一个字母；无衬线会更简洁一些。

字体大小：相同字号的不同类型字体，由于字母x的高度不同，大小看上去也不一样

行宽：人们读很行宽很大的文章会读的快一些；但是人们更喜欢短一点的行宽、一般来说40-60个字符会合适一些。

对齐方式

背景：如果背景会对文字的阅读造成困难（如背景图片和嘈杂或者文字颜色与背景反差不大）

用词：不熟悉的用词会组织用户

👉四、实际案例

🔥案例一

问题提出：APP快速访问区中元素的密度对老年人使用体验的影响

测量指标：搜索的时间和准确度

三种密度：密度从小到大分为三种

任务设计：随机分配一个密度和一个搜索任务，然后统计老年人的得分情况和满意度情况

涉及理论：认知负担理论

🔥案例二

问题提出：学生选课系统导航设计

两种导航：流程图导航与菜单导航

测量指标：认知负荷（任务表现中耗费的认知努力）与运动负荷（任务表现中耗费的体力）；感知有用性和感知易用性；用户满意度；使用意愿

任务设计：让用户分别使用两种不同的导航完成选课，统计他们的任务负担（观看次数、鼠标点击次数等）、感知

涉及理论：认知拟合理论