ส่วนเสริมของ Google Workspace ควรมีรูปแบบและเลย์เอาต์ที่สอดคล้องกับแอปพลิเคชันโฮสต์ที่ส่วนเสริมขยาย โดยควรขยาย UI อย่างเป็นธรรมชาติด้วยการใช้ตัวควบคุมและ ลักษณะการทำงานที่คุ้นเคย หลักเกณฑ์ที่แสดงที่นี่อธิบายวิธีจัดการข้อความ รูปภาพ การควบคุม และการสร้างแบรนด์ที่ส่งเสริมประสบการณ์ของผู้ใช้ที่มีคุณภาพสูง
หากส่วนเสริมเปิดหน้าเว็บแยกต่างหากซึ่งเป็นส่วนหนึ่งของการทำงานของส่วนเสริม (เช่น หน้าการตั้งค่าสำหรับส่วนเสริม) โปรดตรวจสอบว่าหน้าเว็บเหล่านั้นเป็นไปตามหลักเกณฑ์ด้านรูปแบบเหล่านี้ด้วย
ข้อความและรูปภาพ
ส่วนนี้จะอธิบายวิธีใช้ข้อความและรูปภาพใน ส่วนเสริม
ชื่อส่วนเสริม
คุณต้องตั้งชื่อส่วนเสริมในไฟล์ Manifest ของโปรเจ็กต์และเมื่อกำหนดค่าส่วนเสริม สำหรับการเผยแพร่ ชื่อจะปรากฏในหลายที่ เช่น รายการใน Google Workspace Marketplace และภายในเมนู เมื่อเลือกชื่อ ให้ทำดังนี้
- ใช้ตัวอักษรสำหรับชื่อเรื่อง
- หลีกเลี่ยงเครื่องหมายวรรคตอน โดยเฉพาะวงเล็บ เว้นแต่จะเป็นส่วนหนึ่งของแบรนด์
- เขียนให้กระชับ โดยมีอักขระไม่เกิน 15 ตัว ชื่อที่ยาวอาจถูกตัดทอนโดยอัตโนมัติในข้อมูล Google Workspace Marketplace และที่อื่นๆ
- อย่าใส่คำว่า "Google", "Gmail" หรือชื่อผลิตภัณฑ์อื่นๆ ของ Google ในชื่อส่วนเสริม
- อย่าใส่คำว่า "ส่วนเสริม" ในชื่อส่วนเสริม
- เว้นข้อมูลเวอร์ชันไว้
รูปแบบการเขียน
คุณไม่จำเป็นต้องเขียนมาก การดำเนินการส่วนใหญ่ควรมีความชัดเจนผ่าน ภาพสัญลักษณ์ เลย์เอาต์ และป้ายกำกับสั้นๆ หากพบว่าส่วนเสริมบางส่วนของคุณต้องมีคำอธิบายที่ครอบคลุมมากกว่าป้ายกำกับสั้นๆ การสร้างหน้าเว็บแยกต่างหากที่อธิบายส่วนเสริมของคุณและลิงก์ไปยังหน้าเว็บนั้นถือเป็นแนวทางปฏิบัติแนะนำ
เมื่อเขียนข้อความ UI
- ใช้รูปแบบประโยค (โดยเฉพาะปุ่ม ป้ายกำกับ และการดำเนินการในการ์ด)
- ควรใช้ข้อความที่สั้นและชัดเจนโดยไม่มีคำเฉพาะหรือตัวย่อ
การดำเนินการแบบสากลและการดำเนินการกับการ์ด
หากคุณใช้การดำเนินการสากลหรือ การดำเนินการในการ์ดใน ส่วนเสริม การดำเนินการเหล่านั้นจะปรากฏเป็นรายการเมนูในการ์ดที่คุณกำหนด คุณเลือกข้อความ ที่จะใช้ในเมนูเหล่านี้สำหรับการดำเนินการเหล่านี้ได้ เมื่อเลือกข้อความที่จะใช้ ให้ทำดังนี้
- หลีกเลี่ยงข้อความในเมนูที่ซ้ำกับชื่อของส่วนเสริม
- เริ่มต้นรายการเมนูแต่ละรายการด้วยคำกริยา เช่น "เรียกใช้" "กำหนดค่า" หรือ "สร้าง"
- อธิบายงาน ไม่ใช่คอมโพเนนต์ UI ที่การดำเนินการแสดง
- หากการดำเนินการของคุณเริ่มต้นเวิร์กโฟลว์และไม่มีคำกริยาคำเดียวที่อธิบาย สิ่งที่ดำเนินการ ให้เรียกการดำเนินการนั้นว่า "เริ่ม"
- เก็บจำนวนรายการเมนูไว้ให้น้อยเพื่อหลีกเลี่ยงการบังคับให้ผู้ใช้เลื่อนผ่านรายการขนาดใหญ่ หากมีหลายการดำเนินการที่ต้องใช้ ให้ลองใช้ การ์ดหลายใบที่มีการดำเนินการต่างๆ ในแต่ละใบ
ข้อความแสดงข้อผิดพลาด
เมื่อเกิดข้อผิดพลาด สิ่งสำคัญคือต้องใช้ภาษาที่เข้าใจง่าย อธิบายปัญหาจากมุมมองของผู้ใช้ และแนะนำวิธีแก้ไข
- อย่าให้ผู้ใช้เห็นข้อยกเว้นใดๆ ที่โค้ดของคุณส่ง แต่ให้ใช้คำสั่ง
try...catchเพื่อดักจับข้อยกเว้น แล้วแสดง ข้อความแสดงข้อผิดพลาดที่ใช้งานง่ายแทน - ก่อนเผยแพร่ โปรดตรวจสอบว่าส่วนเสริมของคุณไม่ได้ แสดงข้อมูลการแก้ไขข้อบกพร่องใน UI
เนื้อหา Help
คุณอาจต้องการหรือจำเป็นต้องออกแบบการ์ดที่แสดงข้อมูลความช่วยเหลือหรืออธิบาย การทำงานของส่วนเสริมให้ผู้ใช้ทราบ หากคุณสร้างเนื้อหาช่วยเหลือสำหรับส่วนเสริม โปรดอย่าลืมทำสิ่งต่อไปนี้
- หากเป็นไปได้ ให้แสดงวิธีการในรายการที่เรียงลำดับเลขหรือสัญลักษณ์หัวข้อย่อย แนะนำผู้ใช้ จนถึงผลลัพธ์สุดท้าย โดยอ้างอิงองค์ประกอบ UI ที่มีชื่ออย่างชัดเจน
- ตรวจสอบว่าวิธีการของคุณอธิบายข้อกำหนดต่างๆ อย่างชัดเจน เช่น การตั้งค่าสเปรดชีตในลักษณะหนึ่งๆ
- คุณสามารถลิงก์ไปยังเนื้อหาความช่วยเหลือภายนอก เช่น หน้าเว็บสนับสนุน
รูปภาพ
รูปภาพที่ใช้ในส่วนเสริมจะเป็นไอคอนประเภทในตัวหรือรูปภาพที่โฮสต์แบบสาธารณะซึ่งระบุโดย URL เมื่อใช้รูปภาพที่โฮสต์ โปรดตรวจสอบว่าทุกคนที่อาจใช้ส่วนเสริมของคุณเข้าถึงรูปภาพได้
การควบคุม
ส่วนนี้มีหลักเกณฑ์ด้านประสบการณ์ของผู้ใช้สำหรับวิดเจ็ตแบบอินเทอร์แอกทีฟ
ปุ่ม
ใช้ปุ่มเพื่อควบคุมการดำเนินการหลักของอินเทอร์เฟซผู้ใช้แทนวิดเจ็ตอื่นๆ
- ป้ายกำกับปุ่มข้อความส่วนใหญ่ควรขึ้นต้นด้วยคำกริยา
- โดยส่วนใหญ่แล้ว แถวของปุ่มควรมีปุ่มไม่เกิน 3 ปุ่ม
DecoratedText
วิดเจ็ต DecoratedText ช่วยให้คุณนำเสนอเนื้อหาข้อความด้วยไอคอน ปุ่ม หรือสวิตช์
- ใช้ตัวพิมพ์ใหญ่กับอักษรตัวแรกของคำและวิสามานยนาม (สำหรับภาษาอังกฤษ) สำหรับเนื้อหาข้อความ
- ข้อความของวิดเจ็ต DecoratedText จะถูกตัดทอนหากไม่พอดีกับ พื้นที่ที่มี ด้วยเหตุนี้ คุณจึงควรพยายามทำให้เนื้อหาข้อความสั้นที่สุดเท่าที่จะทำได้เสมอ
อินพุตการเลือก
คุณสามารถใช้ วิดเจ็ตอินพุตการเลือก ได้หลากหลายในส่วนเสริม ได้แก่ ช่องการเลือกแบบเลื่อนลง ช่องทำเครื่องหมาย และปุ่มตัวเลือก
- ใช้ช่องทำเครื่องหมายเมื่อผู้ใช้เลือกตัวเลือกได้หลายรายการ หรือไม่เลือกเลย ใช้ปุ่มตัวเลือก (หรือเมนูแบบเลือก) เมื่อต้องเลือกตัวเลือกเพียง 1 รายการ ใช้เมนูแบบเลื่อนลงเมื่อระบุรายการตัวเลือกสั้นๆ ขณะ พยายามประหยัดพื้นที่ใน UI
- ใช้ตัวพิมพ์ใหญ่กับอักษรตัวแรกของคำและวิสามานยนาม (สำหรับภาษาอังกฤษ) สำหรับข้อความที่กำหนดให้กับแต่ละตัวเลือก
- หลีกเลี่ยงการใช้การเปลี่ยนแปลงการเลือกเพื่อทริกเกอร์การดำเนินการที่สำคัญและย้อนกลับได้ยาก เนื่องจากผู้ใช้มักจะทำผิดพลาดเมื่อทำการเลือก แต่ให้พิจารณา เพิ่มปุ่มที่อ่านค่าที่เลือกในปัจจุบัน แล้วทริกเกอร์ การดำเนินการแทน
- สำหรับเมนูแบบเลื่อนลง ให้จัดเรียงตัวเลือกตามลำดับตัวอักษรหรือตามรูปแบบตรรกะที่ผู้ใช้ทุกคนเข้าใจได้ (เช่น การแสดงวันในสัปดาห์ตามลำดับ โดยเริ่มจากวันอาทิตย์หรือวันจันทร์)
- จำกัดจำนวนตัวเลือกในวิดเจ็ตอินพุตการเลือกที่กำหนดให้มีจำนวนที่สมเหตุสมผล หากมีตัวเลือกมากเกินไป ผู้ใช้อาจพบว่าวิดเจ็ตใช้งานยาก ในกรณีดังกล่าว ให้พิจารณาแบ่งตัวเลือกออกเป็นหมวดหมู่ต่างๆ และวิดเจ็ตหลายรายการ
การป้อนข้อความ
อินพุตข้อความเป็นพื้นที่ให้ผู้ใช้ป้อนข้อมูลสตริง
- อย่าใช้ช่องป้อนข้อความเพื่อให้ผู้ใช้พิมพ์รายการใดรายการหนึ่งจากชุดรายการที่เป็นไปได้ที่เฉพาะเจาะจง โปรดใช้เมนูแบบเลื่อนลงแทน
- ใช้คำใบ้และคำแนะนำเพื่อช่วยให้ผู้ใช้ป้อนข้อความที่มีรูปแบบและเนื้อหาที่ถูกต้อง
- ใช้ช่องป้อนข้อความหลายบรรทัดหากข้อความที่จะป้อนมีมากกว่า 2-3 คำ
การสร้างแบรนด์
ส่วนนี้มีหลักเกณฑ์ด้านประสบการณ์ของผู้ใช้สำหรับการเพิ่มองค์ประกอบการสร้างแบรนด์ลงใน อินเทอร์เฟซส่วนเสริม
ในส่วนเสริม
หากต้องการรวมการสร้างแบรนด์ไว้ใน UI ของส่วนเสริม โปรดใช้ข้อความสั้นๆ และเรียบง่าย ซึ่งจะช่วยให้ผู้ใช้โฟกัสที่ฟังก์ชันการทำงานของส่วนเสริม
- ทุกแง่มุมของส่วนเสริมต้องเป็นไปตามหลักเกณฑ์การสร้างแบรนด์
- อย่าใส่คำว่า "Google", "Gmail" หรือชื่อผลิตภัณฑ์อื่นๆ ของ Google
- อย่าใส่ไอคอนผลิตภัณฑ์ของ Google แม้ว่าจะมีการดัดแปลงแล้วก็ตาม
- อย่าใส่คำว่า "ส่วนเสริม" ในข้อความการสร้างแบรนด์
- ข้อความแบรนด์ควรมีความยาวไม่เกิน 2-3 คำ
ใน Google Workspace Marketplace
เมื่อกำหนดค่าส่วนเสริมสำหรับการเผยแพร่ คุณจะต้องระบุชิ้นงานกราฟิกและชิ้นงานข้อความจำนวนหนึ่งเพื่อสร้างข้อมูลใน Google Workspace Marketplace
ทุกแง่มุมของข้อมูลสินค้าใน Store และชิ้นงานเหล่านี้ต้องเป็นไปตามหลักเกณฑ์การสร้างแบรนด์