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

วันที่

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

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

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

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

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

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

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

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

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

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

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

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

  • ส่วนเสริม "แมว" ของ Google Workspace การเริ่มต้นอย่างรวดเร็ว

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

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

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

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

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