ปุ่ม

ปุ่มเป็นตัวบ่งชี้ภาพหลักสำหรับการดำเนินการของผู้ใช้

AI

มุ่งเน้นการดำเนินการ: ปุ่มควรสื่อสารอย่างชัดเจนว่าปุ่มดังกล่าวจะทริกเกอร์การดำเนินการ

ความคิดเห็นที่ชัดเจน: ลักษณะของปุ่มต้องเปลี่ยนอย่างชัดเจนในสถานะการโต้ตอบต่างๆ (วางเมาส์เหนือ กด โฟกัส) เพื่อให้ความคิดเห็นได้ทันที

สอดคล้องกัน: ปุ่มทั้งหมดควรใช้ภาษาภาพหลักร่วมกันเพื่อให้จดจำได้ทันที

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

การใช้งานและการจัดวาง

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

ปุ่มไอคอน

ปุ่มไอคอนพร้อมใช้งานเพื่อลดความหนาแน่นของเนื้อหา ใช้ปุ่มไอคอนเมื่อไอคอนแสดงการดำเนินการอย่างชัดเจน มิฉะนั้นให้ใส่ป้ายกำกับปุ่ม

สลับได้

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

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

ปุ่มประกอบด้วยป้ายกำกับและไอคอนที่ไม่บังคับซึ่งนำหน้าหรือต่อท้าย

ปุ่มไอคอนประกอบด้วยไอคอนที่จดจำได้เท่านั้น

ทั้ง 2 แบบมีตัวแปรที่สลับได้

การปรับแต่ง

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

คุณสามารถใช้ไอคอนเพื่อเน้นย้ำ ชี้แจง และจดจำปุ่มได้ดียิ่งขึ้น ในตำแหน่งท้ายหรือตำแหน่งนำ