编辑导语:在这个互联网时代,表单是每个APP中必不可少的一部分,有时我们也经常会接触一些不得不填的表单,整体设计比较简单,视觉比较好,但是还有一些真的就是惨不忍睹,体验感极差 。那怎样更好地打造用户体验的表单呢,本文就来为大家聊一聊 。
表单是UI设计中很常见的元素,不管是PC端还是移动端,表单几乎是无法规避的UI控件 , 用户可以通过表单完成线上购物、信息交换、文章订阅等任务,使用范畴极为广泛且牵扯到方方面面 。
表单作为信息收集的重要环节,对于用户和产品来说至关重要 , 其看似简单、实则很容易忽略用户体验 , 作为设计师,需要根据触发条件、使用场景将文本信息、输入框、按钮等元素进行灵活的调整,以确保用户顺畅的完成表单任务,因此,设计出一个可用性非常好的表单是提升用户完成效率的关键 。
本篇文章将针对表单最常见的设计准则及用户体验做出总结,希望能够抛砖引玉,对表单设计有一个更全面的认识 。
一、认识UI中的表单1. 什么是表单表单主要用来收集或呈现数据、信息或特定字段,其本身不具备属性,只是一个数据采集工具,需要灵活的运用到不同的场景模块中才能发挥其真正作用,例如常见的登录注册、调查问卷、个人信息页面等 。如何确定当前页面是不是表单页,主要看该页面是否发生数据采集而触发用户输入、选择、编辑等操作,从而对部分内容进行控制 。
2. 表单的构成(视觉角度)除去系统隐藏的交互及程序规则,常用且可见的表单元素有标签、输入区、占位符、图标、按钮这几部分 。
3. 表单的各种状态表单基本上需经过三个阶段,即交互前、交互中、交互后的三个状态 。
交互前:在用户未发生任何操作时 , 表单为默认的初始化状态;交互中:光标插入即成为聚焦状态,占位符消失,随着内容的输入 , 输入框后面显示一键清除图标;交互后:输入完成光标离开,前端如验证内容有误会立即反馈 , 无误则回到正常输入后的状 。
二、表单元素拆解及设计细节1. 结构/框架首先,在视觉上,移动端表单不管所输入字段有多么的少也不要在同一行添置多个表单,更好的版式就是单列展示,便于用户浏览和理解,尽量避免多列展示,除非存在关联性极强的前置条件,如:输入手机号码之前要先选择国际 *** 区号,可将区号和手机号码归纳为同一表单项 。
推荐阅读
- 什么是tif格式的文件,tif转PDF怎样操作
- 手机照片怎么重命名 手机照片怎么重命名jpg格式
- windows10如何修改文件格式
- c盘不能格式化 如何格式化c盘
- 日期格式 日期格式如何转换成2012-09-01
- 怎么修改文件后缀扩展名格式
- 利用条件格式给单元格填充不同颜色
- 怎样将WPS文本另存为word的doc格式
- 工资表文件格式如何转换
- 如何用格式化工厂剪辑视频 如何用格式化工厂剪辑视频教程