我想讀者們應(yīng)該對 Google+ Android 客戶端都不陌生吧。這個應(yīng)用算是一個非常中規(guī)中矩的 Android 展示應(yīng)用。這次我就以 Google+ 個人資料頁面作為范例，展示一下 Multiplexed Action Bar 的一般用法。關(guān)于 Multiplexed Action Bar，即復(fù)合式 Action Bar，可以參看我之前寫過的一篇文章。

這是 Google+ 原先的模樣。非常標準的 Action Bar，非常標準的 Image View，下面是頭像、名字、圈子、最簡單的一些信息，然后是 Sticky Header Fixed Tabs。在用戶向下卷動這個列表之后，F(xiàn)ixed Tabs 會和 Action Bar 一起停留在頂部。

在早些時候，Google+ 上的用戶 Greg Hesp 對 Google+ 進行了一番 Redesign。但是他的重設(shè)計并沒有很好的利用到 Android 4.4 提供的 Translucent Bar，很多地方的度量不夠嚴謹，而且變更也僅僅是停留在了表面。于是我打算自己做一個重設(shè)計。

在還沒經(jīng)過仔細思考的情況下，我就開始了我的第一次嘗試，我做的改動主要有：

套用了 Android 4.4 的 Translucent Bar；

采用 Multiplexed Action Bar 把 ?Action Bar，Cover Page 和 Fixed Tabs 整合在一起；

Fixed Tabs 文字的顏色在激活時是白色，未激活的話是 #eeeeee，并且有 1dp drop shadow 作為背景防護；

在卷動之后的狀態(tài)下，cover photo 會變暗 50% 以免白色圖片影響文字閱讀；

去掉了圈子和簡要信息，我認為這兩個東西只要在 About Tab 里顯示就足夠了。

這兩張圖發(fā)到社區(qū)之后，反響平平。+Oscar Mark?認為我應(yīng)該把 Hangout 按鈕放在頭像旁邊。于是我做了另一個嘗試。

我做的改動：

把圈子加了回來，放在頭像左側(cè)；

把 Hangout 按鈕移動到頭像右側(cè)；

將底部 Nav Bar 換成透明的；

規(guī)范 Fixed Tabs 欄的高度 (48dp)。

等等，似乎有什么不對勁的地方 (那個 typo 請無視)… 按照 Oscar Mark 的想法，圈子按鈕和 Hangout 按鈕應(yīng)該要移動到 Action Bar 上，但是頭像要移到 App Icon 的位置… 很不妙啊這個動畫。于是我又打開了 Photoshop。

嗯，這樣看起來就好多了，至少不會出現(xiàn)“交叉”的動畫效果了。我做的改動：

把頭像移到左側(cè)三分線處；

把兩個按鈕移到頭像右側(cè)；

增大按鈕的字體，加入 1dp drop shadow 作為背景防護；

在卷動之后，Hangout 和圈子按鈕會并入 Action Bar。

到這一步的時候其實就已經(jīng)差不多了。但是在 Play Newsstand 里面，F(xiàn)ixed Tabs 是沒有分割線的。另外，+Hugo BALLESTER?覺得，Hangout 按鈕和圈子按鈕應(yīng)該直接用白色的。于是…

只剩下一些小細節(jié)的調(diào)整了?(迷之聲：而且你終于修復(fù)了 typo，妹得大喜)：

圖標的顏色改成標準 Android 樣式，#ffffff，80% 不透明：

把 Action Bar 上圖標的大小統(tǒng)一：

去掉了 Tabs 之間的分割線。

做到這里，基本上就可以算是完成了。上對比圖：

明顯可以注意到，原先的個人資料頁下，完全沒法看到一篇帖子/任何個人資料，我認為這是一個非常腦殘的設(shè)計。重設(shè)計之后，至少可以看到第一篇帖子的大部分了。

卷動之后的狀態(tài)下，新設(shè)計的資料頁的 Action Bar 可以實現(xiàn)更多功能，當用戶向上卷動列表的時候也不會被時不時彈出來的 Hangout 大黑條給煩到。

另外還有一些需要注意的地方。

仔細觀察 Up 被按下時的高亮區(qū)域和 Tabs 的 overscroll 特效高亮區(qū)域，你會發(fā)現(xiàn)，這個 84 dp 高的 Multiplexed Action Bar (收起狀態(tài)) 中間有一小片區(qū)域 (12dp) 是 Action Bar 和 Tabs 共用的。但有趣兒的地方是，當你在這”公用區(qū)”點擊時觸發(fā)的操作是 Up 而不是切換 Tabs。也就是說，在邏輯上，Action Bar 依然是覆蓋在 Tabs 上的 —— 你可以把 Action Bar 看成是一個完全透明的覆蓋層。

既然 Action Bar 是一個透明的覆蓋層，我們就可以放心的往它下面塞圖片了。比如我在上面的重設(shè)計中，把頭像放到了 Action Bar 下面。

還有一句不得不提的話：任何設(shè)計樣式都不是萬能的，有其適用與不適用的地方。千萬不要為了設(shè)計而設(shè)計，在不該套用 Multiplexed Action Bar 的地方套用它。

另外，我毫不懷疑 Google 能拿出更好的設(shè)計來打我的臉，所以歡迎打臉~

轉(zhuǎn)自：極客公園