Tài liệu này đưa ra các nguyên tắc về cách hiển thị nút Đăng nhập bằng Google trên trang web hoặc ứng dụng của bạn. Trang web hoặc ứng dụng của bạn phải tuân thủ các nguyên tắc này để hoàn tất quy trình xác minh ứng dụng.
SDK dịch vụ nhận dạng của Google hiển thị nút Đăng nhập bằng Google luôn tuân thủ những nguyên tắc sử dụng thương hiệu mới nhất của Google. Đây là cách được đề xuất để hiển thị nút Đăng nhập bằng Google trên trang web hoặc ứng dụng của bạn. Trong trường hợp không thể sử dụng tuỳ chọn nút do Google hiển thị, bạn có thể hiển thị phần tử nút HTML, tải xuống các tài sản thương hiệu được phê duyệt trước của chúng tôi hoặc tuỳ ý tạo nút Đăng nhập bằng Google tuỳ chỉnh.
Hiển thị phần tử nút HTML
Chúng tôi cung cấp một trình định cấu hình HTML cho phép bạn tuỳ chỉnh giao diện của nút Đăng nhập bằng Google. Sau đó, bạn có thể tải một đoạn mã HTML và CSS xuống để hiển thị nút này trên trang web của mình.Tạo phần tử nút HTML
Tải biểu tượng thương hiệu được phê duyệt trước xuống
Thay vì sử dụng nút hình ảnh tuỳ chỉnh, bạn có thể tải xuống các nút Đăng nhập bằng Google đã được phê duyệt trước ở định dạng PNG và SVG cho tất cả nền tảng.Các nút hình ảnh được cung cấp có sẵn ở chế độ tiêu chuẩn và biểu tượng, đồng thời bao gồm các tuỳ chọn kiểu sau:
- Giao diện : Sáng, Trung tính, Tối
- Hình dạng : Hình chữ nhật, hình viên thuốc
| Chủ đề | Nút | Mô tả |
|---|---|---|
| Sáng |
|
Nút Đăng nhập bằng Google hình chữ nhật lớn, tiêu chuẩn, có giao diện sáng |
| Tối |
|
Nút Đăng nhập bằng Google hình viên nang theo giao diện tối tiêu chuẩn |
Các chế độ nút được hỗ trợ
| Sáng |
|
|
| Tối |
|
|
| Bình thường |
|
|
Tạo nút Đăng nhập bằng Google tuỳ chỉnh
Bạn nên sử dụng SDK Dịch vụ nhận dạng của Google hoặc bất kỳ lựa chọn nào khác được đề cập trong các phần trước vì điều này giúp người dùng Google dễ dàng nhận diện thương hiệu Google hơn. Người dùng càng dễ dàng xác định nút hành động thì càng có nhiều khả năng họ sẽ tương tác với nút đó.
Tuy nhiên, nếu bạn cần điều chỉnh nút để phù hợp với thiết kế ứng dụng, hãy tuân thủ các nguyên tắc sau.
Kích thước
Bạn có thể điều chỉnh tỷ lệ nút theo nhu cầu cho các thiết bị và kích thước màn hình khác nhau, nhưng bạn phải giữ nguyên tỷ lệ khung hình để biểu trưng Google không bị kéo giãn.
Văn bản
Để khuyến khích người dùng nhấp vào nút này, bạn nên sử dụng văn bản kêu gọi hành động "Đăng nhập bằng Google", "Đăng ký bằng Google" hoặc "Tiếp tục bằng Google". Người dùng phải hiểu rõ rằng họ đang đăng nhập vào ứng dụng của bạn hoặc đăng ký ứng dụng của bạn bằng thông tin xác thực của Google, chứ không phải đăng ký hoặc đăng ký Tài khoản Google trên ứng dụng của bạn.
Màu
Trạng thái mặc định của các nút được hiển thị bên dưới. Nút phải luôn có màu tiêu chuẩn cho chữ "G" của Google.
| Chủ đề | Ví dụ: | |
|---|---|---|
| Sáng |
|
Điền: #FFFFFF Viền: #747775 | 1px | bên trong Phông chữ: #1F1F1F | Roboto Medium | 14/20 |
| Tối |
|
Điền: #131314 Nét vẽ: #8E918F | 1px | bên trong Phông chữ: #E3E3E3 | Roboto Medium | 14/20 |
| Bình thường |
|
Màu nền: #F2F2F2 Nét vẽ: Không có nét vẽ Phông chữ: #1F1F1F | Roboto Medium | 14/20 |
Phông chữ
Phông chữ của nút là Roboto Medium, một phông chữ TrueType. Để cài đặt, trước tiên hãy tải phông chữ Roboto xuống rồi giải nén gói tải xuống. Trên máy Mac, bạn chỉ cần nhấp đúp vào Roboto-Medium.ttf, sau đó nhấp vào "Install Font". Trên Windows, hãy kéo tệp vào thư mục "My Computer" (Máy tính của tôi) > "Windows" (Windows) > "Fonts" (Phông chữ).
Khoảng đệm
| Android |
|
| iOS |
|
| Web (thiết bị di động + máy tính) |
|
| Tài liệu tham khảo |
|
Biểu trưng Google trong nút "Đăng nhập bằng Google"
Bất kể văn bản là gì, bạn cũng không thể thay đổi kích thước hoặc màu sắc của biểu trưng chữ "G" của Google. Phiên bản này phải là phiên bản màu tiêu chuẩn và xuất hiện trên nền trắng. Nếu bạn cần tạo biểu trưng Google theo kích thước tuỳ chỉnh, hãy bắt đầu với bất kỳ kích thước biểu trưng nào có trong gói tải xuống.
Thiết kế nút không chính xác
 Việc nên làm Sử dụng nguyên tắc thiết kế Google Material 3 cho ranh giới nút và bảng phối màu. |
 Không nên Chỉ sử dụng biểu tượng hoặc biểu trưng của Google mà không có đường viền nút và không có văn bản để cho biết hành động của người dùng. |
 Nên làm Sử dụng màu thương hiệu Google cho biểu tượng Google trong chế độ tối, sáng và trung tính. |
 Không nên Sử dụng phiên bản đơn sắc của chữ "G" của Google cho nút này. |
 Việc nên làm Chọn nút ở chế độ màu phù hợp để hỗ trợ tiếp cận và có mức độ nổi bật bằng nhau. |
 Không nên Đặt biểu tượng "G" của Google có màu tiêu chuẩn trên nền màu, ngoại trừ màu sáng, tối hoặc trung tính. |
 Việc nên làm Sử dụng chữ "G" của Google với khoảng đệm và kích thước cố định. |
 Không nên Tạo biểu tượng của riêng bạn cho nút. |
 Nên làm Sử dụng chữ "G" của Google cho nút hành động nếu cần. |
 Không nên Chỉ sử dụng cụm từ "Google" trong nút để thể hiện hành động trong quy trình Đăng nhập bằng Google. |
