Material Design在星巴克移动端APP中的运用

Material Design在星巴克移动端APP中的运用_第1张图片

我很高兴的宣布星巴克的Android版中使用了material design的设计语言作为最新的版本更新,这也是我们第一次使用material design的设计语言与星巴克的移动客户端进行更新迭代。


Material Design在星巴克移动端APP中的运用_第2张图片


一种约束的设计

由于Google在2014年的I/O大会公布了最新的设计语言,作为星巴克的产品设计团队一直都在思考如何更新到新的设计框架,我们的目标是将最新的material design的设计语言用到产品中去,但又要使得APP看上去不那么的死板(简单粗暴的套用material design),我们希望它即使在最简单的屏幕上,依然能反映出星巴克品牌调性,同时也在努力通过material design在某些方面提供的简洁设计逻辑,思考什么情况下的可以改变,以及这种改变对于客户这意味着什么,有着什么意义。


Material Design在星巴克移动端APP中的运用_第3张图片


字体排版

我们团队为了保持界面视觉的一致性和跨平台的使用场景中都有星巴克的品牌调性,我们采用一致性的排版方式:比较标准的material design的设计排版规范、视觉界面、动效设计,以保证产品中内容易识别性。


Material Design在星巴克移动端APP中的运用_第4张图片


层次

层次在整个APP中用于强调屏幕上内容的优先级。核心原则:使用投影来制造“景深”的感觉,使得元素似乎更加接近屏幕里面或者外面,在动效方面的每次创建都会有一个优先级的微动效作为引导。


Material Design在星巴克移动端APP中的运用_第5张图片


图标

对应到Google的material design的设计规范,保持与android系统icon的一致性,而且与星巴克的品牌调性完美的融合。


Material Design在星巴克移动端APP中的运用_第6张图片


颜色和图片

我们采用Google的官方引导规范,优先的考虑色彩和图片。从星巴克的logo中提取出来暖黑色和灰色,结合调色板的使用,以此来突出产品在屏幕中的显示。


Material Design在星巴克移动端APP中的运用_第7张图片


网格系统

利用8DP为基准的网格系统,将重点元素控制在16DP和72DP视觉线上,建立一个跨平台的界面,保持视觉上的一致性。


Material Design在星巴克移动端APP中的运用_第8张图片


挑战

随着android屏幕的尺寸和分辨率的不同,我们知道面临着一个困难:在不同尺寸的屏幕上优化,这是一个挑战,也就意味着并不能总是遵循着设计规范,我们也正在通过material design作为一个持续的更新的设计语言,不断的优化我们当前的设计,并让客户作为优先受益者。

作者:Chase Bratton

https://medium.com/android-news/starbucks-android-material-design-142e2c43feb#.dguft1l2l

你可能感兴趣的:(Material Design在星巴克移动端APP中的运用)