让你更好的做出 UI 界面中的指向提示

如果你想让人们到达一个特定目的地，你会怎么做？会尽一切可能向他们指引方向。在UI设计中，也不例外。不要指望用户来到你的网站或 app 中自己鼓捣和自学诀窍。设计师的工作就是尽可能简单直观地进行转换。指向提示是实现这一目标的关键点。因此，在今天的文章中，让我们做好网站和移动用户界面中流行的指向提示类型，并找出它们为什么会积极相应用户体验的重要因素。

什么是指向提示？

指向提示是UI界面的非常元素，它提供特定交互或内容上的视觉引导，以便用户更快，更轻松地看到它。相同于警示标志和路标在现实世界中的作用。它是引导用户访问到重要内容、文本行和大标题的关键元素，接着可以让用户实现转换，并更快地解决用户问题。

与大多数情况一样，您只需几秒钟就可以说服用户与你的产品进行互动，使其一目了然。核心内容即时可见对用户体验至关重要。

指向提示如何影响用户体验？

增强页面或屏幕可阅览性

应用于页面或屏幕，动词“阅览”意味着匆匆浏览或阅读，这也是目前社会中“快消”特点之一。因此，可阅览性是将内容和导航元素呈现为可以轻松阅览的布局方式。与网站交互，尤其是用户首次进入界面可以快速查看内容，分析是否是他们需要的内容。任何内容都可能成为一个“磁铁”吸引用户：如单词，句子，图像或动画等。

如何检查网页是否具有阅读性？就要回答两个问题：

- 您在几分钟内看到的内容是否符合目标受众对此页面的期望？

- 您能在第一分钟或第二分钟了解页面上的信息类型吗？

 

加强视觉层次

视觉层次结构是应用于设计过程的核心元素之一。它最初基于格式塔心理学中，该理论实验了用户对元素之间相互关系的视觉感知，并证明了人们会将视觉元素分类，并本能的统一到一起。

以“格式塔”方式呈现产品的内容，以便用户可以理解每个元素的重要性级别。规划 UI 组成部分，以便用户可以根据视觉感官差异（如大小，颜色，对比度，风格等）区分内容。

UI元素的可视化呈现对产品的用户体验具有很大影响。如果内容排版看着凌乱不堪，用户就无法在产品中找到核心内容或正确地与其进行交互。因此用户无法快速阅览，他们需要付出很大精力来区分要找的内容。这种用户体验意味着产品想要得到用户的安排？那是不可能的！

改善导航

在UI设计方面，导航是设定可用性的基本概念之一。在这种情况下，导航通常可以定义为在整个 app 或网站中引导用户的一套功能，使用户能够实现他们的目标并成功地与产品交互。高效导航对用户体验有很大影响。所以设计师们该做的是：设计高效导航，让用户使用具有特定目标和满足期望的 app 或网站~

在设计UI界面的一开始，应该考虑 UI 中有意义的和无间隙的导航。用户通过界面进行导航，一般具备许多交互元素，例如按钮，开关，链接，标签，任务栏，菜单，字段等。其中所有基本导航问题，例如布局，过渡，元素放置和功能，都在 UX 线框图的早期阶段设置。然后使用简单原型图进行检查，以确保无误和用户体验。

提高转换率

毫无疑问，设计师决定登录页是否会转换。在 UI 和 UX 上，设计师应该考虑实用性、用户参与度和关键绩效指标，也称为 KPI 。根据原始资料：如战略营销目标、价值主张和用户分析，设计师开始 UI / UX 的设计。

设计师不能盲目创新。无论你的用户是谁，绝大多数网站用户已经习惯使用 UI 和 UX 设计中的某些常用导航元素，如购物车图标或导航工具栏位置。如果从登录页就对访问者来说是一个难题的话，那你的设计几乎无法将新访问者转换为潜在用户。

假设有人第一次来到你的网站。他希望快速浏览你的网站内容。但是在滚动几秒钟后，屏幕上会出现一个优惠巨大弹出窗口。当此人试图关闭此优惠时，屏幕上再次出现另外两个弹出窗口，要求访问者订阅你的简报并免费试用你的服务。说实在话，这种用户体验会非常不好。在这种情况下，你的目的是获得新粉丝，用户目的是快速了解网站中的更多内容。设计师应该考虑用户体验，只有用户满意了才可能喜欢，喜欢了自然路转粉！

