指示性设计元素帮你提升用户体验

2022-02-18 点击量：

日常生活中，当有人向你问路时，最好的办法就是给他们指出方向和路线。在web和app界面设计中也一样，设计师可以利用各种指示性设计元素引导用户，帮助用户找到自己想要的内容或完成某项必要的操作。

本文就UI界面中常见的指示性设计元素做了一些整理，希望可以帮助到各位设计师。

什么是指示性设计元素？

众所周知，道路上的指示标志是用来指示车辆和行人该如何通行。同理，在UI界面中，指示性设计元素就是用来告知、引导、指示用户的设计元素，因此，只要是在视觉上可以提示特定的交互或内容，从而让用户更快、更轻松地注意到，比如CTA按钮，文本提示等，都属于指示性设计元素。

指示性设计元素是如何影响用户体验的？

大多数情况下，往往只需要几秒钟时间，用户就已经决定了要不要使用你的产品。因此，页面的逻辑是否清晰，结构是否明确，重点是否突出，指示性元素的引导是否合理就显得非常重要。

指示性设计元素是我们今天讨论的重点，它对用户体验的影响是多方面的，使用正确的指示性设计元素可以：

方便用户快速浏览页面

加强页面视觉层次感

提供更便利的导航

提高页面转化率

关于指示性元素和用户体验之间的问题，CXL Lnsitute曾经做过一个很有名的实验。这个研究小组做了很多个不同版本的落地页面来进行测试，根据用户行为收集了大量的用户交互数据，并进行了准确分析，发现不同的设计对用户行为、用户在页面的停留时间以及页面转化率都大有影响。

CXL Lnsitute用于测试的落地页面如下：

1）界面中人物视线偏移表单：

2）界面中人物视线聚焦在表单:

3）界面中有箭头指向表单：

4）界面中没有任何指示性设计元素：

5）界面中通过深色背景突出表单：

6）界面中有一个三角指向表单：

测试结果显示，落地页的热点图差距非常巨大。

首先，带有手绘箭头的页面热点图如下：

该页面用户的停留时间最长，并且表单的点击次数最多。

其次，人物视线偏离表单的页面热点图如下：

该页面，用户的注意力也完全脱离了表单。

可见，指示性设计元素对用户行为和页面的转化率有着非常重大的影响。

常见的指示性设计元素 一、箭头（Arrows）

箭头是最受欢迎的指示设计元素之一，它通用、明显、易懂。不同年龄、不同文化、不同教育程度以及不同技术涵养的人都可以理解。前面提到的CXL Lnsitute的测试也验证了这一点。

家居装饰电子商务网站

使用箭头作为交互元素的视觉提示：

外卖网站

左右各有一个箭头，提示用户可以选择更多：

Dance Academy着陆页

使用箭头提示用户页面在水平方向上存在交互:

Tubik Studio团队设计的网站

底部箭头提示用户可以滚动鼠标浏览页面：

二、手型（Pointers）