欢迎访问智唯网络!专业H5响应式营销型网站建设、百度seo优化、网络推广服务!
营销之道 干货分享
了解企业新动态,分享前沿的营销推广干货,成长路上,我们携手同行
网站设计News

如何设计一个好的提醒

发布时间:2017:11:20 15:13:53 | 已阅: | 作者:智唯小编 | 来源:智唯网络 | 共 0 条评论

扫一扫
手机访问

本文共有2032个文字,预计阅读时间6分钟
导语
本文作者将结合设计规范及自身的项目经历,将提示方式的使用场景及界限给总结出来,希望对大家以后处理提示方式时有些参考和帮助。enjoy~

  本文作者将结合设计规范及自身的项目经历,将提示方式的使用场景及界限给总结出来,希望对大家以后处理提示方式时有些参考和帮助。enjoy~

  

如何设计一个好的提醒

 

  如何减少打扰用户的次数甚至不打扰用户,是每一个用户体验设计师应该考虑的事。相信很多设计师都曾纠结于何时用对话框和Toast来做提示。两者最大的区别是对话框是一种带有操作的提示,需要用户操作后才会消失,这会直接打断用户的流程;Toast属于轻量提示,不带操作,显示几秒后自动消失,不会打断用户操作。

  

如何设计一个好的提醒

 

  除了以上两种形式,还衍生出Toast+操作的提示,如:

  

 

  以及用Toast+图标或浮层的提示,如:

  

如何设计一个好的提醒

 

  以上设计都有亮点及合理的地方,但如何合适使用不打扰用户才是关键。怎么才算合理是一个问题,因为每个设计师的看法都有自己的主观评判标准,但这些标准在用户身上往往只有两个结果,良好的体验和差劲的体验。在这里我结合设计规范及自身的项目经历,将提示方式的使用场景及界限给总结出来,希望对大家以后处理提示方式时有些参考和帮助。

  iOS设计规范

  先从iOS设计规范开始,iOS推荐设计师使用横幅,对话框和小气泡的形式来提示用户,但不推荐设计师经常使用对话框的提示形式。只有这三种提示方式是明显不够的,但规范里允许设计师将提示功能与APP自身结合,建立更符合场景的提示机制。有很多设计师会将Android的Toast概念直接引入iOS设计中,以及衍生出Toast+操作,浮层等提醒方式。由于iOS对此没有明确的设计规范,只要是设计合理的,怎么提示都行。

  Material Design设计规范

  相对于iOS设计规范,Material Design以更谨慎的态度设计了提示用户的规范,并归纳出两个非常棒的概念:确认(Confirm)及确知(Acknowledge)。

  确认是要求用户确认自己确实希望执行刚才所调用的操作。在某些情况下,确认随需要用户考虑的操作所相关的警告或关键信息一起显示。

  确知就是显示一段文字信息,让用户知道自己刚才调用的操作已经完成。这将消除系统正在执行的隐式操作的不确定性。在某些情况下,确知随撤消操作的选项一起显示。

  在Material Design规范里,提示只有对话框(确认)及Toast(确知)和Snackbar(确知),同理对话框也是一种非常强的提示方式,会直接打断用户操作,所以设计时要谨慎对待。

  这里要阐述一下Toast,在规范里是规定只有文字,是不能配图标的,所以配图的就不应该叫Toast了,这种样式可以直接理解为一种浮层。同时,Toast也是不能带操作的,如果配操作的,在Material Design里被称为Snackbar,这是Android 5.0新出的控件。Snackbar 是一种针对操作的轻量级反馈机制,常以一个小的弹出框的形式,出现在手机屏幕下方或者桌面左下方。它们出现在屏幕所有层的最上方,包括浮动操作按钮,它同Toast一样3秒后消失。三种样式比较:

  

如何设计一个好的提醒

 

  Google也给出了何时需要确认或确知用户操作。以下为我的翻译:

  

