前端的UI设计与交互之反馈示篇
为了帮助用户了解应用当前要做什么,也给用户的下一步行为做参考,以及了解操作后所产生的结果 ,当用户和系统需要交互时,使用不同的模式来反馈信息或结果。当设计者使用反馈或者自定义一些反馈时,请注意:
为用户在各个阶段提供必要、积极、即时的反馈;
避免过度反馈,以免给用户带来不必要的打扰,能够及时看到效果的、简单的操作,可以省略反馈提示。
一、提示信息
1、警告
警告提示(Alert)
是一种非阻碍式的信息展示,它不打断用户的当前操作,一般停留至页面某个位置(优先顶部),非浮层的静态展现形式,始终展现,不会自动消失,用户可以点击关闭。
注:关闭按钮可根据业务需要增加或隐藏。
2、通知
a)通知提醒(Notification)
系统主动推送的重要的全局性通知信息,在系统右上角显示。
b)徽标数(Badge)
用于聚合型的消息提示,一般出现在通知图标或头像的右上角,通过醒目的视觉形式吸引用户眼球。
注:相对重要和用户关联度更高的信息提示,使用数字精准提示;权重不高和不是用户特别关心的消息提示,使用红点做提示。
c)帮助
气泡卡片(Popover)
注:和 Tooltip 的区别是,Popover 可以承载更复杂的内容,比如链接或按钮等。
文字提示(Tooltip)
用于精确地描述被指向的对象,例如图标、图形、链接等,鼠标移入则显示提示,移出消失,不承载复杂文本和操作。
二、过程反馈
操作过程中尽可能将状态的反馈给用户,即时的响应会给用户增加信赖感。
1、加载状态进度反馈
在操作需要一段时间(一般为超过2秒)完成时系统应即时给予提醒,明确告知加载的状态或加载进度条,保持与用户的沟通。
注:若加载时间较长,应提供取消操作。
2、录入反馈
操作过程中可通过不同的校验规则和形式,让用户及时发现并纠正错误。
注:反馈文字紧跟着要说明的区块(反馈内容一般是错误说明),不自动消失(当用户进行相应的交互操作后才消失)。
3、气泡确认框(Popconfirm)
目标元素的操作需要用户进一步的确认时,在目标元素附近弹出浮层提示,询问用户。
和全屏居中模态对话框相比,交互形式更轻量。
三、结果反馈
操作过程中尽可能将状态的反馈给用户,即时的响应会给用户增加信赖感。
1、顶部全局提示反馈(Message)
通过一个操作引发的反馈浮层位于顶部居中显示并自动消失,是一种不打断用户操作的轻量级提示方式。
2、对话框反馈
通过一个操作引发的反馈浮层位于页面中心,反馈内容可通过确认或取消按钮进行关闭,用户在反馈层出现时不可进行任何的操作,用于重要的反馈。
注:除失败时避免显示不必要的提醒弹窗。弹窗是很强的反馈机制,只有在传递非常重要,且可操作的信息时才需要使用它。
前端的UI设计与交互之反馈示篇的更多相关文章
- 前端的UI设计与交互之数据展示篇
合适的数据展示方式可以帮助用户快速地定位和浏览数据,以及更高效得协同工作.在设计时有以下几点需要注意:依据信息的重要等级.操作频率和关联程度来编排展示的顺序.注意极端情况下的引导.如数据信息过长,内容 ...
- 前端的UI设计与交互之文案篇
在界面中,我们需要通过对话的方式与用户产生共鸣.精准.清晰的语言会更容易让用户理解,合适的语气更容易让用户建立信任感.因此在界面设计时,文案也应当被重视. 在使用和书写文案时有以下几点需要注意:从用户 ...
- 前端的UI设计与交互之设计原则篇
1.亲密性 a)纵向间距示例这三种规格分别为:8px(小号间距).16px(中号间距).24px(大号间距). b)在这三种规格不适用的情况下,可以通过加减『基础间距』的倍数,或者增加元素来拉开信息层 ...
- 前端的UI设计与交互之布局篇
布局是页面构成的前提,是后续展开交互和视觉设计的基础.设计者在选择布局之前,需要注意以下几点原则:明确用户在此场景中完成的主要任务和需获取的决策信息.明确决策信息和操作的优先级及内容特点,选择合理布局 ...
- 前端的UI设计与交互之色彩篇
一.颜色Red热情.警示 Green成功.通过.安全 Blue专业.科技 Pink典雅.明快.女性 Orange醒目.温暖 Purple高雅.浪漫 Yellow活力.提示 Cyan清新.冷静.结构化 ...
- 前端的UI设计与交互之数据录入篇
数据录入是获取对象信息的重要交互方式,用户会频繁的增加.修改或删除信息.多种多样的文本录入和选择录入方式帮助用户更加清晰和高效的完成这项体验.设计者应当注意这几点:为初级用户/偶尔访问的用户提供简单易 ...
- 前端的UI设计与交互之字体篇
跨平台的字体设定,力求在各个操作系统下都有最佳展示效果.字体是界面设计中最重要的基本构成之一,用户通过文本来消化内容和完成工作,优雅的字体将大大提升用户的阅读体验及工作效率.在满足不同终端始终保持良好 ...
- 前端的UI设计与交互之图标篇
图标是具有指代意义的图形,也是一种标识.通过使用图标表达命令,强调状态,表示产品或类别.为了系统及跨平台之间图形认知保持一致, 图标在设计和使用时有以下两个原则点需要注意:简单的图形语言以及高辨识度. ...
- 前端的UI设计与交互之导航篇
在广义上,任何告知用户他在哪里,他能去什么地方以及如何到达那里的方式,都可以称之为导航.当设计者使用导航或者自定义一些导航结构时,请注意:尽可能提供标识.上下文线索,避免用户迷路:保持导航样式和行为一 ...
随机推荐
- redis客户端连接服务端the version of redis server is too low to support this function错误
redis作为一个内存数据库,使用得当可以大大的提升系统运行的效率,据说能读的速度是110000次/s,写的速度是81000次/s,我们的其中一个系统就用到了这个. 由于之前负责这个的同事离职,只好临 ...
- mongodb3.0分片及java代码连接操作测试(开启用户验证)
最近抽时间搭建了一下mongodb简单的分片,整个过程还算是蛮顺利,只不过在用户验证这一块遇到了一些问题,好在最后终于搞定. 一.服务器搭建过程: 1.安装四个mongodb:一个作为config.一 ...
- R语言︱词典型情感分析文本操作技巧汇总(打标签、词典与数据匹配等)
每每以为攀得众山小,可.每每又切实来到起点,大牛们,缓缓脚步来俺笔记葩分享一下吧,please~ --------------------------- 笔者寄语:情感分析中对文本处理的数据的小技巧要 ...
- javascript 获取随机数
javascript 获取随机数 var rand=Math.floor(Math.random()*(n+1)) floor 向下取整 random 获得0-1之间的随机数
- MyEclipse10中配置WebLogic10
MyEclipse10中配置WebLogic10 1.双击打开MyEclipse10,依次操作"Window--->Preferences" 2.在左侧菜单中找到" ...
- Java 第三章 选择结构
第三章 选择结构 if基本语法: if(条件){// 表达式 // 代码块 } eg: int a = 10; if(a > 1){ System.out.println("内容& ...
- Vasya and Basketball CodeForces - 493C
Vasya follows a basketball game and marks the distances from which each team makes a throw. He knows ...
- ubuntu安装pycharm桌面快捷方式
1.sudo gedit /usr/share/applications/Pycharm.desktop 2.输入 [Desktop Entry] Encoding=UTF-8 Name=Pychar ...
- html 点击复制
<span>集团登陆:</span> <input readonly id="jituan" type="text" value= ...
- JAVA IDE IntelliJ IDEA 快捷键使用详记
一.高效定位代码 1.项目之间的跳转 Ctrl + Alt + [ :切换到下一个项目窗口 Ctrl + Alt + ] : 切换到上一个项目窗口 2.文件之间的跳转↑↓←→ Ctrl + E ...