1. 论坛系统升级为Xenforo,欢迎大家测试!
    排除公告

设计表单的正确姿势

表单是产品设计中最重要的组件之一。本文重点介绍了表单设计的一般规则。请记住,这些都是一般准则,每个规则都有例外。
By 小栗儿, 2017-09-25 | |
标签:
  1. 小栗儿
    简评:表单是产品设计中最重要的组件之一。本文重点介绍了表单设计的一般规则。请记住,这些都是一般准则,每个规则都有例外。

    表单应该放到一列中


    v2-d477fe72fe3d2b21fe73bba1508d3682_b.jpg

    多列破坏了用户的垂直阅读习惯。

    标签顶部对齐


    v2-8099d2598be56990dfe45c6898d12681_b.jpg
    用户更能够接收顶对齐的提示标签。并且标签顶对齐在手机上也能很好的显示。

    标签和输入框分视觉上进行绑定


    v2-00c02b9e196803f3612ce2c9e6b237f7_b.jpg
    将标签和输入贴在一起,确保字段之间有足够的高度,以免用户感到困惑。

    不要所有的字符都用大写字母


    v2-1b9521aab20bfab2a57c53c081bc822a_b.jpg
    全大写的单词影响可读性。

    如果少于 6 个选项,应该全部显示出来


    v2-0a84b137a2f9fc5f67c5c46888868927_b.png
    下拉列表选项需要两次点击操作,并且需要隐藏下拉列表操作操作比较复杂。如果选项多余 5 个建议使用下拉列表,如果选项多余 25 个建议在下拉列表中加入搜索功能。

    不要把标签作为 placeholder


    v2-46d00af08b831860359c8889dc003496_b.jpg

    将多选框(单选框)放到彼此的下面


    v2-6b7a80b45cddac4c55e5bb82b4c24ea1_b.jpg
    将复选框放在彼此之下方便浏览信息。

    指出具体的错误


    v2-4184b152866c825ae447c95ee9ea4693_b.jpg
    显示用户发生错误的地方,并显示错误原因。

    在用户完成输入之后才进行错误验证


    v2-05c7abf1643b2a07ea915703276c55dd_b.jpg
    不要在用户正在输入期间进行错误验证,这是很没有必要的。

    不要隐藏基本的帮助说明


    v2-46aeb676f94070cdedffa762e632b86b_b.jpg
    尽可能显示帮助文本。如果帮助文本比较复杂,可以考虑在聚焦状态下显示到输入框旁边。

    强调重点


    v2-c48fb67949abfb8568fcebf47b3851ae_b.jpg

    限制输入框的长度可以提示用户的输入


    v2-75ebbd663fa27bfdc1aa87bd6f064fb2_b.jpg
    通常手机号、邮编号、信用卡等固定长度的内容应该限制输入框的长度

    不要使用 ( * ) 表示必填


    v2-4a33337c08522fae778dd77fe86e57d9_b.jpg
    不是所有的用户都知道 ( * )的含义,最好用文字来表述。

    对相关信息进行分组


    v2-399d54a7760bca1a891f97219f816bca_b.jpg
    通过创建分组,用户可以快速的理解表单内容。

    原文:Design Better Forms

留言

要发表留言,请注册并成为会员!