掘金 2.9 新版已上线,对 Tab bar 做了比较大的调整。我们先来了解一下掘金,这是一款面向程序员、设计师、产品经理的 App,在掘金每天都可以发现优质的文章。为了保证文章质量,每一位分享者都经过精心挑选,他们来自 BAT 等公司。
本次版本迭代耗时 3 周(1周设计,1周开发,1周调试)
这里主要分享首页 Tab bar 的整合过程。在分享前,我们来回顾一下掘金 1.0 ~ 2.8 的首页变化。
每次的版本迭代,我们对首页都有调整,但改动都不大。这个版本会稍微大一些。
这一次主要为了解决首页的信息呈现,以及让不同人群在首页能快速获取感兴趣的内容。
作为一个专业性较强的应用,用户打开 App 想要看什么文章,用户是很明确的,这不同于微信朋友圈。比如一个前端开发人员,一打开 App 就应该看到前端的分类。
如何更快速的看到关注分类,并快速刷完相关文章,是本次迭代的目标。
作为一款内容为主的 App,所有设计都是为了服务内容。1.0 到 2.0 版本是一个最基础的分类浏览。2.3 加入了标签的功能,用户可以通过关注感兴趣的标签,在首页展示呈现相关文章,这样就过滤了其他文章。2.4 有了人与人之间的关注功能,评论逐渐开始多起来,如果你看到一篇好文章,你可以关注分享者,你就不会错过他分享的文章了,也可以在动态里看到他的更多行为。2.8 有了热门推荐,是基于用户关注的标签来推荐的。每天打开都能看到被其他用户收藏最多的文章,你将不会错过被用户再次筛选出来的好文章。
当文章量逐渐多起来后,那些关注更多标签的用户,浏览文章的效率会降低。这是一个简单的判断,但还需要去验证。我们做了小范围的用户调研后发现:
用户不仅喜欢关注一堆标签,同时也会通过分类去浏览文章
比如我是一个设计师,同时我想学前端,我每天不仅想刷一下我关注的标签,还会刷设计和前端的文章。
如何在浏览区域不变的情况下,更好的呈现分类以便更直观的切换,这就是 2.9 需要去解决的。
上图红色框是浏览区域,现在我们焦点放到整个顶部,了解一下顶部各个入口的作用与重要程度及使用频率:
侧边栏的问题就是隐藏太深,使用起来并不便捷。虽然手机屏幕越来越大,也不能随便浪费空间,然而这里顶部一大半空间是被浪费的。通知和动态是可以合并的,搜索在这个阶段使用频率并不高。
于是我们开始进行重组,将相关性较强的入口合并,个人相关信息提出来,搜索和动态,分别放入发现和通知。将六个入口整合为四个:
调整后的结果,节省了更多的空间,可以为二级 Tab 预留好位置:
以下为加入二级 Tab 的整体效果,当用户滑动到首页最后一个 Tab 时,再次滑动将会进入发现页:
最近 Google Photos 在 Google+ 后,也开始用上 Bottom Navigation 了。不过现在我确实还没有准备好接受底部导航。Android 底部 Navbar 本身就有3个按钮了,再加上4个,一共7个。并且新版 Google Photos 评价不太好,而且使用底部后,浏览空间又会被占用一些。