คู่มือรูปแบบ UI สําหรับส่วนเสริมของเอดิเตอร์

ส่วนเสริม Editor สร้างอินเทอร์เฟซผู้ใช้ (เมนู แถบด้านข้าง และกล่องโต้ตอบ) โดยใช้บริการ HTML ของ Apps Script เนื่องจากอินเทอร์เฟซได้รับการพัฒนาในรูปแบบ HTML และ CSS จึงสามารถปรับแต่งได้หลากหลาย อย่างไรก็ตาม เมื่อสร้างอินเทอร์เฟซส่วนเสริม คุณควรออกแบบอินเทอร์เฟซให้มอบประสบการณ์ที่ยอดเยี่ยมแก่ผู้ใช้

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

ข้อความ

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

คุณต้องตั้งชื่อส่วนเสริมเมื่อเผยแพร่ส่วนเสริม ชื่อนี้จะปรากฏในหลายตำแหน่ง เช่น ร้านค้าส่วนเสริมและภายในเมนู

  • ขึ้นต้นทุกคำด้วยตัวพิมพ์ใหญ่
  • หลีกเลี่ยงการใช้เครื่องหมายวรรคตอน โดยเฉพาะวงเล็บ ยกเว้นว่าเป็นส่วนหนึ่งของแบรนด์ของคุณ
  • โดยควรใช้ข้อความสั้นๆ โดยมีความยาวไม่เกิน 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 ซึ่งเป็นส่วนเสริม

การช่วยเหลือพิเศษ

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

  • ตรวจสอบว่าไปที่การควบคุม UI ทั้งหมดได้ด้วยแป้นพิมพ์ เพิ่ม tabindex=0 ลงในการควบคุมที่กำหนดเอง (เช่น ที่สร้างด้วย <div>) เพื่อให้ผู้คนกด Tab ได้ พิจารณาว่าควรรองรับคีย์อื่นๆ ด้วยหรือไม่ เช่น ลูกศรสำหรับรายการ
  • ผู้ใช้บางคนอาจใช้โปรแกรมอ่านหน้าจอกับส่วนเสริมของคุณ ดังนั้นรูปภาพจึงควรมี แอตทริบิวต์ alt และการควบคุมที่กำหนดเองควรมีแอตทริบิวต์ ARIA เพื่ออธิบายการใช้งาน
  • อย่าใช้สีเพียงอย่างเดียวในการสื่อสารสถานะ นอกจากนี้ คุณยังควรใช้ไอคอนและข้อความด้วย

หากคุณใช้การควบคุมเว็บมาตรฐาน เช่น การควบคุมที่อธิบายไว้ก่อนหน้านี้ในคู่มือนี้ การเข้าถึงส่วนเสริมจะง่ายขึ้น