什么是 Material Design？
Material Design 是由 Google 提出的一套设计语言，主要用于移动应用的设计。它的目的是为了在各个平台上，以一种层次清晰、流畅自然、物理感强的方式呈现用户界面。
Material Design 的特性包括：
- 官方提供的调色板和字体，让设计人员能够快速选择颜色和字体，统一的配色方案也让应用更具整体感；
- 通过呈现“虚拟纸张”的形式，使得用户体验更具现实感；
- 通过合理使用大小、层次、颜色等视觉元素，生成合理、具有空间和层次感的界面。
Material Design 从元素级别（控件、布局）到全局层面都通用，可以在 Android、iOS、Web 等多个平台上使用。
为什么要使用 Material Design 的表单设计方案？
表单是用户输入数据最主要的交互方式之一，也是我们在前端开发中常常会用到的一类组件。如何设计一个好的表单，不仅能够获得用户的信任，更能够有效地提高用户的体验，这就涉及到表单设计的各个方面内容。
Material Design 的表单设计方案特点有：
- 友好的交互方式：Material Design 表单设计方案考虑了用户的习惯和心理模型，提供了友好直观的交互方式。
- 风格简洁、直观：Material Design 表单设计方案一直强调界面的简洁性、轻松感。设计风格以简明、轻盈、舒适为主要特点。
- 对细节设计的重视：Material Design 以细节设计着称，包括控件的动画效果、颜色和图标摆放等等，都十分精致细腻。
Material Design 表单设计的核心要素
1. 输入控件与提示场景
Material Design 表单输入控件分为三种：
- 文字输入框
- 开关
- 选择器
在提示场景中，开发人员可以使用以下提示文案：
- 占位符（placeholder）：在输入框中显示帮助文本，一般与输入框的标签一致
- 标签（label）：在输入框上显示标签，用于指定此输入框显示的内容
- 帮助文本（helper text）：输入框右下角的提示文本
2. 状态标志
Material Design 中的状态标志有以下几种：
- 必填标志：当输入框必须输入时，需在标签中显式标明
- 动态提示：可以实时反馈用户输入状态，如密码强度等
- 错误提示：用户输入错误时，应在输入框外部给出提示
3. 色彩设计
Material Design 表单采用基于色彩的输入法，通过统一的配色方案来确保整个应用的视觉风格统一。
在颜色方面，常常会使用 主色、次要色、强调色 等，需要将这些颜色设置为全局变量，方便后期的调配和管理。
4. 布局设计
在表单的布局设计中，Material Design 的主要特点是：超过两个输入框后，自动排列到下一行，保持使用上的简化和整洁。
实现 Material Design 的表单设计方案
下面通过代码演示如何实现 Material Design 下表单设计的方案。
1. 文本输入框
<div class="form-item"> <label class="input-label" for="name">用户名</label> <input type="text" class="text-input" id="name" placeholder="请输入用户名" required> </div>
-- -------------------- ---- ------- ---------- - -------------- ----- - ------------ - -------- ------ -------------- ---- - ----------- - -------- ------ ------ ----- -------- ---- ------- --- ----- -------- -------------- ---- - ----------------- - ------------- -------- -
2. 开关
-- -------------------- ---- -------
---- ------------------
----- --------------------------------
---- -----------------------
------ ---------------
------ ----------------
----- ----------------------
--------
------
-------- -------------------- ---- ------- ------------- - ------------ ----- -------- ------------- --------------- ------- ------------- ----- - --------------- - -------- ------------- --------------- ------- --------- --------- ------ ----- ------- ----- - --------------- ------- - --------- --------- ---- -- ----- -- ------ -- ------- -- -------- ------------- ------ ----- ------- ----- - --------------- ------- ----- - -------- ----- - --------------- ------- ------- - --------- --------- ---- -- ----- -- ------ -- ------- -- ----------------- -------- -------------- ----- ----------- --- --- ----- - --------------- ------- ------------- - ------- - ----------------- -------- - --------------- ------- --------------- - --------- --------- -------- --- ------- ----- ------ ----- ----------------- ----- -------------- ---- ---- ---- ----- ---- ----------- --- --- ----- - --------------- ------- ------------- - --------------- - ---------- ----------------- -
3. 选择器
<div class="form-item">
<label class="input-label">选择日期</label>
<div class="date-input">
<input type="date">
<span class="date-icon"></span>
</div>
</div>-- -------------------- ---- ------- ----------- - --------- --------- - ----------- ------------------ - -------- ------ ------ ----- ------- ----- -------- ---- ----------------- ----- ------- --- ----- -------- -------------- ---- ----------- ----- - ----------- ----------------------------------------------------- - --------- --------- ---- ---- ------ ---- ------ ----- ------- ----- -------------- ----- - ---------- - --------- --------- ---- ----- ------ ----- ------ ---- ------- ---- ----------- --- ----- ----- ------------- --- ----- ----- ---------- --------------- -
4. 表单布局
-- -------------------- ---- -------
---- -------------
---- ------------------
------ ------------------- ----------------------
------ ----------- ------------------ --------- -------------------- ---------
------
---- ------------------
------ ------------------- -------------------------
------ --------------- ------------------ ------------- ------------------- ---------
------
---- ------------------
----- --------------------------------
---- -----------------------
------ ---------------
------ ----------------
----- ----------------------
--------
------
------
---- ------------------
------ --------------------------------
---- -------------------
------ ------------
----- -------------------------
------
------
-------- -------------------- ---- ------- ----- - ------------ ------ ------------- ------ - ---------- - -------- ------------- --------------- ---- ------ -------- - ------ ------------- ----- -------------- ----- - --------------------- - ------------- -- - ------------ - -------- ------ -------------- ---- - ----------- - -------- ------ ------ ----- -------- ---- ------- --- ----- -------- -------------- ---- - ----------------- - ------------- -------- - ------------- - ------------ ----- -------- ------------- --------------- ------- ------------- ----- - --------------- - -------- ------------- --------------- ------- --------- --------- ------ ----- ------- ----- - --------------- ------- - --------- --------- ---- -- ----- -- ------ -- ------- -- -------- ------------- ------ ----- ------- ----- - --------------- ------- ----- - -------- ----- - --------------- ------- ------- - --------- --------- ---- -- ----- -- ------ -- ------- -- ----------------- -------- -------------- ----- ----------- --- --- ----- - --------------- ------- ------------- - ------- - ----------------- -------- - --------------- ------- --------------- - --------- --------- -------- --- ------- ----- ------ ----- ----------------- ----- -------------- ---- ---- ---- ----- ---- ----------- --- --- ----- - --------------- ------- ------------- - --------------- - ---------- ----------------- - ----------- - --------- --------- - ----------- ------------------ - -------- ------ ------ ----- ------- ----- -------- ---- ----------------- ----- ------- --- ----- -------- -------------- ---- ----------- ----- - ----------- ----------------------------------------------------- - --------- --------- ---- ---- ------ ---- ------ ----- ------- ----- -------------- ----- - ---------- - --------- --------- ---- ----- ------ ----- ------ ---- ------- ---- ----------- --- ----- ----- ------------- --- ----- ----- ---------- --------------- -
总结
Material Design 表单设计的核心在于简单明了和层次分明，通过布局和元素配色等方面来确保整个表单的可读性。表单是前端开发中最经常使用的组件之一，在实现时，应考虑 Material Design 的核心设计，将代码实现得优雅和精致。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e05b67f6b2d6eab3b6f738