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

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

提交需求

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

0/20
0/200

设计大赛

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

提交完成
感谢您对UI中国的支持和信赖!
进行表单设计需要注意这十点
0.0°
2018-05-20 原创文章 经验/观点 举报 19721 127 121 19


最近看了一些关于表单设计的文章,今天总结了以下十点。

表单设计是互联网产品设计中(尤其是移动设备)重要的组成部分之一,无论是注册流程或是登录流程,运用的地方十分广泛。下面就来说一下设计过程中需要注意的地方:


1.表单纵向单列排列


Image title

由于移动设备的屏幕尺寸限制,主流APP的注册表单都是纵向单列排列,横向排列或者纵向多列排布会影响用户的视觉连贯性,也会影响美观。



2.标签和输入框左对齐且要分组明确


Image title


标签和输入框上下排列且左对齐,符合用户的视觉走向,用户的完成率相对较高,这一方式适用于现在的移动端设备。另外标签和输入框要保持疏密关系,确保每组之间留有足够的高度,避免用户混淆从而增加用户的理解成本。



3.避免把输入框内的占位符作为标签


Image title

有时候出于手机界面的大小限制,有的设计师会将输入框内的占位符作为标签,看起来是节省了空间,但是其实是有问题的,当开始输入时用户可能会忘记当前输入框要输入的内容,可用性会受到影响。

如果想把输入框内的占位符作为标签,可以添加动效,如下图所示:

Image title动图来源于花瓣,版权归原作者所有



4.及时区分首要和次要操作


Image title

当用户输入完信息时,应该及时highlight出主要操作,及时的提醒用户。



5.标签有英文的情况下避免全部大写


Image title

不要强制用户阅读所有大写文字,全部大写与首字母大写相比,全部大写大大地延缓了用户的阅读速度,所以出于阅读体验的考虑,全部大写要避免。



6.不要用*表示必填字段,而在选填字段上直接标出


Image title

大部分用户是不明白*表示必填字段的,只有少部分高级用户或者专家用户才明白*的意思,所以最好在选填字段处标明“选填”,这样反而更加的直观。



7.不要隐藏提示文字


Image title

对于复杂不易理解的标签或者需要注意的地方,要明确显示出提示文字,帮助用户完成信息填写,不要隐藏起来,否则会失去意义。



8.明确指出信息错误


Image title

经常会遇到一种情况:用户在填写一大列表单后,最后点击提交了,才告知用户填写的信息中有错误,但是却不知道是哪一步错了。更有甚者是提交了信息,弹出toast提示信息错误后,之前填写的信息全部没了,需要用户重新填写,这是最糟糕的体验设计,相信大部分用户都不会有耐心再次填写,这是对商家增长用户的巨大损失,所以最好的设计是在用户填写过程中就能明确指出错误的地方,这才是最合理且最人性化的设计。



9.人性化设置


Image title如上图所示:当我在设置生日时,底部弹出日期编辑的toast,但是日期却是当日的日期。在一些移动屏幕的可见和可滚动的列表区域是很小的,滚动选项会使人不愉快,建议还是预先设置一个日期,避免用户反复滚动选项。诸如此类,细节之处做到位才会让用户信任和依赖你的产品。


10.关于下拉表单


Image title选项不超过5个

下拉表单是最常被误用的表格模式之一,“应该是最后使用的用户界面”。把选项放在下拉选择框内不仅隐藏了选项,还需要两次点击。如果选项个数不超过5个,可将选项全部显示,避免下拉表单。


Image title

图片为网络截图

如果选项超过25个,可在下拉框内采用上下文搜索,及时筛选出符合要求的信息,省去用户不必要的时间。



总结:

用户的时间都很宝贵,大家都不想浪费时间在没有意义的事情上,所以在设计中节约用户的时间,好的体验会让用户心生愉悦,增强对品牌的信任感和依赖。


微信公众号:Eason张UED

更新:2018-05-20

收藏

127人已收藏

Eason张UED

微信公众号:Eason张UED

  • 23

    作品

  • 5110

    粉丝

  • 175

    关注

  • 互联网设计师应知的专业术语合集-2
  • 以“盒马”为例,带你做产品分析报告
  • 日常APP体验-交互知识点汇总-5
  • 互联网设计圈大盘点:回顾2018 展望2019

    猜你喜欢

      2018-05-20 原创文章 经验/观点 举报 19721 127 121 19

      进行表单设计需要注意这十点

      0.0°

      你确定要举报进行表单设计需要注意这十点

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

      0/200

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

      点击上传附件

      对谁可见:

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

      您确认要推荐?

      该作品发布时间:2017年08月02日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      121
      127
      19

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

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

      登录

      手机号

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

      登录
      第三方账号登录