Hướng dẫn về kiểu giao diện người dùng cho tiện ích bổ sung của Google Workspace

Tiện ích bổ sung của Google Workspace phải nhất quán với phong cách và bố cục của ứng dụng lưu trữ mà chúng mở rộng. Các ứng dụng này nên mở rộng giao diện người dùng một cách tự nhiên bằng cách sử dụng các chế độ điều khiển và hành vi quen thuộc. Các nguyên tắc được trình bày ở đây mô tả cách xử lý văn bản, hình ảnh, chế độ điều khiển và hoạt động xây dựng thương hiệu để mang lại trải nghiệm chất lượng cao cho người dùng.

Nếu tiện ích bổ sung của bạn mở các trang web riêng biệt là một phần không thể thiếu trong hoạt động của tiện ích bổ sung (chẳng hạn như trang cài đặt cho tiện ích bổ sung), hãy đảm bảo các trang web đó cũng tuân theo các nguyên tắc về kiểu này.

Văn bản và hình ảnh

Phần này hướng dẫn bạn cách sử dụng văn bản và hình ảnh đúng cách trong tiện ích bổ sung.

Tên tiện ích bổ sung

Bạn phải đặt tên cho tiện ích bổ sung trong tệp kê khai của dự án và khi định cấu hình tiện ích bổ sung để phát hành. Tên này xuất hiện ở nhiều nơi, chẳng hạn như trang thông tin trên Google Workspace Marketplace và trong trình đơn. Khi chọn tê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à 15 ký tự trở xuống. Tên dài có thể được tự động cắt ngắn trong trang thông tin trên Google Workspace Marketplace và các nơi khác.
  • Đừng thêm các từ "Google", "Gmail" hoặc tên sản phẩm khác của Google vào tên tiện ích bổ sung.
  • Không thêm từ "tiện ích bổ sung" vào tên tiện ích bổ sung.
  • Bỏ qua thông tin phiên bản.

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 kiểu chữ viết hoa chữ cái đầu câu (đặc biệt là đối với các nút, nhãn và hành động trên thẻ).
  • Ư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.

Thao tác chung và thao tác trên thẻ

Nếu bạn sử dụng các thao tác chung hoặc các thao tác trên thẻ trong tiện ích bổ sung, thì các thao tác đó sẽ xuất hiện dưới dạng mục trong trình đơn của thẻ mà bạn xác định. Bạn có thể chọn văn bản được dùng trong các trình đơn này cho các thao tác này. Khi chọn văn bản để sử dụng:

  • Tránh dùng văn bản trong trình đơn chỉ lặp lại tên tiện ích bổ sung.
  • Bắt đầu mỗi mục trong trình đơn bằng một từ chỉ hành động như "Chạy", "Định cấu hình" hoặc "Tạo".
  • Mô tả tác vụ, chứ không phải thành phần giao diện người dùng mà hành động hiển thị.
  • Nếu hành động 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ả hành động đó, hãy gọi hành động đó là "Bắt đầu".
  • Giữ số lượng mục trong trình đơn ở mức nhỏ để tránh buộc người dùng phải cuộn qua một danh sách lớn. Nếu bạn có nhiều thao tác cần triển khai, hãy cân nhắc sử dụng nhiều thẻ có các thao tác khác nhau trên mỗi thẻ.

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 ngoại lệ, sau đó hiển thị thông báo lỗi thân thiện với người dùng.
  • Trước khi phát hành, hãy kiểm tra để đảm bảo tiện ích bổ sung của bạn không hiển thị thông tin gỡ lỗi trong giao diện người dùng.

Nội dung trợ giúp

Bạn nên thiết kế các thẻ hiển thị thông tin trợ giúp hoặc giải thích cách hoạt động của tiện ích bổ sung cho người dùng. Nếu bạn tạo nội dung trợ giúp cho tiện ích bổ sung, hãy nhớ:

  • 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ó thể liên kết đến nội dung trợ giúp bên ngoài, chẳng hạn như các trang web hỗ trợ.

Hình ảnh

Hình ảnh được sử dụng trong tiện ích bổ sung của bạn là một trong các loại biểu tượng tích hợp sẵn hoặc một hình ảnh được lưu trữ công khai do URL chỉ định. Khi sử dụng hình ảnh được lưu trữ, hãy đảm bảo rằng mọi người có thể sử dụng tiện ích bổ sung của bạn đều có thể truy cập vào hình ảnh đó.

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

