Tổng quan
Chương trình thí điểm về phương thức thanh toán do người dùng chọn cho phép các nhà phát triển thử nghiệm việc cung cấp phương thức thanh toán khác bên cạnh hệ thống thanh toán của Google Play. Chương trình này được thiết kế nhằm giúp chúng tôi khám phá khả năng cung cấp lựa chọn này cho người dùng. Mục đích của các nguyên tắc về trải nghiệm người dùng này là duy trì trải nghiệm nhất quán cho người dùng và giúp họ đưa ra quyết định đúng đắn.
Nếu tham gia chương trình thí điểm, bạn phải hiển thị riêng màn hình thông tin và màn hình lựa chọn phương thức thanh toán. Màn hình thông tin chỉ cần xuất hiện lần đầu người dùng bắt đầu giao dịch mua, còn màn hình lựa chọn phương thức thanh toán phải xuất hiện trước mỗi giao dịch mua. Bạn phải triển khai thông báo dành cho người dùng và thông số kỹ thuật của giao diện người dùng trong cả hai màn hình theo những nguyên tắc sau.
Chọn quốc gia và ngôn ngữ
Chọn quốc gia và ngôn ngữ của người dùng để xem các chuỗi văn bản trên giao diện người dùng tương ứng trong phần thông số kỹ thuật thiết kế bên dưới.
Thông tin dành cho người dùng
Màn hình thông tin giúp người dùng hiểu bối cảnh của sự thay đổi và cung cấp thêm thông tin để giúp họ đưa ra lựa chọn đúng đắn.
Thời điểm hiển thị
Người dùng phải thấy màn hình thông tin khi họ bắt đầu giao dịch mua đầu tiên, sau khi bạn thêm hệ thống thanh toán thay thế. Trong những giao dịch mua tiếp theo của người dùng, thông báo này không cần xuất hiện. Màn hình thông tin phải xuất hiện ngay sau khi người dùng thực hiện hành động rõ ràng để bắt đầu giao dịch mua.
Thời điểm hiển thị giá
Bạn cần cho người dùng thấy giá mua một cách rõ ràng trước khi màn hình thông tin hoặc màn hình lựa chọn phương thức thanh toán xuất hiện.
Cách hiển thị
Màn hình thông tin phải xuất hiện trong cửa sổ bảng dưới cùng. Bảng dưới cùng dạng thay thế thì tương tự như một hộp thoại dạng thay thế có hiệu ứng di chuyển từ cuối màn hình lên và được ghim ở dưới cùng. Loại bảng dưới cùng này được đặt lên trên tất cả các thành phần trên giao diện người dùng nằm ở màn hình bên dưới. Một màn tối sẽ che phần màn hình bên dưới để cho người dùng biết rằng màn hình đó sẽ không phản hồi với hành động tương tác.
Hãy tham khảo công cụ Material Design của Google để biết thêm thông tin về cách thiết kế và triển khai các bảng dưới cùng dạng thay thế.
Hành động của người dùng
Hệ thống cần kích hoạt bảng dưới cùng khi người dùng nhấn vào một nút hoặc thành phần trên giao diện người dùng khác trong ứng dụng để bắt đầu giao dịch mua. Có 3 thao tác mà người dùng có thể thực hiện trên màn hình thông tin:
Tiếp tục
Thao tác nhấn vào nút "Tiếp tục" sẽ đóng màn hình thông tin và mở màn hình lựa chọn phương thức thanh toán.
Tìm hiểu thêm
Thao tác nhấn vào nút "Tìm hiểu thêm" sẽ mở bài viết trong Trung tâm trợ giúp của Google trên trình duyệt web.
Đóng
Nếu người dùng muốn đóng bảng dưới cùng và quay lại màn hình bên dưới, thì họ có thể đóng bảng dưới cùng bằng cách:
- Nhấn vào phần bên ngoài vùng chứa của bảng dưới cùng
- Nhấn vào nút "Quay lại" trong hệ thống Android
Màn hình thông tin không cần xuất hiện lại sau khi đã đóng hoặc sau khi người dùng nhấn vào "Tiếp tục".
Ví dụ: Khi người dùng nhấn để mua hàng trong ứng dụng của bạn, nút này sẽ kích hoạt màn hình thông tin.
Thông số kỹ thuật thiết kế
Màn hình thông tin được chia thành 3 thành phần: tiêu đề, thông báo và nút. Cả 3 thành phần đều bắt buộc phải chứa chính xác văn bản và thành phần trên giao diện người dùng được xác định trong các nguyên tắc này. Đừng đưa thêm văn bản hoặc hình ảnh nào vào màn hình này. Tuy nhiên, bạn có thể đưa thêm văn bản hoặc hình ảnh vào các màn hình khác.
- Tiêu đề
- Văn bản 1
- Văn bản 2
- Nút
- Bảng dưới cùng
- Màn nền
Tiêu đề
Văn bản |
Chọn quốc gia và ngôn ngữ
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Phông chữ | Roboto (áp dụng cho tất cả phông chữ) | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Cỡ chữ | 18 sp | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Màu phông chữ | #202124 |
Văn bản 1
Dùng để làm nổi bật những điểm chính được xem là thông tin quan trọng.
Văn bản |
Chọn quốc gia và ngôn ngữ
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Cỡ chữ | 14 sp | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Chiều cao dòng | 20 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Màu phông chữ | #5F6368 |
Văn bản 2
Dùng cho thông tin phụ có mức độ ưu tiên thấp hơn.
Văn bản |
Chọn quốc gia và ngôn ngữ
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Cỡ chữ | 12 sp | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Chiều cao dòng | 16 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Màu phông chữ | #5F6368 |
Nút 1
Văn bản |
Chọn quốc gia và ngôn ngữ
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Căn chỉnh văn bản | Đã căn giữa | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Cỡ chữ | 14 sp | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Độ đậm phông chữ | Medium | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Màu phông chữ | #01875F | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Màu nền | #FFFFFF | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Kích thước | Chiều cao: 36, Chiều rộng: điều chỉnh tỷ lệ theo vùng chứa | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Bán kính góc | 4 dp | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Đường viền | 1 dp, #DADCE0 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Đường liên kết | Các đường liên kết đến bài viết trợ giúp về Google Play |
Nút 2
Văn bản |
Chọn quốc gia và ngôn ngữ
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Căn chỉnh văn bản | Đã căn giữa | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Cỡ chữ | 14 sp | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Độ đậm phông chữ | Medium | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Màu phông chữ | #FFFFFF | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Màu nền | #01875F | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Kích thước | Chiều cao: 36, Chiều rộng: điều chỉnh tỷ lệ theo vùng chứa | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Bán kính góc | 4 dp | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Đường liên kết | Đường liên kết đến Màn hình lựa chọn thanh toán |
Bảng dưới cùng
Kích thước | Chiều cao: biến, chiều rộng: 100% |
Bán kính góc | 8 dp, 8 dp, 0, 0 |
Thông tin khái quát | #FFFFFF |
Khoảng đệm bên trong | Trái: 24 dp, Phải: 24 dp, Trên cùng: 32 dp, Dưới cùng: 24 dp |
Độ nâng | 8 dp |
Khổ ngang
Ở khung hiển thị ngang, bảng dưới cùng sẽ rộng hơn khung hiển thị dọc, còn lại vẫn tuân thủ theo các chức năng và thông số kỹ thuật thiết kế tương tự.
Bảng dưới cùng | Chiều rộng: tối đa 500 dp, Khoảng đệm bên trong: 24 dp |
Tiêu đề | Giống như chế độ xem dọc |
Thông điệp | Giống như chế độ xem dọc |
Nút | Chiều cao: 36, Chiều rộng: điều chỉnh tỷ lệ theo vùng chứa |
Màn hình lựa chọn phương thức thanh toán
Màn hình lựa chọn phương thức thanh toán sẽ cho người dùng thấy 2 tuỳ chọn thanh toán hoàn tất giao dịch mua. Để giúp người dùng đưa ra quyết định đúng đắn, mỗi tuỳ chọn dịch vụ thanh toán cũng sẽ cho họ thấy các phương thức thanh toán có sẵn. Sau khi lựa chọn, người dùng sẽ tiếp tục hoàn tất giao dịch mua thông qua hệ thống thanh toán đó.
Thời điểm hiển thị
Nếu người dùng đã nhìn thấy màn hình thông tin trong một giao dịch mua trước đó, thì màn hình lựa chọn phương thức thanh toán sẽ hiện ngay sau khi người dùng thực hiện hành động rõ ràng để bắt đầu giao dịch mua.
Cách hiển thị
Màn hình lựa chọn phương thức thanh toán sẽ hiện trong một bảng dưới cùng dạng thay thế và áp dụng các thông số kỹ thuật giống như màn hình thông tin.
Minh hoạ bằng hình ảnh tương tự
Bạn cần trình bày các nút của hệ thống thanh toán thay thế và hệ thống thanh toán của Google Play theo cách công bằng cũng như đồng đều. Điều này bao gồm nhưng không giới hạn ở sự đồng đều về kích thước nút, kích thước/kiểu văn bản, mục tiêu nhấn và kích thước biểu tượng. Vui lòng không thêm bất kỳ thay đổi nào khác về văn bản, hình ảnh hoặc kiểu chưa được xác định trong các nguyên tắc này.
Ví dụ: Khi người dùng nhấn để mua hàng trong ứng dụng của bạn, nút này sẽ chỉ kích hoạt màn hình lựa chọn thanh toán sau khi người dùng đã xem màn hình thông tin trong giao dịch mua trước đó.
Thông số kỹ thuật thiết kế
Màn hình lựa chọn phương thức thanh toán có 4 thành phần riêng biệt: tiêu đề, nội dung mô tả, nút dành cho nhà phát triển và nút Google Play. Tất cả các thành phần phải được sử dụng và phải chứa chính xác văn bản cũng như các thành phần trên giao diện người dùng được xác định trong những nguyên tắc này. Bạn không nên đưa thêm văn bản hoặc hình ảnh vào màn hình này, nhưng bạn có thể đưa thêm văn bản và hình ảnh vào các màn hình khác của mình.
Các thành phần hình ảnh cho Google Play và biểu tượng thanh toán hiện có sẵn tại các đường liên kết bên dưới.
Ví dụ: Ở chế độ xem dọc, bảng dưới cùng phải kéo dài 100% tổng chiều rộng màn hình.
- Tiêu đề
- Mô tả
- Nút dành cho nhà phát triển
- Nút Google Play
- Bảng dưới cùng
- Màn nền
Tiêu đề
Văn bản |
Chọn quốc gia và ngôn ngữ
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Phông chữ | Roboto (áp dụng cho tất cả phông chữ) | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Cỡ chữ | 18 sp | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Màu phông chữ | #202124 |
Nội dung mô tả
Văn bản |
Chọn quốc gia và ngôn ngữ
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Cỡ chữ | 14 sp | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Màu phông chữ | #5F6368 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Đường liên kết của văn bản |
Chọn quốc gia và ngôn ngữ
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Đường liên kết đích | Đường liên kết đến trang Trợ giúp của Google Play | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Cỡ chữ | 14 sp | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Trang trí | Gạch dưới | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Màu phông chữ | #5F6368 |
Nút dành cho nhà phát triển
- Biểu tượng ứng dụng
- Tên ứng dụng
- Biểu tượng phương thức thanh toán
- Chỉ báo bổ sung
- Số biểu tượng phương thức thanh toán tối đa
- Chiều rộng 360 dp
- Chiều rộng 480 dp
Biểu tượng phương thức thanh toán
Điều chỉnh tỷ lệ theo chiều rộng màn hình
Vùng chứa nút
Đường viền | 1 pt, #DADCE0 |
Bán kính góc | 4 dp |
Khoảng đệm bên trong | 16 dp, 16 dp, 16 dp, 16 dp |
Biểu tượng ứng dụng
Kích thước | Chiều cao: 24 dp, Chiều rộng: biến |
Tiêu đề
Văn bản | {Tên ứng dụng} |
Cỡ chữ | 14 sp |
Màu phông chữ | #202124 |
Phương thức thanh toán
Kích thước | Chiều cao: 32 dp, Chiều rộng: 20 dp | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Bán kính góc | 2 dp | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Số lượng | Tối đa 5, nếu lớn hơn 5 thì chỉ báo bổ sung sẽ xuất hiện | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Chỉ báo bổ sung |
Chọn quốc gia và ngôn ngữ
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Cỡ chữ | 12 sp | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Màu phông chữ | #5F6368 |
Nút Google Play
- Biểu tượng
- Tiêu đề
- Phương thức thanh toán được chấp nhận
- Chỉ báo bổ sung
Vùng chứa nút
Đường viền | 1 pt, #DADCE0 |
Bán kính góc | 4 dp |
Khoảng đệm bên trong | 16 dp, 16 dp, 16 dp, 16 dp |
Biểu tượng ứng dụng
Thành phần hình ảnh | Lăng kính Google Play |
Kích thước | Chiều cao: 24 dp, Chiều rộng: 24 dp |
Tiêu đề
Văn bản | Google Play |
Cỡ chữ | 14 sp |
Màu phông chữ | #202124 |
Phương thức thanh toán
Thành phần hình ảnh | Đường liên kết | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Chỉ báo bổ sung |
Chọn quốc gia và ngôn ngữ
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Cỡ chữ | 12 sp | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Màu phông chữ | #5F6368 |
Khổ ngang
Ví dụ: Ở khung hiển thị ngang, bảng dưới cùng sẽ rộng hơn so với khung hiển thị dọc, còn lại vẫn áp dụng các chức năng và thông số kỹ thuật thiết kế tương tự.
Bảng dưới cùng | Chiều rộng: tối đa 500 dp, Khoảng đệm bên trong: 24 dp |
Tiêu đề | Giống như chế độ xem dọc |
Thông điệp | Giống như chế độ xem dọc |
Nút | Giống như chế độ xem dọc |
Để biết thêm chi tiết liên quan đến chương trình thí điểm về phương thức thanh toán do người dùng chọn cũng như các câu hỏi thường gặp, vui lòng truy cập vào Trung tâm trợ giúp của chúng tôi.