移动App中的输入框设计

移动设备在用户体验设计面前有许多挑战。一个最明显的挑战是在有限的屏幕空间中处理输入。而对产品设计师、开发人员和产品经理来说,能够理解为用户使这个过程很简单的方法则是非常关键的。

本文强调了能够提升数据输入的三个主要因素,分别是加快输入,为用户提供帮助和说明,以及直接指出问题。

一、输入

1、按输入类型匹配键盘

App用户欣赏那些能够提供一个适当的用来输入的键盘。不像物理键盘,触摸键盘可以被充分利用在用户需要输入的每个表单项上,而且输入框的类型决定了哪种字符可以显示其中。你应该优化的常见的输入类型有:

数字型:电话号码,信用卡号码,

文本型:专有名词,用户名

混合型:邮件地址,街道地址,搜索词条

确保这个匹配是持续应用在整个应用程序中,而不是只对特定的任务。

2、适当的配置自动大写

适当的设置自动大写对移动表单输入框的可用性是很重要的。如果区域设置要求,那么每个文本框的第一个字母应该大写,每句话的第一个字母也是。这对以下这样的输入框尤其相关:

问名字的地方,如用户的姓和名

包含句子的信息,比如短信

无论如何,你不应该使用自动大写在邮件地址输入时,因为当它作用时,用户可能返回并删除第一个大写字母,他们担心电子邮件发送产生问题。

3、词典弱时不要开启自动矫正功能

当用户注意到不好的自动矫正时,他们会很失望,而当他们注意不到时,可能会彻底的出错。自动矫正功能通常在缩略语,街道名称,邮件地址,人名以及其他不在词典中的词组中表现很差。

Amazon老版本的移动app在地址输入框中有自动矫正功能,导致原本有效的地址被自动覆盖。

这种情况常常发生是因为用户一般注意在他们正在输入的内容而非他们已经输入了哪些。在地址信息场景下,这就导致有效的地址被自动矫正成无效的并且被提交,因为用户没有注意到自动矫正功能。

4、固定的输入格式

不要使用固定的输入格式。使用固定输入格式的最常见原因是验证脚本的缺陷(你的后台系统不能决定它需要的格式)。在大多数情况下,这是产品开发的问题,而非用户的。不像在输入如手机号这样的内容时限制格式,你应该尽可能的转换用户输入的任何格式到你希望显示或储存的格式。

5、默认值和自动完成

你应该对经常被选项做出预期,为用户提供智能默认值或者基于先前数据的提示来简化用户在数据上的输入。比如,你可以根据用户的地理位置数据来事先帮他们选定·国家。

这个方案可以和能够明显加快用户行为的自动完成功能配对使用。自动完成提供了实时的建议或在下拉列表中显示完成后的效果,所以用户可以更加准确和有效的输入信息。它对那些只有有限文字素养或有拼写困难的用户尤其有用,尤其是如果他们使用非母语。


二、标签和帮助信息

用户想知道在一个输入框中应该输入什么类型的数据,一个清晰的标签是让你的UI更加易于理解的最主要方法之一。标签告诉用户这个输入框的目的,且在用户将焦点放置输入区域中时应持续有效,甚至在输入完成时同样有效。

你也可以在输入框中提供有用的说明信息。有相关的语境信息能够使用户更容易的通过这一步。

1、单词数的限制

标签不是帮助文本。你应该使用简明的,短的,描述性的标签(一两个单词)来使用户快速的浏览你的文本框。

如果你需要更多的输入框的信息,帮助信息是一个很好的方法来消除用户困惑和可能面对的错误。

2、简单的语言

使用跟你的用户一样的语言。未知的术语或词组将会增加用户的认知成本。清晰的沟通与功能应该始终优先于专业行话和品牌标语。

3、行内标签

行内标签(或占位符文本)对于简单地如用户名和密码输入框来非常有效。


但对于屏幕上显示超过2个文本框的情况,行内标签则不是独立文本标签的一个好的取代方案。虽然它很流行,看起来也还不错,但实际上它有两个很严重的问题:

一旦用户点击了输入框,标签就消失了,这样用户就不能二次检查他们输入的内容是不是他们应该输入的类型。

当用户看那些已经写在文本框的内容,他们可能会认为它以被填写并因此忽略它们。

解决这种占位符标签的方法是使用漂浮标签,当用户选取了文本输入框,漂浮标签移动到输入框上面。这样,可以保证用户填入正确格式的内容。

4、标签颜色

标签的颜色应该反映你的app的调色板,同时满足适当的对比度(不应该太亮或太暗)。

三、校验

输入框校验意味着跟用户会话并指导他们纠正错误和不确定性。这个过程的输出是情感,而不该是技术。一个最重要的不为人喜欢的数据处理过程就是错误处理。犯错误是人的天性,你的输入框可能并不能免除人为错误。如果做得好,校验可以把一个模棱两可的互动变成一个清晰的。

1、实时校验

用户不喜欢当他们经历了输入在提交数据输入才发现,他们犯了一个错误。正确通知用户数据的成功/失败的时间应该是提交后立刻呈现。

实时的行内校验迅速的告诉用户数据的对错。这种方法允许用户更快的改正错误而不是非得等到他们按下提交按钮的时候再看到错误。使用一个对比性的颜色来表示错误状态,如暖色调红色或橘色。

校验不应该只告诉用户他们哪里错了,也应该告诉他们什么时候对了。这就给了用户更多的信心来通过这一步。


2、明确的信息

对比如用户的疑问“刚刚发生了什么?为什么发生”,系统应该给与直接的回答。你的校验信息应该明确状态:

错哪了,大概是为什么;

要修正这个错误用户下一步应该做什么;

再次强调,应该避免使用技术行话。规则很简单,但他们很容易忽视。

3、正确的颜色

颜色是设计校验校验时所使用的最好的工具之一。它按照我们的本能认识起到难以置信的作用,红色来表示错误信息,黄色表示警告信息,绿色表示成功。下图就是一个密码输入框校验的很好的例子:


另外一个使用颜色的很好地例子是文本输入框的字符限制。字符数和红线表示已经超出限制。


但是别只依赖于颜色来表示校验信息。一定要确保用户界面是可以理解的,这是执行视觉设计很重要的一个点。

四、结论

你应该使数据输入尽可能更简单。即使如自动大写或在每个输入框显示帮助信息这样小的变化,都可以显著提高输入框的可用性和整体的用户体验。深入思考下用户实际如何使用你的应用程序输入信息,并确保你在设计APP时没有遗漏掉一些明显的注意事项。

译自:https://uxplanet.org/text-fields-in-mobile-app-11d41f13e31#.x3c4fqbzx

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,530评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 86,403评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,120评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,770评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,758评论 5 367
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,649评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,021评论 3 398
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,675评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,931评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,659评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,751评论 1 330
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,410评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,004评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,969评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,203评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,042评论 2 350
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,493评论 2 343

推荐阅读更多精彩内容

  • 公司实在找不到新文章发布,只能弱弱地滚去翻译,所以作为一个英语渣和ux初学者,新翻了一篇,orz翻墙也好累,以下为...
    ElizaSSSS阅读 3,514评论 3 14
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,434评论 25 707
  • 从坟地怎么走回去的,云姑不知道,她好像一具抽空了灵魂的僵尸,木然地坐在地下。 她的天塌了,丈夫四喜挖矾石被坍塌的土...
    荆芥草阅读 919评论 1 8
  • 中秋节,却没有放假。这是出来工作的第一个中秋节。一个没有节假日的工作,我曾经都没有想过,所以也就没那么难以接受。可...
    f9f1de48dc41阅读 199评论 0 1