Material Design 来了个新官网

人家叫开源设计平台好吗

Posted by Donggu Ho on 2016-11-07

前两天Google Design的新文章,说Google推出了Material Design开源平台Material.io(暂时还没!有!墙!!),为UI设计师提供资源、工具和灵感。今天去网页看了看,简直……geek得不行。
这是首页第一屏。
这是首页第二屏。
这是首页第三屏。
……
……
……
……你见过全网站所有字体都使用等宽字体的设计网站吗??????Google你真的不是在挑衅业界?这种写着【我就是放弃治疗了来打我呀】的画风是怎么回事喵喵喵?都扁平成隔壁巨硬了一点都不Material好吗?!你身为拟物设计典范的自尊呢???
……好的我明白的Google你就是一个工程师企业嘛这是你的恶趣味我懂的。

然后再翻了几下……出于一个desigrammer对于等宽字体的熟悉心态竟觉得还挺舒服的。
……我的设计师之魂不承认!
首页的高饱和度的暖调配色,深灰、明黄、橘红、白,配上等宽字体和极为简单的几何图形,感觉既不像一个优雅的设计平台,也不像一个工程师网站,而是一个深度妄想症的内心世界(此处非贬义)——大漠炙炎什么的意象,真是非常微妙的体验……


……还挺有意思的。

总之,在这个长相非常奇怪的网站上,谷歌将Material Design现有的相关资源进行了集中,包括相关的设计指引Design Guildline和即将发布的工具集。Design Guildline不用多说,Tools倒是好像挺有趣的。从网页上能看到已有的包括Gallery, Stage, Remixer, ResizerDevice谷歌你是不是起名困难。

Color Tool: 配色分析工具

Create, share, and apply color palettes to your UI, as well as measure the accessibility level of any color combination.
进行App主题配色的设计,同时提供配色方案与不同颜色内容之间的可识别度分析

选择一个主题色,会自动调节该颜色的明度生成一个深色和一个浅色进行搭配,并可以在左边的不同界面下观察配色效果。选色可以在色板挑选,也提供十六进制色号的自定义。

Icons:图标字体库

提供了一系列非常 Material 的图标 Kit,可以下载SVG/PNG以及 icon font。胜在画风特萌,不过目测没有特别好用,不如icomoon/icon8/iconfont

Material design components:开发用组件

大概就是给github的库做了个链接。不过 Material 的前端库真好看啊真好看

Gallery:简化协作流程

Gallery is a shared home for your team’s design work, so you can easily find, present, and get feedback on the work that matters.

Gallery明明就是android自带手机相册app的名字(冷漠)。根据介绍来看是用于团队协同设计的辅助工具,包括视觉设计交互原型等,用于简化工作流程什么的,还能生成云上展示。反正云啊版本管理啊什么的都是大势所趋了嘛。介绍网页倒是有非常炫酷的工程师追着打系列网页动画,看得有点惊心动魄不敢翻源码。目前处于可申请邀请码状态。

Stage:动态交互设计

Change the way you and your team design and build interactive experiences. Stage is a design tool that goes beyond a process rooted in static design, enabling a more dynamic, intentional, and systematic workflow for crafting digital experiences.


……我认真翻了几次可是他真的没提具体是什么样的。只能看出来是进行动态交互设计的工具,具体是制作原型还是什么别的完全不清楚。Blog文透露的信息是该工具由 Pixate 团队和 Form 团队共同打造。同样可申请邀请码(预计2017年发布)。

Remixer:用户界面调试的实时互联


一个github项目,支持iOS,Android 和 Web 平台的实时调试。属于前端工程师的开发工具,提供了跨平台调试的库和协议,从颜色到动画效果随意调试,给你飞一般的体验(棒读)。

Resizer: 多屏效果查看


大概就是不用自己p了官方帮你实时玩多屏。电脑端,平板,手机一应俱全,nice。每个窗口都可以进行浏览点击滑动等操作,轻松发现各种bug。也可以选择单个屏幕,并在各种经典尺寸之间切换。其中一个用处是截图。

Device: 屏幕尺寸工具书

各种常见设备的屏幕尺寸,能想到的单位都有。啊而且还有Surface。

总之看完的我内心波动不大迅速申请了邀请码:)