前端人需要懂些-用户体验(表现层)

发布网友 发布时间：2024-09-06 19:34

我来回答

共1个回答

热心网友 时间：2024-10-07 13:33

上一篇很笼统的提到了前端体验五要素，接下来咱们就是来详细的介绍一下用户体验要素五要素中的表现层方面的内容。

表现层是五要素中具体的一层，也是对我们FE同学来说，能够更快的在一些方面得到提升。提升我们优化页面的能力

表现层是位于五要素的最顶端，是最具体的一层。在这一层，把功能、内容、美学等全部汇聚这一层。完成其他四层的所有目标，并同时满足用户的感官要素。

由此可见表现层的重要程度，它承载了很重的责任与使命。

表现层又称为感知设计，表现层在框架层的排版布局的基础至上，来解决并弥补产品框架层面的逻辑排布的感知呈现问题。

通过详细的阅读发现，用户体验要素中的表现层，简单的来解释：希望通过表现层统一设计风格来到达产品的一致性。

其中设计风格中分为大致的三块：分组、排列、配色。书中详细的内容同时也是结合这方面进行分析。结合设计认知详细讲解分组以及排列问题；

人类的感知由五个方面组成：视觉、听觉、触觉、嗅觉、味觉。

在人机交互的过程中，我们需要更多的考虑人类的感知，我记得有一本设计书中提到，如果让用户更多的去学习如何使用我们的系统，而不是将更多的精力放在用户目标事项中的时候，那基本上已经失去了这个用户。

关于视觉方面。我们拿Form表单排列来简单认识一下视觉体验对组件设计的影响。

在表单中根据标签与输入区的位置的区分，可以分为左对齐、右对齐、顶部对齐、内联式

1）左对齐

竖线型的视觉动线更加符合现代人们的阅读习惯，阅读效率高的同时也利于用户对标签的整体浏览。但由于表单字段长短差异，造成部分标签和输入区之间的距离较大，从而降低了这些表单标签和与其对应输入区的亲密性，用户的填写效率也会随之降低。

2）右对齐

右对齐的标签与输入框之间亲密性较高，用户的填写效率相比左对齐高。但标签字段左侧长短不一容易造成标签阅读效率不高。

3）顶部对齐

顶部对齐也是遵循用户竖线型的视觉动线，更加符合现代人们的阅读习惯。对于标签字符长度大，尤其是外文标签，顶对齐表单的适应性更强。但是上下排列结构对页面的纵向空间占用较大。

4）内联式

内联式将标签放置在了输入框中，类似于输入区的占位符。在用户输入过程中文字标签隐藏，可能会引起用户的迷茫。

5)浮动式

标签在输入前位于输入区类似占位符，输入中(后)，标签向上移动并变小，节约了空间的同时，标签依然存在。变小后的标签虽一定程度上降低了可视性，但也保障了用户录入信息的准确性。

我们在做设计的时候，最好的排版以及设计，应该是根据人类一些常规的操作习惯，去排版设计。但是事实上我们的感知存在一些偏差，分别来之经验、环境、目标等等。这些方面均会影响我们的感知。

整体来说我们在做设计的时候需要将感知的影响因素考虑在内。

避免显示有歧义的信息，并通过测试确认所有用户对信息的理解的一致的。当无法消除歧义时，要么依靠标准或者惯例，要么告知用户用你期望的方式去理解歧义之处。

例如，电脑上的显示经常将按钮和文本输人框泣染成看起来高于背景面(上图)。这种显示方式依赖-个大多数有经验的电脑用户都熟悉的惯例一光源在屏幕的左上角。如果一个物体是以光源在不同的位置来谊染的话，用户是无法看出它凸起的。

电脑屏幕上的技钮经常带有阴影以量现三维效果，但这种惯例只有在假设模拟光源在左上角时才有用。

在一致的位置摆放信息和控件。不同页面上提供的相同功能的控件和数据显示应该摆放在每一页上相同的位置，而且它们还应该有相同的颜色、字体和阴影等。这样的一致性能让用户很快地找到和识别它们。

用户去用-个系统是有目标的。设计者应该了解这些目标，要认识到不同用户的目标可能不同，而且他们的目标强烈左右他们能感知到什么。在一次交互的每个点上，确保提供了用户需要的信息，并非常清晰地对应到一个可能的用户目标，使用户能够注意到井使用这些信息。

可见性朝向目标的第步应该清晰.

自解释控件本身能够提示使用方法。

反馈?对已经发生了或者正在发生的情况提供清晰的说明。

简单化尽可能简单并能专注具体任务。

结构内容组织应有条理。

一致性相似从而可预期。

容错性避免错误，能够从错误中恢复。

可访问性即使有故障，访问设备或者环境条件存在制约，也要使所有目标用户都能够使用。

了解用户。

了解所执行的任务。

考虑软件运行环境。

-开发一个概念模型。

要争取尽可能自然。

使用用户所用的词汇，而不是自己创造的。。封装，不暴露程序的内部运作。

找到功能与复杂度的平衡点。

保证常见的结果容易实现。

两类“常见”:“很多人”与“很经常”。

为核心情况而设计，不要纠结于“边缘”情况。

清除那些用户经过琢磨推导才会用的东西。

“从外向内”而不是“从内向外”思考。0一致，一致，还是一致。

提供一个低风险的学习环境。

仔细设计显示，争取专业的帮助。

屏幕是用户的。

保持显示的惯性。

即刻确认用户的操作。

让用户知道软件是否在忙。

在等待时允许用户做别的事情。

动画要做到平滑和清晰。

让用户能够终止长时间的操作。

让用户能够预计操作所需的时间。

尽可能让用户来掌控自己的工作节奏。

测试结果会让设计者(甚至是经验丰富的设计者)感到惊讶。

安排时间纠正测试发现的问题。

测试有两个目的:信息目的和社会目的。

每一个阶段和每一个目标都要有测试。

原文：https://juejin.cn/post/7094825096778350606