页面|干货分享:B端表单设计优化( 三 )


Tips:什么是模度值?受柯布西耶模度的启发,追求「秩序之美」,Ant Design提取了一组可以用于 UI 布局空间决策的数组,他们都保持了 8 倍数的原则、具备动态的韵律感。经过验证,可以在一定程度上帮助我们更快更好的实现布局空间上的设计决策。模度具体落实在设计上,先梳理产品中常见的表单类型,然后设置一个默认宽度在这里的使用,根据模度的规则,设置了XS、S、 M、L、XL五个尺寸,根据输入内容选择不同长度的输入框。
页面|干货分享:B端表单设计优化
文章插图
如何确定输入框的长度
2. 高效依据尼尔森十大可用性原则中的灵活高效和协助记忆原则,做到灵活、易用、高效、智能,尽量减少用户对操作目标的记忆负荷。
2.1 设置合理默认值
系统还可以自动为用户填写一部分表单,从而降低录入成本,让用户减少操作步骤,提高操作效率
页面|干货分享:B端表单设计优化
文章插图
将一些输入框给默认的值会提升表单提交效率
2.2 自动获取/搜索
【 页面|干货分享:B端表单设计优化】有些业务场景,用户大概率会复用之前已填写的内容作为模板,并在上面稍作修改,此时在新建立的录入页面时,可以默认带入用户之前的数据。
系统根据上下文或搜索自动获取填写信息,降低用户的记忆负荷,提升效率。
在新零售业务场景中,这类输入通常是输入商品名称或者商品名称,我们采用「模糊搜索」的方式。
页面|干货分享:B端表单设计优化
文章插图
2.3 智能录入
对于一些标准证件类信息的录入,可以通过OCR识别文件内容。当用户上传图片后,运用图像识别技术提取关键信息并自动填入结果。值得注意的是,如果图片不清晰或存在水印,将大大降低识别准确度。此时应提供修正渠道,让用户可以逐一校对并修改文本内容。
2.4 组件化设计
通过设计评审敲定后提炼出规范,组建标准,提取组合用法以覆盖各个业务场景。实现设计和开发一体化,让设计面向开发,让开发贴近设计,减少设计及开发人员的额外工作量,让工作变得十分高效。
目前工作阶段处于中台全面改版中,改版的最大难题在于组件库落地,我们在实际工作中,总结梳理了通用组件库和实际业务场景结合的定制组件库,根据下图进行实际的开发跟进。
页面|干货分享:B端表单设计优化
文章插图
3. 可信任依据尼尔森十大可用性原则中的容错、防错以及反馈原则,在操作的前中后分别进行防错、实时反馈、提醒和纠错。比在发生错误时设置提醒弹窗更好的设计方式,是在这个错误发生之前就避免它。可以帮助用户排除一些容易出错的情况,或在用户提交之前给他一个确认的选项。在此,特别要注意在用户操作具有毁灭性效果的功能时要有提示,防止用户犯不可挽回的错误。
页面|干货分享:B端表单设计优化
文章插图
1.预防错误
页面|干货分享:B端表单设计优化
文章插图
2.实时反馈
页面|干货分享:B端表单设计优化
文章插图
3.提醒/纠错
页面|干货分享:B端表单设计优化
文章插图
4.所见即所得
依据尼尔森十大可用性原则中的贴近场景原则,遵循真实场景的认知、习惯,让信息的呈现更加自然,易于辨识和接受。
页面|干货分享:B端表单设计优化