NovaDNG 2014 年度应用

又到了一年一度写年终总结的时候了… 这一年因为参加了工作的缘故, 锋客这边文章的更新频率大幅下降了, 所以这几天我会搬运一些知乎上的回答过来.

然后就是这篇文章的正题, Best of 2014!按照时间排序~

vivino 2

发布于一月份的 Vivino 是一款酒友应用, 能够识别酒标, 在线评酒和为你发现身边的酒庄/酒吧

2014-12-11 06.04.32_framed

发布于二月份的 Muzei 是一款动态壁纸, 在每天推送一张世界名画做壁纸之余又添加了模糊效果不至影响主屏使用, 藉由开放 API 的便利又有着数百款插件可供选择

2014-02-22 01.09.59_framed

同样发布于二月份的 Type Machine 是一款系统应用, 能够像时光机一般拯救因为意外丢失的文字

2014-03-21 00.37.29_framed

发布于三月份的 Link Bubble 是一款浏览器, 能够最大限度地利用等待载入的时间

(没有图)

同样发布于三月份的 Pixl Preview 是一款设计工具, 它能让设计师直接在 Android 手机上预览 Photoshop 上的设计稿

Mode

发布于四月份的 Google Camera 是一款相机, 能够拍摄球形全景与后期模糊照片, 界面极端简洁

2014-04-28 07.07.34_framed 2014-04-28 07.11.42_framed

同样发布于四月份的 Scene 和 CloudMagic 分别是一款操作新颖的图片浏览器与一款集成了非常多有趣功能的邮件客户端

2014-07-15 13.36.44_framed

发布于七月份的 Journey 是一款设计精良的日记应用, 在遵循了 Material Design 的同时提供了 Markdown 支持, 并且有 Web 端与 Chrome App

2014-12-26 04.55.46_framed

同样发布于七月份的 Unclouded 是一款设计精美的云盘管理器, 可以方便地查看与管理复数账号的 Google Drive, Dropbox, Box 与 OneDrive.

WT 03

发布于八月份的 Weather Timeline 是一款天气应用, 精致的动画与有趣的 「天气时光机」 功能带来了很多惊喜

2014-12-12 05.03.48_framed

发布于十二月的 Action Launcher 3 是一款桌面应用, 接近原生 Google Now Launcher 的外观与趁手的 Cover, Shutter 快捷操作让桌面的效率倍增

以上就是 NovaDNG 的 2014 年 Android App 精选集~

So… Happy Birthday, Material!

(标题请配合 Matías Duarte 在 Material Now 演讲开头中的致辞服用)

Screenshot 2015-06-12 at 1.57.24 AM

(这篇文章, 其实很大程度上是写给我自己看的)

是的, 在去年的今天, Google I/O 2014 上, Matías Duarte 穿着他那一身标志性的花衬衫, 为大家开启了通往 Material 世界的大门.

Google_I-O_2014-40

 

想起自己第一次看到 Material Design 的时候, 心里其实是充满了厌恶的. 没错, 那个让我对 Material Design 产生厌恶的应用就是 Google I/O 2014. 到现在为止, 我都还觉得那是我见过最糟糕的 「Material Design 应用」 之一 (同样糟糕的还有那时刚刚改版的 Hangouts 和 Google+).

