导航菜单

“信息引导”超全总结,让你的设计有理有据

指导信息的方法有很多种,本文主要从“是否会打扰用户”的维度分析这两种类型的设计和原理。

ac39e8a3db6d2dc328456ad1e741ebc6.jpeg

前一篇文章讨论了策略引导的策略层:可以削减的场景和机制《系统性地教你:如何设计产品的信息引导?》。这就结束了表示层的内容:指导形式是什么?什么情况适合?如何优化这些bootstraps?

第1部分:不会干扰用户的操作指南

它不影响用户当前的操作,主要包括:提示通知栏,小吃栏提示框,浮动图层/泡泡,信息推送,徽标,吐司提示等。

1.提示通知栏

,为了及时向用户反馈信息,用户只能在操作后消失。

5910fe449a9f7a5abe8c31f86659fdf6.jpeg

适用场景:需要长时间显示用户指导操作的信息,内容公告和提示。

引导扩展:提示的动态旋转中的信息更具方向性。例如,支付宝在向“异常用户”转账时会有转盘提示。

2. Snackbar提示框

一个提示框,显示用户操作结果并可以取消/撤消操作。一般显示在页面底部,属于Android系统控件,1-2秒后自动消失。

5c7fd69c7d51e59ba68ff6f1b6452004.jpeg

适用场景:允许用户修改上一操作的结果,以防止用户犯错误和误操作。

引导扩展:可以直接使用图标来表示(而不是iOS没有缺少控件),如操作提示新版本的勾选列表。

4ee7dc355fd2aa2eda508219e680b776.jpeg

3.浮动层/泡沫

挂在页面上,引导用户使用功能模块的浮动层,许多产品将使用此表单向用户显示新功能,新内容。

1cc1007b3169f9a782eb09138b6ff2ed.jpeg

它与toast不同:toast在用户的操作行为之后更加弹出,并且浮动层可以出现在任何进程节点上,这更加灵活。

适用场景:您希望让用户知道并引导他们使用功能/内容的提示。

引导扩展:当浮动层消失时,内容可以移动并缩小到入口以教育用户。

4.信息推送

与以前的产品不同,属于产品的这种“外部指导”非常有指导性,但需要一点推动成本才能支持。它主要用于“唤醒”并保留操作内容的旧用户。

6d353dec25622f0ead1f7d528c3259a5.jpeg

适用场景:培养用户习惯,定期推送内容,提醒用户操作。

注意:您需要在用户的手机上获得“通知”权限。在需要引导的场景中,提示用户允许该权限。

5.徽标/徽章

徽章(徽章)是指页面元素上显示的点,数字和文本等信息。我们经常说的“小红点”是徽标的一种形式。徽标可分为两类:数字和非数字(如小红点,文字,图形等)。

56ddf2ed1e664b4eba45f6dc63a9e5d3.jpeg

适用场景:

数字标识:需要强调信息的“数量”,让用户确切知道新内容的多少,吸引用户的注意力。

非数字徽标:只需让用户知道有新内容/消失且不会对用户造成干扰。

注意:数字徽标需要注意显示的长度和最大位数。通常,最大值为9999,视觉长度由'99 +'表示。并且避免过多的数字信息给用户造成浏览压力,一般都有“一键清除”功能。

6.吐司小贴士

一个小的弹出提示,帮助用户确定当前状态,通常会在1-2秒后自动消失。 Toast是一个Android控件,但现在大多数都是两个系统共有的。而现在toast的定义不再是'系统黑盒提示',而是所有用户在操作后的反馈状态,如图所示:

4bb4a9e6ac88b631e9279066cf4b9d9b.jpeg

适用场景:用户需要了解当前情况和运行结果的状态。

引导式扩展:结合用户场景以提供对操作的轻松访问。 QQ浏览器保存图像后,Toast提示符会显示已保存图像的视图。

2aa3060c7a3ebfa2f2ff5cc9c392f4af.jpeg

第2部分:干扰用户操作的指南

