不同场景下【用户提示】的设计原则

用户头像
北京/UI设计师/5年前/3388浏览
不同场景下【用户提示】的设计原则

不同场景下用户提示的设计原则

什么是提示?提示,指给予题型和解释。提示指启示;提起注意。映射到现实生活中,教学楼“请保持安静”、厕所的标示提示、饭店里禁止吸烟的牌子都是提示,是用来提醒人们注意自己的语言、行为


根据不同到使用场合这里梳理了5中提示操作的使用控件:分别是弹框提示、常驻提示、通知、全局提示、徽标提示,这五种提示方式承载的信息量、优先级和用户操作场景各有不同


下面分别介绍这5种提示控件的使用场景:


一、弹框提示Modal


使用场景:

需要用户处理事务,又不希望跳转页面以致打断工作流程时,可以使用在当前页面正中打开一个浮层,承载相应的操作。

另外当需要一个简洁的确认框询问用户时,能够让用户清晰的知道自己的操作,并且进行二次确认



设计原则:

聚焦:使用户集中注意力确保任务得到解决,对话框一旦出现,应当呈现在页面上方的视觉层。

清晰:对话框应直接展示信息,并带有相关或上下文信息响应用户任务或操作。


控件类型:

1、功能对话框:

  • 除标题、纯文本内容和按钮外,还需要承载更多复杂信息时

  • 可配置单选框、复选框、列表、穿梭框、图片、头像、插画、视频等

2、通知对话框:

  • 用于警示、紧急、或简单的二次弹窗确认。

  • 按钮文案需承接上下文表述,并准确引导用户行为,如“确定”、“取消”、“删除”。

  • 简单的消息提醒时或不可返回的操作,只提供一个按钮用于关闭,如“知道了”“刷新”。

3、选项对话框

  • 内容不足以构成单独页面或不希望跳转新页面的对话框,多使用于搜索、设置、内容选择;

  • 需要完成的一系列任务操作,被选择后立即生效,无需进行确定反馈; 



二、常驻提示 Notice


使用场景:

常驻提示是一种非阻碍式的信息展示,它不打断用户的当前操作,一般停留至页面某个位置(优先顶部),非浮层的静态展现形式,始终展现,不会自动消失,用户可以点击关闭。


设计原则:

直接:当前页面需要向用户显示需要关注的信息时,常驻提示显示,要求用户立即注意;

重点:常驻提示引起用户注意,以确保其内容得到解决。


控件类型:

常驻提示属性包括常规提示、成功提示、警示提示、错误提示四种。

普通提示:建议用于展示背景条件、政策信息、规范要求、当前状态等客观内容。

成功提示:建议用于展示已完成操作的成功状态。

警告提示:建议用于展示可能会导致某种后果的警示性文本。

错误提示:建议用于展示一个信息组的报错文本,如表单中同时满足几个条件时触发整体报错,可用此样式。



三、通知Notification


使用场景:

在系统四个角显示通知提醒信息。经常用于以下情况:

  • 较为复杂的通知内容。

  • 带有交互的通知,给出用户下一步的行动点。

  • 系统主动推送。


设计原则:

提示文本内容以及交互方式尽量准确、清晰、简明,保证用户在其消息自动消失前了解提示信息或做出交互。


控件类型:

1、基础样式:分为基础文字通知、基础文字通知(带操作)

2、根据业务需要在区域内填充内容或操作类组件的通知。



四、全局提示toast/ Message


使用场景:

通常出现时显示几秒后自动消失,或者数据正在加载时显示,提醒用户已经完成的动作,或者已经达成的目的,是用户完成动作后或者异常情况下的提示(pc端叫 Message,移动端叫toast实质上都是全局提示是一个控件)


设计原则:

在不跳转页面打断用户工作流程的前提下,提供成功、警告和错误等反馈信息。不打断用户操作


控件类型:

1、刷新页面时,提示更新的条数:

2、收藏或者其他操作,提示用户操作成功:



五、徽标提示 Badge


使用场景:

红点、数字或文字,一般出现在通知图标或头像的右上角,用于显示需要处理的消息条数,通过醒目视觉形式吸引用户处理。


设计原则:

跨平台:可适用于 Windows/macOS/iOS/Android 平台的所有套件产品,为产品提供一致的设计体验,使用户在不同端使用产品时,都可以拥有流畅高效的使用体验。

直观:通过清晰醒目的视觉形式告知用户状态,吸引用户关注和处理。


控件类型

1、点状徽标

当功能模块更新、信息状态为未读、人员在线协同、信息量变化且无需告知具体数量或性质时,使用点状徽标突出状态

2、字符徽标

内容的信息量发生变化,且需要明确告知新增数量时

3、图标徽标

在某些功能场景中,作为特殊状态提示使用

4、角标徽标

通常出现在列表、卡片上,强调和突出其特殊状态,其主要作用是标记,或吸引用户的注意力,提示用户关注该事物或事件



总结

简单的总结,并不是非常全面,还有很多需要继续挖掘的技巧,还有很多需要学习的东西;有一点能够肯定的是,要从实际的用户场景中去考虑问题,用户体验就必须站在用户的角度,不能为了设计上的美感,而让增加用户学习成本,好的体验应该就是用户一眼就能看懂,操作简便。


38
举报
|
89
分享
相关推荐
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
智能家居中心 简约 UI设计组件库
UI 登录界面设计模板包
【新年UI图标】活动icon
Security Camera UI kit
新拟态风格 UI设计组件库
科技医疗透明柜UI界面设计
【新年UI图标】30个图标
【新年UI图标】体育icon
原创UIUX交互橙红渐变炫酷视觉平面设计作品集模板PSD
钱包ui模板
UI界面 组件
3D渐变流体抽象矢量UI背景图
高级感金属拟物 UI设计组件库
新能源APP应用UIKit
盲盒APP UI设计
UI通用设计素材1
抽象液态渐变UI背景模版
拟物风质感写实UI卡片合集源文件
高级表盘系列UI源文件
【新年UI图标】相机icon
【新年UI图标】旅行icon
户外旅行飞机情侣假日出行
【新年UI图标】银行卡icon
你可能喜欢
相关收藏夹
大家都在看
登录注册