Đăng nhập bằng các phương pháp hay nhất để xây dựng thương hiệu của Google
Tính năng Đăng nhập bằng Google và các lựa chọn đăng nhập khác của bên thứ ba
Nút Đăng nhập bằng Google phải hiển thị ít nhất là nổi bật như các lựa chọn đăng nhập khác của bên thứ ba. Ví dụ: các nút phải có kích thước gần như giống nhau và có trọng số hình ảnh tương tự nhau.
Nguyên tắc khác
Nếu bạn yêu cầu các phạm vi bổ sung, hãy thực hiện việc này bằng quyền uỷ quyền gia tăng (Android, iOS, web), chỉ nhắc người dùng uỷ quyền khi họ bắt đầu tương tác với một tính năng yêu cầu quyền truy cập API.
Nếu bạn yêu cầu các phạm vi YouTube, hãy sử dụng nút YouTube.
Nếu bạn sử dụng dịch vụ trò chơi của Google Play, hãy xem thêm nguyên tắc sử dụng thương hiệu của dịch vụ trò chơi của Google Play.
Bạn không được phép sử dụng các thương hiệu của Google theo cách không được đề cập rõ ràng trong tài liệu này khi chưa có sự đồng ý trước bằng văn bản của Google (xem Nguyên tắc sử dụng đặc điểm thương hiệu của Google dành cho bên thứ ba để biết thêm thông tin).