ปุ่ม

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

แหล่งข้อมูล

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

ไฮไลต์

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

เวอร์ชัน

ปุ่มมี 6 ประเภทดังนี้

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

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

ปุ่มเติมขอบและเติมขอบ

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

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

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

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

รัฐ

การแสดงภาพสถานะของคอมโพเนนต์

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

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

ปุ่มไอคอนและเส้นโครงร่าง

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

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

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

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

รัฐ

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

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

ข้อกำหนด

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

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

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

1. คอนเทนเนอร์
2. ไอคอนนำหน้า
3. ชื่อ
4. ชื่อรอง

รัฐ

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

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

ข้อกำหนด

ปุ่มรูปภาพ

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

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

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

รัฐ

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

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

ข้อกำหนด

การใช้งาน

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

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

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

คอนเทนเนอร์

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

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

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

ไอคอน

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

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

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

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

รูปภาพ

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

กลุ่มปุ่ม

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

แจ้งลำดับชั้น

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

ปุ่มแรกในกลุ่มจะทำหน้าที่เป็นการกระทำหลักนับตั้งแต่ที่โฟกัส ได้มาถึงจุดนั้นก่อน

รักษาเลย์เอาต์แบบเชิงเส้น

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

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

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