简化输入 让网页表单更亲切

innofogsait

【如内容违法或虚假，请联系上述邮件删除】大部分人不喜欢填表单，由于人们来到网站，主要目的不是填表，而是阅读或者置办。精心设计的表单，使输入变得流利让人心情愉悦，而糟糕的设计让人扶墙吐血。那怎样才是优秀的表单呢?页面的规划、逻辑组织、视觉样式等都是值得关注的细节，其中简化输入是最近常被提及的，在这里我分享下自己工作中的心得 1、 更高大的输入框 增加输入框高度，加粗字体，能够让网页上的输入框看起来更容易填写和阅读。随着电脑显现器尺寸变大，这样的输入框也显得更大气。 2、 添加选取器。 与其让人输入不如提供选择，选取内容只需点几下，就自动填充进输入框，不但能够减少输入障碍，还能预防出错。能够把任何希望的数据做成选取器，比如日期、颜色、地址或者历史记载等等。 举个例子：前面的 对方开户姓名 输入框，需求填写对方的姓名，假如对方名字里有汉字不认识该怎样办呢?于是我们能够加上一个生僻字的选取器，如图： 翻开字库，能够依据含糊读音选取汉字填入输入框。另外，姓名输入框有校验，选取完成后不要遗忘对输入框内容中止再一次校验。 3、 预置文字。 采用预置文字来简化输入经常在手机上看到，往常在网页上也常运用。比如微博上发言的输入框，会保管你上一次未发出的内容，能够重新编辑。 在网上也会看到把 输入提示 与 预置文字 混用。当然，你怎样称谓他们都是能够的，但要明白这是两种交互方式。输入提示的目的是指导填写的，聚焦输入框后文本消逝;而预置文字是属于待修正的正式内容，字体样式应与正式输入的样式相同，聚焦后文本是不会消逝的。 当表单输入遇到选填与必填难以抉择时，思索预置文字会是一个不错的折中计划。比如在一个申请付款的表单中，对用户来说主要需填写的是 对方账号 和 付款金额 ，付款阐明是一个选填项。但对系统来说，又必需采集付款阐明，作为买卖凭据之一，这个付款阐明怎样处置呢?比较下面3个方式，显然复选框的方式不合适，由于用户若不填写我们就无法搜集到数据，而输入提示的方式还是需求用户去填写，所以意义也不大。折中了业务和用户两方面，预置 转账 两字还是不错的，不想填写的人完整能够跳过它。 4、 设备读取。 摄像头读取、语音输入 最近，各种智能录入方式在手机上甚是盛行，网页上也不甘心示弱，纷繁添加了这些功用~还有人脸辨认，不知道不久后会不会盛行起来呢? 5、 设置输入属性。 往常比较靠谱的还是Html5提供的一些表单类型属性。除了限制输入类型之外还有一些有意义的设置。拖放属性，能够从桌面上直接拖进相应的输入框里。在邮箱中拖入附件，若主题为空还可自动填写主题。而range和number属性，能够直接交流掉输入框，对数值输入很有用，在chrome里显现如图： 6、 额外输入渐停顿开 当遇到需求增加高级或额外的选项时，能够采用即时添加删除的方式。不需求填写时，能够完整疏忽，需求填写时点击一下就会显现。 7、 应用输入反响。 除了校验填写能否正确，输入反响也能够辅佐简化用户填写，其中有不少诀窍。 比如在手机充值表单里，需求重复输入一遍号码才干确认提交。再重复输入一次，似乎认定你肯定会出错。增加了号码归属地的反响(配合历史记载)能够避免这种让人有点焦躁的方式。 下面这个例子将校验取得的引荐邮政编码填写到输入框中，让电脑变得更聪明一些。引荐的内容减少了思索和填写过程。 在反响的显现方式上，也值得挑剔一下。比如数值输入框里被输入了字母，格式错误。假如对最简单的提供错误提示不称心，能够试试让输入的字母先显现1秒，然后即被删除，这样比单纯的限制输入类型要更容易了解。另外，还能够自动修正显现格式：号码输入完成后，自动增加空格，能够便当阅读。在需求强调时这样运用还能够提示用户中止检查，但是在普通的输入框中就不需求那么复杂了。 给金额自动补全小数，比如下面的例子效劳费是有小数的，自动补全金额的小数，能够消减顾忌，而且挺有趣。 讲到这里，您能否对看似普通的表单设计产生了兴味呢?输入框是最基础的人机交互，每个人都有不同的了解，以上抛砖引玉，感激您的阅读，等候更多的分享和讨论! 相关阅读：http://www.wlzzz.com(关注老榕树网络旗下“网络思维”微信公众号:wlsw360 (每天都有好文章)

 

                                                   本帖如有虚假或违法，请联系邮箱删除，本社区删贴不收任何费用，欢迎举报。老榕树社区属老榕树网络旗下网站，旨在为老榕树用户提供创业咨询、网站建设技术交流、源码下载、提供各种实用工具。如有部分帖子涉及违法、虚假，请你第一时间与社区联系，把需要删除的社区链接提供给我们，我们核实之后，第一时间删除。邮箱：125175998@qq.com