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做的啊啊啊啊!

Advertisements

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

Android Design in Action —— 以落网为例

Screenshot (135)

 

落网是一个搜集介绍国内独立音乐的网站. 它的每一首歌都由人工推荐, 每一个主题都由落和他的伙伴们随心境打造 (一句话简介 by 刘文慧). 更多关于落网的资料, 请参看爱范儿对落网的报导 《不小心,落网》. 落网在一周前上线了 Android 客户端, 可以看出他们有意想要朝 Android Design 考虑, 但是不知出于什么原因 (推测是为了支持 Android 2.3), 整个应用非常的别扭, 控件的使用也很诡异. 这个应用的设计有着诸多可改进之处. 这次我就以落网 Android 版本作为例子, 讲解一下应该如何改进一款”原本就有意向遵循 Android Design”的应用, 同时希望这个范例能给大家带来一些参考.

这一次的主题是”保守”, 也就是说, 我不会在这次重设计中用上太多花哨新奇的效果, 都是中规中矩的改进.

1. 最新期刊 (首屏)

2014-04-22 17.30.34_framed Home_framed

落网的首屏采用了大号卡片流的呈现形式, 美观大方, 冲击力很强大, 我很喜欢这个设计. 就呈现形式而言, 我觉得并无不妥, 便没做更改.

将 Action Bar 颜色稍微加深, 改为落网网页版的背景色 #dddddd

采用标准的 Drawer Hamburger

将原 Logo 的圆形底座去除, 拿出天鹅作为 Logo

放大正在播放信息的专辑图片, 加入曲名, 艺人名以及播放状态指示

采用标准 Android 卡片

分离期刊号与期刊名, 期刊名改为落网品牌色 #990000

将评论与收藏数纵向放置, 颜色改为落网品牌色

加入 Contextual Overflow, 内含直接播放选项

采用 Translucent Navigation Bar

2. 导航 (Drawer)

2014-04-22 17.31.19_framed Drawer_framed

落网原先采用了撤去式 Drawer, 但是偌大的空间里只放了个人, 音乐, 收藏和设置四个项目, 显得空荡. 我保留了原先 Drawer 中项目的顺序, 留出了以后将会加入的播放器的入口.

采用 Google 官方 Drawer, 并让 Action Bar 上标题位置显示落网的名字

把帮助和反馈拉到 Drawer 中

将 Slogan 改为了落网品牌色

微调个人资料显示风格 (Play Store 风格)

给 Drawer 背景加入三段分隔颜色

3. 期刊分类

2014-04-22 17.34.11_framed Category_framed

原先的期刊分类给我一种索然无味的感觉, 如果仅仅是现实分类的名称文字的话完全没必要用 Grid List 啊… 于是我就做了一点大胆的尝试.

采用标准 Android 卡片

将每个分类加入对应的描述图片

(分类的图上有好多彩蛋…)

4. 专题详情

2014-04-22 17.30.42_framed List Detail copy_framed

详情页做得稍微大胆了一些, 主要是因为我觉得这个页面的布局太适合 Translucent 和 Multiplexed Action Bar 了.

将标题和期刊号放进 Action Bar 的标题处, 顶替原先并不重要的曲数信息

采用 Multiplexed Action Bar 和 Translucent Status Bar (卷动之后 Overflow 和播放按钮进入 Tabs 层)

加入标签信息

将播放按钮改成落网品牌色底座 + 白色图形

将评论, 收藏和分享放入 Action Overflow 以节省纵向空间

曲目列表专辑封面放大, 字号放大

5. 播放器

2014-04-22 17.38.25_framed Player copy_framed

其实我挺搞不懂的, 为什么其他界面都是亮色调, 唯独播放浮窗是暗色调呢? 所以我就把它改成了亮色调…

采用亮色调

曲名改为品牌色, 滚动显示

更多按钮改用 Overflow 样式

播放控制按钮改用 Android 标准样式, 并覆盖专辑封面颜色 (这个似乎很流行的样子)

播放进度控制采用标准 Android 进度条 + 把手

浮窗整体下移

其实我还做了另一个版本的播放器:

Player Drawer copy_framed

试着采用右侧 Drawer 作为播放器, 因为比起右上角播放状态按钮, Drawer 可以从右侧边缘直接唤出, 对大屏操作更为友好, 纵向空间充足而可以直接展开所有操作. 改动太明显了我就不说了 (其实只是偷懒而已). 有个需要强调的地方就是, 在制作 Drawer 里需要拖动的控件时, 请务必屏蔽 Drawer 的滑动关闭手势.

6. 评论

2014-04-22 17.31.46_framed Comment_framed

标题栏加入期刊标题

写评论按钮移至底部, 以 Quick Return 样式呈现

加大字号, 加大行距, 规范边距

加强对比度

将用户名改为品牌色

将时间与赞统一放置于用户名右侧

7. 设置

2014-04-24 03.23.42_framedSettings_framed

我不太明白为什么在设置里会突然出现一个 iOS 6 风格的开关…

移除重复的个人信息入口

将开关改为选框

