ปุ่ม

ปุ่มทำหน้าที่สื่อสารการกระทำที่จะเกิดขึ้นเมื่อผู้ใช้สัมผัสปุ่มนั้น

ปุ่มเป็นส่วนประกอบมาตรฐานของ Android Open Source Project (AOSP) สามารถมีพื้นหลังสีทึบหรือไม่มีสี (พื้นหลังโปร่งใส) ก็ได้ ปุ่มที่มีสีแสดงถึงการกระทำหลักหรือที่ต้องการ ปุ่มสามารถปรากฏเดี่ยวๆ หรือเป็นกลุ่มก็ได้ ต่างจาก แท็บ ที่มักปรากฏเป็นกลุ่มเสมอ

กายวิภาคศาสตร์

กายวิภาคของปุ่ม
1. ช่องเก็บปุ่มที่ยังไม่ได้เติม
2. ช่องปุ่มกดที่กรอกข้อมูลแล้ว แสดงถึงการกระทำหลักหรือที่ต้องการ
3. ป้ายกำกับปุ่ม

ข้อมูลจำเพาะ

ความยาวปุ่มขั้นต่ำและสูงสุด

ความยาวสูงสุดของข้อความบนปุ่มคือ 20 ตัวอักษร ความกว้างต่ำสุดของปุ่มคือ 156dp
ความยาวสูงสุดของข้อความบนปุ่มคือ 20 ตัวอักษร ความกว้างต่ำสุดของปุ่มคือ 156 dp

ปุ่มที่มีไอคอนเทียบกับปุ่มแบบปกติ

ปุ่มต่างๆ สามารถมีไอคอนได้ โดยปกติแล้ว ไอคอนจะปรากฏทางด้านซ้ายของข้อความบนปุ่ม
ปุ่มต่างๆ สามารถมีไอคอนได้ โดยปกติแล้ว ไอคอนจะปรากฏทางด้านซ้ายของข้อความบนปุ่ม

ปุ่มต่างๆ สามารถปรากฏเป็นองค์ประกอบในส่วนประกอบอื่นๆ เช่น แถบแอป หรือ กล่องโต้ตอบได้

การจัดวางปุ่มในแถบแอป

ปุ่มต่างๆ จะอยู่ทางด้านขวาของแถบแอป
ปุ่มต่างๆ จะอยู่ทางด้านขวาของแถบแอปพลิเคชัน

ปุ่มในกล่องโต้ตอบ

โดยทั่วไปแล้ว ปุ่มต่างๆ ในกล่องโต้ตอบจะอยู่ทางด้านซ้ายล่างของกล่องโต้ตอบ
โดยทั่วไปแล้ว ปุ่มต่างๆ ในกล่องโต้ตอบจะอยู่ทางด้านซ้ายล่างของกล่องโต้ตอบ

ปุ่มฮีโร่

ขอบโค้งมนของปุ่มฮีโร่เน้นย้ำถึงความสำคัญของมัน
ขอบโค้งมนช่วยเน้นความสำคัญของปุ่มหลัก (hero button)

การปรับแต่ง

ผู้ผลิตอุปกรณ์ดั้งเดิม (OEM) สามารถสะท้อนถึงแบรนด์ของตนได้โดยการปรับเปลี่ยนรูปลักษณ์ของปุ่ม เช่น:

  • การระบุสีเน้น
  • การจัดหาไอคอนแบบกำหนดเอง
  • การเพิ่มฟอนต์แบบกำหนดเอง
  • การเปลี่ยนลักษณะการแสดงผลของปุ่มที่ใช้งานอยู่ ปุ่มที่ไม่ได้ใช้งาน และปุ่มที่ถูกปิดใช้งาน
  • การตั้งค่าขนาดปุ่ม รูปทรงมุม และตำแหน่งการวาง
  • การใช้การเคลื่อนไหวเพื่อให้ข้อมูลป้อนกลับแก่ผู้ใช้

คู่มือการผสานรวมไลบรารี UI สำหรับรถยนต์ ให้คำแนะนำจากผู้ผลิตรถยนต์ (OEM) สำหรับการปรับแต่งส่วนประกอบต่างๆ

ตัวอย่าง

ปุ่มที่ยังไม่ได้เติมและปุ่มที่เติมแล้ว
ปุ่มที่ว่างและปุ่มที่กรอกข้อมูลแล้ว โดยปุ่มที่กรอกข้อมูลแล้วจะแสดงถึงการกระทำหลัก
ปุ่มที่ถูกปิดใช้งานและกรอกข้อมูลแล้ว
สีและความโปร่งใสของปุ่มที่เติมสีนี้บ่งบอกว่าปุ่มนั้นอยู่ในสถานะปิดใช้งาน
กล่องโต้ตอบปุ่มที่ยังไม่ได้กรอกข้อมูล
ปุ่มที่ว่างในกล่องโต้ตอบแสดงว่าการกระทำนั้นมีน้ำหนักเท่ากัน
ระยะเวลาการเคลื่อนไหวของปุ่ม
การเคลื่อนไหวแบบระลอกคลื่นเหล่านี้มีระยะเวลา 330 มิลลิวินาที ใช้เพื่อยืนยันการกดปุ่มของผู้ใช้
แอนิเมชั่นคลื่นของปุ่ม
การเคลื่อนไหวแบบระลอกคลื่นเหล่านี้ในตอนแรกจะทับซ้อนกับพื้นผิวปุ่มประมาณ 60% จากนั้นจะขยายออกไปจากจุดที่ผู้ใช้แตะ และหยุดที่ระยะ 10 dp จากขอบปุ่ม