它会干扰用户当前的操作,主要是:对话框和下拉菜单/列表。虽然这些指导方法会干扰用户操作,但优点是它们受到高度指导,用户可以直观地注意到您的信息。

1.对话框/对话框

强制用户仅执行N个结果以离开子弹层提示。这种类型的指导非常强大,但用户体验相对较差,主要是信息提醒和功能确认。

2fb1bf05a83e3ff7885c1adb5e34c5f1.jpeg

另外,对话框可以扩展到其他指导目的,例如多个内容选择,文本输入,模块之间切换等,根据产品需要选择不同的指导方法。

79cb36125bbab15d7f746624f1600467.jpeg

适用场景:提醒,确认,多选,输入,切换用户当前操作。

注意:禁止在弹出窗口中添加弹出窗口的引导方法。用户体验和技术压力都是一个非常不成熟的选择。

2.下拉菜单/列表

目中,用于改善内容的快速操作和可扩展性。

84532d20bc9ab1d59e3d4db27e7b4b4e.jpeg

适用场景:

下拉菜单:用户的高频操作功能,下拉菜单可用作快捷入口。

下拉列表:用户偶尔使用该功能,使用下拉列表作为内容集合。

第3部分:如何使指南更具吸引力?

即使选择了正确的引导方法,它也都以“静态”方式显示。我们如何引导信息使用户更加引人注目和引人注目?

1.通过'系统性能'加强指导

例如,移动电话具有许多系统功能:陀螺仪,距离传感器,声音通知,振动等,其可用于增强信息的引导。

例如:

陀螺

如“好生活”和阅读APP(名字忘了),使用陀螺仪的“重力感恩”来优化视觉引导:当手机左/右翻转时,视觉元素按照左/右旋转和滚动。

4ff9eec2651a183618e401598352544b.gif

注意:只有本机应用页面可用于实现移动电话系统的功能。这些功能无法在H5链接和小程序中实现。

声音通知

使用语音增强用户操作反馈,以帮助确认用户的当前状态。与刻度列表一样,用户的“完整”提示是使用声音+快餐栏(图形)进行的,以确保用户不会滥用。

手机摇晃

'Shake'是辅助声音指导的最佳搭档。如果用户开始静音并且无法发出声音提示,则振动是一种有效的通知方法:它受到高度引导并且不会对用户造成操作干扰。

2.使用“内容掩码”增强指导

这是一种视觉错觉,它通过在两个内容/元素之间叠加和交错来产生幻觉。可以极大地吸引人们的注意力,如韩国时尚软件的横幅切换,QQ浏览器的信息流图层,就是以这种方式吸引用户。

ccf9d074e251c33ea4b931935f15da27.gif

3.使用“动作效果”加强指导

流动性是我们常用的表达技巧之一。优点是它可以吸引用户点击并呈现活动/功能氛围。

动态效果有两种指导:一种是动画/视频内容,如“一淘”主页的图标内容,以及支付宝的“集五福”门户网站,用于吸引用户点击了解内容。

e0fa1af13fa92258bd8eff0ea28ccf2b.gif

另一种是使诸如图标和浮动图层的页面元素移动,例如假书的图标和马细胞的化身效果。

效果是结果,如何实现效果是另一个问题。目前,有注释表格,gif地图,png序列图,mp4视频,Json文件,交互式演示和其他交付表格进行开发。有关详细信息,请参阅我以前的每日笔记。

结束和总结

以上是信息引导的“性能层”的摘要。根据不同的场景选择不同的需求,但有一个前提:如果公司有自己的设计规格,请根据规格中的风格直接输出。在整个产品中避免新的视觉和交互式体验,开发库中将不再有新的控制代码。

8906b1abdff245beaf57dab898e09cec.jpeg

上一篇文章推荐

系统地教您:如何设计产品信息指南

以BAT产品为例,不再一块一块地粉碎“用户心理”

干货:7例为您深入分析用户心理

OF:Yan和出于此,微信ID:elffzh,公共号码:出于这个严格和

本文由