Android Design in Action — 以知乎为例

Screenshot (1305)

知乎是一家创立于 2011 年 1 月 26 日的社会化问答网站, 产品形态类似于 Quora. 知乎于今年五月上线了一个 Android 客户端, 这个客户端在视觉效果上基本遵循了 Holo Theme, 在后续的更新中也展现出了向 Android Design 靠拢的意向, 可以说是国内 Android 客户端制作方面一个很不错的例子.

知乎方面尽管已经有意向针对 Android 进行视觉优化, 但是却没能使这个应用成为优秀的 Android 应用. 这个应用的设计依然有很多可以改进之处. 这次我就以知乎 Android 版本作为例子, 讲解一下应该如何改进一款”原本就有意向遵循 Android Design”的应用, 同时希望这个范例能给大家带来一些参考.

1. 最新动态 (首屏)

点击图片查看大图

第一步

2013-08-10 03.00.23_framed Home_framed

知乎的首页有四个类别, 分别是我的收藏, 最新动态, 热门问答和热门收藏. 作为一个普通用户, 我的习惯是先浏览完最新动态, 然后看情况切换到热门问答或热门收藏. 既然有四个类别, 其中”我的收藏”下还附带子类别 (收藏的分类), 我就决定采用 Drawer 取代 Scrollable Tabs 来作为导航方式. Drawer 的优势Scrollable Tabs 的劣势我在先前的文章里都说过, 此处略过不表.

既然决定采用 Drawer 作为顶级导航方式, 那么接下来的一些操作就是顺理成章的了:

加入应用 Logo 和 Drawer 标识;

去除 Scrollable Tabs;

