浅谈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

相关推荐

  • 如何设计可交互的email,调动用户的参与感?

    Email营销通常与市场推广活动挂钩,是帮助你达到推广目标的最有效途径之一。但如何确保你的营销邮件的内容与品牌紧密相连?这一直是营销人员面临的一个挑战。用来克服这一挑战的战术多如牛毛,而可交互的email正迅速崛起为最具创新性、动态性和最流行的方式,他们让用户深深着迷、参与其中,相关设计师和开发人员都应该引以为豪哦!

    2017-05-17
  • 拆解【用户体验要素】

    作为产品经理不但要有能力作出产品设计和规划,更要尊重用户,作出用户体验更佳的产品【用户体验要素】告诉我们如何更好的设计出让用户体验更佳的产品方法论,那么这本书如何更好的应用到实战中,我们如何更好的将理论与实践结合呢?我们今天简单来阐述一下【用户体验要素】概论知识初识【用户体验要素】【表现层】我们所能看到的一系列的网页的元素:图片、文字、按钮等,有些图片就是图片,单纯的进行展示;有些图片或者文字有可能就是一个按钮链接,通过点击可以执行某种...

    2018-05-05
  • 决战双11,哪些技巧可以让你的专题页设计脱颖而出?

    这是小编见过讲双十一专题设计的最完整最有帮助的文章,我只是看了十遍而已。“以前有个同事她说要减肥要健身
    我说好啊看你能坚持多久
    因为我也好几次喊过这种话
    最后却都不了了之了
    可是几个月后再看到他
    细腰美臀大长腿
    显得更加自信了
    是啊她总可以做到付诸行动
    而我只会给自己找借口
    也许再这样下去
    我都配不上和她做朋友了吧”全场5折起/全场买三免一/1元秒杀0元抢购/周年钜惠等等

    争做行业领跑者/先赚它1个亿/上天猫就购了/好物低价上京东等等热烈庆祝XXX成立几周年/欢迎XXX领导莅临我司/恭喜XXX荣获XXX称号乘年轻,住好点/Just Do It/我的青春我做主/你值得拥有bigger than bigger/again and again/more and more(完全不知所云但是看起来很厉害的样子的文案,超级大牌都爱用。。)老板跑路了/美工甩手不干了等(歪瓜出品,我后面会再提到,因为它简直是电商设计界的一股泥石流。。)改变食界,条条是道-卫龙买了就是朋友-故宫淘宝“那么,我去当香葱烤鸡肉串去了”“啊!要是把早上下的蛋也带来就好了”“我可不能在这种地方被吃掉”“您好,您的食材到了”保湿护肤一步到位/棉柔舒适超强吸附力/轻松舒适不变形等等,常用于详情页里

    2017-05-16
  • UED专访 | 张永和、王昀:寻找未来城市共生的答案

    📌编辑、剪辑| P.S📌采访| YHz2017年10月16日,全球天文学界联合发布一项新的重大发现,在1.3亿光年外,双中子星合并产生的引力波带着他的伴侣首次造访地球,这次长途跋涉的旅行为人类探索宇宙打开了新的大门。从爱因斯坦预言引力波到如今的发现,百年间,人类在探索未知空间的同时,也不断改造着我们的生存家园。着眼当下,我们对未来城市有何新的畅想?下文中有张永和、王昀专访视频不要错过!!!未来城市探讨在UED之前的采访中,厦门大学建筑与...

    2018-02-08
  • 2015-2016交互体验趋势

    移动产品篇: 2015年移动应用数量增长依然强劲,但是移动交互体验却在发生着变化。较之去年层出不穷的新颖形式,今年交互体验趋势中,更多的是某一个方面的体验优化与深耕,而较少有创造性的引领者出现。这说明移动…

    2015-04-20
  • 网页设计中,如何突破栅格的限制又保持协调?

    想要打破栅格又保持网页的协调,是有技巧的,并非任何“破格”的设计都是好的。

    2017-05-09
  • 【总结】阿里UED内部资料 ▏优秀的交互设计师这样养成

    一直以来,交互设计师都是一个受到广泛质疑的岗位,很多人不了解交互设计师的价值,更直接的说,我们大多数的交互设计师没有表现出足够的、令人信服的专业度。 大约五年前选择了这个职业,一路走来,质疑过、探讨过…

    2015-12-04
  • 阿里自研UED计件平台技术解析

    从天猫到菜鸟,从双11到造物节,在阿里巴巴,除了来自集团的UED团队外,还有一支700余人的外包团队,一起创造着阿里视觉神话。阿里的UED外包同学们每年会收到来自阿里巴巴集团50多个业务方提出的十余万外包需求。如何协调外包设计师与需求方之间的配合,并且给到外包同学合理结算价格,成为阿里UED外包管理的一大难点。以往,阿里巴巴也会用一些简单的需求分发系统来应对。但由于实际业务场景的复杂性,需求在分配上无法做到合理与精准。加上缺乏评价和追踪...

    2018-02-01
  • 为什么用户会无视网站首页的轮播图?

    数据显示:在三百万个网站中只有大约1%的网站首页上的轮播图会被点击。一个在首页上如此之醒目的元素竟然只有这么低的点击率……到底怎么回事?个中原因相比会让你大吃一惊。

    2017-05-19
  • 超越触控的手势交互

    手势通常被认为是与屏幕和物体交互的自然方式,我们会谈论在移动设备屏幕上双指缩放地图,还有在电视前挥手切换到下一部电影。但这些手势真的那么自然吗?

    2016-07-18