ปุ่ม

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

กระดุมปก

แหล่งข้อมูล

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

ควรทำ

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

ข้อควรระวัง

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

ไอคอน

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

ควรทำ

ปุ่มไอคอนที่มีขนาดต่างกันสามารถจัดกลุ่มเข้าด้วยกันได้

ไม่ควรทำ

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

ข้อควรระวัง

อย่าใช้ไอคอน 2 ไอคอนในปุ่มเดียวกัน

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

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

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

ควรทำ

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

ข้อควรระวัง

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

รูปภาพ

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

กลุ่มปุ่ม

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

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

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

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

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

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

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

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

ควรทำ

ใช้ตัวแปรปุ่มเดียวกันในกลุ่มปุ่ม

ไม่ควรทำ

ผสมปุ่มขนาดยาวและปุ่มรูปภาพในกลุ่มปุ่ม

ข้อควรระวัง

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

ควรทำ

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