第一站 - 轻松上网从此开始!

上网第一站

当前位置: > SEO >

表单经典原则是错的?来看这5个表单设计新规则(2)

时间:2017-11-02 13:23来源:我来投稿获取授权
以下内容来自网络或网友投稿,www.swdyz.com不承担连带责任,如有侵权问题请联系我删除。投稿如果是首发请注明‘第一站首发’。如果你对本站有什么好的要求或建议。那么都非常感谢你能-联系我|版权认领
浮动标签是一个迅速获得普及的新的交互设计方式。在它的设计中,标签文字开始作为提示文字,然后一旦用户开始填写,标签将升到上面,解决了上述提

  浮动标签是一个迅速获得普及的新的交互设计方式。在它的设计中,标签文字开始作为提示文字,然后一旦用户开始填写,标签将升到上面,解决了上述提示文字消失的问题。

  

表单经典原则是错的?来看这5个表单设计新规则

  虽然这种方式还可以帮助减少页面长度,在移动端特别有帮助。但是它不能解决上述文本框看上去已经被填补的问题。因此,Nielsen Norman Group不建议这种做法,还是应该保持标签在上面,除非页面长度是最重要的设计关注点。

  2. 提供更易填写的表单格式

  以前,在填写表格时用户有很多的猜测。“我的电话号码应该是哪种格式?我的信用卡有没有少输一位?这个键盘上的符号“@”在哪里?” 新技术使我们能够不让用户被这些疑虑困扰,提供更清爽的体验。

  输入掩码

  帮助用户格式化输入文本的输入掩码,虽然在外观上与提示文字类似,其实有明显的不同。首先,掩码只出现在用户点击输入框的时候,避免了上述浏览障碍的问题。其次,输入的文字自动应用正确的文本格式,让用户将填充字段时的焦点放在所需的数据上,这样更容易注意到错误。在下面的例子中,填写电话号码时括号和破折号自动填充。

  

  在填写手机号、信用卡、货币等等的时候,这种简单的技术可以节省我们的时间和精力。

  输入字段的HTML属性

  设计师知道对于输入特定的数据需要展示正确的移动键盘,但是对究竟哪种才是正确的键盘类型有些疑虑。

  举个例子,对于最常用的“数字”类型属性的输入框,常常不会触发数字小键盘,触发的是普通的带有数字区域的键盘,数字键的大小远小于小键盘。

  

表单经典原则是错的?来看这5个表单设计新规则

  △ “数字”键盘和“电话”小键盘

  对于只包括数字的字段,比如日期,邮编,信用卡等等。使用数字小键盘可以有更大的点击目标,从而使用户用更小的精力输入。(为了使其展示,前端中可用“tel”作为type值或者添加属性“pattern=[0-9]* ”。)然而,为数字状态设置全键盘,对如街道地址等以数字作为开始的混合字段依然有用。

  这里有其他的几种可以被加入输入框的属性,从而可以消除额外的点击和错误。

  自动填写:利用浏览器可以保存并列举用户以前填写过的值。对敏感数据应关闭此功能。

  自动更正:更正输入的拼写错误。对名称,地址等特殊字段应该关闭此功能。

  自动首字母大写:自动大写输入的第一个字母。这适用于填写姓名,而不可用于电子邮件地址。

  拼写检查:用红色下划线标出拼写错误的单词。对名称,地址等特殊字段应该关闭此功能。

  3. 限制输入

  如今越来越多的人用小屏的移动设备,我们需要考虑到小屏的使用场景,避免用户不必要的输入,在提高用户满意度的同时还可以减少错误率。

  地址预填充

  在网上注册表单中地址的填写常常是最麻烦的,因为包括多个字段,长长的地址名。通过把长地址拆解为单个字段,不仅有助于让用户聚焦在输入上(是的他们总是会频繁切换页面),也削减了大量的输入。

  在下面的例子中输入谷歌总部的地址(街道,城市,州,邮编,国家),完整的输入过程只需键入10个字母,而如果不用自动填充的话,用户需要手动输入50多次。

  

表单经典原则是错的?来看这5个表单设计新规则

  上面使用谷歌API的解决办法可以在大多数情况下表现良好,但是对于输入标志性建筑和公寓号的适用性有限,因为这些也许不包括在API提供的反馈之中。

  而ThinkGeek的方法,由软件即服务(SaaS)供应商提供,称为PCA预测,初始搜索时允许输入公寓号码,输入后将地址正确的格式化。

  

表单经典原则是错的?来看这5个表单设计新规则

  △ ThinkGeek.com

  邮箱预填充

  另一种减少输入的方法就是在邮件地址字段中提供一个常见邮箱域名的列表。列表在用户输入了“@”按钮时出现,主要就是使用了一个预填充的解决方案,这样每次输入邮件地址最多可以节省12次按键。

  

表单经典原则是错的?来看这5个表单设计新规则

  △ 注意输入框文本 “邮箱地址” 已经消失

  4. 利用定位

(责任编辑:admin)
织梦二维码生成器
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
发布者资料
第一站编辑 查看详细资料 发送留言 加为好友 用户等级:注册会员 注册时间:2012-05-22 19:05 最后登录:2014-08-08 03:08
栏目列表
推荐内容
分享按鈕