建站教程

建站教程

Products

当前位置:首页 > 建站教程 >

移动应用中 Material Design 的精美实现

GG网络技术分享 2025-03-18 16:08 0


材料设计

如今,许多人在移动应用程序中寻找 Material Design 的精美实现来寻找灵感。

是的,Material Design 出现并改变了设计历史,在最近两年它在移动应用程序设计中非常流行,并且在移动应用程序中有大量漂亮的 Material Design 实现。

但在此之前,让我们先了解一下 Material Design 是什么,以及为什么它会成为最流行和最成功的设计语言。

什么是材料设计?

Material Design 是谷歌于 2014 年开发的一种设计语言。 扩展在 Google Now 中首次亮相的“卡片”图案,Material Design 更自由地使用了基于网格的布局、响应式动画和过渡、填充和深度效果,例如照明和阴影。

截至 2015 年,大多数适用于 Android 的 Google 移动应用程序都应用了新的设计语言,包括 Gmail、YouTube、Google Drive、Google Docs、Sheets 和 Slides、Google Maps、Inbox。

所有 Google Play 品牌的应用程序,以及较小范围内的 Chrome 浏览器和 Google Keep。 Google Drive、Docs、Sheets、Slides 和 Inbox 的桌面网络界面也包含了它。

用于 Web 应用程序用户界面的 Material Design 的规范实现称为 Polymer。

它由 Polymer 库、为不原生实现标准的浏览器提供 Web 组件 API 的 shim 和元素目录组成,其中包括具有 Material Design 视觉元素的“纸质元素集合”。

该系统专注于基于网格的布局、过渡效果和深度,很快就进入了 Android 应用程序,并使系统达到了 iOS 的设计标准。

材料设计的原则

视觉线索启发

谷歌使用“触觉现实”一词来描述他们的设计理念,因为材料设计中的表面和边缘受到现实生活中的纸张和墨水研究的启发。

这有助于用户毫无困难地直观地理解屏幕上的数字界面。 基于现实的设计使屏幕上的对象可识别且易于交互。

大胆的美学

材料设计中的颜色选择大胆而深思熟虑。 引人注目的配色方案与基于印刷的基础设计技术相结合,让用户沉浸在体验中。

有意留白、边缘到边缘的图像和大字体用于强调用户操作。 这样,用户可以快速了解他们屏幕上界面的用途和功能。

相关文章:移动应用程序设计中最常见的错误

通过运动产生的意义

与人工和机械的动画不同,材料设计中的运动显得流畅自然。 Google 建议以几种不同的方式执行此操作:

  • 自然加速和减速:为了避免不自然的运动,页面上的元素应该平滑地加速和减速。 突然的开始、停止和方向的变化会令用户感到不安和分心。
  • 视觉连续性:两种视觉状态之间的过渡应该是平滑且毫不费力的,这样用户才不会走神。 当一个网站或应用程序从一个页面移动到另一个页面时,太多的花里胡哨是不必要的。
  • 分层时间安排:包含最重要内容的元素应通过放置在最容易关注的路径上来强调。 换句话说,重要的是要引起对重要元素的注意。
  • 一致的编排:动画元素不应该随机过渡,因为这可能会分散注意力。 相反,他们应该在有意义的有序路径中旅行。

Material Design 不只是创造秩序,它创造有目的和意义的秩序。 这是谷歌品牌的感官表达。

如果它找到购买,它可能是对苹果明显垄断崇高用户体验的第一个严重威胁。 作为一名 iPhone 爱好者,我不得不承认,这是我第一次开始对 Android 进行侧视。

Material Design 令人麻木的特殊性是对两个事实的回应:

  • 如果开发人员有可能破坏 UI,他们会的。
  • 好的设计的替代品不是没有设计,而是糟糕的设计。

现在,这里有一些在移动应用中最漂亮的 Material Design 实现。

谁能比创建它的人更好地实施 Material Design。 谷歌日历是移动应用中最漂亮的 Material Design 实现之一。 下载量超过 1.000.000 次,它肯定会震撼整个派对。

谷歌日历

对于初学者来说,谷歌的应用程序最终摒弃了大多数日历应用程序使用的传统拟物化设计,这种设计模仿了物理规划器的布局。

不再需要在纸上写下我们的日程安排。 Google 的日历为您提供垂直布局,并将当前日期放在页面顶部。

这样,您只能看到即将到来的日子和事件。 什么都没有发生的日子被浓缩了,这进一步简化了体验,只向您展示真正有用的东西。

对界面的这种单一更改同时允许用户保持在体验的中心,以便 UI 围绕他们移动。 加入一些视差滚动,你就有了一个非常漂亮的应用程序。

印象笔记

Evernote 因其在材料设计方面的表现而备受赞誉,并且是在移动应用程序中实现 Material Design 的一个引人注目的例子

该应用程序始终具有强大且一致的配色方案,并且设计精良且功能强大。 图标清晰有效地表示它是文本笔记、手写笔记还是您将要拍摄的照片。

大象图标简洁大方,而网站、iOS 和 Windows 10 应用程序也同样经过精心设计和布局。

微软健康

Microsoft Health 实际上是 Play Store 上最好的例子之一。

该应用程序旨在与 Band 健身追踪器配合使用,并以简单的垂直布局显示您的所有统计数据以及平面白色图标。 单击这些标题之一时,面板将“打开”以显示您的统计信息。

UI 非常适合让您一目了然地获得概览,同时可以在需要时选择更深入,这是良好应用程序设计的标志。

神话般的:激励我

很多人认为,Fabulous: Motivate Me 是移动应用程序中最精确、最深思熟虑的材料设计实现。

该应用程序以其清晰、扁平的图像和大胆的色彩以所有常规方式探索新的材料设计原则,但它也有一些在 Play 商店中最吸引人的动画。

如果没有 Facebook Live 的移动应用程序,这份名单就不完整。

该应用程序是 Material Design 的一个非常简单但有效的示例。 它以一种通常看不到的方式使用阴影; 通过使用浅色阴影而不是深色来提供深度。

它有趣地使用了图像、动画和交互设计——Material 的关键方面。

标签:

提交需求或反馈

Demand feedback