Trang này được dịch bởi Cloud Translation API.

Hướng dẫn kiểu giao diện người dùng cho Tiện ích bổ sung của trình chỉnh sửa

Tiện ích bổ sung dành cho trình chỉnh sửa xây dựng giao diện người dùng (trình đơn, thanh bên và hộp thoại) bằng Apps Script Dịch vụ HTML. Vì giao diện được phát triển bằng HTML và CSS, chúng có khả năng tuỳ chỉnh cao. Tuy nhiên, khi bạn nên thiết kế giao diện tiện ích bổ sung để cung cấp cho người dùng của bạn.

Các tiện ích bổ sung hay nhất giúp mở rộng từng trình chỉnh sửa một cách tự nhiên bằng cách sử dụng các điều khiển quen thuộc và của Google. Khi tạo một tiện ích bổ sung mới:

Sử dụng gói tiện ích bổ sung CSS trong Các trang dịch vụ HTML.
Khi nghi ngờ 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 tên đó hoặc tham chiếu đến một tiện ích bổ sung bắt đầu nhanh.
Hãy làm theo hướng dẫn về quy tắc này để tạo ra một 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 xuất bản nó. Tên này xuất hiện ở nhiều vị trí, chẳng hạn như trong cửa hàng tiện ích bổ sung và trong các trình đơn.

