前言
丁香醫生（原家庭用藥）是國內最大的醫學專業網站丁香園組織開發的，一款面向大眾家庭的健康顧問應用，提供可信賴的醫療健康信息和服務。
該應用的 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 & 發現 & 問問醫生
此次 redesign 的重點就是這個底部 Tab Bar.
之前絕大多數采用底部 Tab Bar 的應用運行在采用虛擬導航欄（Navigation Bar，即屏幕內虛擬按鍵）的設備上會出現“多層下巴”現象。究其原因，個人認為通常是因為這些 App 采用和 iOS 上類似樣式的底部 Tab Bar，從而讓視覺上與虛擬導航欄產生一種“粘連”感，讓用戶產生“多重下巴”的錯覺。
為了解決這種視覺上的不適感，我采用了一種“懸浮”式設計，不與底部區域直接相連，且使用陰影以體現出層級關系。
“發現”作為一個頂級頁面，在 Tab Bar 上作為單獨的 Tab 存在，點擊即可切換。同時，為了能在一屏幕范圍內顯示更多的內容，我將原先的列表式界面更換成了類 Grid List 界面。
“問問醫生”作為一個特殊的功能，和其他頂級頁面在 Drawer 中并排擺放，但是點擊后卻會被帶入一個新的界面中。為了避免對用戶造成不必要的混淆，我將“問問醫生”的入口做成了一個 Floating Action Button，且使用斜體文字標識以強化視覺提示。
最后，此 Tab Bar 在滾動列表時將不會隱藏。
文章閱讀
原本的閱讀界面其實已經很不錯了，因此改進的空間并不是很大。我大體做了以下的改進：
采用 Translucent Status Bar
增厚了標題圖片區域的陰影
采用 Chips 顯示作者信息
增寬了底部評論欄
更換了評論圖標
居中顯示評論提示語
另外，我也將原有的標簽圖示更換成了 Chips.
在當前版本中，閱讀界面只提供兩級字體調節，略顯單薄。于是我嘗試著做了一個自由調節字體大小的界面。
總結
Redesign 到這里就差不多結束了。還有一些模塊個人認為問題不是很大， 因此沒有進行修改（或者說，懶）。總之希望這次的 Redesign 能夠給那些覺得底部 Tab 更好的設計師或者 PM 或者高層們一些思路，即使要用底部 Tab 也不一定要做得和 iOS 上一樣。
最后感謝馮大輝和丁香園為我們帶來如此優秀的健康應用，希望今后這款應用的質量可以更上一層樓。
