一个体验好的文本输入,有点小忙...不过影响并不大优德亚洲w88官方网站

2020-02-06 01:20栏目:娱乐新闻
TAG:

用户:不好啦,电脑出毛病了!

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

我觉得再移动端的界面设计就好像是在刀锋上跳舞,不是一鸣惊人就是一败涂地,但这也是一种艺术!就像在火影中,每个人对艺术的追求是不一样的。
最近新项目启动,有点小忙...不过影响并不大,今天就来讲讲怎么移动端设计一个比较好的输入

客服:什么症状?

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

Text Field

不管在移动端还是PC端Text Field都是最常见也是最常用的一种输入方式,一个体验好的文本输入至少需要具备以下几种规则

  • 要能够让用户快速地完成输入
  • 在用户输入时为用户提供帮助和引导
  • 在用户出错的时候要提醒用户哪里错了,为什么错了

用户:我拨号上网,输入用户名的时候没有问题,可是密码的时候,我明明输入的是数字,可显示出来的是星星!!

优德亚洲w88官方网站 1

快速输入

如何快速才能快速输入?有很多种形式,我就举几个比较常见的例子

  • 在文本框需要输入的是数字的时候你应该弹出数字键盘而不是英文键盘或者是中文键盘,这一点在iOS的开发中做的是比较好的。

优德亚洲w88官方网站 2

正确姿势.png

  • 在输入的时候自动切换大小写,这种比较常见于密码输入框英文组合还有就是英文名字的输入,这就比较多应用于国外的注册啦

一.用户的输入
在移动端的UX设计有很多挑战,你需要在一个什么有限的屏幕大小下去处理各种输入。因此在设计的时候要能够让用户可以通过非常简单直观的方式去完成输入,并提供给用户完整但简洁的提示。
1.文本输入框
文本输入框(Text Field)最常用的一种输入方式。一个体验好的文本输入,要能够让用户快速地完成输入,在用户输入时为用户提供帮助、在用户出错的时候要能够让用户明白错在那里。
用户输入时,要求输入的数据类型应该和当前的键盘相匹配。比如要用户输入手机号码,那么焦点落到输入框时,弹出来的应该数字键盘。这样减少了用户切换键盘的麻烦。

引导用户输入

  • 缺省值提示可以帮助用户快速完成输入,这个缺省值可以是用户之前输入过的文本,或者系统提供的一些热门词汇。
  • 自动完成是在用户输入的过程里,根据用户的输入来给出建议,用户可以通过系统的建议来自动完成输入。

优德亚洲w88官方网站 3

Paste_Image.png

  • 输入提示,让用户知道这个Text Field输入的是什么样的值,是名称还是密码。这种比较常见的就是在文本框前面增加一个lable进行标注,也可以用Inline Label(弱提示);我个人时比较喜欢Floating Label来实现

优德亚洲w88官方网站 4

输入验证

用户是有可能输入出错的,系统应该给予用户及时的反馈——如果我做对了,请让我知道;如果我做错了,告诉我错在那里。
提示也应该有对提示的颜色区分,一般情况下,红色对应错误,绿色对应正确,黄色对应警告。

还有一个提升输入速度的方式那就是自动切换大小写,即首字母为大小,第二个字母开始为小写。这个适用于在英文的输入中,比如输入英文名,或者英文句子的首行。
提供缺省值和自动完成
缺省值提示可以帮助用户快速完成输入,这个缺省值可以是用户之前输入过的文本,或者系统提供的一些热门词汇。
自动完成是在用户输入的过程里,根据用户的输入来给出建议。用户可以通过系统的建议来自动完成输入。当然这依赖于系统建议的精准度。

优德亚洲w88官方网站 5

输入提示信息
用户在输入过程中应该给予用户足够多的帮助。这种帮助包括对输入项的解析,以及对输入信息的提示。同时,任何一个标题(Label)都应该是简洁明了的。
除了常规的在输入框左上角写明Label外,有一种简洁的做法是使用Inline Label。

优德亚洲w88官方网站 6

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

优德亚洲w88官方网站 7

输入验证
用户是有可能输入出错的,系统应该给予用户及时的反馈——如果我做对了,请让我知道;如果我做错了,告诉我错在那里。
给予用户的提示不应该中断用户当前的操作。不要用弹出框让用确认的方式,在恰当地位置(比如输入框下面)给出说明即可。

优德亚洲w88官方网站 8

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

优德亚洲w88官方网站 9

2.Radio按钮

优德亚洲w88官方网站 10

Radio按钮用于在用户有多个选项,但用户只能选择其中一个的时候。让用户进行有限选择,而非直接输入的方式,可以比较有效地减少用户输入错误的数据。
当需要用户进行设置的时候,使用Radio来让用户进行操作是一种比较好的做法。
在使用Radio的时候,需要注意的几个关键点是:
选项的排序应该按逻辑排列,不要简单地按字母顺序来排。当然有时候这个也有例外,比如在国家选择里,你要选择中国(China),在按字母顺序排列的选项了用户可以非常快捷地通过定位到“C”开头的选项来找到"China”。
选项的说明应该简短易懂,这个文案的功夫。
进行默认选择,以及None选项(在用户可以不选择的情况下)。

优德亚洲w88官方网站 11

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

优德亚洲w88官方网站 12

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

优德亚洲w88官方网站 13

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

优德亚洲w88官方网站 14

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

优德亚洲w88官方网站 15

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

优德亚洲w88官方网站 16

3.Slider滑杆

优德亚洲w88官方网站 17

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

优德亚洲w88官方网站 18

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

优德亚洲w88官方网站 19

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

优德亚洲w88官方网站 20

版权声明:本文由优德亚洲w88官方网站发布于娱乐新闻,转载请注明出处:一个体验好的文本输入,有点小忙...不过影响并不大优德亚洲w88官方网站