Sử dụng viết hoa chữ cái đầu.
Tránh dùng dấu câu, đặc biệt là dấu ngoặc đơn, trừ phi đó là một phần của thương hiệu.
Ngắn gọn – tốt nhất là 30 ký tự trở xuống. Tên dài có thể là tự động bị cắt bớt.
Đừng nêu tên của sản phẩm của Google mà tiện ích bổ sung đó dùng (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. Bạn phải làm rõ hầu hết các hành động thông qua hình tượng học, bố cục và nhãn ngắn. Nếu bạn thấy một phần tiện ích bổ sung của mình cần nhiều lời giải thích hơn những nhãn ngắn có thể cung cấp, tốt nhất là bạn có thể tạo một trang web riêng mô tả tiện ích bổ sung của mình và liên kết đến tiện ích bổ sung đó.

Khi viết văn bả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ó biệ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 ai đó cài đặt tiện ích bổ sung của bạn, và xuất hiện trong 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ừ hành động.
Mô tả bước đầu tiên khi 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 đó.
Không quảng cáo 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 thực đơ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ể chạy trực tiếp các tập lệnh tiện ích bổ sung. Thay vào đó, mỗi Tiện ích bổ sung sẽ được thêm vào 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ế trình đơn cấu trúc và từ ngữ 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 tiện ích bổ sung. Thay vào đó, hãy bắt đầu bằng từ hành động.
Nếu mục trong trình đơn chính bắt đầu một quy trình làm việc và không có một động từ duy nhất nào mô tả hoạt động, gọi là "Bắt đầu". Mẫu này được dùng trong Bắt đầu nhanh tiện ích bổ sung Tài liệu.
Trừ khi trình đơn của bạn có nhiều hơn 6 mục, cố gắng không sử dụng trình đơn phụ. Chúng có thể phức tạp và khó lựa 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 trong 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 có vấn đề xảy ra, bạn cần sử dụng ngôn từ đơ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ỳ trường hợp ngoại lệ nào mà mã của bạn gửi ra. Thay vào đó, hãy sử dụng try...catch để chặn ngoại lệ, sau đó hiển thị thông báo lỗi thân thiện với người dùng với văn bản cùng dòng được tạo kiểu trong Lớp error trong CSS tiện ích bổ sung hoặc một hộp thoại thông báo.
Trước khi xuất bản, hãy kiểm tra để đảm bảo tiện ích bổ sung không ghi lại thông tin gỡ lỗi vào bảng điều khiển JavaScript; sử dụng Ghi nhật ký Stackdriver thay thế.

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 bao gồm hộp thoại Trợ giúp tự động. Nếu bạn cung cấp URL trợ giúp khi bạn xuất bản, nút "Tìm hiểu thêm" nút liên kết đến trang đó. Trừ phi tiện ích bổ sung dễ hiểu, vui lòng cung cấp trang giải thích cách sử dụng tiện ích bổ sung đó.

Nếu có thể, hãy trình bày hướng dẫn dưới dạng danh sách có dấu đầu dòng hoặc được đánh số. Người dùng đi bộ đến kết quả cuối cùng, với thông tin tham chiếu rõ ràng đến các thành phần được đặt tên trên giao diện người dùng.
Đảm bảo rằng các 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 vào 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 của mình. Nếu tiện ích bổ sung của bạn tạo ra 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 của chúng, nhưng hầu hết hiện thanh bên hoặc hộp thoại có tuỳ chỉnh nội dung.

Thanh bên phù hợp nhất với những công cụ ổn định mà mọi người có thể sẽ sử dụng nhiều lần khi tham chiếu đến 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ụ dùng một lần, trang cài đặt và các thông báo quan trọng.

Văn bản giao diện người dùng

Trong mọi hộp thoại hoặc thanh bên, giả định mọi người chỉ đọc tiêu đề và nhãn nút. Họ vẫn có thể tìm ra giao diện của bạn làm gì và đưa ra lựa chọn phù hợp chứ?

Sử dụng tiêu đề và các 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 sử dụng một lần, sau đó chuyển sang phần tiếp theo. Ví dụ: nếu cho phép mọi người chèn hình ảnh, bạn có thể hiển thị hộp thoại với các lựa chọn nội dung cần chèn - rồi đóng hộp thoại khi đã chèn hình ảnh đồ hoạ. Hộp thoại là cũng hữu ích khi hiển thị cài đặt của tiện ích bổ sung hoặc khi giao tiếp thư quan trọng.

Không mở hộp thoại (bao gồm cảnh báo hoặc lời nhắc) từ một hộp thoại khác—chỉ hiển thị từng thông báo một.
Đối với tiêu đề hộp thoại, hãy sử dụng một từ hoặc cụm từ ngắn, dẫn đầu với từ quan trọng.
Nhãn của nút phải liên quan đến tiêu đề hộp thoại.
Ưu tiên dùng 2 nút, thường là hành động chính và "Huỷ". Dành cho các trường hợp đặc biệt yêu cầu nút thứ ba, hãy xem xét góc dưới cùng bên phải.
Đặt các nút vào 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ó bất kỳ nút phụ màu xám nào ở 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 xem lại tài liệu, bảng tính, bản trình bày của họ hoặc biểu mẫu trong khi đưa ra lựa chọn. Những quyền 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 một thanh bên mới được mở, mọi thanh bên trước đó sẽ tự động đóng lại. Đây là những chế độ phù hợp nhất với 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 có thanh bên riêng. Nếu 2 tiện ích bổ sung cố gắng mở đồng thời các thanh bên, chỉ có một thanh bên được hiển thị.
Không hiển thị thanh bên hoặc hộp thoại khi tài liệu mở ra lần đầu tiên.
Chỉ các tiện ích bổ sung hoạt động ở AuthMode.FULL có thể mở thanh bên hoặc hộp thoại. Bạn có thể dùng một mục trong trình đơn để mở thanh bên vì thanh bên này sẽ nhắc người dùng cung cấp uỷ quyền đầy đủ.

Các chế độ kiểm soát

Các giao diện người dùng tiện ích bổ sung tuyệt vời dành cho các chức năng điều khiển một số khoảng trống. Biên lợi nhuận thoả đáng và khoảng đệm sẽ hữu ích rất nhiều, trong khi các chế độ kiểm soát với mật độ cao có vẻ quá tải. Khi ở trong còn nghi ngờ rằng hãy mượn bố cục từ chính biên tập viên. Ví dụ: xem lại các báo cáo hiện có trong Google Tài liệu, chẳng hạn như Tệp > Thiết lập trang, khi tạo trang của riêng bạn.

Tài liệu về gói tiện ích bổ sung CSS cung cấp mã đánh dấu mẫu cho từng loại chế độ kiểm soát bên dưới.

Nút

Dùng các 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 thao tác đơn giản đường liên kết hoặc các phần tử khác.

Tránh hiển thị nhiều nút màu xanh dương, đỏ hoặc xanh lục cùng một lúc. Màu xám các nút có thể xuất hiện lặp lại.
Hầu hết các nhãn nút phải được viết hoa đầu câu và bắt đầu bằng một động từ. Đỏ (thường dùng cho thao tác tạo) nên được viết hoa toàn bộ.

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 mục hoặc hoàn toàn không chọn mục nào. Sử dụng nút chọn (hoặc trình đơn chọn) khi phải chọn chính xác một tuỳ chọn.

Không thay đổi hộp đánh dấu để bắt chước các nút chọn.
Không làm bất cứ điều gì ngay sau khi các nhãn này đã được kiểm tra. Mọi người đều có thể phạm 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

Lựa chọn là một cách tuyệt vời để cung cấp một danh sách ngắn các lựa chọn thay thế.

Sắp xếp các lựa chọn theo thứ tự bảng chữ cái hoặc theo sơ đồ hợp lý mà tất cả người dùng đều có thể hiểu được (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 chế độ kiểm soát khác. Ví dụ: bạn có thể trình bày một danh sách có thể cuộn để tạo thêm không gian cho trình đơn dễ điều hướng hơn.

Vùng văn bản

Nếu mọi người cần nhập nhiều từ, hãy sử dụng một vùng văn bản.

Làm cho vùng văn bản cao ít nhất 2 dòng để dễ sử dụng hơn và không trông giống như các trường văn bản.
Nhãn địa điểm ở trên cùng.

Trường văn bản

Sử dụng các 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 sẽ đề xuất nội dung mà bạn dự kiến mọi người sẽ nhập vào trường đó.
Tránh sử dụng văn bản phần giữ chỗ làm nhãn vì văn bản này sẽ bị mất tiêu điểm. Văn bản của phần giữ chỗ rất hữu ích khi cung cấp các ví dụ hoặc thông tin chi tiết bổ sung.
Đặt nhãn lên trên, nhưng hãy thoải mái 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 của bạn

Nếu bạn muốn lồng ghép thương hiệu, hãy tạo mô tả ngắn gọn và nhẹ nhàng. Điều này giúp mọi người tập trung vào giao diện người dùng của bạn và làm cho tiện ích bổ sung của bạn giống như một phần của trình chỉnh sửa.

Tất cả các khía cạnh của tiện ích bổ sung phải tuân thủ nguyên tắc ghi nhãn.
Đừng dùng từ "Google" hoặc sử dụng 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 gray từ CSS tiện ích bổ sung .
Hình ảnh phải được đặt trên nền trắng và có kích thước không quá 200 px x 60 px.
Đối với hộp thoại, phần thương hiệu phải nằm ở góc dưới cùng bên phải.
Đối với thanh bên, phần thương hiệu có thể nằm ở trên cùng hoặc dưới cùng.

Trong cửa hàng

Để phát hành Tiện ích bổ sung Trình chỉnh sửa, bạn cần có 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 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 ghi nhãn.
Để biết thêm 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, dù họ thấy màu sắc , sử dụng trình đọc màn hình hoặc có các nhu cầu khác. Hỗ trợ tiếp cận là một khái niệm mà không thể trình bày đầy đủ trong hướng dẫn quy tắc này. Một tài nguyên hữu ích là trang web Google Hỗ trợ tiếp cận. Nhưng ở đây dưới đây là một số mẹo giúp bạn bắt đầu sử dụng:

Đảm bảo rằng bạn có thể dùng bàn phím để chuyển đến mọi chế độ điều khiển trên giao diện người dùng. Thêm tabindex=0 sang các thành phần điều khiển tuỳ chỉnh (như các thành phần tạo bằng <div>) để mọi người có thể thẻ cho chúng. Cân nhắc xem có hỗ trợ các phím khác hay không, chẳng hạn như mũi tên để xem danh sách.
Một số người có thể sử dụng trình đọc màn hình cùng với tiện ích bổ sung của bạn. Do đó, hình ảnh phải có Thuộc tính alt, và chế độ kiểm soát tuỳ chỉnh nên có Thuộc tính ARIA để mô tả cách sử dụng các thuộc tính đó.
Đừng chỉ dựa vào màu sắc để truyền đạt trạng thái. Đồng thời sử dụng biểu tượng và văn bản.

Nếu bạn sử dụng các chế độ kiểm soát web tiêu chuẩn như các chế độ được mô tả trước đó trong hướng dẫn này, giúp người dùng dễ dàng truy cập vào tiện ích bổ sung của mình.