设计闲话 #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 结合文字的方案也是折中之举。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,937评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,503评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,712评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,668评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,677评论 5 366
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,601评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,975评论 3 396
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,637评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,881评论 1 298
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,621评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,710评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,387评论 4 319
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,971评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,947评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,189评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,805评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,449评论 2 342

推荐阅读更多精彩内容