浅谈WEB页面三种程度的提示弹窗

在设计WEB页面时,经常会使用到弹窗提示,根据提示的深度层次,大致可分为三种,接下来介绍一下三种程度的弹窗样式与进阶样式。


在设计WEB页面时,经常会使用到弹窗提示,根据提示的深度层次,大致可分为三种,接下来介绍一下三种程度的弹窗样式与进阶样式。

浅谈WEB页面三种程度的提示弹窗

1、你一定要告诉我你知道了

你让我帮你拆家里的墙,我说拆了之后房子会变得不安全,你确定要拆吗?你说要拆,拆了之后你没给我结工钱,然后让我去拆另一堵墙,我说:你必须给我结了上一次的工钱,我才能接着给你干活。这是必须让你知道的原则

(1)最常见的是删除,内容被删除之后一般不可恢复,所以删除之前要告诉用户操作的后果并再次让用户确定行为。

浅谈WEB页面三种程度的提示弹窗
(2)用户未到达操作条件却点击了某些按钮,且提示语较长时(不过这种情况有时候不用弹窗而是直接跳转到去创造条件的页面,比如未登录时我点击评论,直接跳转到了登录页面)。这个时候可以用弹窗告诉用户应当怎么满足条件,比如:规定可推荐3条数据,推荐三条后,再次点击推荐时,要指导用户该如何去做。

浅谈WEB页面三种程度的提示弹窗
进阶样式:

关于删除的弹窗,有人说每次让用户再次确认好像是质问,并且在用户使用熟练后都已经知道了后果,为什么还要一次次提示呢,因此下面两种形式可供参考:

使用恢复操作代替再次确认的弹窗,可显示在顶端或者底部:

浅谈WEB页面三种程度的提示弹窗

在弹窗中增加“不再提示”勾选项,当用户感觉到弹窗提醒多余时,可自行选择(但我认为不是所有的弹窗都可以加“不再提示”,例如上方的删除适合,而提示信息则不适合。):

浅谈WEB页面三种程度的提示弹窗
每个人的眼光都有不同,做的实际项目也都不同,最好根据场景去选择样式。

2、有些事还是你知道了比较好

有些操作是可恢复的,或者有些必须让用户知道的提示内容较为简短,可以采用较轻量级弹窗,不需用户确认。

(1)可恢复的操作,减少用户确定的步骤(如果操作后页面变动较大,用户可以感受到操作后的变化,我感觉可以大胆的去掉这些弹窗)

例如:系统中将课程下架,或将用户拉黑,这些操作是可恢复性的,可以在页面的底部显示提示信息框,3-4秒后自动消失。关于这种提示框中的内容,我认为最好不要说“下架成功”,“拉黑成功”这些比较鸡肋的话,说一下操作的具体结果会比较好一点。

浅谈WEB页面三种程度的提示弹窗

(2)用户未到达操作条件却点击了某些按钮,且提示语较短时

例如:在填写表单时,必填项未填写完全时点击了保存,弹出提示框,位置为了醒目可在页面中间,3-4秒后自动消失。

浅谈WEB页面三种程度的提示弹窗
3、甲:那个谁,你交的作业我收到了。乙:这你也告诉我

很多软件系统中将大部分的操作都设置了反馈,将操作的结果(不是后果)告诉用户
例如:下面是几个操作的结果,一般放在页面的底端,2秒后消失。但是很多时候通过页面变化就可以看出结果,我认为这种提示能少就少吧。

浅谈WEB页面三种程度的提示弹窗
总结:以上代表本人看法,经过访问,那些让我们纠结的交互细节,很多用户都没有在意(我们竟然用产品,测试的眼光去猜测用户的体验),在不违反人类习惯,法律法规的前提下,我们可以根据具体项目和心情去规定吧,好任性,哈哈!!!

 

