คู่มือเกี่ยวกับสไตล์ UI สําหรับส่วนเสริม Google Workspace

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

หากส่วนเสริมของคุณเปิดหน้าเว็บแยกต่างหากที่เป็นส่วนประกอบสำคัญของส่วนเสริม (เช่น หน้าการตั้งค่าสำหรับส่วนเสริม) ให้ตรวจสอบว่าหน้าเว็บเหล่านั้น ควรปฏิบัติตามหลักเกณฑ์เกี่ยวกับรูปแบบเหล่านี้

ข้อความและรูปภาพ

ส่วนนี้จะแสดงวิธีใช้ข้อความและรูปภาพในส่วนเสริมอย่างถูกต้อง

ชื่อส่วนเสริม

คุณต้องตั้งชื่อส่วนเสริมในโปรเจ็กต์ manifest และเมื่อใด กำหนดค่าส่วนเสริมสำหรับการเผยแพร่ ชื่อนี้จะปรากฏในหลายที่ เช่น Google Workspace Marketplace และภายในเมนู เมื่อเลือกชื่อ:

  • ขึ้นต้นคำด้วยตัวพิมพ์ใหญ่
  • หลีกเลี่ยงการใช้เครื่องหมายวรรคตอน โดยเฉพาะวงเล็บ ยกเว้นว่าเป็นส่วนหนึ่งของแบรนด์
  • ใช้ชื่อที่สั้นกระชับ ความยาวไม่เกิน 15 อักขระจะดีที่สุด ชื่อยาวอาจเป็น ตัดในข้อมูล Google Workspace Marketplace และที่อื่นๆ โดยอัตโนมัติ
  • อย่าใส่คำว่า "Google", "Gmail" หรือชื่อผลิตภัณฑ์อื่นๆ ของ Google ในชื่อส่วนเสริม
  • อย่าใส่คำว่า "ส่วนเสริม" ในชื่อส่วนเสริม
  • ไม่ต้องใส่ข้อมูลเวอร์ชัน

รูปแบบการเขียน

คุณไม่จำเป็นต้องเขียนอะไรมาก การดำเนินการส่วนใหญ่ควรชัดเจนผ่าน ระบบการตีความสัญลักษณ์ การจัดวาง และป้ายกำกับแบบย่อ หากเห็นส่วนเสริมบางส่วน ต้องการคำอธิบายที่ครอบคลุมมากกว่าที่ป้ายกำกับสั้นๆ จะให้ได้ ซึ่งจะดีที่สุด ฝึกสร้างหน้าเว็บแยกต่างหากซึ่งอธิบายส่วนเสริมและลิงก์ไปยังส่วนเสริมนั้น

เมื่อเขียนข้อความ UI:

  • ใช้ลักษณะตัวพิมพ์ของประโยค (โดยเฉพาะสำหรับปุ่ม ป้ายกำกับ และการทำงานของการ์ด)
  • ต้องการใช้ข้อความสั้นๆ ง่ายๆ ซึ่งไม่มีศัพท์เฉพาะหรือตัวย่อ

การดําเนินการ Universal และการ์ด

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

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

ข้อความแสดงข้อผิดพลาด

เมื่อเกิดข้อผิดพลาดขึ้น คุณก็ควรใช้ถ้อยคำที่เข้าใจง่าย อธิบาย จากมุมมองของผู้ใช้ และแนะนำวิธีแก้ไขปัญหา

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

เนื้อหา Help

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

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

รูปภาพ

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

การควบคุม

ส่วนนี้แสดงหลักเกณฑ์ด้านประสบการณ์ของผู้ใช้สำหรับ วิดเจ็ตแบบอินเทอร์แอกทีฟ

ปุ่ม

ใช้ปุ่มต่างๆ เพื่อควบคุมการทำงานหลักของอินเทอร์เฟซผู้ใช้แทนการใช้ปุ่ม วิดเจ็ตอื่นๆ

  • ป้ายกำกับปุ่มข้อความส่วนใหญ่ควรเริ่มต้นด้วยคำกริยา
  • โดยส่วนใหญ่แล้วแถวปุ่มควรจำกัดไว้ไม่เกิน 3 ปุ่ม

DecoratedText

วิดเจ็ต decorationedText ช่วยให้คุณนำเสนอเนื้อหาข้อความด้วยไอคอน ปุ่ม หรือสวิตช์ได้

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

ข้อมูลการเลือก

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

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

การป้อนข้อความ

การป้อนข้อความช่วยให้ผู้ใช้สามารถป้อนข้อมูลสตริงได้

  • อย่าใช้การป้อนข้อความเพื่อกำหนดให้ผู้ใช้พิมพ์ชุดใดชุดหนึ่ง รายการที่เป็นไปได้ โปรดเลือกจากเมนูแบบเลื่อนลงแทน
  • ใช้คำใบ้และคำแนะนำเพื่อช่วยผู้ใช้ป้อนข้อความ รูปแบบและเนื้อหา
  • ใช้การป้อนข้อความหลายบรรทัดหากข้อความที่จะป้อนมีมากกว่า 2-3 บรรทัด คำ

การสร้างแบรนด์

ส่วนนี้จะแสดงหลักเกณฑ์ด้านประสบการณ์ของผู้ใช้ในการเพิ่มองค์ประกอบการสร้างแบรนด์ ลงในอินเทอร์เฟซส่วนเสริม

ในส่วนเสริม

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

  • ส่วนเสริมทุกด้านต้องเป็นไปตาม หลักเกณฑ์การสร้างแบรนด์
  • อย่าใส่คำว่า "Google" "Gmail" หรือชื่อผลิตภัณฑ์อื่นๆ ของ Google
  • อย่าใส่ไอคอนผลิตภัณฑ์ของ Google แม้จะมีการเปลี่ยนแปลงก็ตาม
  • อย่าใส่คำว่า "ส่วนเสริม" ในข้อความการสร้างแบรนด์
  • ข้อความการสร้างแบรนด์ต้องยาวไม่เกิน 2-3 คำ

ใน Google Workspace Marketplace

เมื่อกำหนดค่าส่วนเสริมสำหรับการเผยแพร่ คุณให้เนื้อหากราฟิกและข้อความจำนวนมากเพื่อสร้าง ข้อมูลใน Google Workspace Marketplace

ทุกด้านของข้อมูลผลิตภัณฑ์ใน Store และเนื้อหาเหล่านี้ต้องเป็นไปตาม หลักเกณฑ์การสร้างแบรนด์