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

Google Workspace các tiện ích bổ sung phải phù hợp với kiểu và bố cục của ứng dụng lưu trữ mà chúng mở rộng. Chúng 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 kiểm soát và hành vi quen thuộc. Nguyên tắc được trình bày ở đây mô tả các cách xử lý văn bản, hình ảnh, bộ điều khiển và cách xây dựng thương hiệu giúp thúc đẩy trải nghiệm người dùng chất lượng cao.

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

Sử dụng Google Workspace Bộ thiết kế tiện ích bổ sung

Để nhanh chóng tạo ra trải nghiệm người dùng liền mạch, nhà thiết kế có thể sử dụng Google Workspace bộ thiết kế giao diện người dùng bổ sung trên Figma. Bạn có thể tạo một tài khoản Figma miễn phí hoặc yêu cầu quản trị viên của tổ chức cấp giấy phép.

Duyệt qua các thành phần của giao diện dựa trên thẻ và sử dụng các mẫu tích hợp sẵn để tạo và trực quan hoá các tiện ích bổ sung của bạn.

Nhận bộ thiết kế

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

Phần này cho bạn biết 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 bạn định cấu hình tiện ích bổ sung của mình để xuất bản. Tên này xuất hiện ở nhiều vị trí, chẳng hạn như danh sách Google Workspace Marketplace và trong trình đơn. Khi chọn tên:

  • Sử dụng cách viết hoa tiêu đề.
  • Tránh dấu câu, đặc biệt là dấu ngoặc đơn, trừ khi là một phần của thương hiệu.
  • Hãy nhập văn bản ngắn gọn – 15 ký tự trở xuống là phù hợp nhất. Tên dài có thể tự động bị cắt ngắn trong Google Workspace Trang thông tin thị trường và ở những nơi khác.
  • Đừng sử dụng các từ "Google", "Gmail" hoặc tên sản phẩm khác của Google trong tên tiện ích bổ sung của bạn.
  • Không bao gồm từ "Tiện ích bổ sung" trong tên tiện ích bổ sung của bạn.
  • 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 hành động đều phải được làm rõ 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 tiện ích bổ sung của bạn cần được giải thích chi tiết hơn so với các nhãn ngắn có thể cung cấp, thì tốt nhất là bạn nên tạo một trang web riêng mô tả tiện ích bổ sung của bạn 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à thao tác trên thẻ).
  • Ư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.

Thao tác chung và thẻ

Nếu bạn sử dụng các hành động chung hoặc hành động trên thẻ trong tiện ích bổ sung, chúng sẽ xuất hiện dưới dạng các mục trong trình đơn trong các thẻ bạn xác định. Bạn có thể chọn văn bản 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 cần sử dụng:

  • Tránh văn bản 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ừ hành động như "Run", "Configure" hoặc "Create".
  • Hãy mô tả tác vụ chứ không phải thành phần giao diện người dùng mà thao tác 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ả việc này, hãy gọi là "Bắt đầu".
  • Giảm số lượng mục trong trình đơn để 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ần triển khai thêm hành động, hãy cân nhắc sử dụng nhiều thẻ có hành động khác nhau cho mỗi thẻ.

Thông báo lỗi

Khi gặp lỗi, điều quan trọng là phải 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ỳ 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.
  • 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 có thể thiết kế các thẻ hiển thị thông tin trợ giúp hoặc giải thí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 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.
  • 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.
  • Vui lòng liên kết đến nội dung trợ giúp bên ngoài, chẳng hạn như trang web hỗ trợ.

Hình ảnh

Hình ảnh dùng trong tiện ích bổ sung của bạn là một trong những loại biểu tượng tích hợp sẵn hoặc 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 tất cả những người có thể sử dụng tiện ích bổ sung của bạn đều có thể truy cập hình ảnh đó.

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

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

Nút

Sử 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 tiện ích khác.

  • Hầu hết các nhãn nút văn bản phải bắt đầu bằng độ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.

Văn bản được trang trí

Tiện ích được trang trí cho phép bạn trình bày nội dung văn bản bằng các 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 decorationdText bị cắt bớt nếu không thể vừa với không gian có sẵn. Vì lý do này, hãy luôn cố gắng giữ cho nội dung văn bản ngắn gọn nhất có thể.

Giá trị nhập vào cho lựa chọn

Bạn có thể sử dụng nhiều tiện ích đầu vào lựa chọn trong tiện ích bổ sung: hộp 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 hoàn toàn không có tuỳ chọn nào. Sử dụng các nút chọn (hoặc một trình đơn chọn lọc) khi phải chọn đúng một tuỳ chọn. Sử dụng trình đơn thả xuống khi cung cấp một danh sách ngắn các giải pháp 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 từng tuỳ chọn.
  • Tránh sử dụng các thay đổi về lựa chọn để kích hoạt các thao tác lớn, khó đảo ngược, vì mọi người thường mắc lỗi khi đưa ra lựa chọn. Thay vào đó, hãy cân nhắc thêm một nút để đọc các giá trị lựa chọn hiện tại, sau đó kích hoạt thao tác.
  • Đối với trình đơn thả xuống, hãy sắp xếp các tùy chọn theo thứ tự bảng chữ cái hoặc theo 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 nhập dữ liệu lựa chọn nhất định ở một mức hợp lý. Nếu có quá nhiều tùy 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 các danh mục khác nhau và nhiều tiện ích.

Nhập bằng văn bản

Dữ liệu đầu vào dạng văn bản là nơi người dùng có thể 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 các nhóm mục cụ thể. Hãy sử dụng trình đơn thả xuống để chọn.
  • 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 tính năng nhập văn bản nhiều dòng nếu văn bản được nhập nhiều hơn một vài từ.

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

Phần này đưa ra các nguyên tắc về trải nghiệm người dùng khi 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 của bạn

Nếu bạn muốn đưa thương hiệu vào giao diện người dùng tiện ích bổ sung của mình, hãy đảm bảo thành phần này 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 tiện ích bổ sung của bạn.

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

Trong Google Workspace Marketplace

Khi định cấu hình tiện ích bổ sung để phát hành, bạn cung cấp một số thành phần đồ họa và văn bản để tạo trang thông tinGoogle Workspace Thị trường.

Tất cả cá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.