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

相关推荐

  • 阿里UCAN2017用户体验设计论坛的总结与感悟

    五一假期前的两天有幸参加了阿里UCAN2017用户体验设计论坛,很荣幸的领略了业内大牛们对于体验设计的理念与趋势的见解。本次论坛的主题是“新设计x新商业”,由阿里提出的新零售、新金融、新创造、新能源和新技术为起点,借助用户体验的设计赋能,来连接用户、商业与技术,实现最大化的商业目的。在沉淀了两天之后,我将从中学习领悟到的一些看法总结了下来。“利用人类的现实感官作为交互体验的手段,模拟与现实世界相似的场景,让体验特征表现的更加直观,真实。正是借助于科技的创新,一体性、真实性的交互体验才得以实现,人类与虚拟信息的交流才会越来越自然。”在既要满足一群人,又要满足个体中的一个人,包容一个人到参与群体的场景多样性。就是现在设计思维中所需要逐渐形成机器学习的共生方式。— 阿里妈妈UED总监 萧健兴“全链路设计是新技术发展下的必然趋势。”

    2017-05-01
  • 新手入门做交互设计的那些事儿

    数十万互联网从业者的共同关注! 作者:panda,交互设计师个人微信号:D1173740249作者授权早读课发表,转载请联系作者。欢迎投稿到早读课,投稿邮箱:mm@zaodula.com文章底部可以评论留言啦,欢迎大家赞同质…

    2017-08-04
  • 「大产品小细节」5分钟了解格式塔原则

    这一篇「大产品小细节」想跟大家聊聊设计中很常用的一个心理学原则——格式塔原则。

    2017-08-04
  • 品牌基因法做图标——实战篇

    菜心的品牌基因法不知道大家有没有忘记,之前有写过两篇,今天来写第三篇——实战篇,根据真实的案例来再次讲述如何运用品牌基因法制作图标!如果你忘记了之前的品牌基因法(升级篇),可以先去回顾一下,网址如下:品牌基因法做图标(升级篇)

    2017-08-04
  • 《交互设计专题二》——华南理工大学设计学院本科教学汇报展 • 第二回

    《交互设计专题二》《交互设计专题二》课程针对智能化产品设计领域,鼓励设计背景的学生学习基本的软硬件技术,发掘产品需求,提出设计概念,开展设计研究,并亲自动手完成功能样机。经过5周的课程,7组共27名学生,完成了7个不同主题的设计和初步的功能样机实现。《交互设计专题二》只是信息与交互设计实验班的初步尝试,在国内也鲜有既有模式可供借鉴,课程内容、教学方式、设计展开过程、样机实现以及最后的课程设计汇报,都有不成熟的地方。因此,诚邀大家前来参观...

    2018-02-21
  • 如何利用人工智能提升用户体验?

    如果你现在在科技领域工作,那你对人工智能(AI)或用户体验(UX)肯定不陌生了。随着人工智能的不断进步,人工智能越来越不局限在开发者或数据科学家的领域。作为设计师/技术爱好者/企业家/创业者,开始或继续思考我们目前使用的设备是很重要的。为了改善生活,我们不应该局限于现状。我们应该从每件事物中寻找灵感,并把生活看做一个界面。Airbnb当你想到人工智能时,你第一个联想到的不只是出租房间或公寓。随着人工智能和数据驱动文化的发展,Airbnb...

    2018-02-24
  • 常用中后台交互设计控件使用场景与规范总结

    最近刚完成平台安畅云 2.0 的改版设计,平台模块很多,经常存在很多类似的页面和组件,若不制定统一的规范和控件,则会导致很多重复的工作,大大降低产品的设计效率;同时,平台的一致性也得不到保障。所以,我们视觉、交互、前端的小伙伴们针对我们踩过的坑,大家认真总结和提炼出一个符合公司定位的设计规范,统一公司项目的前端 UI 设计,规避不必要的设计差异和实现成本,实现设计和前端资源的效率最大化。

    2017-05-02
  • Axure RP软件安装教程

    Axure RP各种版本软件安装教程及下载地址:链接:https://pan.baidu.com/s/1AUHDQmeQejc9OMg7t2gmzQ密码:n29o

    2018-04-29
  • 如何利用数据可视化改善移动端的交互体验?来自华尔街日报、Bloomberg 等顶级新闻工作室的新媒体从业者们是这样思考的:

    手机地图  移动交互 数据可视化 移动大潮席卷了你我。 如何利用数据可视化改善移动端的交互体验?来自华尔街日报、Bloomberg 等顶级新闻工作室的新媒体从业者们是这样思考的。 本文的原 po 给几乎每个案例、工具都…

    2016-04-08
  • 工具类产品设计的8个准则

    之前阅读了原研哉大神《设计中的设计》一书,书中提到了一个很有意思的概念:再设计。再设计的理论,是想让我们通过忘掉设计对象已有的现状,追根溯源,对设计对象进行再次设计,从而加深大家对设计对象的理解。

    2017-05-24