你所在的位置: 首页 > 正文

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

2019-08-19 点击:1773
?

每个人都是产品经理。我想在2天前分享它

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

image.php?url=0Mmif07s66

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

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

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

固定嵌入显示在界面顶部或导航下方的提示栏,以便及时向用户提供反馈,用户只能在操作后消失。

image.php?url=0Mmif0qrOw

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

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

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

image.php?url=0Mmif0wFpZ

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

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

image.php?url=0Mmif0avsm

挂在页面上,引导用户使用浮动层的功能模块,很多产品都会使用这种形式向用户展示新功能,新内容。

image.php?url=0Mmif0kIa1

它与toast不同:toast在用户操作行为后弹出更多,浮动层可以出现在任何进程节点上,具有更高的灵活性。

场景:特别是,用户应该了解并指导功能/内容提示的使用。

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

与以前的不同,这种“外部指导”属于产品,具有很强的指导性,但需要一点推动成本来支持它。其中大多数用于老用户的“唤醒”和保留促销。

image.php?url=0Mmif0gPAA

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

注意:您需要获得用户手机的“通知”权限。在需要引导的情况下,系统会提示用户允许访问此权限。

徽章是指页面元素上出现的点,数字和单词等信息。正如我们常说的那样,小红点是徽标的一种形式。徽标可以分为两种类型:数字和非数字(如小红点,文本,图形等)。

image.php?url=0Mmif03RBm

适用场景:

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

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

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

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

image.php?url=0Mmif0rYyC

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

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

image.php?url=0Mmif0WfIJ

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

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

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

image.php?url=0Mmif0GBAy

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

image.php?url=0Mmif083a7

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

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

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

image.php?url=0Mmif0Dkif

适用场景:

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

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

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

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

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

例如:

陀螺

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

image.php?url=0Mmif0PTvx

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

声音通知

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

手机摇晃

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

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

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

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

image.php?url=0Mmif0KYpS

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

image.php?url=0Mmif0rWYU

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

结束和总结

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

image.php?url=0Mmif0SgF9

收集报告投诉

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

image.php?url=0Mmif07s66

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

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

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

固定嵌入显示在界面顶部或导航下方的提示栏,以便及时向用户提供反馈,用户只能在操作后消失。

image.php?url=0Mmif0qrOw

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

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

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

image.php?url=0Mmif0wFpZ

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

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

image.php?url=0Mmif0avsm

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

image.php?url=0Mmif0kIa1

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

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

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

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

image.php?url=0Mmif0gPAA

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

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

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

image.php?url=0Mmif03RBm

适用场景:

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

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

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

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

image.php?url=0Mmif0rYyC

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

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

image.php?url=0Mmif0WfIJ

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

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

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

image.php?url=0Mmif0GBAy

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

image.php?url=0Mmif083a7

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

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

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

image.php?url=0Mmif0Dkif

适用场景:

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

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

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

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

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

例如:

陀螺

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

image.php?url=0Mmif0PTvx

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

声音通知

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

手机摇晃

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

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

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

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

image.php?url=0Mmif0KYpS

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

image.php?url=0Mmif0rWYU

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

结束和总结

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

image.php?url=0Mmif0SgF9

日期归档
电子游艺平台全网址 版权所有© www.addurpage.com 技术支持:电子游艺平台全网址 | 网站地图