在产品设计中我们还需要了解反馈信息的校验...
采集 评论
查看来源 ui.cn
四季1985从唐小燕
转采于2022-07-09 13:11:49
在产品设计中我们还需要了解反馈信息的校验方式，校验方式主要分为：前端校验、后端校验。
前端校验：一般校验显示错误和格式错误：必填项、（邮箱、电话号、地址）格式、密码强度等。快速反馈，直接提醒用户错误内容，让用户及时知晓并更改。与数据库无关。
后端校验：唯一性验证、验证码、敏感词等，触发校验请求后系统会去数据库查询校验信息，再给予用户相应的反馈。
用户交互UE
四季1985
关于控件选择
提示信息是指在用户输入信息的过程中提示用户输入状态的辅助信息，提示信息的设计原则：先预防、后纠错 根据输入流程将用户输入过程分为输入前、输入中、输入后三个阶段，依据用户信息输入阶段，可以将提示信息分为三类：输入前的引导类提示信息、输入中/后的反馈类提示信息，前者则包括帮助性提示、输入性提示，后者则包括错误性提示、反馈性提示。
文件上传为用户提供将本地文件上传到系统服务器上的入口，依据上传方式可划分为点击上传、缩略图上传、拖拽上传三种形式
全局提示一般位于整个表单的最开始，是对整个表单的解释说明，包括信息的用途、安全性、保密性等，以此消除用户不信任。
单项提示对应单个输入域，只对此项输入域进行解释说明，根据格式塔原理，定位精准便于用户理解。 单项提示也可以选用不同的布局，分别有提示图标在鼠标hover时气泡提示、输入框下方文字提示、输入框后方文字提示、单机输入框气泡提示4种提示布局。
反馈机制的设计原则：预先提示，减少出错； ①轻量。遵循【告知但不打扰】的基本原则； ②清晰的文案。反馈内容需要明确表达目的及操作后果，错误提示需要说清错误原因及改正方式； ③保持系统中所有相同事件反馈方式一致，利于培养用户使用习惯和心理预期。 ④就近原则。反馈出现在操作点最近的地方时，最容易被注意到且容易被操作的。
错误性提示 在填写表单时，用户免不了出错。错误消息让用户知道无法继续进行，并且告知如何改正。 视觉表现：采用醒目的色彩和视觉要素来对比突出。目的只有一个即：引起关注。 位置：指导文字邻近产生错误的输入框，可以更快更便捷的提供改进帮助。 时机：确保在适当时机出现，如果过度使用，会让人沮丧。例如：在用户输入进程中停止提示，确保输入完成才出现。 准确：信息精准，不要让用户产生歧义；例如“用户名填写错误”要提示用户名具体错误的原因“用户名不能添加符号”“用户名重复”“用户名不能超过8个字符”等具体原因，
输入性提示信息即占位符，直接展示在输入项中，是对某一个输入域的内容进行提示，当用户输入时文本框在获取焦点后提示文本隐藏，如果是大篇幅的解释性内容应放在帮助性文字中。 有示例型占位符和通用型占位符两种。属于是一种轻量化的提示信息，与其他提示信息相比，视觉负担较小，占用空间更小，与输入内容的关联性更强。
反馈类提示信息 反馈提示一般有正确、错误、警告三种状态。其中，正确状态通常不给予任何提示，也可采用图标进行反馈，让用户感受更加直观；反之当用户录入的内容与规则不符时，给予错误提示信息。警告状态往往与文本框相结合，当字数超过规则的限制时，给出相对应的反馈。
在产品设计中我们还需要了解反馈信息的校验方式，校验方式主要分为：前端校验、后端校验。 前端校验：一般校验显示错误和格式错误：必填项、（邮箱、电话号、地址）格式、密码强度等。快速反馈，直接提醒用户错误内容，让用户及时知晓并更改。与数据库无关。 后端校验：唯一性验证、验证码、敏感词等，触发校验请求后系统会去数据库查询校验信息，再给予用户相应的反馈。
触发条件：检验提示在什么节点（填写/失焦/点击提交）出现 单项触发-即时报错 每填完一项时触发，校验用于输入项较多，且某个输入项有先决条件，会对接下来的输入产生影响 优点：避免完整输入后才反馈信息，为用户增加犯错成本 缺点：输入有误时，用户需要点击有错的输入框进行修改，略影响体验 提交触发-输入完成后报错 填写完点击提交时统一校验，用于表单体量较小出错率较低的页面，给出所有不合规则的表单信息，可以是单项提示/全局提示 优点：减少后端服务器压力 缺点：用户不能及时看到反馈进行修改，表单过长会影响用户体验
360°表单设计指南，快速掌握「表单」设计知识点（上）-经验/观点-UICN用户体验设计平台
1、表单顶部/表单底部 用于放置全局按钮，两个位置的功能按钮是一样的，只是出现的条件不同。默认显示表单顶部按钮，目的在于用户无需上下滑动到固定位置才能对表单进行操作，省时增效。当顶部按钮因为页面上滑被遮盖了，底部按钮才悬浮在窗口底部。 2、跟随表单项 需要滚动条滚动到底部显示操作按钮，一般用于大部分表单都可以一页显示的情况，为了避免编辑后忘记点确定就跳转页面，会给表单有修改是否保存的提示弹窗。 3、分组底部 对每个分组表单进行的操作按钮，常用于只需要查看不需要经常编辑的表单。
主按钮禁用策略 对于主按钮是否采用默认禁用取决于表单的表单项数量，有两种策略：禁用策略和校验策略， 当表单项较少的时候，一般在3个以下时，主按钮采用禁用策略，当有数据录入的时候则启用主按钮，一来便于用户理解，二来也是对用户操作的一种反馈； 当表单项比较多的时候，一般超过5项，或者有必填项（必填和非必填同时存在）时，主按钮建议采用校验策略。
表单的动作分为主动作和次动作。例如提交/保存等完成表单填写的属于主动作，取消/重置等允许撤销输入的属于次动作。 如果无法移除次动作，要在设计时进行视觉区分，尽量弱化次动作按钮的样式。 从阅读顺序、按钮层级、对齐方式综合测试，结果表明在几种设计方案中，方案A的眼球固定时间较短，完成任务效率更高。方案B眼球定位时间最长，因为人们期望按钮按照垂直视线左侧排列，而非四处寻找按钮。方案C中，很多人误点击了取消按钮。 所以，完成的路径很重要。主动作和输入框对齐会减少填写表单的时间。所以若无特殊考虑，A是最佳选择
4年经验的B端交互设计作品集
B端项目总结-邮轮管理系统 -网页-UICN用户体验设计平台
B端 PC端
同采自
ui.cn
该采集也在以下画板
加载更多
推荐给你的采集
采集
meigongyun.com
伊岚分享采集到png素材

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

