产品经理的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

相关推荐

  • 用户体验至上?也许并非如此 | 动点圆桌会

    动点科技 | ID:technode大家晚上好,我是动点君~近日,有网友反馈,微信朋友圈疑似屏蔽抖音短视频的内容,内容仅本人可见。但当晚24点之后,抖音小视频的内容分享到朋友圈又恢复了“所有人可见”。对于网友反映的这件事,微信团队已经做出了回应。腾讯公关总监张军发微博称:“朋友圈一直有防刷频机制,过了阀值就自动不可见了。过了凌晨12点自动恢复正常。屏蔽之说不存在哈。”虽然微信方面对网友的这一质疑做出了否定的回应,但是竞争平台疑似屏蔽竞品...

    2018-03-26
  • 当我们在讨论用户至上的时候,我们在讨论什么?

    用户价值=用户收益-用户成本用户价值=用户收益-用户成本-机会成本机会成本=备选产品用户收益-备选产品用户成本。

    2017-05-31
  • 提问:用户体验设计师、UI设计师和交互设计师有什么区别?

    在知乎上看到有人提问:“用户体验设计师、UI 设计师和交互设计师有什么区别?”因为他发现有公司同时有以上 3 种或两种职位,不知道具体区别是在什么地方。薛天禄给出的回答很赞,如果你也不清楚这三者之间的区别,…

    交互设计 2015-01-07
  • 在新用户引导流程中,如何用好空状态界面?

    今天的文章,我们将会提供一些使用空状态来优化新用户引导的策略和技巧。

    2017-05-01
  • 应届毕业生要从事交互设计,需要具备的3种能力

    这次的文章解决的是一个问题,主要是关于应届毕业生应该具备怎么样的能力才能从事交互设计工作。我从比较浅的入口切入,然后简单谈谈我的认识。(这篇文章会比较有趣)我努力工作,几年后要自己创业。吃得苦中苦,方为人上人。(鸡汤了一下)

    2017-05-08
  • 6周锻造1名优秀的产品设计师

    金牌讲师: 杨老师(某大型央企交互设计主管,前网易、腾讯交互设计师) 从业7年多的交互设计老司机; 出身北邮设计艺术学硕士专业,经历网易、腾讯及某大型央企设计部门锤炼; 开课至今,已经培养了近100多名优秀…

    交互专题 2017-08-07
  • 用户体验设计中最常见的误解

    UX Myths网站收集了很多关于用户体验设计中最常见的误解和解释了为什么他们不适用。现在将这些经验研究整理出来,为各位设计从业者做参考,避免依赖个人的主观经验来做判断。建议你阅读完之后,还是应该结合自身的经验来审视你的设计是否满足用户的需求。

    2017-05-25
  • 【颜值已爆表】00io.com-盘点2014最精彩的移动APP动画UI

    原文导读: On the third day of The Highlight 2014, we’re bringing you our picks of some of the best UI animations we’ve seen in apps and across the web. Apps have been a UI playground for quite some …

    2015-01-14
  • 朋友圈被天猫双11邀请函刷屏了?我们和它的创作者们聊了聊

    从2008年开始,每年临近11月11日,全国——现在可能是全球——的剁手党们都在等着看马云爸爸和天猫又能玩出什么新花样。今年除了史无前例的整整49张品牌海报以及4个版本的“主题大片”之外,天猫的小伙伴们居然连一封小小…

    2016-10-25
  • 2016年最值得关注的16个网页设计趋势

    设计趋势每年都在改变,出于各种原因,有的设计趋势在演进中逐渐消失,有的则在大家的熟练运用过程中渐入佳境,甚至逐步褪变成为主流。作为一个专注于网和平面设计的设计机构,我们对于所有相关的技术和设计趋势都…

    2015-12-23