การ์ด

การ์ดอาจมีข้อมูลหลากหลาย เช่น ข้อความ ไอคอน รูปภาพ คำตอบของ Gemini หรือการดำเนินการ

AI

สอดคล้องกัน: การ์ดจะจัดกลุ่มข้อมูลและการดำเนินการที่เกี่ยวข้องไว้ในหน่วยเดียวที่ เข้าใจง่าย

ชัดเจน: นำเสนอเนื้อหาในลักษณะที่ชัดเจนและเป็นระเบียบ ซึ่งช่วยให้สแกนได้ง่ายขึ้น

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

แบบโมดูล: ออกแบบมาให้เป็นแบบโมดูลและนำกลับมาใช้ใหม่ได้ในส่วนต่างๆ ของ อินเทอร์เฟซ Jetpack Compose Glimmer สำหรับแว่นตา

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

การ์ดอาจมีข้อมูลหลากหลาย เช่น ข้อความ ไอคอน รูปภาพ การดำเนินการ หรือคำตอบของ Gemini

ใช้เทมเพลตการ์ด Glimmer ของ Jetpack Compose สำหรับเนื้อหา เนื่องจากมีหลายรูปแบบและได้รับการเพิ่มประสิทธิภาพให้เป็นไปตามหลักการออกแบบแว่นตาตั้งแต่แรก

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

การ์ดสร้างขึ้นด้วยเทมเพลตช่องที่กำหนดไว้ล่วงหน้า

1. ส่วนหัว: ส่วนบนสุดของการ์ดที่ออกแบบมาเพื่อใส่รูปภาพ 

2. ชื่อและคำบรรยาย: ช่องข้อความเหล่านี้ระบุป้ายกำกับหลักและรอง สำหรับการ์ด 

3. ไอคอนนำหน้า: ไอคอนที่ไม่บังคับซึ่งจะปรากฏที่จุดเริ่มต้นของพื้นที่เนื้อหาของการ์ด

4. ไอคอนต่อท้าย: ไอคอนที่ไม่บังคับซึ่งจะปรากฏที่ส่วนท้ายของพื้นที่เนื้อหา ของการ์ด

5. การดำเนินการ: ช่องสำหรับองค์ประกอบแบบอินเทอร์แอกทีฟหลัก เช่น ปุ่ม ซึ่งจะช่วยให้ผู้ใช้ดำเนินการจากบัตรได้โดยตรง โดยช่องนี้จะพร้อมใช้งาน ในการโอเวอร์โหลดที่แยกต่างหากของ Composable ของการ์ด 

6. เนื้อหาหลัก: ส่วนเนื้อหาหลักของการ์ด ซึ่งคุณวางข้อความหลัก หรือเนื้อหาอื่นๆ

โฟกัส

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

การ์ดที่โฟกัสเป็นรายการในลิสต์

ระบบจะโฟกัสปุ่มภายในการ์ดเป็นองค์ประกอบที่ดำเนินการได้

การปรับแต่ง

คุณสมบัติ	การปรับแต่ง	ค่าเริ่มต้น
รูปทรง	ใช่	ปานกลาง
Padding	ใช่	24 dp, 24 dp
เส้นขอบ	ใช่	2 dp, #606460
ข้อความ	ใช่	Body Small
ไอคอนแสดงอันดับที่นำอยู่	ใช่	56 dp
ไอคอนต่อท้าย	ใช่	56 dp