Android的设计在行动复用操作栏

　　〔核心提示〕我想读者们应该对GoogleAndroid客户端都不陌生吧。这次我就以Google个人资料页面作为范例，展示一下MultiplexedActionBar的一般用法。
　　我想读者们应该对GoogleAndroid客户端都不陌生吧。这个应用算是一个非常中规中矩的Android展示应用。这次我就以Google个人资料页面作为范例，展示一下MultiplexedActionBar的一般用法。关于MultiplexedActionBar，即复合式ActionBar，可以参看我之前写过的一篇文章。
　　这是Google原先的模样。非常标准的ActionBar，非常标准的ImageView，下面是头像、名字、圈子、最简单的一些信息，然后是StickyHeaderFixedTabs。在用户向下卷动这个列表之后，FixedTabs会和ActionBar一起停留在顶部。
　　在早些时候，Google上的用户GregHesp对Google进行了一番Redesign。但是他的重设计并没有很好的利用到Android4。4提供的TranslucentBar，很多地方的度量不够严谨，而且变更也仅仅是停留在了表面。于是我打算自己做一个重设计。
　　在还没经过仔细思考的情况下，我就开始了我的第一次尝试，我做的改动主要有：
　　套用了Android4。4的TranslucentB
　　采用MultiplexedActionBar把ActionBar，CoverPage和FixedTabs整合在一起；
　　FixedTabs文字的颜色在激活时是白色，未激活的话是eeeeee，并且有1dpdropshadow作为背景防护；
　　在卷动之后的状态下，coverphoto会变暗50以免白色图片影响文字阅读；
　　去掉了圈子和简要信息，我认为这两个东西只要在AboutTab里显示就足够了。
　　这两张图发到社区之后，反响平平。OscarM认为我应该把Hangout按钮放在头像旁边。于是我做了另一个尝试。
　　我做的改动：
　　把圈子加了回来，放在头像左侧；
　　把Hangout按钮移动到头像右侧；
　　将底部NavBar换成透明的；
　　规范FixedTabs栏的高度（48dp）。
　　等等，似乎有什么不对劲的地方（那个typo请无视）按照OscarMark的想法，圈子按钮和Hangout按钮应该要移动到ActionBar上，但是头像要移到AppIcon的位置很不妙啊这个动画。于是我又打开了Photoshop。
　　嗯，这样看起来就好多了，至少不会出现“交叉”的动画效果了。我做的改动：
　　把头像移到左侧三分线处；
　　把两个按钮移到头像右侧；
　　增大按钮的字体，加入1dpdropshadow作为背景防护；
　　在卷动之后，Hangout和圈子按钮会并入ActionBar。
　　到这一步的时候其实就已经差不多了。但是在PlayNewsstand里面，FixedTabs是没有分割线的。另外，HugoBALLESTER觉得，Hangout按钮和圈子按钮应该直接用白色的。于是
　　只剩下一些小细节的调整了（迷之声：而且你终于修复了typo，妹得大喜）：
　　图标的颜色改成标准Android样式，ffffff，80不透明：
　　把ActionBar上图标的大小统一：
　　去掉了Tabs之间的分割线。
　　做到这里，基本上就可以算是完成了。上对比图：
　　明显可以注意到，原先的个人资料页下，完全没法看到一篇帖子任何个人资料，我认为这是一个非常脑残的设计。重设计之后，至少可以看到第一篇帖子的大部分了。
　　卷动之后的状态下，新设计的资料页的ActionBar可以实现更多功能，当用户向上卷动列表的时候也不会被时不时弹出来的Hangout大黑条给烦到。
　　另外还有一些需要注意的地方。
　　仔细观察Up被按下时的高亮区域和Tabs的overscroll特效高亮区域，你会发现，这个84dp高的MultiplexedActionBar（收起状态）中间有一小片区域（12dp）是ActionBar和Tabs共用的。但有趣儿的地方是，当你在这”公用区”点击时触发的操作是Up而不是切换Tabs。也就是说，在逻辑上，ActionBar依然是覆盖在Tabs上的你可以把ActionBar看成是一个完全透明的覆盖层。
　　既然ActionBar是一个透明的覆盖层，我们就可以放心的往它下面塞图片了。比如我在上面的重设计中，把头像放到了ActionBar下面。
　　
　　还有一句不得不提的话：任何设计样式都不是万能的，有其适用与不适用的地方。千万不要为了设计而设计，在不该套用MultiplexedActionBar的地方套用它。
　　另外，我毫不怀疑Google能拿出更好的设计来打我的脸，所以欢迎打脸
　　转自：极客公园