設(shè)計閑話 #3: 當(dāng) action button 遇上 Material Design

Material Design Guidelines - Layout - Structure - App bar

Action button 是每個 app 里不可或缺的按鈕,它有時是主要功能虾标,有時為了業(yè)務(wù)需求蔓腐。在 Material Design 里,action button 有兩種常見處理方式:放在 app bar 的右側(cè)刁品,以及 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 右側(cè)時需要使用 icon。但顯然挑随,能用 icon 就可以明確表意的功能很有限状您。

?Facebook for Android

進(jìn)而考慮 FAB,因為有一種設(shè)計我們不陌生——點擊 FAB 后兜挨,更多選項被展開膏孟、并在按鈕旁邊附上文字,常見的有環(huán)聊拌汇、Facebook for Android柒桑。而這種方案必然會損失可見性(只有嘗試觸發(fā)過才知道有什么功能),B 端產(chǎn)品更為大忌噪舀。如果只有兩個優(yōu)先級相同的按鈕時魁淳,比如理財產(chǎn)品的「贖回」「購入」,金融產(chǎn)品的「轉(zhuǎn)入」「轉(zhuǎn)出」与倡,情況也較尷尬界逛。當(dāng)然還有像 Google Maps 的雙 FAB 處理方案,但依然不能解決 icon 表意困難的問題纺座,并必須給功能分出個主次息拜。

我們知道 Material Design 里還有 raised button、flat button 甚至 modal button sheet 這些樣式净响,但它們無法常駐少欺,也算不上優(yōu)雅。我和我的朋友們都不是原教旨主義者别惦。遵守 guidelines 一方面可以降低學(xué)習(xí)成本(前提是普遍開發(fā)商都遵守)狈茉,另一方面是 consistency。但面臨業(yè)務(wù)需求掸掸,guidelines 無法滿足的氯庆,就選擇不遵守(老生長談的 Android tab bar 問題這里暫不展開)。

近期在知乎上的一個問題「Material Design 設(shè)計規(guī)范是否不太適合像淘寶這樣大而全的厚重的應(yīng)用程序扰付?」頗受關(guān)注堤撵。無論如何舉反證,我始終認(rèn)為 Material Design(相比起 iOS Design)就是有更多的羽莺、更高的局限性实昨。這有文化的原因。但有人拿 B&H盐固、淘寶國際等來舉例荒给,如果梳理一遍手機淘寶的信息框架丈挟,相信不會給出這個答案。

左志电、中:Spotify for Android曙咽,右:Vurb for Android

拋開 Material Design Guidelines,我們依然能看到一些不錯的 action button 設(shè)計挑辆。例如 Spotify 的歌曲詳情頁例朱,在滾動頁面時 action button 會固定在 app bar 的位置,并且這種設(shè)計在其 iOS app 里也不違和(但沒有倡導(dǎo) Android 和 iOS 要用同一套設(shè)計的意思)鱼蝉。而 Vurb 的 icon 結(jié)合文字的方案也是折中之舉洒嗤。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市魁亦,隨后出現(xiàn)的幾起案子渔隶,更是在濱河造成了極大的恐慌,老刑警劉巖洁奈,帶你破解...
    沈念sama閱讀 212,454評論 6 493
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件派撕,死亡現(xiàn)場離奇詭異,居然都是意外死亡睬魂,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,553評論 3 385
  • 文/潘曉璐 我一進(jìn)店門镀赌,熙熙樓的掌柜王于貴愁眉苦臉地迎上來氯哮,“玉大人,你說我怎么就攤上這事商佛『砀郑” “怎么了?”我有些...
    開封第一講書人閱讀 157,921評論 0 348
  • 文/不壞的土叔 我叫張陵良姆,是天一觀的道長肠虽。 經(jīng)常有香客問我,道長玛追,這世上最難降的妖魔是什么税课? 我笑而不...
    開封第一講書人閱讀 56,648評論 1 284
  • 正文 為了忘掉前任烁峭,我火速辦了婚禮拒垃,結(jié)果婚禮上圣蝎,老公的妹妹穿的比我還像新娘然遏。我一直安慰自己芥丧,他們只是感情好绳匀,可當(dāng)我...
    茶點故事閱讀 65,770評論 6 386
  • 文/花漫 我一把揭開白布粒竖。 她就那樣靜靜地躺著照捡,像睡著了一般叮贩。 火紅的嫁衣襯著肌膚如雪击狮。 梳的紋絲不亂的頭發(fā)上佛析,一...
    開封第一講書人閱讀 49,950評論 1 291
  • 那天,我揣著相機與錄音彪蓬,去河邊找鬼寸莫。 笑死,一個胖子當(dāng)著我的面吹牛寞焙,可吹牛的內(nèi)容都是我干的储狭。 我是一名探鬼主播,決...
    沈念sama閱讀 39,090評論 3 410
  • 文/蒼蘭香墨 我猛地睜開眼捣郊,長吁一口氣:“原來是場噩夢啊……” “哼辽狈!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起呛牲,我...
    開封第一講書人閱讀 37,817評論 0 268
  • 序言:老撾萬榮一對情侶失蹤刮萌,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后娘扩,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體着茸,經(jīng)...
    沈念sama閱讀 44,275評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,592評論 2 327
  • 正文 我和宋清朗相戀三年琐旁,在試婚紗的時候發(fā)現(xiàn)自己被綠了涮阔。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,724評論 1 341
  • 序言:一個原本活蹦亂跳的男人離奇死亡灰殴,死狀恐怖敬特,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情牺陶,我是刑警寧澤伟阔,帶...
    沈念sama閱讀 34,409評論 4 333
  • 正文 年R本政府宣布,位于F島的核電站掰伸,受9級特大地震影響皱炉,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜狮鸭,卻給世界環(huán)境...
    茶點故事閱讀 40,052評論 3 316
  • 文/蒙蒙 一合搅、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧怕篷,春花似錦历筝、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,815評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春春弥,著一層夾襖步出監(jiān)牢的瞬間呛哟,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,043評論 1 266
  • 我被黑心中介騙來泰國打工匿沛, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留扫责,地道東北人。 一個月前我還...
    沈念sama閱讀 46,503評論 2 361
  • 正文 我出身青樓逃呼,卻偏偏與公主長得像鳖孤,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子抡笼,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 43,627評論 2 350

推薦閱讀更多精彩內(nèi)容