设计闲话 #3: 当 action button 遇上 Material Design

Material Design Guidelines - Layout - Structure - App bar

Action button 是每个 app 里不可或缺的按钮，它有时是主要功能，有时为了业务需求。在 Material Design 里，action button 有两种常见处理方式：放在 app bar 的右侧，以及 floating action button (FAB)。

Icons on the right side of the app bar are app-related actions.

Material Design Guidelines (�- Layout - Structure) 中就要求 action button 放在 app bar 右侧时需要使用 icon。但显然，能用 icon 就可以明确表意的功能很有限。

�Facebook for Android

进而考虑 FAB，因为有一种设计我们不陌生——点击 FAB 后，更多选项被展开、并在按钮旁边附上文字，常见的有环聊、Facebook for Android。而这种方案必然会损失可见性（只有尝试触发过才知道有什么功能），B 端产品更为大忌。如果只有两个优先级相同的按钮时，比如理财产品的「赎回」「购入」，金融产品的「转入」「转出」，情况也较尴尬。当然还有像 Google Maps 的双 FAB 处理方案，但依然不能解决 icon 表意困难的问题，并必须给功能分出个主次。

我们知道 Material Design 里还有 raised button、flat button 甚至 modal button sheet 这些样式，但它们无法常驻，也算不上优雅。我和我的朋友们都不是原教旨主义者。遵守 guidelines 一方面可以降低学习成本（前提是普遍开发商都遵守），另一方面是 consistency。但面临业务需求，guidelines 无法满足的，就选择不遵守（老生长谈的 Android tab bar 问题这里暂不展开）。

近期在知乎上的一个问题「Material Design 设计规范是否不太适合像淘宝这样大而全的厚重的应用程序？」颇受关注。无论如何举反证，我始终认为 Material Design（相比起 iOS Design）就是有更多的、更高的局限性。这有文化的原因。但有人拿 B&H、淘宝国际等来举例，如果梳理一遍手机淘宝的信息框架，相信不会给出这个答案。

左、中：Spotify for Android，右：Vurb for Android

抛开 Material Design Guidelines，我们依然能看到一些不错的 action button 设计。例如 Spotify 的歌曲详情页，在滚动页面时 action button 会固定在 app bar 的位置，并且这种设计在其 iOS app 里也不违和（但没有倡导 Android 和 iOS 要用同一套设计的意思）。而 Vurb 的 icon 结合文字的方案也是折中之举。