作者都是各自领域经过审查的专家,并撰写他们有经验的主题. 我们所有的内容都经过同行评审,并由同一领域的Toptal专家验证.
Cameron Chapman

Cameron Chapman

Design Blog Editor

卡梅隆有设计背景,是两本网页设计书籍的作者:《欧博体育app下载》和《欧博体育app下载》.

Expertise

Share

5年多前推出的谷歌 Material Design 指南已经成为他们网站和基于应用程序的服务的标志性外观. 人们一眼就能认出它们是谷歌的附属产品,这对谷歌的品牌推广是一个福音.

Material Design也被更广泛的设计社区所采用,现在可以在谷歌原生平台之外的网站和应用程序上找到(甚至在竞争平台上)。. Simplenote, for example, 在桌面和移动平台的应用程序中使用材料设计美学. 这只是一个例子,为什么材料设计是一个很好的选择 variety of design implementations.

Why use material design

What Is Material Design?

Material Design是由Google在2014年创建的,部分是基于基于卡片的布局 Google Now. 对纸质设计风格的认可将其与当时广泛使用的平面设计风格区分开来.

Like most design systems, UI的材料设计是为了在不同的设备上带来统一的用户体验而创建的, platforms, and input methods. 类似于苹果将扁平化设计原则作为他们的标准, 谷歌使用材质设计来确保这一点, 不管用户如何访问他们的产品, 他们将拥有一致的用户体验.

材料设计规范包括所有方面的指导方针:排版, grids, space, scale, color, and imagery. 但材料设计不仅仅是告诉设计师如何让东西看起来. It enables designers 创建具有层次、意义和最终结果重点的有意设计.

What is material design

Why Use Material Design?

与任何完善的设计系统一样, 使用材料设计系统有一些主要的优点 designers should consider.

Google的Material Design实际上是一个完整的设计生态系统, 而不仅仅是一套风格指南. 如果存在潜在的设计情况, 材料设计可能有一套全面的规则来处理它. 这包括那些经常被不太全面的人忽视的复杂用例 design systems. 对于想要这种结构的设计师来说,这是非常令人欣慰的.

Google维护Material Design,并保留了大量关于如何使用和实现它的文档. 许多现代设计系统可能缺乏这种支持和文档.

Material design framework

尽管有这么多的综合性和文档, Material Design仍然是一个相当灵活的设计库. Within the guidelines, 如何执行设计的许多细节完全取决于设计师.

材料设计的更多颗粒优势包括微妙的拟物化, 是什么让它从平面设计中脱颖而出,对许多用户来说更直观. 另一个用户友好的特点是用户反馈的形式 haptic feedback,微妙的动画,以及类似的东西都被内置到指南中. 它也具有非常简单的物理感,这使得交互更加直观.

招聘美国全职自由UI设计师

Material Design基于移动优先的理念, 考虑到它最初的目的是设计Android应用程序,这就说得通了. 它还促进了设计中的动画, 既是为了用户反馈,也是为了暗示不同功能的功能.

Finally, dark theme 选项已经提供,为设计师增加了更多的视觉灵活性. Originally, 材料设计非常轻盈明亮, 这与一些品牌的美学效果不太相符. 添加一个暗主题指南修复了这个问题.

Google material design patterns

使用材料设计的缺点

而材料设计有非常明显的优点, 这并不意味着使用它就没有坏处.

First up, 材料设计是立即识别,并与谷歌和, specifically, Android. 虽然这并不一定对每个人都是坏事,但对某些人来说可能是负面的.

它可能是负面的一个重要原因是,它限制了使用谷歌设计系统的其他品牌的有效性. Yes, designers can incorporate logos, 调色板(在材料设计指南范围内), 以及其他差异化因素来支持品牌识别, 但遵循材料设计规范的产品几乎总是会 also be associated with Google.

因为运动和动画是在材料设计指南中推广的, 如果网站或应用程序没有整合这一功能,用户可能会觉得他们遗漏了什么. 人们将材料设计的运动特性与视觉特性联系在一起, 哪一个能让设计没有动感.

当然,一个解决方案是在遵循材料设计规范的设计中始终包含运动. 但是在移动设备上,大量的动画会占用大量的资源, 导致更高的数据使用量和更快的电池消耗. 这是设计师在材料设计指导方针下必须考虑的平衡行为.

初学者可能会发现,与平面设计等其他风格相比,材料设计规范更复杂,更难实现. 因为材料设计系统是如此的全面, 要考虑和坚持的东西比许多新的东西要多得多 designers may be comfortable with.

Google material design components

它的全面性也会导致一些设计师感到受约束,无法充分实现自己的创意. It can also stifle innovation, 因为几乎所有的设计挑战都已经计划好并提供了解决方案. 虽然在很多情况下是有帮助的, 这可能会阻止设计师采用新的方法来解决问题, 同时也限制了新想法出现的数量.

在网站和应用程序的材料设计中也存在一些可用性问题,这可能会使它们非常人性化unfriendly. 最大的问题之一是所谓的“mystery meat在许多手机设计应用中遇到的导航. 图标通常用来代替文本, 虽然有时图标是立即识别和相当可用的, at other times they’re not.

一个表示“Home”的圆圈比之前在大多数Android界面上使用的house图标更难识别. 这是将形式置于功能之上的一个主要例子,这是材料设计的延续 flat design roots.

它不只是在下方的导航栏. 材料设计对圆形浮动操作按钮的偏好也是一个可用性问题. 这些圆形按钮只包含图标的空间,不包含辅助文本. 因为图标可以如此开放的解释, in many cases, 用户会质疑这些按钮到底是做什么的.

Google material design elements

Conclusion

如果一款应用主要面向Android平台开发, 那么使用材料设计是一个简单的选择. 因为谷歌的广泛采用, 任何基于材质设计原则的应用都会让人感觉像是原生应用.

That said, 在Android平台之外还有很多其他用例,其中材质设计是一个可靠的选择. 随着设计系统的进一步成熟,这些情况必然会增加. Designers should, at the very least, 熟悉指导方针,以便他们可以自己决定何时适合使用材料设计, 当其他系统可能更适合的时候.

Understanding the basics

  • Why is Material Design important?

    作为Google使用的签名设计框架, 材料设计框架已成为立即识别与品牌相关. 但设计师应该考虑使用Google生态系统之外的材料设计指南,因为它的使用案例非常全面和多样.

  • What is Material Design used for?

    Material Design框架最初是作为Google网站和应用程序(包括Android应用程序)的官方风格开发的。. 从那以后,它被用于谷歌平台之外的各种品牌的网站和应用程序.

  • 材料设计与平面设计的区别是什么?

    材料设计来源于平面设计,但更多的是拟物化和物理结合, 使其更加用户友好,并改善整体用户体验. 这就是为什么许多设计师现在使用Material Design框架的原因.

  • Is Material Design a framework?

    材料设计是一套全面的设计指南,超越了一个简单的框架. Google的Material Design patterns可以看作是一个设计库,而不是一个框架. 它是目前可用的最全面的开源库之一.

聘请Toptal这方面的专家.
Hire Now

世界级的文章,每周发一次.

订阅意味着同意我们的 privacy policy

世界级的文章,每周发一次.

订阅意味着同意我们的 privacy policy

Toptal Designers

Join the Toptal® community.