ปุ่มช่วยให้ผู้ใช้เริ่มการดำเนินการหรือขั้นตอนต่างๆ เลือกจากตัวเลือกอื่น ประเภทของปุ่มเพื่อแจ้งการเน้น
แหล่งข้อมูล
ประเภท | ลิงก์ | สถานะ |
---|---|---|
การออกแบบ | แหล่งที่มาของการออกแบบ (Figma) | ใช้งานได้ |
การใช้งาน | Jetpack Compose | ใช้งานได้ |
ไฮไลต์
- เลือกประเภทของปุ่มตามความสำคัญของการกระทำ ยิ่งการดำเนินการมีความสำคัญมากเท่าใด ปุ่มก็จะยิ่งมากขึ้นเท่านั้น
- ปุ่มต่างๆ ควรมีป้ายกำกับที่ชัดเจนเพื่อระบุถึงการดำเนินการของปุ่มต่างๆ
- วางปุ่มบนหน้าจออย่างมีเหตุผล ซึ่งผู้ใช้มักคาดหวังว่า หาเจอ
- อย่าใช้ปุ่มมากเกินไป มีปุ่มบนหน้าจอมากเกินไปที่รบกวน ลำดับชั้นภาพเท่านั้น
เวอร์ชัน
ปุ่มมี 6 ประเภทดังนี้
- ปุ่มแบบเติมสี
- ปุ่มเติมขอบ
- ปุ่มไอคอน
- ปุ่มไอคอนโครงร่าง
- ปุ่มยาว
- ปุ่มรูปภาพ






