Các phương pháp hay nhất về thiết kế sau đây giúp đảm bảo mang lại trải nghiệm tối ưu cho người dùng khi chơi trò chơi của bạn trên YouTube trên nhiều thiết bị và nền tảng.
Ngoài các thành phần hệ điều hành, trải nghiệm Playables chủ yếu bao gồm 3 thành phần:
- Hoạt động Playables
- Canvas trò chơi
- Trình đơn và hộp thoại
Các phương pháp hay nhất về thiết kế trò chơi này đưa ra đề xuất về cách xây dựng trò chơi cho canvas trò chơi.
Thay đổi kích thước trò chơi
Đảm bảo trò chơi thích ứng phù hợp với nhiều kích thước và hướng màn hình bằng cách cân nhắc các phương pháp này.
Thay đổi kích thước trò chơi và điều chỉnh giao diện người dùng theo kích thước và tỷ lệ khung hình của canvas.
Sử dụng phương pháp pillarboxing (thêm viền đen ở hai bên) hoặc letterboxing (thêm viền đen ở trên và dưới) nếu trò chơi không thể hoàn toàn thích ứng với kích thước và tỷ lệ khung hình của canvas trò chơi.
Tránh kích hoạt thanh cuộn. Thanh cuộn ảnh hưởng tiêu cực đến cả lối chơi và thao tác điều hướng chung. Lấp đầy canvas mà không khiến trò chơi trở thành trò chơi có thể cuộn trong canvas. Bạn có thể dùng thanh cuộn cho thao tác cuộn có chủ đích, chẳng hạn như khi cuộn qua một danh sách dọc dài trong giao diện người dùng trò chơi. Lý tưởng nhất là trò chơi hoàn toàn thích ứng với khung nhìn.
Chia tỷ lệ trò chơi
Hiển thị rõ ràng (không bị mờ, không bị vỡ hình hoặc không bị kéo giãn) trên nhiều độ phân giải màn hình.
Đảm bảo giao diện người dùng trò chơi (văn bản, biểu tượng) chia tỷ lệ phù hợp khi hiển thị trên cả màn hình có độ phân giải thấp (chẳng hạn như thiết bị di động 360x800) và màn hình có độ phân giải cao (chẳng hạn như màn hình máy tính 3840x2560).
Tránh sử dụng thành phần raster hoá có độ phân giải thấp, vì thành phần này sẽ bị mờ khi chia tỷ lệ cho màn hình lớn.
Kiểu chữ
Đảm bảo dễ đọc trên các thiết bị và kích thước màn hình.
Văn bản xuất hiện trong trò chơi, chẳng hạn như nút, trình đơn và bong bóng thoại, cần phải dễ đọc trên nhiều thiết bị và kích thước màn hình. Bạn có thể đạt được điều này bằng cách tự động chia tỷ lệ và điều chỉnh văn bản hoặc bằng cách cung cấp cho người dùng một chế độ cài đặt để điều chỉnh cỡ chữ.
Nếu văn bản nhỏ hơn 18 pt hoặc nếu văn bản được in đậm và nhỏ hơn 14 pt, hãy đặt tỷ lệ tương phản màu tối thiểu là 4,5:1.
Đối với tất cả các phần văn bản khác, hãy đặt tỷ lệ tương phản màu tối thiểu là 3:1.
Để tham khảo chung, hãy xem WCAG2.1.
 |
 |