采用标准 Android 列表分类

评分已经在 Drawer 里了, 所以这里就不需要了

总结

重设计到这里就差不多结束了. 播放器界面由于原应用里未完成, 我就没做. 自从完成了 Nexus 4 Mock Up 工具之后, 做这样的重设计就变得轻松愉悦… 果然是工欲善其事必先利其器嘛. 落网方面的人态度也很友好, 不知道什么时候能看到他们改进的成果~

另外, 这次我没做图标重设计.

例行的对比图:

Luoo 1

主界面

Luoo 2

Drawer

Luoo 3

分类

Luoo 4

专辑详情

Luoo 5

播放器浮窗

Luoo 5.5

播放器 Drawer

Luoo 6

评论页

Luoo 7 Kai

设置页

 

最后感谢刘文慧将落网推荐给我~

差评都是咎由自取

在经过了数天的公开测试之后, 腾讯 —— 这个一贯在 Android 上反应诡异的巨头 —— 终于把微信 5.2 头上的 Beta 帽子摘下, 让所有用户都可以升级到这个体现了腾讯对 Android Design 理解的版本.

紧接而来的确是一大波差评. 这些差评的内容大多很有趣, 摘录几条如下:

漫步天涯的浩子:大哥,用户界面敢不敢设计的再丑一点?! (今天 02:05)

龙二毛:有人玩微信都是一个手玩的,你把聊天,通讯录,还有发现移到屏幕上方,这是唱哪出啊?你觉得方便吗? (今天 10:45)

AllureSylvia:微信升级之后丑了一截,瞬间不想用了[崩溃][崩溃][崩溃] 你们到底有!没!有!审美啊??!整个画面那么僵硬,手机里原先的字体也不能完全转变,图片边框也整个僵硬掉,你们脑袋里都是砖头吗? @烦烦烦烦烦躁症 我终于知道你的字体……现在我的也是啊 [泪流满面][泪流满面][泪流满面]@腾讯微信团队 (今天 01:23)

Balderdasher:从微信刚刚诞生时候的诺基亚塞班一路用过来,这个版本堪称史上最差 (今天 01:04)

郑桶桶桶桶桶:刚更新完,哭晕在厕所……你们是年终奖太少所以才这样报复社会吗?! (今天 01:01)

还有很多不明所以的评价: 

不爱豆浆爱牛奶:睡前更新,早上起来发现界面变化有点大。只是和新版本的 QQ 有些神似→_→ (今天 09:35)

鲜鱿鱼味脆香饼:越改版越恶心!!!跟特么 qq 一样???越来越渣[呵呵] (今天 02:22)

从上面的差评和不明所以评价中, 很明显可以看出三点:1. 腾讯在微信更新之后, 没有给用户介绍新版微信到底有了什么变化, 该如何使用, 而是让用户毫无准备的面对一个 “全新的” 界面; 2. 从 iOS 6 Design 没有任何过渡直接跳转到 Android Design, 变化确实太大以至于很多用户难以接受; 3. “庸众”是用户的大多数, 这些用户甚至连 iOS 7 UI 和 Android Design 都无法分辨 (在他们眼中世界上似乎就只有扁平和 iOS 6 两种风格).

当然, 除了差评之外, 也有正面的评价:

王康 2812:实用性大大增强,就是界面还得花一段时间去适应 (今天 10:23)

Ryan 曾子言:终于回 Android Design 了,不得不说,这个版本超赞的,如果有黑色主题就更完美了 [good] (今天 10:15)

基恩 _TheLastSong:不爱用的直接卸了用以前的就完了,这个版本才是正统的 android design,一直用 iOS 7 的你不觉得就像一个男人穿了件女人的衣服一样不合适?(今天 08:31)

花爷爱魅族:吐槽的都是被无脑移植 ios 的版本惯坏了,这才是属于安卓的软件 (今天 09:28)

不管你愿不愿意承认, 大部分用户都是愚蠢而盲目的 “庸众”. 给他们任何一种设计风格用一阵子 (不对, 是很长的一段时间), 然后毫无预告的突然改变, 同时在改变之后也不给出任何使用提示, 他们中的绝大多数的都会嚷嚷着丑爆了, 要降级, 绝对不升级…

等等, 这一幕是不是非常的眼熟? 我们把时间倒回至 2013 年早些时候… 聪明的你一定已经会心的笑了吧? 没错,  哪怕是经典的 iOS 风格, 在经历了毫无预兆的突然改变 (对于很多 iOS 用户而言, 他们并不知道 iOS 7 有什么改变, 只是像往常一样, 看到设置上有一个未读角标, 就进去点了更新) 时, 它的用户都会觉得无法接受. 更何况 iOS 6 到 iOS 7 基本上只是视觉风格的改变, 核心操作逻辑并没有太大的变化 (而有变化的地方 —— 比如 Spotlight —— 则会让更多的用户感到迷惑), 而微信此番是连视觉到操作的彻底改变. 如此巨量的改变, 难免会让用户反弹.

