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