如何设计一个好的提醒

 

  如果每次做设计时都走一遍上述的流程估计大家都会懵逼吧,我以提示的重要性将提示的界限及场景举例出来。为了更好区分专业术语及iOS和Android的差异,提出了一些新词语,如果有误请指正。

  重要程度(从高往低):

  1、对话框(需要突出提示或存在两个操作按钮以上的提示,影响现流程。)

  

如何设计一个好的提醒

 

  适用场景:

  需要重大决定的场景

  容易引起误操作的场景

  需要确认的场景

  引导到其他流程的场景

  运营方案

  样式说明:

  对话框在界面整体居中显示

  对话框文案应尽量简短,结尾不使用标点符号

  对话框可以针对运营活动或不同场景下进行样式设计

  必须提供关闭、取消等回到原流程的按钮

  (2)轻操作(适用于轻量提示时带有操作,如撤销、查看、增添、修改数据,不影响现流程。)

  

如何设计一个好的提醒

 

  *轻操作在Android里是Snackbar,在iOS里没有相关定义

  适用场景:

  用于撤销场景:①删除操作(简化删除流程里弹出对话框的流程);②用于做出重大决定后的撤销操作,如清空全部数据和取消绑卡;

  用于查看,添加,修改等打断现流程的操作,如①收藏后查看落地页;②收藏后修改存放的文件夹。

  样式说明:

  Android Snackbar显示时长为3秒;iOS为自定义

  Android Snackbar显示在页面底部;iOS为自定义,左右居中显示

  轻操作文案应为陈述句且尽量简短,结尾不使用标点符号

  (3)浮层(适用于如日夜间模式,隐私模式等带有功能性质的轻量提示,不影响现流程。)

  

如何设计一个好的提醒

 

  适用场景:

  功能(模式):日夜间模式;隐私模式;无图模式;xxx模式

  重要提示:支付成功/失败;支付loading(显示时长由自身决定)

  样式说明:

  浮层结构为icon+文案或占整个页面

  若干秒后自动消失

  浮层显示在界面整体居中显示

  浮层文案应尽量简短,结尾不使用标点符号

  (4)Toast(适用于如引起其他页面和系统数据发生变化、失败操作的轻量提示,不影响现流程。)

  

如何设计一个好的提醒

 

  适用场景:

  操作失败(网络异常)

  页面内数据添、删除加成功导致其他页面数据发生变化,如推荐新闻

  无法操作时的轻量提示

  其他页面数据发生变化,如下载完成、失败

  样式说明:

  Android Toast使用系统默认样式;,iOS Toast使用自定义样式

  Android Toast显示时长为3秒;iOS为自定义

  Android Toast显示在页面底部且左右居中,iOS Toast为自定义

  Toast文案应为陈述句且尽量简短,结尾不使用标点符号;

  (5)无提示(操作后页面有明显的变化且不会对用户其他方面造成影响,不影响现流程。)

  适用场景:页面内数据添加,删除成功

  哪个场景下给提示?

  哪个场景下不给提示?

  这也是一个很好的问题。

如何建站:
建网站需要准备哪些资料 如何购买域名空间 协助备案 成功案例 真实见证 建站类型有哪些 收费标准 建站流程 制作周期 改版美化 提升有户体验 [建站必看]源码内容交付 联系客服 专业建站

看了这篇文章的人还看了

专业建站 免费排名(有什么疑问的请留言或咨询在线客服)
  • 全部评论(0
    还没有评论,快来抢沙发吧!

上一篇:通过暗喻(Metaphors)改进你的设计

下一篇:提高「可读性」,文本、背景色怎么选?

  • 18900 文章总数
  • 2375467访问次数
  • 建站天数
  • 专业建站优化Jimmy Zhu
    男,从事互联网服务行业10年,专业建站优化,快速建站上排名。欢迎中小型企业朋友一起来交流!!
    相关专题
    • 网站建设咨询
    • 同行价格

      统一报价,无隐形消费

    • 金牌服务

      一对一专属顾问,7*24小时金牌服务

    • 售后无忧

      完善售后,客服经理全程跟进

    建站优化二维码
    建站优化二维码

    截屏,微信识别二维码

    微信号:13825575516

    (点击微信号复制,添加好友)

    优化二维码打开微信