การ์ดสามารถมีข้อมูลได้หลากหลาย เช่น ข้อความ ไอคอน รูปภาพ คำตอบของ Gemini หรือการดำเนินการ
AI
สอดคล้องกัน: การ์ดจะจัดกลุ่มข้อมูลและการดำเนินการที่เกี่ยวข้องไว้ในหน่วยเดียวที่ เข้าใจง่าย
ชัดเจน: การ์ดจะนำเสนอเนื้อหาในลักษณะที่ชัดเจนและเป็นระเบียบ ซึ่งช่วยให้สแกนได้ง่ายขึ้น
หลากหลาย: การ์ดสามารถปรับให้แสดงเนื้อหาได้หลากหลาย ตั้งแต่ข้อความสั้นๆ ไปจนถึงสรุปที่ซับซ้อนมากขึ้นซึ่งมีหลายองค์ประกอบ
แยกย่อยแบบโมดูล: ออกแบบมาให้แยกย่อยแบบโมดูลและนำกลับมาใช้ใหม่ได้ในส่วนต่างๆ ของอินเทอร์เฟซ Jetpack Compose Glimmer for Glasses
การใช้งานและการจัดวาง
การ์ดสามารถมีข้อมูลได้หลากหลาย เช่น ข้อความ ไอคอน รูปภาพ การดำเนินการ หรือคำตอบของ Gemini
ใช้เทมเพลตการ์ด Jetpack Compose Glimmer สำหรับเนื้อหา เนื่องจากมีรูปแบบที่หลากหลายและได้รับการปรับให้เหมาะสมกับหลักการออกแบบแว่นตาตั้งแต่เริ่มต้น
ควรทำ
สิ่งที่ไม่ควรทำ
ใช้กลุ่มปุ่มกับการ์ดเพื่อแสดงการดำเนินการมากกว่า 1 รายการ
ควรทำ
สิ่งที่ไม่ควรทำ
กายวิภาคศาสตร์
การ์ดสร้างขึ้นด้วยเทมเพลตช่องที่ตั้งค่าไว้ล่วงหน้า
1. ส่วนหัว: ส่วนบนของการ์ดที่ออกแบบมาให้มีรูปภาพ
2. ชื่อและคำบรรยาย: ช่องข้อความเหล่านี้มีป้ายกำกับหลักและป้ายกำกับรองสำหรับการ์ด
3. ไอคอนนำ: ไอคอนที่ไม่บังคับซึ่งปรากฏที่จุดเริ่มต้นของพื้นที่เนื้อหาของการ์ด
4. ไอคอนต่อท้าย: ไอคอนที่ไม่บังคับซึ่งปรากฏที่จุดสิ้นสุดของพื้นที่เนื้อหาของการ์ด
5. การดำเนินการ: ช่องสำหรับองค์ประกอบแบบอินเทอร์แอกทีฟหลัก เช่น ปุ่ม ซึ่งช่วยให้ผู้ใช้ดำเนินการจากการ์ดได้โดยตรง หากการ์ดมีการดำเนินการ ก็ควรมีการดำเนินการเพียงรายการเดียว
6. เนื้อหาหลัก: ส่วนเนื้อหาหลักของการ์ด ซึ่งเป็นที่ที่คุณวางข้อความหลักหรือเนื้อหาอื่นๆ
โฟกัส
สำหรับการ์ดที่มีวัตถุประสงค์หลักคือการเก็บองค์ประกอบแบบอินเทอร์แอกทีฟที่เฉพาะเจาะจง (เช่น ปุ่มในการดำเนินการ) โฟกัสควรไปที่องค์ประกอบนั้นโดยตรง ไม่ใช่คอนเทนเนอร์ของการ์ด การ์ดจะโฟกัสได้เมื่อแสดงรายการเดียวที่ไปยังส่วนต่างๆ ได้ เช่น รายการในรายการ ซึ่งจะช่วยให้ผู้ใช้ได้รับประสบการณ์การใช้งานที่ตรงไปตรงมาและเข้าถึงได้มากขึ้น
การ์ดที่โฟกัสเป็นรายการในรายการ
ปุ่มในการ์ดจะได้รับโฟกัสเป็นองค์ประกอบที่ดำเนินการได้
การปรับแต่ง
| พร็อพเพอร์ตี้ | การปรับแต่ง | ค่าเริ่มต้น |
|---|---|---|
| รูปร่าง | ใช่ | ปานกลาง |
| Padding | ใช่ | 24 dp, 24 dp |
| ขอบจาน | ใช่ | 2 dp, #606460 |
| ข้อความ | ใช่ | ขนาดเล็ก |
| ไอคอนนำ | ใช่ | 56 dp |
| ไอคอนต่อท้าย | ใช่ | 56 dp |