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

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

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

ข้อความ

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

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

  • ใช้ตัวพิมพ์ใหญ่สำหรับชื่อ
  • หลีกเลี่ยงเครื่องหมายวรรคตอน โดยเฉพาะวงเล็บ เว้นแต่ว่าจะเป็นองค์ประกอบของแบรนด์
  • โปรดใช้ข้อความสั้นๆ โดยควรมีความยาวไม่เกิน 30 อักขระ ระบบอาจตัดชื่อที่ยาวออกโดยอัตโนมัติ
  • อย่าใส่ชื่อผลิตภัณฑ์ Google ที่ใช้กับส่วนเสริม (หรือใช้คำว่า Google)
  • ละเว้นข้อมูลเวอร์ชัน
  • ตรวจสอบว่าชื่อที่เผยแพร่ของส่วนเสริมตรงกับชื่อไฟล์ของโปรเจ็กต์สคริปต์ ชื่อโปรเจ็กต์จะปรากฏในกล่องโต้ตอบการให้สิทธิ์
สิ่งที่ไม่ควรทำ สิ่งที่ควรทำ
ชื่อส่วนเสริมที่ไม่ถูกต้อง ชื่อส่วนเสริมที่ดี

รูปแบบการเขียน

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

เมื่อเขียนข้อความ UI

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

เคล็ดลับหลังการติดตั้ง

เคล็ดลับหลังการติดตั้งจะปรากฏขึ้นทันทีหลังจากที่มีผู้ติดตั้งส่วนเสริมของคุณ และยังปรากฏในความช่วยเหลือด้วย คุณมีประโยค 2-3 ประโยคที่จะช่วยให้ผู้ใช้เริ่มต้นใช้งานได้อย่างรวดเร็ว

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

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

  • เมนูเป็นส่วนสําคัญของวิธีที่ผู้ใช้ควบคุมส่วนเสริม ดังนั้นให้ออกแบบโครงสร้างและข้อความอย่างรอบคอบ
  • หลีกเลี่ยงรายการเมนูที่ซ้ำชื่อของส่วนเสริม แต่ให้เริ่มต้นด้วยคำที่เป็นคำสั่งแทน
  • หากรายการเมนูหลักเริ่มต้นเวิร์กโฟลว์และไม่มีคำกริยาที่อธิบายสิ่งที่ทำ ให้ตั้งชื่อว่า "เริ่ม" รูปแบบนี้ใช้ในคู่มือเริ่มต้นใช้งานส่วนเสริมของ Google เอกสาร
  • พยายามอย่าใช้เมนูย่อย เว้นแต่ว่าเมนูจะมีรายการมากกว่า 6 รายการ เนื่องจากอาจเลือกได้ยาก
  • อธิบายงาน ไม่ใช่คอมโพเนนต์ UI ที่รายการเมนูแสดง
สิ่งที่ไม่ควรทำ สิ่งที่ควรทำ
ป้ายกำกับรายการในเมนูไม่ถูกต้อง ป้ายกำกับรายการในเมนูที่ดี

ข้อความแสดงข้อผิดพลาด

เมื่อเกิดข้อผิดพลาดขึ้น คุณควรใช้ภาษาที่เข้าใจง่าย อธิบายปัญหาจากมุมมองของผู้ใช้และแนะนำวิธีแก้ไข

  • ไม่อนุญาตให้ผู้ใช้เห็นข้อยกเว้นที่โค้ดของคุณแสดง แต่ให้ใช้คำสั่ง try...catch เพื่อขัดจังหวะข้อยกเว้น แล้วแสดงข้อความแสดงข้อผิดพลาดที่เข้าใจง่ายพร้อมข้อความย่อยที่มีการจัดรูปแบบในคลาส error จากแพ็กเกจ CSS ของส่วนเสริมหรือกล่องโต้ตอบข้อความแจ้ง
  • ก่อนเผยแพร่ ให้ตรวจสอบว่าส่วนเสริมไม่ได้บันทึกข้อมูลการแก้ไขข้อบกพร่องลงในคอนโซล JavaScript ให้ใช้การบันทึกของ Stackdriver แทน
