• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >心得技巧 > 想提示用户有错误?不会这五个设计方法怎么行

想提示用户有错误?不会这五个设计方法怎么行

作者: 字体:[增加 减小] 来源:互联网 时间:2018-08-23

本文主要包含经验分享,错误反馈设计,错误状态等相关知识,希望在学习及工作中可以帮助到您

韩韩:每个系统软件在运行的过程中都会出错,可能是用户操作造成的也可能是系统错误。基于这两种情况,如何正确的提示错误信息就显得尤为重要,它直接决定了用户体验的好与坏。

一个好的错误提示必备的3条重要法则:

  • 清晰地文本提示语
  • 放置在正确的位置
  • 良好的视觉设计

清晰的文本信息

1.?错误提示信息应该简明易懂

提示信息应该明确的表明发生了什么错误、发生的原因以及解决方法。将你的错误提示信息看作是一次对话,跟用户说人话。确保你的文案是礼貌性的、易于理解的、友好的并且没有晦涩难懂的专业术语。

2.?错误提示信息应该是有用的

仅仅是描述系统出错是不够的,还要向用户提供最简单、快速的解决方案。

例如,微软的错误提示信息是这样表述错误原因和解决方案的,所以你可以快速的知道如何解决它。

3.?错误提示信息应该是针对特定的使用场景

很多网站经常在所有的状态确认情况下都使用同一个错误提示信息,当你没有填写E-mail一栏时——提示“请输入一个有效的电子邮箱地址”,当你少写了“@”符号时——提示“请输入一个有效的电子邮箱地址”。

MailChimp不是这样做的,他们针对每个不同的邮箱地址状态确认都有3种错误提示信息。第一个是在提交表单的时候检查输入框是否为空,另外两个是检查是否输入了“@”和“.”符号。(然而“请输入内容”并不是一个好的错误提示,它并没有清晰地表明你需要填写什么内容),向你的用户显示有针对性的而不是普适性的信息。

4.?错误提示信息应该是礼貌性的

即使是你的用户操作错误了,也不要责怪他们,礼貌的对待用户,让他们感觉使用你的产品很舒服、很便捷。这是一个很好的展示品牌特性的机会,试着在错误提示中加入一些品牌元素。

5.?恰当的展示你的幽默

在错误提示信息中展示幽默一定要十分小心谨慎,首先应当确保你的提示信息是有用的,之后如果合适的话,你可以在提示信息中加入一些小幽默,从而提升用户体验。

错误提示信息的正确位置

一个好的错误提示信息,应该是在你需要的时候可以很快速的找到它。不要写一个错误信息摘要,应该将它放置在相关的UI元件附近。

错误提示信息的设计形式

错误提示信息应该清晰易读。使用与背景色有对比的文本颜色,以便用户可以快速地注意到并且阅读它。
红色经常被用于编写错误提示信息,在某些时候,黄色和橙色经常被用于标注某些资源,红色常常让用户有压迫感。所以,确保你的提示文本清晰可见,与背景色有明显对比,考虑到色盲用户群,不要忘记在颜色旁边放置一个相关的图标,作为标注。

总结

错误提示信息是一个提升用户体验的绝佳时机,你可以通过它提升品牌形象、展示企业个性。不要小看错误提示信息的每一个方面,将提示文本、放置位置和视觉设计都做到尽善尽美,那么它才可以称得上完美。

「提升可用性的好文合集」

  1. 《刀刀必中!UI设计师非学不可的十大易用性原则》
  2. 《有图有案例!125个提升网页可用性的优化小技巧(一)》
  3. 《有图有对比!125个提升网页可用性的优化小技巧(二)》
  4. 《有图有案例!125个提升网页可用性的优化小技巧(三)》

原文地址:uxplanet

================明星栏目推荐================

优优教程网: UiiiUiii.com 是优设旗下优质中文教程网站,分享了大量PS、AE、AI、C4D等中文教程,为零基础设计爱好者也准备了贴心的知识树专栏。开启免费自学新篇章,按照我们的专栏一步步学习,一定可以迅速上手并制作出酷炫的视觉效果。

设计导航:国内人气最高的设计网址导航,设计师必备:http://hao..com

优设大课堂

您可能想查找下面的文章:

  • 该有的视觉元素全都有,设计不好到底差在哪里?
  • 为什么几个人的小团队更加高效更加靠谱?
  • 对于「以人为中心」的设计,你的理解可能太浅显了
  • 为什么大家都想学服务设计?来看CEO 的亲身经历!
  • 想为iPhone X设计UI?给你这11个设计小贴士
  • 疯传谷歌走All-White风?假的!其实只是合作伙伴的重设计
  • 在做产品设计的时候,预期和现实到底有多大的差别?
  • 设计出了错?很有可能是你没有问对问题
  • 为什么不要再问用户「你们到底想要什么」?
  • 想紧跟流行风尚?这5种平面设计趋势了解一下

相关文章

  • 2018-08-23超干货!如何利用记忆心理学提高用户体验?
  • 2018-08-23哈哈哈!设计师专用表情包合集(一)
  • 2018-01-05关于highCharts加载出图表却不显示数据的问题
  • 2017-08-06css自动截取指定长度字符串,结尾显示... 支持FF浏览器
  • 2017-08-06B2C 网站用户体验细节设计参考
  • 2018-08-23设计师越来越多,但为什么APP设计得越来越像?
  • 2017-08-06分享20个优秀的网页表单设计案例
  • 2018-08-23为什么设计师需要理解产品业务?聊聊结构化思维的应用
  • 2018-08-23基础知识学起来!如何科学提高UI界面的文本易读性?
  • 2017-08-06分享16款燃烧的火焰效果英文字体大宝库

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • PS教程!教你打造2017年最受欢迎的渐变幻彩风格
    • Unicode签名bom详细说明
    • 从微信「朋友圈三天可见」,分析背后隐含的设计原因
    • 设计作品集网站的时候,如何善用超大字体元素
    • 用一篇文章,带你回顾桌面GUI 的设计发展史
    • Google对话式交互规范指南(八):通过确认和应答给予用户信心
    • 设计水平没有大的进步,原来是这9个方面做得不好…
    • git版本控制工具基础知识
    • 人工智能如何影响设计师的工作?这篇总结超全面!
    • 超全面!关于用户故事地图的7种用法

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有