Tiện ích bổ sung cho trình chỉnh sửa tạo giao diện người dùng (trình đơn, thanh bên và hộp thoại) bằng dịch vụ HTML của Apps Script. Vì các giao diện được phát triển bằng HTML và CSS nên có khả năng tuỳ chỉnh cao. Tuy nhiên, khi tạo giao diện tiện ích bổ sung, bạn nên thiết kế giao diện đó để mang lại trải nghiệm tuyệt vời cho người dùng.
Các tiện ích bổ sung tốt nhất mở rộng tự nhiên từng trình chỉnh sửa bằng cách sử dụng các chế độ điều khiển và hành vi quen thuộc. Khi tạo một tiện ích bổ sung mới:
- Sử dụng gói CSS tiện ích bổ sung trong các trang dịch vụ HTML.
- Khi không chắc chắn về thiết kế, hãy tìm một hộp thoại hoặc thanh bên tương tự trong trình chỉnh sửa và khớp với hộp thoại hoặc thanh bên đó hoặc tham khảo hướng dẫn nhanh về tiện ích bổ sung.
- Hãy làm theo hướng dẫn về kiểu này để tạo trải nghiệm liền mạch.
Văn bản
Tên tiện ích bổ sung
Bạn phải đặt tên cho tiện ích bổ sung khi phát hành. Tên này xuất hiện ở nhiều nơi, chẳng hạn như cửa hàng tiện ích bổ sung và trong trình đơn.
- Sử dụng cách viết hoa chữ cái đầu.
- Tránh sử dụng dấu câu, đặc biệt là dấu ngoặc đơn, trừ phi đó là một phần trong thương hiệu của bạn.
- Hãy viết ngắn gọn, tốt nhất là 30 ký tự trở xuống. Tên dài có thể được rút ngắn tự động.
- Không đưa tên sản phẩm của Google mà tiện ích bổ sung dành cho vào (hoặc sử dụng từ Google).
- Bỏ qua thông tin phiên bản.
- Đảm bảo tên đã xuất bản của tiện ích bổ sung giống với tên tệp của dự án tập lệnh. Tên dự án sẽ xuất hiện trong hộp thoại uỷ quyền.
| Việc không nên làm | Việc nên làm |
|---|---|
 |
 |
Phong cách viết
Bạn không cần phải viết nhiều. Hầu hết các thao tác phải được thể hiện rõ ràng thông qua biểu tượng, bố cục và nhãn ngắn. Nếu bạn thấy một phần của tiện ích bổ sung cần được giải thích chi tiết hơn so với những gì nhãn ngắn có thể cung cấp, thì tốt nhất bạn nên tạo một trang web riêng để mô tả tiện ích bổ sung và liên kết đến trang web đó.
Khi viết văn bản trên giao diện người dùng:
- Sử dụng cách viết hoa đầu câu (đặc biệt là đối với các nút, nhãn và mục trong trình đơn).
- Ưu tiên văn bản ngắn, đơn giản, không có thuật ngữ hoặc từ viết tắt.
| Việc không nên làm | Việc nên làm |
|---|---|
|
|
|
Mẹo sau khi cài đặt
Mẹo sau khi cài đặt sẽ bật lên ngay sau khi người dùng cài đặt tiện ích bổ sung của bạn và cũng xuất hiện trong phần Trợ giúp. Bạn có một vài câu để giúp người dùng nhanh chóng bắt đầu.
- Bắt đầu bằng một từ chỉ hành động.
- Mô tả bước đầu tiên để sử dụng tiện ích bổ sung.
- Nếu bạn có giao diện người dùng chính, chẳng hạn như thanh bên, hãy giải thích cách mở giao diện đó.
- Đừng quảng bá tiện ích bổ sung của bạn tại đây vì tiện ích bổ sung đã được cài đặt.
| Việc không nên làm | Việc nên làm |
|---|---|
 |
 |
