คู่มือรูปแบบ UI สำหรับส่วนเสริมเครื่องมือแก้ไข

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

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

ข้อความ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

เนื้อหา Help

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

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

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

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

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

ข้อความ UI

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

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

กล่องโต้ตอบ

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

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

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

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

การควบคุม

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

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

ปุ่ม

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

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

ช่องทำเครื่องหมายและปุ่มตัวเลือก

ใช้ช่องทำเครื่องหมายเมื่อผู้ใช้สามารถเลือกได้หลายตัวเลือก หรือไม่มีตัวเลือกเลย ใช้ ปุ่มตัวเลือก (หรือเมนูเลือก) เมื่อต้องเลือกเพียงตัวเลือกเดียว

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

เลือกเมนู

การเลือกเป็นวิธีที่ดีในการนำเสนอรายการทางเลือกสั้นๆ

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

พื้นที่ข้อความ

หากผู้ใช้จำเป็นต้องพิมพ์มากกว่า 2-3 คำ ให้ใช้พื้นที่ข้อความ

  • ปรับพื้นที่ข้อความให้สูงอย่างน้อย 2 บรรทัดเพื่อให้ใช้งานและไม่ง่ายขึ้น มีลักษณะคล้ายกับช่องข้อความ
  • วางป้ายกำกับไว้ด้านบน

ช่องข้อความ

ใช้ช่องข้อความหากต้องการพิมพ์เพียงคำ 1-2 คำ

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

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

ในส่วนเสริม

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

  • ส่วนเสริมทุกด้านต้องเป็นไปตาม หลักเกณฑ์การสร้างแบรนด์
  • อย่าใส่คำว่า "Google" หรือใช้ไอคอนผลิตภัณฑ์ของ Google
  • ข้อความไม่ควรยาวเกิน 2-3 คำและต้องมีรูปแบบใน คลาส gray จาก CSS ของส่วนเสริม ใหม่
  • กราฟิกควรอยู่บนพื้นหลังสีขาวและมีขนาดไม่เกิน 200 × 60 พิกเซล
  • สำหรับกล่องโต้ตอบ การแสดงแบรนด์ควรอยู่ที่มุมขวาล่าง
  • สำหรับแถบด้านข้าง การสร้างแบรนด์อาจอยู่ที่ด้านบนหรือด้านล่างก็ได้

ในร้านค้า

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

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

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

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

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