不过且慢 —— 是谁造成了这样的状况? 在 Android 上, 使用 Android 风格的应用, 怎么又变成了 “巨量的改变”? 罪魁祸首究竟是谁呢?

看看吧. 哪些厂家从 Android 2.3 开始就一直在 Android 上采用 iOS 风格的 UI, 并且在 Android 进入 4.X 时代之后一直拒绝变化, 继续死守着 iOS UI? 是哪些厂家, 硬生生的把用户的 Android 手机改造成了视觉风格无比 iOS 的不伦不类的奇葩设备?

对于自己一手培养起来的, 只认 iOS UI 的用户, 腾讯在做如此巨大的改动的时候, 居然连一点 “新手教程” —— 没错, 这些从老微信升级上来的用户, 全部都得视为新手 —— 都没有, 从而导致引起这么大的用户反弹, 能怪谁呢?

其实上面那条微博里, 最经典的评论是这两句:

坑白:逗比 tx 自己把用户惯坏了 终于做一次人干的事 被不懂事的人喷出翔 (今天 07:46)

MobiFans:很多普通用户抱怨为啥不是旧的 iOS 界面了,不适应扁平化以及标准的 Android 设计规范操作方式,吐槽的比赞的多,用户的使用习惯都是你们给带坏的。 (今天 02:26)

这两条评论也是本篇题目的由来. 自己种下的孽障, 经由自己浇灌而结出的苦果, 最终只能由自己来吃下. 不过, 反正微信对于很多用户而言已经是不能缺少的存在了, 这些用户一边吐槽着, 也只能一边用, 不爽的卸了装旧版 —— 就和大多数用户对待 iOS 7 一样, 在不久之后, 等他们习惯了这套 UI (并且发现其实 Android 上的应用本应如此) 时, 他们就会像那些现在用着 iOS 7 并且觉得很好的用户一样, 不再吐槽和抱怨了. 所以说, 用户都是贱人, 作为开发方, 不是强奸用户, 就是被用户强奸.

亡羊补牢, 为时 ___?

Android Design in Action —— Multiplexed Action Bar

我想锋客网的读者们应该对 Google+ Android 客户端都不陌生吧. 这个应用算是一个非常中规中矩的 Android 展示应用. 这次我就以 Google+ 个人资料页面作为范例, 展示一下 Multiplexed Action Bar 的一般用法. 关于 Multiplexed Action Bar, 即复合式 Action Bar, 可以参看我之前写过的一篇文章.

这是 Google+ 原先的模样. 非常标准的 Action Bar, 非常标准的 Image View, 下面是头像, 名字, 圈子, 最简单的一些信息, 然后是 Sticky Header Fixed Tabs. 在用户向下卷动这个列表之后, Fixed Tabs 会和 Action Bar 一起停留在顶部.

在早些时候, Google+ 上的用户 Greg Hesp 对 Google+ 进行了一番 Redesign. 但是他的重设计并没有很好的利用到 Android 4.4 提供的 Translucent Bar, 很多地方的度量不够严谨, 而且变更也仅仅是停留在了表面. 于是我打算自己做一个重设计.

在还没经过仔细思考的情况下, 我就开始了我的第一次尝试. 我做的改动主要有:

套用了 Android 4.4 的 Translucent Bar;

采用 Multiplexed Action Bar 把  Action Bar, Cover Page 和 Fixed Tabs 整合在一起;

Fixed Tabs 文字的颜色在激活时是白色, 未激活的话是 #eeeeee, 并且有 1dp drop shadow 作为背景防护;

在卷动之后的状态下, cover photo 会变暗 50% 以免白色图片影响文字阅读;

去掉了圈子和简要信息, 我认为这两个东西只要在 About Tab 里显示就足够了.

这两张图发到社区之后, 反响平平. +Oscar Mark 认为我应该把 Hangout 按钮放在头像旁边. 于是我做了另一个尝试.

我做的改动:

把圈子加了回来, 放在头像左侧;

把 Hangout 按钮移动到头像右侧;

将底部 Nav Bar 换成透明的;

规范 Fixed Tabs 栏的高度 (48dp).

等等, 似乎有什么不对劲的地方 (那个 typo 请无视)… 按照 Oscar Mark 的想法, 圈子按钮和 Hangout 按钮应该要移动到 Action Bar 上, 但是头像要移到 App Icon 的位置… 很不妙啊这个动画. 于是我又打开了 Photoshop.

嗯, 这样看起来就好多了, 至少不会出现”交叉”的动画效果了. 我做的改动:

把头像移到左侧三分线处;

把两个按钮移到头像右侧;

增大按钮的字体, 加入 1dp drop shadow 作为背景防护;

在卷动之后, Hangout 和圈子按钮会并入 Action Bar.

到这一步的时候其实就已经差不多了. 但是在 Play Newsstand 里面, Fixed Tabs 是没有分割线的. 另外, +Hugo BALLESTER 觉得, Hangout 按钮和圈子按钮应该直接用白色的. 于是…

只剩下一些小细节的调整了 (迷之声: 而且你终于修复了 typo, 妹得大喜):