Mục trong trình đơn
Không giống như các dự án Apps Script thông thường, tiện ích bổ sung không xuất hiện trong trình chỉnh sửa tập lệnh hoặc trình quản lý tập lệnh; người dùng không thể trực tiếp chạy tập lệnh tiện ích bổ sung. Thay vào đó, mỗi tiện ích bổ sung sẽ có một vị trí trong trình đơn tiện ích bổ sung. Trình đơn (và có thể là hộp thoại hoặc thanh bên) cho phép người dùng tương tác với tiện ích bổ sung.
- Trình đơn là một phần quan trọng trong cách người dùng kiểm soát tiện ích bổ sung của bạn, vì vậy, hãy thiết kế cấu trúc và cách diễn đạt của trình đơn một cách cẩn thận.
- Tránh các mục trong trình đơn chỉ lặp lại tên của tiện ích bổ sung. Thay vào đó, hãy bắt đầu bằng một từ động.
- Nếu mục trình đơn chính của bạn bắt đầu một quy trình công việc và không có động từ nào mô tả chức năng của mục đó, hãy gọi mục đó là "Bắt đầu". Mẫu này được dùng trong phần Khởi động nhanh tiện ích bổ sung cho Tài liệu.
- Trừ phi trình đơn của bạn có nhiều hơn 6 mục, hãy cố gắng không sử dụng trình đơn phụ. Các giá trị này có thể rất khó chọn.
- Mô tả tác vụ, chứ không phải thành phần giao diện người dùng mà mục trình đơn hiển thị.
| Việc không nên làm | Việc nên làm |
|---|---|
 |
 |
Thông báo lỗi
Khi xảy ra sự cố, điều quan trọng là bạn phải sử dụng ngôn ngữ đơn giản. Giải thích vấn đề từ quan điểm của người dùng và đề xuất cách khắc phục.
- Không cho phép người dùng xem bất kỳ ngoại lệ nào mà mã của bạn gửi. Thay vào đó, hãy sử dụng câu lệnh
try...catchđể chặn các trường hợp ngoại lệ, sau đó hiển thị thông báo lỗi thân thiện với người dùng bằng văn bản nội tuyến được tạo kiểu trong lớperrorcủa gói CSS tiện ích bổ sung hoặc hộp thoại cảnh báo. - Trước khi phát hành, hãy kiểm tra để đảm bảo rằng tiện ích bổ sung của bạn không ghi nhật ký thông tin gỡ lỗi vào bảng điều khiển JavaScript; thay vào đó, hãy sử dụng tính năng ghi nhật ký Stackdriver.
| Việc không nên làm | Việc nên làm |
|---|---|
 |
 |
Nội dung trợ giúp
Trình đơn của mọi tiện ích bổ sung đều có một hộp thoại Trợ giúp tự động. Nếu bạn cung cấp URL trợ giúp khi xuất bản, thì nút "Tìm hiểu thêm" sẽ liên kết đến trang đó. Trừ phi tiện ích bổ sung của bạn tự giải thích được, vui lòng cung cấp một trang giải thích cách sử dụng tiện ích bổ sung đó.
- Khi có thể, hãy hiển thị hướng dẫn trong danh sách có dấu đầu dòng hoặc danh sách được đánh số. Hướng dẫn người dùng đến kết quả cuối cùng, với các tham chiếu rõ ràng đến các thành phần giao diện người dùng được đặt tên.
- Hãy đảm bảo hướng dẫn của bạn giải thích rõ ràng mọi yêu cầu, chẳng hạn như thiết lập bảng tính theo một cách nhất định.
- Bạn cũng có thể liên kết đến nội dung trợ giúp từ giao diện người dùng chính. Nếu tiện ích bổ sung của bạn tạo một tài liệu mới, bạn cũng có thể hiển thị hướng dẫn trong phần nội dung của tài liệu.
Giao diện người dùng tuỳ chỉnh
Một số tiện ích bổ sung đơn giản của Trình chỉnh sửa có thể được kiểm soát hoàn toàn bằng trình đơn, nhưng hầu hết đều hiển thị một bảng điều khiển bên hoặc hộp thoại có nội dung tuỳ chỉnh.
- Thanh bên phù hợp nhất với các công cụ liên tục mà mọi người có thể sử dụng nhiều lần trong khi tham khảo nội dung của tài liệu hoặc bảng tính.
- Hộp thoại phù hợp nhất với các công cụ sử dụng một lần, trang cài đặt và thông báo quan trọng.
Văn bản giao diện người dùng
Trong bất kỳ hộp thoại hoặc thanh bên nào, hãy giả định rằng mọi người chỉ đọc tiêu đề và nhãn nút. Họ vẫn có thể tìm hiểu chức năng của giao diện và đưa ra lựa chọn phù hợp không?
- Sử dụng tiêu đề và nhãn nút độc lập.
- Tránh các đoạn văn bản mô tả dài.
Hộp thoại
Hộp thoại rất phù hợp với những công cụ mà mọi người chỉ sử dụng một lần rồi chuyển sang công cụ khác. Ví dụ: nếu tiện ích bổ sung cho phép người dùng chèn một hình ảnh, bạn có thể hiển thị một hộp thoại có các lựa chọn về nội dung cần chèn, sau đó đóng hộp thoại khi hình ảnh được chèn. Hộp thoại cũng rất hữu ích để hiển thị chế độ cài đặt của tiện ích bổ sung hoặc để thông báo một thông báo quan trọng.
- Không mở hộp thoại (bao gồm cả cảnh báo hoặc lời nhắc) từ một hộp thoại khác – chỉ hiển thị một hộp thoại tại một thời điểm.
- Đối với tiêu đề hộp thoại, hãy sử dụng một từ hoặc cụm từ ngắn, bắt đầu bằng từ quan trọng nhất.
- Nhãn nút phải liên quan đến tiêu đề hộp thoại.
- Ưu tiên sử dụng hai nút, thường là một thao tác chính và "Huỷ". Đối với các trường hợp đặc biệt cần có nút thứ ba, hãy cân nhắc góc dưới cùng bên phải.
- Đặt các nút ở góc dưới cùng bên trái của hộp thoại. Nút chính màu xanh dương phải ở bên trái, còn các nút phụ màu xám phải ở bên phải.
| Việc không nên làm | Việc nên làm |
|---|---|
 |
 |
