Material Design 中图形的选择、调整和搭配技巧分析

前言

在设计 UI 时,图形元素是不可缺少的一部分。Material Design 带来了更加直观、连贯和有意义的设计语言,并提供了一系列的设计准则,以协助设计师更好的选用图形元素。

在本篇文章中,我们将讨论 Material Design 中图形的选用原则和调整技巧,并举例介绍如何将不同类型的图形和布局搭配使用。

图形的选择

Material Design 中推荐使用以下类型的图形:

  1. 基础形状(Basic Shapes):如圆形、矩形等,是最基本的图形类型,用于呈现元素的基本框架和轮廓。

  2. 图标(Icons):特定的符号或者图形,用于传达一个概念或者表达一个功能。

  3. 插图(Illustrations):用于构图和情感表达,可以是图案、扁平化的角色或者场景。

  4. 图片(Images):用于传递感性体验或者反应字面意思。

  5. 字体(Typography):字体和文本是在 Material Design 中反映信息等级和对话结构的重要组成部分。

在选择图形时,要先考虑元素的用途和表达目的,然后选择合适的图形类型。例如,如果要表达一个主角或者一个产品的特点,可以使用插图或者图标;如果需要展示某个地方的实景,就要使用图片。

图形的调整

在使用图形元素时,如何调整使其符合 Material Design 的准则?

  1. 颜色调整:使用 Material Design 中推荐的颜色系统,并根据不同的设计需求变化色调和亮度。

  2. 大小调整:调整图形大小,以使其符合 Material Design 中的基础度量单位建议(dp 或 sp)。

  3. 边距调整:调整图形与当前 UI 元素和视图边框的距离。

  4. 动画调整:使用合适的动画来突出显示图形元素,并根据动画的情感表达强化信息的消费和交互。

图形的搭配

在使用图形的同时,如何将它们有机地组合和搭配呢?以下是一些技巧:

  1. 颜色协调:在选择不同图形元素时,应将它们的颜色设置为彼此协调的色调。

  2. 层次观察:决定图形放置在什么位置,并采取什么样的尺寸和边距。

  3. 对齐调整:确保不同元素对齐,以获得更好的视觉平衡。

  4. 对话交互:根据元素之间的关系和交互模式,使用恰当的图形元素和交互模式。

  5. 布局设计:结合材料设计中的基础布局和网格体系进行设计,以便使用不同的元素实现统一的整体设计效果。

代码示例

HTML 代码:

---- -------------
  ---- --------------------------------------------------------------- -------------
  ---- ---------------------
    ----- ----------------------- ------------
    ------- -- - ----------- -- --- ---------
  ------
  ---- ---------------------
    ------- ---------- ------------------- ----------
    ------- ------------------ ----------
  ------
------

CSS 代码:

----- -
  ----------- --------
  ------ ------
  ----------- --- --- --- ------- -- -- -----
    --- --- --- ------- -- -- -----
  ----------- -----------
  -------------- ----
  --------- -------
  ------------ --------- -----------
  ------ --------
  ------- -----
  -------- -------------
-
----- --- -
  ------ -----
  ------- ------
  ----------- ------
  -------------- --- --- - --
-
------------- -
  -------- -----
-
----------- -
  -------- ------
  ---------- -------
  ------- - - ---- --
  ------------ ----
-
------------- -
  -------- ---- -----
  ----------- ------
  ----------------- --------
  ----------- --- ----- -----
-
---- -
  -------- -------------
  -------- ---- -----
  ------------- -----
  ---------- -----
  --------------- ----------
  ------- -----
  -------------- ----
  ------ -----
  ----------------- --------
  ------- --------
  ----------- ---------- ---- ------------
-
---------- -
  ----------- --- --- --- ------- -- -- -----
    --- --- --- ------- -- -- -----
-
------------ -
  ----------------- --------
-

结论

在 Material Design 中,图形元素是非常重要的一部分。设计师应该在使用它们时遵循材料设计原则,以确保达到一致的设计效果。本文介绍了选择、调整和组合不同类型的图形元素的技巧,并提供了一个示例代码,以说明如何将这些技巧与实际应用结合。

来源:JavaScript中文网 ,转载请注明来源 本文地址:https://www.javascriptcn.com/post/67181999ad1e889fe22717c2