Thiết kế UI trong NieR:Automata
- Hùng Vũ
- May 13, 2019
- 7 min read
Bài viết gốc UI Design in NieR:Automata bởi Hisayoshi Kijima. Dịch bởi Canh Minh Bui.
Xin chào! Tôi là Hisayoshi Kijima, người thiết kế UI và đồ họa máy móc (mecha) cho NieR:Automata. Mặc dù đây không phải là blog nhà phát triển (devblog) đầu tiên của tôi, nhưng là lần đầu tiên tôi viết trở lại từ sau bài về Bayonetta 2. UI của game - viết tắt cho “giao diện người dùng” – phần lớn thường bị bỏ qua, vì thế tôi rất vui khi biết một số fan hâm mộ đọc vài devblog của team NieR:Automata và mong chờ cả bài viết của tôi nữa!
YOKO TARO – Chỉ đạo sản xuất của NieR:Automata – là người rất tỉ mỉ với các game của anh ấy, và UI cũng không ngoại lệ. Tôi muốn giới thiệu công việc về UI của mình thông qua UI của NieR: Automata, và cho các bạn biết thêm về cách làm việc của YOKO nữa.
Điều đầu tiên: Họa sĩ UI thì làm gì
Các game hiện đại ngày nay chứa đầy các thanh máu, khung thoại, các loại menu và cửa sổ hiện lên (pop-up) để cung cấp đủ các thông tin cần thiết. Họa sĩ UI như tôi làm tất cả những thứ này.
Khi tôi thiết kế UI, quy trình thường như sau:
Tìm ra một ý tưởng thiết kế trực quan cho UI
Tạo ra nhiều thiết kế cho menu và các yếu tố khác trên màn hình, đáp ứng đúng các thông số kỹ thuật từ chỉ đạo sản xuất và các nhà thiết kế game
Chuẩn bị dữ liệu cho các thành phần của UI và chuyển cho các lập trình viên (dev, coder) để họ có thể đưa vào game
Hãy thử UI trong game, tìm ra bất kỳ điểm nào cần điều chỉnh hoặc đổi mới; lặp lại cho đến khi bạn đã hoàn thành UI với chất lượng tốt nhất!
Đối với bài này, tôi sẽ tập trung vào 1 và 2 – ý tưởng và thiết kế menu.
Thiết kế ý tưởng UI: Cân bằng giữa khoa học viễn tưởng và giả tưởng
Thế giới của NieR:Automata dựa nhiều vào khoa học viễn tưởng (sci-fi), nhưng phần trước đó trong series (NIER Replicant / Gestalt) có nhiều phong cách nghệ thuật giả tưởng (fantasy) hơn. Khi tôi hình dung ra ý tưởng cho UI của NieR:Automata, tôi đã cố gắng làm cho các yếu tố sci-fi của nó trông như một bản mở rộng tự nhiên nhất có thể cho phong cách fantasy của tựa game đầu tiên.
Tôi đã có sẵn các ý tưởng hình ảnh để vận dụng: UI của game trước; phong cách sci-fi thông thường; 2B; và ý tưởng chung về một thế giới lộng lẫy và suy tàn. Kết hợp tất cả các yếu tố thẩm mỹ đó lại với nhau, tôi đã đi tới ý tưởng chủ đạo cho UI của NieR:Automata: một thiết kế có hệ thống và gọn gẽ, nhưng cũng rất đẹp. Vào thời điểm đó, tôi tin rằng cách tốt nhất để truyền đạt ý tưởng trên là tránh các chi tiết bóng bẩy và tập trung vào việc tạo ra một thiết kế gọn gàng, thanh nhã và phẳng. Nhưng tôi nhanh chóng nhận ra rằng nếu tôi quá bó buộc vào ý tưởng đó, thiết kế cuối cùng sẽ trở nên vô vị.
Tôi quyết định bổ sung vào phần ý tưởng “có hệ thống và gọn gẽ” bằng cách thêm vào phong cách “bản nhạc” tinh tế. Điều này cũng giúp củng cố cảm giác “fantasy” trong thiết kế.
Khi tôi nói tôi là thêm một phong cách “bản nhạc”, ý tôi không phải là bê nguyên vào các đường nét khóa sol; thay vào đó, tôi lấy cảm hứng từ các hình dạng như dòng kẻ, khóa fa và dòng thanh đôi kết thúc các bản nhạc. Thay vì sử dụng trực tiếp các yếu tố âm nhạc, ý tưởng ở đây là thể hiện chúng thông qua dạng biểu tượng. (Điều này cũng được lặp lại một cách độc đáo trong dấu hai chấm của tên game và chú dẫn vùng - một biểu tượng khác cũng thường xuất hiện trong các bản nhạc.)
Các họa tiết ở trên và dưới cùng của menu được dựa trên các đường viền tương tự từ menu game NIER đầu tiên. Các yếu tố như thế này tạo một cảm giác như từ “analog” (tín hiệu tương tự) lên “digital” (tín hiệu số). Bằng cách kết hợp lại, tôi có thể kiểm soát sự cân bằng giữa fantasy và sci-fi khi lên ý tưởng cho UI.
Thiết kế ý tưởng UI: Từ phẳng thành nổi
Cơ sở của ý tưởng là một thiết kế hầu như phẳng. Để cho nó phù hợp hơn với phong cách của game, tôi đã thêm một kết cấu lưới mờ, và làm cong và thêm nền tối quanh các cạnh. Nó khiến menu trông giống như được hiển thị trên màn hình lồi. Ta có thiết kế cuối cùng:
Và với phong thái skeuomorph, chúng tôi sử dụng thiết kế đơn giản và phẳng để tạo nên một thiết kế có cảm giác chân thật hơn, chuẩn không?
*Skeuomorph là gì? Nó là một thứ mới nhưng sử dụng những yếu tố thiết kế cũ của chính nó. Kiểu như icon cho nút Save là hình đĩa mềm đời Tống 1.44 MB.
Tôi cũng đã điều chỉnh một chút để cho chuyển động của UI trở nên đẹp mắt và mượt mà trên màn hình phẳng của người chơi - chúng nên uyển chuyển hơn, không bị trơ và nhạt nhẽo. Sự lưu loát này cũng khá ảo diệu, nhưng tôi đặc biệt thích cách mọi thứ dựng lên khi bạn bật menu:
YOKO còn nói rằng anh ấy muốn tránh sử dụng nhiều màu sắc, vì vậy tôi phải thiết kế UI ít phụ thuộc vào màu sắc nhất có thể trong khi vẫn truyền tải thông tin một cách hiệu quả.
Điều đó có nghĩa là, ví dụ, thay đổi độ dày và độ đậm của phông chữ để hiển thị các thay đổi về điểm sức mạnh:
Do tôi bắt buộc phải dùng các màu để đảm bảo mọi thứ đều đọc được, tôi tự giới hạn vào màu cam đỏ mờ. (Ờ thì vẫn có vài trường hợp đặc biệt với trắng và xanh nhạt).
Menu plugin chip cũng đặt ra thách thức, vì tôi cần các mã màu rõ ràng cho các loại thanh khác nhau. Sau một hồi thử và sai gian khổ, tôi cũng tìm ra được một bộ màu có thể đọc được, đủ để phân biệt được, trong khi vẫn phù hợp với thiết kế chung.
Phối màu UI cũng được thấy trong minigame hacking và các mô hình 3D trong màn hình bản đồ. Điều này giúp giữ vững một phong cách màu sắc thống nhất cho game.
Thiết kế menu: Khả năng truy cập
Trong suốt thời gian làm việc với NieR:Automata, YOKO đã nhấn mạnh một yêu cầu nhiều tới nỗi khiến tôi bị ám ảnh. “Anh muốn việc điều khiển menu đơn giản tới mức kể cả người ít chơi game cũng dùng được”, anh ấy nói. “Anh muốn bà của chú cũng có thể dùng được.”
Menu có một vài quy tắc cơ bản:
Tất cả các chức năng menu chỉ được điều khiển thông qua các phím điều khiển và nút O/X.
Hướng dẫn điều khiển trên màn hình phải thật hạn chế - thường chỉ để giải thích ba món trên.
Menu game sử dụng các nút trên như L1 và R1 và các nút trước khác là quá bình thường. Tôi đã đập đầu vào tường cho thông máu để nghĩ ra cách xử lý việc chuyển đổi giữa các danh mục và điều hướng khác mà không dùng mấy nút trên. Nhiều khi yêu cầu về điều khiển đơn giản là không thể dung hợp được một cách ổn thỏa với các đặc điểm menu phức tạp, dẫn tới các điều khiển lúc đầu khá khó nắm bắt. YOKO và tôi thường xuyên tranh luận, mặc cả với nhau về menu hàng giờ, cố gắng đi tới kết luận có lợi cho mỗi người.
Cuối cùng, chúng tôi chấp nhận rằng những người đã từng chơi game với nhiều menu thường thấy thoải mái hơn chút khi họ có thể sử dụng nhiều nút hơn là chỉ có cần analog và O/X. Vì vậy, họ không cần thiết phải biết điều hướng trong menu và hướng dẫn trợ giúp cũng không nhắc tới, tuy nhiên vẫn có một số phím tắt ẩn có sử dụng các nút L1, R1 và ∆/□. (Bạn có để ý không?)
Các phím tắt bao gồm:
Bạn có thể dịch chuyển giữa các mục menu và trang thông tin với nút L1 và R1.
Trong danh sách thông tin, bạn có thể chuyển trang bị và hình động với ∆ và □. Bạn cũng có thể quay mô hình với cần analog phải.
Trong Bản đồ, bạn có thể dùng cần analog phải và L2/R2 để nhanh chóng chuyển sang toàn màn hình.
Bất kể bạn đang ở đâu trong menu, bạn có thể ấn nút option để quay lại game. Bạn cũng có thế ấn bất kỳ nút nào để bỏ hiệu ứng chuyển động menu.
Phụ lục: UI dị
Trong buổi họp đầu tiên của chúng tôi về UI của NieR:Automata, YOKO nói rằng anh ấy muốn “thêm một thứ gì đó khác lạ. Rất nhiều game có UI thông thường. Anh muốn tạo ra một thứ dị.” Tuy nhiên trong quá trình phát triển, các yêu cầu riêng biệt ngày càng thực tế và nghiêm túc hơn, và khó để có thể làm bất cứ thứ gì ngoài lề.
Nhưng sẽ luôn có một vài nhân vật vui tính trong bất kỳ devteam nào - giả sử, một nhà thiết kế game hay chơi trội với những ý tưởng kỳ quặc, hoặc một coder thích thêm một số tính năng vớ vẩn cho vui. Họ thường bị sếp khiển trách, nhưng nhờ những nhân vật này, chúng tôi đã có được một UI đủ dị với yêu sách của YOKO. Ngả mũ cho những kẻ lập dị nào.
Như bạn có thể dùng chế độ tự hủy để thấy UI “lỗi” như trên đây.
Kết luận
Tôi rất hài lòng với UI của NieR:Automata mà tôi tạo ra, nhưng ý nghĩa hơn là những phản ứng tích cực từ người chơi. Bây giờ nhìn lại, tôi cũng thấy bất ngờ với các chỉ đạo kỳ cục YOKO! Tôi cũng đã làm văn tốt hơn mong đợi một chút - cảm ơn vì đã đọc đến kết bài!
Ồ, nhân tiện, tôi không chỉ thiết kế UI cho NieR:Automata, tôi còn thiết kế tất cả mecha nữa. Nhưng các bạn có thích đọc nhiều hơn về chủ đề đó không? Nói trước là nó có thể khá dài đó…
Comentarios