อินเทอร์เฟซที่ใช้การ์ด

ตัวอย่างการ์ดส่วนเสริม

ส่วนเสริมของ Google Workspace จะแสดงข้อมูลและการควบคุมของผู้ใช้ในแถบด้านข้างของ UI ของแอปพลิเคชันโฮสต์ ส่วนเสริมประกอบด้วยแถบเครื่องมือหลักที่ใช้ระบุ รวมถึงการ์ดอย่างน้อย 1 รายการ

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

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

ส่วนเสริมของ Google Workspace ที่สร้างขึ้นใน Apps Script ใช้บริการการ์ดเพื่อสร้างอินเทอร์เฟซผู้ใช้จากการ์ด ส่วนเสริมที่สร้างในภาษาอื่น ต้องส่ง JSON ที่จัดรูปแบบอย่างถูกต้องเพื่อให้อินเทอร์เฟซแสดงผลเป็นการ์ด

การ์ดแต่ละใบประกอบด้วยส่วนหัวและส่วนการ์ดอย่างน้อย 1 ส่วน แต่ละส่วนจะประกอบไปด้วยชุดวิดเจ็ต วิดเจ็ตจะแสดงข้อมูลแก่ผู้ใช้หรือให้ส่วนควบคุมการโต้ตอบ เช่น ปุ่มต่างๆ

อินเทอร์เฟซแบบการ์ดมีประโยชน์ดังต่อไปนี้

  • การสร้างอินเทอร์เฟซแบบการ์ดไม่จำเป็นต้องมีความรู้เกี่ยวกับ HTML หรือ CSS
  • การ์ดและวิดเจ็ตได้รับการจัดรูปแบบโดยอัตโนมัติเพื่อให้ทำงานได้ดีกับ แอปพลิเคชัน Google Workspace ที่มี

  • อินเทอร์เฟซแบบการ์ดใช้งานได้ทั้งบนเดสก์ท็อปและอุปกรณ์เคลื่อนที่ แต่คุณต้องกำหนดอินเทอร์เฟซเพียงครั้งเดียวเท่านั้น

การสร้างอินเทอร์เฟซแบบการ์ด

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

โปรดดูหน้าเหล่านี้เมื่อสร้างการ์ดและใช้ลักษณะการทำงานของ UI ตัวอย่างเพิ่มเติมต่อไปนี้อาจเป็นประโยชน์ในการอ้างอิงเมื่อติดตั้งใช้งานส่วนเสริม