小生活网 > 商务服务 > 网站建设推广

设计表单的知识点

发布:2019年09月09日编号:2056-557807
小生活网提醒您:1、在办理服务前请确认对方资质, 夸大的宣传和承诺不要轻信!2.任何要求预付定金、汇款至个人银行账户等方式均存在风险,谨防上当受骗!
详细描述

表单是产品设计中的重要组成部分,如果说弹框的主要作用是完成信息反馈,那么表单的主要作用就是完成信息录入欢迎www.xbaixing.com。任何一个表单都可以被拆解成三个最基本要素:标签(标题)、输入框和按钮。

标签根据标签所处的位置,可以将其分为左标签、顶部标签和行内标签。

1. 左标签左标签在目前来说是最常见的一种标签样式,但是这并不意味着我们可以无所顾虑地使用它。以手机端为例,手机端的屏幕尺寸(宽度)有限,左标签会占据屏幕较大的空间,此时右边的输入框就可能无法展示完整的信息。

2. 顶部标签顶部标签是指位于输入框上方的标签,这样输入框就可以独占整个页面,信息可以得到更完全的展示www.xbaixing.com小百姓网

但是这种布局方式也有缺点:会占据更多的纵向空间,之前一屏就可以展示的内容,现在用户需要滑动页面才可以看完。

3. 行内标签行内标签又可以被看成是输入提示,其样式看起来很适合手机端的表单设计,因为它可以极大地节省页面空间。但是一旦用户点击切换到输入状态以后,就看不到这些标签了。如果操作提示字数很多,例如密码规范,那么用户记忆会很吃力。我们可以在调起的键盘顶部加上提示,减少用户的记忆成本小 百 姓 网

但是,如果表单项目过多,则用户在填写的时候很容易串行,可能会出现把家庭住址填到毕业院校一栏中的情况。更严重的是,用户因为无法看到标签,这类错误是无法被检查出来的。为了解决这个问题,我们可以在行内标签前加一个图标来标识这个列表项,图标所占据的空间不会太大,而且会提高页面的美观性。

当表单项目过多时,我们要对其进行整合分组来提升内容的可读性。

输入框的作用是供用户完成信息录入,这里我们的设计思路是如何提升信息的录入效率欢迎www.xbaixing.com容错性设计在理想状态下,用户填写完表单信息,然后点击「提交」按钮,系统显示提交成功。但是,现实情况却是用户在填写过程中经常会发生错误,那么如何将容错性原则融入表单设计中呢?

首先我们需要给予用户足够的操作提示,日期录入就是最典型的例子。不同的地区对于日期录入的格式也不一样,「02/12/2019」到底是2019年2月12日还是2019年12月2日?如果我们不提示用户,用户就不知道应该怎么输入。

为了避免用户犯错和提升用户的信息录入效率,我们可以提供自动完成录入功能,当用户在文本框里输入时,系统可以猜测可能的答案,显示可选列表,避免了用户手动输入造成的错误。

按钮表单中的提交类按钮其实在很多表单中,不是所有的信息都需要用户手动录入的欢迎www.xbaixing.com。以前面提到的邮政编码为例,只要用户输入了地址,系统就能获取邮政编码,相关信息是可以直接回显的,用户没有看到此类信息的必要性。所以,对于一些重要性不是很高、不强制用户看完的表单项目,很适合使用这类底部悬浮按钮。最常见的就是各种协议页。可能在这里提到的一些技法过一段时间就会落伍了。要成为一名优秀的设计师,必须具备持续学习的能力小 百 姓 网更多文章就在蓝蓝设计每日一贴,为众多优秀企业提供卓越的UI咨询、竞品分析、交互设计、UI界面设计、嵌入式显示屏界面设计开发、图标icon设计、大型网站设计。

欢迎访问,开始愉快的合作!


展开更多描述 ↓
展开更多图片 ↓
lanlanwork 注册时间:2019年07月01日
该用户还发布了
精选信息
热门信息
在线留言 发送短信 拨打电话