图标的颜色改成标准 Android 样式, #ffffff, 80% 不透明;

把 Action Bar 上图标的大小统一;

去掉了 Tabs 之间的分割线.

做到这里, 基本上就可以算是完成了. 上对比图:

明显可以注意到, 原先的个人资料页下, 完全没法看到一篇帖子/任何个人资料, 我认为这是一个非常脑残的设计. 重设计之后, 至少可以看到第一篇帖子的大部分了.

卷动之后的状态下, 新设计的资料页的 Action Bar 可以实现更多功能, 当用户向上卷动列表的时候也不会被时不时弹出来的 Hangout 大黑条给烦到.

另外还有一些需要注意的地方.

仔细观察 Up 被按下时的高亮区域和 Tabs 的 overscroll 特效高亮区域, 你会发现, 这个 84 dp 高的 Multiplexed Action Bar (收起状态) 中间有一小片区域 (12dp) 是 Action Bar 和 Tabs 共用的. 但有趣儿的地方是, 当你在这”公用区”点击时, 触发的操作是 Up 而不是切换 Tabs. 也就是说, 在逻辑上, Action Bar 依然是覆盖在 Tabs 上的 —— 你可以把 Action Bar 看成是一个完全透明的覆盖层.

既然 Action Bar 是一个透明的覆盖层, 我们就可以放心的往它下面塞图片了. 比如我在上面的重设计中, 把头像放到了 Action Bar 下面.

 

还有一句不得不提的话: 任何设计样式都不是万能的, 有其适用与不适用的地方. 千万不要为了设计而设计, 在不该套用 Multiplexed Action Bar 的地方套用它.

另外, 我毫不怀疑 Google 能拿出更好的设计来打我的脸, 所以欢迎打脸~

八月总结 —— 关于重设计与一致性

在经历了一场台风雨几次大雨之后, 厦门的空气里也渐渐有了几丝凉意. 相信我和很多人一样, 在刚刚过去的八月里经历了非常多的事情: 有邂逅有分散, 有重聚有别离, 有鼓励有中伤, 认识了新朋友的同时发现和老朋友变得疏远, 获得了赞许的同时也收下了不少的批评, 树立了新的偶像的同时见证了曾经的偶像的倒下, 学习了各种各样的东西, 三观经历了重塑… 当我将月历翻到新的一页时, 上个月经历的种种不禁涌上脑海.

好吧, 我写这篇文章可不是为了感叹时光如白驹过隙, 或者伤春悲秋, 这篇文章的目的还是要总结一下这个月发生的事情, 以及我的思考.

重设计

从月初开始, 我就决定正式开始制作一份具有参考意义的应用重设计. 最后决定第一次的尝试中选择两个应用做例子, 基础扎实的知乎和零基础的微信. 为了做好这个尝试, 我又认真的去看了一遍往期的 Android Design in Action 节目, 而且很认真的重读了 Android Design. 动手之前, 我再次明确了目的: 做出具有参考价值, 符合 Android Design 规范的应用, 为开发者和设计师提供一个新思路, 并借着重设计来介绍一些当前流行的设计方式.

做完了这些准备, 我便开始动手.

虽然说知乎 Android 客户端的基础很好, 但是要做一个完整的 Redesign 还是有些麻烦的. 由于完全是我个人的工作, 所以在 Redesign 的过程中, 遇到所有的问题都是以我个人的风格来解决的. 实际上, Android Design 是不可能完全覆盖到这些小问题的解决方案上, 对于这些问题, 更多的是体现了我对 Android Design 的理解.

当然, 在试图尽可能的让应用符合规范的同时, 也暴露出了我对知乎的设计理念的不理解.而且, 对于我目前了解的知乎而言, 似乎没有什么知乎特色的交互方式. 但是面对这个问题, 我还是比较坦然的 —— 让设计规范和品牌结合, 这是公司的事, 我暂时不想去想.  所以在品牌化方面, 我就选择只保留了颜色方案. 至于其他的问题, 就交给知乎去解决吧.

这个重设计的后续是, 在月底我去北京的时候, 知乎更新了. 很明显能看到的改变是渐变的 Action Bar 变成了纯色. 比较有意思的是这一点反而不是特别重要的, Google 在自家应用里也用了渐变色的 Action Bar (区别是 Google 那个渐变色实在是非常细微, 没取色之前我甚至完全没意识到). 还有一点, 他们用上了 Google 最新的下拉刷新样式, 而不是 iOS 式的橡皮筋特效, 这点也是令我感到颇为赞赏的, 可以说, 不愧是知乎, 我没看错.

微信的重设计就不是”有些麻烦”的程度了, 而是”麻烦透顶”. 每一个控件, 每一个屏幕的内容都需要完全的重来, 没有任何商量的余地. 也就是说, 我从最开始画 Action Bar 这个框架到往里面填上最后一点内容, 期间所有的东西都是我自己做的.

这时候也许就会有人跳出来说了: “你说这些都是你自己做的, 但还不都是从别的应用里抄来的?”

