全国服务热线:4006-028-024 成都热线:028-86633922
新闻中心网站专题联系我们
行业新闻 建站经验 网站建设资讯 手机网站资讯 微信开发资讯 APP开发资讯 商城网站资讯

成都网页设计:看似简单的输入框,如何优化?

发布人:桔子科技    发布时间:2017-09-02 10:30:13    分享到:
看似简单的输入框,实际上对用户体验有着十分明显的营销,那么如何优化?看文章如何解读。

\

填写是一件麻烦事,我们或多或少感受糟糕体验。设计开发者也很无奈,感觉身体被掏空。怎么办?

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

视觉层面

舒适的填写区域

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

 

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

简洁的描述

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

  1. 使填写的内容压缩。

  2. 影响整页对齐。

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

 

恰当的颜色

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

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

 

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

明确的指示

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

 

交互层面

标注键盘类型

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

  1. 纯数字: 电话号码、邮编、各种号码

  2. 纯文本: 用户名、地址等

  3. 混合格式: 评论、备注等等

 

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

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

 

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

 

及时验证

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

没有人喜欢后知后觉的反馈,特别是错误。告知用户输入内容是否正确的最佳时机,是在用户填完内容后立刻告知用户。内联验证可以马上告知用户输入的正确性。帮助用户及时改正,无需等到点击提交按钮。如果只有一个错误要修正,那就很容易,能降低用户放弃的可能性。

 

清晰的反馈

关于填写错误的描述应该非常清晰,比如注册时密码填写,不要说密码安全性过低,而要说,密码必须超过8位,或者密码必须包含大小写和数字。总结为两点:

  1. 发生了什么错误,可能原因是什么。

  2. 用户应该做什么来改正错误。

必要的说明

有两种输入项目常常要加入说明:

  1. 专业性强,大众可能不清楚

  2. 安全隐私或者金钱相关,有心理顾虑

针对第一种,说明能减少输入错误,例如银行转账不是及时就到,而是需要两小时,金额不是任意的,每天有上限,并且和所剩的余额相关。如果这些是在用户输入完才告知,或者报错,那么这个锅用户当然不愿意背。

针对第二种,有心理顾虑的,可以承诺不会对用户造成损失,或者找背书,该方案已经通过XXX安全认证。消除顾虑之后才能顺利进行下一步。

 

上图转说明了限额,以及限额原因,能让用户在正确范围内使用

减少用户输入

说了那么多,最让用户舒心的莫过于帮助他们填写,因此,许多需要填写、选取的表单最好有预设的初始值或者内容填充在其中,这样可以让用户用起来更加方便,这就是智能预设。常见的使用场景有搜索联想输入,地址定位等。

 

总的来说,优化输入框设计主要有三个方向:

  1. 提高输入速度

  2. 为用户输入提供引导帮助

  3. 直接有效的指出用户输入过程中的问题

重视每一个接触点的用户的感受,这样我们的产品才被打磨的越来越精致。

本文是成都网站建设公司、成都网站设计制作公司、成都APP开发公司、成都响应式网站建设、成都VR全景制作-桔子科技公司为您整理!
成都网站建设,成都网站设计,成都网站制作,成都网页设计,成都网站建设公司 ,成都网站设计公司,成都网站制作公司,成都网页设计公司,网站建设网站制作网站设计网页设计成都响应式网站建设、成都响应式网站制作、成都响应式网站开发、成都全景制作、成都VR全景制作成都手机网站建设,手机网站建设,成都APP开发,APP开发,成都建网站,成都做网站,成都商城网站建设,集团网站建设,网站建设,高端网站建设,品牌网站建设,成都平台网站建设,成都响应式网站建设,成都微信网站建设,成都微商城网站建设,成都微信营销,成都微信小程序开发、成都网站优化,成都网络公司。

下一篇:成都网页设计:干货!对于设计节奏的把握上一篇:成都网页设计:UI设计工作中,设计师该如何选择字体

最新案例
手机/微网站
  1. [成都]成都微信网站建设:微信小程序增加搜索框页面功能
  2. [成都]成都微信网站建设:兰州银行叫停微信“扫码取款”的原因
  3. [成都]成都微信网站建设:更方便!微信PC版新增搜一搜功能
  4. [成都]成都手机网站建设:手机网站简洁的页面为什么很重要
  5. [成都]成都手机网站建设:苹果再次更新开发者网站,ios全新特性
  6. [成都]成都手机网站建设:苹果推送了iOS11开发者预览版Beta10
网络营销
  1. 成都APP开发:App接口设计所使用的的方法有哪些
  2. 成都APP开发:探讨各类电商APP发展如此稳健的原因
  3. 成都APP开发:在线音乐典型APP的男女分布差异较大
  4. 成都APP开发:来看看健身APP如何提高用户粘性的方法
  5. 成都APP开发:在线约会应用Tinder首次登顶App Store畅销排行榜
  6. 成都APP开发:2017最火的2种APP分析

  • 电话:4006-028-024 028-86633922

    邮箱:Service@orangeapp.cn

    成都市成华区崔家店路789号上城国际1-24-9号

qqsina