Material Design——Text fields

#我是一个可爱的搬砖工系列# 尝试对照英文翻译学习MD的组件设计,借此加深各种组件的应用~

Material Design链接:Material Design——Text fields

文本字段允许用户输入和编辑文本。

一、用法

顶部应用程序栏提供与当前屏幕相关的内容和操作,它用于品牌、屏幕标题、导航和操作。

△ 原则

· 发现  文本字段应突出显示, 并指示用户可以输入信息

· 清晰  文本字段状态应清楚地区分开来

· 有效  文本字段应便于理解所请求的信息并解决任何错误

△ 原则

文本字段分为两种类型:

· 填充文本字段

· 大纲文本字段

这两种类型的文本字段都使用容器为交互提供一个明确的启示, 使字段在布局中可以发现。

1. Filled text fields;2. Outlined text fields

△ 选择正确的文本字段

这两种类型的文本字段都提供相同的功能, 因此所使用的文本字段类型可以单独依赖于样式。

选择以下类型:

· 选择最合适的风格

· 最佳地容纳用户界面的目标

· 与其他组件 (如按钮) 和周围内容非常不同

左:使用填充文本字段的移动窗体;右:使用大纲文本字段的同一移动窗体。

一个 UI 中的两种文本字段类型

如果两种类型的文本字段都在单个 UI 中使用, 则应在不同的节中一致使用它们, 而不会在同一区域内混合,例如, 可以在一个节中使用大纲文本字段, 并在另一个部分中填充文本字段。

Right:在 UI 中使用这两种类型的文本字段时, 按区域分隔它们;Wrong:当使用这两种类型的文本字段时, 不要在相邻的区域或同一窗体中使用。


二、分析

1.Container;2.Leading icon (optional);3.Label text;4.Input text;5.Trailing icon (optional);6.Activation indicator;7.Assistive text (optional)

△ Container

容器通过在文本字段和周围内容之间创建对比度来改进文本字段的发现。

· 填充和描边

文本字段容器具有填充和描边 (在整个容器的周围, 或者只是底部边缘),笔画的颜色和粗细可以更改为在文本字段处于活动状态时指示。

· 圆角

"轮廓" 文本字段的容器具有圆角, 而填充文本字段的容器有圆形的顶部角和方形底角。

△ Label text

标签文本用于通知用户对文本字段所请求的信息,每个文本字段都应该有一个标签。

标签文本应与输入行对齐, 并且始终可见,它可以放在文本字段的中间, 或者放在容器顶部附近。

标签文本应始终可见, 从文本字段的中间移动到顶部 (如果选定了该字段)。
标签文本应始终可见, 从文本字段的中间移动到顶部 (如果选定了该字段)。
左:标签文本不应该被截断;右:标签文本不应占多行。

· 必需的文本指示器

要指示字段是必需的, 请在标签文本旁边显示一个星号 (*), 并在星号指示必填字段的窗体附近注明。

1.如果需要某些字段, 请指示所有必需的域

2.如果需要大多数字段, 请通过在标签文本旁边的括号中显示 "可选" 字来指示可选字段

3.如果需要的文本是彩色的, 该颜色也应用于星号

需要带星号的文本

△ Input text

输入文本是用户输入到文本字段中的文本。

· Input text

输入文本是用户输入的文本。

· Cursor

游标指示字段中文本输入的当前位置。

△ Assistive elements

辅助元素提供有关输入到文本字段中的文本的其他详细信息。

· Helper text

相关的说明文本可以辅助用户填写文本框,它将持续显示。

· Error message

当文本输入错误, 提供有关如何修复它的说明,错误说明显示在输入行下面, 直到文本输入正确。

· icons

图标也可以用于提示输入文本的错误,将它们与错误消息配对, 以提供冗余警报, 这对盲用户非常有用。

· Character counter

如果有字符或单词限制, 则应使用字符或单词计数器,它们显示所用字符的比例和总字符限制。

· Error text

· 如果只可能出现一个错误, 则错误文本将描述如何避免错误

· 如果可能出现多个错误, 错误文本将描述如何避免最可能的错误

将帮助器文本替换为错误文本。
不要在帮助器文本下放置错误文本, 因为它们的外观会改变内容。
如果没有足够的空间来清楚地描述错误, 长错误可以换行,在这种情况下, 请确保文本字段之间的填充足以防止多排线错误与布局内容的碰撞。

△ Icons

文本字段中的图标是可选的,文本字段图标可以描述有效的输入方法 (如麦克风图标), 提供启示以访问其他功能 (如清除字段内容), 并可以表示错误。

主导和转换的图标根据 LTR 或 RTL 上下文更改其位置。

· Icon signifier

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

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,497评论 18 139
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,074评论 25 707
  • 一直以来,有多少人为了钱与感情,与亲近之人发生大吵与怀疑呢!!
    唔内心滴叛逆阅读 144评论 0 0
  • 黑暗和光明交接的时候, 彼此悄悄地艳羡。 一个忽然爱上了热闹, 因为夜晚的寂静承载不了火热的灵魂, 一个却梦想着独...
    初时不语阅读 330评论 1 5
  • 我希望时间没有流走,世界还停在过去,昏 黄的光还照在旧日的路上,我刚刚走过,还 不曾与你们相识。心里念到高兴的事情...
    Takumi海阅读 300评论 0 0