「用户体验设计」如何设计移动端的文本输入框

依据移动设备的ux规划有许多难点。其中大的规划应战之一是在有限的屏幕空间上处理点击输入的疑问。关于ux规划师、开发人员和商品司理来说，让这个进程变得易于用户运用就显得至关主要。

创新互联论述了进步数据输入体会中的三个关键因素--速度(进步输入速度)、引导(为用户输入供给引导协助)，反应(直接有效地指出用户输入进程中的疑问)。

输入

依据不一样的输入信息匹配适宜的键盘

用户都偏爱那些依据输入内容供给了适宜键盘的运用。咱们能够依据输入框的类型优化虚拟键盘，这是实体键盘不能做到的。常见输入内容的类型包含：

? 数字：电话号码、信用卡号码，PIN码

? 文字：准确的姓名、用户名

? 混合输入：电子邮件地址、大街地址、查找关键词

请保证这种匹配键盘的规划在全部运用中是一致的，而不是只是用在了某些当地。

图1左：用户需求点击123键来切换键盘类型以便运用数字键盘

图1右：咱们应当为需求输入数字的文本区域主动匹配适宜的数字键盘

合理运用主动大写功用

合理运用主动大写关于进步移动端表单的可用性来说至关主要。每个文本输入框的首字母和及每句话的首字母应当主动大写。这格外适用于以下两类输入区域：

? 给某信息命名，比方用户的姓和名。

? 包含语句式的信息，比方短信息文本。

不过，当咱们输入电子邮件地址时，应当禁用主动大写功用，当用户发现邮箱首字母大写时，常常会退回去将大写字母删掉，由于他们忧虑这么会让邮件发送发生疑问。

图2

当词典欠好用时封闭主动纠错功用

主动批改这个功用通常使大多数用户绝望，乃至当用户没有留意到的时分，它会显着损伤用户。主动纠错功用关于以下这几种信息更是收效甚微：例如缩写、大街称号、电子邮件、人名、以及词典里没有呈现过的词汇。

旧版本的亚马逊手机app在文本输入框中运用了主动修正形式，本来准确的输入反而被主动纠错的内容替代了。

图3

这种状况常常会发作，由于用户通常更重视他们正在输入的内容而不是已经输入的内容。假如输入的内容是地址类的信息，主动修正功用会悄然篡改本来准确的输入内容，用户很难留意这点。

固定的输入形式

不要运用固定的输入形式。运用固定款式的最常见的理由是脚本校验约束。(后端也许不能判别用户输入的格局)。可是大多数状况下，这是开发者的疑问，不应当让用户买单。你应当想方法将用户的输入转化成能够存储或显现的格局，而不是强迫用户输入固定的格局。

图4左：数据输入框的款式符合常规(把电话号码分割成三个输入框)，其他表单被键盘遮挡

图4右：输入框支持输入灵敏的内容，而且输入完结后主动进步以便不会被键盘遮挡

默认值和主动完结

规划师们通常期望依据用户的历史记录为他们供给预设的默认值和提示语，然后运用户更快捷地输入信息。比方，能够依据用户所处的地理位置信息预设国家地区。

这种规划方法假如与主动完结功用合作运用，能够明显进步用户输入的效率。得益于主动填充供给了实时性的输入主张或是能够挑选一项内容来完结输入的下拉菜单，用户能够更精确高效地输入信息。关于那些读写能力欠安、拼写艰难、格外时运用非本国语言的用户来说，这具有很高的价值。

图5：供给了查找主张的文本域

标签和有用的信息

当用户在输入框输入信息时，他们想知道所输入信息的类型，供给明晰的标签文本是一个使UI更具有可用性的好方法。标签奉告用户文本框的意图，当输入框取得焦点时发挥作用运用户即便输入完信息后，依然保证对输入框的重视度。

你也能够依据输入框的上下文供给有用的信息。相关的上下文信息能协助用户更简便地完结任务。

标签长度约束

