产品经理的UX——移动端的输入操作设计

UX是User experience的缩写,指用户体验,UX设计指以用户体验为中心的设计。UX Planet (uxplanet.org)上面讨论很多关于移动设计里做好UX的技巧,很多观点都非常具有指导意义。


UX是User experience的缩写,指用户体验,UX设计指以用户体验为中心的设计。UX Planet (uxplanet.org)上面讨论很多关于移动设计里做好UX的技巧,很多观点都非常具有指导意义。

产品经理的UX——移动端的输入操作设计

一.用户的输入

在移动端的UX设计有很多挑战,你需要在一个什么有限的屏幕大小下去处理各种输入。因此在设计的时候要能够让用户可以通过非常简单直观的方式去完成输入,并提供给用户完整但简洁的提示。

1.文本输入框

文本输入框(Text Field)最常用的一种输入方式。一个体验好的文本输入,要能够让用户快速地完成输入,在用户输入时为用户提供帮助、在用户出错的时候要能够让用户明白错在那里。

用户输入时,要求输入的数据类型应该和当前的键盘相匹配。比如要用户输入手机号码,那么焦点落到输入框时,弹出来的应该数字键盘。这样减少了用户切换键盘的麻烦。

产品经理的UX——移动端的输入操作设计

还有一个提升输入速度的方式那就是自动切换大小写,即首字母为大小,第二个字母开始为小写。这个适用于在英文的输入中,比如输入英文名,或者英文句子的首行。

提供缺省值和自动完成

缺省值提示可以帮助用户快速完成输入,这个缺省值可以是用户之前输入过的文本,或者系统提供的一些热门词汇。

自动完成是在用户输入的过程里,根据用户的输入来给出建议。用户可以通过系统的建议来自动完成输入。当然这依赖于系统建议的精准度。

产品经理的UX——移动端的输入操作设计

输入提示信息

用户在输入过程中应该给予用户足够多的帮助。这种帮助包括对输入项的解析,以及对输入信息的提示。同时,任何一个标题(Label)都应该是简洁明了的。

除了常规的在输入框左上角写明Label外,有一种简洁的做法是使用Inline Label。

产品经理的UX——移动端的输入操作设计

当然这种做法虽然简洁,但不好的地方是当用户开始输入之后,就看不到这个提示内容了。甚至有些用户可能会误认为这已经填写内容了。

用户Floating Label的交互方式可以解决这个问题:

产品经理的UX——移动端的输入操作设计

输入验证

用户是有可能输入出错的,系统应该给予用户及时的反馈——如果我做对了,请让我知道;如果我做错了,告诉我错在那里。

给予用户的提示不应该中断用户当前的操作。不要用弹出框让用确认的方式,在恰当地位置(比如输入框下面)给出说明即可。

产品经理的UX——移动端的输入操作设计

同时提示也应该有对提示的颜色区分。一般情况下,红色对应错误,绿色对应正确,黄色对应警告。

而对于有字符数限制的输入,当用户输入超过限制的字符时,还应该红色标记用户输入的字符数和限制字符数。有些系统在处理这个问题的时候,是直接不让用户继续输入,或者只提示用户输入的字符超出限制了,这都是不好的做法,前者让用户摸不着头脑,而后者则需要用户不断尝试减少多少才不超出。

产品经理的UX——移动端的输入操作设计

2.Radio按钮

产品经理的UX——移动端的输入操作设计

Radio按钮用于在用户有多个选项,但用户只能选择其中一个的时候。让用户进行有限选择,而非直接输入的方式,可以比较有效地减少用户输入错误的数据。

当需要用户进行设置的时候,使用Radio来让用户进行操作是一种比较好的做法。

在使用Radio的时候,需要注意的几个关键点是:

  • 选项的排序应该按逻辑排列,不要简单地按字母顺序来排。当然有时候这个也有例外,比如在国家选择里,你要选择中国(China),在按字母顺序排列的选项了用户可以非常快捷地通过定位到“C”开头的选项来找到”China”。
  • 选项的说明应该简短易懂,这个文案的功夫。
  • 进行默认选择,以及None选项(在用户可以不选择的情况下)。

产品经理的UX——移动端的输入操作设计

  •  选项垂直排列,不要水平排列。下面这种是糟糕的做法。

产品经理的UX——移动端的输入操作设计

当然这个也不是绝对,但如果你要将选项水平排列的话,选项应该尽可能少,并且可点击的区域足够大,比如下面这种:

产品经理的UX——移动端的输入操作设计

  • Radio的点击区域要包含整个Radio区域(按键和标签),即右边这种方式:

产品经理的UX——移动端的输入操作设计

  • 不要在选项之下,还有选项。

产品经理的UX——移动端的输入操作设计

  • 你当然也可以用下拉列表做选择选项,但如果选项数量少的时候,用Radio是更好的做法。

产品经理的UX——移动端的输入操作设计

3.Slider滑杆

产品经理的UX——移动端的输入操作设计

滑杆输入其实也是数值输入。当我们对输入精确的数值不那么在意的时候,采用滑杆的方式更加方便、体验更好。

产品经理的UX——移动端的输入操作设计

比如音量的输入,我们当然不在意音量的精确数值是多少,我们在意的是现在的音量是高了还是低了,我们想要调高还是调低。

产品经理的UX——移动端的输入操作设计

当然, 如果有时候还需要在调整完毕之后,查看下当前状态的数值,我们可以将对应的数值标示出来。

产品经理的UX——移动端的输入操作设计

