ส่วนเสริม Editor สร้างอินเทอร์เฟซผู้ใช้ (เมนู แถบด้านข้าง และกล่องโต้ตอบ) โดยใช้บริการ HTML ของ Apps Script เนื่องจากอินเทอร์เฟซได้รับการพัฒนาในรูปแบบ HTML และ CSS จึงสามารถปรับแต่งได้หลากหลาย อย่างไรก็ตาม เมื่อสร้างอินเทอร์เฟซส่วนเสริม คุณควรออกแบบอินเทอร์เฟซให้มอบประสบการณ์ที่ยอดเยี่ยมแก่ผู้ใช้
ส่วนเสริมที่ดีที่สุดจะขยายเครื่องมือแก้ไขแต่ละรายการได้อย่างเป็นธรรมชาติ โดยใช้การควบคุมและลักษณะการทำงานที่คุ้นเคย เมื่อสร้างส่วนเสริมใหม่ ให้ทำดังนี้
- ใช้แพ็กเกจ CSS ส่วนเสริมในหน้าบริการ HTML
- เมื่อไม่แน่ใจเกี่ยวกับการออกแบบ ให้ค้นหากล่องโต้ตอบหรือแถบด้านข้างที่คล้ายกันในตัวแก้ไขและจับคู่กัน หรือดูที่การเริ่มต้นอย่างรวดเร็วของส่วนเสริม
- ทำตามคู่มือสไตล์นี้เพื่อสร้างประสบการณ์การใช้งานที่ราบรื่น
ข้อความ
ชื่อส่วนเสริม
คุณต้องตั้งชื่อส่วนเสริมเมื่อเผยแพร่ส่วนเสริม ชื่อนี้จะปรากฏในหลายตำแหน่ง เช่น ร้านค้าส่วนเสริมและภายในเมนู
- ขึ้นต้นทุกคำด้วยตัวพิมพ์ใหญ่
- หลีกเลี่ยงการใช้เครื่องหมายวรรคตอน โดยเฉพาะวงเล็บ ยกเว้นว่าเป็นส่วนหนึ่งของแบรนด์ของคุณ
- โดยควรใช้ข้อความสั้นๆ โดยมีความยาวไม่เกิน 30 อักขระ ชื่อที่ยาวอาจถูกตัดให้สั้นลงโดยอัตโนมัติ
- อย่าใส่ชื่อผลิตภัณฑ์ Google ที่เป็นส่วนเสริม (หรือใช้คำว่า Google)
- ยกเว้นข้อมูลเวอร์ชัน
- ตรวจสอบว่าชื่อที่เผยแพร่ของส่วนเสริมเหมือนกับชื่อไฟล์ของโปรเจ็กต์สคริปต์ ชื่อโปรเจ็กต์จะปรากฏในกล่องโต้ตอบการให้สิทธิ์
สิ่งที่ไม่ควรทำ | สิ่งที่ควรทำ |
---|---|
รูปแบบการเขียน
คุณไม่จําเป็นต้องเขียนอะไรมาก การดำเนินการส่วนใหญ่ควรมีความชัดเจนผ่านไอคอน การออกแบบ และป้ายกำกับสั้นๆ หากพบว่าส่วนเสริมบางส่วนต้องการคำอธิบายที่ครอบคลุมกว่าป้ายกำกับแบบสั้น แนวทางปฏิบัติแนะนำคือการสร้างหน้าเว็บแยกต่างหากที่อธิบายส่วนเสริมและลิงก์ไป
เมื่อเขียนข้อความ UI:
- ขึ้นต้นประโยคด้วยตัวพิมพ์ใหญ่ หรือใช้ตัวพิมพ์ใหญ่กับอักษรตัวแรกของคำ (โดยเฉพาะสำหรับปุ่ม ป้ายกำกับ และรายการในเมนู)
- เลือกใช้ข้อความสั้นๆ ง่ายๆ ที่ไม่มีคำศัพท์เฉพาะหรือตัวย่อ
สิ่งที่ไม่ควรทำ | สิ่งที่ควรทำ |
---|---|
|
|
เคล็ดลับหลังการติดตั้ง
เคล็ดลับหลังการติดตั้งจะปรากฏขึ้นทันทีหลังจากที่ติดตั้งส่วนเสริมและแสดงใน "ความช่วยเหลือ" ด้วย คุณมีประโยค 2 ประโยคที่จะช่วยให้ผู้ใช้เริ่มต้นใช้งานได้อย่างรวดเร็ว
- เริ่มต้นด้วยคำดำเนินการ
- อธิบายขั้นตอนแรกในการใช้ส่วนเสริม
- หากคุณมี UI หลัก เช่น แถบด้านข้าง ให้อธิบายวิธีเปิด
- ไม่ต้องโปรโมตส่วนเสริมที่นี่ เพราะติดตั้งส่วนเสริมไว้แล้ว
สิ่งที่ไม่ควรทำ | สิ่งที่ควรทำ |
---|---|
รายการในเมนู
ส่วนเสริมไม่เหมือนกับโครงการ Apps Script ปกติตรงที่จะไม่ปรากฏในเครื่องมือแก้ไขสคริปต์หรือโปรแกรมจัดการสคริปต์ ผู้ใช้เรียกใช้สคริปต์ส่วนเสริมโดยตรงไม่ได้ แต่ส่วนเสริมทุกรายการจะแสดงในเมนูส่วนเสริมแทน เมนู (และอาจเป็นกล่องโต้ตอบหรือแถบด้านข้าง) ช่วยให้ผู้ใช้โต้ตอบกับส่วนเสริมได้
- เมนูเป็นส่วนสำคัญของวิธีที่ผู้ใช้ควบคุมส่วนเสริมของคุณ ดังนั้นควรออกแบบโครงสร้างและการใช้คำอย่างระมัดระวัง
- หลีกเลี่ยงรายการในเมนูที่ใช้ชื่อส่วนเสริมซ้ำ ให้เริ่มด้วยคำที่เป็นการกระทำ
- หากรายการเมนูหลักเริ่มต้นเวิร์กโฟลว์และไม่มีคำกริยาใดที่อธิบายว่าทำอะไรบ้าง ให้เรียกว่า "เริ่ม" รูปแบบนี้ใช้ในการเริ่มต้นใช้งานส่วนเสริมเอกสารอย่างรวดเร็ว
- พยายามไม่ใช้เมนูย่อย เว้นแต่เมนูจะมีมากกว่า 6 รายการ อาจจะเป็นพวกจู่โจม และเลือกยาก
- อธิบายงาน ไม่ใช่คอมโพเนนต์ UI ที่รายการในเมนูแสดง
สิ่งที่ไม่ควรทำ | สิ่งที่ควรทำ |
---|---|
ข้อความแสดงข้อผิดพลาด
เมื่อเกิดข้อผิดพลาด คุณควรใช้ภาษาง่ายๆ อธิบายปัญหาจากมุมมองของผู้ใช้และแนะนำวิธีแก้ไขปัญหา
- ไม่อนุญาตให้ผู้ใช้ดูข้อยกเว้นใดๆ ที่โค้ดของคุณแสดง ให้ใช้คำสั่ง
try...catch
เพื่อสกัดกั้นข้อยกเว้น จากนั้นแสดงข้อความแสดงข้อผิดพลาดที่ผู้ใช้ทอดไว้พร้อมแทรกข้อความในบรรทัดในคลาสerror
จากแพ็กเกจ CSS ของส่วนเสริมหรือกล่องโต้ตอบการแจ้งเตือนแทน - ก่อนเผยแพร่ โปรดตรวจสอบว่าส่วนเสริมไม่ได้บันทึกข้อมูลการแก้ไขข้อบกพร่องไปยังคอนโซล JavaScript โปรดใช้ Stackdriver Logging แทน
สิ่งที่ไม่ควรทำ | สิ่งที่ควรทำ |
---|---|
เนื้อหา Help
เมนูของส่วนเสริมทุกเมนูจะมีกล่องโต้ตอบความช่วยเหลืออัตโนมัติ หากคุณระบุ URL ความช่วยเหลือไว้เมื่อเผยแพร่ ปุ่ม "ดูข้อมูลเพิ่มเติม" จะลิงก์ไปยังหน้าดังกล่าว โปรดระบุหน้าที่อธิบายวิธีการใช้งาน เว้นแต่ส่วนเสริมจะชัดแจ้งในตัวเอง
- หากเป็นไปได้ ให้แสดงคำแนะนำในรายการสัญลักษณ์แสดงหัวข้อย่อยหรือรายการที่เรียงลำดับเลข นำทางผู้ใช้ไปยังผลลัพธ์สุดท้ายที่มีการอ้างอิงที่ชัดเจนถึงองค์ประกอบ UI ที่มีชื่อ
- ตรวจสอบว่าวิธีการของคุณอธิบายข้อกำหนดอย่างชัดเจน เช่น การตั้งค่าสเปรดชีต
- คุณสามารถลิงก์ไปยังเนื้อหาช่วยเหลือจากอินเทอร์เฟซผู้ใช้หลักได้เช่นกัน หากส่วนเสริมสร้างเอกสารใหม่ คุณจะแสดงวิธีการในส่วนเนื้อหาของเอกสารได้ด้วย
อินเทอร์เฟซผู้ใช้ที่กำหนดเอง
ส่วนเสริมของ Editor บางรายการจะควบคุมได้ด้วยเมนูของส่วนเสริมเหล่านั้นทั้งหมด แต่ส่วนใหญ่แล้วจะแสดงแถบด้านข้างหรือกล่องโต้ตอบที่มีเนื้อหาที่กำหนดเอง
- แถบด้านข้างเหมาะสำหรับเครื่องมือแบบถาวรซึ่งผู้ใช้มีแนวโน้มที่จะใช้ซ้ำและอ้างอิงเนื้อหาของเอกสารหรือสเปรดชีต
- กล่องโต้ตอบเหมาะที่สุดสำหรับเครื่องมือแบบใช้ครั้งเดียว หน้าการตั้งค่า และข้อความที่สำคัญ
ข้อความ UI
ในกล่องโต้ตอบหรือแถบด้านข้าง ให้สมมติว่าผู้คนอ่านเฉพาะป้ายกำกับชื่อและปุ่ม พวกเขายังคงสามารถพิจารณาว่าอินเทอร์เฟซของคุณทำอะไรได้บ้างและตัดสินใจเลือกสิ่งดีๆ
- ใช้ป้ายกำกับชื่อและปุ่มที่แสดงเดี่ยวๆ
- หลีกเลี่ยงการใช้บล็อกยาวที่มีข้อความอธิบาย
กล่องโต้ตอบ
กล่องโต้ตอบเหมาะสำหรับเครื่องมือที่ผู้คนใช้เพียงครั้งเดียว แล้วไปต่อ ตัวอย่างเช่น ถ้าส่วนเสริมของคุณอนุญาตให้ผู้ใช้แทรกกราฟิกได้ คุณอาจแสดงกล่องโต้ตอบที่มีตัวเลือก ว่าจะแทรกอะไร จากนั้นปิดกล่องโต้ตอบเมื่อมีการแทรกกราฟิกนั้น กล่องโต้ตอบยังมีประโยชน์ในการแสดงการตั้งค่าของส่วนเสริมหรือสื่อสารข้อความสำคัญ
- อย่าเปิดกล่องโต้ตอบ (รวมถึงการแจ้งเตือนหรือพรอมต์) จากกล่องโต้ตอบอื่น โดยจะแสดงทีละกล่องโต้ตอบเท่านั้น
- สำหรับชื่อกล่องโต้ตอบ ให้ใช้คำหรือวลีสั้นๆ นำหน้าด้วยคำที่สำคัญที่สุด
- ป้ายกำกับปุ่มควรสัมพันธ์กับชื่อกล่องโต้ตอบ
- เลือกใช้ปุ่ม 2 ปุ่ม ซึ่งโดยปกติจะเป็นการทำงานหลักและ "ยกเลิก" สำหรับกรณีพิเศษที่ต้องใช้ปุ่มที่ 3 ให้พิจารณาที่มุมขวาล่าง
- วางปุ่มที่มุมล่างซ้ายของกล่องโต้ตอบ ปุ่มหลักสีน้ำเงินควรอยู่ทางด้านซ้าย โดยมีปุ่มรองสีเทาทางด้านขวา
สิ่งที่ไม่ควรทำ | สิ่งที่ควรทำ |
---|---|
แถบด้านข้าง
แถบด้านข้างช่วยให้ผู้ใช้สามารถอ้างอิงกลับไปที่เอกสาร สเปรดชีต งานนำเสนอ หรือแบบฟอร์มในขณะตัดสินใจเลือกสิ่งต่างๆ ได้ และยังอนุญาตให้ผู้ใช้ใช้ส่วนเสริมของคุณซ้ำๆ ได้ด้วย เมื่อใดก็ตามที่แถบด้านข้างใหม่เปิดขึ้น แถบด้านข้างใดๆ ก่อนหน้านี้จะปิดโดยอัตโนมัติ ซึ่งเหมาะสำหรับโหมดชั่วคราวที่ผู้ใช้ออกเมื่อดำเนินการเสร็จสิ้น
- ผู้ใช้อาจมีส่วนเสริมอื่นๆ ที่มีแถบด้านข้างของตนเอง หากส่วนเสริม 2 รายการพยายามเปิด แถบด้านข้างพร้อมกัน จะมีส่วนเสริมเพียงรายการเดียวที่แสดง
- ไม่แสดงแถบด้านข้างหรือกล่องโต้ตอบเมื่อเปิดเอกสารครั้งแรก
- เฉพาะส่วนเสริมที่ทำงานใน
AuthMode.FULL
เท่านั้นที่เปิดแถบด้านข้างหรือกล่องโต้ตอบได้ คุณจะใช้รายการในเมนูเพื่อเปิดแถบด้านข้างได้ เนื่องจากจะแจ้งให้ผู้ใช้ให้สิทธิ์แบบเต็ม
การควบคุม
UI ส่วนเสริมดีๆ ปล่อยให้เหลือพื้นที่ในการควบคุม ระยะห่างจากขอบและระยะห่างจากขอบที่เพียงพอจะช่วยให้การทำงานยาวขึ้น ในขณะที่การควบคุมที่หนาแน่นอาจทำให้ดูมากเกินไป ถ้าไม่แน่ใจ ให้ยืมเค้าโครงจากโปรแกรมตัดต่อเองก็ได้ เช่น ตรวจสอบกล่องโต้ตอบที่มีอยู่ใน Google เอกสาร เช่น ไฟล์ > การตั้งค่าหน้ากระดาษ เมื่อสร้างกล่องโต้ตอบของคุณเอง
เอกสารประกอบสำหรับแพ็กเกจ CSS ของส่วนเสริมมีตัวอย่างมาร์กอัปสำหรับการควบคุมแต่ละประเภทด้านล่าง
ปุ่ม
ใช้ปุ่มเพื่อควบคุมการดำเนินการหลักของอินเทอร์เฟซผู้ใช้แทนลิงก์ธรรมดาหรือองค์ประกอบอื่นๆ
- หลีกเลี่ยงการแสดงปุ่มสีน้ำเงิน สีแดง หรือสีเขียวมากกว่า 1 ปุ่มในคราวเดียว แต่อาจมีปุ่มสีเทาปรากฏขึ้นซ้ำๆ
- ป้ายกำกับปุ่มส่วนใหญ่ควรขึ้นต้นด้วยตัวพิมพ์ใหญ่และขึ้นต้นประโยคด้วยคำกริยา ปุ่มสีแดงมักจะใช้สร้างการทำงานด้วยตัวพิมพ์ใหญ่ทั้งหมด
สิ่งที่ไม่ควรทำ | สิ่งที่ควรทำ |
---|---|
|
|
ช่องทำเครื่องหมายและปุ่มตัวเลือก
ใช้ช่องทำเครื่องหมายเมื่อผู้ใช้เลือกได้หลายตัวเลือก หรือไม่มีตัวเลือกเลย ใช้ปุ่มตัวเลือก (หรือเมนูเลือก) เมื่อต้องเลือก 1 ตัวเลือกเท่านั้น
- อย่าเปลี่ยนการทำงานของช่องทำเครื่องหมายให้เลียนแบบปุ่มตัวเลือก
- ไม่ต้องดำเนินการใดๆ เมื่อมีการตรวจสอบแล้ว คนเราทำผิดพลาดได้ รอจนกว่าผู้ใช้จะคลิกปุ่มเพื่อยืนยันตัวเลือก
เลือกเมนู
การเลือกเป็นวิธีที่ดีในการนำเสนอรายการทางเลือกสั้นๆ
- จัดเรียงตัวเลือกตามลำดับตัวอักษรหรือตามรูปแบบที่สมเหตุสมผลซึ่งผู้ใช้ทุกคนเข้าใจได้ (เช่น วันของสัปดาห์ เริ่มจากวันอาทิตย์)
- หากรายการยาวเกินไป ให้ลองใช้การควบคุมอื่น ตัวอย่างเช่น คุณอาจแสดงรายการแบบเลื่อนได้เพื่อให้เมนูมีพื้นที่ว่างมากขึ้นและไปยังส่วนต่างๆ ได้ง่ายขึ้น
พื้นที่ข้อความ
หากผู้ใช้ต้องพิมพ์มากกว่า 2-3 คำ ให้ใช้พื้นที่ข้อความ
- ทำให้พื้นที่ข้อความสูงอย่างน้อย 2 บรรทัดเพื่อให้ใช้ง่ายขึ้นและดูไม่เหมือนช่องข้อความ
- วางป้ายกำกับไว้ที่ด้านบน
ช่องข้อความ
ใช้ช่องข้อความหากผู้ใช้ต้องการพิมพ์แค่ 1 หรือ 2 คำ
- ความกว้างของช่องข้อความจะแนะนำสิ่งที่คุณคาดหวังให้ผู้ใช้พิมพ์
- หลีกเลี่ยงการใช้ข้อความตัวยึดตำแหน่งเป็นป้ายกำกับ เนื่องจากข้อความจะหายไปเมื่อโฟกัส ข้อความตัวยึดตำแหน่งมีประโยชน์ในการยกตัวอย่างหรือรายละเอียดเพิ่มเติม
- วางป้ายกำกับไว้ด้านบน แล้วจัดวางช่องข้อความสั้นๆ ไว้ข้างกันได้ตามต้องการ
การสร้างแบรนด์
ในส่วนเสริมของคุณ
หากต้องการรวมการสร้างแบรนด์ ให้ใช้ข้อความที่สั้นและกระชับ วิธีนี้จะช่วยให้ผู้ใช้จดจ่อกับ UI และทำให้ส่วนเสริมรู้สึกเหมือนเป็นส่วนหนึ่งของเครื่องมือแก้ไข
- ส่วนเสริมทุกด้านต้องเป็นไปตามหลักเกณฑ์การสร้างแบรนด์
- อย่าใส่คำว่า "Google" หรือใช้ไอคอนผลิตภัณฑ์ Google
- ข้อความต้องยาวไม่เกิน 2-3 คำและมีการจัดรูปแบบในคลาส
gray
จากแพ็กเกจ CSS ของส่วนเสริม - กราฟิกควรอยู่บนพื้นหลังสีขาวและมีขนาดไม่เกิน 200 × 60 พิกเซล
- สำหรับกล่องโต้ตอบ การสร้างแบรนด์ควรอยู่ที่มุมขวาล่าง
- สำหรับแถบด้านข้าง การสร้างแบรนด์อาจอยู่ที่ด้านบนหรือด้านล่าง
ในร้านค้า
ในการเผยแพร่ส่วนเสริม Editor คุณต้องมีชิ้นงานรูปภาพจํานวนหนึ่ง เนื้อหาเหล่านี้ใช้ในการสร้างข้อมูลผลิตภัณฑ์ใน Store ซึ่งเป็นส่วนเสริม
- ข้อมูลผลิตภัณฑ์ใน Store ทุกด้านต้องเป็นไปตามหลักเกณฑ์การสร้างแบรนด์
- ดูรายละเอียดเพิ่มเติมเกี่ยวกับรูปภาพที่คุณต้องระบุได้ในหลักเกณฑ์เกี่ยวกับรูปภาพ
การช่วยเหลือพิเศษ
ทุกคนน่าจะเพลิดเพลินกับส่วนเสริมของคุณ ไม่ว่าจะเห็นภาพสีต่างๆ ใช้โปรแกรมอ่านหน้าจอ หรือมีความต้องการอื่นๆ ก็ตาม การช่วยเหลือพิเศษเป็นหัวข้อกว้างๆ ที่มีไม่ได้ในคู่มือแนะนำนี้ แหล่งข้อมูลที่มีประโยชน์แห่งหนึ่งคือ เว็บไซต์ Google Accessibility แต่ต่อไปนี้เป็นเคล็ดลับ บางอย่างในการเริ่มต้น
- ตรวจสอบว่าไปที่การควบคุม UI ทั้งหมดได้ด้วยแป้นพิมพ์ เพิ่ม
tabindex=0
ลงในการควบคุมที่กำหนดเอง (เช่น ที่สร้างด้วย<div>
) เพื่อให้ผู้คนกด Tab ได้ พิจารณาว่าควรรองรับคีย์อื่นๆ ด้วยหรือไม่ เช่น ลูกศรสำหรับรายการ - ผู้ใช้บางคนอาจใช้โปรแกรมอ่านหน้าจอกับส่วนเสริมของคุณ ดังนั้นรูปภาพจึงควรมี
แอตทริบิวต์
alt
และการควบคุมที่กำหนดเองควรมีแอตทริบิวต์ ARIA เพื่ออธิบายการใช้งาน - อย่าใช้สีเพียงอย่างเดียวในการสื่อสารสถานะ นอกจากนี้ คุณยังควรใช้ไอคอนและข้อความด้วย
หากคุณใช้การควบคุมเว็บมาตรฐาน เช่น การควบคุมที่อธิบายไว้ก่อนหน้านี้ในคู่มือนี้ การเข้าถึงส่วนเสริมจะง่ายขึ้น