Nếu bạn đang phát triển cho người dùng ở Nga, vui lòng sử dụng 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 nguyên tắc và thành phần 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ế nhằm giúp bạn tạo hình ảnh và các thành phần 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 dẫn người dùng lưu thẻ/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 API Google Wallet. Các quy trình này xuất hiện trên ứ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ọ. Nút này có thể được dùng 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 nội dung xuống – Android XML Tải nội dung xuống - SVG Tải nội dung xuống - PNGNút Xem trong Google Wallet
Nút Xem trong Google Wallet dùng để liên kết sâu người dùng với ví của họ để xem thẻ và 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.
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 hiển thị 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 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 của 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 đã bản địa hoá
Các nút Google Wallet đã bản địa hoá được cung cấp cho mọi thị trường nơi Wallet được bản địa hoá. Nếu bạn đang phát triển ứng dụng cho người dùng ở những 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 phiên bản đã bản địa hoá của nút này không có ở thị trường của bạn, hãy sử dụng phiên bản tiếng Anh của nút đó.
Các nút Thêm vào Google Wallet có ở 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 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, Anh, Hoa Kỳ), tiếng Estonia, tiếng Philippines, tiếng Phần Lan, tiếng Pháp (Canada), tiếng Đức, tiếng Hy Lạp, tiếng Bồ Đào Nha, tiếng Phần Lan, tiếng Pháp (Canada), tiếng Pháp, tiếng Hy Lạp,
Tên đã bản địa hoá
Để người dùng dễ hiểu, 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. Đừng tạo phiên bản bản địa hoá của riêng bạn 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 |
| Cộng hoà Séc | |
| Hy Lạp | Tìm hiểu Google |
| Hong Kong | Google 錢包 |
| Lithuania | Google Pinigin Hiển thị |
| Ba Lan | Chuyển đổi và đóng góp thành công của Google |
| Bồ Đào Nha | Carteira da Google |
| Romania | Google ở Porto |
| Slovakia | Cộng đồng Google |
| Đài Loan | Google 錢包 |
| Thổ Nhĩ Kỳ | Google Cüzdan |
| UAE | محفظة Google |
| Ukraina | Tiếng Google |
|
Hoa Kỳ (tiếng Tây Ban Nha)
*Dùng tên này tại 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 Add to Google Wallet (Thêm vào Google Wallet) cho vừa với bố cục của bạn. Nếu có các nút khác trên trang, nút Thêm vào Google Wallet cần phải có kích thước bằng hoặc lớn hơn. Đừng làm nút Thêm vào Google Wallet nhỏ hơn các nút khác.
Phong cách
Nút Thêm vào Google Wallet có hai biến thể: chính và thu gọn. Nút Add to Google Wallet (Thêm vào Google Wallet) chỉ có màu đen. Các phiên bản đã bản địa hoá của nút này được cung cấp. Đừng tạo nút bằng văn bản đã bản địa hoá của riêng bạn.
| Chính | Mật độ cao |
|---|---|
|
|
| Dùng nút chính trên nền trắng và sáng. | Sử dụng nút thu nhỏ nếu không có đủ không gian cho chiều rộng chính hoặc toàn bộ chiều rộng. |
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 cạnh của nút Add to Google Wallet (Thêm vào Google Wallet). Đảm bảo rằng không gian trống không bao giờ bị ảnh hưởng bởi đồ hoạ hoặc văn bản.
Chiều cao tối thiểu
Tất cả các nút Add to Google Wallet (Thêm vào Google Wallet) cần phải có chiều cao tối thiểu là 48 dp.
Những việc nên làm và việc không nên làm
| Dos | Việc không nên làm |
|---|---|
| Nên: Chỉ sử dụng các nút Thêm vào Google Wallet do Google cung cấp. | Không nên: 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 của 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 kích thước của các nút Thêm vào Google Wallet bằng hoặc lớn hơn các nút khác. | Không nên: Thay đổi màu của nút. |
| Nên: Giữ nguyên tỷ lệ nút khi đổi kích thước nút Thêm vào Google Wallet. | Không nên: Thay đổi kích thước của nút theo tỷ lệ. |
| Nên: Sử dụng phiên bản đã bản địa hoá được cung cấp của các nút. | Không nên: Tạo phiên bản đã bản địa hoá của riêng nút này. |
Các phương pháp hay nhất cho vị trí nút
Hiện nút Add to Google Wallet (Thêm vào Google Wallet) trên màn hình của ứ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 để định hướng thiết kế giao diện người dùng.
Thẻ lên máy bay
Hiển thị nút Thêm vào Google Wallet ở cuối quy trình mua hoặc trên màn hình của ứ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 để người dùng có thể truy cập vào thẻ và vé của họ trong ứng dụng hoặc trang web của bạn.
Sử dụng tên sản phẩm Google Wallet ở dạng văn bản
Bạn có thể sử dụng văn bản để cho người dùng biết rằng Thẻ lên máy bay của họ được lưu vào thiết bị của họ.
Viết hoa chữ cái "G" và "W"
Luôn sử dụng chữ hoa "G" và chữ "W", theo sau là chữ thường để chỉ Google Wallet. Không viết hoa tên đầy đủ "Google Wallet" trừ khi tên này phù hợp với kiểu chữ trong giao diện người dùng của bạn.
Không viết tắt Google Wallet
Luôn viết 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 của bạn
Đặt "Google Wallet" theo cùng kiểu phông chữ và kiểu chữ với phần còn lại của văn bản trong giao diện người dùng của bạn. Không được 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 bản sao được 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.
Dùng theme để đặt màu cho các nút. Bảng sau đây cho biết các chế độ cài đặt này ảnh hưởng như thế nào đến nút Thêm vào Google Wallet.
Biểu tượng
Nguyên tắc về hình ảnh biểu trưng
Google Wallet che biểu trưng của bạn thành hình tròn.
Sau đây là danh sách đề xuất về giao diện người dùng cho hình ảnh biểu trưng:| Nguyên tắc | 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 hình minh hoạ | 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ạ hình tròn của biểu trưng |
Biểu trưng của bạn được che khuất để vừa với một thiết kế hình tròn. Đảm bảo rằng biểu trưng của bạn nằm vừa trong Vùng an toàn. Đừng để biểu trưng của bạn bị che khuất trước. Để biểu trưng ở dạng hình vuông với màu nền tràn lề. Biểu trưng cần có lề 15% để không bị cắt khi bị che khuất. 
|
Google Wallet che biểu trưng của bạn thành hình tròn.
Nguyên tắc về hình ảnh biểu trưng rộng
Hình ảnh biểu trưng rộng được hỗ trợ bởi vé xem sự kiện, thẻ lên máy bay, thẻ đi phương tiện công cộng bằng mã QR, thẻ khách hàng thân thiết, ưu đãi, thẻ quà tặng, thẻ và vé chung và thẻ và vé riêng tư chung. Sau đây là danh sách đề xuất về giao diện người dùng cho hình ảnh biểu trưng rộng:
| Nguyên tắc | Mô tả |
|---|---|
| Loại tệp ưu tiên |
PNG Sử dụng hình ảnh có màu nền để có kết quả tốt nhất (bạn nên sử dụng cùng màu với màu nền của thẻ) |
| 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 là tỷ lệ (xem thêm hướng dẫn trong phần tỷ lệ khung hình được đề xuất)
Sử dụng hình ảnh hình chữ nhật, rộng. |
| Tỷ lệ khung hình được đề xuất |
Nếu bạn không đặt tỷ lệ khung hình đề xuất cho hình ảnh, thì hình ảnh sẽ được đổi kích thước cho vừa với tỷ lệ khung hình của không gian tiêu đề đã cung cấp. Sơ đồ dưới đây trình bày chi tiết cách đổi kích thước thành phần hình ảnh dựa trên tỷ lệ khung hình. 
|
Màu nền thẻ
Bạn có thể đặt màu nền bằng trường hexBackgroundColor. Nếu bạn không đặt giá trị này, 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.
Hình ảnh chính
Trường class.heroImage xuất hiện dưới dạng biểu ngữ có chiều rộng đầy đủ trên
phần nội dung thẻ.
Nguyên tắc về hình ảnh chính
Sau đây là danh sách đề xuất về giao diện người dùng cho hình ảnh chính:
| Nguyên tắc | Mô tả |
|---|---|
| Loại tệp ưu tiên | PNG |
| Kích thước đề xuất |
1032 x 336 pixel Sử dụng hình ảnh hình chữ nhật, rộng. Sử dụng hình ảnh có nền màu để có kết quả tốt nhất. |
| Tỷ lệ khung hình | 3:1 trở lên |
| Kích thước hiển thị |
Chiều rộng đầy đủ của thẻ và chiều cao tỷ lệ. 
|
Hình ảnh có chiều rộng đầy đủ
Trường *.imageModulesData.mainImage trong một lớp hoặc đối tượng xuất hiện dưới dạng hình ảnh có chiều rộng đầy đủ khi truyền.
Nguyên tắc về hình ảnh có chiều rộng đầy đủ
Sau đây là danh sách đề xuất về giao diện người dùng cho hình ảnh có chiều rộng đầy đủ:
| Nguyên tắc | Mô tả |
|---|---|
| Loại tệp ưu tiên | PNG |
| Kích thước tối thiểu |
1860 px rộng, chiều cao thay đổi. Sử dụng hình ảnh hình chữ nhật, rộng. Sử dụng hình ảnh có nền màu để có kết quả tốt nhất. |
| Tỷ lệ khung hình | Biến |
| Kích thước hiển thị |
Chiều rộng đầy đủ của mẫu và chiều cao tỷ lệ.
|
| Sử dụng cùng bảng phối màu mà bạn sử dụng cho biểu trưng của mình. |
Hình ảnh mã vạch
Một số ngành dọc nhất định cho phép 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
Dưới đây là danh sách đề xuất về giao diện người dùng cho các hình ảnh phía trên mã vạch:
| Đường căn | Nội dung 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à cao 80 px và rộng 80-780 px nếu có 2 hình ảnh. Thao tác này cho phép chúng nằm 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. Đối với chiều cao và chiều rộng tối đa của một hình ảnh là 20 dp, 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 toàn bộ chiều rộng (không bao gồm khoảng đệm). Hình ảnh cần phải có kích thước 1600x80 px. |
| Kích thước tối đa trên màn hình (một hình ảnh) | 20 dp cao và 400 dp |
Hình ảnh bên dưới mã vạch
Sau đây là danh sách đề xuất về giao diện người dùng cho hình ảnh bên dưới mã vạch:
| Đường căn | Nội dung 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à cao 80 px và rộng 80-1600 px. Nếu là hình vuông, hãy sử dụng 80x80 px. Nếu là hình chữ nhật, hãy sử dụng 1600x80 px. |
| Tỷ lệ khung hình không bị giới hạn. Đối với 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 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à 20 dp cao và 400 dp. |
Mô-đun
Một 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 của mình để đảm bảo rằng thẻ của bạn hiển thị chính xác trong ứng dụng Google Wallet.
| Nguyên tắc | Mô tả |
|---|---|
imageModulesData
|
Chỉ sử dụng một imageModulesData trong lớp hoặc trong các đối tượng bạn tạo.
|
infoModuleData
|
Hãy sử dụng tối đa 2
|
linksModuleData
|
Hãy sử dụng tổng cộ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 thành viên và thông tin có thể tuỳ chỉnh, đồng thời xuất hiện trong khung hiển thị 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ị đã lưu trữ.
linksModuleData
Mô-đun liên kết chứa các URI đến trang web, số điện thoại và địa chỉ email. Dưới đây là danh sách đề xuất về giao diện người dùng cho mô-đun đường liên kết:
| Đường căn | Chế độ cài đặt mẫu | Hình ảnh ví dụ |
|---|---|---|
Sử dụng tiền tố http: khi bạn gán 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 chạm vào đường liên kết và chuyển đến trang web hoặc xem vị trí trong Google Maps.
Tiền tố này cũng tạo ra một biểu tượng của đường liên kết hoặc bản đồ ở phía trước
nội dung 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 một 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 của một chiếc điện thoại ở phía 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 một đị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 một biểu tượng của email ở phía 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 bằng cách viết hoa chữ cái đầu tiên để mỗi từ 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 từng trường trong Thẻ và vé phải tuân thủ Chính sách nội dung thanh toán. Nội dung của các trang web mà bạn tham chiếu trong lớp học này cũng phải tuân thủ các chính sách này.
Vị trí dữ liệu trên 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 nhiề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 hoặc trang web của ứng dụng của bạn trong thuộc tính linksModuleData.* của lớp hoặc đối tượng của Thẻ và vé đó. Việc 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 ngành dọc Pass.