ปุ่ม

ปุ่มช่วยให้ผู้ใช้เริ่มการดำเนินการหรือขั้นตอน เลือกปุ่มประเภทต่างๆ เพื่อเน้นข้อความ

ปุ่มปก

แหล่งข้อมูล

ประเภท ลิงก์ สถานะ
การออกแบบ แหล่งที่มาของการออกแบบ (Figma) ใช้งานได้
การใช้งาน Jetpack Compose ใช้งานได้

ไฮไลต์

  • เลือกประเภทปุ่มตามความสำคัญของการดําเนินการ ยิ่งการดําเนินการมีความสําคัญมากเท่าใด ปุ่มก็ยิ่งมีจุดสนใจมากขึ้นเท่านั้น
  • ปุ่มควรมีป้ายกำกับที่ชัดเจนเพื่อบ่งบอกการดำเนินการ
  • จัดวางปุ่มบนหน้าจออย่างมีเหตุผลในตำแหน่งที่ผู้ใช้คาดหวัง
  • อย่าใช้ปุ่มมากเกินไป ปุ่มบนหน้าจอมากเกินไปจะรบกวนลำดับชั้นภาพ

เวอร์ชัน

ปุ่มมี 6 ประเภท ได้แก่

  1. ปุ่มแบบเติมสี
  2. ปุ่มแบบเติมขอบ
  3. ปุ่มไอคอน
  4. ปุ่มไอคอนขอบ
  5. ปุ่มแบบยาว
  6. ปุ่มรูปภาพ
ปุ่มแบบเติมสี ปุ่มแบบเติมขอบ ปุ่มไอคอน ปุ่มไอคอนขอบ
ปุ่มแบบยาว ปุ่มรูปภาพ

เลือกประเภทปุ่มตามความสำคัญของการดําเนินการ ยิ่งการดําเนินการมีความสําคัญมากเท่าใด ปุ่มของการดำเนินการนั้นก็ควรมีความโดดเด่นมากขึ้นเท่านั้น

การเน้นปุ่ม

ปุ่มแบบเติมสีและแบบเส้นขอบ

ปุ่มแบบเต็มจะสร้างความประทับใจทางสายตามากที่สุดและควรใช้สำหรับการดำเนินการสำคัญในขั้นสุดท้ายซึ่งทำให้ขั้นตอนเสร็จสมบูรณ์ เช่น บันทึก สมัครเลย ยืนยัน หรือดาวน์โหลด

ปุ่มที่เติมขอบเป็นปุ่มที่เน้นระดับปานกลาง ปุ่มเหล่านี้มีการดำเนินการที่สําคัญ แต่ไม่ใช่การดำเนินการหลักในแอป ปุ่มขอบจะจับคู่กับปุ่มที่เติมเต็มได้ดีเพื่อบ่งบอกถึงการดำเนินการสำรองทางเลือก

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

โครงสร้างของปุ่มแบบเติมสีและแบบขอบ

  1. คอนเทนเนอร์
  2. ข้อความป้ายกำกับ
  3. ไอคอน (ไม่บังคับ)

รัฐ

การนําเสนอสถานะของคอมโพเนนต์เป็นภาพ

สถานะปุ่มแบบเติมสีและแบบขอบ

  1. ค่าเริ่มต้น
  2. มีสมาธิ
  3. กดแล้ว

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

ข้อมูลจำเพาะของปุ่มแบบเติมสีและแบบขอบ

ปุ่มไอคอนและไอคอนขอบโครง

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

ปุ่มไอคอนกำหนดให้มี 3 ขนาด ได้แก่ เล็ก กลาง และใหญ่

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

กายวิภาคของปุ่มไอคอนและไอคอนขอบ

  1. คอนเทนเนอร์
  2. ไอคอน

รัฐ

สถานะของปุ่มไอคอนและไอคอนขอบ

  1. ค่าเริ่มต้น
  2. มีสมาธิ
  3. กดแล้ว

สถานะคือการแสดงภาพที่ใช้เพื่อสื่อสารสถานะของคอมโพเนนต์หรือองค์ประกอบแบบอินเทอร์แอกทีฟ

ข้อกำหนด

ข้อกำหนดสำหรับไอคอนและปุ่มไอคอนขอบ

ปุ่มแบบกว้าง

