恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
表单设计中常犯的错误,以及优化方法
0.0°
2016-12-25 好文转载 经验/观点 原作者: Andrew Coyle by:可乐橙 举报 1660 8 11 0

无论是注册流程、多屏分步表单,或者是单调的数据列表界面,表单都是数字产品设计中的重要组成部分。本文会探讨表单设计的注意事项。记住这些只是通用规范,每条准则总有例外。

Image title

表单应该只有一列

      多列布局会扰乱用户垂直方向的视线移动。

Image title

顶部标签

       顶部标签的表单比左侧标签有更高的完成率。顶部标签的表单也易于移植到移动端。但是,对于有多种选择项的大量数据列表而言,请考虑使用左侧标签,因为它们在一起更易于浏览,能够减少高度,比顶部标签更贴心。

Image title

把标签与输入框成组排列

       把标签和输入框贴近排列,确保项目之间留有足够高度,防止用户困惑。


Image title

不要把默认提示当做标签

       把默认提示文字当做标签,意在节省空间。但这会导致许多可用性问题,Nielsen Norman Group的Katie Sherwin对此作过总结。

Image title

纵向排列勾选框(和单选框)以保证易读性

       纵向排列勾选框能加快浏览速度。

Image title

行动指令要描述出具体行为

Image title

逐行说明错误

       告诉用户哪里错了,说明原因。

Image title


逐行验证要在用户填完一行之后进行(除非填写中验证更有帮助)

       别在用户打字的时候进行逐行验证,除非这对他们有帮助——例如创建密码、用户名之类,或者字符数提示信息。

Image title

不要隐藏基本的帮助提示文案

       尽可能直接展示基本的帮助提示文案。对于复杂的提示文案,可以考虑在输入框激活时,展现在它旁边。区分主次操作项。


更新:2016-12-25

收藏

8人已收藏

i笑我愚i

思则灵、灵则通、通则达

  • 10

    作品

  • 14

    粉丝

  • 46

    关注

  • 飞机稿
  • 你该知道的网页布局技巧
  • 将配色数据可视化
  • 夕阳无限好
相关标签

    猜你喜欢

      2016-12-25 好文转载 经验/观点 原作者: Andrew Coyle by:可乐橙 举报 1660 8 11 0

      表单设计中常犯的错误,以及优化方法

      0.0°

      你确定要举报表单设计中常犯的错误,以及优化方法

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2016年12月20日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      11
      8
      0

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录