Material design无需照搬Google

人人都是产品经理 • 9年前扫码分享

我是创始人李岩：很抱歉！给自己产品做个广告，点击进来看看。

最近，我们决定替换一下我们常备的邮件app原型，换成更迷人、跟上时代的东西——其中考虑采用了Google的material design原则。

但我们注意到。聪明的品牌会沿袭Google的风格，但对于想要跟上设计趋势同时保持自身品牌力量的公司而言，这就不太好了。

设计新的邮件app原型时，我们深入考虑了这个问题。我们要确坚持material design基于触摸、用动效表达意义、大胆地表达意图的核心原则，但不能完全复制Google Now或是Inbox。

我们想在此从两给方面分享构建这套界面的收获：其一，分享我们关于material风格的思考和设计。其二，分享界面本身——你可以从文末获取到。

颜色

Google一直以它大胆的主色运用著名，从他们无处不在的logo，到山景城园区的户外陈设皆是如此。Material通过辅助色、基于饱和度的色谱扩展了它的配色，但仍然专注于运用大片的扁平色彩，并没有使用长年主宰网页设计的渐变色。

尽管关于设计趋势的讨论，都倾向于将渐变、投影和拟物化融为一体，

于是，我们向用户展现了引人注目的渐变色，以示区分——包括app主图标中的条纹。构成这种渐变的色彩来源于material的配色，但我们以一种Google没有的方式进行混合。然后我们给悬浮操作按钮加了一定程度的透明。不过在信封的翻折处仍然有浓厚的阴影。

由于，使用宽泛的配色来填充设计，极具诱惑力。但颜色不必强烈反差来满足material的标准、达成目的——只要意图鲜明就可以了。

我们的邮件app最后用了相对简单、接近的配色，采用投影和渐变来区别于Google，同时创造并传达其意义。

字体

Google显然具有运用字体传播品牌的力量。通过创造和统一使用他们的Android预留字体，Droid Sans和Serif，如今则是Roboto和Noto，他们不仅创造了清晰的界面，也强调了品牌。他们还（聪明地）更进一步，坚持在网页上也使用Roboto资源，比如 Play 商店、 material design官方网站、和 Android版本网站。

我们要一套简洁、现代的外观，类似于Roboto——但不尽然。 Google Fonts上对的Roboto描述表现了他们试图让它适用于所有人——他们用了少量词句描述，比如混搭、人文主义还有几何学。

于是我们选了Avenir字体，另一种跨界字体，它源于无装饰的Futura字体，但融入了更多人文主义曲线。不像Roboto或Apple的挚爱Helvetica，它不是混搭字体。

我们也用过人文主义的Open Sans字体，我们的品牌字体之一。不过这没什么意义，我们不想过分强调自己的品牌。