UI表单该如何设计更受欢迎?

在产品设计里面,用户的注册流程、输入界面、设置页面、操作的页面,表单都是产品设计中最重要的组件之一,填写表单并不是所有人都喜欢做的事情,但是有时候要用户必须注册完成的,所以表单设计原则一定要高效简单。

表单结构

表单的结构由表单的基本样式和基本内容组成,表单的内容都居中布置。表单的基本样式分为单行表单、多行表单、少数情况下表单作为标题存在的组合。

表单的内容作为信息查看、信息入口、信息操作以及内容输入,表单的内容分主要信息文字和辅助信息文字。

辅助信息文字通过是否为流程的必要内容来区别对应使用不同的字号,重要内容或需要突出对待的内容可以相应的搭配组合图标。

表单常用控件

常用设计原则

1.如果5个以上下内容,全部放出来,而不是折叠

在单选方案中,有2-5个选项可用,使用分段控件而不是下拉列表。主要是因为分段控制内容可见,并且可以通过单个交互完成任务,而不是多步(点击打开,选择,点击)。

2.多个选择的功能,收纳在一个选择容器里

一般日期三个部分组成年、月、日,如果使用下拉列表会有9步操作,这种对于功能接近的可以整合到一个设计组件里。

3.使用开关而不是下拉列表

如果只有2个选项,如显示或隐藏,打开或关,这种情况使用开关来提升操作效率。

4.滑块

通过滑动控件,将单调的下拉式操作调整为用户易于扫描的视觉体验,可以使用滑块定义好范围内的一个或多个值。

5.避免多列表单

移动端都是小屏幕,需要让用户重点放在内容上,保持从上而下的阅读视线,避免过于复杂的表单。

6.使用增加减少按钮而不是下拉

当用户需要通过增加或减少时,避免自由表单输入和下拉列表,用按钮帮助最大限度地减少错误。

7.尽量避免显示不需要的字段

尽量避免显示不需要的字段,它使表单更短,不要把必填和非必填的内容混在一起。

8.对信息进行分组

对相同内容信息进行分组,方便用户快速准确的扫描查找。

设计策略

1.如果5个以上下内容,全部放出来,而不是折叠。

2.多个选择的功能,收纳在一个选择容器里。

3.如果只有2个选项,如显示或隐藏,打开或关,这种情况使用开关来提升操作效率。

4.通过滑动控件,将单调的下拉式操作调整为用户易于扫描的视觉体验。

5.避免多列表单,保持从上而下的阅读视线,避免过于复杂的表单。

6.当用户需要通过增加或减少时,避免自由表单输入和下拉列表,用按钮帮助最大限度地减少错误。

7.尽量避免显示不需要的字段,它使表单更短,不要把必填和非必填的内容混在

一起。

8.对相同内容信息进行分组,方便用户相更快地扫描查找,不要内容都混在一起。

我们的设计日记(公众号)

作者:sky

(0)

相关推荐

  • 移动端的长表单应该如何设计?

    基于业务需求(常见于B端产品),有时候用户在操作过程中,不可避免的需要填写很多表单.针对于移动端长表单,我们应该如何去正确的设计呢? 本文大纲: 三种主方案 主方案1的设计讨论 主方案2的设计讨论 主 ...

  • 如何设计表单的错误信息

    本文中,我们会讨论如何通过优化错误提示信息,来优化UI表单的设计. 在UI界面的设计中,用户的操作失误不可避免,通过错误提示将当前状态传达给用户,这种反馈机制可以帮助用户及时作出调整并找到合理的解决方 ...

  • 设计一份优秀表单,需要注意的三个要点

    @呆呆U理 在我们的生活中经常会接触到表单,不过老实说,它们的使用体验经常让人无奈,比如在一些平台确认飞机票.检查购物清单或者是登录页面的设计等等.所以我们都希望表单能被设计的更好用一点. 虽然在这个 ...

  • 如何高效完成表单输入 ?

    表单是收集用户信息的方式.如果你的产品需要收集大量用户信息来完成为其提供的服务,那么在用户进行信息输入的过程中一定要考虑到输入成本和输入效率对用户体验的影响. 针对复杂表单信息多.填写慢.体验差等问题 ...

  • 表单设计总结

    表单是我们比较常见的一个信息录入工具.糟糕的表单设计会带来令用户抓狂的交互体验,极大的影响用户信息录入的效率.这篇文章我就来大家梳理一下关于表单设计的一些知识点. 表单的构成 常见表单是由多个列表项构 ...

  • UX设计秘诀之注册表单设计,细节决定成败

    说实话,现实生活中,又有多少人会真正喜欢填写表格?显然,并不多.因为填写表单这样的网页或App服务,并非用户所需.他们需要的仅仅只是能够尽快买票.聊天等服务而已.如此,注册表单的填写,似乎就成为他们不 ...

  • 设计语言 – 表单(登录/注册)

    设计语言中的表单中的登录与注册部分.大致讲完了按钮.下拉菜单.导航栏.分页等,就要开始讲表单了.表单也分几种功能和几种样式,我也不可能不能把它们一一讲出来,所以只挑出几个常用的来讲一下吧.重复性的知识 ...

  • 9个新人容易中枪的表单设计问题

    在网站中,表单是用户跟我们沟通的主要桥梁.透过表单,用户可以买东西.订阅新文章.更新资料--可以说网站最重要的功能,都是靠表单来完成.然而这个跟顾客打交道的重要环节,我们真的有做好了吗?以下分享的是一 ...

  • 44个漂亮的注册表单设计

    小编:注册表单在网页应用中十分重要,好的注册表单是可以让用户喜欢使用,大大的提升用户体验的.所以把注册表单设计好也是非常重要的一件事.今天就为大家带来44个漂亮的注册表单设计,看上去真的是有种赏心悦目 ...