Nếu bạn đang phát triển cho người dùng ở Nga, vui lòng sử dụng các nút "Lưu vào điện thoại" vì Google Wallet chưa hoạt động ở những quốc gia này. Vui lòng xem các thành phần và nguyên tắc có liên quan. Nếu bạn đang phát triển cho người dùng bên ngoài Nga, vui lòng cập nhật nút Thêm vào Google Wallet bằng cách tải các thành phần bên dưới xuống.
Phần này của tài liệu được thiết kế để giúp bạn tạo hình ảnh và các phần tử khác trên giao diện người dùng sao cho chúng trông đẹp mắt trong ứng dụng Google Wallet.
Thành phần
Nút Thêm vào Google Wallet
Nút Thêm vào Google Wallet được dùng bất cứ khi nào bạn hướng người dùng lưu thẻ hoặc vé từ ứng dụng hoặc trang web của bạn vào ví của họ. Nút Thêm vào Google Wallet phải gọi một trong các quy trình của Google Wallet API. Các quy trình này hiển thị ứng dụng Google Wallet, nơi người dùng có thể làm theo hướng dẫn để lưu thẻ và vé vào thiết bị Android và Tài khoản Google của họ. Bạn có thể dùng nút này trong các ứng dụng, trang web hoặc email.
Nút Thêm vào Google Wallet có ở định dạng Android XML, SVG và PNG.
Tải tài sản xuống – XML Android Tải tài sản xuống – SVG Tải tài sản xuống – PNGNút Xem trong Google Wallet
Nút Xem trong Google Wallet được dùng để liên kết sâu người dùng đến ví của họ để xem thẻ hoặc vé đã lưu trước đó. Bạn có thể dùng nút này trong các ứng dụng, trang web hoặc email.
Các nút Xem trong Google Wallet có ở định dạng SVG và PNG.
Tải tài sản xuống – SVG Tải tài sản xuống – PNGTất cả các nút xuất hiện trên trang web, ứng dụng hoặc thông tin liên lạc qua email của bạn đều phải tuân thủ nguyên tắc sử dụng thương hiệu được nêu trên trang này. Ví dụ về những nguyên tắc này bao gồm nhưng không giới hạn ở những nguyên tắc sau:
- Kích thước tương ứng với các nút hoặc phần tử tương tự khác trên trang
- Không được thay đổi hình dạng và màu sắc của nút
- Không gian trống
Các nút được bản địa hoá
Các nút Google Wallet được bản địa hoá sẽ được cung cấp cho tất cả các thị trường mà Wallet có mặt. Nếu bạn đang phát triển cho người dùng ở các thị trường này, hãy luôn sử dụng các nút được liên kết ở trên. Đừng tạo phiên bản nút của riêng bạn. Nếu không có phiên bản nút bằng ngôn ngữ địa phương ở thị trường của bạn, hãy sử dụng phiên bản nút bằng tiếng Anh.
Các nút Thêm vào Google Wallet có bằng các ngôn ngữ: tiếng Albania, tiếng Ả Rập, tiếng Armenia, tiếng Azerbaijan, tiếng Bosnia, tiếng Bulgaria, tiếng Catalan, tiếng Trung (Hong Kong), tiếng Trung (Phồn thể), tiếng Croatia, tiếng Séc, tiếng Đan Mạch, tiếng Hà Lan, tiếng Anh (Ấn Độ, Singapore, Nam Phi, Úc, Canada, Vương quốc Anh, Hoa Kỳ), tiếng Estonia, tiếng Philippines, tiếng Phần Lan, tiếng Pháp (Canada), tiếng Pháp (Pháp), tiếng Gruzia, tiếng Đức, tiếng Hy Lạp, tiếng Do Thái, tiếng Hungary, tiếng Iceland, tiếng Indonesia, tiếng Ý, tiếng Nhật, tiếng Kazakh, tiếng Kyrgyz, tiếng Latvia, tiếng Litva, tiếng Macedonia, tiếng Mã Lai, tiếng Na Uy, tiếng Ba Lan, tiếng Bồ Đào Nha (Brazil), tiếng Bồ Đào Nha (Bồ Đào Nha), tiếng Romania, tiếng Nga (Belarus), tiếng Serbia, tiếng Slovak, tiếng Slovenia, tiếng Tây Ban Nha (Mỹ Latinh), tiếng Tây Ban Nha (Tây Ban Nha), tiếng Thuỵ Điển, tiếng Thái, tiếng Thổ Nhĩ Kỳ, tiếng Ukraina, tiếng Uzbek và tiếng Việt.
Tên được bản địa hoá
Để người dùng hiểu rõ, tên sản phẩm Google Wallet được bản địa hoá ở một số thị trường. Nếu bạn đang phát triển cho người dùng ở những quốc gia này, hãy luôn sử dụng tên bản địa hoá bên dưới cho web, email và bản in. Không tạo phiên bản bản địa hoá riêng cho "Google Wallet". Nếu thị trường của bạn không có trong danh sách dưới đây, hãy sử dụng "Google Wallet" bằng tiếng Anh.
| Quốc gia | Tên |
|---|---|
| Belarus | Google Кошелек |
| Brazil | Carteira do Google |
| Chile | Billetera de Google |
| Séc | Peněženka Google |
| Hy Lạp | Πορτοφόλι Google |
| Hong Kong | Google 錢包 |
| Lithuania | Google Piniginė |
| Ba Lan | Portfel Google |
| Bồ Đào Nha | Carteira da Google |
| Rumani | Portofel Google |
| Slovakia | Peňaženka Google |
| Đài Loan | Google 錢包 |
| Thổ Nhĩ Kỳ | Google Cüzdan |
| UAE | محفظة Google |
| Ukraina | Google Гаманець |
|
Hoa Kỳ (Tiếng Tây Ban Nha)
*Sử dụng tên này ở Hoa Kỳ nếu giao diện người dùng của bạn bằng tiếng Tây Ban Nha |
Billetera de Google |
Kích thước
Điều chỉnh chiều cao và chiều rộng của nút Thêm vào Google Wallet cho phù hợp với bố cục của bạn. Nếu có các nút khác trên trang, thì nút Thêm vào Google Wallet phải có kích thước bằng hoặc lớn hơn. Không được làm nút Thêm vào Google Wallet nhỏ hơn các nút khác.
Kiểu
Nút Thêm vào Google Wallet có 2 biến thể: chính và thu gọn. Nút Thêm vào Google Wallet chỉ có màu đen. Chúng tôi cung cấp các phiên bản nút đã bản địa hoá. Đừng tạo các nút có văn bản đã được bản địa hoá của riêng bạn.
| Chính | Mật độ cao |
|---|---|
|
|
| Sử dụng nút chính trên nền trắng và nền sáng. | Sử dụng nút thu gọn nếu không có đủ không gian cho nút chính hoặc nút có chiều rộng đầy đủ. |
Không gian trống
Luôn duy trì khoảng trống tối thiểu là 8 dp ở tất cả các mặt của nút Thêm vào Google Wallet. Đảm bảo rằng khoảng trống không bao giờ bị gián đoạn bằng đồ hoạ hoặc văn bản.
Chiều cao tối thiểu
Tất cả các nút Thêm vào Google Wallet đều phải có chiều cao tối thiểu là 48 dp.
Những việc nên làm và không nên làm
| Dos | Không nên làm |
|---|---|
| Nên: Chỉ sử dụng nút Thêm vào Google Wallet do Google cung cấp. | Không được: Tạo nút Thêm vào Google Wallet của riêng bạn hoặc thay đổi phông chữ, màu sắc, bán kính nút hoặc khoảng đệm trong nút theo bất kỳ cách nào. |
| Nên: Sử dụng cùng một kiểu nút trên toàn bộ trang web. | Không nên: Làm cho nút Thêm vào Google Wallet nhỏ hơn các nút khác. |
| Nên: Đảm bảo rằng kích thước của nút Thêm vào Google Wallet vẫn bằng hoặc lớn hơn các nút khác. | Không nên: Thay đổi màu nút. |
| Nên: Giữ nguyên tỷ lệ nút khi đổi kích thước các nút Thêm vào Google Wallet. | Không: Điều chỉnh kích thước nút một cách tuỳ ý. |
| Nên: Sử dụng phiên bản nút đã bản địa hoá được cung cấp. | Không nên: Tạo phiên bản nút được bản địa hoá của riêng bạn. |
Các phương pháp hay nhất để đặt nút
Hiển thị nút Thêm vào Google Wallet trên màn hình ứng dụng xác nhận, trang web hoặc email. Hãy tham khảo các phương pháp hay nhất sau đây để hướng dẫn bạn thiết kế giao diện người dùng.
Thẻ đi phương tiện công cộng
Hiển thị nút Thêm vào Google Wallet trên màn hình ứng dụng xác nhận, trang web hoặc email. Bạn nên đặt nút Thêm vào Google Wallet ở nơi người dùng truy cập vào thẻ/vé phương tiện công cộng trong ứng dụng hoặc trang web của bạn.
Sử dụng tên sản phẩm Google Wallet trong văn bản
Bạn có thể dùng văn bản để cho người dùng biết rằng thẻ đi phương tiện công cộng của họ đã được lưu vào thiết bị.
Viết hoa chữ "G" và "W"
Luôn sử dụng chữ "G" và chữ "W" viết hoa, theo sau là chữ cái viết thường để đề cập đến Google Wallet. Đừng viết hoa toàn bộ tên "Google Wallet", trừ phi bạn muốn tên này khớp với kiểu chữ trong giao diện người dùng.
Không viết tắt Google Wallet
Luôn viết đầy đủ các từ "Google" và "Wallet".
Điều chỉnh cho phù hợp với kiểu trong giao diện người dùng
Đặt "Google Wallet" ở cùng một phông chữ và kiểu chữ như phần còn lại của văn bản trong giao diện người dùng. Không bắt chước kiểu chữ của Google.
Luôn sử dụng phiên bản bản địa hoá của "Google Wallet"
Luôn viết "Google Wallet" trong nội dung bản địa hoá được cung cấp.
Thiết kế
Sử dụng các trường height và size của thẻ HTML g:savetoandroidpay để sửa đổi chiều cao và chiều rộng của các nút Thêm vào Google Wallet. Sử dụng thông số kỹ thuật textsize=large để tăng đáng kể kích thước văn bản và nút cho các trường hợp triển khai trên thiết bị di động hoặc các trường hợp có yêu cầu đặc biệt về giao diện người dùng.
Sử dụng theme để đặt màu cho các nút. Bảng sau đây cho thấy tác động của các chế độ cài đặt này đối với nút Thêm vào Google Wallet.
Nguyên tắc tạo thẻ và vé
Để đảm bảo thẻ và vé của bạn trông đẹp mắt và hoạt động hiệu quả, vui lòng tuân thủ các nguyên tắc sau về giới hạn ký tự, thông báo, màu nền và hình ảnh chính.
Màu nền của thẻ
Bạn có thể đặt màu nền bằng trường hexBackgroundColor. Nếu bạn không đặt giá trị, một thuật toán sẽ phân tích biểu trưng, tìm màu chủ đạo và sử dụng màu đó cho màu nền.
Tránh các vùng "Rực rỡ" có độ rực màu cao (ví dụ: màu xanh lục Neon #00FF00 hoặc màu xanh lơ Thú vị #00FFFF). Những màu này gây mỏi mắt nghiêm trọng và khiến văn bản "loang" hoặc biến mất vào nền. Thay vào đó, hãy dùng một trong những màu được đề xuất.
Các màu được đề xuất
#1a1a1a
#677088
#e8eaed
#f8f9fa
#ffffff
#d6322d
#f78f48
#f9bb2d
#1e7e3b
#216acf
#9147df
#fce8e6
#e6fffa
#e8f0fe
Hình ảnh chính
Trường class.heroImage xuất hiện dưới dạng hình ảnh có chiều rộng đầy đủ bên dưới các trường dữ liệu của thẻ và vé.
Hãy cân nhắc thêm hình ảnh nếu bạn chưa có. Nếu bạn có hình ảnh, hãy đảm bảo tuân thủ các quy cách bên dưới. Nếu bạn không chọn hình ảnh, chúng tôi sẽ hiển thị hình ảnh dự phòng của danh mục thẻ/vé.
Sau đây là danh sách các đề xuất về giao diện người dùng cho hình ảnh chính:
| Nguyên tắc | Nội dung mô tả | ||||||||
|---|---|---|---|---|---|---|---|---|---|
| Loại tệp ưu tiên | PNG. Nếu bạn muốn màu nền của thẻ và vé xuất hiện, hãy sử dụng tệp PNG trong suốt. | ||||||||
| Kích thước đề xuất | 1032x812 px | ||||||||
| Tỷ lệ khung hình | 1032:812 (khoảng 5:4) | ||||||||
| Những việc nên làm và không nên làm |
|
Nội dung
Tiêu đề, phụ đề, nhãn trường và dữ liệu trường: Để tăng khả năng hiểu của người dùng, hãy giữ cho tiêu đề và các trường khác ngắn gọn nhất có thể. Các giới hạn ký tự sau đây áp dụng cho tiếng Anh, nhưng các giới hạn này sẽ được dịch sang các ngôn ngữ khác, dẫn đến trải nghiệm người dùng đa dạng trên các thiết bị và khu vực. Nếu bạn còn băn khoăn, hãy đơn giản hoá nội dung mà vẫn truyền tải được những thông tin chính.
| Trường | Hạn mức |
|---|---|
| Nhãn tiêu đề | < 47 ký tự |
| Nhãn phụ đề | < 88 ký tự |
| Nhãn trường/tiêu đề (ví dụ: Ngày, Nội dung mô tả, Lớp học, Tên hành khách) | < 20 ký tự |
| Nhãn dữ liệu trường (ví dụ: ngày 19 tháng 10 năm 2026, Economy Plus) | < 15 ký tự |
Để đảm bảo dễ đọc, hãy giới hạn dữ liệu ở 2 trường cho mỗi hàng và tối đa 3 hàng nếu có thể.
Thông báo
| Trường | Hạn mức |
|---|---|
| Tiêu đề | < 29 ký tự |
| Nội dung bị thu gọn | < 40 ký tự |
| Nội dung được mở rộng | < 80 ký tự |
Bạn nên tuân thủ giới hạn ký tự để ngăn người dùng có thiết bị nhỏ hoặc cỡ chữ lớn bị cắt bớt nội dung. Hãy tham khảo bài viết Thông báo | Thiết bị di động | Nhà phát triển Android để biết thêm thông tin.
Biểu trưng
Nguyên tắc về hình ảnh biểu trưng
Google Wallet sẽ che biểu trưng của bạn thành hình tròn.
Sau đây là danh sách các đề xuất về giao diện người dùng cho hình ảnh biểu trưng:| Nguyên tắc | Nội dung mô tả |
|---|---|
| Loại tệp ưu tiên | PNG |
| Kích thước tối thiểu | 660 px x 660 px |
| Tỷ lệ khung hình của hình ảnh | 1:1 |
| Tỷ lệ khung hình của ảnh bìa | 1:1 |
| Kích thước pixel thực tế | Điều chỉnh tỷ lệ theo kích thước thiết bị |
| Mặt nạ tròn cho biểu trưng |
Biểu trưng của bạn được che để vừa với thiết kế hình tròn. Đảm bảo rằng biểu trưng của bạn nằm trong Vùng an toàn. Đừng che trước biểu trưng của bạn. Để biểu trưng trong một hình vuông có màu nền tràn lề. Biểu trưng cần có khoảng trống 15% để không bị cắt khi được che bằng mặt nạ. 
|
Google Wallet sẽ che biểu trưng của bạn thành hình tròn.
Nguyên tắc dành cho hình ảnh biểu trưng dạng ngang
Vé xem sự kiện, thẻ lên máy bay, thẻ đi phương tiện công cộng có mã QR, thẻ khách hàng thân thiết, ưu đãi, thẻ quà tặng, thẻ thông thường và thẻ thông thường riêng tư đều hỗ trợ hình ảnh logo có chiều rộng lớn. Sau đây là danh sách các đề xuất về giao diện người dùng cho hình ảnh biểu trưng dạng rộng:
| Nguyên tắc | Nội dung mô tả |
|---|---|
| Loại tệp | PNG trong suốt |
| Kích thước đề xuất | 1280 px x 400 px |
| Kích thước tối thiểu |
400 px cho chiều cao, chiều rộng tương ứng (xem thêm hướng dẫn trong phần tỷ lệ khung hình) Sử dụng hình ảnh rộng, hình chữ nhật. |
| Tỷ lệ khung hình |
16:5 
|
| Màu |
Sử dụng màu rất sáng có độ tương phản cao (chẳng hạn như màu trắng) cho thẻ và vé có nền tối. Sử dụng màu rất tối có độ tương phản cao (chẳng hạn như màu đen) cho thẻ và vé có nền sáng. 
|
Hình ảnh khác
Trường *.imageModulesData.mainImage trong một lớp hoặc đối tượng sẽ xuất hiện dưới dạng hình ảnh có chiều rộng đầy đủ trong thẻ bên dưới hình ảnh chính. Chỉ sử dụng nếu thẻ của bạn cần thêm hình ảnh để người dùng hiểu rõ hơn.
Nguyên tắc bổ sung về hình ảnh
Sau đây là danh sách các đề xuất về giao diện người dùng cho hình ảnh bổ sung:
| Nguyên tắc | Nội dung mô tả |
|---|---|
| Loại tệp ưu tiên | PNG |
| Kích thước tối thiểu |
Chiều rộng 1860 pixel, chiều cao thay đổi. Sử dụng hình ảnh rộng, hình chữ nhật. Để có kết quả tốt nhất, hãy sử dụng hình ảnh có nền màu. |
| Kích thước hiển thị |
Chiều rộng đầy đủ của mẫu và chiều cao tương ứng. 
|
Hình ảnh mã vạch
Một số ngành dọc cho phép sử dụng hình ảnh ở phía trên và phía dưới mã vạch.
Hình ảnh phía trên mã vạch
Sau đây là danh sách các đề xuất về giao diện người dùng cho những hình ảnh phía trên mã vạch:
| Hướng dẫn | Mô tả |
|---|---|
| Loại tệp ưu tiên | PNG |
| Chiều cao tối đa |
20 dp (ở tỷ lệ khung hình tối đa) Kích thước đề xuất là chiều cao 80 px và chiều rộng từ 80 đến 780 px nếu có 2 hình ảnh. Nhờ đó, các thẻ này có thể xuất hiện cạnh nhau. Nếu một hình ảnh là hình vuông và hình ảnh còn lại là hình chữ nhật, thì các hình ảnh cần có kích thước 80x80 px và 780x80 px. |
| Tỷ lệ khung hình |
Không bị giới hạn. Để có chiều cao và chiều rộng tối đa là 20 dp cho một hình ảnh, hãy sử dụng tỷ lệ khung hình 20:1. Nếu bạn chỉ muốn một hình ảnh ở phía trên mã vạch, hãy lấy chiều rộng đầy đủ (không bao gồm khoảng đệm). Hình ảnh cần có kích thước 1600x80 px. |
| Kích thước hiển thị tối đa (một hình ảnh) | Cao 20 dp và rộng 400 dp |
Hình ảnh bên dưới mã vạch
Sau đây là danh sách các đề xuất về giao diện người dùng cho hình ảnh bên dưới mã vạch:
| Hướng dẫn | Mô tả |
|---|---|
| Loại tệp ưu tiên | PNG |
| Chiều cao tối đa |
20 dp (ở tỷ lệ khung hình tối đa) Kích thước nên dùng là cao 80 px và rộng từ 80 đến 1600 px. Nếu là hình vuông, kích thước là 80 x 80 pixel. Nếu là hình chữ nhật, kích thước là 1600x80 pixel. |
| Tỷ lệ khung hình không bị hạn chế. Để có chiều cao và chiều rộng tối đa là 20 dp, hãy sử dụng tỷ lệ khung hình 20:1. | Nếu bạn muốn có hình ảnh có chiều rộng đầy đủ (không bao gồm khoảng đệm), thì hình ảnh phải có kích thước 1600x80 px. |
| Kích thước hiển thị tối đa là cao 20 dp và rộng 400 dp. |
Mô-đun
Mô-đun đại diện cho một nhóm các trường trong một phần cụ thể của mẫu. Bảng sau đây chứa các nguyên tắc về số lượng mô-đun mà bạn phải đưa vào các lớp và đối tượng để đảm bảo thẻ của bạn hiển thị chính xác trong ứng dụng Google Wallet.
| Nguyên tắc | Nội dung mô tả |
|---|---|
imageModulesData
|
Chỉ sử dụng một imageModulesData trong lớp hoặc trong các đối tượng mà bạn tạo.
|
infoModuleData
|
Sử dụng tối đa 2
|
linksModuleData
|
Sử dụng tối đa 4 URI
Bạn có thể có 2 URI |
textModulesData
|
Sử dụng tối đa 2 trường
Bạn có thể có một URI |
infoModuleData
InfoModuleData chứa thông tin về thành viên và thông tin có thể tuỳ chỉnh, đồng thời xuất hiện ở chế độ xem mở rộng. Sử dụng mô-đun này để lưu trữ thông tin như ngày hết hạn, số dư điểm thứ hai hoặc số dư giá trị được lưu trữ.
linksModuleData
Mô-đun đường liên kết chứa các URI đến trang web, số điện thoại và địa chỉ email. Sau đây là danh sách các đề xuất về giao diện người dùng cho mô-đun đường liên kết:
| Hướng dẫn | Ví dụ về chế độ cài đặt | Hình ảnh ví dụ |
|---|---|---|
Sử dụng tiền tố http: khi bạn chỉ định một URI cho một trang web hoặc một vị trí trong Google Maps. Tiền tố này cho phép người tiêu dùng nhấn vào đường liên kết và chuyển đến trang web hoặc xem vị trí trên Google Maps.
Tiền tố này cũng tạo ra biểu tượng của một đường liên kết hoặc bản đồ ở phía trước phần mô tả trong thẻ của bạn.
|
'uri': 'http://maps.google.com/?q=google'
|
|
'uri': 'http://developer.google.com/wallet/'
|
|
|
Sử dụng tiền tố tel: khi bạn xác định số điện thoại. Tiền tố này cho phép người tiêu dùng nhấn vào đường liên kết để quay số. Tiền tố này cũng tạo ra một biểu tượng điện thoại ở trước nội dung mô tả bằng văn bản trên thẻ.
|
'uri': 'tel:6505555555'
|
|
Sử dụng tiền tố mailto: khi bạn xác định địa chỉ email.
Tiền tố này cho phép người tiêu dùng nhấn vào đường liên kết để gửi email đến địa chỉ. Tiền tố này cũng tạo ra biểu tượng email ở trước nội dung mô tả bằng văn bản trên thẻ.
|
'uri': 'mailto:jonsmith@email.com'
|
|
Tiêu đề, nhãn và tên
Viết tiêu đề, nhãn và tên theo kiểu viết hoa chữ cái đầu, sao cho mỗi từ đều bắt đầu bằng một chữ cái viết hoa.
Chính sách nội dung
Nội dung của mỗi trường trong Thẻ và vé phải tuân thủ chính sách nội dung của Payments. Nội dung của các trang web mà bạn tham khảo trong lớp học cũng phải tuân thủ các chính sách này.
Vị trí đặt dữ liệu của nền tảng đối tác
Để đảm bảo người dùng có thể truy cập vào ứng dụng hoặc trang web giàu tính năng của bạn về Thẻ và vé, hãy nhớ kết hợp đường liên kết sâu của ứng dụng hoặc trang web vào thuộc tính linksModuleData.* của lớp hoặc đối tượng Thẻ và vé. Điều này cho phép người dùng chuyển đến nền tảng của bạn từ Thẻ và vé xuất hiện trong Google Wallet. Để xem cách hiển thị, hãy chuyển đến phần thiết kế của các thành phần dọc trong Thẻ và vé.