什么样规划好的文本框:明确性,易理解性以及用户承担

原作者:Nick Babich  翻译者:Puddinnng

按部就班学科为翻译课程,原文地址为:

http://babich.biz/designing-perfect-text-field-clarity-accessibility-and-user-effort/


App
大多靠用户输入的文来显示内容之。因此产品设计师,开发人员以及产品经营需要掌握什么样吃用户还通畅地输入文字。

正文通过研讨文本框,致力为找有提升数据输入流畅性的关键因素。不过如果明了这些就是平凡的指南,而备的工作都生差。

文本框

同意用户输入小段文字的基本功文本控件叫做文本框。无论你试用什么
app,你总会碰到有些需输入个人信息的文本框。就算是在 Google
中输入问题,也正是在填充充文本框。

明确性

大庭广众的文标注

利用明确的文书标注,是告用户该以输入框中输入什么内容的严重性手段。当然有些上,用户可以靠图标来鉴别文本框的含义(举个例子,就算没字标注,你啊会用放大镜图标识别为“搜索”的意吧),但多数情形下,还是当输入框中提供一个显而易见可见的标注比较好。

Bootstrap 1

iOS中的搜索栏同时包括放大镜图标与扎眼的标注

分明的标能为用户觉得温馨硬棒哒,因为他们不但对地亮了音讯,还动用了天经地义的作为。

简简单单的仿标注

标并无是协助文本。你应当利用简明、简短且所有描述性的亲笔(一要么个别单字),这样用户一眼便能看清。如果实在要再行多之信息要解释内容的语,请动帮助文本一经不是长的号。

amazon以前的报到表格版本,包含了剩余的亲笔,导致了比逊色的完成率。目前之本子好多了,标注为再次少。

妥的文本框尺寸

只要您想规划还易于读,也重易吃用户知道,那么根据用户或输入内容之长短,来支配输入框的尺码吧。但还要文本框要够大,这样大部分输入的价值都能够显出。

让输入框显著

当用户点击或轻触输入框时,务必用醒目的视觉提示来报他们,这个输入框目前叫选中了。也许是移颜色,也许是为输入框变暗,或是闪烁标志,无论什么都可以。

Bootstrap 2

亚马逊的登记表单就也用户提供了怪好的视觉线索。你可知只顾到“邮箱”这同牢目前凡选中状态。

输入格式提示

数发生强格式。你自要准备给输入框与用户即将输入的始末相互兼容。但落实起来并无容易。

比如,就连电话号码这么简单的数码,都发生强输入方式(加区号的,不加以区号的,中间产生“-”符号分割的,或者什么还未曾底)。你能透过显示点,示例或者小提示的章程来告诉用户应输入哪种格式的电话号码。下面的事例就是解决方案有:

-输入手机号的文本区域可以是跟设定好格式的。这样尽管能排用户以输入时或者有的疑惑。

-输入框中的占位符同样也会看做简短的描述和格式示例。不过这种措施的缺点是,用户输入内容经常,它们会破灭。

帮助性信息

帮助性信息(或者附加文本)应该只有在需要之时节才起,例如解释为什么要信用卡信息,或者生日信息会咋样被运,再或者链接到“说明与附加条款”。这是种消用户或会见产生的迷惑的好方法。不过,解释信息极不要超过100字。

Bootstrap 3

关于“手机号”和“入息时间/退房时”的粗略解释信息点用户继续操作。

手机特有的图景:让键盘与需输入的仿相兼容。

当弹出之键盘和即将输入的价值相匹配时,用户会对 app
充满感激。下面的事例中,用户要输入信用卡号(数字),那么就算当弹出数字键盘。

好掌握性

目标:让各种类型的用户都能输入地概括。

避免大写标注

世代都休想动全大写。字体高度一样之后,会难以辨认。

大写的文字还难阅读的由是,它们都是长方形的。而用户不惯以这种艺术读字母:

Bootstrap 4

清一色怪写的标阅读起来老讨厌

文字大小

言尺寸要足够识别。比较安全之选择是,正文使用16px尺寸。字体的大小由页面内容来决定,当您切莫确定以什么尺寸时,那就算选择十分一部分底。

Bootstrap 5

号颜色

号的水彩应该由 app
主色调决定,同时也要吻合自然对比度比例(不能够最好亮吧无克顶暗)。万维网联盟建议正文文本应满足以下的针对性比度比例:

-较小之公文和背景颜色之间起码要发出4.5:1底针对性比度比例。

-较充分的文应该同背景颜色之间来最少3:1之对比度比例。

Bootstrap 6

标明和背景的颜料要显著的不等。

提供好点击的区域

马上年头,大家非常可能是当可点击设备及采取输入框。当设计手机界面时,最好于对象区域足够好,便于用户点击。通常认为45-57px轻重缓急的触摸区域便于用户点击,但每当大哥大及显示时,它们常大得愚蠢。将输入区域之莫大设置以32px到40px内,就能够就确保好点击,又不会见看起最非常了。

Bootstrap
3中默认的输入框高度是34px,这是单适合的莫大。要包用户便于点击,输入框不应小于这个高度。

Bootstrap 7

Bootstrap用户承担

目标:太小化用户的输入量

智能默认值

在输入框输入内容未是件有意思的作业。因此,你得经为用户着想好最常点选的挑项,来吃用户输入数据易得简单。为了吃输入变得再简约,你可提供一些预设值,这些预设值可以依据其它消息(例如,根据邮编来揆度地区)计算出来,或是根据以前输入的多少来发。

依,根据用户之 ip 地址预先选择用户的国家。WhatsApp
是一个吃输入手机号特别容易的 app 。如果您自美国报到这个 app
,国际代码会根据地面活动填写。

Bootstrap 8

机动就与机动建议功能

活动完成功能以下拉选择框中提供实时建议,所以用户会还准确实用地输入信息。这对读写能力有限,或拼写有不便的那片用户来说更加要,特别当她们以非母语时。

活动建议功能的目的,是显得一个有所相关重要词与短语的清单,当自动完成功能帮助用户补全了一个原生短语后,自动建议功能列有了多数原生短语可能的变。

适宜的机关完成与活动建议功能显著地加速了用户的所作所为。Google
以采取就简单单力量来啊用户提供反应快的搜体验。

Bootstrap 9

结论

您当保证输入数据的长河尽可能的简易。改变帮助文本,或输入区域外之标号信息这样的更动也许那个薄,却能强烈地增强输入区域的可用性,以至提升所有用户体验。

谢张!

相关文章