Enviar pesquisa
Carregar
Android Floating Action Button 設計準則
•
Transferir como PPTX, PDF
•
4 gostaram
•
988 visualizações
Chun-Chia Chen
Seguir
Celular
Denunciar
Compartilhar
Denunciar
Compartilhar
1 de 39
Baixar agora
Recomendados
Wondershare panorama android 20120824
Wondershare panorama android 20120824
wondershareppt
手機專題介紹簡報
手機專題介紹簡報
rrhhb666
Designing For Interaction with Web Interface
Designing For Interaction with Web Interface
Aidan Wu
Android4.4設計規範
Android4.4設計規範
Mygod hsu
20151024 Taichung.py 講一些 Python Logging
20151024 Taichung.py 講一些 Python Logging
Chun-Chia Chen
20150921 Agile Taichung 持續交付
20150921 Agile Taichung 持續交付
Chun-Chia Chen
Android RotateAnimation 簡介
Android RotateAnimation 簡介
Chun-Chia Chen
2024 State of Marketing Report – by Hubspot
2024 State of Marketing Report – by Hubspot
Marius Sescu
Recomendados
Wondershare panorama android 20120824
Wondershare panorama android 20120824
wondershareppt
手機專題介紹簡報
手機專題介紹簡報
rrhhb666
Designing For Interaction with Web Interface
Designing For Interaction with Web Interface
Aidan Wu
Android4.4設計規範
Android4.4設計規範
Mygod hsu
20151024 Taichung.py 講一些 Python Logging
20151024 Taichung.py 講一些 Python Logging
Chun-Chia Chen
20150921 Agile Taichung 持續交付
20150921 Agile Taichung 持續交付
Chun-Chia Chen
Android RotateAnimation 簡介
Android RotateAnimation 簡介
Chun-Chia Chen
2024 State of Marketing Report – by Hubspot
2024 State of Marketing Report – by Hubspot
Marius Sescu
Everything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPT
Expeed Software
Product Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage Engineerings
Pixeldarts
How Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental Health
ThinkNow
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
marketingartwork
Skeleton Culture Code
Skeleton Culture Code
Skeleton Technologies
PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024
Neil Kimberley
Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)
contently
How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024
Albert Qian
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie Insights
Kurio // The Social Media Age(ncy)
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024
Search Engine Journal
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary
SpeakerHub
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd
Clark Boyd
Getting into the tech field. what next
Getting into the tech field. what next
Tessa Mero
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Lily Ray
How to have difficult conversations
How to have difficult conversations
Rajiv Jayarajah, MAppComm, ACC
Introduction to Data Science
Introduction to Data Science
Christy Abraham Joy
Time Management & Productivity - Best Practices
Time Management & Productivity - Best Practices
Vit Horky
The six step guide to practical project management
The six step guide to practical project management
MindGenius
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
RachelPearson36
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Applitools
Mais conteúdo relacionado
Destaque
Everything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPT
Expeed Software
Product Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage Engineerings
Pixeldarts
How Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental Health
ThinkNow
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
marketingartwork
Skeleton Culture Code
Skeleton Culture Code
Skeleton Technologies
PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024
Neil Kimberley
Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)
contently
How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024
Albert Qian
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie Insights
Kurio // The Social Media Age(ncy)
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024
Search Engine Journal
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary
SpeakerHub
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd
Clark Boyd
Getting into the tech field. what next
Getting into the tech field. what next
Tessa Mero
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Lily Ray
How to have difficult conversations
How to have difficult conversations
Rajiv Jayarajah, MAppComm, ACC
Introduction to Data Science
Introduction to Data Science
Christy Abraham Joy
Time Management & Productivity - Best Practices
Time Management & Productivity - Best Practices
Vit Horky
The six step guide to practical project management
The six step guide to practical project management
MindGenius
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
RachelPearson36
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Applitools
Destaque
(20)
Everything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPT
Product Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage Engineerings
How Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental Health
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
Skeleton Culture Code
Skeleton Culture Code
PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024
Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)
How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie Insights
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd
Getting into the tech field. what next
Getting into the tech field. what next
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search Intent
How to have difficult conversations
How to have difficult conversations
Introduction to Data Science
Introduction to Data Science
Time Management & Productivity - Best Practices
Time Management & Productivity - Best Practices
The six step guide to practical project management
The six step guide to practical project management
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Android Floating Action Button 設計準則
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
Baixar agora