Material Design in Action — 丁香医生 Android 客户端

前言

丁香医生（原家庭用药）是国内最大的医学专业网站丁香园组织开发的，一款面向大众家庭的健康顾问应用，提供可信赖的医疗健康信息和服务。

该应用的 Android 版本在撰写此文时的最新版本采用了 Drawer + 顶部 Tab 这种较为符合 Material Design Guidelines 建议的导航模式。然而，丁香园 CTO 冯大辉（Fenng）在微博上表示，将在下一个 Android 版本中加上底部导航栏（Bottom tab bars）

事实上持放弃 Drawer（或者某些人口中的 Hamburger Menu）的观点的人似乎越来越多了。

如果实在无法说服他们，不如试试看底部 Tab Bar 到底做成什么样会更好吧。

——这是我的想法，于是就诞生了这次对丁香医生的 Redesign.

希望这个范例能给大家带来一些参考。

首屏

由于去掉了 Drawer，我对首页进行了比较大的改造，除了顶部 Tab 之外的地方几乎都重新进行了布局。

首先是 Drawer 的用户资料和非顶级视图部分，我将用户名与头像放置于工具栏左上方区域，将消息，收藏，设置等功能收入右上角的 Menu 按钮中以点击展开。后续又考虑到作为一款健康应用，家庭药箱和成员管理或许会更为重要，因此将其单独提出，和其他元素并排放置。

更多菜单项

搜索栏被放置于首页工具栏的中央，下文中会谈到使用这种设计的原因。

首页的主要部分仍然采用了之前的顶部 Tab 切换方式，且在向上滚动列表时会自动隐藏顶部工具栏的其他部分。 

在当前的版本中，新增频道功能被置于工具栏右上角，点击后会进入另一个次级视图，而在 redesign 时，我尝试将此功能做到顶部 Tab 的下拉菜单中，并且通过拖动相应频道的卡片以进行频道管理。

搜索

在当前的版本中，搜索功能作为一个单独的顶级视图存在，用户有至少三种方式激活此功能：

1.在首页向右滑动

2.点击工具栏右上方的“搜索”图标

3.拉出 Drawer，并选择“搜索”项

为了统一交互，我选择将一整个搜索栏放置于工具栏中央，同时添加了扫描二维码的快捷方式。这样不仅能够让用户快速地进行搜索，且因为搜索栏作为唯一的入口，同时也简化了交互逻辑。

底部 Tab & 发现 & 问问医生

Drawer vs Bottom Tab Bar 

此次 redesign 的重点就是这个底部 Tab Bar.

之前绝大多数采用底部 Tab Bar 的应用运行在采用虚拟导航栏（Navigation Bar，即屏幕内虚拟按键）的设备上会出现“多层下巴”现象。究其原因，个人认为通常是因为这些 App 采用和 iOS 上类似样式的底部 Tab Bar，从而让视觉上与虚拟导航栏产生一种“粘连”感，让用户产生“多重下巴”的错觉。

真的真的真的不是针对 HTC ...

为了解决这种视觉上的不适感，我采用了一种“悬浮”式设计，不与底部区域直接相连，且使用阴影以体现出层级关系。

“悬浮”的底部 Tab Bar

“发现”作为一个顶级页面，在 Tab Bar 上作为单独的 Tab 存在，点击即可切换。同时，为了能在一屏幕范围内显示更多的内容，我将原先的列表式界面更换成了类 Grid List 界面。

“问问医生”作为一个特殊的功能，和其他顶级页面在 Drawer 中并排摆放，但是点击后却会被带入一个新的界面中。为了避免对用户造成不必要的混淆，我将“问问医生”的入口做成了一个 Floating Action Button，且使用斜体文字标识以强化视觉提示。

最后，此 Tab Bar 在滚动列表时将不会隐藏。

文章阅读

原本的阅读界面其实已经很不错了，因此改进的空间并不是很大。我大体做了以下的改进：

采用 Translucent Status Bar

增厚了标题图片区域的阴影

采用 Chips 显示作者信息

增宽了底部评论栏

更换了评论图标

居中显示评论提示语

另外，我也将原有的标签图示更换成了 Chips.

在当前版本中，阅读界面只提供两级字体调节，略显单薄。于是我尝试着做了一个自由调节字体大小的界面。

总结

Redesign 到这里就差不多结束了。还有一些模块个人认为问题不是很大， 因此没有进行修改（或者说，懒）。总之希望这次的 Redesign 能够给那些觉得底部 Tab 更好的设计师或者 PM 或者高层们一些思路，即使要用底部 Tab 也不一定要做得和 iOS 上一样。

最后感谢冯大辉和丁香园为我们带来如此优秀的健康应用，希望今后这款应用的质量可以更上一层楼。