Thiết kế nền tảng trò chơi đám mây trên TV Android - Nghiên cứu tình huống thiết kế UI / UX

Đó là một ngày thứ Hai thông thường cho đến khi khách hàng nghĩ ra một dự án mới sẽ được thiết kế trên Android TV. Chúng tôi đã có kinh nghiệm lớn để thiết kế các bố cục UI khác nhau cho Web, Mobile, Tablet và cả POS Systems nhưng đây là lần đầu tiên chúng tôi phải thiết kế một cái gì đó cho TV thông minh. Chúng tôi tò mò thiết kế một cái gì đó mới và đã trả giá.

Luôn luôn có một lần đầu tiên

Lần đầu tiên chúng tôi có một sự phấn khích để tạo ra một thứ như thế này. Chúng tôi đã có sẵn các công cụ của mình, đồng thời chúng tôi cũng bắt đầu thu thập những cảm hứng và dữ liệu cần thiết để thiết kế Ứng dụng Android TV đầu tiên của mình.

Về dự án

Khách hàng nói với chúng tôi yêu cầu; ứng dụng nói về Cloud Gaming Platform. Một cái gì đó nghe có vẻ thực sự mát mẻ và làm cho chúng tôi thực sự hào hứng để làm việc. Chúng tôi đã tiến hành nghiên cứu về người dùng và các tính năng trong Ứng dụng và làm thế nào chúng tôi có thể đại diện cho nó trong Android TV. Điều quan trọng nhất cần xem xét là bố cục Android TV khác biệt so với bố cục web và di động thông thường.

Nguyên tắc Google Nguyên liệu đã giúp chúng tôi bắt đầu với thiết kế.

Điều hướng TV Android

Giao diện và điều khiển TV Android

Điều đầu tiên cần làm là hiểu thiết bị mà người dùng sẽ sử dụng ứng dụng. Chúng tôi hiểu rằng người dùng có các thiết bị đầu vào khác nhau để sử dụng. Nhưng trong trường hợp này, người dùng chủ yếu sẽ sử dụng Android Remote hoặc GamePad để điều hướng. Việc điều hướng là điều chúng tôi thực hiện nghiêm túc vì chúng tôi muốn người dùng điều hướng qua các bước tối thiểu và không nên cảm thấy phức tạp khi sử dụng giao diện.

Tín dụng hình ảnh Google Design

Chúng tôi tuân theo cách bố trí vật liệu tiêu chuẩn vì nó trông quen thuộc với người dùng và dễ điều hướng hơn nhiều. Chúng tôi đã tạo một phần với cuộn ngang (trục X) và người dùng có thể thay đổi phần bằng cuộn dọc (trục Y). Ngăn kéo được giữ trong trường hợp người dùng chọn thay đổi cài đặt, khám phá các danh mục và các chức năng phụ khác.

Cấu trúc thiết kế Artboard cho TV Android

Nghiên cứu

Chúng tôi đã nghiên cứu các nền tảng chơi game hiện tại như Vortex và cũng lấy tham khảo từ các máy chơi game như Xbox và Play Station. Những bố cục đó đã giúp chúng tôi hiểu các giao diện chơi trò chơi và cách dữ liệu được trình bày trong Truyền hình. Chúng tôi cũng đã có một cái nhìn ngắn gọn về các giao diện phổ biến trên Android TV như Netflix và Youtube cho các mẫu bố cục khác nhau và tham chiếu khả năng sử dụng.

Tín dụng hình ảnh Windows Central

Tất cả các ứng dụng tham chiếu mà chúng tôi thấy có biểu ngữ là trọng tâm chính và được thiết kế giống như người dùng có thể dễ dàng điều hướng qua bảng điều hướng 4 hướng. Chúng tôi đã kết luận để giữ phông chữ càng ít càng tốt để cung cấp cho người dùng trải nghiệm điện ảnh quen thuộc và trực quan. Ngoài ra, kích thước phông chữ phải được hiển thị và lớn vì người dùng ngồi cách TV 51010 ft.

Lựa chọn màu sắc

Màu sắc

Chúng tôi luôn yêu thích các khoảng trắng và giao diện tối thiểu trên ứng dụng nhưng trong trường hợp này, màu trắng không phải là màu mà người dùng muốn thấy trên màn hình lớn. Vì vậy, chúng tôi quyết định chọn màu Dark và Matt mà người dùng sẽ ít chú ý hơn. Ngoài ra, nền tối làm nổi bật các biểu ngữ trò chơi và cho nó một cái nhìn trực quan.

Vì ứng dụng dành cho chơi game, chúng tôi dự định giữ một vectơ đa giác ở chế độ nền để cung cấp cho người dùng trải nghiệm thị sai. Màu sắc tối giúp người dùng tập trung vào nội dung của ứng dụng.

Nghiên cứu người dùng

Chúng tôi đã tiến hành nghiên cứu người dùng và phân loại 2 loại cho người dùng.

Phân loại người dùng

John thích khám phá những trò chơi mới trong khi Smith muốn tiếp tục trò chơi tương tự trong một thời gian dài. Vì vậy, với những kết quả này, chúng tôi đã đưa ra các tính năng như Khuyến nghị cho John và các trò chơi gần đây cho Smith. Ngoài ra, bố cục được giữ đơn giản để cả hai có thể điều hướng dễ dàng và chơi trò chơi mà không cần bất kỳ nỗ lực nào.

Giao diện thẻ

Bố cục Thẻ hoàn hảo để cung cấp trải nghiệm điện ảnh cho người dùng. Thẻ đã chọn sẽ làm nổi bật và nâng cao theo thiết kế vật liệu. Chúng tôi giữ Infinite Scrolling cho phần trên cùng chỉ chứa các biểu ngữ của trò chơi mà không có bất kỳ thông tin văn bản nào. Cũng bên dưới đó, chúng tôi giữ các Trò chơi gần đây với bố cục vật liệu và cuộn ngang.

Thiết kế thẻ

Điều quan trọng là cung cấp cho người dùng trải nghiệm điện ảnh tương tự mà các ứng dụng như Netflix, Youtube và các ứng dụng khác cung cấp. Ngoài ra, chúng tôi dự định người dùng sẽ có điều hướng liền mạch thông qua màn hình và các phần.

Kết quả cuối cùng

Cuối cùng, mùa đông đã đến và đó là thời gian cho hành động. Chúng tôi đã phân tích tất cả các khía cạnh và cố gắng thể hiện nó một cách trực quan. Bản đồ tư duy và khung lưới đã được hoàn thành và Giao diện người dùng đã đến lượt. Chúng tôi có tất cả những thứ chúng tôi cần và nó phải được thực thi.

Cấu trúc ứng dụng

Chúng tôi đã có kết quả cho thiết kế mà nó có sở thích chơi game cùng với các biểu ngữ đầy màu sắc. Chúng tôi đã gửi giao diện trong đó có phản hồi tích cực. Chúng tôi cũng đã thử nghiệm nó trên Android TV và nó đã có kết quả như chúng tôi mong đợi.

Giao diện người dùng cuối cùng

Hành trình phiêu lưu và có nhiều bài học để học hỏi. Android TV là thứ mà chúng tôi rất thích thiết kế lại. Thiết kế này đã dạy chúng tôi sự đa dạng trong các thiết bị và trải nghiệm khác nhau để sử dụng nó.

Cảm ơn bạn đã đọc!