Tài liệu này đưa ra hướng dẫn về cách hiển thị nút Đăng nhập bằng Google trên trang web hoặc ứng dụng. Trang web hoặc ứng dụng của bạn phải tuân thủ những 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 của chúng tôi hiển thị nút Đăng nhập bằng Google. Nút này luôn tuân thủ các nguyên tắc sử dụng thương hiệu mới nhất của Google. Bạn nên hiển thị nút Đăng nhập bằng Google trên trang web hoặc ứng dụng của mình. 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 tài sản thương hiệu đã được phê duyệt trước của chúng tôi hoặc tạo nút Đăng nhập bằng Google tuỳ chỉnh.
Kết xuất phần tử nút HTML
Chúng tôi cung cấp một trình định cấu hình HTML để bạn có thể 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 sẽ hiển thị nút trên trang web của bạn.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 của chúng tôi ở đị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ó ở chế độ tiêu chuẩn và chế độ biểu tượng, đồng thời có các tuỳ chọn kiểu dưới đây:
- Chủ đề : Sáng, Trung tính, Tối
- Hình dạng : Hình chữ nhật, Viên thuốc
| Giao diện | Nút | Nội dung mô tả |
|---|---|---|
| Nhạt |
|
Nút Đăng nhập bằng Google hình chữ nhật lớn tiêu chuẩn có chủ đề ánh sáng |
| Tối |
|
Nút Đăng nhập bằng Google có hình viên thuốc tối tiêu chuẩn |
Các chế độ nút được hỗ trợ
| Nhạt |
|
|
| Tối |
|
|
| Bình thường |
|
|
Tạo một 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ỳ tuỳ chọn nào khác đã đề cập trong các phần trước vì cách này giúp người dùng Google dễ dàng nhận ra thương hiệu Google. Người dùng càng dễ dàng xác định nút hành động, thì họ càng có nhiều khả năng tương tác với nút đó.
Tuy nhiên, nếu bạn cần điều chỉnh nút cho phù hợp với thiết kế của ứ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 nếu cần cho các thiết bị và kích thước màn hình khác nhau, nhưng bạn phải duy trì 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". Bạn cần cho người dùng biết rõ rằng họ đang đăng nhập hoặc đăng ký ứng dụng bằng thông tin đăng nhập Google của mình, chứ không đă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 như sau. Nút này phải luôn có màu tiêu chuẩn cho chữ "G" của Google.
| Giao diện | Ví dụ: | |
|---|---|---|
| Nhạt |
|
Màu nền: #FFFFFF Nét chữ: #747775 | 1px | bên trong Phông chữ: #1F1F1F | Roboto Medium | 14/20 |
| Tối |
|
Màu tô: #131314 Nét chữ: #8E918F | 1px | bên trong Phông chữ: #E3E3E3 | Roboto Medium | 14/20 |
| Bình thường |
|
Tô màu: #F2F2F2 Nét: Không có nét Phông chữ: #1F1F1F | Roboto Medium | 14/20 |
Phông chữ
Phông chữ của nút là Roboto Medium, phông chữ TrueType. Để cài đặt, trước tiên, hãy tải phông chữ Roboto xuống và giải nén gói tải xuống. Trên máy Mac, chỉ cần nhấp đúp vào Roboto-Medium.ttf, sau đó nhấp vào "Cài đặt phông chữ". Trên Windows, hãy kéo tệp đó vào thư mục "My Computer" > "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 đều 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. Bản trình bày phải là phiên bản mà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 có kích thước tuỳ chỉnh của riêng mình, hãy bắt đầu bằng 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
 Nên Sử dụng nguyên tắc thiết kế của Google Material 3 cho ranh giới nút và bảng phối màu. |
 Không nên Sử dụng riêng biểu tượng hoặc biểu trưng Google mà không có ranh giới của nút và không có văn bản để biểu thị thao tác của người dùng. |
 Nên Sử dụng màu thương hiệu Google cho biểu tượng Google cho chế độ tối, sáng và trung tính. |
 Không nên Sử dụng các phiên bản đơn sắc của Google "G" cho nút. |
 Nên Chọn nút ở chế độ màu phù hợp để hỗ trợ tiếp cận và đảm bảo độ nổi bật đều nhau. |
 Không nên Đặt biểu tượng Google "G" màu chuẩn trên nền màu không phải là sáng, tối hoặc trung tính. |
 Nên Trung thành với 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 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 từ "Google" trong nút này để thể hiện hành động của tính năng Đăng nhập bằng Google. |
Các phương pháp hay nhất về Đăng nhập bằng Google để xây dựng thương hiệu
Lựa chọn Đă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ị nổi bật ít nhất bằng với 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 tương đương và có trọng lượng hình ảnh tương tự nhau.
Các nguyên tắc khác
Nếu bạn yêu cầu thêm phạm vi, hãy thực hiện việc uỷ quyền tăng dần (Android, iOS, web), chỉ nhắc người dùng cấp quyền khi họ bắt đầu tương tác với một tính năng cần có quyền truy cập qua API.
Nếu bạn yêu cầu phạm vi trên 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 cả Nguyên tắc sử dụng thương hiệu đối với 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 những cách không được đề cập rõ ràng trong tài liệu này nếu chưa có sự đồng ý trước bằng văn bản của Google (xem Nguyên tắc về việc bên thứ ba sử dụng các đặc điểm thương hiệu Google để biết thêm thông tin).