新闻动态
     公司新闻
     行业新闻
     营销知识
     网站建设
  
  我们做什么
  网站策划·网站推广 (
  雅虎口碑壹推广 (ko
  谷歌搜索竞价 (Goo
  网站评估诊断 (Goo
  全站动画·创意设计 (
 
   您的位置在:首页 > 青州易达网络科技有限公司 > 新闻动态
   新闻动态
优化输入框,让填写如丝般顺滑
[ 来源:青州易达网络科技有限公司   发布日期:2017-9-2 10:34:13 ]
.
填写是一件麻烦事,我们或多或少感受糟糕体验。设计开发者也很无奈,感觉身体被掏空。怎么办? 

让我们从优化输入框开始吧!看着简单的框,对用户体验的影响很大。特别是在非常有限的手机屏幕中,怎么帮助用户顺利的填写完呢?值得我们好好研究。 

视觉层面 

舒适的填写区域 

常用的数值是:拇指的滑动触发区域在宽高45px左右,图标的操作区域是48dp,输入框行高在80dp左右,行间距在8dp。 



左图行距过于拥挤,而且文字大小不统一,给用户一种填写内容很多的感觉 

简洁的描述 

填写标签要简洁, 过长的标签有两个问题: 

使填写的内容压缩。 
影响整页对齐。 
平行排布优点是:符合视线规律。阅读更快。如果要填写的标签实在过长,检查一下是否说不清楚的可以用占位符描述?或者采取垂直排布的方式。平行排布优点是:对标签字数限制不严格。 



恰当的颜色 

输入的结果我们常常用颜色来反馈,比如蓝色代表链接,灰色代表失效,绿色代表正确,黄色代表提示,红色代表错误。红色的使用要慎重,因为红色默认为最高等级警告,如果红色的提示出现过多会对用户造成紧张感,想到试卷上满篇的厚叉了么?所以把提示分级吧。 

对于大家公认的色彩暗示,如果随意交换容易造成误解,特别红色和灰色。这有点像我们默认为穿裙子的形象是女,穿裤子是男,如果有天你看到穿裙子标识的男厕所,会困惑吗? 



对于约定俗成的事,走寻常路才更易用 

明确的指示 

当用户选中准备输入的时候,应当提供清晰的视觉提示,这样让用户明确知道自己的位置,而不是迷失在茫茫表格中,这种细微的反馈会让用户更有掌控力。

交互层面 

标注键盘类型 

手机上的键盘触摸点非常小,触摸键盘需要随时调整,根据每个表单域的不同数据类型,为用户提供不同的键盘布局。输入方式有三种。对于第一种纯数字的我们可以锁定为数字键盘。 

纯数字: 电话号码、邮编、各种号码 
纯文本: 用户名、地址等 
混合格式: 评论、备注等等 


上图填写电话号码,如果如右图默认好数字键盘,填写时就节省一次切换键盘的功夫。 

对于一些固定选项我们常常使用控件帮助用户更快填写,比如日期,性别,地区等等。尽量在当前页面调用控件。如果填写内容范围广,需要进入二级页面另一页来选择适合,尽量提供快速检索方式。还有一种情况是对于容易填错的选项,使用控件,减少用户的填写错误,从而减少心理负担。 



但是我们要思考使用控件是否更快速,下图这个例子,填写还款日的时候进入另一个选择,把1— 28 以及月末安行排开,初衷应该是为了容错,但是使用起来繁琐。 



及时验证 

当你好不容易填写完长长的信息,点击提交,这时候界面提示:你有 20 项填错……虽然我知道作为金融产品,这项的目的是为了限制错误。然而这种处理方法显然不是最好的。 

没有人喜欢后知后觉的反馈,特别是错误。告知用户输入内容是否正确的最佳时机,是在用户填完内容后立刻告知用户。内联验证可以马上告知用户输入的正确性。帮助用户及时改正,无需等到点击提交按钮。如果只有一个错误要修正,那就很容易,能降低用户放弃的可能性。
首页 | 青州易达网络科技有限公司 |联系方式 |人才招聘 | 域名空间 | 网页设计案例 | 网站知识 | 解决方案 | 建站指南
地址:青州市泰丰购物广场数码D区1237-2   邮编:262500   E- Mail:278439672@qq.com   在线Q Q:点击发送消息给对方 
业务咨询:18953612398  站点地图 青州做网站
Copyright (c) 20010-2030 青州网站建设 . All rights reserved
青州易达网络科技有限公司
http://www.sdfirstsolar.com
360网站安全检测平台