Google cam kết nâng cao công bằng chủng tộc cho các cộng đồng Da đen. Xem làm thế nào.

Nguyên tắc xây dựng thương hiệu khi đăng nhập

Sử dụng Đăng nhập bằng Google với phạm vi profile hoặc email cơ bản và kết hợp các nút tiêu chuẩn sau trong ứng dụng web hoặc thiết bị di động của bạn:

Phong cách nút Tệp hình ảnh
Ánh sáng

Bao gồm các nút đăng nhập ở các định dạng PNG, SVG, EPS và Sketch, ở nhiều độ phân giải. Bao gồm các trạng thái cơ bản, di chuột và nhấn.

Tối

Các tệp Sketch, SVG và EPS được bao gồm trong bản tải xuống để bạn có thể dịch văn bản "Đăng nhập bằng" hoặc "Đăng nhập". Các tệp này yêu cầu phông chữ Roboto .

Nếu bạn yêu cầu phạm vi bổ sung, hãy làm như vậy với ủy quyền tăng dần ( Android , iOS , web ), chỉ nhắc người dùng ủy quyền khi họ bắt đầu tương tác với 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 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 nguyên tắc xây dựng thương hiệu dịch vụ trò chơi của Google Play .

Đăng nhập bằng Google và các tùy chọn đăng nhập khác của bên thứ ba

Sự nổi bật ngang nhau

Nút Đăng nhập bằng Google ít nhất phải được hiển thị nổi bật như các tùy chọn đăng nhập của bên thứ ba khác. Ví dụ: các nút phải có cùng kích thước và có khối lượng hình ảnh tương tự.

Phù hợp với phong cách ứng dụng của riêng bạn

Bạn nên sử dụng nút Đăng nhập chuẩn của Google vì nó cho phép người dùng Google xác định tùy chọn Google nhanh hơn. Nếu bạn cần điều chỉnh nút để phù hợp với thiết kế ứng dụng của mình 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 thiết 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 để logo Google không bị kéo căng.

Bản văn

Để khuyến khích người dùng nhấp vào nút, chúng tôi đề xuất văn bản kêu gọi hành động "Đăng nhập với Google" hoặc "Đăng ký với Google". Người dùng phải rõ ràng 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 đă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 từ "Google" cho chính nó trong nút nếu nó được đi kèm với văn bản liền kề giúp bạn hiểu rõ hành động là gì . Ví dụ:

Đăng nhập với:

Màu sắc

Nút đăng nhập Google có nền màu xanh lamNút đăng nhập Google có nền trắng

Màu cho nút đèn không được nhấn là #FFFFFF (trắng). Màu cho nút tối (xanh lam) không được nhấn là # 4285F4. Nền nút có thể là màu xanh lam hoặc trắng, nhưng nút phải luôn bao gồm màu tiêu chuẩn của Google "G" trên một ô màu trắng.

Nét 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 xuống phông chữ Roboto và giải nén gói tải xuống. Trên 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, kéo tệp vào thư mục "Máy tính của tôi"> "Windows"> "Phông chữ". Không sử dụng các phông chữ khác trên nút, ngoại trừ như đã lưu ý đối với các trường hợp Khớp với kiểu ứng dụng của riêng bạn .

Đố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 .

Đệm lót

Khoảng đệm bên trái (và bên phải) của văn bản phải là 8dp. 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.

Minh họa các kích thước của các thành phần của một nút bao gồm cả phần đệm xung quanh văn bản.

Biểu trưng của 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 "G" của Google. Nó 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 có kích thước tùy chỉnh của riêng mì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

Không sử dụng biểu tượng hoặc biểu trưng của Google mà không có ranh giới nút và không có văn bản để biểu thị hành động của người dùng.
Không sử dụng biểu tượng Google để đại diện cho Đăng nhập bằng Google.
Không sử dụng phiên bản tối hoặc sáng của Google "G".
Không đặt biểu tượng "G" màu chuẩn của Google trên nền màu.
Không tạo biểu tượng của riêng bạn cho nút.
Không sử dụng thuật ngữ "Google" trong nút mà không có biểu tượng Google đi kèm.

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 không có sự đồng ý trước bằng văn bản của Google (xem Nguyên tắc sử dụng các đặc điểm thương hiệu của Google cho bên thứ ba để biết thêm thông tin).