| Sử dụng phông chữ có kích thước lớn với độ đậm và độ tương phản vừa đủ để dễ đọc. Trong ví dụ này, tỷ lệ tương phản là 4,48:1. | Tránh sử dụng phông chữ có kích thước nhỏ và màu có độ tương phản thấp. Trong ví dụ này, tỷ lệ tương phản là 3,07:1. |
Tương tác
Phần này trình bày các phương pháp hay nhất về tương tác của người dùng và các phần tử liên quan.
Đích chạm
Tạo đích chạm đủ lớn để người dùng dễ tương tác hơn.
Đảm bảo đích chạm có kích thước ít nhất là 48x48 dp với khoảng cách ít nhất là 8 dp giữa các đích chạm (xem Nguyên tắc thiết kế Material Design) để người dùng dễ tương tác hơn.
Trong ví dụ này, nút được hiển thị trực quan có kích thước 24 dp, trong khi đích chạm ẩn bao gồm 12 dp xung quanh biểu tượng để đạt được đích chạm 48x48 dp.
Thêm khoảng đệm xung quanh biểu tượng và nút để tăng kích thước đích chạm.
Nút
Sử dụng kiểu riêng biệt cho từng trạng thái nút:
- Đang bật
- Đã tắt
- Di chuột (đối với thiết bị nhập không cảm ứng)
- Tập trung
- Đã nhấn
Bạn cũng nên phân biệt các nút theo hệ phân cấp. Ví dụ: nút hành động chính so với nút hành động phụ trong trình đơn Bắt đầu (xem Nguyên tắc thiết kế Material 2 của Google cho nút).
Kiểu riêng biệt giúp phân biệt từng trạng thái nút
Nhập bằng bàn phím
Để tăng khả năng tiếp cận của trò chơi trên các thiết bị và người dùng, hãy hỗ trợ nhập bằng bàn phím cho tất cả các nút điều khiển lối chơi và thao tác điều hướng màn hình ngoài thao tác đầu vào bằng cảm ứng và thao tác đầu vào bằng chuột.
Đối với các trò chơi hỗ trợ nhập bằng bàn phím, hãy cho phép người dùng đóng mọi trình đơn trong trò chơi và hộp thoại bằng phím Esc. Ngoài ra, bạn cũng cần có một nút đóng trực quan (ví dụ: biểu tượng X ở góc trên cùng). Các ví dụ phổ biến về phương thức hoặc hộp thoại là trình đơn Cài đặt , trình đơn Tạm dừng , thông báo lỗi và cửa sổ bật lên thông tin Trợ giúp.
Tránh ánh xạ bất kỳ hành động nào với thao tác nhấn giữ phím Esc, vì thao tác này dùng để thoát khỏi chế độ toàn màn hình trên trình duyệt web dành cho máy tính.
Đối với các trò chơi đã đăng ký trình nghe sự kiện nhấn phím: không sử dụng preventDefault()
với Esc sự kiện phím. Khi ở chế độ toàn màn hình trong Safari, thao tác này sẽ khiến sự kiện nhấn phím được trò chơi sử dụng mà không thoát khỏi chế độ toàn màn hình.
Xúc giác
Khi thích hợp, bạn nên sử dụng phản hồi xúc giác (rung) để giúp trò chơi của bạn trở nên thú vị và sống động hơn.
Khoảnh khắc chính trong trò chơi
Phần này trình bày các khoảnh khắc chính trong trò chơi giúp tạo ra trải nghiệm tuyệt vời cho người chơi.
Hướng dẫn
Thêm một hướng dẫn ngắn gọn hoặc cấp độ làm quen để giúp người chơi mới.
Quá trình làm quen đảm bảo rằng người dùng học được lối chơi cơ bản và những điều cần thiết trong trò chơi để tiếp tục và thưởng thức trò chơi.
Vì Playables được thiết kế để người dùng có thể bắt đầu chơi một cách nhanh chóng và dễ dàng, nên hãy cố gắng giữ cho quá trình làm quen ở mức tối thiểu. Mặc dù không phải trò chơi nào cũng cần có hướng dẫn, nhưng hầu hết các trò chơi đều được hưởng lợi từ một số hình thức làm quen với ứng dụng. Hãy cân nhắc các cơ chế, quy tắc và kỹ năng chính mà người chơi cần biết để chơi thành công và thưởng thức trò chơi.
Hướng dẫn có thể ở định dạng sau:
- Tập hợp các màn hình ở đầu trò chơi (hoặc lý tưởng hơn là được trình bày theo ngữ cảnh trong suốt trò chơi khi thích hợp)
- Cấp độ hướng dẫn thực tế mà người dùng chơi
Tạm dừng
Thông báo rõ ràng trạng thái trò chơi cho người dùng.
Thông báo rõ ràng cho người dùng khi trò chơi bị tạm dừng và cách người dùng có thể tiếp tục trò chơi. Tránh khiến người dùng nghĩ rằng trò chơi đã bị treo hoặc gặp sự cố.
Gắn nhãn rõ ràng trạng thái trò chơi là "đã tạm dừng" và cung cấp một hành động rõ ràng (nút) để tiếp tục trò chơi.
Trận đấu kết thúc
Thông báo cho người dùng rằng họ đã hoàn thành cấp độ cuối cùng hoặc đã kết thúc trò chơi.
Nếu trò chơi có một kết thúc xác định (ví dụ: số lượng cấp độ hữu hạn), hãy thông báo rõ ràng cho người dùng về điều đó. Điều này giúp tránh khiến người dùng nghĩ rằng trò chơi bị hỏng hoặc bị treo. Lý tưởng nhất là trò chơi sẽ ăn mừng và chúc mừng người chơi đã hoàn thành trò chơi.
Âm thanh
Trò chơi có thể chứa các nút điều khiển âm lượng riêng biệt cho hiệu ứng, giọng nói và nhạc nền. Các nút điều khiển có thể bao gồm thanh trượt để điều chỉnh âm lượng hoặc nút chuyển bật/tắt tiếng cho từng hoặc cả hai.
Hỗ trợ tiếp cận
Tính năng hỗ trợ tiếp cận trong thiết kế cho phép người dùng có nhiều khả năng chơi và thưởng thức trò chơi của bạn.
Không giống như thiết kế web và phần mềm, không có nguyên tắc hỗ trợ tiếp cận tiêu chuẩn trong ngành cho thiết kế trò chơi. Để biết một nguồn tài nguyên hữu ích với các nguyên tắc bổ sung về thiết kế trò chơi toàn diện, hãy xem Nguyên tắc hỗ trợ tiếp cận trò chơi. Bạn nên cân nhắc cách áp dụng các nguyên tắc này vào thiết kế trò chơi của mình.