1. Android
Floating Action Button
設計準則
陳俊嘉

2. http://www.google.com/design/spec/components/buttons-floating-action-button.html
2

3. Floating Action Button
Floating Action Button：一個例子
3

4. Default size Mini size
Default size:
適合大部份情況使用
Mini size:
建議只在需要搭配其他元件
、維持視覺一致時使用
4

5. Default size Mini size
Default size:
適合大部份情況使用
Mini size:
建議只在需要搭配其他元件
、維持視覺一致時使用
5

6. 在 mobile 上，至少距離邊緣 16dp
在 tablet/desktop，至少距離邊緣 24dp
Floating action button Mini floating action button
6

7. 取得焦點效果 點擊效果
7

8. 不適合使用
Floating Action Button
可使用
Floating Action Button
8

9. 壞設計：螢幕上有多個 Floating Action Button
9

10. 建議使用情境
10
建立 愛好 分享
導航 探索

11. 不良使用情境：次要動作、刪除動作
封存、刪除 不明確的動作 警告、錯誤
受限的動作 控制操作（應該放在工具列）
加 badge使用 Manu Bar 圖示、狀態列圖示 通知
設定
11

12. 使用圓形 壞設計：使用其他形狀
12

13. 扁平化 壞設計：加入 3D 效果
13

14. 行為
Behavior
14

15. Button 用逐漸變大的方式出現
Icon 也可以加動畫
如果要強調 Button 重要性
出現時機可以和其他元件錯開
15

16. 切換頁面時，Button 先消失再出現
位置保持不變
或
「轉移」到其他位置
16

17. 壞設計：Button 隨著頁面移動
17

18. 過場效果
Transitions
18

19. Trigger 效果
動畫：向外漣漪
19

20. Toolbar 效果
20

21. 滑動頁面讓 Toolbar 變回 Button
節省佔用空間
避免遮住主要內容
21

22. Toolbar 顯示相關動作 壞設計：動作之間沒有相關性
22

23. Speed Dial 效果：展開 Buttons
點擊展開
再點擊收合
23

24. Speed Dial 效果：轉變成動作列表
24

25. 壞設計：展開的 Botton 個數，加上原 Button，超過 6 個
25

26. 展開 Button 都有明確的動作 壞設計：包含不明確的動作
overflow
menu
26

27. 把 Overflow Menu 放在 Toolbar
27

28. 壞設計：用 Floating Action Button 作為 Overflow Menu 使用
28

29. 顯示相關動作 壞設計：動作之間沒有相關性
改成：放到 Overflow Menu 中
29

30. 顯示聯絡人清單 壞設計：出現不相關的動作
30

31. Morph 效果
展開成
Layout 的一部分
可以反向變回
Button
31

32. Full Screen 效果
通常用在
建立新內容
所以不太會做
反向的動畫
32

33. 大尺寸螢幕
Large Screens
33

34. Button 可附著在延伸的 App Bar 上
34

35. Button 可附著在 Toolbar 或 Sheet 的結構元件上
35

36. Button 可附著在 Sheet 的邊緣
36

37. 壞設計：螢幕上有多個 Floating Action Button
37

38. 壞設計：把 Floating Action Button 加在每個元件上
38

39. http://www.google.com/design/spec/components/buttons-floating-action-button.html
39