网页设计基础教程来聊一下页面中常见的动态引导

当有新上线的功能或隐藏功能时，我们一般会用小红点、角标等静态内容予以用户提醒。然而相比静态内容，我们的留意力更容易被动态内容吸引，所以有时会用动态鼓励用户。本文作者对页面中常见的动态引导进行了探讨，一出来看一下吧。

在产品设计中网页设计基础教程，当有新上线的功能或隐藏功能时，我们一般会予以用户提醒。常见的有小红点、角标、黑色描边+文字提示等这类静态提示。而人类是视觉生物，相比于静态内容，我们的留意力更容易被动态内容吸引。今天来聊一下页面中常见的动态引导。

01一个小案例

当你看见这个页面时：

我想你会先被颜色凸出的元素吸引，然后是体积占比大的元素，最后按照阅读习惯从上到下，从左到右，依次查看其它内容（大概如右图）。

而当页面元素都赋予细节时：

如果我想让你关注到其中某个较小元素：

虽然只应该为它添加动态，便能使其脱颖而出，这就是产品设计中的动态引导。

02动态引导的作用1.新功能提示

当产品上线新功能时，设计师们就会按照用途重要程度，来决定使用何种方式让入口元素和其它元素区分开来。常见的有小红点、标签、气泡这类静态点缀元素（一般这类方式只发生一次，当用户点击后才会消失）。

其实，也有将上述点缀元素动态处理的。如果入口是界面，甚至可以为字体制作漫画，这在这些电商产品的品牌区一直可以发现。

动态处理的方式，比以前的静态更易于导致用户对元素的注意力（与动态模式有关），甚至释放某些情绪。由于是循环播放的动画，因此可以大幅吸引用户注意力。

ps：据说，每当页面多出一个会动的元素，后台就会多出这种一些留言，捅了开发窝了[Doge]。

2.诱导用户操

动态引导还经常被设计师用来指出重要内容（有也许被产品、运营拿刀架脖子），来达成某种数据指标，通过运用动态诱导用户操作。例如：在会员卡片中添加光效、在广告中让按钮进行缩放、为签到入口图标设置动画。

这种都能充分引起顾客注意，甚至提高功能点击率。

3.隐藏功能提示

我们清楚，在大屏上有更多空间可以展现信息。但在移动端网页设计基础教程，受屏幕大小限制，设计师一般会折叠或隐藏不常见的功用，来保持页面简洁。

针对这种不可见的用途，在初次使用时必须进行鼓励，才能被用户感知与使用。

4.操作教学指引

讲到引导，还必需要提的是手势鼓励，通过动态直观展现不同手势的作用，提示顾客如何与产品进行交互。

这在游戏教学中就一直使用，它可以帮助客户快速理解游戏玩法。

回到视频App中，你能否留意到，当你第一开启视频时，App会提示你双击屏幕可以点赞，上下滑动可以切换视频。

在产品交互设计中，如果使用到一些独特的交互模式，这类引导可以持续增加客户学习费用，帮助顾客快速上手。

5.信息高效传递

动态描述的直观性，使得我们可以降低对复杂信息进行长期文字叙述。通过动态设计，我们可以建立视觉故事，这有助于将复杂信息以更简洁、清晰的方法进行释放，从而帮助用户迅速完成任务。

也因而，在一些带有复杂操作的弹窗中，渐渐开始应用。

然而必须注意的是，上述这种大多都只在第一次使用时就会触发。当然有特例，例如：在AppStore每次下载应用进行验证时（面容解锁的状况下），系统会借助动态提醒客户电源按键置，并告知用户必须双击进行指纹识别。

在扫码时，弱光场景下出现的手电筒，通过动态引起用户注意，指引用户使用。

或者作为动态演示，帮助用户理解如何使用手指滑动截屏。

如何进行NFC感应等等……

03总结

动态引导像是设计师用来控制我们眼睛的法宝，有的人用它提高产品体验，有的人用它增强商业转化。但法宝虽好，我们只有审慎使用，才能防止用户迷失在这眼花缭乱的世界中。

感谢你们看见这里，我是幺零三，咱们下期见。

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

题图来自Unsplash，基于CC0协议。

该文观点仅代表作者本人，人人都是产品经理平台仅提供信息传输空间服务。