Material design无需照搬Google

起点学院产品经理365成长计划,2天线下闭门集训+1年在线学习,全面掌握BAT产品经理体系。了解详情

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

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

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

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

颜色

Sign In

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

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

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

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

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

字体

Sign Up

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

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

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

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

交互与动画

Interaction

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

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

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

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

请随意取用

设计这套新原型,教会我们很多。我们希望这个Sketch文件也能给你同样多的信息。它总共有23给界面,包括登录。马上下载吧,完全免费!

原文链接

作者信息:

John Moore Williams

I’m the Director of Content Strategy here at InVision. Nice to meet you.

Follow me on Twitter

#专栏作家#

可乐橙,微信公众号:可乐橙(colachangreen)。人人都是产品经理专栏作家,UI/UX设计师,关注互联网,关注科技。现居杭州,与小伙伴们正在创业途中。或许不是一名优秀的设计师,至少是个快乐的设计师。

转载请保留上述作者信息并附带本文链接

您的赞赏,是对我创作的最大鼓励。

评论( 0

登录后参与评论
加载中