本文由 @耿瑞超(微信号:13373926389 原创发布于人人都是产品经理 ,未经许可,禁止转载。

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/30675/

(0)
CatherineCatherine
上一篇 2017-05-29
下一篇 2017-05-29

相关推荐

  • 硅谷设计师看苹果交互设计趋势:如何适应大屏?

    来源:用户体验联盟 本文作者:Jiaxin Yu 苹果终于顺应市场潮流,推出了大屏手机,而且销量前所未有的火爆!苹果大屏手机的推出,必然影响其交互设计的改变,其中有怎样的趋势?请看硅谷设计师的看法! 今年夏天,…

    交互设计 2014-10-11
  • 【上海实习】上海最TOP实习

    TG实习狗每日发布北上广深最新鲜的实习信息,陪伴你从大学到职场TG旗下媒体:TG实习狗、TG校招狗、TG内推狗▲ 点击图片马上了解 ▲招收15-20名高潜质学员进行为期1-2年系统定制化培养助力高潜质人才进入顶尖名企今日求职贴士发表于1秒前老狗查看:66666回复:233你真的适合咨询行业吗?在我看来任何选择咨询的人都会不可避免的询问自己以下几个问题1.Do I Love Solving Problems?2.Do I Think in...

    2018-04-09
  • 静态码限额后,微信支付还能兼顾合规和用户体验吗?

    【新朋友】点击标题下方蓝色字“经济晚报”关注【老朋友】点击右上角,转发或分享本页面内容4月1日,央行关于静态码扫码支付限额500元的新规开始正式实施了,从这天开始,大家通过静态二维码支付的时候每天限额是五百块。你感觉到了不方便吗?新规一出,很多小伙伴们都产生了疑问:以后我扫码支付消费是要被“管制”了吗?如果每天的限额用完却还有扫码支付的需求咋办?新规如何配合?微信支付上线新产品体验针对用户的这些疑问,微信支付和支付宝这两大移动支付巨头给...

    2018-04-07
  • 交互设计师如何进行风险预判?

    在公司工作,任何职业都不可能单兵作战,协作是永恒的主题,而每一个需求和任务的实现,都是各方通力合作的成果。作为交互设计师,除了做好自己的设计工作之外,还需要花费大量的时间与产品、运营、客户端开发、前端开发、后端开发一起协作和沟通。

    2017-06-04
  • 交互设计的未来

    数十万互联网从业者的共同关注!译者:小媛作者:Terry Cao ,发表于DESIGN & DEV译文地址:http://www.jianshu.com/p/daaa353e6d95译者授权早读课发表,转载请联系译者。欢迎投稿到早读课,投稿邮箱:mm@zaodu…

    2017-08-04
  • 从产品到交互·2015同济设计学考研经验

    【写在前面】 我叫徐晨,来自陕西西安,毕业于兰州理工大学工业设计专业。2015年我参加了研究生入学考试,也如愿考上了同济大学创意学院的研究生。想想当初独自备战,其实都是在黑暗中摸索,曾经也担心自己的复习方…

    2015-11-08
  • 单选、复选、开关应该如何使用?

    今天来探讨工作中遇到的一个问题:单选、复选、开关。先说一下前提,淘宝的确认订单页面,积分抵扣是用开关做选择的,而唯品用的是复选框,同样都是选择,复选框和开关到底哪个更合适?和同事讨论了半天也没得出一个明确的原则。因此想写篇文章总结一下单选、复选、开关应该如何使用。

    2017-05-16
  • Axure绘制专题页原型

    专题策划对于SEM至关重要,如果策划及文案都搞定了,接下来如何与设计进行沟通呢,这篇文章我们一起聊聊专题页原型绘制的话题。一、Axure界面介绍Axure的使用极其简单,只需要几个拖拽动作就可以基本搞定。接下来我们实际上手用学历教育的例子,带大家一起来看看。绘制这个原型可以分为两步,首先是手机的绘制,然后是文案内容的绘制。左侧面板(快捷键:Ctrl+Shift+[),主要是元件库,将需要用到的元件,直接拖拽就可以。右侧面板(快捷键:Ct...

    2018-03-04
  • 那些年失败的产品的交互设计

    相信各位设计师都有过“灵鸡”一动冒出好玩并且很有创意的idea的时候,但是首创的idea往往有80%都无法被用户接受。究其原因,要么该款产品无法为用户带来真正的实惠,要么违背了用户的圣意,要么产品做出来本身就是个…

    2015-01-08
  • 弹窗设计的5条基本原则

    当你将弹窗设计 及使用得恰到好处时,它们就会是非常有效的用户界面元素。它们能帮助用户快速且便捷地达成目标。然而当错误使用时,弹窗却会困扰你的用户。学会如何设计弹窗,会帮助你在使用时避免那些可能对用户造成的困扰。

    2017-05-22