Material Design 文本框的设计指南-JavaScript中文网-JavaScript教程资源分享门户

Material Design 是 Google 推出的一套设计语言，并且在 Android 平台上被广泛使用。它致力于为用户提供简洁、直观、明确和易于操作的用户体验，在设计和规范化视觉和交互方面提供了一些有价值的指南。

在 Material Design 中，文本框有着重要的作用。它们是表单的核心元素之一，用于收集和提交用户的数据。本文将详细介绍 Material Design 中文本框的设计指南，包括其如何设计、排版、布局和样式等方面，希望能够给大家带来一些有用的学习和指导意义。

1. 设计指南

1.1. 基本规则

Material Design 提供了一些基本规则，以确保文本框的设计与整个设计系统协调一致：

文本框应该尽可能简洁，避免使用太多的装饰性元素。
文本框的尺寸应该适中，既不过于夸张也不显得紧凑。
标题文字应该清晰简洁，避免使用过多的语言。
输入框应该具有明显的边框，以便用户区分。边框应该是细小而并不引人注目。
提供适当的帮助文本，指导用户正确地填写数据。
如果数据输入错误，则应该及时给出反馈并指出错误，以便用户进行修正。

1.2. 细节问题

在设计文本框时，还需考虑到一些细节问题：

输入框的行高应该适当，以确保文本能够清晰地显示。
提供一些快捷提示功能，帮助用户快速完成输入。
当文本框获得焦点时，应该通过动画效果来提醒用户，并确保光标的位置是清晰、明显的。
当用户已经输入数据并将焦点移动到下一个框时，应该给予相应的行为反馈。
当文本框中的数据太长以至于无法显示时，应该提供滚动条或其它适当的方式来浏览和编辑数据。
当多个输入框紧挨在一起时，应该采用适当的布局方法来防止它们之间相互干扰。

2. 样式指南

在 Material Design 中，文本框有几种不同的样式：

2.1. 填充式文本框

<input> 标签或 <textarea> 标签可以用于创建填充式文本框。填充式文本框通常是圆形或矩形的，带有不同颜色的边框，并采用下划线或升高边框来标记其编辑和非编辑状态。

<label for="username">用户名:</label>
<input type="text" id="username" name="username" placeholder="请输入用户名">
<label for="password">密码:</label>
<input type="password" id="password" name="password" placeholder="请输入密码">

2.2. 浮动式文本框

浮动式文本框在填写数据时会带有动态浮动标签，这些标签可以增强界面的怂眼性，同时使用户知道他们正在填写那个域。一旦用户输入了内容，浮动标签就会悬停在输入框的左上角以腾出更多的空间。

-- -------------------- ---- -------
-----
  ------ -----------------------
  ------ ----------- ---------- -------------
  ----- -------------------------------------
------
-----
  ------ -----------------------
  ------ ----------- ---------- -------------
  ----- ----------------------------------
------展开代码

2.3. 搜素式文本框

搜索式文本框的标签和输入框在同一行，而输入框通常比标签宽得多。这种文本框通常用于查询和搜索操作。

<div>
  <label for="search">请键入查询关键词:</label>
  <input type="text" id="search" name="search" placeholder="Search...">
</div>

3. 使用示例

3.1. 实现一个填充式文本框

<div>
  <label for="name">姓名：</label>
  <input type="text" id="name" name="name" required>
</div>

3.2. 实现一个浮动式文本框

<div>
  <label for="email">邮箱地址：</label>
  <input type="text" id="email" name="email" required>
  <span class="floating-label">Email地址</span>
</div>

3.3. 实现一个搜索式文本框

<form>
  <label for="search">请输入关键词：</label>
  <input type="text" id="search" name="search" placeholder="Search...">
  <button type="submit"><i class="fa fa-search"></i></button>
</form>

小结

在 Material Design 中，文本框是表单元素中最重要的一部分之一。当设计文本框时，需要遵循一些通用规则和细节问题，以确保文本框的设计与整个设计样式一致。同时，还需要考虑到文本框的样式和效果，以打造出更加舒适和高效的用户体验。本文提供了一些有用的指南和示例，希望这些内容可以帮助读者更好地理解和应用 Material Design 中的文本框设计。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67b69c20306f20b3a62ae1c6

Material Design 文本框的设计指南