这个问题, 我在后来翻译的另一篇文章里就提到了答案: “在 Android 系统中本来就已经有足够用且简明扼要的开关了, 所以干嘛要自己再去搞一个? 而且像垃圾桶图标这样的东西也已经有很多了, 所以干嘛要自己再去画一个?”

问题的答案很简单: 我觉得这样的交互很好, 没必要做一个新的. Hangouts 式的对话框, 有它自己的特效, 看起来很活泼, 比起原本的不明所以的固定宽度的窄气泡, 空间利用率更高, 而且看起来也更加清晰, 便于阅读. Google+ 式的 Drawer 结构其实是很合理的布局方式, 利用大号题图把常用操作下移 (原本我的设计中, 把”个人”放在最上方, 也是出于这个考虑. 而且从去年起, 我在设计 Drawer 的时候就会下意识的将常用操作下移). 这样的设计现在成为了魅族发布会中用以宣传用户体验的筹码, 而我完全不觉得硬生生地在顶端加入一条空白是最佳的解决方案, 正如我完全不觉得 Smart Bar 会是大屏操作的最终解决方案一样. 那么, 既然 Google 给出了这样的范式, 又比我原来的设计看起来美观, 而且还能整合朋友圈的入口, 为什么不这么做呢?

如果你去看过 Android Design, 你会发现有一个章节的名字叫做 Building Blocks. 技术上一般翻译为组件, 直译过来就是积木. 对于大多数 Android 应用而言, 类似导航方式对话框这些东西都是共通的, 甚至也有两个”使用的组件完全相同”的应用. 这又怎么样呢? 两个小孩用相同的一套积木都能拼出截然不同的作品啊. 对于我而言, 可以通过现有的素材节省工作量, 那是再好不过的事情了. 本来做微信 Redesign 就已经让我变得很烦躁, 这个时候还要自己设计新的对话列表, 绝对会让我精神崩溃的. 比起这些东西, 我的精力更多的放在了 Drawer 这个全新出现的东西上.

还有一类经常被提出的问题是关于 Drawer 的问题. 很早之前我就说过, “想要让 Drawer 发挥最大的效果, 合理的设计应用的层级结构是非常重要的. 如果一个应用的层级结构很糟糕, Drawer 也是救不了它的. Drawer 不是万灵药.” 所以, 在用 Drawer 之前, 我先重新规划了一下微信的层级结构, 最终利用 Drawer 实现了减少导航次数, 增加导航便利性的意图, 而这两个效果正是 Drawer 最大的便利性. 如果我只是单纯的照搬原来的模式采用 Fixed Tabs, 那么导航依然会很复杂, 层级结构依然会很混乱, 没有任何好处. 同理, 知乎中采用 Drawer 也是为了一样的目的.

另外, ADiA 的 Redesign 尝试当然不会就这么结束的, 经过一个月的休整, 这个月还会有新的应用接受 Redesign 的.

一致性

这个月的另一件大事就是 Android 设计界对于一致性的讨论. 这个讨论始于雅虎天气的升级. 讨论在 Android Design 的创始人, Matias Duarte 发话的那一瞬间达到了最高潮.

实际上, 雅虎天气这个应用, 完全是可以变得更符合 Android Design 的, 而且只要做一些微调. Taylor Ling 就做了个很靠谱的重设计, 而且我觉得这个重设计比原本的样子要好看太多 (如果要我来改, 我估计也会改成这样. 我觉得不太满意的地方只有 Indicator 那里, 让我来做的话估计会改成在状态栏下方而不是 Action Bar 下方).

对于一致性, 我也有很多自己的话想要说. 现在, 国内的设计师和开发者大多都不重视 Android Design, 也许是 Android 2.3 以及之前的时代里 Android 上的设计平均水准给他们留下了过于惨烈的印象, 或者有其他什么别的原因, 他们一个个嚷着”Android Design 的易用性不如 iOS Design”, “Android Design 不如 iOS Design 好看”, “Android Design 太不成熟”等口号, 或者从 iOS 上照搬 UI 和交互, 或者自己创造奇怪的交互, 把用户的手机当成了不负责任的一个实验台. 在这里, 我先放下一句话:

Break the rules, sometimes. But learn them first.

怎么理解这句话? 直译就行了: 有些时候规则是可以违打破, 但是在那之前, 先认真学习好这个规则!

道理就是这么个简单的道理. 当你想要超越规则的时候, 前提就是你必须先了解这个规则. 未来总是建立在过去与现在的基础之上, 没有过去和现在, 谈何未来? 更先进的设计总是建立在现有和以往的设计之上, 就比如现在各种被玩坏的扁平化, 让我们回头看看瑞士设计和纽约的地铁站牌, 这些东西都为 Metro UI 这样的优秀的扁平化设计提供了扎实的基础, 而苹果在拟物化 UI 上的数十年的积累, 才造就了 iOS UI 的精致.

好了, 某些设计师, 不愿意学习现有的规则, 想要凭空创造出一种”超越现有设计的设计”, 现在看看, 不觉得很可笑吗?

