Material Design in Action — 猿题库

前言

猿题库是一款免费的手机做题软件，在中学学生中拥有一定的人气。

猿题库很早之前就发布了 Android 版本的客户端，但猿题库的联合创始人，郭常圳 先生，并不认同 Android Design （或者现在的 Material Design），而且认为应用程序的设计规范，应当由开发商来规定。

然而当我试用猿题库的时候发现，这个应用对其进行 Material Design 的适配，其实并不困难。因此就有了对其进行重新设计的念头。

由于郭先生对 Android / Material Design 以及对跨平台应用遵守规范的误解，我会在展示作品之前，先简单说一说我心目中的跨平台应用应该是如何设计的。

跨平台应用应该怎么做？

现今，绝大部分的移动互联网应用，都会选择开发双平台（iOS 和 Android）或多平台的跨平台客户端。

iOS 的情况比较简单，因为绝大多数公司都会遵循 iOS 的设计规范，很少出现把别的平台的设计风格“搬”到 iOS 上的情况。然而 Android 就要复杂得多了。

Android 在 4.0 之前是没有一个统一标准的规范的，默认控件也比较丑陋，于是开发商们就“怎么方便怎么来”，基本上都把 iOS 风格的控件和交互直接照搬到 Android 上。

情况在 4.0 之后有了改观，Google 为 Android 打造了更加美观的 Holo Theme ，并且提出了 Android Design 规范，从此 Android 应用的设计风格开始进入了新的时代。

然而现在的 Android 应用并没有呈现出“大一统”的状态，而是一个“分水岭”的状态。一边是大部分国外的公司和开发者的应用，经过几个 Android 版本的迭代之后，绝大部分已经遵循了 Android Design，同时有些应用已经开始遵循 Material Design 以期在最新的 Android 5.0 Lollipop 中拥有更好的表现；另一边是大部分国内公司和开发者的应用，纵使 Android Design 已经推出了多年，他们仍然视而不见，继续使用 iOS 的那一套设计风格。

这其中也有一些例外，微信在 5.2 版本中做了一个不太好的尝试，开始试图让微信遵循 Android Design 规范。但这次尝试十分短暂，在受到了用户的批评后，他们马上在 5.4 版本里换回了 iOS 风格。

因此，有人提出，用户不需要跨平台应用针对不同平台做不同的设计。这个观点是对的吗？个人认为，不对。

虽然使用 iOS 风格的设计在 Android 上“又不是不能用”，但如果你想为自己的应用从观感，使用体验等各个层次来一个全面的提升，还是应该试着去遵守平台的规范。更不用说 Material Design 在 Android 5.0 上提供了非同寻常的使用体验，极具个性的动画效果，能为应用带来优秀的视觉享受。

微博官方客户端（iOS 风格）和 Blacklight 微博客户端（Material Design 风格）在 Android 5.0 上运行效果的对比

所以，用户需要，有必要，有权利在不同的平台上用上遵循规范设计，体验更好的应用。

我看跨平台应用——“求同 存异”

前面提到了，微信曾经在 5.2 版本里短暂地尝试了一下 Android Design ，结果在 5.4 中，又被用户“骂回去”了。

微信这么做对吗？当然不对。新事物总是需要学习的，微信应该做的是在下一个版本当中对 5.3 的风格继续改进，而不是当缩头乌龟。

微信 5.2 的设计为什么会被用户骂？很简单，UI 大改，用户自然需要学习，而之前的 iOS 版本设计风格的 UI 和新的 Android Design UI 之间，几乎毫无瓜葛，用户一时摸不着头脑，于是就开始骂娘了。

这是 Android Design 的错吗？当然不是！事实上，微信在 iOS 和 Android 上的设计，都只能算是非常一般而已。在 5.2 版本上的所谓 Android Design 风格还十分简陋，都有很大的提升空间。

最主要的是，微信在不同平台上的设计，割裂感太大了。

What the f...?

