当前位置 : IT培训网 > ui设计 > 界面设计 > 郑州ui设计培训学校 表单设计的高体验法则

郑州ui设计培训学校 表单设计的高体验法则

时间:2016-08-05 17:57:00  来源:UI设计网  作者:郑州UI设计培训网  已有:名学员访问该课程
标签(Tag):   UI设计培训(67)
在今天的文章中,你会看到许多关于表单设计的切实可行的建议,它们涉及到可用性测试、现场测试、眼动追踪以及用户反馈等多个不同的环节。

表单设计在网页设计和手机应用中都很常见,报名单,选项,用户反馈,产品选择中都会用到。那对于网页设计师们就要注意很多地方,尽量让表单更简洁简便的运用,提高用户体验。郑州U设计培训今天给大家讲解讲解。

1、标签置于相应输入框的上方

用户快速浏览表单是否足够方便?如果表单很难为用户快速扫视,那么填写所需的时间就更长了。所以,好看好填才是好表单设计的准则。Matteo Penzo 的文章曾经研究过表单中的表单和输入框应该如何布局才能让用户更好更快的浏览和填写,结论是标签应该置于输入框上方。

郑州ui设计培训学校 表单设计的高体验法则_www.itpxw.cn

如果你想用户尽快浏览,让标签和输入框纵向排列,靠左对齐。请注意,这里说的是快速浏览。这样的布局方式的优势在于,它们不需要太多的横向的空间,用户无需左右扫视而只需要向下浏览就好了,并且这样的布局更容易构成响应式的UI,兼容不同的屏幕和不同的应用场景。

2、支持灵活多样的格式

有些字段的填写需要用户进行精准的填写,但是要求用户输入特别精准或者特定格式的内容可能会在易用性上存在那么一点问题。如果你要求用户输入数字内容(比如电话号码),那么最好是灵活多样的,支持多种不同输入方式和显示方法,让人更容易查看(而不是机器),防止出错。

郑州ui设计培训学校 表单设计的高体验法则_www.itpxw.cn

比如座机电话的格式常常为(777)666 – 5544,这样的格式更易于用户查看、记录和记忆。

3、不要混用占位符和字段标签

设计师通常会将文本占位符放到表单内,作为额外的提醒,作为示例告知用户如何填写。当用户开始在其中输入的时候,占位符文本会消失。

有一些设计师会将出于降低表单长度、降低视觉混乱度的原因,将标签直接作为占位符置于输入框内。对于简单的表单设计,这种设计影响不大,当表单信息量大,内容类型多变的时候,这种方式就不合适了。这种设计的缺陷在于:

·一旦用户点击输入框,标签会消失,用户容易忘记谈需要输入的内容以及形式

·当用户看到输入框中有内容填充的时候,会误解为这个字段已经被填写而无需输入了

如果你仍然需要在你的表单中使用占位符,不妨让占位符以浮动标签的形式而存在。默认显示占位符,当用户输入的时候,向上浮动作为标签提醒用户。

4、混淆可选和必填字段

正如同我在之前说过的,尽量避免在表单中加入可选填的字段。但是如果你非得加入,那么至少该明确哪些字段是可选,哪些是必填的。将选填字段控制在1~2个之内,并明确告知用户,这是可选的。

5、梳理逻辑,保留必需

表单是同用户进行沟通的语言。和任何对话一样,它应当以符合逻辑的方式帮助双方完成交流。所以,你需要这么做:

·让问题保持直观的顺序。你应当站在用户的角度按照逻辑提问题,而非按照程序或者数据库的逻辑。如果问题之间没有逻辑存在,那么可以按照字母顺序来排布。

·以直觉的顺序组织选项。比如选项为日期的时候,按照周一周二周三这样的顺序来排布,而非乱序。

·时刻反思从用户那里获得的信息是否必要,如何使用。这样做是为了消除不必要的选项,提升完成率。

6、使用单列列表布局

待填写的多列表单容易让用户漏填,并且打断填写体验。用户需要按照Z字形的轨迹来完成整个表单的填写,这样不仅影响整个书写路径,降低效率,而且具备一定的干扰性。但如果是使用单列的表单的话,这种填写路径是单一、直接而更为直觉高效的。

郑州ui设计培训学校 表单设计的高体验法则_www.itpxw.cn

7、减少待输入字段和工作量

减少待输入的字段能够让你的表单更精悍,减少加载时间,对于信息量较大的表单尤其重要。

单纯减少输入的字段数当然是不够的,你还要注意用户填写表单的方式、内容和工作量。通过打字录入内容是一种高交互性的输入方式,出错率高,时间成本高,所以,应当尽量减少用户打字输入的情况,多用复选框、单选按钮、下拉菜单等选项来降低用户犯错的概率。

郑州ui设计培训学校 表单设计的高体验法则_www.itpxw.cn

表单的使用是为了让用户更快更便捷的填写或选择自己想要的东西,一个有目的性的表单设计,会让用户快速提交自己的意向,减少考虑的时间,继而让商户获得有用的信息。

顶一下
(0)
0%
踩一下
(0)
0%

IT培训0元试听 每期开班座位有限.0元试听抢座开始! IT培训0元试听

  • 姓名 : *
  • 电话 : *
  • QQ : *
  • 留言 :
  • 验证码 : 看不清?点击更换请输入正确的验证码

在线咨询在线咨询

温馨提示 : 请保持手机畅通,咨询老师为您
提供专属一对一报名服务。

------分隔线----------------------------
------分隔线----------------------------

推荐内容