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 年一切顺利~

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 159,015评论 4 362
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,262评论 1 292
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,727评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,986评论 0 205
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,363评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,610评论 1 219
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,871评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,582评论 0 198
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,297评论 1 242
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,551评论 2 246
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,053评论 1 260
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,385评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,035评论 3 236
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,079评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,841评论 0 195
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,648评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,550评论 2 270

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 170,569评论 25 707
  • afinalAfinal是一个android的ioc,orm框架 https://github.com/yangf...
    passiontim阅读 15,087评论 2 44
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 11,613评论 4 59
  • 哈桑说:“为你,千千万万遍!”,只这一句,我已经难过的想哭。他是那样的一个好人,甚至教导孩子,伤害坏人也是不对的。...
    waitine阅读 327评论 2 7
  • 行走的初衷 工作时间越久越会发现自己在知识层面的匮乏,尤其是对于刚刚完成社会角色转型的我来说,更是如此。一直在国际...
    我是潇涵阅读 459评论 3 1