一个合格的错误提示应该有以下两个基本功能:

1 向用户报告错误状态;

2 解释错误发生原因以及如何更正。

错误提示的种类

1 弹出框

目前来说,弹出框可以说是最常见的错误提示形式。因为弹出框的空间比较大,可以很完整的向用户告知当前的错误状态并且阐明错误原因以及如何更正。但是弹出框这种形式也有自身的缺陷,那就是用户如果想更正错误就必须关闭这个弹出框,这样那些错误信息就看不到了。在一些特殊情况下错误信息比较冗长,你没有办法短时间内记住,那么就无法完成修改了。

2 页面

此外,错误提示还可以通过载入一个新的页面来报告给用户。比如在你点击提交按钮以后进入下一个页面才知道自己刚才的输入发生错误。用户可以通过阅读提示知道如何更正问题,但是如果想更正这个问题就要点击后退按钮,这样错误提示又不存在了,这点和弹出框很像。下面这个例子比较典型,用户只知道没有绑定成功,但是不知道具体的失败原因,重新绑定也无法避免再次失败。

3 标签提示

现在还有很多设计师开始将错误提示做成文字标签形式,将其和控件放在一起。这样子用户就可以很容易的读取错误信息,一眼就能看出来哪里出错了,不用根据提示的控件名称去寻找出错的位置,因为错误提示就在发生错误控件的旁边。此外还很容易改正,因为用户不用再跳转页面或去记那些冗长的错误信息。

错误提示设计原则

1 合理的使用配色和图标

就像我在上面说的,错误提示的第一个功能就是向用户报告当前的错误状态。但是我们没有必要真正的给用户显示:“尊敬的用户,你刚才的个人信息填写错误balabala...”。错误状态我们可以直接通过颜色和图标来完成。因为在潜意识中,人们习惯性把红色和错误联系在一起。当然考虑到现实生活中还有相当多的用户是红绿色盲患者,因此我们最好是红色和图标搭配使用。

2 文字简洁易懂

提示文字应该尽可能的简短,用户看到一大段文字,就很可能会失去了去阅读的耐心。此外我们应该避免使用专业术语,让用户可以更好的理解。例如你填写身份证号,多填了一个数字,那么我们就应该提示用户“身份证号位数出现错误”而不是简单的“身份证号验证错误”。因为验证错误的种类有很多种,这样笼统的错误提示会增加用户的操作负担。

避免用户犯错

对于这个信息录入这个操作来说,最好的用户体验就是避免用户犯错,而不是等到用户犯错了以后才思考怎么样“亡羊补牢”。设计师应该防患于未然。

1 输入提醒

我们可以用一句话或者一个例子来向用户介绍要输入什么样的信息,这个就是输入提醒。我们要保持提醒字体要比较小或者配色要比标签字体更浅,因为输入提醒只是起到一个辅助输入的作用,过于显眼反而会分散用户注意力。

2 良好的默认值

如果你确定对用户足够的了解,在用户进行信息录入的时候我们可以提供合理的默认值。因为对于用户来说,填写信息永远都不是一件有趣的事情,合理的默认值可以节省用户的操作时间。

3 自动完成

当用户在文本框里输入时,系统猜测可能的答案,显示可选列表。自动完成可以为用户节省时间、精力和记忆成本,避免犯错。