เลือกประเภทของปุ่มตามความสำคัญของการกระทำ ยิ่งการกระทำมีความสำคัญมาก ปุ่มก็ควรเน้นย้ำมากขึ้น
ปุ่มเติมขอบและเติมขอบ
ปุ่มแบบเติมสีจะส่งผลกระทบด้านภาพมากที่สุด และควรใช้สำหรับความสำคัญ การดำเนินการสุดท้ายที่ดำเนินขั้นตอนจนเสร็จสิ้น เช่น บันทึก เข้าร่วมเลย ยืนยัน หรือดาวน์โหลด
ปุ่มแบบเติมขอบเป็นปุ่มที่เน้นระดับปานกลาง มีการดำเนินการที่ สำคัญ แต่ไม่ใช่การกระทำหลักในแอป คู่ปุ่มแบบเติมขอบ พร้อมปุ่มที่เติมสีไว้แล้วเพื่อระบุว่ามีการดำเนินการรองอย่างอื่น
กายวิภาคศาสตร์
- คอนเทนเนอร์
- ข้อความป้ายกำกับ
- ไอคอน (ไม่บังคับ)
รัฐ
การแสดงภาพสถานะของคอมโพเนนต์
- ค่าเริ่มต้น
- มีสมาธิ
- กดแล้ว
ข้อมูลจำเพาะ
ปุ่มไอคอนและเส้นโครงร่าง
ใช้ปุ่มไอคอนเพื่อแสดงการทำงานในเลย์เอาต์ที่กะทัดรัด ปุ่มไอคอนสามารถ แสดงถึงการเปิดการทำงาน เช่น การเปิดเมนูรายการเพิ่มเติมหรือการค้นหา หรือ แสดงการทำงานแบบไบนารีที่เปิดหรือปิดได้ เช่น ตั้งเป็นรายการโปรดหรือ บุ๊กมาร์ก รวมถึงใช้ในการเล่นหรือหยุดสื่อชั่วคราวด้วย
ปุ่มไอคอนสามารถกำหนดได้ 3 ขนาด ได้แก่ เล็ก กลาง และใหญ่
กายวิภาคศาสตร์
- คอนเทนเนอร์
- ไอคอน
รัฐ
- ค่าเริ่มต้น
- มีสมาธิ
- กดแล้ว
สถานะคือการนำเสนอด้วยภาพที่ใช้ในการสื่อสารสถานะของ คอมโพเนนต์หรือองค์ประกอบแบบอินเทอร์แอกทีฟ
ข้อกำหนด
ปุ่มแบบกว้าง
ปุ่มแบบกว้างจะใช้สำหรับปุ่มที่มีความคมชัดสูงกว่าปกติ มีการดำเนินการที่สำคัญ ปุ่มที่แสดงสิ่งที่เกี่ยวข้อง หลายตัวเลือกพร้อมกัน กลุ่มนี้ควรแชร์พื้นที่ร่วมกัน
กายวิภาคศาสตร์
- คอนเทนเนอร์
- ไอคอนนำหน้า
- ชื่อ
- ชื่อรอง
รัฐ
- ค่าเริ่มต้น
- มีสมาธิ
- กดแล้ว
สถานะคือการนำเสนอด้วยภาพที่ใช้ในการสื่อสารสถานะของ คอมโพเนนต์หรือองค์ประกอบแบบอินเทอร์แอกทีฟ
ข้อกำหนด
ปุ่มรูปภาพ
โดยปกติแล้ว ปุ่มรูปภาพจะใช้เพื่อแสดงภาพขนาดย่อของเนื้อหาที่ ในการนำทางระดับถัดไป ซึ่งมักจะจัดกลุ่มไว้ ทำงานที่เกี่ยวข้องกัน และกลุ่มนั้นควรมีส่วนร่วมในมุมมองเดียวกัน
กายวิภาคศาสตร์
- คอนเทนเนอร์
- ไอคอนนำหน้า
- ชื่อ
- ชื่อรอง
- เลเยอร์รูปภาพ ซึ่งประกอบด้วย
- Scrim (การวางซ้อนสถานะ)
- การไล่ระดับสี (ขึ้นอยู่กับสีพื้นผิว)
- รูปภาพ
รัฐ
- ค่าเริ่มต้น
- มีสมาธิ
- กดแล้ว
สถานะคือการนำเสนอด้วยภาพที่ใช้ในการสื่อสารสถานะของ คอมโพเนนต์หรือองค์ประกอบแบบอินเทอร์แอกทีฟ
ข้อกำหนด
การใช้งาน
โดยปกติ ปุ่มจะใช้ในการสื่อสารการกระทำต่างๆ ที่ผู้ใช้ทำได้ ซึ่งมักพบในองค์ประกอบ UI เช่น กล่องโต้ตอบ หน้าต่างโมดัล แบบฟอร์ม การ์ด และแถบเครื่องมือ
ปุ่มเป็นเพียงตัวเลือกหนึ่งในการแสดงการทำงานต่างๆ ใน UI ของคุณ สิ่งที่ไม่ควรทำ ใช้งานมากเกินไป ปุ่มบนหน้าจอมากเกินไปจะทำให้ลำดับชั้นภาพหยุดชะงัก
- คอนเทนเนอร์
- ไอคอน
- ข้อความป้ายกำกับ
- ชื่อ
- ชื่อรอง
- รูปภาพ
คอนเทนเนอร์
ปุ่มแสดงคอนเทนเนอร์รอบๆ เนื้อหา คอนเทนเนอร์ปรับขนาดขึ้น 1.1 เท่าเมื่อ โดยรักษาระยะห่างจากขอบภายใน ข้อควรพิจารณามีดังนี้ สำหรับคอนเทนเนอร์:
- กำหนดความกว้างของคอนเทนเนอร์ตามเนื้อหาที่มีระยะห่างจากขอบที่สอดคล้องกัน
- กำหนดตำแหน่งที่สัมพันธ์กับตารางกริดของเลย์เอาต์ที่ปรับเปลี่ยนตามอุปกรณ์
- ใช้คอนเทนเนอร์สีทึบสำหรับปุ่มที่เติมสี
- ใช้เส้นโครงร่างและสีเติมตรงจุดโฟกัสสำหรับปุ่มที่มีเส้นขอบ โฟกัสที่ จะมีสีเติมพร้อมกับเค้าร่าง
- สำหรับปุ่มกว้างและปุ่มรูปภาพ ความกว้างของคอนเทนเนอร์จะกำหนดตาม และเลย์เอาต์ทั้งหมด
- ขนาด ตำแหน่ง และการจัดแนวของคอนเทนเนอร์อาจเปลี่ยนแปลงได้ในฐานะระดับบนสุด สเกลของคอนเทนเนอร์
คอนเทนเนอร์ปุ่มข้อความและไอคอนมีมุมโค้งมนทั้งหมด กว้างและ คอนเทนเนอร์ปุ่มรูปภาพมีคอนเทนเนอร์ทรงกลมขนาด 12dp

ควรทำ

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

ควรทำ

ไม่ควรทำ

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

ควรทำ

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


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

ควรทำ

ไม่ควรทำ

ข้อควรระวัง
