打造 Material 形状主题 | 设计篇

作者 / Liam Spradlin,Material Design 推广工程师

形状,就像颜色和排版一样,对于提升界面的美感和实用性至关重要。但与颜色和排版不同,形状的作用通常颇为微妙。虽然界面的所有内容都有形状,但形状在引导用户、表达交互性,以及在视觉上区分屏幕元素等方面的作用往往不为人所注意。

通过对形状进行特定的设计,可以在组件之间建立视觉层次,将内容与关键操作 (如 FAB) 区别开来。

形状也可以表达互动,比如上图里通过不对称的切角暗示那里存在可操作的组件。

当然,形状还可以成为一种工具,供您打造专属的品牌化体验,通过额外的自定义特征突显应用的独到之处。

Material Theming 为界面中的形状元素带来了更多可能,就像我们在类似指南中介绍的其他系统一样,形状的定义和控制能够在全局级别执行。在您创建好形状主题后,它能自动设置应用中每个 Material 组件的外观。

Material 中的形状

Material Design 默认支持两种形状: 圆角和斜角。选择形状后即可调整倒角的尺寸,从而表达出微妙或强烈的风格。

Material 组件分为三类: 小、中、大。

"小" 组件包括按钮、贴块、悬浮操作按钮、信息提示控件和工具提示等。"中" 组件包括卡片、对话框、图像列表项和菜单。背景、模态抽屉式导航栏和表格等则属于 "大" 组件。

通过这种方式对组件进行划分,可以创建一个全面 (应用于所有组件) 又细致 (应用时会考虑每个组件的尺寸和突出程度) 的形状主题。从视觉上讲,如果将 4dp 圆角分别应用于按钮和抽屉式导航栏,最终得到的感觉会很不一样: 对于 40dp 高的按钮,一个圆角占据其总高度的 10%;而对于横跨整个屏幕垂直高度的抽屉式导航栏来说,这个圆角只占总高度的 0.6% 甚至更少。因此,以不同的形状样式处理不同大小的组件,不仅可以给形状留出空间,让它们充分发挥前文提到的 "设计工具" 的用途,还能让您的应用看起来平衡且直观。

创建您的形状主题

在为应用的主题选择形状时,您可以从品牌的其他元素中寻找灵感。徽标 (logo) 是一个很好的起点。

Material Studies (按照真实世界的案例和产品需求设计的一系列示例应用) 经常从每个应用的徽标中借鉴形状灵感。以 Owl 鸟形徽标中的圆形为例,它为卡片的倒角处理和一些界面右下角的圆形播放列表按钮提供了灵感。

  • Material Studies

    https://material.io/design/material-studies/about-our-material-studies.html

  • Owl

    https://material.io/design/material-studies/owl.html

同样,Shrine 钻石徽标的棱角形状也影响了从按钮到背景的一切形状。

  • Shrine

    https://material.io/design/material-studies/shrine.html

产品的排版也可以作为灵感来源。例如,如果您使用的字体具有圆角或末端,那么您选择的形状可以与之呼应或是区别,这取决于您希望采用何种表达方式。

要想了解每种形状的观感,请使用 Material Design 形状设计指南中提供的形状工具。该工具将让您了解不同形状和参数会如何影响 Material 组件,从而让您在 Figma 或代码中实现形状主题时做出明智的决定。

  • 形状工具

    https://material.io/design/shape/about-shape.html#shape-customization-tool

设计主题

要在设计工具中实现您的形状主题,建议参考 material.io 上的形状设计指南中给出的组件类别,根据需要将形状和参数应用于不同类别的组件。

  • 形状设计指南

    https://material.io/design/shape/applying-shape-to-ui.html#shape-scheme

请下载我们的 Figma 基准设计套件来获得完整的 Material 设计模板。组件 (Components) 页面上的主要组件即为模板 (Stickersheet) 页面中所有 Material 组件的父组件。

  • 基准设计套件

    https://www.figma.com/@materialdesign

在这里,您可以更改各个组件的 States、Color 和 Elevation 层的角半径值 (见屏幕右侧选中的字段),从而将指定的形状赋予该组件。

下一步: 实现

现在您可以将设置好形状的组件放入您的设计稿中,看一看它们是否合适。尝试非对称形状和不同的形状参数,尽可能强化应用组件的外观和功能。

在创建出完整的形状主题后,您就可以着手实现它了。请大家关注我们接下来会发布的文章《打造 Material 形状主题 | 实现篇》。


推荐阅读



 点击屏末  | 查看 Material Design 设计指南


已标记关键词 清除标记
相关推荐