此页面上的内容需要较新版本的 Adobe Flash Player。

获取 Adobe Flash Player

网站首页   |   关于伊维   |   网站建设   |   软件开发   |   案例欣赏   |   配套服务   |   新闻动态   |   技术支持   |   联系我们
  新闻动态 News
  伊维观点
 
 
  虚拟空间 域名注册
  优化推广 网站推广
  企业邮箱 短信平台
  平面设计 定制印刷
  户外广告  
 
伊维互联的成长历程与资质
为您解答售
前的一切问题
最新客户与公司动态
伊维互联的
成长历程与资质
给我们发送邮件
最新客户与
公司动态
首页 新闻动态 最新动态
简化输入 — 让网页表单更亲切
  

大部分人不?#19981;短?#34920;单,因为人们来到网站,主要目的不是填表,而是浏览或者购买。精心设计的表单,使输入变得流畅让人心情愉悦,而糟糕的设计让人扶墙吐血。那怎样才是优秀的表单呢?页面的布局、逻辑组织、视觉样式等都是值得关注的细节,其中简化输入?#20146;?#36817;常被提及的,在这里我分享下自己工作中的心得…

1、更高大的输入框

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

2、添加选取器。

与其让人输入不如提供选择,选取内容只要点几下,就自动填充进输入框,不但可以减少输入障碍,还能预防出错。可以把任何希望的数据做成选取器,比如日期、颜色、地址或者历史记录等?#21462;?/P>

举个例子:前面的“对方开户姓名”输入框,需要填写对方的姓名,如果对方名字里有汉字不认识该怎么办呢?于是我们可以加上一个生僻字的选取器,如图:

打开字库,可以根据模糊读音选取汉字填入输入框。另外,姓名输入框有校验,选取完成后不要忘记对输入框内容进行再一次校验。

3、预置文字。

采用预置文字来简化输入经常在手机上看到,现在在网页上也常使用。比如微博上发言的输入框,会保留你上一次未发出的内容,可以重新编辑。

在网上?#19981;?#30475;到?#36873;?#36755;入提示”与“预置文字?#34987;?#29992;。?#27604;唬?#20320;怎样称呼他们都是可以的,但要明白这是两种交互方式。输入提示的目的是指导填写的,聚焦输入框后文本消失?#27426;?#39044;置文?#36136;?#23646;于待修改的正式内容,字体样式应与正式输入的样?#36739;?#21516;,聚?#36141;?#25991;本是不会消失的。

当表单输入遇到选填与必填难以抉择?#20445;?#32771;虑预置文字会是一个不错的折中方案。比如在一个申请付款的表单中,对用户?#27492;?#20027;要需填写的是“对方账号”和?#26696;?#27454;金额?#20445;?#20184;款?#24471;?#26159;一个选填项。但对?#20302;忱此擔?#21448;必须采集付款?#24471;鰨?#20316;为交易凭据之一,这个付款?#24471;?#24590;样处理呢?比较下面3个方式,显然复选框的方式不适?#24076;?#22240;为用户若不填写我们就无法收集到数据,而输入提示的方式还?#20999;?#35201;用户去填写,所以意义也不大。折中了业务和用户两方面,预置?#30333;?#36134;”两字还是不错的,不想填写的?#36865;?#20840;可以跳过它。

4、设备读取。

摄像头读取、语音输入……最近,各种智能录入方式在手机上甚是流?#26657;?#32593;页上也不甘心示弱,纷纷添加了这些功能~还有人脸识别,不知道不久后会不会流行起来呢?

5、设置输入属性。

现在比较靠谱的还是Html5提供的一些表单类型属性。除了限制输入类型之外还有一些有意思的设置。拖放属性,可以从桌面上直接拖进相应的输入框里。在邮箱中拖入附件,若主题为空还可自动填写主题。而range和number属性,可以直接替换掉输入框,对数值输入很有用,在chrome里显示如图:

 
分享到:
 
 
珠海网站建设·最新动态伊维互联 竭诚为您服务!
建站?#35748;擼?756-2611167 (总机)

相关网站建设链接:
珠海做网站|最新动态|珠海网站制作
(声明:本文部分资?#21916;?#32771;来源网络,如有侵权请及时告之)

 
福彩15选5走势图浙江风釆