Nếu bạn đang phát triển cho người dùng ở Nga và Nhật Bản, vui lòng sử dụng các nút "Lưu vào điện thoại" vì Ví Google không 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 RU và JP, vui lòng cập nhật nút Thêm vào Ví Google bằng cách tải các tài sản xuống dưới đây.
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 để chúng trông đẹp mắt trong ứng dụng Google Wallet.
Nút Thêm vào Ví Google
Nút Thêm vào Ví Google sẽ đượ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 vào ví. Nút Thêm vào Ví Google phải gọi một trong các quy trình của API Ví Google. Các quy trình này sẽ 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ọ. Nút này có thể được dùng trong ứng dụng, trang web hoặc email.
Thành phần
Nút Thêm vào Ví Google hiện có ở định dạng XML XML, SVG và PNG.
Tải tài sản xuống – Android XML Tải tài sản xuống – SVG Tải tài sản xuống – PNGMọi nút Thêm vào Ví Google xuất hiện trên trang web, ứng dụng hoặc email liên lạc của bạn đều phải tuân thủ nguyên tắc về 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 ở:
- 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 các nút
- Không gian trống
Các nút đã bản địa hóa
Các nút Google Wallet được bản địa hóa được cung cấp cho tất cả các thị trường mà Wallet khả dụng. Nếu bạn đang phát triển cho người dùng ở những thị trường này, hãy luôn sử dụng các nút ở trên. Đừng tạo phiên bản riêng của nút Thêm vào Ví Google. Nếu phiên bản đã bản địa hoá của nút này không có trên thị trường, hãy sử dụng phiên bản tiếng Anh của nút.
Các ngôn ngữ có thể sử dụng trong các ngôn ngữ như sau là tiếng Việt:
Tên đã bản địa hoá
Để giúp người dùng hiểu rõ hơn, tên sản phẩm Google Wallet được bản địa hoá tại 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á dưới đây cho web, email và bản in. Không tạo phiên bản "Ví Google" được bản địa hoá theo cách của riêng bạn. Nếu thị trường của bạn không được liệt kê dưới đây, hãy sử dụng "Ví Google" bằng tiếng Anh.
| Quốc gia | Tên |
|---|---|
| Belarus | Google Кошелек |
| Brazil | Carteira do Google |
| Chile | Billetera de Google |
| Séc | Google Tài liệu |
| Hy Lạp | |
| Hong Kong | Google 錢包 |
| Lithuania | Google Pinigin ảnh |
| Ba Lan | Portfel Google |
| Bồ Đào Nha | Carteira da Google |
| Romania | Google Porto |
| Slovakia | |
| Đài Loan | Google 錢包 |
| Thổ Nhĩ Kỳ | Google Cüzdan |
| UAE | trưng bày thông tin của Google |
| Ukraina | Google аманеativeь |
|
Hoa Kỳ (tiếng Tây Ban Nha)
*Sử dụng tên này tại Hoa Kỳ nếu giao diện người dùng của bạn là 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 Ví Google 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, nút Thêm vào Ví Google cần có kích thước bằng hoặc lớn hơn. Đừng làm cho nút Thêm vào Ví Google nhỏ hơn các nút khác.
Kiểu
Nút Thêm vào Ví Google có hai biến thể: chính và ngưng tụ. Nút Thêm vào Ví Google chỉ có màu đen. Cung cấp các phiên bản đã bản địa hoá của nút. Đừ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 |
|---|---|
|
|
| Sử dụng nút chính trên nền trắng và sáng. | Sử dụng nút thu gọn nếu không có đủ không gian cho chiều rộng chính hoặc chiều rộng đầy đủ. |
Không gian trống
Luôn giữ khoảng cách trống tối thiểu là 8 dp ở tất cả các cạnh của nút Thêm vào Ví Google. Đảm bảo rằng không gian trống không bị vỡ với đồ hoạ hoặc văn bản.
Chiều cao tối thiểu
Mọi nút Thêm vào Ví Google đều 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
| Nên làm | Không |
|---|---|
| Việc nên làm: Chỉ sử dụng các nút Thêm vào Ví Google do Google cung cấp. | Đừng: Tạo nút Thêm vào Ví Google 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 theo bất kỳ cách nào trong nút. |
| Nên: Sử dụng cùng một kiểu nút trên toàn bộ trang web của bạn. | Đừng: Giảm kích thước các nút Thêm vào Ví Google nhỏ hơn các nút khác. |
| Do: Hãy đảm bảo rằng kích thước của các nút Add to Google Wallet (Thêm vào Ví Google) vẫn bằng hoặc lớn hơn các nút khác. | Không: Thay đổi màu nút. |
| Việc nên làm: Giữ nguyên tỷ lệ nút khi thay đổi kích thước các nút Thêm vào Ví Google. | Cần tránh: Mở rộng nút này miễn phí. |
| Nên: Sử dụng phiên bản đã bản địa hoá của các nút. | Don&hl=vi: Tạo phiên bản đã bản địa hoá của nút. |
Các phương pháp hay nhất về vị trí nút
Hiện nút Thêm vào Ví Google trên màn hình ứng dụng, trang web hoặc email xác nhận. 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 của bạn.
Thẻ khách hàng thân thiết, Thẻ quà tặng, Ưu đãi
Hiển thị nút Thêm vào Ví Google trên màn hình xác nhận. Bạn cũng có thể hiển thị nút này trên trang web hoặc ứng dụng của mình hoặc đưa nút này vào email có liên quan.
Việc sử dụng tên sản phẩm Google Wallet trong 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ẻ khách hàng thân thiết của họ sẽ được lưu vào thiết bị của họ.
Viết hoa các chữ cái "G" và "W"
Luôn sử dụng &&tt Không viết hoa tên đầy đủ "Google Wallet" trừ khi tên đó khớp với kiểu đánh máy 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à "Ví;"
Khớp với kiểu trong giao diện người dùng
Đặt "Ví Google" có cùng 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. Đừng bắt chước kiểu đánh máy 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 đã bản địa hoá được cung cấp.
Thiết kế
Hãy 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 Ví Google. Hãy sử dụng thông số kỹ thuật textsize=large để tăng đáng kể kích thước của văn bản và nút đối với những cách triển khai cho 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 của các nút. Bảng sau đây cho thấy mức độ ảnh hưởng của các chế độ cài đặt này đối với nút Thêm vào Ví Google.
Biểu tượng
Ví Google che biểu tượng của bạn thành một hình tròn.
Nguyên tắc về hình ảnh biểu trưng
Sau đây là danh sách các đề xuất 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 ưa thích | 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 tác phẩm nghệ thuật | 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 biểu trưng |
Biểu trưng của bạn bị che kín để vừa với một thiết kế hình tròn. Hãy đảm bảo rằng biểu trưng của bạn nằm vừa vặn trong Khu vực an toàn. Đừng che giấu biểu tượng của bạn. Để biểu tượng ở một hình vuông có màu nền tràn lề. Biểu tượng cần có lề 15% để biểu tượng không bị cắt khi che. 
|
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ị, thì một thuật toán sẽ phân tích biểu tượng, tìm màu chủ đạo và sử dụng màu đó để làm màu nền.
Hình ảnh chính
Trường class.heroImage sẽ xuất hiện dưới dạng biểu ngữ có chiều rộng đầy đủ trên phần nội dung của 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 | Nội dung mô tả |
|---|---|
| Loại tệp ưa thích | PNG |
| Kích thước đề xuất |
1032x336 px Sử dụng hình ảnh rộng, hình chữ nhật. 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ương ứng. 
|
Hình ảnh có chiều rộng đầy đủ
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ẻ và vé.
Nguyên tắc về hình ảnh có chiều rộng đầy đủ
Dưới đây là danh sách các đề xuất về giao diện người dùng cho hình ảnh có chiều rộng đầy đủ:
| Nguyên tắc | Nội dung mô tả |
|---|---|
| Loại tệp ưa thích | PNG |
| Kích thước tối thiểu |
Chiều rộng có thể thay đổi, 1860 px. Sử dụng hình ảnh rộng, hình chữ nhật. 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 một 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 bên trên và bên dưới mã vạch.
Hình ảnh phía trên mã vạch
Sau đây là danh sách đề xuất về giao diện người dùng cho những hình ảnh phía trên mã vạch:
| Đường căn | Nội dung mô tả |
|---|---|
| Loại tệp ưa thích | PNG |
| Chiều cao tối đa |
20 dp (ở tỷ lệ khung hình tối đa) Kích thước đề xuất cao 80 px và rộng 80-780 px nếu có 2 hình ảnh. Điều này cho phép chúng cạnh nhau. Nếu một hình ảnh là hình vuông và hình còn lại là hình chữ nhật, thì hình ảnh phải có kích thước 80x80 px và 780x80 px. |
| Tỷ lệ khung hình |
Không giới hạn. Để sử dụng chiều cao và chiều rộng tối đa 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 chụp 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 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:
| Đường căn | Nội dung mô tả |
|---|---|
| Loại tệp ưa thích | PNG |
| Chiều cao tối đa |
20 dp (ở tỷ lệ khung hình tối đa) Kích thước đề xuất cao 80 px và rộng 80-1600 px. Nếu vuông, 80x80 px. Nếu là hình chữ nhật, 1600x80 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, hãy sử dụng tỷ lệ khung hình 20:1. | Nếu bạn muốn thêm hình ảnh có chiều rộng đầy đủ (không bao gồm khoảng đệm), 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 biểu thị một nhóm các trường trong một mục 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 rằng thẻ của bạn hiển thị chính xác trong ứng dụng Ví Google.
| 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 bạn tạo.
|
infoModuleData
|
Sử dụng tối đa hai
|
linksModuleData
|
Sử dụng tổng cộng tối đa 4 URI
Trong lớp của bạn có thể có hai URI |
textModulesData
|
Sử dụng tối đa hai trường
Bạn có thể dùng một URI |
infoModuleData
InfoModuleData chứa thông tin thành viên và có thể tuỳ chỉnh, đồng thời xuất hiện trong thành phần 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ị được lưu trữ.
linksModuleData
Mô-đun đường liên kết chứa các URI đến các trang web, số điện thoại và địa chỉ email. Sau đâ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 | Ví dụ về chế độ cài đặt | Hình ảnh ví dụ |
|---|---|---|
Hãy 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 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 gây ra một biểu tượng đườ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/'
|
|
|
Hãy dùng tiền tố tel: khi xác định số điện thoại. Tiền tố này
cho phép người tiêu dùng chạm 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 chiếc điện thoại ở phía trước phần mô tả văn bản trên
thẻ.
|
'uri': 'tel:6505555555'
|
|
Hãy dùng tiền tố mailto: khi xác định một địa chỉ email.
Tiền tố này cho phép người tiêu dùng chạm 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 phần mô tả 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 trong trường hợp viết hoa tiêu đề để 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 đến trong lớp đó cũng phải tuân thủ các chính sách này.
Vị trí 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 có nhiều tính năng về
Thẻ và vé, hãy nhớ tích hợp đường liên kết sâu hoặc trang web
của ứng dụng vào lớp hoặc đối tượng linksModuleData.* của 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ẻ, xuất hiện trong
Ví Google. Để xem cách kết xuất này, hãy chuyển đến các phần thiết kế trong
ngành dọc Thẻ và vé.