前言
在设计 UI 时,图形元素是不可缺少的一部分。Material Design 带来了更加直观、连贯和有意义的设计语言,并提供了一系列的设计准则,以协助设计师更好的选用图形元素。
在本篇文章中,我们将讨论 Material Design 中图形的选用原则和调整技巧,并举例介绍如何将不同类型的图形和布局搭配使用。
图形的选择
Material Design 中推荐使用以下类型的图形:
基础形状(Basic Shapes):如圆形、矩形等,是最基本的图形类型,用于呈现元素的基本框架和轮廓。
图标(Icons):特定的符号或者图形,用于传达一个概念或者表达一个功能。
插图(Illustrations):用于构图和情感表达,可以是图案、扁平化的角色或者场景。
图片(Images):用于传递感性体验或者反应字面意思。
字体(Typography):字体和文本是在 Material Design 中反映信息等级和对话结构的重要组成部分。
在选择图形时,要先考虑元素的用途和表达目的,然后选择合适的图形类型。例如,如果要表达一个主角或者一个产品的特点,可以使用插图或者图标;如果需要展示某个地方的实景,就要使用图片。
图形的调整
在使用图形元素时,如何调整使其符合 Material Design 的准则?
颜色调整:使用 Material Design 中推荐的颜色系统,并根据不同的设计需求变化色调和亮度。
大小调整:调整图形大小,以使其符合 Material Design 中的基础度量单位建议(dp 或 sp)。
边距调整:调整图形与当前 UI 元素和视图边框的距离。
动画调整:使用合适的动画来突出显示图形元素,并根据动画的情感表达强化信息的消费和交互。
图形的搭配
在使用图形的同时,如何将它们有机地组合和搭配呢?以下是一些技巧:
颜色协调:在选择不同图形元素时,应将它们的颜色设置为彼此协调的色调。
层次观察:决定图形放置在什么位置,并采取什么样的尺寸和边距。
对齐调整:确保不同元素对齐,以获得更好的视觉平衡。
对话交互:根据元素之间的关系和交互模式,使用恰当的图形元素和交互模式。
布局设计:结合材料设计中的基础布局和网格体系进行设计,以便使用不同的元素实现统一的整体设计效果。
代码示例
HTML 代码:
---- ------------- ---- --------------------------------------------------------------- ------------- ---- --------------------- ----- ----------------------- ------------ ------- -- - ----------- -- --- --------- ------ ---- --------------------- ------- ---------- ------------------- ---------- ------- ------------------ ---------- ------ ------
CSS 代码:
----- - ----------- -------- ------ ------ ----------- --- --- --- ------- -- -- ----- --- --- --- ------- -- -- ----- ----------- ----------- -------------- ---- --------- ------- ------------ --------- ----------- ------ -------- ------- ----- -------- ------------- - ----- --- - ------ ----- ------- ------ ----------- ------ -------------- --- --- - -- - ------------- - -------- ----- - ----------- - -------- ------ ---------- ------- ------- - - ---- -- ------------ ---- - ------------- - -------- ---- ----- ----------- ------ ----------------- -------- ----------- --- ----- ----- - ---- - -------- ------------- -------- ---- ----- ------------- ----- ---------- ----- --------------- ---------- ------- ----- -------------- ---- ------ ----- ----------------- -------- ------- -------- ----------- ---------- ---- ------------ - ---------- - ----------- --- --- --- ------- -- -- ----- --- --- --- ------- -- -- ----- - ------------ - ----------------- -------- -
结论
在 Material Design 中,图形元素是非常重要的一部分。设计师应该在使用它们时遵循材料设计原则,以确保达到一致的设计效果。本文介绍了选择、调整和组合不同类型的图形元素的技巧,并提供了一个示例代码,以说明如何将这些技巧与实际应用结合。
来源:JavaScript中文网 ,转载请注明来源 本文地址:https://www.javascriptcn.com/post/67181999ad1e889fe22717c2