从另外一个角度来看问题. 作为一款 Android 应用, 如果能完全做到符合 Android Design 的要求, 那么必然不会难看或者难用. 已经有无数的应用证明了这一点. 然而, 现在很多开发者或设计师对 Android Design 的理解还停留在”Holo Theme”这个视觉样式上, 忽视了 Android Design 对于 UE 和其他各方面的指导, 然后出了问题, 就盲目的责怪 Android Design. 这样的应用, 只要仔细对照 Android Design 进行检查, 总是会发现各种各样的问题, 等到这些问题修复了之后, 这个应用就至少会达到不难看不难用的级别.

也有很多人说: 如果一味的遵循 Android Design, 是不可能开发出最优秀的应用的. 这个时候, 在这个完美的时间点, Timely 跳出来给了他们一个狠狠的耳光. 事实就是, 当你用心的钻研 Android Design 并且拥有强大的技术实力的时候, 开发出平台上最优秀的应用完全不是个问题. 这点, 不单是在 Android 上, 在其他平台上也一样是适用的. 带着镣铐跳舞, 只要你有实力, 也能跳得很美. 地图炮: 开发不出漂亮好用的应用就去责怪平台的 Guideline, 这种事情只有三流开发者才会做. 

那么又有人说了, 如果我遵循了 Android Design, 那么 iOS 用户看到这个应用不就抓瞎了?

Android Design 中有这么一句话: 假设你的用户聪明又能干. 这, 可以说是整个设计的大前提之一. 不要认为用户都是傻瓜. iOS 设计和 Android 设计虽然样式会有所不同, 但是只要一个应用它的交互核心逻辑是相同的, 用户就没那么容易不知所措. 如果你在两个平台上采用了完全不同的逻辑来设计应用, 这个时候才会让来自其他平台的用户感到困惑. 保持一致性, 很重要的一点就是保证你的应用在不同平台上的设计, 交互逻辑是一致的, 而不是盲目的附和原生应用的逻辑. 这句话, 姑且算是地图炮吧.

说到底, 一致性究竟要如何来保持? 说起来很简单: 在将不同平台的设计规则烂熟于心的前提下, 精炼它们, 以此达到超越各平台规范的高度, 在这样的高度下, 创造出符合自己应用特色而又不违背各平台规范的交互方式. 说起来简单, 做起来就难了. 目前为止做得最好的就是两家: Pinterest 和 Flipboard. 其他厂家可以说无出其右 (这里我本来要说 Path 的, 但是最近 Path 放出了 Windows Phone 版本的演示视频, 看过之后, 我决定让它下榜), 另外, Google 在 Maps 上采用的新设计也是非常好的例子.

总之, 就保持一致性而言, 最愚蠢且不负责任的方式就是生硬的把一个平台的 UI 搬运到另一个平台上. 不单单是一致性这个问题, 任何试图把一个平台上的东西生硬的搬运到另一个平台上的行为, 都是愚蠢的. 如果你没有实力超越平台的规范, 那就不要试图去超越, 通过别的方式寻求保持一致性的方案, 独特的用色也好, 独特的图标也好, 独特的导航也好, 独特的逻辑也好, 都比生搬硬套强.

 

过去的都已经过去了, 总结过去是为了更好地开拓未来. 写完了这些东西, 我就差不多该着手准备下一次 ADiA Redesign 了. 我的收获与体会, 也应该会在其中得到体现吧.

Android Design in Action — 以微信为例

Screenshot (1311)

微信是腾讯公司于 2011 年 1 月 21 日推出的一款跨平台类 Kik 即时通讯软件. 目前已经有逾三亿用户, 功能也日趋丰富.

微信作为一个用户量极大的”超级 App”, 其 Android 客户端一直沿用 iOS UI, 在 Android 4.X 时代, 国外各大互联网厂商纷纷按照 Android Design 重新设计自家应用时, 腾讯没有丝毫这方面的想法, 依然”我行我素”的在 Android 上使用 iOS UI. 其在 Android 平台上的所作所为以及其设计师的不负责任言论对国产 Android 应用产生了极为深远的负面影响.

相对基础扎实的知乎而言, 微信这么一个没有任何设计基础的应用, 我们需要做的是——从头开始进行设计. 没有半点偷工减料的可能性, 容不得半点偷懒的想法. 这次我就以微信为例子, 讲解一下应该如何重做一款”原本就没有意向遵循 Android Design”的应用, 同时希望这个范例能给大家带来一些参考.

1. 最近对话

2013-08-12 11.34.59_framedHome_framed phase 2

既然要重新设计, 那就彻底推倒重来.

试用了一下微信之后, 我决定采用 Drawer 作为导航方式. 微信的导航层级非常多, 很多重要的功能都被放在二级或者更多的层级下, Drawer 的采用显著的减少进入常用功能入口需要的操作次数. 为什么不用 Fixed Tabs? 其实还是怕上方元素过多重心不稳, 而且四个 Tabs 的话会显得略微拥挤 (官方建议是三个或以下… 我是完全不觉得四个 Tab 拥挤啦).

