如何设计移动端的文本输入框？.pdfVIP

如何设计移动端的文本输入框？ 基于移动设备的 ux 设计有很多难点。其中最大的设计挑战之一是在有限的屏幕空间上解决点 击输入的问题。对于 ux 设计师、开发人员和产品经理来说，让这个过程变得易于用户使用就 显得至关重要。 本篇文章阐述了提高数据输入体验中的三个关键因素－－速度（提高输入速度）、引导（为用户输 入提供引导帮助），反馈（直接有效地指出用户输入过程中的问题）。 输入 根据不同的输入信息匹配合适的键盘 用户都偏爱那些根据输入内容提供了合适键盘的应用。我们可以根据输入框的类型优化虚拟键盘， 这是实体键盘不能做到的。常见输入内容的类型包括： 请确保这种匹配键盘的设计在整个应用中是统一的，而不是仅仅用在了某些地方。 图1左，用户需要点击 123 键来切换键盘类型以便使用数字键盘 图1右，我们应该为需要输入数字的文本区域自动匹配合适的数字键盘 合理使用自动大写功能 合理使用自动大写对于提高移动端表单的可用性来说至关重要。每个文本输入框的首字母和及每句 话的首字母应该自动大写。这尤其适用于以下两类输入区域： 不过，当我们输入电子邮件地址时，应该禁用自动大写功能，当用户发现邮箱首字母大写时，常常 会退回去将大写字母删掉，因为他们担心这样会让邮件发送产生问题。 图2 当词典不好用时关闭自动纠错功能 自动修正这个功能往往使大多数用户失望，甚至当用户没有注意到的时候，它会明显伤害用户。自 动纠错功能对于以下这几种信息更是收效甚微：例如缩写、街道名称、电子邮件、人名、以及词典 里没有出现过的词汇。 旧版本的亚马逊手机 app 在文本输入框中应用了自动修改模式，原本正确的输入反而被自动纠错的内 容代替了。 图3 这种情况经常会发生，因为用户往往更关注他们正在输入的内容而不是已经输入的内容。如果输入 的内容是地址类的信息，自动修改功能会悄悄篡改原本正确的输入内容，用户很难注意这点。 固定的输入模式 不要使用固定的输入模式。使用固定样式的最常见的理由是脚本校验限制。（后端可能不能判断用 户输入的格式）。然而大部分情况下，这是开发者的问题，不应该让用户买单。你应该想办法将用 户的输入转化成可以存储或显示的格式，而不是强迫用户输入固定的格式。 图4 左，数据输入框的样式符合惯例（把电话号码分割成三个输入框），其余表单被键盘遮挡 图4 右，输入框支持输入灵活的内容，并且输入完成后自动提高以便不会被键盘遮挡 默认值和自动完成 设计师们往往希望根据用户的历史记录为他们提供预设的默认值和提示语，从而使用户更便捷地输 入信息。比如，可以根据用户所处的地理位置信息预设国家地区。 这种设计方法如果与自动完成功能配合使用，可以显著提高用户输入的效率。得益于自动填充提供 了实时性的输入建议或是可以选择一项内容来完成输入的下拉菜单，用户可以更精确高效地输入 信息。对于那些读写能力不佳、拼写困难、特别是使用非本国语言的用户来说，这具有很高的价值 。 图5 ，提供了搜索建议的文本域 标签和有用的信息 当用户在输入框输入信息时，他们想知道所输入信息的类型，提供清晰的标签文本是一个使 UI更具 有可用性的好办法。标签告知用户文本框的目的，当输入框获得焦点时发挥作用使用户即使输入完 信息后，仍然保证对输入框的关注度。 你也可以根据输入框的上下文提供有用的信息。相关的上下文信息能帮助用户更简便地完成任务。 标签长度限制 标签并不是帮助信息。我们在设计中应当使用简洁的、短的具有描述性的标签（ 1-2 个），好让用户 可以快速浏览所有的输入框的需求。 图6 ，输入框的标签是 电话‘ ’、 ’入住 ’、 退房‘ ’ 如果你需要更多关于输入框的信息，提示文本可以帮助用户解除困惑、并避免犯错。 图7， ‘phone文本框下方的信息是帮助文本’ 简单的文案 设计用户易于理解的语言。表意不明的术语和句子会给用户增加认知负担， 清晰的沟通和功能应该 始终优先于专业的术语。 图8 左：生僻的文案会迷惑用户 图