ปุ่มเป็นตัวบ่งชี้ภาพหลักสำหรับการดำเนินการของผู้ใช้
AI
มุ่งเน้นการดำเนินการ: ปุ่มควรสื่อสารอย่างชัดเจนว่าปุ่มจะทริกเกอร์การดำเนินการ
แสดงความคิดเห็นอย่างชัดเจน: ลักษณะของปุ่มต้องเปลี่ยนอย่างชัดเจนในสถานะการโต้ตอบต่างๆ (วางเมาส์เหนือ กด โฟกัส) เพื่อให้ความคิดเห็นได้ทันที
สอดคล้องกัน: ปุ่มทั้งหมดควรใช้ภาษาภาพหลักร่วมกันเพื่อให้จดจำได้ทันที
ยืดหยุ่น: คอมโพเนนต์ปุ่มควรรองรับรูปแบบที่ใช้กันทั่วไป เช่น การรวมไอคอนและขนาดต่างๆ โดยไม่ลดความสอดคล้องกัน
การใช้งานและการจัดวาง
ควรวางปุ่มไว้ใกล้กับเนื้อหาที่เกี่ยวข้อง คุณวางไว้เดี่ยวๆ หรือวางร่วมกับคอมโพเนนต์อื่นๆ เช่น การ์ดและรายการก็ได้
ควรทำ
สิ่งที่ไม่ควรทำ
ควรทำ
สิ่งที่ไม่ควรทำ
กายวิภาคศาสตร์
ค่าเริ่มต้น
1. เปิดใช้: สถานะเริ่มต้น
2. วางเมาส์
3. แตะ
ใหญ่
1. เปิดใช้: สถานะเริ่มต้น
2. วางเมาส์
3. แตะ
การปรับแต่ง
ปุ่มมีรูปแบบเริ่มต้นและรูปแบบขนาดใหญ่ รวมถึงสถานะเริ่มต้น โฟกัส และกดสำหรับแต่ละปุ่ม คุณสามารถใช้ไอคอนเพื่อเน้นย้ำ ชี้แจง และทำให้ปุ่มเป็นที่รู้จักมากขึ้น ขนาดปุ่มช่วยเน้นความสำคัญได้
ค่าเริ่มต้น
| คุณสมบัติ | การปรับแต่ง | ค่าเริ่มต้น |
|---|---|---|
| รูปทรง | ใช่ | ใหญ่ วงกลม |
| Padding | ใช่ | 16 dp, 8 dp |
| เส้นขอบ | ใช่ | 2 dp, #606460 |
| ข้อความ | ใช่ | Body Small |
| ไอคอนแสดงอันดับที่นำอยู่ | ใช่ | 40 dp |
| ไอคอนต่อท้าย | ใช่ | 40 dp |
| ขนาด | ใช่ | ความสูงขั้นต่ำ 56 dp |
| ความลึก | ใช่ | 0 |
ใหญ่
| คุณสมบัติ | การปรับแต่ง | ค่าเริ่มต้น |
|---|---|---|
| รูปทรง | ใช่ | ใหญ่ วงกลม |
| Padding | ใช่ | 20 dp, 8 dp |
| เส้นขอบ | ใช่ | 2 dp, #606460 |
| ข้อความ | ใช่ | Body Small |
| ไอคอนแสดงอันดับที่นำอยู่ | ใช่ | 56 dp |
| ไอคอนต่อท้าย | ใช่ | 56 dp |
| ขนาด | ใช่ | ความสูงขั้นต่ำ 72 dp |
| ความลึก | ใช่ | 0 |
| พื้นผิว | ไม่ |