Phần này cung cấp các nguyên tắc về trải nghiệm người dùng cho tiện ích tương tác.

Nút

Sử dụng nút để điều khiển các thao tác chính trên giao diện người dùng thay vì các tiện ích khác.

  • Hầu hết nhãn nút văn bản đều phải bắt đầu bằng một động từ.
  • Trong hầu hết các trường hợp, hàng nút chỉ nên có tối đa 3 nút.

DecoratedText

Tiện ích DecoratedText cho phép bạn trình bày nội dung văn bản bằng biểu tượng, nút hoặc nút chuyển.

  • Sử dụng cách viết hoa đầu câu cho nội dung văn bản.
  • Văn bản của tiện ích DecoratedText sẽ bị cắt bớt nếu không vừa với không gian có sẵn. Vì lý do này, hãy luôn cố gắng giữ nội dung văn bản ngắn gọn nhất có thể.

Dữ liệu đầu vào lựa chọn

Bạn có thể sử dụng nhiều loại tiện ích nhập lựa chọn trong tiện ích bổ sung: hộp lựa chọn thả xuống, 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 người dùng phải chọn đúng một lựa chọn. Sử dụng trình đơn thả xuống khi cung cấp một danh sách ngắn các lựa chọn thay thế trong khi cố gắng tiết kiệm không gian trong giao diện người dùng.
  • Sử dụng cách viết hoa đầu câu cho văn bản được chỉ định cho mỗi tuỳ chọn.
  • Tránh sử dụng các thay đổi về lựa chọn để kích hoạt các hành động lớn, khó đảo ngược, vì mọi người thường mắc lỗi khi lựa chọn. Thay vào đó, hãy cân nhắc việc thêm một nút đọc các giá trị lựa chọn hiện tại rồi kích hoạt hành động.
  • Đối với trình đơn thả xuống, hãy 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ư trình bày các ngày trong tuần theo thứ tự, bắt đầu từ Chủ Nhật hoặc thứ Hai).
  • Giới hạn số lượng tuỳ chọn trong một tiện ích đầu vào lựa chọn nhất định ở mức hợp lý. Nếu có quá nhiều tuỳ chọn, người dùng có thể khó sử dụng tiện ích. Trong những trường hợp đó, hãy cân nhắc chia tuỳ chọn thành nhiều danh mục và nhiều tiện ích.

Nhập văn bản

Phương thức nhập văn bản cung cấp một nơi để người dùng nhập dữ liệu chuỗi.

  • Đừng sử dụng phương thức nhập văn bản để yêu cầu người dùng nhập một trong một nhóm mục nhập cụ thể. Thay vào đó, hãy sử dụng một trình đơn thả xuống.
  • Sử dụng gợi ý và đề xuất để giúp người dùng nhập văn bản có định dạng và nội dung chính xác.
  • Sử dụng phương thức nhập văn bản nhiều dòng nếu văn bản cần nhập có nhiều từ.

Xây dựng thương hiệu

Phần này cung cấp các nguyên tắc về trải nghiệm người dùng để thêm các thành phần thương hiệu vào giao diện tiện ích bổ sung.

Trong tiện ích bổ sung

Nếu bạn muốn đưa thương hiệu vào giao diện người dùng của tiện ích bổ sung, hãy đảm bảo thương hiệu đó ngắn gọn và nhẹ nhàng. Điều này giúp mọi người tập trung vào chức năng của tiện ích bổ sung.

  • 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 sử dụng từ "Google", "Gmail" hoặc tên sản phẩm khác của Google.
  • Không sử dụng biểu tượng sản phẩm của Google, ngay cả khi biểu tượng đó đã được sửa đổi.
  • Đừng thêm từ "tiện ích bổ sung" vào văn bản thương hiệu.
  • Văn bản thương hiệu không được dài quá vài từ.

Trong Google Workspace Marketplace

Khi định cấu hình tiện ích bổ sung để phát hành, bạn sẽ cung cấp một số thành phần đồ hoạ và văn bản để tạo trang thông tin trên Google Workspace Marketplace.

Tất cả khía cạnh của trang thông tin trên Cửa hàng Play và các thành phần này phải tuân thủ nguyên tắc sử dụng thương hiệu.