编辑导语:在这个互联网时代,表单是每个APP中必不可少的一部分,有时我们也经常会接触一些不得不填的表单,整体设计比较简单,视觉比较好,但是还有一些真的就是惨不忍睹,体验感极差 。那怎样更好地打造用户体验的表单呢,本文就来为大家聊一聊 。

文章插图
在大家的记忆中,填过既复杂又不易操作的表单是什么样的?是结构多变、耗时耗力,还是内容巨多、填错一项就要全部重来?很多时候,当我们遇到体验超级不好的表单设计、但又不得不用它完成任务时,那就只能机械化的对着这些字段进行不情愿的填写 。
表单是UI设计中很常见的元素,不管是PC端还是移动端,表单几乎是无法规避的UI控件,用户可以通过表单完成线上购物、信息交换、文章订阅等任务,使用范畴极为广泛且牵扯到方方面面 。
表单作为信息收集的重要环节,对于用户和产品来说至关重要,其看似简单、实则很容易忽略用户体验,作为设计师,需要根据触发条件、使用场景将文本信息、输入框、按钮等元素进行灵活的调整,以确保用户顺畅的完成表单任务,因此,设计出一个可用性非常好的表单是提升用户完成效率的关键 。
本篇文章将针对表单最常见的设计准则及用户体验做出总结,希望能够抛砖引玉,对表单设计有一个更全面的认识 。
一、认识UI中的表单1. 什么是表单表单主要用来收集或呈现数据、信息或特定字段,其本身不具备属性,只是一个数据采集工具,需要灵活的运用到不同的场景模块中才能发挥其真正作用,例如常见的登录注册、调查问卷、个人信息页面等 。如何确定当前页面是不是表单页,主要看该页面是否发生数据采集而触发用户输入、选择、编辑等操作,从而对部分内容进行控制 。

文章插图
2. 表单的构成(视觉角度)除去系统隐藏的交互及程序规则,常用且可见的表单元素有标签、输入区、占位符、图标、按钮这几部分 。

文章插图
标签:明确该项应输入/选择什么内容,部分表单没有标签,例如登录页,直接以图标、占位符提示录入的内容; 输入区:与用户发生交互的区域,通常用输入框、分隔线、选项框、开关…等常见元素提示;占位符:用于描述表单内容的详细说明、录入规则、注意事项等,光标插入或有内容录入时占位符消失;图标:带有图标的表单页面,通常存在较复杂的次级任务,伴随下拉框、弹窗或页面跳转来完成前置条件;按钮:表单中的任务按钮(非保存/提交)与单选作用相同,用于选项条件较少的表单内容 。
3. 表单的各种状态表单基本上需经过三个阶段,即交互前、交互中、交互后的三个状态 。
交互前:在用户未发生任何操作时,表单为默认的初始化状态;交互中:光标插入即成为聚焦状态,占位符消失,随着内容的输入,输入框后面显示一键清除图标;交互后:输入完成光标离开,前端如验证内容有误会立即反馈,无误则回到正常输入后的状 。
二、表单元素拆解及设计细节1. 结构/框架首先,在视觉上,移动端表单不管所输入字段有多么的少也不要在同一行添置多个表单,更好的版式就是单列展示,便于用户浏览和理解,尽量避免多列展示,除非存在关联性极强的前置条件,如:输入手机号码之前要先选择国际 *** 区号,可将区号和手机号码归纳为同一表单项 。
其次,表单内容需先易后难,避免用户从一开始就产生逃避的想法,需要根据内容的关联性循序渐进的引导用户完成 。例如:添加地址,常见顺序是姓名、 *** 、地区、详细地址,如果一开始就让用户填写详细地址的话就不合理了(并不是不行),这等于在颠覆用户的认知,就算完成了表单内容多少也会有些“上头” 。
最后,当同一个页面的表单内容过多时,需要根据类型、相似性或前后关系进行分组,保持页面的节奏感,让用户在最短的时间内对整个页面内容有个大致的了解,从而能更轻松的完成表单 。另外,将选填的内容尽量靠后,若其重要性较低,还不如直接去掉,如无必要、勿增实体 。

文章插图
2. 标签标签的作用是告知用户当前表单要输入什么内容,清晰简洁的表单能让用户更快速的理解 。标签的长短决定着其对齐方式,通常标签字数在可控的情况下可使用左对齐;文本字数不可控但不是很多时可使用右对齐;字数不可控且标签长短不一、相差巨大就使用顶对齐(例如英文,大多数不可控,参差不齐) 。
推荐阅读
- 找一个能够把图片转换成ICO格式的图标文件软件?
- 大学生入党思想汇报格式范文2022
- md格式是什么,md格式文件
- kgma是什么格式车里能放吗,酷狗的kgma是什么格式
- 怎么把jpeg改为jpg,格式为jpg怎么弄
- 怎么才能解除黑名单,手机号码拉黑名单怎么恢复
- excel怎么更改文件格式,win10怎么更改文件格式
- 怎样把mp4转换成mp3格式,把mp4转换成mp3的软件
- 表格格式设置,表格格式不对怎么转换
- 论证方法的作用及答题格式 论证方法的作用