Action Bar 的颜色是这么来的: iOS 版的微信更新了一个新图标 (Android 版本似乎也随后更新了), 我从那个图标的 iOS 7 版本 (没有”水滴高光”) 的顶部和底部各取一个颜色作为主从色调 (其实和知乎的 Action Bar 处理思路是一致的).

iOS

微信的 iOS 新图标

现在的未读通知实在是太 iOS 风了, 于是我自己做了个未读通知样式: 列表左侧 4dp 宽的指示条, 头像变暗 50% 并加上马赛克风格遮罩, 其上显示未读计数.

另外, 语音信息原来就是单纯的显示 [语音], 让人感到很无趣, 我自己做了一个语音的波形图案来代表语音信息. 原来搜索放在顶部, 但是会随列表滚动而不是保持在顶部或者做成 Quick Return 样式, 实际意义不大. 我用搜索按钮代替它. 还有, 我加入了一个表示时间区间的旗帜提示条. 并没有太大的作用, 有点画蛇添足吧…

2. Navigation Drawer & 发现

2013-08-12 15.13.36_framed Drawer_framed

我注意到对于很多用户 (比如说我妈和她的同事, 朋友们) 而言, “发现”分类下的三个功能实际上都是非常常用的, 而它们现在位于二级菜单中,不便于导航. 而采取 Drawer 之后, 就可以做到直接从这些功能的页面进入最近对话等一级菜单的功能中. 而且, 这个 Drawer 被设计为在二级页面中也能唤出的, 它的采用能再次提升应用导航的便利性.

采用 Drawer 还有一个好处就是原来的”发现”和”我” Tab 可以被取消掉. 原本的”发现”和”我” Tab 功能十分鸡肋, 实际上就是两个导航枢纽 (Navigation Hub). 所以我选择将”我” Tab 中的内容放进头像旁 Spinner 展开后的菜单中 (这些功能比起”发现”中的功能, 往往更少被使用到), 而”发现” Tab 下的功能则得到了优先级提升, 可以直接从 Drawer 中访问. 还有一点就是, 在我看来, 新增加的”表情商店”比起”我”更适合放在”发现”下.

另外, 图标也经过了全新设计. 这次的用色对于我而言是一个挑战, 期间也得到了来自 Suiyoubi 的指导. 新的图标采用饱和度和明度都相对较低的配色, 三个一级页面的图标采用冷色, 而三个次级页面采用暖色. 次级页面下我使用淡绿色的背景和绿色的左侧指示条让这次的 Drawer 不至于显得很单调.

Drawer_framed Drawer G+_framed

我还做了一个参照 G+ 4.1 版本的 Drawer, 把朋友圈的个人题图放进 Drawer, 然后去掉了”发现”下的朋友圈, 改为从题图进入.

3. 通讯录

2013-08-12 15.17.23_framed Contacts_framed phase 2

联系人界面我参照了 Android 自带联系人进行设计, 将头像放大, 同时给个性签名更多空间. iOS 风的字母 Index 则用 Android 标准的 Indexed Scrolling 代替. 碍事而且不好用的搜索栏依然移到 Action Bar 中.

4. 对话界面

第一步

2013-08-14 14.26.36_framed Conversation_framed

(由于我懒得打那么多对话所以我就用键盘遮住了一半屏幕…)

对话框的风格参照 Hangouts 来进行设计, 保留了微信原来的对话框和头像的布局. 之所以选择 Hangouts 是因为短信的对话框太平淡了, 没有 Hangouts 这样的活跃感. 原先微信采用了浅黄色背景, 但是感觉和主题不是很搭调,我将背景颜色替换成了淡绿色.

第二步

Conversation_framed Conversation_framed m

观察了一下微信的对话框, 发现原本微信对话的右边距大得可怕. 考虑到”对话”的连贯性, 我不打算采用那么大的边距, 但是还是适当的增加了一下边距的大小. 另外还有重选了一套”更多功能”中的图标 (因为很懒所以随便给搞了几个). 还有, 为了强调”右滑返回”, 我给界面左边缘加入了一个小把手.

5. 朋友圈

2013-08-15 09.48.14_framed Timeline_framed

 设计朋友圈页面的时候其实也没有想太多. 朋友圈的最主要目的就是看照片, 赞和评论. 于是我在排版上借鉴了 Play Music 的艺人题图呈现形式 (Fading Action Bar) 还有 Google+ 的卡片流, 在信息流里加入更大的照片和头像, 把”评论”和”赞”功能直接拉出来 (原来的话需要先点击那个小气泡再选择评论或赞). 另外对于不能完全显示的照片, 我借鉴了 Zagat信息流设计, 让发照片人的头像第一时间显示在时间轴底部, 而个人信息和”评论”, “赞”都浮于照片上方的半透明渐变面板上.

 Timeline_framed Timeline 2_framed phase 2

这是卷动后的效果. Action Bar 在卷动中显现.

6. 扫一扫

第一步

2013-08-13 10.02.59_framed Camera Options_framed

