การ์ด

การ์ดอาจมีข้อมูลที่หลากหลาย เช่น ข้อความ ไอคอน รูปภาพ คำตอบของ 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