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

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

ส่วนเสริมของ 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 เพื่อดึงข้อมูลผู้ใช้