Fabulous 的Material化

英文原文:http://androiduiux.com/2015/10/20/the-fabulous-goes-material/ 

在经历了264封邮件交流,200+展示模型,30+原型设计,9个多月中的17156次修改之后,我们终于在9月初发布了Material Design版的 Fabulous app。我们非常欣慰的是,我们达到了重新设计的第一个里程碑-被列在了Google Play Store的 New + Updated Apps 分类下。

blob.png

你可能还没有听过 The Fabulous-这是一个健康与健身类应用,使用科学的方法帮助人们通过一步步的程序达到健康的目的。我们根据用户的目标在过程中向他们显示重要的信息并激励他们,希望在结束之后能帮助他们养成健康的习惯。

为什么采用Material?

我们在2014年初的时候启动了这个app,那时候安卓的设计还是holo时代。那段时间,我们准备利用醒目的颜色来突出基本元素,因此app中各部分都有着鲜明的颜色,同样底部的action bar(我可以把它叫做BAB吗?)也是非常强烈的粉红色。 在顶部也有一个Action Bar(Material Design中叫toolbar),这个Action Bar的左边部分是选项卡,这种设计在那时非常流行。

界面还算ok - 虽然不是最好,但是这是我们第一次尝试创建一个既能为用户提供娱乐又能提供帮助的app。

blob.png

后来,当然是在Google I/O 2014上推出的Material Design了,想到我的app中可能采用这种设计我非常兴奋。在用户基数增长速度公认的慢的几个月之后,我们有许多新增的内容,以前的设计不再适合了 - 2014年末决定转向Material 。

现在,在经历了9个多月的煎熬之后,我非常高兴能让app适配Material Design了(还有很多东西需要添加和调整)-我们自己感到满意的同时也感到是一种解脱 。

The Fabulous

我们打算制作一个Play Store上最漂亮的健康与健身类app,你可以想象,这并非易事。我们对其他优秀的app做了大量的研究,在什么适合什么不适合的问题上做了大量讨论。

blob.png

对于图标,我们最终敲定选择在个性与熟悉之间取得最佳平衡的那个-每种颜色刻意包含熟悉的元素(月亮,草坪)和未知元素(紫色的海洋,粉色的天空)。我还添加了一个神秘符号来代表用户向往的神秘旅行,这个符号深受游戏 纪念碑谷 和Journey的启发。

Material Design

Fabulous 的重新设计并不是简单的刷新了感官,还完全重新构想了功能。“如何才能确保用户知道第二天会发生什么?” “如何让用户履行习惯的时候觉得愉快而有意义?”。这些问题只是我们在重新设计阶段反复询问自己的一小部分。

blob.png

有了 Material 设计指南, 我们可以让在不同时期设计的页面有了一致的体验,keylines,   elevations,   typography style等不仅帮助我们保持了设计的一致性,还帮助我们减短了把页面上的单个元素有机结合起来的时间。

就如你看到的,图像 在app中扮演了非常重要的角色,它不仅仅是起到润色的作用,还是与用户交流的一部分:给用户惊喜,让用户了解上下文同时带来更沉浸的体验。这一点上我们仍然还有很多要做(还需要很多图像),但是我们将在随后的更新中慢慢放出来。

设计与开发的交流

为了确保app实现出来跟设计的一样,设计师和开发团队之间要进行许多交流。我们使用 Invision 来模拟页面与页面之间的跳转。对设计规则,我们使用 Zeplin 把设计交给开发团队。而最终设计的检查我们使用Keyline Pushing 这样的app,同时也在开发者模式中打开 Layout Bound选项来确保元素排布到了想要的位置。

在Material Design中,有意义的动画也是用户体验的一部分,因此我们尝试在app中包含一些微妙而有意义的动画。动画的模型我们使用Photoshop 和 Principle 。

但是通常这对于开发并没有太大帮助-如果你想实现出来的动画跟你设计的尽可能相像,请用文字来描述动画,文字中包含诸如距离,淡入淡出,时间,效果等细节。如果你都不能用文字准确描述动画,别期望开发者能实现它。

还有,如果开发者对于某些设计有质疑,总是向他们解释清楚也是非常重要的。往往开发团队能提出一些设计师都没有意识到的设计问题,所以团队之间的健康交流对创建一个好的产品有很大帮助。

接下来是什么?

我们决没有安于现状的意思,还有更多的要做。我们将继续更新app,带来更多的极致与细节,希望下次我能有足够的东西拿出来分享。

Stay Fabulous!