我和 Suiyoubi 在”扫一扫”界面上下了不少功夫. 在一番讨论之后我们达成共识, 既然是”扫一扫”, 那么相机界面就应该是绝对中心, 微信本来就采用了半透明的功能菜单和 Top Bar, 我们干脆把这个设计贯彻到极致, 采用了大胆的渐变透明 Action Bar, 并摒弃了屏幕上的切换功能 (我认为大多数用户是应该不会频繁的在这些功能间切换的, 只需要在进入是给出选项即可).

Image Credit: 乌丸渡NOT LIVES.

第二步

Camera Options_framed Camera_framed

后来我们决定采用更加激进的方式, 摒弃选项对话框, 直接进入常用功能 (现在的微信”扫一扫”功能也是一打开就默认进入二维码扫描), 其他功能则采用 Scrollable Tabs 进行切换 (虽然说昨天我才说过 Scrollalble 的劣势, 但是一个东西的价值不能轻易彻底否定).

Scrollable 比起 Fixed Tabs, 占用的纵向面积更小. 而我们希望这个 Scrollalbe 是可点击式的, 这样就不会离原先的设计太远.修改完成之后, 整体效果比原来好了不少.

7. 初次启动画面 & 登录画面

2013-08-15 15.29.15_framed Welcome_framed

欢迎画面的设计一定程度上受到了 iOS 7 的影响, 我去掉了原先按钮的边框, 将它们变为 Bottom Borderless 的样式, 一方面增加了触摸范围, 另一方面变得更加美观.

2013-08-15 15.46.44_framed Login_framed Phase 2

做登陆画面的思路和知乎那边是一致的, 我希望能够给用户带来视觉冲击. 至于那些更新说明什么的, 我懒得重画 (因为每次都不一样…).

我希望做到的效果是, 初次启动画面向上平移到预定位置, 同时登录窗从下方浮入, Faded Action Bar 从上方浮入.

8. 主屏图标 & 通知栏图标

其实微信的图标要改起来也不难, 只要把底座去掉就成了. 我借用了一下 Android Asset Studio 的图标生成工具做了一个具有一定立体感的图标.

ic_launcher_XXHDPIweixin_logo Whitepng 拷贝

至于显示效果嘛…

2013-08-15 08.31.50_framed 2013-08-15 08.31.50 拷贝_framed Phase 4

好吧我承认我又偷懒了, 通知栏图标看起来有种吃撑了的感觉, 不过大小很好调整的 (只是我懒得调整罢了). 但是这效果至少比原来那个好一点吧…

总结

早在半年以前我就想要对微信进行重设计了, 但是由于种种原因 (主要还是懒) 没着手做事. 现在手头有了充足的资源, 我对 Android Design 的理解比起半年前也有了明显的进步, 差不多是时候开始补欠下的作业了.

对微信进行重设计的过程十分痛苦, 每个界面都需要从头到尾重画, 没有任何能直接利用的资源. 但是完全重新设计也有一个好处, 就是可以完全不必顾虑应用原本的形态和样式, 自由的发挥. 由于是完全从头设计, 做出的改变就不列出了.

这里再多嘴说一说上次的知乎 redesign 发布之后我的一些想法吧. 重设计作为我的个人作品, 必然是优先体现我的个人风格和 Android Design, 而如何更好的彰显品牌特性这种事情应该交给软件公司去做, 而不是我. 比起画好看的图标, 我更注重这些元素在视觉上的搭配和位置是否正确, 会不会起到吸引用户注意力这方面的事, 这也是我和 Suiyoubi 为了 Drawer 中图标的配色和形状, 摆放等问题讨论了一个下午的理由. 而画好看的图标的任务, 请交给美工.

另一方面, 我对代码的实现完全不感兴趣, 因为同样一套交互方案, 有的开发者能用简洁漂亮的代码流畅的实现, 有的开发者就要用数倍于前者的代码量实现, 而且实现的效果还很差劲. 我可以很负责的说一句, 在我设计中出现的所有交互方案和思路, 都可以通过现有的代码理想的实现, 就看开发者的水平如何. 作为一个文科生, 我经常逛 GitHub, 对于哪些交互能够实现有清醒的认识.

这次我没画设置页, 因为这个页面画出来效果基本会和上次知乎的设置页效果差不多, 我懒得画 (说到底还是懒的问题嘛!)(不过虽说如此我还是准备了一套绿色调的设置用图标)…

2013-08-15 08.31.50_framed

这次重设计的过程中得到了很多人的帮助, 有来自团队内部成员 Suiyoubi 的用色指导, 有来自团队外部流水姐的各种建议等. 相信在大家的帮助下 ADiA 这个栏目会越做越好的.

最后照例是对比图, 不过这次的对比图没什么意思 (就像是拿一台长得像 Nexus 4 的 iPhone 和一台 Nexus 4 对比一样), 权当参考吧.

主屏图标 & 通知栏图标

Icons

欢迎页

Welcome

 

登录页

Login

最近对话

Home

发现 & 导航抽屉

Drawer

通讯录

Contacts

对话

Conversation

朋友圈

Timeline

扫一扫

Camera