Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Android
Floating Action Button
設計準則
陳俊嘉
http://www.google.com/design/spec/components/buttons-floating-action-button.html
2
Floating Action Button
Floating Action Button:一個例子
3
Default size Mini size
Default size:
適合大部份情況使用
Mini size:
建議只在需要搭配其他元件
、維持視覺一致時使用
4
Default size Mini size
Default size:
適合大部份情況使用
Mini size:
建議只在需要搭配其他元件
、維持視覺一致時使用
5
在 mobile 上,至少距離邊緣 16dp
在 tablet/desktop,至少距離邊緣 24dp
Floating action button Mini floating action button
6
取得焦點效果 點擊效果
7
不適合使用
Floating Action Button
可使用
Floating Action Button
8
壞設計:螢幕上有多個 Floating Action Button
9
建議使用情境
10
建立 愛好 分享
導航 探索
不良使用情境:次要動作、刪除動作
封存、刪除 不明確的動作 警告、錯誤
受限的動作 控制操作(應該放在工具列)
加 badge使用 Manu Bar 圖示、狀態列圖示 通知
設定
11
使用圓形 壞設計:使用其他形狀
12
扁平化 壞設計:加入 3D 效果
13
行為
Behavior
14
Button 用逐漸變大的方式出現
Icon 也可以加動畫
如果要強調 Button 重要性
出現時機可以和其他元件錯開
15
切換頁面時,Button 先消失再出現
位置保持不變
或
「轉移」到其他位置
16
壞設計:Button 隨著頁面移動
17
過場效果
Transitions
18
Trigger 效果
動畫:向外漣漪
19
Toolbar 效果
20
滑動頁面讓 Toolbar 變回 Button
節省佔用空間
避免遮住主要內容
21
Toolbar 顯示相關動作 壞設計:動作之間沒有相關性
22
Speed Dial 效果:展開 Buttons
點擊展開
再點擊收合
23
Speed Dial 效果:轉變成動作列表
24
壞設計:展開的 Botton 個數,加上原 Button,超過 6 個
25
展開 Button 都有明確的動作 壞設計:包含不明確的動作
overflow
menu
26
把 Overflow Menu 放在 Toolbar
27
壞設計:用 Floating Action Button 作為 Overflow Menu 使用
28
顯示相關動作 壞設計:動作之間沒有相關性
改成:放到 Overflow Menu 中
29
顯示聯絡人清單 壞設計:出現不相關的動作
30
Morph 效果
展開成
Layout 的一部分
可以反向變回
Button
31
Full Screen 效果
通常用在
建立新內容
所以不太會做
反向的動畫
32
大尺寸螢幕
Large Screens
33
Button 可附著在延伸的 App Bar 上
34
Button 可附著在 Toolbar 或 Sheet 的結構元件上
35
Button 可附著在 Sheet 的邊緣
36
壞設計:螢幕上有多個 Floating Action Button
37
壞設計:把 Floating Action Button 加在每個元件上
38
http://www.google.com/design/spec/components/buttons-floating-action-button.html
39
Upcoming SlideShare
Loading in …5
×

Android Floating Action Button 設計準則

853 views

Published on

Published in: Mobile
  • Be the first to comment

Android Floating Action Button 設計準則

  1. 1. Android Floating Action Button 設計準則 陳俊嘉
  2. 2. http://www.google.com/design/spec/components/buttons-floating-action-button.html 2
  3. 3. Floating Action Button Floating Action Button:一個例子 3
  4. 4. Default size Mini size Default size: 適合大部份情況使用 Mini size: 建議只在需要搭配其他元件 、維持視覺一致時使用 4
  5. 5. Default size Mini size Default size: 適合大部份情況使用 Mini size: 建議只在需要搭配其他元件 、維持視覺一致時使用 5
  6. 6. 在 mobile 上,至少距離邊緣 16dp 在 tablet/desktop,至少距離邊緣 24dp Floating action button Mini floating action button 6
  7. 7. 取得焦點效果 點擊效果 7
  8. 8. 不適合使用 Floating Action Button 可使用 Floating Action Button 8
  9. 9. 壞設計:螢幕上有多個 Floating Action Button 9
  10. 10. 建議使用情境 10 建立 愛好 分享 導航 探索
  11. 11. 不良使用情境:次要動作、刪除動作 封存、刪除 不明確的動作 警告、錯誤 受限的動作 控制操作(應該放在工具列) 加 badge使用 Manu Bar 圖示、狀態列圖示 通知 設定 11
  12. 12. 使用圓形 壞設計:使用其他形狀 12
  13. 13. 扁平化 壞設計:加入 3D 效果 13
  14. 14. 行為 Behavior 14
  15. 15. Button 用逐漸變大的方式出現 Icon 也可以加動畫 如果要強調 Button 重要性 出現時機可以和其他元件錯開 15
  16. 16. 切換頁面時,Button 先消失再出現 位置保持不變 或 「轉移」到其他位置 16
  17. 17. 壞設計:Button 隨著頁面移動 17
  18. 18. 過場效果 Transitions 18
  19. 19. Trigger 效果 動畫:向外漣漪 19
  20. 20. Toolbar 效果 20
  21. 21. 滑動頁面讓 Toolbar 變回 Button 節省佔用空間 避免遮住主要內容 21
  22. 22. Toolbar 顯示相關動作 壞設計:動作之間沒有相關性 22
  23. 23. Speed Dial 效果:展開 Buttons 點擊展開 再點擊收合 23
  24. 24. Speed Dial 效果:轉變成動作列表 24
  25. 25. 壞設計:展開的 Botton 個數,加上原 Button,超過 6 個 25
  26. 26. 展開 Button 都有明確的動作 壞設計:包含不明確的動作 overflow menu 26
  27. 27. 把 Overflow Menu 放在 Toolbar 27
  28. 28. 壞設計:用 Floating Action Button 作為 Overflow Menu 使用 28
  29. 29. 顯示相關動作 壞設計:動作之間沒有相關性 改成:放到 Overflow Menu 中 29
  30. 30. 顯示聯絡人清單 壞設計:出現不相關的動作 30
  31. 31. Morph 效果 展開成 Layout 的一部分 可以反向變回 Button 31
  32. 32. Full Screen 效果 通常用在 建立新內容 所以不太會做 反向的動畫 32
  33. 33. 大尺寸螢幕 Large Screens 33
  34. 34. Button 可附著在延伸的 App Bar 上 34
  35. 35. Button 可附著在 Toolbar 或 Sheet 的結構元件上 35
  36. 36. Button 可附著在 Sheet 的邊緣 36
  37. 37. 壞設計:螢幕上有多個 Floating Action Button 37
  38. 38. 壞設計:把 Floating Action Button 加在每個元件上 38
  39. 39. http://www.google.com/design/spec/components/buttons-floating-action-button.html 39

×