Bootstrap哪些筹划精良的文本框:鲜明性,易通晓性以及用户承担

原作者:Nick Babich  翻译者:Puddinnng

本学科为翻译课程,原文地址为:

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


App
大多信赖用户输入的文字来展示内容的。因而产品设计师,开发人士以及产品经营必要知道哪些让用户更流畅地输入文字。

正文通过钻探文本框,致力于找出提高数据输入流畅性的关键因素。不过要理解那一个只是日常的指南,而全体的事体都有两样。

文本框

同意用户输入小段文字的功底文本控件叫做文本框。无论你试用什么
app,你总会遇到一些内需输入个人信息的文本框。就终于在 谷歌(Google)中输入难点,也不失为在填充文本框。

明确性

肯定的文字标注

使用分明的文书标注,是报告用户该在输入框中输入什么内容的最主要手段。当然有个别时候,用户能够凭借图标来甄别文本框的意义(举个例子,固然没有文字标注,你也会将放大镜图标识别为“搜索”的趣味啊),但多数动静下,依旧在输入框中提供三个肯定可知的标注比较好。

Bootstrap 1

iOS中的搜索栏同时总结放大镜图标和强烈的标号

明晰的标号能让用户觉得温馨棒棒哒,因为他俩不仅正确地掌握了音信,还动用了天经地义的一颦一笑。

简单的说的文字标注

标明并不是扶助文本。你应当利用简明、简短且独具描述性的文字(一或四个字),那样用户一眼就能看清。要是实在供给越来越多的新闻或许解释内容的话,请使用帮助文本而不是顾后瞻前的标注。

amazon之前的记名表格版本,包括了剩余的文字,导致了较低的完结率。最近的版本好多了,标注也更短。

适龄的文本框尺寸

借使你指望规划更易读,也更便于被用户知道,那么依照用户大概输入内容的长度,来支配输入框的尺寸吧。但与此同时文本框要丰裕大,那样超过三分一输入的值都能显得出来。

让输入框明显

当用户点击或轻触输入框时,务必用醒指标视觉提醒来报告她们,这几个输入框如今被入选了。可能是改变颜色,恐怕是让输入框变暗,或是闪烁标志,无论什么都得以。

Bootstrap 2

亚马逊(Amazon)的挂号表单就为用户提供了很好的视觉线索。你能只顾到“邮箱”这一栏最近是选中状态。

输入格式提醒

数码有种种格式。你当然要准备让输入框与用户即将输入的始末相匹配。但落到实处起来并不易于。

譬如说,就连电话号码这么不难的多寡,都有三种输入方式(加区号的,不加区号的,中间有“-”符号分割的,可能怎么着都尚未的)。你能经过呈现教导,示例或许小提示的法门来告诉用户应该输入哪个种类格式的电话号码。上面的例证正是消除方案之一:

-输入手提式有线电话机号的文书区域能够是以及设定好格式的。那样就能祛除用户在输入时恐怕有些疑忌。

-输入框中的占位符同样也能同日而语简短的描述和格式示例。然则那种方式的短处是,用户输入内容时,它们会消亡。

帮忙性消息

支持性消息(或然附Gavin本)应该只在急需的时候才现身,例如解释为何必要信用卡消息,只怕生日信息会怎样被使用,再恐怕链接到“表明和叠加条款”。那是种化解用户恐怕会生出的思疑的好点子。可是,解释新闻最好不用跨越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

用户承担

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

智能私下认可值

在输入框输入内容不是件有意思的事体。因而,你供给通过为用户考虑好最常点选的选项,来让用户输入数据变得简单。为了让输入变得更简便易行,你能够提供一些预设值,这么些预设值能够根据其余音信(例如,依据邮政编码来推论地区)总计出来,或是依照在此在此以前输入的多寡来发出。

比如,根据用户的 ip 地址预先选拔用户的国家。WhatsApp
是3个让输入手机号很简单的 app 。如若你从美利坚合众国报到那个 app
,国际代码会基于地面活动填写。

Bootstrap 8

电动完毕和机关提出功用

机动达成效能在下拉摘取框中提供实时提出,所以用户能够更标准实用地输入新闻。那对于读写能力有限,或拼写有难堪的那部分用户来说更是关键,越发当他俩运用非母语时。

Bootstrap,活动建议功效的目标,是体现2个怀有相关心珍视要词和短语的清单,当自动完毕功效辅助用户补全了2个原生短语后,自动提议成效列出了绝大多数原生短语恐怕的变化。

适当的电动完毕和电动提议效用肯定地加速了用户的表现。谷歌同时使用那多个功用来为用户提供反应神速的检索体验。

Bootstrap 9

结论

你应当保证输入数据的进度尽恐怕的简约。改变帮忙文本,或输入区域内的标注消息那样的转移或然很微小,却能强烈地增进途运输入区域的可用性,以至提高全方位用户体验。

谢谢观望!

相关文章