Material design无需照搬Google

最近,我们决定替换一下我们常备的邮件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字体,我们的品牌字体之一。不过这没什么意义,我们不想过分强调自己的品牌。

交互与动画

交互、动效和动画可以给用户带来大量的反馈信息。通过过渡效果,让他们知道任务已完成,表达出app的层级结构。这些都不需要逐一写成文字。

Google的动画效果能给人启发,让人思考事物相互间如何关联与转变,UI元素如何帮助用户接受与登录,界面元素如何取悦用户(而非令他们分心)。

但要确保它最终确有启发性。谨慎考量你的app的最佳交互隐喻。Google的纸墨隐喻难以抗拒,这点无可否认。通过它让你的用户理解app的行为、工作原理和各元素间的关联,只有这样,它才是正确的选择。

交互效果与动画要对你的app有意义,有助于融入Android(或iOS)生态系统,能够打造最佳的用户体验。时刻围绕自己的平台很需要精力——这就是为什么我们在设置中的iOS开关、切换项上稍微卡住了一会儿,为了保持material的感觉。

原文发布于微信公众号 - BestSDK(bestsdk)

原文发表时间:2015-07-05

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏企鹅号快讯

致前端初学者们的一封信

no pains, no gains. 相信小伙伴们在看过之前的推文之后对前端应该有所了解了,今天,我就跟大家来说一说作为一枚小白,想成为一名前端工程师你应该怎...

2207
来自专栏Python中文社区

Python发射导弹的正确方式

專 欄 ❈ Toby,Python中文社区专栏作者,目前供职于国内最大的医药大数据平台,任数据分析组长。关注自然语言处理,英文密码学,医药统计学。 博客: h...

24110
来自专栏腾讯社交用户体验设计

H5玩法知多少

4283
来自专栏非著名程序员

现在做前端的真的那么多吗?

前端开发作为一个由网页制作演变成的新兴岗位,其实在国内外来说,受到重视的时间并不长,在前几年间技术快速的发展和其应用普及率的迅猛增长,使得前端人才市场一片盛况空...

36212
来自专栏腾讯NEXT学位

2017前端技术大盘点!

4546
来自专栏企鹅号快讯

分享前端大佬是怎么练成的呢?

Web前端开发是现在非常热门的一个互联网技术,同时,相关Web前端开发的技术知识也是在不断的更新,致使Web前端开发工作已经变的越来越复杂,Web前端工程师想要...

25410
来自专栏進无尽的文章

迪士尼动画与界面动效的一些关联

迪士尼出品的 《疯狂动物城》可谓逗乐了全民,作为迪士尼动画的杰出代表,大人和孩子都爱看的缘由是什么?除了精彩的剧本,拟人和夸张的动画效果可谓是最具吸引力的地方。...

1843
来自专栏腾讯社交用户体验设计

小空间 大精彩 - 腾讯ISUX

1133
来自专栏Golang语言社区

供独立游戏开发者参考的2D美工教程(一)

作者:Chris Hildenbrand 引言 对大多数独立游戏开发者来说,自己亲自解决美术设计的工作是必然的——可能是因为财政预算上的限制,或根本就没有财政预...

5975
来自专栏Android群英传

GoogleDeveloperDay回顾

1273

扫码关注云+社区

领取腾讯云代金券