提示信息是指在用户输入信息的过程中提示用...
采集 评论
查看来源 ui.cn
四季1985从唐小燕
转采于2022-07-09 13:12:04
提示信息是指在用户输入信息的过程中提示用户输入状态的辅助信息，提示信息的设计原则：先预防、后纠错
根据输入流程将用户输入过程分为输入前、输入中、输入后三个阶段，依据用户信息输入阶段，可以将提示信息分为三类：输入前的引导类提示信息、输入中/后的反馈类提示信息，前者则包括帮助性提示、输入性提示，后者则包括错误性提示、反馈性提示。
用户交互UE
四季1985
对于多行文本框建议使用可拉伸的自适应高度的文本域，比固定高度的内滚动文本域要好， 从用户体验讲，可变化的文本框适用于各种用户的阅读习惯。同时，因为固定文本框常常会出现滚动条，会使页面出现多个滚动条，给用户的使用操作上带来一定困扰。
一般用于选项不多且相对固定的情况，选项控制在6个以内为宜，用户可以一眼看到所有内容。 单选框只能是其中一个选项，一般会默认一个选项选中。多选框则可以选择其中一个或多个选项。
根据选择类型，可以分为单选择器、多选择器、级联选择器以及树选择器4种类型。
滑动型输入器，展示当前值和可选范围，通过拖动滑块在一个固定区间内进行选择。 滑块选择这种交互特点使得在设置音量、亮度等某一个维度的强弱等级的时候是一个比较好的方案，依据数值特点可以分为三种类型，分别为单点连续滑块、区间连续滑块和单点间续滑块。
时间段选择：为用户提供了一种可视化的方式去浏览和选择一个日期、一个时间、一个日期时间或日期范围。
日期及时间选择：分为日期选择、时间选择、日期时间选择，可以是单个时间，也可以是时间区间；
级联选择、树选择 二者都属层级选择，区别在于级联选好选项后框内显示的是含层级的内容选项，且只能选择需最子集选项（例如：广东省/广州市市/天河区，不能选择广东省，因为前面的选项只为导航至最子集） 而树选择框内展示的是单个选项的内容，不展示层级，但可以选择任何层级（例如：天河区）
穿梭框较列表选择的区别在于其将备选和已选分别置于选择面板的左右两栏，能够以很直观的方式在两栏中移动元素完成选择行为。
关于控件选择
提示信息是指在用户输入信息的过程中提示用户输入状态的辅助信息，提示信息的设计原则：先预防、后纠错 根据输入流程将用户输入过程分为输入前、输入中、输入后三个阶段，依据用户信息输入阶段，可以将提示信息分为三类：输入前的引导类提示信息、输入中/后的反馈类提示信息，前者则包括帮助性提示、输入性提示，后者则包括错误性提示、反馈性提示。
文件上传为用户提供将本地文件上传到系统服务器上的入口，依据上传方式可划分为点击上传、缩略图上传、拖拽上传三种形式
全局提示一般位于整个表单的最开始，是对整个表单的解释说明，包括信息的用途、安全性、保密性等，以此消除用户不信任。
单项提示对应单个输入域，只对此项输入域进行解释说明，根据格式塔原理，定位精准便于用户理解。 单项提示也可以选用不同的布局，分别有提示图标在鼠标hover时气泡提示、输入框下方文字提示、输入框后方文字提示、单机输入框气泡提示4种提示布局。
反馈机制的设计原则：预先提示，减少出错； ①轻量。遵循【告知但不打扰】的基本原则； ②清晰的文案。反馈内容需要明确表达目的及操作后果，错误提示需要说清错误原因及改正方式； ③保持系统中所有相同事件反馈方式一致，利于培养用户使用习惯和心理预期。 ④就近原则。反馈出现在操作点最近的地方时，最容易被注意到且容易被操作的。
错误性提示 在填写表单时，用户免不了出错。错误消息让用户知道无法继续进行，并且告知如何改正。 视觉表现：采用醒目的色彩和视觉要素来对比突出。目的只有一个即：引起关注。 位置：指导文字邻近产生错误的输入框，可以更快更便捷的提供改进帮助。 时机：确保在适当时机出现，如果过度使用，会让人沮丧。例如：在用户输入进程中停止提示，确保输入完成才出现。 准确：信息精准，不要让用户产生歧义；例如“用户名填写错误”要提示用户名具体错误的原因“用户名不能添加符号”“用户名重复”“用户名不能超过8个字符”等具体原因，
输入性提示信息即占位符，直接展示在输入项中，是对某一个输入域的内容进行提示，当用户输入时文本框在获取焦点后提示文本隐藏，如果是大篇幅的解释性内容应放在帮助性文字中。 有示例型占位符和通用型占位符两种。属于是一种轻量化的提示信息，与其他提示信息相比，视觉负担较小，占用空间更小，与输入内容的关联性更强。
反馈类提示信息 反馈提示一般有正确、错误、警告三种状态。其中，正确状态通常不给予任何提示，也可采用图标进行反馈，让用户感受更加直观；反之当用户录入的内容与规则不符时，给予错误提示信息。警告状态往往与文本框相结合，当字数超过规则的限制时，给出相对应的反馈。
在产品设计中我们还需要了解反馈信息的校验方式，校验方式主要分为：前端校验、后端校验。 前端校验：一般校验显示错误和格式错误：必填项、（邮箱、电话号、地址）格式、密码强度等。快速反馈，直接提醒用户错误内容，让用户及时知晓并更改。与数据库无关。 后端校验：唯一性验证、验证码、敏感词等，触发校验请求后系统会去数据库查询校验信息，再给予用户相应的反馈。
触发条件：检验提示在什么节点（填写/失焦/点击提交）出现 单项触发-即时报错 每填完一项时触发，校验用于输入项较多，且某个输入项有先决条件，会对接下来的输入产生影响 优点：避免完整输入后才反馈信息，为用户增加犯错成本 缺点：输入有误时，用户需要点击有错的输入框进行修改，略影响体验 提交触发-输入完成后报错 填写完点击提交时统一校验，用于表单体量较小出错率较低的页面，给出所有不合规则的表单信息，可以是单项提示/全局提示 优点：减少后端服务器压力 缺点：用户不能及时看到反馈进行修改，表单过长会影响用户体验
360°表单设计指南，快速掌握「表单」设计知识点（上）-经验/观点-UICN用户体验设计平台
同采自
ui.cn
该采集也在以下画板
加载更多
推荐给你的采集
采集
meigongyun.com
伊岚分享采集到png素材