接下来的实验是由CXL Insitute机构完成的，展示了指向提示的类型的有效性。CXL Insitute创建了同一登录页的几个版本，这些版本只是指向提示不同，然后收集用户交互的数据并对其进行分析。以下是选项的各个版本：

实验表明，指向提示对用户体验、内容阅览和转换率有很大影响：

• 带有手绘箭头的页面在页面上的时间最长，并且注意力指向联系表单

• 一个男人远离表单的页面版本得到了用户最少的关注和互动。

因此，明智地应用指向提示，UX设计师增强了界面与用户的视觉交流。然后我们更容易实现界面表达目的，让用户根据引导完善信息，这是影响界面实用性的一个因素。

流行的指向提示类型

箭头

最受欢迎的指向提示之一也是最直接的提示。也许，没有比方向箭头更明显或更普遍的方式来显示方向了。这就是为什么界面上出现各种各样的箭头来帮助用户找到需要的内容。对于任何年龄，文化，教育水平和职业素养的人来说，这种互动模式是最显而易见的 - 上述CXL Insitute机构的实验已经证明了这一点。

森林露营网站使用箭头提示与水平幻灯片的互动

家居装饰电商网站使用箭头作为交互元素的视觉提示

DIY热狗送餐服务的网页使用箭头让用户看到他们所处的位置

网站底部区域的动画箭头引导用户滚动查看更多内容

指示样式

如果你不想让设计看起来像箭头那样直接怎么办？那么可以试试指示样式。同样，它的效果也非常不错：当有人想将你的注意力集中在一个物体或一个人身上时，只需指向它就足够了。在网页和移动屏幕上，可以运用这个技巧，设计出各种视觉效果，为核心内容或交互元素提供画龙点睛般的视觉暗示。

hiring artists平台的这一登录页使用了人物插图，不仅传递了想法，而且使页面具有吸引力。两个人物的关注点指向带有内容的区域

看起来可能没有明显的指示样式，但如果你仔细观察，你会发现页面的所有细节图层的运动规律尤其纸飞机等细节，都会引导你看向标题按钮的区域

行李递送服务网站上的人物插图也使用了指示样式：不仅是人，甚至飞机都会把你的眼睛对准功能按钮上

在公共服务的登录页上的人物插图也使用构图和人物姿态，使其成为一种指向提示，将用户的注意力集中在标语上

视线（凝视方向）

视线方向是建立在自然反应上的另一个强大的指向提示。当人们看到某人的眼睛专注于某个点或物体时，他们就会产生好奇心，随着视线一起看看那是什么。这就是为什么这个技巧经常与视觉内容（如照片、插图等）一起使用，并布局到 UI 设计中。

美发网站在主页上使用了一个人物形象作为方向提示：模特的眼睛吸引你注意内容元素的区域

交友 app 的登录页使用带有一个人物的插图，该人物的视线指向信息复制块

电商网站出售的独家发饰使用了一个巧妙的人物插图，也发挥了指向提示的作用，被眼睛所导向到标语

电商网站的人物部分不仅使用图片展示产品，还将其作为一个方向性的指示，关注到标语上

视觉提示

不仅箭头、指示样式可以向用户进行交互的提示，还有其他方式同样可以，例如表示交互类型的图标或插图。鼠标样式的图标就可能意味着你可以滚动下滑页，这样用户无需花费额外的精力来理解界面的操作方式。

设计工作室的网站使用计算机鼠标的图标作为视觉提示来尝试向下滚动

以下部分内容……

交互过程中可能出现的问题之一是遇到完整性的错觉。当布局看起来很完整，但不清楚滚动是否可以打开更多内容时，就会发生这种情况。因此，把剩余内容的一部分显示在屏幕上可见区域的最下方，可以作为不明显但很起作用的指向提示。这样，用户就可以避免感到他们已经看到了所有内容，并且漏看重要内容的问题也降低了。

时尚网站的底部区域有部分照片，给用户一个滚动查看更多内容的提示

送餐服务的主页在屏幕底部显示部分菜单，以显示折叠区域下方有更多内容。此外，布局使用箭头作为方向提示，显示水平滑动将打开另一个信息块

综上所述，很容易看出定向提示看起来有多不同。最主要的是他们为用户提供了另一种尊重，节省了用户宝贵的时间和精力，使交互自然轻松。

好了~本次带来的译文就到这里了！感谢各位小伙伴们的阅读与支持，希望能给大家带来帮助！

同时祝愿各位中秋愉快！阖家团圆！o(*￣▽￣*)ブ