起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識Android的設計在行動 – 復用操作欄
[核心提示] 我想讀者們應該對 Google+ Android 客戶端都不陌生吧。這次我就以 Google+ 個人資料頁面作為范例，展示一下 Multiplexed Action Bar 的一般用法。
我想讀者們應該對 Google+ Android 客戶端都不陌生吧。這個應用算是一個非常中規中矩的 Android 展示應用。這次我就以 Google+ 個人資料頁面作為范例，展示一下 Multiplexed Action Bar 的一般用法。關于 Multiplexed Action Bar，即復合式 Action Bar，可以參看我之前寫過的一篇文章。
這是 Google+ 原先的模樣。非常標準的 Action Bar，非常標準的 Image View，下面是頭像、名字、圈子、最簡單的一些信息，然后是 Sticky Header Fixed Tabs。在用戶向下卷動這個列表之后，Fixed Tabs 會和 Action Bar 一起停留在頂部。
在早些時候，Google+ 上的用戶 Greg Hesp 對 Google+ 進行了一番 Redesign。但是他的重設計并沒有很好的利用到 Android 4.4 提供的 Translucent Bar，很多地方的度量不夠嚴謹，而且變更也僅僅是停留在了表面。于是我打算自己做一個重設計。
在還沒經過仔細思考的情況下，我就開始了我的第一次嘗試，我做的改動主要有：
套用了 Android 4.4 的 Translucent Bar；
采用 Multiplexed Action Bar 把 ?Action Bar，Cover Page 和 Fixed Tabs 整合在一起；
Fixed Tabs 文字的顏色在激活時是白色，未激活的話是 #eeeeee，并且有 1dp drop shadow 作為背景防護；
在卷動之后的狀態下，cover photo 會變暗 50% 以免白色圖片影響文字閱讀；
去掉了圈子和簡要信息，我認為這兩個東西只要在 About Tab 里顯示就足夠了。
這兩張圖發到社區之后，反響平平。+Oscar Mark?認為我應該把 Hangout 按鈕放在頭像旁邊。于是我做了另一個嘗試。
我做的改動：
把圈子加了回來，放在頭像左側；
把 Hangout 按鈕移動到頭像右側；
將底部 Nav Bar 換成透明的；
規范 Fixed Tabs 欄的高度 (48dp)。
等等，似乎有什么不對勁的地方 (那個 typo 請無視)… 按照 Oscar Mark 的想法，圈子按鈕和 Hangout 按鈕應該要移動到 Action Bar 上，但是頭像要移到 App Icon 的位置… 很不妙啊這個動畫。于是我又打開了 Photoshop。
嗯，這樣看起來就好多了，至少不會出現“交叉”的動畫效果了。我做的改動：
把頭像移到左側三分線處；
把兩個按鈕移到頭像右側；
增大按鈕的字體，加入 1dp drop shadow 作為背景防護；
在卷動之后，Hangout 和圈子按鈕會并入 Action Bar。
到這一步的時候其實就已經差不多了。但是在 Play Newsstand 里面，Fixed Tabs 是沒有分割線的。另外，+Hugo BALLESTER?覺得，Hangout 按鈕和圈子按鈕應該直接用白色的。于是…
只剩下一些小細節的調整了?(迷之聲：而且你終于修復了 typo，妹得大喜)：
圖標的顏色改成標準 Android 樣式，#ffffff，80% 不透明：
把 Action Bar 上圖標的大小統一：
去掉了 Tabs 之間的分割線。
做到這里，基本上就可以算是完成了。上對比圖：
明顯可以注意到，原先的個人資料頁下，完全沒法看到一篇帖子/任何個人資料，我認為這是一個非常腦殘的設計。重設計之后，至少可以看到第一篇帖子的大部分了。
卷動之后的狀態下，新設計的資料頁的 Action Bar 可以實現更多功能，當用戶向上卷動列表的時候也不會被時不時彈出來的 Hangout 大黑條給煩到。
另外還有一些需要注意的地方。
仔細觀察 Up 被按下時的高亮區域和 Tabs 的 overscroll 特效高亮區域，你會發現，這個 84 dp 高的 Multiplexed Action Bar (收起狀態) 中間有一小片區域 (12dp) 是 Action Bar 和 Tabs 共用的。但有趣兒的地方是，當你在這”公用區”點擊時觸發的操作是 Up 而不是切換 Tabs。也就是說，在邏輯上，Action Bar 依然是覆蓋在 Tabs 上的 —— 你可以把 Action Bar 看成是一個完全透明的覆蓋層。
既然 Action Bar 是一個透明的覆蓋層，我們就可以放心的往它下面塞圖片了。比如我在上面的重設計中，把頭像放到了 Action Bar 下面。
還有一句不得不提的話：任何設計樣式都不是萬能的，有其適用與不適用的地方。千萬不要為了設計而設計，在不該套用 Multiplexed Action Bar 的地方套用它。
另外，我毫不懷疑 Google 能拿出更好的設計來打我的臉，所以歡迎打臉~
轉自：極客公園
我覺得樓主改版的更好喲，光從視覺感受上就比google+好，且也充分利用了action bar喲，贊！