Web端辅助信息设计

Web端设计中存在很多辅助信息内容，这部分的设计看似很简单，直接在相应的部分添加辅助信息即可，但深入思考后，其实是有很多值得探究的地方，包括辅助信息的位置，出现的时机及样式等。

下面我将辅助信息按照重要程度和查看频率来划分，将其分为两大类：第一类是重要或查看频率较高的信息内容，第二类是重要程度较低或查看频率较低的信息内容。

这类信息是希望用户注意到的，相对来说比较重要的内容，一般会直接显示出来。

谷歌开发者平台

AntDesign

这类信息非常重要，必须要让用户知道，一般带有警示/提示的符号，位于操作内容的上方，用颜色区分并凸现出来，让用户能够一眼就能注意到。这种控件相对于弹出框对用户的干扰性较弱，但是又能让用户注意到。这种控件还可以带有操作，例如查看详情，关闭提示等。

千牛应用平台

AntDesign

常见于表单题目的辅助说明信息，文字内容较少的情况位于题目下方，文字内容较多的时则位于题目右侧。用户在完成表单时，遇到有问题的时候就可以直接查看相关的辅助说明信息，提高表单完成的效率。

百度开发者平台

谷歌开发者平台

对页面中某个模块的辅助说明，一般说明内容较多，被置于页面右侧，但是我发现目前各个网站中对这类说明信息的位置及控件形式处理的不够细致。

谷歌开发者平台中的辅助信息也存在类似的问题，虽然辅助信息的位置位于题目右侧，但并没有说清楚是关于对哪个部分的辅助说明，如图中有两个文本框，那这个辅助信息是对哪个文本框的内容说明呢？如果页面中有更多的内容，像这类辅助信息应该如何表示其与页面中相关内容的联系呢？

我对谷歌开发者平台里的内容做了一个小的改进：

第一，给辅助信息添加了大标题，说明是关于哪部分内容的辅助说明；

第二，当对应的文本框处于hover及选中状态时，相应的辅助说明信息也高亮，若用户对该文本框的内容有问题时，就能清晰地知道应该是看哪部分辅助说明。

增加大标题

增加hover状态

修改前后对比

MaterialGuidelines

AntDesign

这一种控件是最为常见的，鼠标悬停时出现辅助说明内容，例如对某个概念的解释，对某个icon的说明，以及最常见的图表中对某一点的数据说明。这种控件一般用于辅助信息内容较少的情况，若信息内容较多则不适合这种控件。

阿里零售云

蓝湖

1.显示影响屏幕主要内容的操作列表，例如过滤器；

2.显示补充内容和功能。

在阿里零售云平台中采用侧边栏提供补充内容的填写，在蓝湖中采用侧边栏显示元素的具体信息。这类控件能包含较多的内容，但被隐藏起来，用户不容易发现，若是重要的信息则不应该使用该控件。

本文总结了Web端辅助信息的设计，按照重要程度和查看频率将其分为两大类：第一类是重要或查看频率较高的信息内容，第二类是重要程度较低或查看频率较低的信息内容。

在网页设计中涉及到辅助信息的设计时，需要考虑用户使用场景，使用频率，信息的重要程度选择合适的控件，其次考虑控件的位置和样式，要让用户能快速找到。

本文由@Joya原创发布于人人都是产品经理。未经许可，禁止转载

题图来自Unsplash，基于CC0协议