如上图所示，iOS 版本和 Android 版本（5.3）的微信，简直可以说是两个应用。如果用户从 iOS 版本切换到 Android 上，肯定会产生不适应感，而这是优秀的跨平台应用不应该做的。

在我看来，优秀的跨平台应用必然共有一个特征——求同存异。

以下是一些优秀的跨平台应用（图片来自 NovaDNG）：

Between Duolingo Instapaper 饭本（Ricebook）

从上面的应用展示中，大家可以看出这些应用让用户能明确体验到应用在不同平台间的差别，又不至于产生不适应感，学习成本也较小。同时，在界面设计上都遵循了相应的平台规范。

这，就是“求同存异”的内涵。用户在使用这些应用的时候，没有那种硬生生的割裂感，只需要很短的时间就能适应在新平台上的操作。

所以，所谓“分裂”其实只是因为应用自己做得不够好，而不是平台规范的错。同样，如果应用做得足够好，用户也不需要太久时间就能适应新的平台设计。

Talk is cheap,show me the...

OK.

其实在我试用猿题库的时候就发现了一个事实——这款应用看上去一副 iOS 样，但其实交互上已经很接近 Android Design 了，最典型的就是那个 Drawer 。

所以我觉得猿题库是款很可惜的 App ，明明只要付出一点点努力，就可以在 Android 平台上变得更好...

于是我自己动手制作了一套猿题库重新设计的效果图，仅供参考。

这只是一种尝试，我相信，肯定还会有其他比我更好的实现方法，关键是肯不肯做。

1.登录画面

状态栏和导航栏都进行了 Translucent 化，为的是更有冲击力的第一观感（好像听上去和 Nova 差不多...）。稍微更改了一下 Logo 和按钮的布局，原来的按钮样式被换成了 Boarderless Button.

这里偷个懒，直接放上新用户的引导界面，省去登录界面了。

2.引导界面

...到了这里，大家应该明白我前面“可惜”的意味了吧？我只是做了很小的改动（换成标准的 App Bar 和控件，列表改成标准的两栏布局，去掉了那个箭头，仅此而已），整个界面就已经很 "Materialized" 了...所以我这里改动不多。接下来就是主界面了。

3.主界面

原版上方的概览画面面简直就是硬伤，排版在我看来非常混乱。所以在这次重设计中，我试着用卡片的方式承载这部分内容，同时把内容尽量规整地向中间靠拢。至于底部的 List ，我更新了样式，原来的"+"图标改成了现在的"Expand More"图标，写题的图标也做了小许改进。

Drawer 在原版就已经出现了，于是我只对 Drawer 样式做了修改，使其更贴近 Material Design 的 Drawer 样式。

原来右上方的“更多”按钮被我更换成了标准的“More”，新页面展示也变成了 Drop Down Menu.

4.写题界面

这个界面可以说改动也很大。首先是 App Bar 上的 Actions 都去了他们该去的位置（计时器的字体也做了修改，并且加粗处理）。至于底部的 Drawer （暂时找不出更好的方式描述这个模块），我把原来的拖动区域整合到了 Drawer 里，以使整个界面看上去更加简洁。选题界面的标题，内容和按钮位置也进行了微调。

练习报告界面。还是之前在主界面那里的问题。排版混乱。于是我按照之前主界面的思路，重新排了版，将原来底部的按钮换成了 Flat buttons.

写在最后

相信大家都发现了，我重制的界面其实不多，一部分原因是我懒（，另一部分原因是，这个应用需要做的绝大部分都是控件的修改和细节上的优化，因此不需要大幅度地推翻重建，只需要完成一两个模块做为演示，我相信就能带来一定的启发。

除此之外，猿题库还有一些问题需要改进，例如去掉 Splash Screen 等等。但不可否认的是，这款应用对中学生来说，帮助是很大的。希望开发团队能够认真考虑一下，拿出一个更好的 Android 版本。

写在最后的最后

这是我第一次对 Android 应用做较为系统的界面重制，在这里要再再再再次感谢 NovaDNG ，没有他的影响，我现在也不会往 Designer 的方向发展。

祝大家在 2015 年一切顺利~