Các nguyên tắc sử dụng thương hiệu khi đăng nhập bằng Google

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
Dưới đây là hai ví dụ:
Giao diện Nút Nội dung mô tả
Nhạt Ví dụ về nút Đăng nhập bằng Google hình chữ nhật tiêu chuẩn có giao diện sáng 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 Ví dụ về nút Đăng nhập bằng Google theo giao diện tối tiêu chuẩn Nút Đăng nhập bằng Google có hình viên thuốc tối tiêu chuẩn
Tải biểu tượng thương hiệu đã được phê duyệt trước xuống

Các chế độ nút được hỗ trợ

Nhạt

Nút Đăng nhập bằng Google hình tròn theo chủ đề sáng

Nút Đăng nhập bằng Google có hình vuông màu sáng

Nút Đăng nhập bằng Google có hình viên thuốc sáng

nút Đăng nhập bằng Google có hình chữ nhật sáng

Tối

Nút Đăng nhập bằng Google hình tròn theo chủ đề tối

Nút Đăng nhập bằng Google hình vuông theo chủ đề tối

Nút Đăng nhập bằng Google có hình viên thuốc màu tối

hình chữ nhật theo chủ đề tối Nút Đăng nhập bằng Google

Bình thường

Nút Đăng nhập bằng Google hình tròn theo chủ đề trung tính

Nút Đăng nhập bằng Google có hình vuông theo chủ đề trung tính

Nút Đăng nhập bằng Google có hình viên thuốc màu trung tính

nút Đăng nhập bằng Google theo chủ đề trung tính

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 Nút Đăng nhập bằng Google có hình viên thuốc sáng Màu nền: #FFFFFF
Nét chữ: #747775 | 1px | bên trong
Phông chữ: #1F1F1F | Roboto Medium | 14/20
Tối Nút Đăng nhập bằng Google có hình viên thuốc màu 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 Nút Đăng nhập bằng Google có hình viên thuốc màu trung tính 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 Khoảng đệm trái 12px trước biểu trưng Google, khoảng đệm bên phải 10px sau biểu trưng Google và khoảng đệm bên phải 12px sau văn bản Đăng nhập bằng Google
iOS Khoảng đệm trái 16px trước biểu trưng của Google, khoảng đệm bên phải 12px sau biểu trưng Google và khoảng đệm bên phải 16px sau văn bản Đăng nhập bằng Google
Web (thiết bị di động + máy tính) Khoảng đệm trái 12px trước biểu trưng Google, khoảng đệm bên phải 10px sau biểu trưng Google và khoảng đệm bên phải 12px sau văn bản Đăng nhập bằng Google
Tài liệu tham khảo Tham chiếu đến khoảng đệm của nút Đăng nhập bằng Google

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.

Biểu tượng Google G

Thiết kế nút không chính xác

mẫu hình ảnh những điều nên và không nên làm khi xây dựng thương hiệu
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.

mẫu hình ảnh những điều nên và không nên làm khi xây dựng thương hiệ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.

mẫu hình ảnh những điều nên và không nên làm khi xây dựng thương hiệu
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.

mẫu hình ảnh những điều nên và không nên làm khi xây dựng thương hiệu
Không nên

Sử dụng các phiên bản đơn sắc của Google "G" cho nút.

mẫu hình ảnh những điều nên và không nên làm khi xây dựng thương hiệu
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.

mẫu hình ảnh những điều nên và không nên làm khi xây dựng thương hiệu
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.

mẫu hình ảnh những điều nên và không nên làm khi xây dựng thương hiệu
Nên

Trung thành với chữ "G" của Google với khoảng đệm và kích thước cố định.

mẫu hình ảnh những điều nên và không nên làm khi xây dựng thương hiệu
Không nên

Tạo biểu tượng của riêng bạn cho nút.

mẫu hình ảnh những điều nên và không nên làm khi xây dựng thương hiệu
Nên

Sử dụng chữ "G" của Google cho nút hành động nếu cần.

mẫu hình ảnh những điều nên và không nên làm khi xây dựng thương hiệu
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).