美文网首页产品交互设计
译文 | 设计更好的表单

译文 | 设计更好的表单

作者: 瓦力UX | 来源:发表于2016-07-07 17:54 被阅读55次

无论是登陆,分步骤的流程还是单调的日期输入,表单设计都是其中最重要的部分。这篇文章主要分析了表单设计中哪些是常用和禁用的。

表单应该尽量保持一列

多列的布局会打断用户垂直阅读的节奏

把标签放在顶部

用户完成一个把顶部标签的表单比完成左边标签的表单更高效。顶部标签在手机上表现的同样很好。但是,在拥有更多数据输入的大型表单时,也可以考虑左标签的表单,这样用户可以更方便的浏览,因为整个表单的高度减小了,从而提供了更多的可能性

把标签和输入框编组

把标签和输入框放得更加靠近,这样可以确保每个输入有足够的距离间隔,用户不会产生疑惑

禁止使用大写

大写会使阅读和扫描变得困难

如果下拉选项小于6个,把它们全部显示出来

下拉框需要两次的点击而且还隐藏的选项。如果只有5个选项,用选择器代替

不能用占位文字代替标签

用占位文字代替标签能节省空间,因此看起来是很诱人的选择,但是却会在输入过程中产生很多疑惑用户的因素

把单选(多选)按钮上下排列,方便浏览

上下的布局始浏览更方便

文字的描述应表示动作目的

表明动作目的的描述使操作更有目的性

在行内提示错误

向用户展现错误的地方和原因

在用户输入完成之后验证

不要在用户正在输入的时候就验证输入,除非这样可以帮助到用户

不要隐藏基本的帮助文字

随时展示帮助文字,当输入时把它放在输入框旁边显示

把重要性不同的表单按钮分开

次要的按钮是否该显示目前也成为一个争论

用输入框长度作为一个暗示

输入框的长度让用户对要输入内容的长度有大致的了解

去掉*号,用文字表示可选的输入

用户并不总是清楚*所带便的意思,用文字代替*更好一些

把相关的信息编组

用户会分批思考,太长的表单会使人感到有压力。对表单进行有逻辑的分组会使用户思考的更快一些

我们让用户填写表单的最终目的是什么?

忽略现有的输入方式,思考另一种方式去收集数据。你要不停的问你自己这项数据是不是可以被推理出来或者用户可以推迟输入,或者完全可以不要。

数据的输入渐渐变得自动化。比如,手机或者可穿戴设备可以在用户意识不到的时候收集大量的数据。现在我们可以通过SMS,email,声音,位置,指纹,生物识别等等方式获取数据。

使输入变得有趣

时如白驹过隙,没人愿意把时间浪费在填写表单上。我们要去和用户对话,变得有趣,渐进,去做意想不到的事情。设计师的作用就是通过展现企业的品牌文化引出用户情感化的反应。如果我们采用的方式正确的话,就会增加用户的完成率。确保你自己没有违反上边所说的几个标准。

原文地址:Design Better Forms

相关文章

  • 译文 | 设计更好的表单

    无论是登陆,分步骤的流程还是单调的日期输入,表单设计都是其中最重要的部分。这篇文章主要分析了表单设计中哪些是常用和...

  • 设计更好的表单

    [译文]设计更好的表单(常见错误&如何解决) 字数525阅读639评论16喜欢25 无论是连贯试、分布式,亦或是单...

  • 设计更好的表单

    无论是注册流程、多页面的步进还是单纯的数据录入,表单都是最重要的组件之一。这篇文章将会介绍在表单设计中我们该做什么...

  • [译文]设计更好的表单(常见错误&如何解决)

    无论是连贯试、分布式,亦或是单调的数据输入界面,表单都是数码产品的重要组成部分。这篇文章聚焦在表单设计中常见的该做...

  • 设计出更好的表单

    无论是注册流程,多视图步进或单调的数据输入界面,表单都是数字产品的设计中最重要的组成部分之一。本文重点介绍了常见的...

  • 「译」设计更好的表单

    欢迎关注我的微信公众号:Shyanne 主要介绍了设计师经常会犯的错误以及如何来修正这些错误。 无论这是一个注册流...

  • Bootstrap - 表单1

    基础表单 表单主要功能是用来与用户做交流的一个网页控件,良好的表单设计能够让网页与用户更好的沟通。表单中常见的元素...

  • 如何设计出更好的表单?

    如何才能设计出更好更实用的表单呢? 无论是注册流程、多视点布局、或者是单调的纯数据录入界面,表单都是其中最重要的组...

  • 关于表单设计的思路

    表单设计的典型流程: 数据建模---------------设计表单------------布局---------...

  • 译文 | 设计更好的数据表格

    不具备可视化和可操作性的数据是毫无用处的,未来技术的成功将使高级数据收集与更好的用户体验相结合,数据表格应该结合更...

网友评论

    本文标题:译文 | 设计更好的表单

    本文链接:https://www.haomeiwen.com/subject/lxdljttx.html