ปุ่มกว้างใช้เพื่อเน้นมากกว่าปุ่มปกติ เนื่องจากมีการดำเนินการที่สำคัญ ปุ่มที่แสดงตัวเลือกที่เกี่ยวข้องจะจัดกลุ่มไว้ด้วยกัน กลุ่มควรใช้แพลตฟอร์มเดียวกัน

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

กายวิภาคของปุ่มแบบกว้าง

  1. คอนเทนเนอร์
  2. ไอคอนแสดงอันดับที่นำอยู่
  3. ชื่อ
  4. ชื่อรอง

รัฐ

สถานะปุ่มแบบกว้าง

  1. ค่าเริ่มต้น
  2. มีสมาธิ
  3. กดแล้ว

สถานะคือการแสดงภาพที่ใช้เพื่อสื่อสารสถานะของคอมโพเนนต์หรือองค์ประกอบแบบอินเทอร์แอกทีฟ

ข้อกำหนด

ข้อมูลจำเพาะของปุ่มแบบกว้าง

ปุ่มรูปภาพ

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

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

ข้อกําหนดของปุ่มรูปภาพ

  1. คอนเทนเนอร์
  2. ไอคอนแสดงอันดับที่นำอยู่
  3. ชื่อ
  4. ชื่อรอง
  5. เลเยอร์รูปภาพ ซึ่งประกอบด้วยส่วนต่อไปนี้
    1. หน้าจอพร็อพเพอร์ตี้ (การวางซ้อนสถานะ)
    2. การไล่ระดับสี (อิงตามสีพื้นผิว)
    3. รูปภาพ

รัฐ

สถานะปุ่มรูปภาพ

  1. ค่าเริ่มต้น
  2. มีสมาธิ
  3. กดแล้ว

สถานะคือการแสดงภาพที่ใช้เพื่อสื่อสารสถานะของคอมโพเนนต์หรือองค์ประกอบแบบอินเทอร์แอกทีฟ

ข้อกำหนด

ข้อกําหนดของปุ่มรูปภาพ

การใช้งาน

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

ปุ่มเป็นเพียงตัวเลือกหนึ่งในการแสดงการดําเนินการใน UI อย่าใช้มากเกินไป ปุ่มบนหน้าจอมากเกินไปจะรบกวนลําดับชั้นภาพ

กายวิภาคของปุ่ม

  1. คอนเทนเนอร์
  2. ไอคอน
  3. ข้อความป้ายกำกับ
  4. ชื่อ
  5. ชื่อรอง
  6. รูปภาพ

คอนเทนเนอร์

ปุ่มจะแสดงคอนเทนเนอร์รอบๆ เนื้อหา คอนเทนเนอร์จะปรับขนาดเป็น 1.1 เท่าเมื่อโฟกัสอยู่ โดยยังคงการเว้นวรรคภายในไว้ ข้อควรพิจารณาสำหรับคอนเทนเนอร์มีดังนี้

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

คอนเทนเนอร์ปุ่ม

คอนเทนเนอร์ปุ่มข้อความและไอคอนมีมุมโค้งมนทั้งหมด คอนเทนเนอร์ปุ่มแบบกว้างและแบบรูปภาพจะมีคอนเทนเนอร์ที่โค้งมนขนาด 12dp

ความกว้างของปุ่มแบบเติมสีจะปรับตามตารางกริดเลย์เอาต์ได้ ไอคอนและข้อความป้ายกำกับจะยังคงอยู่ตรงกลางเมื่อความกว้างของปุ่มเพิ่มขึ้น
สำหรับปุ่มแบบกว้างและปุ่มรูปภาพ ความกว้างของคอนเทนเนอร์จะกำหนดโดยคอนเทนเนอร์หลัก เนื้อหายึดตำแหน่งไว้ทางซ้าย

ไอคอน

ไอคอนจะสื่อถึงการดำเนินการของปุ่มและช่วยดึงดูดความสนใจ โดยควรวางไว้ที่ด้านหน้าของปุ่ม ไอคอนจะจัดกึ่งกลางในแนวตั้งภายในคอนเทนเนอร์เสมอ

ปุ่มไอคอนที่มีขนาดต่างกันจะจัดกลุ่มไว้ด้วยกันได้
อย่าจัดแนวไอคอนและข้อความในแนวตั้งให้อยู่ตรงกลางปุ่ม
อย่าใช้ไอคอน 2 รายการในปุ่มเดียวกัน

