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

小提示：您能找到这篇{Android的设计在行动 – 复用操作栏}绝对不是偶然，我们能帮您找到潜在客户，解决您的困扰。如果您对本页介绍的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 Ic重庆网络推广报价on 的位置… 很不妙啊这个动画。于是我又打开了 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 能拿出更好的设计来打我的脸，所以欢迎打脸~

转自：极客公园