UI设计中的错误提示相关推荐

  1. ui设计中的版式设计_设计中的版式-第3部分

    ui设计中的版式设计 and how not to suck at it 以及如何不吸吮它 This is the 3rd and last part of the series. Here we t ...

  2. android弹窗设计,想印:UI设计中弹窗设计的五条基本原则

    原标题:想印:UI设计中弹窗设计的五条基本原则 :当你将弹窗设计及使用得恰到好处时,它们就会是非常有效的用户界面元素.它们能帮助用户快速且便捷地达成目标.然而当错误使用时,弹窗却会困扰你的用户.学会如 ...

  3. UI设计中置灰功能总结

    我最近在梳理产品报错场景的过程中,发现"置灰"状态的使用可以有效的提升报错场景中的用户体验.今天我就针对UI设计中置灰功能总结进行简单的说明. 一.置灰 「置灰」是相对于「常态」而 ...

  4. UI 设计中的视觉无障碍设计

    我给博客改了主题色,从 这样的 改成了 这样的:然而我问小伙伴看看效果他却并没有发现改变. 红绿色盲在亚洲人中占比,男性约 5%,女性则小得多.也就是说,就算仅考虑为国内用户开发应用,这也是很大的一部 ...

  5. UI设计中首页设计指南

    一款好的APP产品,其首页设计不仅能清晰展示产品核心功能.特点,有着较好的用户体验,还能展示公司的品牌形象,提升用户品牌认知度.今天我就针对UI设计中首页设计指南进行简单的说明. APP首页设计至关重 ...

  6. UI设计中的UX文案规范

    在UX和UI设计中,文案虽然不影响产品的交互流程与信息架构,但是作为传递信息的直接媒介,其对于整个用户体验的影响是不可忽视的.合理的文案设计,能够让用户在产品的使用过程中逐渐强化对品牌的认知,提升用户 ...

  7. UI设计中异常状态设计总结

    当用户停留任何一个界面,进行任何一个操作都可能发生异常状态.如果接到每个需求都去制定一次异常状态,这样的后果可能会使得产品的不同模块.不同流程,异常状态都不一致.全局规范性被破坏,同时设计师的效率也降 ...

  8. UI设计中搜索页设计指南

    在开始之前,我们先来想一个问题,用户为什么要使用搜索功能呢? 今天我带大家一起来探讨一下UI搜索页面的一些设计方法. 用户搜索的目的是为了快速找到自己想要的结果!搜索页是用户进行搜索的第一站,最理想的 ...

  9. UI设计中的排版设计技巧

    不知道大家有没有遇到过这样的情况,在排版的时候咔咔一顿操作,图形字母四处飞,试了一遍又一遍,但最后却发现效果并不咋地!反正我是经常遇到这种情况,其实原因就在于我并没有理清思路,如果我能把排版的思路想清 ...

最新文章

  1. 2020 腾讯广告算法大赛:突破高分瓶颈方案分享
  2. CS专业读PhD是否有意义?附CS奖学金项目清单
  3. Ubuntu中Vim 中文乱码解决方法
  4. 学会打败你的时间“窃贼”!!
  5. react native基本调试技巧
  6. 在数据中心中使用光缆颜色代码的重要性
  7. ALGORITHM IMPORTANT QUESTIONS
  8. 将本珊计算机组成原理,计算机组成原理,懂的老师帮忙解答下
  9. RabbitMQ消费消息幂等性问题
  10. U25%(1,16) and U25%(1,168)on《C4.5:programs for machine learning》
  11. 【Qt串口调试助手】1.4 - 16进制接收/发送
  12. pe卸载win10更新补丁_新图标+新功能!win10凌晨更新补丁
  13. 用PHP抓取淘宝商品的用户晒单评论+图片实例
  14. shader效果————镜子效果
  15. 阿里开源数据同步工具--DataX
  16. 看完《我的前半生》的些许感悟
  17. 5个步骤实现流程管理
  18. github windows系统监控_你需要的:Windows | 精品软件集
  19. 真人女神换脸二次元女神
  20. “香港科大百万奖金创业大赛”的十年深耕:让硬科技像蒲公英一样散播

热门文章

  1. matlab水果定位与分割,利用Matlab软件和BP神经网络快速识别水果实现分拣
  2. 虚拟机网络如何ping通
  3. php之 trim ltrim rtrim 小坑
  4. 优衣库畅销款商品可视化分析项目
  5. 如何隐藏任务栏图标小结
  6. BeanFactory Diagrams
  7. 计算机网络基础与应用配伍题,国家开放大学电大《计算机组网技术》机考第九套标准试题及答案.doc...
  8. 一个关于团队协作的反面的例子
  9. USB 最简单的 gadget驱动:g_zero(2)
  10. 【读点论文】A Survey on Vision Transformer,2022年华为诺亚最新综述研究,从发展到任务,整体到局部。ViT有研究价值在于有很多问题还没有解决,真理是阶段性的产物