美文网首页
网页表单设计的十个戒条

网页表单设计的十个戒条

作者: Jessie | 来源:发表于2015-05-25 16:29 被阅读150次

1.填写域提供清晰可理解可视化的标签
填写域是用户填写表单首先会聚焦的地方,类似有用户名/密码等填写信息,用户需要清楚地了解每个空白域需要填写的信息以及格式。一目了然才能做到不厌烦。

information

2.字体大小
一般来说,主字体至少14px大小,16px是安全字体大小。

fontsize

3.合适范围的触摸域
在触摸设备上填写表单的现象越来越常见,Apple一直倡导按钮最小应为44px44px,因为它接近人的手指大小反应的范围。当然如果你在一个长表单中全部使用44px大小的空白域,将会在网页上占据大量空间,因此我建议用32px40px。

Bootstrap默认高度为32px,这是一个很好的基准。


field range

4.合理的输入框大小
每个信息输入框的大小不应该是一致大小,当你在填写邮政编码时,我们知道它是由4-6个数字组成的,因此与用户名的输入框长度相比,它应该更小以达到用户的期望。

input fields

5.浏览器默认的点选框机制
点选框的功能一般是用Javascript库实现的,但现在可以纯粹用SVG和CSS实现。
[SVG animation]可以做到样式很漂亮。但是不易用还是在损害用户的利益。
select2所以使用浏览器默认的选择机制才是合理的。

radio buttons or checkboxes

6.可视化错误提示
应在可视化区域让用户接收错误的信息提示。

error message

7.清晰的可选择区域提示
一般情况下用星号* 提示用户此区域选择性填写。

optional or not optional

8.选择性隐藏不必填写信息
当两部分信息是独立存在时,可以逻辑性地隐藏部分填写信息。例如,在电商环境下,用户的支票地址信息很可能就是用户接收发货的的地址,这时可以隐藏地址这部分输入框的填写,待用户需要时再出现即可。

not needed

9.精简输入信息
尽量避免不必要信息的填写特别是数字。

clear

10.输入样式的提醒
当被要求填写用户名、邮件地址、电话号码等信息时,应给出输入样式的范例。

example

@johan_ronsse

相关文章

  • 网页表单设计的十个戒条

    1.填写域提供清晰可理解可视化的标签填写域是用户填写表单首先会聚焦的地方,类似有用户名/密码等填写信息,用户需要清...

  • Bootstrap - 表单1

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

  • 如何设计一个交互好转化率高的表单

    表单在网页设计、app或者软件界面当中被广泛的使用,因而表单设计是个比较重要的工作。一个好的表单,不仅仅是界面设计...

  • 表单设计心得

    表单是网页中的重要元素,一个优秀的表单会给用户带来不错的用户体验。经过近期长时间设计表单,我们需要从表单基本层面重...

  • 表单设计中标签的布局方式有哪些

    表单设计的标签本质上是一个与用户对话的起点,了解表单设计的标签的设置规则后,需要关注标签的布局方式,因为网页表单设...

  • 从屌丝到架构师的飞越(HTML篇)-HTML表单

    一、介绍 表单在 Web 网页中用来给访问者填写信息,从而能采集客户端信息,使网页具有交互的功能。一般是将表单设计...

  • 网页设计:HTML表单标签

    表单包含三个基本组成部分:表单标签、表单域、表单按钮。 1,表单标签 HTML 表单用于收集用户输入,表单使用 ...

  • 网页设计中的“表单”问题

    在WEB产品的设计中经常要用到设计表单,表单中的元素众多,尤其是许多后台操作系统中表单元素的组合就更加复杂...

  • 皕杰报表查询表单设计 2018-11-07

    查询表单的作用是将报表中的参数通过Tag标签在网页上以表单的方式显示,就是说表单是为参数建的,因此,设计报表时要在...

  • JavaScript 内存详解 & 分析指南

    前言 JavaScript 诞生于 1995 年,最初被设计用于网页内的表单验证。 这些年来 JavaScript...

网友评论

      本文标题:网页表单设计的十个戒条

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