Thanh bên
Thanh bên cho phép mọi người tham khảo lại tài liệu, bảng tính, bản trình bày hoặc biểu mẫu trong khi đưa ra lựa chọn. Các mã này cũng cho phép mọi người sử dụng tiện ích bổ sung của bạn nhiều lần. Bất cứ khi nào bạn mở một thanh bên mới, mọi thanh bên trước đó sẽ tự động đóng. Đây là cách tốt nhất cho các chế độ tạm thời mà người dùng thoát khi hoàn tất.
- Người dùng có thể có các tiện ích bổ sung khác với thanh bên riêng. Nếu hai tiện ích bổ sung cố gắng mở cùng lúc thanh bên, thì chỉ một tiện ích bổ sung sẽ hiển thị.
- Không hiển thị thanh bên hoặc hộp thoại khi tài liệu mở lần đầu.
- Chỉ các tiện ích bổ sung hoạt động trong
AuthMode.FULLmới có thể mở thanh bên hoặc hộp thoại. Bạn có thể sử dụng mục trình đơn để mở thanh bên vì thao tác này sẽ nhắc người dùng cấp toàn quyền.
Các chế độ kiểm soát
Giao diện người dùng tiện ích bổ sung tuyệt vời sẽ để lại một số không gian cho các thành phần điều khiển. Lề và khoảng đệm đầy đủ sẽ giúp ích rất nhiều, trong khi các nút điều khiển dày đặc có thể gây choáng ngợp. Nếu bạn còn băn khoăn, hãy mượn bố cục từ chính trình chỉnh sửa. Ví dụ: xem lại các hộp thoại hiện có trong Google Tài liệu, chẳng hạn như Tệp > Thiết lập trang, khi tạo hộp thoại của riêng bạn.
Tài liệu về gói CSS tiện ích bổ sung cung cấp mã đánh dấu mẫu cho từng loại thành phần điều khiển dưới đây.
Nút
Sử dụng nút để kiểm soát các thao tác chính trên giao diện người dùng thay vì các đường liên kết thuần tuý hoặc các phần tử khác.
- Tránh hiển thị nhiều nút màu xanh dương, màu đỏ hoặc màu xanh lục cùng một lúc. Các nút màu xám có thể xuất hiện liên tục.
- Hầu hết nhãn nút phải được viết hoa theo kiểu câu và bắt đầu bằng một động từ. Các nút màu đỏ, thường dùng để tạo thao tác, phải sử dụng chữ hoa.
| Việc không nên làm | Việc nên làm |
|---|---|
|
|
|
Hộp đánh dấu và nút chọn
Sử dụng hộp đánh dấu khi mọi người có thể chọn nhiều tuỳ chọn hoặc không chọn tuỳ chọn nào cả. Sử dụng nút chọn (hoặc trình đơn chọn) khi phải chọn đúng một tuỳ chọn.
- Không thay đổi hành vi của hộp đánh dấu để bắt chước nút chọn.
- Đừng làm gì ngay khi các hộp đánh dấu được chọn. Mọi người đều có thể mắc sai lầm. Chờ cho đến khi người dùng nhấp vào một nút để xác nhận lựa chọn của họ.
Chọn trình đơn
Danh sách chọn là một cách hay để đưa ra một danh sách ngắn các lựa chọn thay thế.
- Sắp xếp các tuỳ chọn theo thứ tự bảng chữ cái hoặc theo một lược đồ logic mà tất cả người dùng đều có thể hiểu (chẳng hạn như các ngày trong tuần, bắt đầu từ Chủ Nhật).
- Nếu danh sách quá dài, hãy cân nhắc sử dụng một thành phần điều khiển khác. Ví dụ: bạn có thể hiển thị một danh sách có thể cuộn để cung cấp thêm không gian cho trình đơn và giúp người dùng dễ dàng điều hướng hơn.
Vùng văn bản
Nếu người dùng cần nhập nhiều từ, hãy sử dụng vùng văn bản.
- Đặt vùng văn bản có chiều cao ít nhất là 2 dòng để dễ sử dụng và không giống như trường văn bản.
- Đặt nhãn ở trên cùng.
Trường văn bản
Sử dụng trường văn bản nếu người dùng chỉ cần nhập một hoặc hai từ.
- Chiều rộng của trường văn bản phải cho biết nội dung mà bạn muốn người dùng nhập vào đó.
- Tránh sử dụng văn bản giữ chỗ làm nhãn vì văn bản này sẽ biến mất khi có tiêu điểm. Văn bản giữ chỗ rất hữu ích khi đưa ra ví dụ hoặc thông tin chi tiết bổ sung.
- Đặt nhãn ở trên cùng, nhưng bạn có thể sắp xếp các trường văn bản ngắn cạnh nhau.
Xây dựng thương hiệu
Trong tiện ích bổ sung
Nếu bạn muốn thêm thương hiệu, hãy làm ngắn gọn và đơn giản. Điều này giúp người dùng tập trung vào giao diện người dùng và khiến tiện ích bổ sung của bạn trở thành một phần của trình chỉnh sửa.
- Mọi khía cạnh của tiện ích bổ sung đều phải tuân thủ nguyên tắc sử dụng thương hiệu.
- Không được sử dụng từ "Google" hoặc biểu tượng sản phẩm của Google.
- Văn bản không được dài quá vài từ và được tạo kiểu trong lớp
graytừ gói CSS bổ sung. - Hình ảnh phải có nền trắng và không được lớn hơn 200px × 60px.
- Đối với hộp thoại, thông tin thương hiệu phải ở góc dưới cùng bên phải.
- Đối với thanh bên, bạn có thể đặt thương hiệu ở trên cùng hoặc dưới cùng.
Tại cửa hàng
Để xuất bản một tiện ích bổ sung cho Trình chỉnh sửa, bạn cần có một số thành phần hình ảnh. Những thành phần này được dùng để tạo trang thông tin của tiện ích bổ sung trên Cửa hàng Play.
- Mọi khía cạnh của trang thông tin trên Cửa hàng Play đều phải tuân thủ nguyên tắc sử dụng thương hiệu.
- Để biết thêm thông tin chi tiết về hình ảnh mà bạn cần cung cấp, hãy xem nguyên tắc về hình ảnh.
Hỗ trợ tiếp cận
Mọi người đều có thể sử dụng tiện ích bổ sung của bạn, cho dù họ nhìn thấy màu sắc theo cách khác, sử dụng trình đọc màn hình hoặc có nhu cầu khác. Hỗ trợ tiếp cận là một chủ đề rộng mà chúng tôi không thể đề cập đầy đủ trong hướng dẫn phong cách này. Một tài nguyên hữu ích là trang web Google Hỗ trợ tiếp cận. Tuy nhiên, sau đây là một số mẹo giúp bạn bắt đầu:
- Đảm bảo bạn có thể điều hướng đến tất cả các nút điều khiển trên giao diện người dùng bằng bàn phím. Thêm
tabindex=0vào các thành phần điều khiển tuỳ chỉnh (như các thành phần được tạo bằng<div>) để mọi người có thể nhấn phím tab đến các thành phần đó. Cân nhắc việc có nên hỗ trợ các phím khác hay không, chẳng hạn như mũi tên cho danh sách. - Một số người có thể sử dụng trình đọc màn hình với tiện ích bổ sung của bạn. Do đó, hình ảnh phải có thuộc tính
altvà các thành phần điều khiển tuỳ chỉnh phải có thuộc tính ARIA để mô tả cách sử dụng. - Đừng chỉ dựa vào màu sắc để truyền đạt trạng thái. Hãy sử dụng cả biểu tượng và văn bản.
Nếu bạn sử dụng các thành phần điều khiển web tiêu chuẩn, chẳng hạn như các thành phần được mô tả ở phần trước trong hướng dẫn này, thì việc hỗ trợ tiếp cận tiện ích bổ sung sẽ dễ dàng hơn.