把搜索按钮替换成 Android 标准样式, 知乎的颜色 (#1893de);

把 Action Bar 背景替换成更符合 Android 4.3 风格的, 没有颜色渐变的样式 (我去知乎的首页上取了个色).

以上是第一步的改进.

第二步

Home_framed Home Phase 2_framed

在我打算对列表内容进行调整时, 我突然意识到, 知乎在最新版中已经调整了边距, 变成了符合 Android Design 的 16dp (而在旧版中似乎是更窄的间距). 很好, 我的工作量又减轻了~

这一步, 主要是做一些视觉效果上的改进. 在 Android Design 中, 使用纯白和纯黑是要尽量避免的——现在, 越来越多的设备都用上了更加明亮的屏幕, 使用纯白的话很容易会让用户的眼睛感到不适. 所以我采用了较为柔和的 #eeeeee 作为背景颜色, 同时把问题原来使用的纯黑色换成了 #333333, 在保持清晰可读的同时降低了对比度. 另外, 原先回答摘要中的文字颜色 (#888888) 和新的背景颜色的对比略低, 于是我替换成了稍微深一点的 #777777. 另外, 作为知乎的一个特色, 我觉得赞成票数应该获得更高的视觉重量, 于是我加大了票数的背景色块字体和数字字号, 采用了更为美观的 Roboto Thin 字体. 为了对应左侧票数在视觉重量上的增加, 右侧的头像我也替换成了更大号的头像, 在平衡了视觉重心的同时凸显了知乎的社交属性.

在这一步我做出了这些改进:

采用浅灰背景;

采用非纯黑作为标题字体颜色;

采用深灰色的答案预览字体颜色;

将答案预览的省略号替换为简便淡出;

加大赞同者的头像 (200%);

加大赞同票数字号与背景大小;

将赞同票数字体换为 Roboto Thin.

以上是第二步的改进. 至此, 首屏的改进就差不多告一段落了.

2. 导航方式优化 (Navigation Drawer)

Navigation Drawer 在应用中原本并不存在, 所以没什么可参照的.

2013-08-10 03.00.23_framed Drawer_framed (1)

这样的对比应该算比较直观了. 我把原先位于 Action Bar 的”个人 (我)”功能入口添加到 Drawer 中 (我才不会告诉你这是我做微博客户端做多了之后留下的后遗症…). 另外, 收藏的入口我也做了简化, 让收藏分类可以直接从 Drawer 中访问.

由于这个导航方式是完全重做的, 我就不列出改进了.

3. 登录页面优化

第一步

2013-08-10 03.43.12_framed LogIn Phase 1_framed

首先我做的事情还是去除 Scrollable Tabs, 加入 Drawer 指示. 另外, 我把登录按钮做成了 Buttom Borderless 样式, 这种样式的好处就是他的位置会随着键盘的高度浮动 (而不是像普通的按钮一样被键盘遮挡).

我做了这些改动:

加入了 Drawer 和相关的东西;

把 登录按钮改为 Buttom Borderless 样式.

第二步

LogIn Phase 1_framed LogIn Phase 2_framed

做完上一步之后我踌躇了一下, 毕竟登陆界面是一个用户对应用的第一印象, 如果只是这么平淡的话难以对用户造成视觉冲击. 于是, 我从知乎网页版上挖了那张图片作为封面大图, 我觉得这张图的加入极大的提升了登录页面的视觉冲击力. 另外, “热门回答”的入口我用知乎的 Slogan “发现更大的世界”来替代. 而邮箱密码的文本框也移到了更下方, 更便于手指触摸.

在这步中做出的改进:

去除文本框背景;

去除注册按钮, 移入 Action Bar;

加入大幅题图;

加入”热门回答”入口;

把”注册和登录”简化为”登录”.

第三步 (小尝试)

LogIn Phase 2_framed LogIn Neo_framed

在做上一张图的时候我发现, 大幅题图的色调和 Action Bar 下方的阴影基本趋于一致 (废话, 这不都是从知乎网站上取的东西…), 我便觉得可以试试使用透明的 Action Bar, 结果没想到效果还不错… 我甚至还尝试了一种更为激进的方式

我做了什么:

把标准的 action Bar 换成了透明, 渐变黑色的 Action Bar.

4. 消息页面

第一步

2013-08-10 03.03.05_framed Notification_framed (1)

“消息”页面是新版知乎里最为让人觉得不知所云的页面, 顶端明明是三个 Fixed Tabs, 但是完全没有活动指示让人搞不懂自己现在到底身处何方, 这实在是令人感到匪夷所思. 于是我把 Tabs 改成了标准的顶栏 Fixed Tabs, 颜色和主体颜色进行了统一. 然后我又去了一趟知乎网页版, 发现 Android 版本的三个图标和网页版居然是不一样的…

Screenshot (1308)

于是我就去找了一套和网页版风格比较趋于一致的图标换上.

我做了这些事情:

加入应用图标和 Up 按钮;

加入 Action Overflow;

把 Top Bar 改成标准的 Fixed Tabs;

统一 Top Bar 的颜色;

把 Top Bar 中图标换为符合网页版和 Android Design 风格的图标;

第二步

Notification_framed (1) Notification_framed Phase 3

一些标准化的改动.

将白色背景改成 #EEEEEE;

将两边距改成  16dp (匪夷所思的就是知乎首页都已经改了为什么消息里没改…);

将清除通知的文字标签换成 Android 标准的清除通知图标;

将三个 Tab 图标的高度统一, 大小改为原先的 90%;

用 Google+ 的”Dismiss”按钮替代”清除未读”文字按钮 (感谢微博上 @不缺金or木 同学的建议~).

5. 答案浏览

2013-08-10 03.01.02_framed Answer_framed 2

在 Action Bar 和问题上方都放上问题, 而且 Action Bar 上的那个问题还是不可点击的, 这实在是让人感到困惑. 按照 Android Design, Action Bar 上这个文字触摸区的作用应该是 Up, 也就是返回到问题. 我把这个不知所云的标题改成了 Up + 图标 + 答案, 作用是返回到最新动态 (因为进入问题已经可以通过下面那个问题做到了).

我做了什么:

Action Bar 上加入 Up 按钮;

改变问题和答者资料的边距;

把票数改为 Roboto Thin, 颜色改为 #777777;

加入 Scrollable Indicator, 作为答案页可以横向卷动的指示.

顺便还有一个投票…

Answer vote_framed

 6. 问题页

Screenshot_2013-08-11-11-46-38_framed Question_framed 2

除了边距这种比较标准的改动之外, 我稍微调整了一下 Tag 的样式, 每个图标的颜色和透明度. 另外, Tag 后面的”…” Tag 和右箭头在语义上其实是重复的, 而且 Android 上是需要避免使用 iOS 式右箭头的, 于是我把他们合成了一个”更多…” Tag.

我做的改动:

边距改为标准的 16dp;

在 Action Bar 上加入 Up, 应用图标和当前页面位置;

改变 Tag 的样式, 使之更符合 Android Design;

改变图标的亮度 (#333333) 和透明度 (60% 不透明);

将邀请回答和添加回答的按钮换作 Android Design 标准图标;

改变数字字体为 Roboto Thin;

将票数标识改为符合首页的样式.

7. 设置页

2013-08-10 03.03.23_framed Settings_framed R

知乎的设置页就和 4.0.X 版本的 Play Store 一样, 色调和主界面完全相反, 让人感觉”眼前一黑”. 我觉得设置界面的风格还是和应用统一比较好, 所以也重画了一下.

我做了什么:

统一主题色调;

加入 Up, 应用图标;

将有无开关的设置项分为两类;

将没有开关的设置项行高度降低.

8. 个人信息页面

第一步

2013-08-10 06.55.03_framed Personal Info_framed

依然是诡异的 Top Bar, 还有边距问题. 改动的地方和前面基本没什么差别.

加入 Up, 应用图标, 当前位置, Action Overflow;

将编辑按钮换成 Android 标准按钮;

调整 Top Bar 为 Fixed Tabs;

边距调整为 16dp;

将数字字体改为 Roboto Thin;

图标的颜色改为 #333333 和 60% 不透明.

第二步

Personal Info_framed Personal Info_framed Phase 2

百密一疏啊… 听取了父上大人的建议, 把话题, 关注的字体换成了粗体 (Roboto Slab Bold), 另外感谢 rui 在评论中指出的, 我忘记去掉 iOS 风格的右箭头了.

我做了什么:

去掉列表右侧的右箭头;

将”我的”三个数值字体换为 Roboto Slab Bold.

总结

知乎是一个基础非常扎实的 Android 应用, 对它进行 Redesign 的过程非常愉悦. 这次 Redisign 中主要的改进之处有如下几个:

颜色, 包括文字, 图标和背景的颜色;

Action Bar 样式;

导航方式;

登录页.

而前面的改动中也含有一些我个人爱好在里面, 不过小处不影响全局. 还有很多配套的改变, 在这里我就不一并列出了.

最后放一下各个界面的最终对比效果图.

主界面

Home

Drawer

登录页

Login

消息提醒

Notification

答案浏览

Answer

问题

Question

设置

Settings

个人资料

Personal

下期的 ADiA 将会是另一个应用的 Redesign 挑战, 敬请期待~

Advertisements

35 thoughts on “Android Design in Action — 以知乎为例

  1. 现在设计里Drower的身影还是很少啊,基本上还只是谷歌Play系列和Gmail在撑大局,要想国内的设计者认同drower还是路漫漫其修远。

    Reply
  2. 整体修改后感觉很好,就像感觉是官方发布新版预告一样有点小期待,突然回过神知道可能等不到官方的更新又有点小失落。哈哈哈!

    说几个我的感觉:

    1 登录页大图及透明Action Bar非常赞,是我喜欢的风格。
    2 Navigation Drawer 被选择的选项背景色可以考虑:#e7f3f9
    3 消息页面Fixed Tabs的三个图标稍微大了一点,比例上稍显别扭(官方的又稍小了)

    4 问题页中部“添加回答”左侧的三角形按钮(这个应该是用作输入完成后的Enter/Go的意思)官方的气泡语义更适合,如果椭圆气泡不合适,可以换成圆角矩形的。

    Reply
  3. 还有个问题探讨下。登录页,输入用户名和密码时,软键盘会弹出,盖住登录按钮,造成填写后不能直接点到。 当然视觉上,redesign好看很多。

    Reply
  4. 被你这么一改,还真有了官方正品的味道,高端大气上档次。

    但现实是残酷的,哈哈。该死的知乎,不知道看没看你的文。

    Reply
  5. 不是完全认同您的 Redesign,改的太过头了,失去了知乎自身的设计特色了。我敢保证,知乎官方也绝不会这么改。

    Reply
      • Action bar 的渐变,您改成扁平化了。而网页版的导航栏和原来的 Action bar 风格是一样的,这样一改,很 Android,但却不是很知乎。另外您说到“然后我又去了一趟知乎网页版, 发现 Android 版本的三个图标和网页版居然是不一样的”,但是搜索图标您改成 Android 系统样式的。不知道这次知乎您是优先符合网页版风格,还是 Android 标准。当然很多修改我还是赞同的,比如说把收藏放进 Drawer,但是把最新动态和热门回答放里面操作起来会不会太麻烦了。

      • Action Bar 是 Android 应用之核心, 优先选择符合 Android Design, 另外这个颜色是从知乎的官网的顶栏取的, 算是保留了一些特色. 搜索图标的话我懒得自己画一个符合官方风格的, 于是就直接去素材库里拉了一个. 实际上我想要在遵循 Android Design 的前提下保持知乎特色, Android Design 显然是优先级更高的~

  6. Pingback: 如何评价锋客网文章《Android Design in Action — 以知乎为例》? - 用户体验 - 开发者第2242893个问答

  7. 我看了你的大部分文章,写的很是不错,当然也有部分偏激的内容。关于知乎Android客户端的reDesign也非常成功,在不改变知乎轮廓的情况下,加入了一些google app的设计思路,这么改动的话,知乎原本用的viewpagerIndicator基本被淘汰,navigationDrawer的好处很明显,Activity基本变成了一个panel,压力也小了很多,性能上应该得到了提高。字体方面的设计也非常令人喜欢。关于preferenceActivity我想说的是,国内这些做app的用了个人开发者的东西也不注明一下出处,实属无节操。你现在要推广的是Android Design,但是站在你前面的是一堆无知的产品经理,一群跟着ios风气的设计,和一帮子“土老板”,当你征服他们的时候,还有一群对设计不感兴趣的东方人。尊重平台习惯会增加很多成本,这一切归功结底还是取决于公司的决策者。期待你的下一篇关于微信reDesign的文章,这应该是一个非常浩大的工程,祝君早日完成!

    Reply
  8. 楼主做得很棒! 国内的Android design需要推动,目前在某国内大公司做产品,感觉到推广Android design的艰辛,对了?你是用什么软件做得redesign?axure?

    Reply
  9. 这下可以一窥楼主大神的品味了。登录页大图、提醒类内容的字体扁平化、Drawer和ActionBar组合导航并最大程度显示页面主题内容,以及满满的 Holo Theme风,完全和iOS区分开! 虽然不懂Android Design,但是一上眼便心动!能把一个已被熟悉的产品重新改造,并且逻辑清晰娓娓道来,并付诸实现,真厉害!

    Reply
  10. Pingback: Android Design in Action,对微信的重新设计 _ 人人都是产品经理

  11. Pingback: 对微信的重新设计 | 阳光雨露

  12. Pingback: 对微信的重新设计 | Digkoo

  13. Pingback: Android Design in Action — 以微信为例 | 另客网-官方博客

  14. Pingback: Android Design in Action — 以知乎为例 | 另客网-官方博客

  15. Pingback: AndroidDesign@Horizon总结 | Horizon

  16. 从disqus那边看,我约1年前在这里的评论看来被吞了。貌似 NovaDNG 对我在另一篇的评论也无动于衷,那么我再发一遍好了:bgm。tv/group/topic/27889

    Reply

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s