ปุ่ม

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

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

แหล่งข้อมูล

ประเภท	ลิงก์	สถานะ
การออกแบบ	แหล่งที่มาของการออกแบบ (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

ไอคอน

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

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

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

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

รูปภาพ

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

กลุ่มปุ่ม

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

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

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

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

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

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

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

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