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

相关推荐

  • 选择极简主义风格做设计,不是没有道理

    极简主义设计并非万能的。但有一件事是肯定的,界面越简约,设计目标和针对性就越明显,而设计师要投入的时间和精力也越多。你并不需要更多的空间,你所需要的是更少的东西。

    2017-08-04
  • 产品经理和交互设计师两个职位到底是什么关系啊?

    产品经理不一定要从交互设计师开始做起的,产品经理其实对之前做什么职位要求并不严格,因为它更看重一个综合能力,例如做开发的如果做了产品经理,在代码层就会比较有优势,在做产品的时候这一部分可能就会把握的…

    交互设计WiKi 2015-01-25
  • 2018 阿里UCAN设计论坛会议纪要

    阿里UCAN设计论坛会议纪要 1.开幕词—张建锋 阿里巴巴首席技术官 1.1 UED的关键词 用户体验背景下ued未来的两个关键词是创意与智能。从产品的角度来说是与用户的交互和视觉表达,依赖于三个部分: 第一,信息架构的…

    交互专题 2018-04-24
  • 做 PD 还是 UXD ?我来告诉你

    本文作者将为你介绍PD与UXD,且讲述二者的关系。值得一阅。

    2017-05-05
  • 电梯按钮的交互设计

    开始注意和观察电梯的按钮面板,是因为觉察到自己因常乘的两部电梯设计细节方面的种种不同而陷入了混乱。电梯常常会和自己"想的不一样",即预设的或已建立的心理模型失效了,我们不得不重新审视电梯的操作面板,重新建立心理模型,找到对应的按钮。如果日常常搭乘几部电梯,它们之间的操作规则和心理模型还不一样的话,一是容易让人混乱,二则给人增加了记忆负担,实在是很麻烦。觉得这一小块可操作区域很有趣很值得分析之后,好奇之下找了不少图进行研究,五花八门的设计...

    2018-02-06
  • 精益设计,敏捷开发,一个都不能少

    Agile UX 和 Lean UX,即两种软件开发方法在设计领域的应用。敏捷用户体验注重产品设计中人员交流,软件交付及开发的高效,而精益用户体验则以人为核心,注重产品与市场的匹配度。两种方法各有优缺点,但同样重要。

    2017-04-30
  • 为了更好的用户体验,谷歌拿出了“大棒”与“胡萝卜”

    点击关注36氪,置顶公众号专业的行业新闻及深度报道,不容错过━━━━━━这是著名分析师Ben Thompson对谷歌近期宣布的一组数据的评论,原标题为“THE AGGREGATOR PARADOX”以下为谷歌宣布的这组数据:现在共有3100万个网站加入了加速移动页面(AMP)计划,自去年10月以来增长了25%。在2月的第1周,谷歌向出版商发送了4.66亿个页面浏览量——比2017年1月增加了近40%。我们希望通过这样一篇文章,来带你了解...

    2018-02-27
  • 十二条动效体验原则

    如果你想要了解更多背景信息,建议先阅读我的前一篇译文《动效的基本常识》,其中介绍了动画与动效的差异、即时与非即时的定义、动效提升可用性的四种方式(可预期、连续性、表述性、关联性)、以及理论、手段、属性与值之间的关系。

    2017-04-28
  • Axure用的溜,并不代表你就能成为一个产品经理

    作者:杨俊全文共 2497 字,阅读需要 5 分钟—— BEGIN ——当你在人人都是产品经理上搜索“Axure”时,会有98页的结果。在知乎以及其它一些产品经理相关的网站上,也总是能够看到诸多Axure的使用问题和经验分享。但是,作为一个产品经理确实是需要会使用Axure的,但你使用Axure并不代表你就能成为一个产品经理。用户体验五要素在《用户体验的要素》中提到的五要素,自上而下分别是:战略层、范围层、结构层、框架层和表现层。当你能...

    2018-03-04
  • 用户体验才是真正的“一句顶一万句” 安徽燕之坊食品公司用勤哲软件实现生产、经营和管理数据的互联互通

    统计数据显示,截止2017年底,国内食品工业企业超过4万家,主营业务收入占全国工业的比重十分之一强。在实施制造强国战略和推进健康中国建设中,食品工业作为传统的“以食为天”的民生产业占据着不可或缺的重要位置。当前,食品行业在实现快速发展的过程中,面对城乡居民安全、多样、健康、营养、方便的食品消费需求时,与其他行业一样面临着转型、升级的动能和压力。尤其是在食品质量安全水平和高品质食品有效供给方面,利用现代信息技术创新消除安全和质量隐患等领域...

    2018-02-11