同样让我觉得不能接受的还有, Google 从官方色版中, 完全抹去了我最喜爱的 Holo Blue (#33B5E5) 的痕迹.

但随着 Material Design 发布, 它也在快速的发展和完善. 等到 Material Design 正式出现在 Android 上 (Android 5.0 正式发布) 的时候, 已经过了将近半年. 那个时候的 Material Design 已然向大家展现出无限的可能性.

在 Material Design 宣布进入正式版不久之后, 我也开始履行诺言, 着手制作 Material Design Toolkit for Nexus 4. 可以说, 这段制作过程的开始是很不开心的. 可以说, 当时我非常想要 「毁约」. 几乎是骂骂咧咧地, 我一边翻看规范, 一边在 Ps 里画图 — 那时的 Material Design 尚有很多不完善之处. 但是随着制作的进行, 当我为了制作 Toolkit 翻阅第十遍 (以上) Material Design, 逐渐完善我对它的理解的时候, 我渐渐发现, 自己变得不那么讨厌 Material Design 了.

是的, 随着规范自身的完善, 以及我对规范了解的深入, 我开始逐渐领略 Material Design 的美妙. 随之发生的变化就是, 我开始放下 Android Design 了. 又过了不久, 同四年前一样, 我开始宣传起了 Material Design. (同时, 我也渐渐开始改变起以往黑白灰的穿衣风格)

和我不同, 有无数设计师从最开始就对 Material Design 充满热忱. 在 Material Design 发布伊始, 他们就对其给予盛赞, 并且, 他们中的很多人, 都对推动 Material Design 发展做出了贡献. 同时, 也有无数开发者制作出了各种 Material Design 相关的库, 供更多开发者们方便的调用… 可以说, 一切都是那么的欣欣向荣.

然而 Material Design 依然很年轻. 一方面, Google 依然在致力完善它; 另一方面, 很多开发者, 设计师和用户对 Material Design 的理解仅仅停留在 「Drawer 导航 + FAB + 半透明通知栏」 上.

而在国内, Material Design 的发展更是堪称步履维艰. 原本我以为, 相比起 Android Design 直到生命末期才出现一份基本可看的中文译本, Material Design 在发布第二天便有了中文译本, 这是一个很好的开端; 没想到, 国内对 Material Design 的热情, 似乎也就只是一阵风一般. 之前如雨后春笋般发表的 Material Design 中文译本, 更新至今的恐怕一只手能数的过来.

我想, 或许, 我们如今所处的状况, 和四年前并没什么区别. 先前在 Android Design 时代积累下来的那一点儿成果, 某种意义上算是前功尽弃. 而在 Android Design 时代就冥顽不灵的那几个最大的阻碍, 如今, 依然, 是最大的阻碍. 他们自身已经是阻碍, 而他们的存在更是产生了恶劣的影响, 加剧了推广 Material Design 的困难.

而我, 当然不能因此退缩. 为 Material Design 庆祝生日, 某种程度上, 也是在庆祝自己的一段新旅程的开始, 为自己加油打气.

052815_GOOGLEIO_-0174

所以, 在今年的 I/O 大会上, 当 Matías Duarte 大声说出, 「Happy birthday, material!」 的时候, 骄傲, 激动与心酸一同涌上心头, 让我几乎快要哭出声来.

希望, 在接下来的日子里, Google 能继续完善 Material Design — 不单是设计规范的方面, 同样还有 Android 开发的方面.

在这个重要的日子, 我要大张旗鼓地为 Material Design 庆祝生日. Happy birthday, material!

Your FAB Icon Might Need Some Optical Alignment

#androiduiux

FAB Icon Optical Alignment

Todoist recently have their major redesign using Material Design and I thought it was actually quite nicely done! Though I found one minor design issue that might worth a mention – did you manage to figure it out at the screenshot below?

Todoist

It’s the FAB icon

If you felt there is something wrong with the FAB, you are definitely not alone. The placement of the send/save icon in the FAB doesn’t seems to be centred visually (the icon weight distribution seems to be more towards to the left), but actually it was programmatically centred.

I have made a simple comparison between the current FAB and the corrected FAB below:

FAB Comparison

As you can see, even though the asset of the icon are generated correctly and placed into the FAB at the centre, it is seems to be off from the centre to the left visually when I used a centred circle…

View original post 221 more words

Material Design in Action — 哔哩哔哩动画 Android 客户端

前言

哔哩哔哩动画是中国大陆的一家弹幕视频网站,在中国二次元用户中颇受欢迎。

哔哩哔哩动画之前推出过采用 Android Design 的 Android 客户端,虽然有使用了部分过时控件(例如 Scrollable Tabs)之类的问题,但整体素质依旧较高,受到 Android 用户的广泛好评。而在 6 月初的 3.9 及 4.0 更新后,哔哩哔哩抛弃了过去的 Android Design 转而使用了 iOS 风格的设计,如图所示:

左为 v3.3.0,右为v4.0.0

此次更新在用户中的争议颇大,部分用户反对此次改版,认为新版哔哩哔哩动画客户端失去了原有的 Android 风格,令人失望。

个人认为哔哩哔哩的情况比较特殊:原来进行过 Redesign 的应用有一开始就是 iOS 风格的,也有采用 Android Design 风格,但并不完美的。对哔哩哔哩这种原来是 Android Design 风格,但后期转换为 iOS 风格的 App 进行 Redesign 是一件很有挑战性的事情。于是在对新版进行了一段时间的体验之后,我开始利用新版的特性和部分交互逻辑对哔哩哔哩动画进行基于 Material Design 的 Redesign 尝试。

在微博上发布了几张预告效果图之后,我意外地收到了认证资料为“bilibili副总裁”的微博用户 @光头哥光头哥 的私信。因为在私信里这位微博用户对一些问题进行了询问,加上设计师在知乎上对于这次设计风格改变的解释,我认为哔哩哔哩本身是想采用 Material Design 的,然而对于 Material Design 本身并不是十分了解,因此才会采用 iOS 的设计风格。

我个人对哔哩哔哩的态度感到很欣慰,希望能在以后拿出更好的设计。

我也希望我的这篇文章能够起到一些帮助。

对底部 Tab Bar 说 No

在文章开始之前,我想先回答之前 @光头哥光头哥 在私信中提出的一个问题:为什么安卓用户对底部 toolsbar 这么介意?

首先要纠正一个用词错误:用于切换不同页面的 Bar 叫 Tab Bar,而不是 Tools Bar.这点在 Apple 官方的 iOS 7 UI Transition Guide 中也有提到。

Apple 官方对于 iOS Tab Bar 的解释

那么纠正完用词错误,接下来就要回答这个问题了:为何 Android 上最好不要出现底部 Tab Bar 呢?

首先,Android 提供了更多样的交互方式,例如 Drawer,Floating Action Button 等。活用这些交互方式可以灵活地将用户引导至其他视图上。

其次,即使要使用 Tab Bar ,Google 官方也已经提供了解决方案——各式各样的顶部 Tab Bars.而且,顶部 Tab Bar 均可以滑动切换,这样就无需担心单手操作性了。

2015-06-22 15_05_29-TabsTabs!

另外对于虚拟键用户来说,使用底部 Tab Bar 也会带来“双底栏”的问题,影响美观性。

(并不是针对HTC)

所以,在 Android 上使用底部 Tab Bar 是一种毫无必要的行为,不仅不会对单手操作带来任何便利,反而会造成更多的麻烦。

Google 很早就谈到了这一点:Pure Android 页面中列出了很多“不该做”的事情,其中之一就是“不要使用底部 Tab Bars”。


之前 @光头哥光头哥 和我提到过,因为哔哩哔哩的内容架构极其丰富,于是想把内容的分类筛选在页眉留给用户。即使是这样,采用双 Tab Bars 也没有多大必要,可以参考第一点,使用其他方式实现原来底部 Tab Bar 的功能,我会在下面提到我是如何去实现这一点的。

1.首页

对首页的改进是整个 Redesign 中最重要的一环之一,毕竟这次设计争议最大的就是采用底部 Tab Bar 的设计。

我对首页的改进有:

去掉底部 Tab Bar,保留顶部 Tab Bar

加入标准 App Bar,颜色取自 v3.3.0 的 Action Bar

个人信息放入 Drawer

“关注”、“发现”和“游戏”整合入“发现” Floating Action Button

下载、消息(目前似乎客户端未加入消息系统)等按钮单独作为 Action 放置于 App Bar 上

首页项目和 Banner 采用 Cards 设计

如上文所述,我使用了将选项分散的思路,将原先底部 Tab Bar 的选项分散到其他模块。下文我会一一讲解。

当用户向上滚动首页列表的时候,App Bar 将会自动隐藏,只留下 Tab Bar 。一个小细节:我试着使用了类似 Google Play Store 的滚动 Cards 布局展示“番剧更新”项,在最右侧露出 Card 的一端来提醒用户这一排可以进行滚动。

同时我保留了 Tab Bar 的下拉菜单的设计,点击最右边的箭头就可以调出菜单,能直接点击进入 Tab 项,也能对 Tab 项进行重排。2.个人信息

之前的 v3.3.0 及更早的版本将个人信息放在最左边的 Tab ,而最新的 v4.0.0 将个人信息放在“我的” Tab。个人认为这个区域完全可以用 Drawer 替代。

这里的修改不多,主要是以下几点:

个人信息区域加入头图,硬币改为和网页版一致的“B”图标

去掉“离线任务选项”,相应的项目已移动至 App Bar

“设置”“帮助与反馈”放置在单独区域

之前的各个版本,各个平台的客户端均未加入头图项,所以我在做这个设计的时候也思考了一下要不要加入头图,后面对比了几个版本的解决方案,还是决定加入头图。

3.“发现” FAB

v4.0.0 加入了“关注”、“发现”和“游戏”三个 Tab 项目。按道理来说,一个放在 App Bar 上的搜索即可解决问题,但是考虑到“游戏”等项目的特殊属性需要足够的曝光度等,最终决定将这三项合并为一个 “发现” Floating Action Button.如图所示,“发现” FAB 处于屏幕右下方,若用户点击,FAB 中的其他项目会自动展开:

为了让“游戏”“排行”等项在日常使用时能拥有更高的曝光率,我将常用的“搜索”等项放入了此 FAB 。

4.播放页面

第一步

首先当然是采用了“正常”的 App Bar——原来播放界面的 App Bar 高度并不标准。其次在这个界面我使用了不同的配色方案——以标志性的粉色作为底色,字体和图标以白色呈现。同时将“点击播放”按钮去掉,变成点击封面图即可播放,封面图也进行了适当地放大。最后将原先在视频信息下的 Tab 转移到上面,所以一共做的改动有:

更换为正常高高度的 App Bar

将 Tab Bar 提上,与 App Bar 整合

使用与首页不同的配色方案

去掉“点击播放”按钮,和封面图整合

下载、收藏和分享等项集合至 App Bar

添加“评论” FAB

第二步

做完第一步之后我发现,似乎把那些选项都放在 App Bar 上并不是很好的选择。于是我试图对着 FAB 下手,做成了类似首页“发现”的扩展 FAB,如图所示:于是这一步的改进就是:

下载、收藏和分享等项集合至一个 FAB,点击展开

第三步

然而在思考了一会之后,又觉得放一个 FAB 在这似乎有些多余。在 v3.3.0 中,这些选项放置在 Split Action Bar 上,然而 Material Design 中已经去掉了 SAB 。

于是我试图使用 Quick Return 模式来放置这些选项,结果个人还是很满意的:

最后对原来居中的视频标题重新调节成偏上,最终成品如下:最后一步做的调整有:

改用 Quick Return 模式在底端放置选项

将视频标题由居中修改为偏上

5.引导页面

每个 App 在进行设计和交互大改的时候都应该对用户进行引导和提示。微信在 5.2 上启用 Android Design 时就吃了这个亏,直接升级的用户并不知道这个版本会对设计大改,结果改完就崩溃了——这个新界面到底该怎么用???

所以如果哔哩哔哩需要启用 Material Design 设计,一定要做一个引导流程让用户知悉新版的变化。

首先是首次启动的引导页,通过强调“新版”来提示用户。之后是一个提示界面,用圈点的形式提示用户原来的功能都去了哪里。同时对于 Drawer 给予适当提示,让用户知道调出 Drawer 除了点击汉堡包图标还能向右滑动调出。以上只是随便制作的,非常粗糙的引导页。相信哔哩哔哩的设计师们能想出更好的主意。

后记

制作这次的 Redesign 是一次充满挑战的历程,我希望这次的 Redesign 能给予各位一些启发。

哔哩哔哩官方已经放话了,正在研究 Material Design。那么就让我们期待一个更好的哔哩哔哩客户端吧~

( ゜- ゜)つロ 乾杯~

彩蛋:好想看Nova做的啊啊啊啊!

你说你看到了沉浸模式,你可能只是见到鬼了

20090720000417-1715160976

我都不敢相信,现在 2015 年快过一半了,还有不少所谓 Android 爱好者分不清“沉浸模式”和“透明栏”之间的区别。

那好,我们来好好捋一捋“沉浸模式”究竟是个什么玩意。

什么是沉浸模式?

从 Android 4.4 开始,Android 为 “setSystemUiVisibility()” 提供了一个新的标记 “SYSTEM_UI_FLAG_IMMERSIVE”,就是我们所谈的 “Immersive Mode”,也就是沉浸模式,全称为 “Immersive Full-Screen Mode” 。

imm-states

Google 提供这个新模式的初衷,是为了让应用能够实现真正完整的全屏模式体验。

之前 Android 靠两个标记实现全屏模式,一个是 “SYSTEM_UI_FLAG_FULLSCREEN”,另一个是 “SYSTEM_UI_FLAG_HIDE_NAVIGATION”(仅适用于使用导航栏的设备,即虚拟按键) 。

这两个标记都存在一些问题,例如使用第一个标记的时候,除非 App 提供暂时退出全屏模式的功能(例如部分电子书软件中点击一次屏幕中央位置),用户是一直都没法看见状态栏的。这样,如果用户想去看看通知中心有什么通知,那就必须点击一次屏幕,显示状态栏,然后才能调出通知中心。

而第二个标记的问题在于,Google 认为导航栏对于用户来说是十分重要的,所以只会短暂隐藏导航栏。一旦用户做其他操作,例如点击一次屏幕,导航栏就会马上被重新调出。这样的设定对于看图软件,视频软件等等没什么大问题,但是对于游戏之类用户需要经常点击屏幕的 App,那就几乎是悲剧了——这也是为什么你在 Android 4.4 之前找不到什么全屏模式会自动隐藏导航栏的应用。

那么 Google 面对这样的问题自然也不会坐视不管。还记得 iOS 是怎么处理用户在全屏应用下调出通知中心/控制中心操作的么?对,用户做一个向内滑动的手势,一个小箭头就会出现,在不影响当前应用全屏的情况下引导用户操作。

IMG_0383
Google 借鉴了 iOS 的逻辑,4.4 之后加入的这个 Immersive Full-Screen Mode 允许用户在应用全屏的情况下,通过在原有的状态栏/导航栏区域内做向内滑动的手势来实现短暂调出状态栏和导航栏的操作,且不会影响应用的正常全屏,短暂调出的状态栏和导航栏会呈半透明状态,并且在一段时间内或者用户与应用内元素进行互动的情况下自动隐藏。

imm-sticky
这个新加入的特性理所当然地受到了广泛好评:从此 Android 终于可以在全屏应用下不影响用户的正常操作了,难怪 Android Developers 页面中会这么描述 Immersive Full-Screen Mode:

…lets your app go truly “full screen.”

当然,讲了这么多有关“沉浸模式”的介绍,目的并不是要告诉你“沉浸模式”有多么多么好,而是为了告诉你,目前你们所说的“支持沉浸模式”“沉浸状态栏”等等,和真正的“沉浸模式”,即 Immersive Full-Screen Mode 是一点关系都没有的。

接下来我要告诉你们,你们口中的“沉浸”究竟是个什么东西。

“沉浸状态栏”究竟是什么?

Google 在 Android 4.4 的 API 描述页面里提到了“Translucent system UI styling”,即半透明化的系统UI风格。

这个“半透明化”包括了状态栏和通知栏,当开发者让应用支持这个新特性的时候,状态栏和导航栏可以单独/同时变为渐变的半透明样式。

kk-home (1)
说到这里大家应该都明白了——没错,这就是你们口中经常提到的“沉浸模式”“沉浸状态栏”。记住了,他们的学名是”Translucent Bars”,透明栏,包括了状态栏(Translucent status bar)和导航栏(Translucent navigation bar)。

在 Android 5.0 之后引入了 Material Design,状态栏和导航栏也玩出了更多花样。现在除了原有的“半透明”模式以外,还有“全透明”以及“变色”模式,一种会完全隐藏背景,另一种可以取色作为背景颜色。

不同的状态栏风格

不同的导航栏风格,可以注意到加入了全透明(Transparent)背景

有关更多 Material Design 中关于系统栏的描述可以参考这里

总结

如果你认真看到了这里,那么你应该明白了一个重要的事情:此“沉浸”非彼“沉浸”

真正的沉浸模式,指的是一种全屏模式,而你一般在开发者/爱好者/用户那里听到的“沉浸模式”绝大部分情况下指的是“半透明栏”或者是 Android 5.0 之后加入的“全透明/变色栏”。至于所谓“沉浸式状态栏/导航栏”之类的描述,则完全是无稽之谈。

关于国人对于“半透明栏”和“沉浸模式”之间的误解是怎么产生的,我并不清楚,或许是当时某个科技网站的小编理解错误,翻译新闻时将两个东西扯在了一起;也或许是某个开发者在介绍透明栏时误以为“沉浸模式”是恰当的翻译,但总之,错并不是问题,知错不改才是问题。

如果你能理解这一点,请再也不要弄混这两个完全不一样的东西了。

揭开白色 Nexus 4 的面纱

一直以来, 我心目中最美的 Nexus 手机一直是 Nexus 4. 直到今天, 我还在使用它作为设计稿预览机, 并为它制作 Photoshop UI Kit. 不幸 (或者说是有幸?) 的事情是我的第一台 Nexus 4 在陪伴我两年之后电池开始鼓包, 音量下也已经完全失灵. 现在二手 Nexus 4 的价格已经算是白菜价了, 我便毫不犹豫地订购了一台白色 Nexus 4.

接下来就是开箱了.

_DSF0729

 

Nexus 4 的外包装. 和 Nexus 7 的盒子风格一致, 一看就是姐弟 (你懂的).

_DSF0730

左右两侧一样的 Nexus 4. 下面是 LG 的 Logo.

_DSF0731

感觉和 Nexus 7 的盒子后面一模一样的宣传文字, 只是把 7 替换成 4 而已…

_DSF0732

盒子底部贴着各种信息的条形码. 然后由于是 LG 代工所以 Made in Korea (咱 Nexus 7 就是霸气的 Made in Taiwan…)

_DSF0733

分离内外盒. 内盒很低调, 在相同的位置有一个 Nexus 的 Logo.

_DSF0734

中规中矩的摆放方式… (你还指望看到什么?!) 感觉好大, 比 Vision 大了两圈… 这就是 4.7″ 的威力么? O0O

_DSF0735

整个盒子手感非常好, 不像之前 Windows 8 的盒子那样松松垮垮的.

_DSF0736

盒子的内容物: 手机本体, 快速指南, 保修卡, 充电器, 数据线和 SIM 卡槽针. 什么, 你说没有耳机? 那当然啦, 这么便宜的价格你指望有耳机? 自己买去~

_DSF0755

来一张 Bling Bling (虽然图中完全没有 Bling…) 的后盖.

_DSF0754

对比下大小. 手边就这些设备. 从左至右… 不用我多说吧? ^v^

_DSF0756

除去保护膜, 新手机看起来就是漂亮… 和另外一些采用了 OGS 技术的手机不一样, Nexus 4 在这样的角度下还是很容易就能看出屏幕和机身的边界的.

_DSF0757

去掉保护膜之后的背面. 这个像素颗粒闪烁的效果很难用相机(或者说是我的相机太破了)表现出来.

_DSF0766

可爱的 LED 指示灯. 继承自 Galaxy Nexus.

_DSF0759

_DSF0760

开机. 屏幕非常精细. 嘛, 别去点大图, 这个精细度我觉得已经很够了… 之前撕掉 Vision 的保护膜的时候也觉得 Vision 的屏幕很精细, 结果和 Nexus 4 一比还是弱了…

 

稍微谈谈上手的感受吧. Nexus 4 的边缘很圆润, 虽然我喜欢直角, 但是圆润的边缘明显的好处就是握在手上的时候感觉非常好. 4.7″ 的屏幕对我这种从 3.7″ 一下飞跃上来的人来讲到底还是太大了, 手感不对(手感很”好”但是不”对”), 很容易按错小的按键. 好在 Android 4.2 的输入法对于输入的精确度并不是很高, 触宝也是. 想要单手持握且不改变握姿就触摸到屏幕左上角确实很有难度.

震动反馈感觉很好. 我以前一直觉得 HTC 那种非常刚劲的反馈是我最爱的(相反的是三星那软绵绵犹豫不决的反馈), Nexus 4 的震动反馈虽然没有那么刚劲但也算是毫不迟疑, 没有绵软的感觉, 可以说挺舒服的. 后背是玻璃所以不会像 Vision 那样大冷天的冻手…

_DSF0763

最后再来 BlingBling 一回

唉? 你还想看更多的内容? 唉呀唉呀这只不过是篇赶时间写的开箱文, 不要想太多啦~ 其他的内容, 我会在晚些的正式评测里写的, 包你满意~

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 上提供了非同寻常的使用体验,极具个性的动画效果,能为应用带来优秀的视觉享受。

Weibos

微博官方客户端(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 风格还十分简陋,都有很大的提升空间。

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

Android and iOS

What the f…?

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

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

以下是一些优秀的跨平台应用(图片来自 NovaDNG):

between 2

Duolingo 3

Instapaper 2

RB1

 

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

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

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

Talk is cheap,show me the…

OK.

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

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

于是我自己动手制作了一套猿题库重新设计的效果图,仅供参考。这只是一种尝试,我相信,肯定还会有其他比我更好的实现方法,关键是肯不肯做。

1.登录画面

vs1

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

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

2.引导界面

vs3

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

3.主界面

vs4

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

vs4.1

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

vs4.2

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

4.写题界面

vs5

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

vs5.5

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

写在最后

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

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

写在最后的最后

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

祝大家在 2015 年一切顺利~