Sử dụng tính năng Đăng nhập bằng Google với phạm vi profile hoặc email cơ bản và tích hợp các nút tiêu chuẩn sau trong ứng dụng web hoặc ứng dụng dành cho thiết bị di động của bạn:
| Phong cách | Nút | Tệp hình ảnh |
|---|---|---|
| Nhạt |
|
Bao gồm các nút đăng nhập ở định dạng PNG, SVG, EPS và Sketch ở nhiều độ phân giải. Bao gồm các trạng thái cơ sở, di chuột và nhấn. |
| Tối |
|
Tệp Sketch, SVG và EPS được bao gồm trong tệp tải xuống để bạn có thể dịch văn bản "Đăng nhập bằng" hoặc "Đăng nhập". Những tệp này yêu cầu phông chữ Roboto.
Nếu bạn yêu cầu thêm phạm vi, hãy làm như vậy với quá trình cấp phép gia tăng (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 yêu cầu quyền truy cập 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 của Dịch vụ trò chơi của Google Play.
Tùy chọn đăng nhập bằng Google và các tùy chọn đăng nhập khác của bên thứ ba
Mức độ nổi bật như nhau
Nút Đăng nhập bằng Google phải được hiển thị ít nhất là nổi bật như các tùy 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 xấp xỉ bằng nhau và có hình ảnh tương tự nhau.
Phù hợp với phong cách của ứng dụng của riêng bạn
Bạn nên sử dụng nút Đăng nhập bằng Google tiêu chuẩn vì nút này cho phép người dùng Google xác định tuỳ chọn của Google nhanh hơn. Nếu bạn cần điều chỉnh nút này cho phù hợp với thiết kế của ứng dụng hoặc dịch văn bản "Đăng nhập bằng" hoặc "Đăng nhập", hãy làm theo các nguyên tắc sau.
Kích thước
Bạn có thể điều chỉnh tỷ lệ nút khi 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 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 lời kêu gọi hành động "Đăng nhập bằng Google" hoặc "Đăng ký bằng Google". Bạn cần nói rõ với người dùng rằng họ đang đăng nhập vào ứng dụng của bạn hoặc đăng ký ứng dụng bằng thông tin đăng nhập Google của họ, 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.
Văn bản "Google"
Bạn có thể sử dụng chính từ "Google" trong nút nếu từ đó đi kèm với văn bản bên cạnh để nêu rõ hành động đó là gì. Ví dụ:
Đăng nhập bằng:
Màu
Màu của một nút sáng chưa nhấn là #FFFFFF (trắng). Màu của nút tối (màu xanh dương) chưa nhấn là #4285F4. Nền của nút có thể là màu xanh dương hoặc trắng, nhưng nút này phải luôn có màu "G" chuẩn của Google trên ô màu trắng.
Phông chữ
Phông chữ 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, 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" > "Windows" > "Fonts". Không sử dụng các phông chữ khác trên nút này, trừ trường hợp có ghi chú trong trường hợp Phù hợp với kiểu của ứng dụng.
Đối với các trang web sử dụng nút đăng nhập tùy chỉnh, bạn có thể tải phông chữ Roboto từ Google Fonts.
Khoảng đệm
Khoảng đệm ở bên trái (và bên phải) của văn bản phải là 8 dp. Biểu trưng phải là 18dp và phải có 24dp giữa biểu trưng và văn bản nút.
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 không thể thay đổi kích thước hoặc màu sắc của biểu trưng Google "G". Phiên bản nà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 riêng của Google có kích thước tùy chỉ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 đúng
 |
Không sử dụng biểu tượng hoặc biểu trưng của Google khi không có ranh giới nút và không có văn bản để cho biết hành động của người dùng. |
|
Không sử dụng biểu tượng Google để thể hiện thông tin Đăng nhập bằng Google. |
 |
Không sử dụng các phiên bản chữ "G" tối hoặc sáng. |
|
Không đặt biểu tượng Google "G" màu chuẩn trên nền màu. |
 |
Không tạo biểu tượng của riêng bạn cho nút này. |
 |
Không dùng thuật ngữ "Google" trong nút không có biểu tượng Google đi kèm. |
Bạn không được phép sử dụng các thương hiệu 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 phần 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).