作者:陈小健

来源:http://www.jianshu.com/p/89f83a369901

本文由@陈小健 授权发布于人人都是产品经理,未经作者许可,禁止转载。

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/27820/

(0)
CatherineCatherine
上一篇 2017-05-19 10:38
下一篇 2017-05-19 12:32

相关推荐

  • APP游戏分发模块一级交互设计

    看看阿西如何做原型设计,阿西手把手教大家设计原型。

    交互设计 2014-09-11
  • 交互设计工作记录(二)

    作者:飞阿婷的交互设计生活 系列:交互设计工作记录 互联网热点引发的思考 对百度用户体验总监刘超事件,怎么看? 首先,他此次的表现的确挺让人失望的,主要是态度问题,不够尊重台下好学且交了学费的设计师们,…

    2016-07-06
  • 联想实习 | 手机事业部招聘交互设计实习生

    公司简介联想是一家营业额达460亿美元的《财富》世界500强公司,在全球消费、商用以及企业级创新科技领域居领先地位,为用户提供安全及高质量的产品组合和服务,当中包括个人电脑﹙经典的Think 品牌和多模式YOGA品牌﹚、工作站、服务器、存储、智能电视,以及一系列移动互联产品如智能手机﹙包括联想和摩托罗拉品牌﹚、平板电脑和应用软件等。招聘岗位手机事业部-交互设计实习生岗位描述1. 参与联想ZUI手机操作系统的交互设计;2. 参与产品的规划...

    2018-04-21
  • 移动端搜索功能设计:3个阶段解析搜索流程设计要点

    这篇文章笔者想和大家聊一聊有关搜索功能的设计,搜索功能是每个内容型APP的核心,它的易用性决定了用户是否能从APP里快速找到自己想找的内容,那么决定搜索体验好坏的关键点又是什么呢?这里我总结了两点,“操作的易用性”和“结果的准确性”。看似简单的两点却有很多的学问,笔者把搜索的交互流程划分成三个关键阶段,“搜索前、搜索中及搜索后”,接下来将从这三个阶段逐一分析整个搜索流程中的相关设计。

    2017-05-11
  • 《用户体验要素》读书笔记:要理解为何这样做产品

    《用户体验要素》是一本实用类书,试图回答如何以用户体验为中心进行产品设计。作者通过构建自下而上的五层模型:战略层,范围层,结构层,框架层,表现层;来将以用户体验用户需求为中心的设计方式层次清晰的表达出来。并指出;一开始对战略层的深思熟虑,会帮助我们在整个产品设计中节约大量的时间。作者这本书写于pc时代,大多案例都是网站的建设。但是整个思考产品的思路,直到今天;都没有过时。一、 以用户体验为中心设计产品用户体验是指产品如何与外界发生接触,...

    2018-04-08
  • 超实用!聊聊标签式导航的设计思路(附设计师做笔记方法)

    现在文章基本上都不深入,只是点到某个知识,跟大家说个理论的东西,然后罗列出所有导航的形式。读者看了之后跟没看是一样的,遇到问题还是没法解决,只知道有这类导航存在而已。今天这篇详细地讲了关于标签类导航的几个知识点,希望可以帮助大家在工作中更好的运用。

    2017-05-21
  • 交互设计规范分享:页面信息展示、信息交互和通用组件规范

    本规范按web交互属性分三个部分:页面信息规范、信息交互规范、通用组件规范。

    2017-05-19
  • 交互设计师的60日计划之第十一天

    今天又是上下午都有会,下午还感冒了…差点忘记写每日,要睡了突然想起来,就拿用研小总结凑个数吧。 20150806 及时给出反馈结果 用户的一些基本特点比起用户体验更注重功能,期望能有更多的功能。开发人员学习能力…

    交互专题 2015-08-20
  • 决战双11,哪些技巧可以让你的专题页设计脱颖而出?

    这是小编见过讲双十一专题设计的最完整最有帮助的文章,我只是看了十遍而已。“以前有个同事她说要减肥要健身
    我说好啊看你能坚持多久
    因为我也好几次喊过这种话
    最后却都不了了之了
    可是几个月后再看到他
    细腰美臀大长腿
    显得更加自信了
    是啊她总可以做到付诸行动
    而我只会给自己找借口
    也许再这样下去
    我都配不上和她做朋友了吧”全场5折起/全场买三免一/1元秒杀0元抢购/周年钜惠等等

    争做行业领跑者/先赚它1个亿/上天猫就购了/好物低价上京东等等热烈庆祝XXX成立几周年/欢迎XXX领导莅临我司/恭喜XXX荣获XXX称号乘年轻,住好点/Just Do It/我的青春我做主/你值得拥有bigger than bigger/again and again/more and more(完全不知所云但是看起来很厉害的样子的文案,超级大牌都爱用。。)老板跑路了/美工甩手不干了等(歪瓜出品,我后面会再提到,因为它简直是电商设计界的一股泥石流。。)改变食界,条条是道-卫龙买了就是朋友-故宫淘宝“那么,我去当香葱烤鸡肉串去了”“啊!要是把早上下的蛋也带来就好了”“我可不能在这种地方被吃掉”“您好,您的食材到了”保湿护肤一步到位/棉柔舒适超强吸附力/轻松舒适不变形等等,常用于详情页里

    2017-05-16
  • Axure官方教程中文版第2课:页面操作-木卫艾欧网原译

    Axure真正的官方教程,入门必备,木卫艾欧独家翻译,免费!

    2015-01-05