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 就可以明確表意的功能很有限。
進而考慮 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、淘寶國際等來舉例,如果梳理一遍手機淘寶的信息框架,相信不會給出這個答案。
拋開 Material Design Guidelines,我們依然能看到一些不錯的 action button 設計。例如 Spotify 的歌曲詳情頁,在滾動頁面時 action button 會固定在 app bar 的位置,并且這種設計在其 iOS app 里也不違和(但沒有倡導 Android 和 iOS 要用同一套設計的意思)。而 Vurb 的 icon 結合文字的方案也是折中之舉。