สิ่งที่ไม่ควรทำ สิ่งที่ควรทำ
ข้อความแสดงข้อผิดพลาดที่ไม่ถูกต้อง ข้อความแสดงข้อผิดพลาดที่ดี

เนื้อหา Help

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

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

อินเทอร์เฟซผู้ใช้ที่กําหนดเอง

ส่วนส่วนเสริมของ Editor บางรายการที่ใช้งานง่ายจะควบคุมได้ทั้งหมดผ่านเมนู แต่ส่วนเสริมส่วนใหญ่จะแสดงแถบด้านข้างหรือกล่องโต้ตอบที่มีเนื้อหาที่กำหนดเอง

  • แถบด้านข้างเหมาะสําหรับเครื่องมือถาวรที่ผู้ใช้มีแนวโน้มที่จะใช้ซ้ำๆ ขณะอ้างอิงเนื้อหาของเอกสารหรือสเปรดชีต
  • กล่องโต้ตอบเหมาะสําหรับเครื่องมือแบบใช้ครั้งเดียว หน้าการตั้งค่า และข้อความที่สําคัญ

ข้อความ UI

ในกล่องโต้ตอบหรือแถบด้านข้าง ให้ถือว่าผู้ใช้อ่านเฉพาะชื่อและป้ายกำกับปุ่ม ผู้ใช้จะยังเข้าใจว่าอินเทอร์เฟซทํางานอย่างไรและเลือกตัวเลือกที่เหมาะสมได้ไหม

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

กล่องโต้ตอบ

กล่องโต้ตอบเหมาะสําหรับเครื่องมือที่ผู้ใช้ใช้เพียงครั้งเดียวแล้วเลิกใช้ เช่น หากส่วนเสริมของคุณอนุญาตให้ผู้ใช้แทรกกราฟิก คุณอาจแสดงกล่องโต้ตอบที่มีตัวเลือกสิ่งที่จะแทรก จากนั้นปิดกล่องโต้ตอบเมื่อแทรกกราฟิกแล้ว กล่องโต้ตอบยังมีประโยชน์ในการแสดงการตั้งค่าของส่วนเสริมหรือเพื่อสื่อสารข้อความสำคัญ

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

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

  • ผู้ใช้อาจมีส่วนเสริมอื่นๆ ที่มีแถบด้านข้างของตนเอง หากส่วนเสริม 2 รายการพยายามเปิดแถบด้านข้างพร้อมกัน ระบบจะแสดงเพียงรายการเดียว
  • ไม่แสดงแถบด้านข้างหรือกล่องโต้ตอบเมื่อเปิดเอกสารเป็นครั้งแรก
  • เฉพาะส่วนเสริมที่ทำงานในAuthMode.FULLเท่านั้นที่เปิดแถบด้านข้างหรือกล่องโต้ตอบได้ คุณสามารถใช้รายการเมนูเพื่อเปิดแถบด้านข้างได้ เนื่องจากจะแจ้งให้ผู้ใช้ให้สิทธิ์อย่างเต็มรูปแบบ

การควบคุม

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

เอกสารประกอบสำหรับแพ็กเกจ CSS ของส่วนเสริมมีตัวอย่างมาร์กอัปสำหรับการควบคุมแต่ละประเภทด้านล่าง

ปุ่ม

ใช้ปุ่มเพื่อควบคุมการดําเนินการหลักของอินเทอร์เฟซผู้ใช้แทนลิงก์หรือองค์ประกอบอื่นๆ

  • หลีกเลี่ยงการแสดงปุ่มสีน้ำเงิน สีแดง หรือสีเขียวมากกว่า 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 เพื่ออธิบายการใช้งาน
  • อย่าใช้สีเพียงอย่างเดียวในการสื่อสถานะ ใช้ไอคอนและข้อความด้วย

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