标签并不是协助信息。咱们在规划中应当运用简洁的、短的具有描述性的标签(1-2个)，好让用户能够迅速阅读一切的输入框的需求。

图6：输入框的标签是 ‘电话’、’入住’、‘退房’

假如你需求更多关于输入框的信息，提示文本能够协助用户免除迷惑、并防止犯错。

图7：‘PHONE’文本框下方的信息是协助文本

简略的案牍

规划用户易于了解的语言。表意不明的术语和语句会给用户添加认知担负， 明晰的交流和功用应当一直优先于专业的术语。

图8左：冷僻的案牍会迷惑用户

图8右：明晰易懂的术语易于用户了解

输入框内的提示信息

页内标签(也叫占位符文本)适用于简略的输入框，比方用户名和暗码。

图9

当屏幕中存在多于两个输入框时，关于那些分离隔的文本标签，行内标签就不适用了。尽管他们看起来整齐有序，但存在两个严峻的疑问：

? 当用户点击了输入框，行内标签就会不见，所以他们不能再查看所输入的内容是不是准确

? 当用户在输入框中看到提示文本，他们有也许认为这个文本框已被预填成功然后疏忽它。

一个处理占位符文本的好方法是--起浮标签。 当用户填写当时某文本框时，行内标签即起浮到文本框顶部。

图10

留意：不要过于依靠占位文本和标签。由于一旦在输入框里输入内容，占位文本就无法被看到了。能够运用起浮标签，这么能够运用户随时承认他们填写的内容是不是准确。

标签色彩

标签的色彩应当与全部运用的色彩匹配，并坚持适宜的对比度(不应当太亮或太暗)。

图11

校验

输入框校验意味着给用户反应并引导他们改正过错，消除用户的疑惑。这个校验的成果应当是人性化的而非像机器般冷冰。数据处理进程中最主要也是最简略让人累觉不爱的当地是过错处理。犯错是人类天分，咱们在填写输入框时也不可防止。假如规划妥当，校验能够使本来表意不清的交互做法变得明晰易懂。

实时校验

当用户在输入数据的进程中，他们不喜欢在最终提交时才发现自个犯了过错。准确的做法是，咱们应当在用户刚刚刚填写完某条信息后就马上奉告他是不是准确。

实时的页内校验能够马上奉告用户他们输入的信息是不是准确。用户能够更快地修正过错，而不必等到按下提交按钮后才知道哪里错了。规划师能够给过错案牍界说鲜明的色彩，比方赤色或许橙色这种暖色调。

图12左：表单输入内容直到点击提交后才报错，而且过错信息在输入框以外

图12右：输入框下方实时显现了过错信息

校验不只应当奉告用户过错，还应通知他们怎么做才是准确的，用户才会更有决心完结输入进程。

图13

明晰的信息

用户时常有这么的迷惑“刚才发作了啥?为啥会这么?”。此刻应当供给一个直接了当的答案。因而校验信息应当明晰地阐明：

? 过错是啥以及也许发生过错的因素

? 用户下一步应当做啥来改正过错

再次重申，防止运用机械性的术语。这条规矩看起来很简略，可是有时却很简略被疏忽。

适当的色彩

当规划校验信息时，色彩是一个可利用的好工具。依据常规，赤色表明过错信息，黄色表明正告信息，绿色表明成功，这些方法很见效。下图是一个校验暗码输入框的好事例：

图14

另一个运用色彩的优异事例是对文本输入框做出字数约束。赤色的字符计数器及赤色下划线阐明该输入框字数已超限。

图15

界面中色彩的运用应当符合用户认知，这是衡量优异视觉规划的主要规范之一。

小结

咱们的规划设计应当尽也许让用户更快地完结信息录入。即便像是首字母主动大写或给每个输入框供给合理的指示这种简略的方法都会大大进步输入框的可用性。规划师应当多思考用户输入时的实在运用做法然后在规划时保证没有忽略某些主要的信息。

新闻标题：「用户体验设计」如何设计移动端的文本输入框
本文路径：/news10/167960.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有用户体验等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联