冬日冷色调圣诞手绘花卉系列元素 Scandi Fest collection

335

伊岚分享 采集到
png素材
采集
静候好戏采集到人像

泽捻知

612

静候好戏 采集到
人像
该采集待公开
采集
pinterest.com
罗菩堤rowe采集到【色谱】装修配色

#Coastal #Colors Fashionable Coastal Living R...

27

罗菩堤rowe 采集到
【色谱】装修配色
采集
pixiv.net
〃梦落雨`笑╰︶采集到二次元美图

しぶりん

215

〃梦落雨`笑╰︶ 采集到
二次元美图
采集
l0XI4gBo晓风残月采集到皇室

7

l0XI4gBo晓风残月 采集到
皇室
采集
weibo.com
Lily名字十七画采集到场景素材

摄影 · 极简主义

445

Lily名字十七画 采集到
场景素材
采集
mp.weixin.qq.com
菓仔fish采集到练习

【绘画参考】Hong SoonSang 的角色设定图（人物设计必学）

389

菓仔fish 采集到
练习
采集
behance.net
顺物荣枯采集到主题活动

夏日逃离/SUMMER MUSIC FESTIVAL : 夏日逃离音乐会 | Summer...

69

顺物荣枯 采集到
主题活动
该采集待公开
采集
峰言风语采集到醉美身材

95

峰言风语 采集到
醉美身材
采集
海盐荔枝的夏日采集到动漫

动漫

62

海盐荔枝的夏日 采集到
动漫
采集
惜朝采集到绘画

206

惜朝 采集到
绘画
采集
hidepink采集到素材–街景小场景

33

hidepink 采集到
素材–街景小场景
采集
alpha.wallhaven.cc
菇凉&采集到地产配图

General 1920x1080 Greece hotels mountain swim...

90

菇凉& 采集到
地产配图
采集
melodySixi采集到祛湿

湿气-微营销海报

22

melodySixi 采集到
祛湿
采集
雨ˋ滴滴答答采集到二次元

419

雨ˋ滴滴答答 采集到
二次元
采集
xiachufang.com
Dora爱幻想采集到面包片

如何做超厚的沼三明治~详细tip！牛油果鸡蛋午餐肉三明治~

1151

Dora爱幻想 采集到
面包片
采集
weibo.com
Lily名字十七画采集到场景素材

极简主义摄影。

361

Lily名字十七画 采集到
场景素材