335

伊岚分享 采集到
png素材
采集
mp.weixin.qq.com
菓仔fish采集到练习

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

389

菓仔fish 采集到
练习
采集
pinterest.com
罗菩堤rowe采集到【色谱】装修配色

#Coastal #Colors Fashionable Coastal Living R...

27

罗菩堤rowe 采集到
【色谱】装修配色
采集
惜朝采集到绘画

205

惜朝 采集到
绘画
该采集待公开
采集
静候好戏采集到人像

泽捻知

610

静候好戏 采集到
人像
采集
雨ˋ滴滴答答采集到二次元

417

雨ˋ滴滴答答 采集到
二次元
采集
pixiv.net
〃梦落雨`笑╰︶采集到二次元美图

しぶりん

215

〃梦落雨`笑╰︶ 采集到
二次元美图
采集
behance.net
顺物荣枯采集到主题活动

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

69

顺物荣枯 采集到
主题活动
采集
weibo.com
Lily名字十七画采集到场景素材

摄影 · 极简主义

445

Lily名字十七画 采集到
场景素材
采集
海盐荔枝的夏日采集到动漫

动漫

62

海盐荔枝的夏日 采集到
动漫
该采集待公开
采集
hidepink采集到素材–街景小场景

33

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

General 1920x1080 Greece hotels mountain swim...

90

菇凉& 采集到
地产配图
采集
峰言风语采集到醉美身材

95

峰言风语 采集到
醉美身材
采集
weibo.com
Lily名字十七画采集到场景素材

极简主义摄影。

361

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

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

1151

Dora爱幻想 采集到
面包片
采集
melodySixi采集到祛湿

湿气-微营销海报

22

melodySixi 采集到
祛湿
采集
l0XI4gBo晓风残月采集到皇室

7

l0XI4gBo晓风残月 采集到
皇室