ข้อความป้ายกำกับ

ข้อความป้ายกํากับเป็นองค์ประกอบที่สําคัญที่สุดของปุ่ม ซึ่งจะอธิบายการดำเนินการที่เกิดขึ้นหากผู้ใช้แตะปุ่ม

ใช้อักษรตัวพิมพ์ใหญ่เฉพาะคำแรกสำหรับข้อความป้ายกำกับปุ่ม โดยขึ้นต้นคำแรกและคำนามเฉพาะด้วยตัวพิมพ์ใหญ่ หลีกเลี่ยงการตัดข้อความ ข้อความบนป้ายกำกับควรอยู่ในรูปแบบบรรทัดเดียวเพื่อให้อ่านได้ง่ายที่สุด

ใช้อักษรตัวพิมพ์ใหญ่เฉพาะคำแรกสำหรับข้อความป้ายกำกับปุ่ม โดยขึ้นต้นคำแรกและคำนามด้วยตัวพิมพ์ใหญ่
ตรวจสอบว่าข้อความป้ายกำกับอ่านได้ง่ายเมื่อวางปุ่มที่มีเส้นขอบไว้บนรูปภาพ ใช้หน้าจอพร็อพเพอร์ตี้เพื่อรักษาคอนทราสต์

รูปภาพ

ปุ่มรูปภาพจะมีการวางซ้อนแบบไล่ระดับสีและภาพซ้อนทับอยู่ด้านบนรูปภาพในพื้นหลังเสมอ การตั้งค่าการวางซ้อนไล่ระดับสีจะเป็นไปตามสีของคอนเทนเนอร์ หน้าจอพร็อพเพอร์ตี้จะเปลี่ยนไปตามสถานะ

กลุ่มปุ่ม

ปุ่มจะปรากฏร่วมกันในแถวหรือคอลัมน์เพื่อคงการไปยังส่วนต่างๆ ระหว่างการดำเนินการให้สอดคล้องกัน ส่วนต่อไปนี้จะอธิบายข้อควรพิจารณา

ลำดับชั้นการแจ้ง

แต่ละหน้าจอควรมีการดําเนินการหลัก 1 รายการที่แสดงด้วยปุ่มที่โดดเด่นและมักจะเป็นแบบกว้าง ปุ่มควรมองเห็นและเข้าใจได้ง่ายขึ้น ปุ่มอื่นๆ ควรมีความโดดเด่นน้อยกว่าและไม่รบกวนความสนใจของผู้ใช้จากการดำเนินการหลัก

ปุ่มแรกในกลุ่มจะทำหน้าที่เป็นการดำเนินการหลักเนื่องจากโฟกัสจะอยู่ที่ปุ่มนั้นก่อน

คงเลย์เอาต์แบบเป็นเส้นไว้

ตัวอย่างเลย์เอาต์แถวปุ่ม

ตัวอย่างเลย์เอาต์คอลัมน์ปุ่ม

  1. เลย์เอาต์แถว
  2. เลย์เอาต์คอลัมน์

ใช้ตัวแปรอย่างมีเหตุผล

ในเลย์เอาต์คอลัมน์ คุณควรใช้ตัวแปรปุ่มเดียว ในเลย์เอาต์แถว คุณสามารถจัดกลุ่มตัวแปรต่างๆ ไว้ในกลุ่มปุ่มได้ แต่ตรรกะควรชัดเจน คุณใช้ปุ่มแบบเต็มและแบบขอบในกลุ่มเดียวกันได้ แต่ต้องจัดลำดับลําดับการดําเนินการให้ชัดเจน

ใช้ปุ่มย่อยแบบเดียวกันในกลุ่มปุ่ม
ใช้ปุ่มแนวยาวและปุ่มรูปภาพร่วมกันในกลุ่มปุ่ม
ในเลย์เอาต์แถว คุณสามารถวางปุ่มข้อความและไอคอนไว้ด้วยกันได้ ตรวจสอบว่าปุ่มหลักมีความโดดเด่นมากกว่า
ในเลย์เอาต์คอลัมน์ ให้ใช้ตัวแปรปุ่มเพียงรายการเดียว