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

相关推荐

  • 游戏交互设计心得分享:从代入感与反馈感入手提升打击体验

    前言经常听到一些设计人员、产品经理、甚至是一些交互体验”大师“的言论——【这个操作太麻烦了,需要操作好几步,体验太差了!】亦或者【这个功能藏的太深了,你有考虑过用户体验么?】之后不知怎么的,设计游戏或者软件的人员经常会把这几句话挂在嘴边。无论做什么,3句话里面保准带一句上述“金句“。所以近段时间,你会发现打开一个游戏或者软件,第一眼的界面,功能堆积,眼花缭乱,不知从何下手。我觉得,经常拿着两句话一刀切的人太幼稚,太低级了。所以我今天斗胆...

    2018-02-20
  • 交互设计之对象属性文档

    对象属性文档是描述一个产品的多个角色的文档,通过这些文档后台程序员可以更好、更方便的设计你制定的规则,例如:字段的限制、状态和权限、展示顺序...一.对象属性文档需要写明什么:1.字段的限制:字段是构成后台的最基础单位,他可以表示一个人的name、也可以是一大段文本。我们在设计字段时,绝大部分时候会涉及到限制,一般构成限制的是:字段长度、字段个数、字段构成(例如:金额--货币数量+美元)、字段来源(例如:外来接口、用户上传)、重要程度、...

    2018-03-27
  • 交互设计笔记整理

    PC与手机对比使用环境pc:固定位置,干扰少,注意力集中,输入方式强大。手机:任何地方,干扰多,注意力难集中,输入方式单一。交互媒介pc:操作精准快速,桌面大显示内容多,过大屏幕会有视觉盲点。手机:手指操作,精准度低、速度慢。使用特点pc:需处理复杂任务,多任务切换,讲究效率和强互动,没有电池流量问题。手机:适合处理简单任务,多任务切换困难,适合各种姿势使用,电池流量问题严重。web与APP界面对比web是书架,内容繁多,一目了然。更直...

    微信热点 2018-04-07
  • “看起来不错”,但是如何让用户购买?

    到底是什么触发人们的购买欲?什么东西促使用户快速购买?线下很多的销售人员和老板都在思考如何将自己的产品卖给客户,那么线上的产品经理应该如何思考,用好的交互体验来迎合用户,打动用户为你的商品付费呢?

    2017-05-19
  • 交互设计:谈谈那些极具争议的设计方法

    作者:中大yzh全文共 2556 字,阅读需要 6 分钟———— / BEGIN / ————交互设计是一门有关设计学、用户心理学、图形学和计算机理论的综合型新兴领域,由于其及其复杂的学科交叉性,以及在不同的情景下,对同一类组件的要求经常会有所不同,导致目前在该领域内有时会出现一些看似正确其实极富争议的设计方法。在这里,我们就讨论一下这些具有争议的设计方法。争议方法1:在线填表时应该标注“可选填”的填表项在线填表时,需要在表格上面注明“...

    2018-02-01
  • 用Axure水平菜单做导航菜单原型

    哈喽,"梯子"们好,这么多天都没有更新过Axure的教程了,理由如果是"沉迷吃鸡,无心做教程"未免也太勉强了,额......这个理由好像并不勉强啊,其实就是休息了一段时间。 好了,下面就来介绍一下这几天收集的比较多的"A技",额......Axure的技巧在浏览网页的时候,我们会经常性的点击或者鼠标悬停在"总有一款适合你"的顶部选项,这个就是顶部导航菜单。有的"梯子"就直接从元件库中拖拽一个"矩形"或者"文本标签"直接使用,如下图:其实...

    2018-03-16
  • 产品经理必修课:那些隐藏在界面里的交互设计

    投稿作者:温晴公众号“爱累加”首发我们在做交互设计的时候,一般都是通过线框图和文字说明进行展示,有时候遇到一些复杂的功能我们还需要配上流程图进行补充说明,详细的全方位的交互设计文档不仅可以让研发人员方便的投入工作而且还可以让测试人员清楚的了解产品功能,方便测试细节。但是有时候我们会遇到一些无法用线框图展示出来的需求,但是又会经常遇到,下面分享给大家一些界面上看不到的交互设计。案例一用户A在使用一款应用程序的时候,突然网络断开了,那么这时...

    2018-05-05
  • 交互基本功:如何设计一个好用的搜索框?

    搜索框一种常见的交互控件,用于精准提取海量的信息中的准确内容。本文作者分享了设计一个搜索框的几个要点,希望大家从中可以有所收获。

    2017-05-04
  • 快速开发移动医疗App!开源框架mHealthDroid

    快速开发移动医疗App!开源框架mHealthDroid 嘿嘿,本文偷偷转载自csdn 摘要:移动领域的发展促使了移动医疗的出现,让医疗这一大而重的传统行业逐步走向轻便。但对于移动医疗应用的开发,接触的不是很多,这边向大…

    2014-12-18
  • 如何应对「为什么用这个颜色/字体/按钮」的问题?

    作为一名设计师,被质疑简直是家常便饭。相信你们在日常工作中,一定被人问过:“对于这个点,你为什么这样做而不是那样?为什么选这个颜色而不是那个?”之类的问题。其实,这也是面试中的必问问题。乍看起来,确实有点难回答。但每一个问题,其实都有他的思考路线图。今天笔者就来谈谈,如何通过交互的四个维度来入手,巧妙地破解这个问题。你为什么要设计一个白色的登录按钮?为什么选这个字体?

    2017-05-15