知乎是一家创立于 2011 年 1 月 26 日的社会化问答网站, 产品形态类似于 Quora. 知乎于今年五月上线了一个 Android 客户端, 这个客户端在视觉效果上基本遵循了 Holo Theme, 在后续的更新中也体现出了向 Android Design 靠拢的意向, 可以说是国内 Android 客户端制作方面一个很不错的例子.
但是尽管知乎方面已经有意针对 Android 进行视觉优化, 但这个 App 依然远不能算是优秀的 App. 这次我就以知乎 Android 版本作为例子, 讲解一下应该如何改进一款"原本就有意向遵循 Android Design"的应用, 同时希望这个范例能给大家带来一些参考.
1. 最新动态 (首屏)
第一步
知乎的首页有四个类别, 分别是:我的收藏, 最新动态, 热门问答和热门收藏. 作为一个普通用户, 我的习惯是先浏览完最新动态, 然后看情况切换到热门问答或热门收藏. 既然有四个类别, 其中"我的收藏"下还附带子类别 (收藏的分类), 我就决定采用 Drawer 取代 Scrollable Tabs 来作为导航方式. Drawer 的优势和 Scrollable Tabs 的劣势之气已经谈过, 这里不再赘述.
既然决定采用 Drawer 作为顶级导航方式, 那么接下来的一些操作就是顺理成章的了:
以上是第一步的改进.
第二步
在对列表内容进行调整时, 发现知乎在最新版中已经调整了边距, 变成了符合 Android Design 的 16dp (而在旧版中是更窄的间距). 因此这部分便不用再调整了.
这一步, 主要是做一些视觉效果上的改进. 在 Android Design 中, 使用纯白和纯黑是要尽量避免的——现在, 越来越多的设备都用上了更加明亮的屏幕, 使用纯白的话很容易会让用户的眼睛感到不适. 所以我采用了较为柔和的 #eeeeee 作为背景颜色, 同时把问题原来使用的纯黑色换成了 #333333, 在保持清晰可读的同时降低了对比度. 另外, 原先回答摘要中的文字颜色 (#888888) 和新的背景颜色的对比略低, 于是我替换成了稍微深一点的 #777777. 另外, 作为知乎的一个特色, 我觉得赞成票数应该获得更高的视觉重量, 于是我加大了票数的背景色块字体和数字字号, 采用了更为美观的 Roboto Thin 字体. 为了对应左侧票数在视觉重量上的增加, 右侧的头像我也替换成了更大号的头像, 在平衡了视觉重心的同时凸显了知乎的社交属性.
在这一步我做出了这些改进:
以上是第二步的改进. 至此, 首屏的改进就差不多告一段落了.
2. 导航方式优化 (Navigation Drawer)
Navigation Drawer 在应用中原本并不存在, 所以没什么可参照的.
这样对比应该算比较直观了. 把原先位于 Action Bar 的"个人 (我)"功能入口添加到 Drawer 中. 另外, 收藏的入口我也做了简化, 让收藏分类可以直接从 Drawer 中访问.
由于这个导航方式是完全重做的, 我就不列出改进了.
3. 登录页面优化
第一步
首先我做的事情还是去除 Scrollable Tabs, 加入 Drawer 指示. 另外, 我把登录按钮做成了 Buttom Borderless 样式, 这种样式的好处就是他的位置会随着键盘的高度浮动 (而不是像普通的按钮一样被键盘遮挡).
我做了这些改动:
第二步
做完上一步之后我踌躇了一下, 毕竟登陆界面是一个用户对应用的第一印象, 如果只是这么平淡的话难以对用户造成视觉冲击. 于是, 我从知乎网页版上找来那张图片作为封面大图, 我觉得这张图的加入极大的提升了登录页面的视觉冲击力. 另外, "热门回答"的入口我用知乎的 Slogan "发现更大的世界"来替代. 而邮箱密码的文本框也移到了更下方, 更便于手指触摸.
在这步中做出的改进:
第三步 (小尝试)
在做上一张图的时候我发现, 大幅题图的色调和 Action Bar 下方的阴影基本趋于一致, 我便觉得可以试试使用透明的 Action Bar, 结果没想到效果还不错. 我甚至还尝试了一种更为激进的方式.
我做了什么:
4. 消息页面
第一步
"消息"页面是新版知乎里最为让人觉得不知所云的页面, 顶端明明是三个 Fixed Tabs, 但是完全没有活动指示让人搞不懂自己现在到底身处何方, 这实在是令人感到匪夷所思. 于是我把 Tabs 改成了标准的顶栏 Fixed Tabs, 颜色和主体颜色进行了统一. 然后我又去了一趟知乎网页版, 发现 Android 版本的三个图标和网页版居然是不一样的.
于是我就去找了一套和网页版风格比较趋于一致的图标换上.
我做了这些事情:
第二步
一些标准化的改动:
5. 答案浏览
在 Action Bar 和问题上方都放上问题, 而且 Action Bar 上的那个问题还是不可点击的, 这实在是让人感到困惑. 按照 Android Design, Action Bar 上这个文字触摸区的作用应该是 Up, 也就是返回到问题. 我把这个不知所云的标题改成了 Up + 图标 + 答案, 作用是返回到最新动态 (因为进入问题已经可以通过下面那个问题做到了).
我做了什么:
顺便还有一个投票.
6. 问题页
除了边距这种比较标准的改动之外, 我稍微调整了一下 Tag 的样式, 每个图标的颜色和透明度.
我做的改动:
7. 设置页
知乎的设置页就和 4.0.X 版本的 Play Store 一样, 色调和主界面完全相反, 让人感觉"眼前一黑". 我觉得设置界面的风格还是和应用统一比较好, 所以也重画了一下.
我做了什么:
8. 个人信息页面
依然是诡异的 Top Bar, 还有边距问题. 改动的地方和前面基本没什么差别.
总结
知乎是一个基础非常扎实的 Android 应用, 对它进行 Redesign 的过程非常愉悦. 这次 Redisign 中主要的改进之处有如下几个:
而前面的改动中也含有一些我个人爱好在里面, 不过小处不影响全局. 还有很多配套的改变, 在这里我就不一并列出了.
最后放一下各个界面的最终对比效果图.
主界面
登录页
消息提醒
答案浏览
设置
个人资料
- 看不过瘾？点击下面链接！
- 金山傅盛：“拼爹时代”是更好的创业时代
- 纠结买哪样？看商品点评网“友评”怎么说
- 汽车之家CEO秦致：借助线下优势发展线上业务
- 百度站长平台用户管理功能上线
- 李开复：不要老想着成为下一个马化腾
- 搜索的下一步怎么玩？
