ปุ่มการดำเนินการแบบลอย: เมื่อใดควรใช้ FAB และวิธีทำให้เคลื่อนไหว
เมื่อปุ่มการทำงานแบบลอยช่วยได้ เมื่อเกิดอาการเจ็บ หนึ่ง FAB ต่อหน้าจอ ขยาย FAB และเมนู FAB ลักษณะการเลื่อนและการเคลื่อนไหว
หลัก Takeaway
ใช้ปุ่มการทำงานแบบลอยสำหรับการทำงานที่สำคัญที่สุดบนหน้าจอ เช่น เขียนหรือสร้าง แสดงเพียงหนึ่งรายการต่อหน้าจอ ข้ามบนหน้าจอโดยไม่มีการดำเนินการหลักที่ชัดเจน ใช้ FAB แบบขยายพร้อมป้ายกำกับเมื่อไอคอนเพียงอย่างเดียวไม่ชัดเจน และให้การเคลื่อนไหวมีจุดประสงค์เมื่อขยาย ยุบเมื่อเลื่อน หรือเปิดเมนู
FAB มีไว้เพื่ออะไร
Material Design 3 อธิบายว่า FAB เป็นการดำเนินการหลักของหน้าจอ และแนะนำให้ไม่แสดง FAB หลายรายการบนหน้าจอเดียว นอกจากนี้ ยังตั้งข้อสังเกตอีกว่า FAB ไม่จำเป็นในทุกหน้าจอ เช่น เมื่อรูปภาพแสดงถึงการดำเนินการหลักอยู่แล้ว
สายพันธุ์
วัสดุมีหลายรูปแบบ:
- FAB มาตรฐาน: ไอคอนสำหรับการดำเนินการที่รู้จักกันดี เช่น การเขียน
- Extended FAB: ไอคอนพร้อมป้ายกำกับ ชัดเจนยิ่งขึ้นสำหรับการดำเนินการที่ไม่ชัดเจนและบนหน้าจอที่ใหญ่ขึ้น
- FAB ขนาดใหญ่: สำหรับการดำเนินการหลักที่โดดเด่น เหมาะกับหน้าต่างที่กว้างขึ้น เช่น แท็บเล็ตและแบบพับได้ที่กางออก
- เมนู FAB: FAB จะเปิดชุดการดำเนินการที่เกี่ยวข้องสั้นๆ
เมื่อใดที่จะไม่ใช้อย่างใดอย่างหนึ่ง
ข้าม FAB สำหรับการกระทำเล็กๆ น้อยๆ หรือการทำลายล้าง บนหน้าจอที่การกระทำหลักชัดเจนอยู่แล้ว และตำแหน่งที่จะครอบคลุมเนื้อหาหรือการควบคุมที่สำคัญ บน iOS FAB ไม่ใช่รูปแบบดั้งเดิม แถบเครื่องมือหรือปุ่มแถบนำทางเป็นที่คุ้นเคยสำหรับผู้ใช้ iPhone
การเคลื่อนไหว
FAB มักจะยุบจากแบบขยายเป็นแบบมาตรฐานในขณะที่ผู้คนเลื่อน จากนั้นขยายอีกครั้ง และสามารถเปลี่ยนเป็นแผ่นงานหรือเมนูได้เมื่อแตะ การเปลี่ยนเหล่านี้อธิบายว่าการดำเนินการดำเนินไปที่ไหนและเนื้อหามาจากไหน ทำให้มันสั้น หลีกเลี่ยงการตีกลับทุกๆ ม้วน และเคารพการเคลื่อนไหวที่ลดลง
คีย์ Principles ที่ต้องจำ
- หนึ่ง FAB ต่อหน้าจอ สำหรับการดำเนินการหลัก
- ไม่ใช่ทุกหน้าจอที่ต้องการ
- ใช้ FAB แบบขยายเมื่อไอคอนไม่ชัดเจน
- หลีกเลี่ยง FAB สำหรับการกระทำเล็กๆ น้อยๆ หรือการทำลายล้าง
- ใช้การเคลื่อนไหวเพื่อแสดงว่าเนื้อหาของ FAB มาจากไหน
คำถามที่พบบ่อย
แหล่งที่มา
- FAB guidelines — Material Design3