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

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

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

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

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

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

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

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

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

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

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

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

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

  • คู่มือเริ่มต้นใช้งานส่วนเสริม "Cats" ของ Google Workspace

    ตัวอย่างส่วนเสริมนี้แสดง UI ของส่วนเสริม Google Workspace ที่เรียบง่ายซึ่งมีหน้าเว็บหลายหน้าและหน้าแรก

  • ส่วนเสริมของ Google Workspace: "แปล"

    ตัวอย่างส่วนเสริมนี้แสดงส่วนเสริมของ Google Workspace ที่ช่วยให้ผู้ใช้แปลข้อความจากภายในเอกสาร ชีต และสไลด์ได้

  • ส่วนเสริมของ Google Workspace: "รายชื่อทีม"

    ตัวอย่างส่วนเสริมนี้แสดงตัวอย่างส่วนเสริม Google Workspace ที่ซับซ้อนมากขึ้น ซึ่งแสดงข้อมูลผู้ใช้เกี่ยวกับผู้รับข้อความ Gmail, ผู้แก้ไขไฟล์ในไดรฟ์ หรือผู้เข้าร่วมกิจกรรมในปฏิทิน คุณจะใช้ส่วนเสริมนี้ได้เฉพาะภายในโดเมน เนื่องจากใช้ Directory API เพื่อดึงข้อมูลผู้ใช้