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

ส่วนเสริมของ 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 หากข้อความไม่พอดีกับพื้นที่ที่มีอยู่ ดังนั้น โปรดพยายามเขียนเนื้อหาข้อความให้สั้นที่สุดเสมอ

อินพุตการเลือก

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

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

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

อินพุตข้อความเป็นพื้นที่สำหรับให้ผู้ใช้ป้อนข้อมูลสตริง

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

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

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

ในส่วนเสริม

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

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

ใน Google Workspace Marketplace

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

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