聊聊打造优质WEB表单的9个方法-UI设计 PS-优质IT资源分享社区

admin
管理员
管理员
  • UID1
  • 粉丝26
  • 关注4
  • 发帖数581
  • 社区居民
  • 忠实会员
  • 原创写手
阅读:119回复:0

聊聊打造优质WEB表单的9个方法

楼主#
更多 发布于:2016-06-09 23:42

 1. 标签推荐运用右对齐方法




(图示1:taobao网注册页面)
马泰奥·彭佐在2006年7月的眼动研讨发现,标签假如选用顶对齐方法,用户的视野从标签移动到输入框只需求50毫秒,右对齐方法需求240毫秒,左对齐方法需求500毫秒。假如从高效上讲,应该是优先考虑标签顶部对齐。
咱们再看taobao注册页的表单选用了右对齐方法,是考虑到顶部对齐会占用过多的笔直空间,一旦表单项过多,对表单页的操作也会形成不方便,所以选用了右对齐方法。
所以笔者在此主张,假如表单项不多,有限考虑标签顶部对齐;而一起要统筹高效和页面的笔直空间,则挑选右对齐方法吧。那是不是左对齐标签无用呢?本来并不是,研讨也有表明,在涉及到专业性过强,用户不熟悉的表单,需求更长时刻了解的标签项时,则能够考虑左对齐方法。
2. 必填和选填




(图示2:必填VS选填)
本书里提出一个观念,假如必填字段比较多,把选填项符号出来则满足;假如选填字段比较多,则符号必填字段。
这确实能最高功率区别出来必填字段和选填字段,可是如今大多数互联网用户对于「*」就代表必填这都已体会,所以笔者还是推荐在表单中尽可能用「*」去区别必填和选填,究竟这属于最通用的计划。不过登录表单能够不遵从这个规矩,我们都知道登录表单中的标签项都为必填,一起也能够依据标签项是不是输入的状况来激活「登录」按钮。
3. 即时反应
前期的表单里面临标签项的阐明文字都直接放置在标签周围,但许多用户不会去看这些文字,或许直接忽略掉。本来能够联系用户操作表单行为来动态显现协助信息,例如用户聚集在哪一个标签项,则显现哪一项对应的解释案牍。腾讯微博注册页有一个细节做的比较好:




(图示3:腾讯微博注册页面)
当用户输入邮箱现已被注册过,则会即时给出相应的提示,节约用户输入额定注册信息的本钱,而不是让用户填写完再点击「提交」按钮交给服务器去做一次判别。
当然除了这条,还有暗码强度和暗码请求的即时校验,旨在节约用户输入时的考虑时刻,让用户更高功率地填写表单。
4. 过错音讯
表单中的过错提示信息,或许一些不合规的提示信息展现也是表单规划中影响比较大的元素。




(图示4:Error Message)
上图中的表单项就比较多,可能在小尺度屏幕中需求翻滚页面才能看到完好表单信息,而由于选用了点击「提交」按钮以后交给服务器校验数据,所以在多个表单项呈现过错的状况下,则需求统一在表单头部提示出来过错信息,而且最佳要有锚点,点击以后能够直接到过错的方位,节约用户寻觅的时刻。
可是如之前所说,假如能够在前台即时校验的信息,就尽量交给前台校验,除了能够节约用户的表单操作时刻,能够确保体会的共同。
5. 智能默许




(图示5:taobao/天猫购物车页面,图中敏感数据现已抹去)
表单规划中能够经过智能默许的方法协助用户填写一些需求重复填写的表单,这么能够节约许多的时刻。例如图中的taobao/天猫购物车页面,用户在每次购买以后都需求经过收货地址填写环节,假如说将填写过的地址协助用户保存起来并设置成默许,在后来的每次购买过程,能够直接进入到下一个环节,省去了这一步的时刻。
6. 设置 Tab 键跳转
笔者以为 Tab 键跳转也是一个能够进步用户操作表单功率的一个方法,也是规划师在表单规划中必需要考虑到的一个细节,Tab
键的跳转和表单项视觉先后顺序保持共同。
这个细节很小,可是影响面却很大。许多网站并没有在这个细节上做的极好。举个不和比如:




(图示6:付出宝收银台界面,图中敏感数据现已抹去)
上图是付出宝收银台的页面,别离来自于两个不一样的电商网站。依照表单规划逻辑,在用户输入账户名按 Tab
键后,光标会主动聚集到付出暗码输入框中,可是左右两个界面却存在彻底不一样的逻辑。左面页面在输入账户名以后按 Tab
键会直接跳到「忘掉账户名?」这个链接上,而右边则一切正常。
7. 赞同&提交
在许多注册表单的最终一项表单项是让用户勾选赞同***协议,许多状况下彻底是废话。所以这一步与提交按钮能够兼并在一起,省去一步操作。




(图示7:网易邮箱的注册页面)
8. 正在进行的动作
表单填写完结,最终一步即是提交了,这一步至关重要。不仅仅是说在提交以后要将后边的成果反应给用户(上面提到的即时反应),假如网络条件比较慢,或许信息量比较大,致使等待时刻过长(许多状况下会这么),那么咱们应该通知用户这一切,让用户并不会觉得等待时刻很长。一起也减少了用户重复点击「提交」按钮的状况。




9. 对话方法表单




(图示9:对话式表单)
这算是一些附加信息。一个个表单项本来能够转化成一条条疑问,让用户觉得像是在和互联网的另一边聊天,从而以最轻松愉悦的心情来进行表单填写。
总结
互联网在进化,表单也是如此,进化的一起,带给用户的是更高效的输入方法,愈加轻松愉悦的运用体会。而规划师在规划过程中,应当将功率放在第一位,然后才是在功率至上的根底上去完善交互视觉的体会细节。











优质IT资源分享社区为你提供此文。
本站有大量优质UI设计(含PS,软件 网页 平面设计等)教程视频,资料等资源,包含UI设计基础教程,高级进阶教程等等,教程视频资源涵盖传智播客,极客学院,达内,北大青鸟,猎豹网校等等IT职业培训机构的培训教学视频,价值巨大。欢迎点击下方链接查看。

UI设计教程视频
优质IT资源分享社区(www.itziyuan.top)
一个免费,自由,开放,共享,平等,互助的优质IT资源分享网站。
专注免费分享各大IT培训机构最新培训教学视频,为你的IT学习助力!

!!!回帖受限制请看点击这里!!!
!!!资源失效请在此版块发帖说明!!!

[PS:按 CTRL+D收藏本站网址~]

——“优质IT资源分享社区”管理员专用签名~

本版相似帖子

游客