谷歌Material Theming...

  • 经验类型设计趋势
  • 经验属性自译外文
  • 经验版权署名-非商业性使用
6306 5 148 2018-07-20

自2014年Google发布Material Design以来,我们看到有很多产品都接受并广泛使用这套规范。但是不可否认,这套规范自身也存在许多问题。4年后,我们终于迎来了Material Design的一次重大更新。主打定制化的Material Theming以及全新的设计协作工具Gallery可以帮助我们去解决一些问题,实现产品的个性化以及协作的简单化。下面将会对这两个方面的内容做简单介绍。


Material Theming让我们的产品更加个性化


此前,Material Design经常会被吐槽规范死板。由于Material Design是一个庞大而复杂的系统,因此许多设计师在工作中会坚持使用该设计语言的核心原则,因为这样做可以减少犯错几率,同时设计出来的界面不会特别糟糕。但一味的遵循设计原则,会限制设计师的发挥空间,最终的结果是大家设计出来的东西看起来都是一样的,同质化问题严重。

老版本的Material Design设计原则,具有详尽的指导规范

老版本的Material Design设计原则,具有详尽的指导规范


Material Theming旨在帮助企业系统化的定制Material Design,从而创造出符合其品牌特色的个性化产品。Material Theming可以通过最新推出的Sketch插件Material Theme Editor来实现。借助这个工具可以在Sketch中完成对同一产品的多平台设计,并通过自定义组件库内组件的参数来实现产品的个性化设计。目前它还提供了4组风格独特的主题供用户使用,未来将逐步增加更多有特色的主题。


使用Material Theme Editor


材质主题编辑器将帮助创建自定义的产品,我们可以自定义颜色、形状、字体并创建自己的品牌图形库。

Image title

默认按钮到自定义按钮


通过改变颜色、形状、字体和图标,默认组件可以变成我们的自定义组件。


颜色


颜色选择器能够自动将颜色应用于所有组件。重要的是,它会检查颜色对比,为应用提供最佳的可访问性。内置颜色库可以在你选择一种颜色后自动生成10种颜色。

Image title

选择颜色

形状


形状编辑器让用户可以根据自己的喜好选择形状和角度,并自动将更改应用于其他组件,这会大量减少工作量和时间。

Image title

形状编辑器及示例

字体


让用户更改字体,并允许添加3种自定义字体。最重要的是,它会自动调整大小并优化它以提高可读性。

Image title

字体编辑器及示例


图标


它提供五种类型,多达900个图标,我们可以根据品牌特点选择不同形式的图标。

Image title

图标集合


Gallery让我们的协作更简单


之前我们在跟踪设计更改和反馈的时候,难度较大,多方协作比较困难,往往需要借助第三方工具。现在借助新推出的Material Gallery这款协作工具,设计师可以快速高效地上传设计作品,任何人都可以查看和评论设计迭代。同时Gallery与Material Theme Editor之间也可以无缝对接。我们可以将Material Theme Editor上制作的设计稿上传到Gallery,同时会自动显示生成的代码,以及组件定制信息,这将大大开发人员的工作效率。


从Editor中上传设计稿到Gallery


Editor有一个比较很棒的功能——“ 上传到Gallery ”,这个功能跟Craft的“更新到InVision”功能类似。所以,我们可以把一些设计模版进行修改后上传。

Image title

上传速度很快


在Material Gallery中工作


一开始有人可能会认为Material Gallery是类似Dribbble或Behance的网站,但其实它跟InVision很相似。它是一款简化设计和开发流程的工具,包括评论、组内共享(编辑器与查看器),它可以连接Google云端文档或其他链接等。

Image title

Image title

它具有标记和设置设备外观的功能


当我们去切换不同平台的时候(Android,iOS,Flutter或Web),单位也会随之更改(px,pt,dp),这对开发人员来说非常方便,而且该功能可能在其他设计工具中比较少见。

Image title

一旦我切换了平台所有的标记结果都会随之更新


当我们要对外演示的时候,“ 选择框架 ”是一个比较不错的功能,它使我们不仅可以选择手机端和平板电脑端,还可以选择桌面端。如果Material Design还能够帮助快速导出下图中的文件,那肯定会成为另一个杀手级功能!

Image title


将文档链接到项目的功能,可以方便用户在同一个地方去处理工作!我们可以在这里设置项目标题、简短描述等,然后链接到所有最新的相关文档中,诸如项目简介、关键绩效指标、用户测试报告、客户端演示套件、PM跟踪器等。

Image title


通过移动端Gallery来工作


对于喜欢移动办公的人来说,这是一个不错的选择,我们可以下载移动端 Gallery,随时随地查看文档。

下载地址:https://gallery.io/apps

Image title


结语


虽然谷歌发布了Material Theming,但是它一个不断完善的系统,未来我们可以使用更多的主题,当然,我们也期待Material Theme Editor和Gallery将会提供更加完善的功能,使我们的工作更佳轻松,便捷。


参考文章链接:

https://blog.usejournal.com/get-started-with-material-theming-e44ed7f85d47

https://blog.prototypr.io/google-i-o-18-material-theming-180032431b9e

文章仅作学习用途,转载请注明:本文来自DUBEST原创翻译,如有其他用途请联系作者



全部评论:5

更多作品

发表评论

取消

点击右上角
分享给朋友吧

分享到

取消

每人每天仅限5票,快给你心仪的作品鼓励的一票。

投票