年夜部门人不喜欢填表单，因为人们来到网站，首要目的不是填表，而是浏览或者采办。精心设计的表单，使输入变得流利让人神色愉悦，而糟糕的设计让人扶墙吐血。那若何才是优异的表单呢?页面的结构、逻辑组织、视觉样式等都是值得关注的细节，此鱿蛤化输入是比来常被说起的，在这里我分享下自己工作中的心得…

　　1、 更高峻的输入框

　　增添输入框高度，加粗字体，可以让网页上的输入框看起来更轻易填写和阅读。跟着电脑显示器尺寸变年夜，这样的输入框也显得更年夜气。

　　2、 添加拔取器。

　　与其让人输入不如供给选择，拔取内容只要点几下，就自动填充进输入框，不单可以削减输入障碍，还能预防犯错。可以把任何但愿的数据做成拔取器，好比日期、颜色、地址或者历史记实等等。

　　举个例子：前面的“对方开户姓名”输入框，需要填写对方的姓名，如不美观对方名字里有汉字不熟悉该怎么办呢?于是我们可以加上一个生僻字的拔取器，如图：

　　打开字库，可以按照恍惚读音拔取汉字填入输入框。此外，姓名输入框有校验，拔取完成后不要健忘对输入框内容进行再一次校验。

　　3、 预置文字。

　　采用预置文字来简化输入经常在手机上看到，此刻在网页上也常使用。好比微博上讲话的输入框，会保留你上一次未发出的内容，可以年夜头编纂。

　　在网上也会看到把“输入提醒”与“预置文字”混用。当然，你若何称号他们都是可以的，但要年夜白这是两种交互体例。输入提醒的目的是指导填写的，聚焦输入框后文本消逝踪;而预置文字是属于待改削的正式内容，字体样式应与正式输入的样式不异，聚焦后文本是不会消逝踪的。

　　当表单输入碰着选填与必填难以抉择时，考虑预置文字会是一个不错的折中方案。好比在一个申请付款的表单中，对用户来说首要需填写的是“对方账号”和“付款金额”，付款声名是一个选填项。但对系统来说，又必需采集付款声名，作为生意凭证之一，这个付款声名若何措置呢?斗劲下面3个体例，显然复选框的体例不适合，因为用户若不填写我们就无神通集到数据，而输入提醒的体例仍是需要用户去填写，所以意义也不年夜。折中了营业和用户两方面，预置“转账”两字仍是不错的，不想填写的人完全可以跳过它。

　　4、 设备篡夺。

　　摄像头篡夺、语音输入……比来，各类智能录入体例在手机上甚是风行，网页上也不甘愿宁可示弱，纷纷添加了这些功能~还有人脸识别，不知道不久后会不会风行起来呢?

　　5、 设置输入属性。

　　此刻斗劲靠谱的仍是Html5供给的一些表单类型属性。除了限制输入类型之外还有一些有意思的设置。拖放属性，可以年夜桌面上直接拖进响应的输入框里。在邮箱中拖入附件，若主题为空还可自动填写主题。而range和number属性，可以直接替代失踪输入框，对数值输入很有用，在chrome里显示如图：

　　6、 额外输入渐进睁开

　　当碰着需要增添高级或额外的选项时，可以采用即时添加删除的体例。不需要填写时，可以完全忽略，需要填写时点击一下就会显示。

　　7、 操作输入反馈。

　　除了校验填写是否正确，输入反馈也可以辅佐简化用户填写，其中有不少桥缦闩。

　　好比在手机充值表单里，需要一再输入一遍号码才能确认提交。再一再输入一次，仿佛认定你必定会犯错。增添了号码归属地的反馈(配合历史记实)可以避免这种让人有点焦躁的体例。

　　下面这个例子将校验获得的举荐邮政编码填写到输入框中，让电脑变得更聪明一些。举荐的内容削减了思虑和填写过程。

　　在反馈的显示体例上，也值得抉剔一下。好比数值输入框里被输入了字母，名目错误。如不美观对最简单的供给错误提醒过错劲，可以试试让输入的字母先显示1秒，然后即被删除，这样比纯挚的限制输入类型要更轻易理解。此外，还可以自动改削显示名目：号码输入完成后，自动增添空格，可以便利阅读。在需要强调时这样使用还可以提醒用户进行搜检，可是在通俗的输入框中就不需要那么复杂了。

　　给金额自动补全小数，好比下面的例子处事费是有小数的，自动补全金额的小数，可以消减记挂，而且挺有趣。

　　讲到这里，您是否对看似通俗的表单设计发生了乐趣呢?输入框是最基本的人机交互，每小我都有分歧的理解，以上抛砖引玉，感谢感动您的阅读，等候更多的分享和切磋!

　　来历：http://uedc.163.com/8957.html

　　推荐阅读

　　网址导航发展分析：我们需要什么样的导航网站？

一、什么是导航网站? 导航网站又称网址导航，网址导航就是一个集结较多网址，并按照必然前提进行分类的一种网址站。网址导航便利网友们快速找到自己需要的网站，而不用去记住各类网站的网址，就可以直接进到所需的网>>>详细阅读

本文标题：<b>用户体验分析：简化输入 让网页表单更亲切</b>

地址：http://www.lgo100.com/a/22/20120309/38817.html

 1/2    1  2 下一页