Khi thiết kế giao diện người dùng, đôi khi bạn sẽ tự hỏi liệu giao diện dạng thẻ hay dạng danh sách sẽ tốt hơn.
Đặc biệt trong giao diện người dùng trò chơi, có rất nhiều trường hợp bạn cần tạo màn hình dạng danh sách, chẳng hạn như màn hình chọn màn chơi, danh sách nhân vật, danh sách nhiệm vụ và màn hình thu thập phần thưởng.
Nếu bạn chỉ đưa ra quyết định dựa trên ấn tượng trực quan mỗi lần, bạn có thể sẽ tạo ra những màn hình khó sử dụng về sau.
Vậy, chúng ta nên đưa ra quyết định đó như thế nào?
Nói một cách đơn giản, điều đầu tiên cần xem xét là người chơi muốn làm gì trên màn hình đó .
Sự khác biệt giữa hiển thị dạng thẻ và dạng danh sách không chỉ là khác biệt về hình thức; đó là sự khác biệt về thiết kế nhằm phù hợp với hành động của người chơi.
Lần này, tôi sẽ tóm tắt những điểm khác biệt giữa giao diện người dùng dạng thẻ và dạng danh sách trong game, cùng với một số mẹo để sử dụng chúng hiệu quả.
Giao diện người dùng dạng thẻ là gì?
Giao diện người dùng dạng thẻ là một mẫu giao diện hiển thị hình ảnh, tiêu đề, chỉ báo trạng thái và các yếu tố khác dưới dạng một khối duy nhất.
Vì mỗi mục xuất hiện như một khối độc lập, nên nó giúp người dùng dễ dàng nắm bắt thông tin trực quan.
Các nguyên tắc chung về giao diện người dùng cũng nêu rõ rằng thẻ (card) phù hợp để hiển thị một thông tin duy nhất hoặc làm điểm truy cập vào màn hình chi tiết.
Về giao diện người dùng trong game, chúng là định dạng tiện lợi để sắp xếp các yếu tố như màn chơi, nhân vật, trang bị và đội hình.
Ưu điểm tuyệt vời của các loại thẻ là chúng rất dễ xem và lựa chọn .
Ngay cả khi bạn chưa quyết định chọn một món đồ cụ thể nào, bạn vẫn có thể dễ dàng thu hẹp lựa chọn của mình bằng cách xem hình ảnh, màu sắc, độ hiếm và cảm nhận tổng thể của các thẻ.
Giao diện người dùng dạng danh sách là gì?
Giao diện người dùng dạng danh sách là một mẫu giao diện nhóm các biểu tượng, văn bản, số, nút, v.v., thành các hàng riêng biệt và sắp xếp chúng theo chiều dọc.
Đặc điểm nổi bật của nó là cấu trúc của mỗi mục đều nhất quán, giúp dễ dàng so sánh thông tin nhanh chóng và tìm thấy mục cần thiết.
Đây cũng là một kỹ thuật thiết kế giao diện người dùng phổ biến được sử dụng để sắp xếp thông tin tương tự một cách hiệu quả.
Trong giao diện người dùng trò chơi, các ví dụ điển hình bao gồm danh sách nhiệm vụ, màn hình thu thập phần thưởng, màn hình nâng cấp kỹ năng và màn hình cài đặt.
Ưu điểm của định dạng danh sách nằm ở sự dễ dàng tìm kiếm và so sánh .
Nó đặc biệt hữu ích khi người chơi có một mục tiêu cụ thể, chẳng hạn như tìm kiếm một thứ gì đó, kiểm tra số liệu hoặc điều kiện, hoặc trực tiếp thao tác dữ liệu.
Các trường hợp giao diện người dùng dựa trên thẻ phù hợp với giao diện người dùng trò chơi.
Các trò chơi dựa trên thẻ bài phù hợp với những trường hợp người chơi chưa quyết định sẽ chọn gì .
Ví dụ, hãy xem xét màn hình chọn màn chơi.
Khi người chơi mở màn hình này, họ thường tự hỏi nên chơi màn nào tiếp theo. Một màn hình có hình thu nhỏ và các thẻ thể hiện không khí của các màn chơi sẽ trực quan hơn so với một màn hình chỉ có văn bản.
Điều tương tự cũng áp dụng cho danh sách nhân vật và danh sách trang bị.
Trong trò chơi, không chỉ hiệu năng mà cả ngoại hình và độ hiếm cũng là những yếu tố quan trọng trong việc ra quyết định. Hệ thống thẻ bài giúp dễ dàng hiển thị hình minh họa, thuộc tính, huy hiệu trạng thái và nhiều thông tin khác cùng một lúc, giúp truyền tải thông tin và thu hút người chơi một cách hiệu quả hơn.
Ngoài ra, trên màn hình chuyển đổi đội hình, việc sắp xếp các thẻ có hình ảnh các nhân vật chính giúp dễ dàng nhận biết nhanh chóng đội hình nào đang được sử dụng.
Vì vậy, định dạng thẻ rất phù hợp với màn hình nơi người dùng có thể khám phá và lựa chọn các mục .
Các trường hợp giao diện dạng danh sách phù hợp với giao diện người dùng trong game.
Mặt khác, bố cục dạng danh sách phù hợp với những trường hợp người chơi mở màn hình với một mục đích rõ ràng .
Ví dụ, hãy xem danh sách nhiệm vụ.
Người chơi mở nó ra với mục đích tìm hiểu xem có nhiệm vụ nào họ có thể hoàn thành và liệu họ có thể nhận được phần thưởng hay không. Trong những trường hợp như vậy, điều quan trọng hơn là tên nhiệm vụ, tiến độ, phần thưởng và điều kiện nhận phần thưởng phải được hiển thị rõ ràng nhanh chóng hơn là ấn tượng trực quan.
Màn hình đổi thưởng là một ví dụ khác.
Bạn kiểm tra những gì mình có thể nhận được và số lượng, sau đó thực hiện tất cả các thao tác cần thiết cùng một lúc nếu cần. Trong quá trình này, định dạng danh sách được sắp xếp theo cùng một kiểu sẽ dễ nhìn hơn so với định dạng thẻ.
Màn hình nâng cấp kỹ năng là một ví dụ khác cho thấy định dạng danh sách rất phù hợp.
Vì bạn muốn so sánh tên kỹ năng, cấp độ, hiệu ứng và chi phí cần thiết cạnh nhau, định dạng danh sách với độ rõ nét trực quan cao sẽ giúp việc đưa ra quyết định dễ dàng hơn. Việc nhiều màn hình cài đặt sử dụng định dạng danh sách cũng là vì lý do tương tự.
Nói cách khác, bố cục dạng danh sách phù hợp với các màn hình nơi người dùng tìm kiếm, kiểm tra và sau đó tương tác trực tiếp với các mục .
Làm thế nào để phân biệt giữa giao diện người dùng dạng thẻ và giao diện người dùng dạng danh sách?
Vậy, khi bạn thực sự không chắc chắn, bạn nên tìm kiếm thông tin ở đâu?
Tôi nghĩ cách dễ nhất để đưa ra quyết định là xem xét bốn điều sau đây theo thứ tự.
1. Người chơi muốn xem hay tìm kiếm?
Đây là điều quan trọng nhất.
Nếu bạn chưa quyết định được ứng viên nào và muốn lựa chọn dựa trên các yếu tố như không khí và ngoại hình, định dạng dạng thẻ
sẽ phù hợp. Mặt khác, nếu bạn muốn tìm kiếm thông tin cụ thể hoặc so sánh các tiêu chí, định dạng dạng danh sách sẽ thích hợp hơn.
2. Liệu khía cạnh hình ảnh có phải là yếu tố quyết định trong việc lựa chọn hay không?
Nếu hình ảnh và ấn tượng thị giác là quan trọng, định dạng dạng thẻ sẽ có giá trị hơn.
Ngược lại, nếu văn bản và số liệu là trọng tâm chính, định dạng dạng danh sách sẽ dễ sử dụng hơn.
3. Lượng thông tin cho mỗi mục có nhất quán không?
Nếu thông tin có cùng định dạng, định dạng danh sách sẽ dễ sắp xếp hơn.
Ngược lại, nếu thông tin bạn muốn hiển thị có sự khác biệt nhỏ giữa các mục, định dạng thẻ sẽ dễ cấu trúc hơn.
4. Hoạt động chính là xem chi tiết hay thực hiện thao tác tại chỗ?
Nếu tương tác chính chỉ đơn giản là chạm vào các vật phẩm để xem chi tiết, hệ thống dạng thẻ là hoàn toàn ổn.
Tuy nhiên, nếu có nhiều thao tác như nhận, tăng cường và trang bị vật phẩm cho mỗi danh mục, hệ thống dạng danh sách thường dễ sử dụng hơn.
Những điểm cần lưu ý trong quá trình triển khai
Dù bạn chọn định dạng nào, độ dễ sử dụng cuối cùng sẽ phụ thuộc vào các chi tiết.
Trước hết, sự dễ dàng khi chạm là yếu tố quan trọng.
Hướng dẫn của Apple khuyến nghị vùng chạm có kích thước 44x44pt, và Android khuyến nghị 48dp trở lên. Hơn nữa, WCAG 2.2 quy định kích thước mục tiêu tối thiểu là 24×24 pixel CSS cho đầu vào con trỏ. Ngay cả khi giao diện người dùng trông đẹp mắt, một giao diện khó chạm vẫn có thể gây căng thẳng.
Tiếp theo, trong định dạng danh sách, điều quan trọng là phải đảm bảo thông tin được sắp xếp theo cùng một thứ tự
. Việc đặt cùng loại thông tin ở cùng một vị trí trên mỗi dòng sẽ giảm sự di chuyển của mắt và giúp thông tin dễ đọc hơn nhiều.
Với bố cục dạng thẻ, điều quan trọng là không nên nhồi nhét quá nhiều thông tin
. Mặc dù thẻ rất tiện lợi, nhưng việc nhét hình ảnh, văn bản, huy hiệu, thanh tiến độ và nút bấm cùng một lúc có thể nhanh chóng khiến chúng khó đọc. Tốt nhất là nên giới hạn thông tin trên mỗi thẻ ở mức những thông tin bạn muốn hiển thị nhanh chóng.
bản tóm tắt
Sự khác biệt giữa giao diện người dùng dạng thẻ và dạng danh sách trong thiết kế trò chơi không chỉ nằm ở hình thức trực quan.
Việc lựa chọn nên phụ thuộc vào cách người chơi tương tác với màn hình.
Bố cục dạng thẻ phù hợp với màn hình nơi người dùng duyệt và chọn các mục.
Bố cục dạng danh sách phù hợp với màn hình nơi người dùng tìm kiếm, so sánh và tương tác với các mục.
Nếu bạn không chắc chắn, trước tiên hãy xem xét mục tiêu mà người chơi muốn đạt được trên màn hình này
. Chỉ cần nhìn nhận từ góc độ đó thôi cũng sẽ giúp bạn dễ dàng hơn trong việc xác định xem nên sử dụng thẻ bài hay danh sách bài.
