5 nguyên tắc và một số suy nghĩ liên quan thiết kế UI game

[Trần Cường]

Trần Cường

Theo tin tức ngày 26/5 của Youxiguancha, tính quan trọng của vẻ ngoài không chỉ thể hiện ở việc giao tiếp mà ở trong game tác dụng của vẻ ngoài cũng rất rõ. Người chơi nếu thấy giao diện game thiết kế không đẹp, sử dụng không tiện thì sẽ lập tức bỏ game, ảnh hưởng lớn đến mức độ lưu lại của người dùng. Dưới đây chúng ta sẽ nói đến 5 nguyên tắc cơ bản và một số suy nghĩ liên quan đến thiết kế UI game. UI quyết định trải nghiệm ban đầu của một tựa game, thậm chí quyết định sự lưu lại ban đầu của người chơi, hoặc có thể nói là quyết định chất lượng của một tựa game. Mặc dù nhìn vào có vẻ chỉ là biểu tượng nhưng lại liên quan trực tiếp đến trọng tâm game. Nói đơn giản hơn, người chơi nhận định một tựa game bao giờ cũng đều là tạo hình trường cảnh đẹp, cốt truyện hay, chất lượng đồ họa tuyệt vời; Nhưng người chơi mắng một tựa game cũng rất thô bạo, cân bằng kém, trị số ko hợp lý. Điều này nói lên vấn đề gì? Đại đa số người chơi vẫn thiên về loại cảm nhận, rất ít có người thật sự đi nghiên cứu trị số và hệ thống của 1 tựa game. Bởi vì người chơi vẫn là người ngoài ngành, chơi một tựa game chỉ là để tìm niềm vui, trải nghiệm cảm giác sảng khoái mà thôi. Vài năm trước, chúng ta sử dụng trang web khó dùng, chơi những tựa game kém chất lượng, lúc đó cũng chưa có khái niệm về trải nghiệm người dùng. Chúng ta thậm chí còn cảm thấy khó dùng mới là hợp lý, sản phẩm khoa học kỹ thuật lớn chỉ có người đủ thông minh mới chơi được (hiện giờ dĩ nhiên sẽ nghĩ đây là thứ logic gì vậy…). Nhưng bạn có từng nghĩ đến, đó là do rất nhiều nguyên nhân khách quan quyết định, ví dụ như môi trường mạng internet lúc đó không có mấy tựa game có thể chơi, máy tính điện thoại di động lúc đó có tỉ lệ phổ biến thấp. Thời gian rảnh rỗi của mọi người lúc đó không giống như hiện giờ bị chiếm bởi các game trực tuyến quy mô lớn và app. Sở dĩ chúng ta có thể chấp nhận được thiết kế tệ như vậy là bởi vì chúng ta không có lựa chọn nào khác, chúng ta cần tính năng đó nên dù có khó dùng đi nữa thì chúng ta cũng sẽ tìm hiểu sâu thêm cho đến khi chúng ta đạt được mục đích. Mọi người đều biết, thường thì trang web của chính quyền địa phương vừa xấu vừa khó dùng, nhưng không gây trở ngại đến việc chúng ta dùng nó, bởi vì chúng ta phải dùng để xử lý công việc. Tuy nhiên hiện giờ thì khác rồi, chúng ta có rất nhiều loại thiết bị thú vị, yêu cầu đối với trải nghiệm game của mọi người cũng đã nâng cao tương ứng. Trong tình hình này, nếu chúng ta vẫn để người chơi sử dụng những thiết kế vừa xấu vừa khó dùng thì chắc chắn sẽ tự đào mộ cho mình. UI chính là thiết kế giao diện, rất nhiều người cảm thấy thiết kế giao diện chỉ là về kiểu dáng, mức độ đẹp của giao diện, nhưng thực ra hiểu như vậy là rất phiến diện. Đối với UI game mà nói, có dễ dùng hay không (tương tác) và có đẹp hay không (thị giác) đều cần phải xem xét chu toàn. Hiện tại trong các công ty game lớn ở Trung Quốc phân công khá chi tiết, thường là có hai nhân vật thiết kế tương tác và thiết kế thị giác, cùng hoàn thành công việc UI. Tình hình công ty nhỏ phức tạp thì không nói nhiều nữa. Đối với UI, tác giả đã tổng kết 5 nguyên tác thiết kế cơ bản: **1. CHỈ DẪN QUY TRÌNH THỊ GIÁC** Là quy trình thị giác khi chúng ta xem 1 giao diện, tạm chưa suy xét đến phạm vi khu vực hot của thế tay, chỉ xem xét từ quỹ đạo mắt chuyển động. Sự chú ý của mắt đối với vật thể vốn có quy luật thị giác nhất định, ví dụ đơn giản nhất là quy luật từ trên xuống dưới từ trái qua phải. Thông thường mà nói, khi chúng ta thiết kế giao diện cố gắng xem xét đến quy luật thị giác của mắt người, ví dụ như tính năng quan trọng nhất đừng đặt ở trong phạm vi điểm mù thị giác. Nhưng ở đây tác giả muốn nhấn mạnh một điều, quy trình thị giác của mắt là có thể liệt kê phân cấp thông qua kiểm soát hợp lý đối với giao diện, bố cục thích hợp để tiến hành chỉ dẫn có hiệu quả. Hình dưới đây là giao diện chính của “Sdroica”, ngoài việc sắp đặt các nút ở xung quanh mà chúng ta thường thấy ra, nó còn đặc biệt đặt nút “Hành trình” ở vị trí chính giữa bên phải, ngoài ra còn thêm vào hiệu ứng nhấp nháy, mắt của người chơi sẽ bị thu hút đến nút đặc biệt này một cách không tự giác, đồng thời sẽ không nhịn được muốn nhấp vào xem thử. Thiết kế này đã làm tốt việc lôi kéo người chơi đến tính năng game mà nhân viên kế hoạch muốn người chơi vào nhất.  *Sdroica* **2. NGUYÊN TẮC TƯƠNG TỰ GẦN NHAU** Tương tự chính là “phong cách thống nhất, cùng loại gần nhau”. Phong cách thống nhất, phải bảo đảm sự đồng nhất về ngoại hình của cùng một loại biểu tượng, dù nút nhấn do độ dài ngắn của font chữ mà không bằng nhau, nhưng ít nhất nhìn từ ngoại hình thì cùng một loại. Nếu về ngoại hình mà không nhìn ra được các nút nhấn là cùng một loại thì có thể tham khảo cách làm của nhóm biểu tượng bên phải ở giao diện chính của “Love & Producer”. Ở phía dưới text của mỗi một biểu tượng thêm vào hình nền bán trong suốt màu xám giống nhau, cách làm từ một phần đến tổng thể này đã bảo đảm tốt về tính thống nhất của những biểu tượng tính năng này. Nếu game của bạn đi theo phong cách 3D chân thực, vậy thì trong game nhất định không thể xuất hiện một nhân vật nữ 2D, có thể xem xét tăng thêm nguyên tố thứ nguyên khác, nhưng nhất định phải qua xử lý chuyên nghiệp của bên mỹ thuật để phong cách đồ họa của game không đến nỗi kỳ quái. Trong “Miracle Nikki” có rất nhiều phong cách thời trang khác nhau, có phong cách xưa, hiện đại, phương tây, Trung Hoa, kiểu Nhật… nhưng sau khi tiến hành xử lý thống nhất hóa thì không còn cảm giác không phù hợp nữa. Cùng loại thì gần nhau, vị trí của các nút cùng loại phải gần nhau, dù không có khung của hình vẽ thì cũng có thể biết chúng là nút nhấn thuộc cùng một loại. Tính năng trên giao diện chính của “Love & Producer” cũng rất nhiều, nhưng không hề khiến người chơi cảm thấy rối loạn, nút của tình năng cùng loại đều xếp đặt cùng nhau, giữa các nút không cùng loại hình cũng không quấy nhiễu lẫn nhau. Những nút sắp đặt lộn xộn không có quy luật sẽ gây cho người chơi có cảm giác không tìm được nút để nhấp vào, còn thấy mơ hồ đối với tính năng, không biết nên làm gì.  *Love & Producer* **3. KHUYNH HƯỚNG MÀU SẮC VÀ LỚP MÀU** Khuynh hướng màu sắc, trong thiết kế giao diện đều nên có một khuynh hướng màu sắc, cũng chính là tông màu chủ đạo. Trong bất kỳ một đồ họa nào, màu sắc đều không nên quá nhiều, các hệ màu khác nhau tốt nhất đừng quá 3 loại. Điều này cũng giống như mặc áo quần vậy, trừ phi là nhà thiết kế đẳng cấp, sở hữu khả năng phối màu rất giỏi, rất ít khi phạm sai lầm, chứ người bình thường nếu màu sắc trên người càng nhiều càng sặc sỡ thì đẳng cấp lại càng low. Chia sẻ một mẹo nhỏ: Trong giao diện game, có thể dùng tỉ lệ phân chia vàng để tiến hành phân định, tông màu chính chiếm 60%, tông màu bổ trợ chiếm 30%, màu nổi bật chiếm 10%. Về lớp màu sắc, trong chế tác UI, bởi vì yêu cầu về độ chuẩn xác rất cao, độ sáng và diện tích của màu sắc có quan hệ ứng dụng tỷ lệ nghịch, điều này rất quan trọng vì nó trực tiếp quyết định vấn đề quan hệ chính phụ của màu gốc UI. Màu càng sáng, độ thuần chất càng cao thì càng phải thận trọng về mặt diện tích sử dụng, nếu không sẽ gây ra phụ lấn át chính và hành hạ về mặt thị giác của người chơi. Nhằm đạt được hiệu ứng ngang nhau về thị giác thì độ sáng, màu sắc nóng lạnh khác nhau cũng phải tiến hành điều chỉnh trên diện tích. Màu nền thường biểu hiện là không màu (đen, trắng, xám), hoặc màu sắc có độ bão hòa thấp. Nói tóm lại, màu sắc diện tích càng nhỏ thì phải càng sáng càng thuần chất, màu sắc diện tích càng lớn thì càng tăng độ xám hoặc giảm độ sáng. Phân ra lớp màu thì việc truyền tải thông tin của cả giao diện sẽ rất thoải mái. Cảm giác lớp màu trong giao diện “King of Glory” rất rõ ràng, tông màu chính là màu lam độ xám rất cao, màu phụ lần lượt là màu tím màu xanh màu vàng, từ trên màu sắc đã phân chia ra module tính năng, đồng thời màu sắc của khu vực có thể nhấp vào có độ sáng rất cao, thiết kế như vậy giúp người chơi rất dễ phân biệt tính năng.  *King of Glory* **4. TIẾT TẤU KIỂU CHỮ** Rất nhiều người sẽ cảm thấy đồ họa trong game là quan trọng nhất, kiểu chữ là nhân vật bổ trợ để truyền tải thông tin, cái này sai rồi. Tính dễ đọc của nội dung bao giờ cũng xếp đầu. Khi chúng ta nhìn biểu tượng sẽ phát hiện mức độ nhận ra của rất nhiều biểu tượng không phải cao, nhưng một khi thêm kiểu chữ thì lập tức có thể hiểu tính năng. Thiết kế kiểu chữ tốt, hình dáng và kích thước đều sẽ trực tiếp ảnh hưởng đến tốc độ tiếp nhận thông tin của người chơi. Tại sao lại nói là tiết tấu kiểu chữ? Trong cùng một giao diện nếu sử dụng cùng một cỡ chữ, kiểu chữ cùng một loại hình sẽ khiến việc truyền đạt thông tin trở nên rắc rối và tốn sức. Nhưng nếu tăng thêm thay đổi cho kiểu chữ trên cơ sở độ quan trọng của thông tin thì lập tức cảm giác tiết tấu sẽ xuất hiện, cấp độ tin tức cũng rất rõ ràng. Vì vậy dựa vào trường cảnh tính năng khác nhau, sử dụng kiểu chữ khác nhau cũng cực kỳ quan trọng. Hình dưới đây là thiết kế kiểu chữ của 1 giao diện sự kiện trong “Mộng Ảo Gia Viên”, cảm giác tiết tấu của chữ làm rất tốt, chữ của tính năng khác nhau có kích thước khác nhau, thiết kế cũng có khác biệt. Thậm chí những chỗ có chữ số lại thêm nhấn mạnh bằng chữ đậm. Về thiết kế kiểu chữ, tác giả có mẹo nhỏ sau: Ví dụ có thể đều dùng bội số của 4, trong giao diện của bạn sẽ xuất hiện kiểu chữ có mấy loại cỡ chữ 12px, 16px, 20px, 24px.  *Mộng Ảo Gia Viên* **5. NGUYÊN TẮC DẪN HƯỚNG MỤC TIÊU (Ở ĐÂY CHỈ NÓI LOGIC, KHÔNG CÓ HÌNH)** Dẫn hướng mục tiêu, ở trong game mỗi một giao diện đều có tính năng mục tiêu tương ứng, cách chơi hay dưỡng thành thì thông tin hiển thị ở giao diện phải là thông tin mà tính năng này cần người chơi nhận được. Phải làm rõ mục đích của mình, cố gắng đừng vì những nguyên nhân nằm ngoài mục đích mà ảnh hưởng đến thiết kế của bạn. Ngoài mục đích ban đầu của tính năng giao diện này, mỗi khi bạn muốn thêm vào một thứ gì khác đều phải hỏi bản thân nhiều lần: Thêm vào thứ khác có lợi ích gì? Có gây ra vấn đề gì không? Nếu không thêm vào sẽ có bất lợi gì? Hãy suy nghĩ thêm nhiều khía cạnh, thiết kế xuất sắc đều trải qua cân nhắc nhiều lần. Ví dụ, bên trái của giao diện nạp thẻ tại sao nhất định phải thêm vào Bạch Vô Thường? Khi người chơi nạp thẻ sẽ dành thời gian ngắm hình vẽ của bạn không? Ngoài ra cùng 1 hình vẽ sử dụng lại trong nhiều giao diện, bạn thật là thiếu ý tưởng thiết kế, nhất định phải thêm 1 hình vẽ nhân vật trong mỗi giao diện để thể hiện rằng bạn có tiến hành thiết kế. Hậu quả làm như vậy là: không chỉ giảm giá trị của bản thân hình vẽ, cũng giảm tốc độ tải của tài nguyên game, đồng thời khiến giao diện trở nên phức tạp khó nhận biết, gây ra sự mệt mỏi về thầm mỹ của người chơi. Hình ảnh hóa tính năng, trong giao diện tấc đất tấc vàng, tại sao cần tồn tại mấy thứ hoàn toàn giống nhau, vừa chiếm chỗ vừa ảnh hưởng việc hiểu của người chơi. Nếu biểu thị tính năng khác nhau, vậy thì nên tiến hành phân biệt trên biểu tượng. Lấy một ví dụ mà tôi đã gặp, ở giao diện chế tạo của game, tất cả vật phẩm bày ra ở đó, biểu tượng của cùng 1 hình vẽ lại đặt vào 3 lần trong giao diện, đồng thời không có chỉ dẫn hình vẽ và text chú thích liên quan sẽ khiến người chơi rất mơ hồ, hoàn toàn không biết phải thao tác thế nào. Thực ra một người kế hoạch như tôi cũng phải tốn nhiều thời gian mới hiểu là thao tác ra sao. Phương án điều chỉnh ưu hóa cuối cùng là: tăng thêm mũi tên chỉ hướng, tiến hành chọn khung đối với nguyên liệu, hiển thị đối với vật phẩm tiến hành điều chỉnh trên phần sắp chữ. Tổng kết: nhân viên kế hoạch làm xong logic game, không thể trực tiếp bày logic này trước mặt người chơi, bên trong đó cần phải có 1 quá trình hình ảnh hóa tính năng. Người chơi không hề quan tâm quá trình chế tạo của bạn là gì, họ cũng không thể hiểu 3 biểu tượng của cùng một hình trong giao diện, tại sao là một công thức, một bản vẽ, một vật phẩm khác. Bạn chỉ cần nói với người chơi nhấp vào vật phẩm mục tiêu, gom đủ nguyên liệu và tiền, nhấp vào chế tác có thể nhận được hay không là được rồi. Giao diện đơn nhất tinh giản tính năng, tính năng có thể thực hiện trên cùng một giao diện tốt nhất đừng quá 3, tính năng quá nhiều thì người chơi đến giao diện này tiềm thức sẽ rất khó chịu. Bởi vì vốn dĩ tôi đến giao diện này nhận được tính năng muốn có là được rồi, anh thiết kế như vậy khiến tôi có sự phân li với nhu cầu đối với tính năng mục tiêu, thế là tôi phải nghĩ xem rốt cuộc muốn làm gì, nói cách khác thì bạn đã điều động thành công chứng khó lựa chọn của người chơi rồi. **TRAO ĐỔI GIỮA KẾ HOẠCH VÀ THIẾT KẾ MỸ THUẬT** Chủ yếu là khi đưa yêu cầu, phía Thiết Kế sợ nhất nghe thấy câu: Không có yêu cầu, tùy ý vẽ. Điều này nhìn có vẻ phía Kế Hoạch đã hạ thấp yêu cầu đối với Thiết Kế, cảm thấy tôi không hạn chế anh mà anh còn vẽ không ra ư? Nhưng thực ra là phía Kế Hoạch đã chuyển giao lượng công việc của mình cho Thiết Kế rồi. Bởi vì mỗi khi Kế Hoạch đưa ra một yêu cầu thì đều có bối cảnh sử dụng của mình, bối cảnh sử dụng này không biểu đạt rõ ràng cho Thiết Kế thì Thiết Kế rất khó tùy ý vẽ ra được, bởi vì rất dễ xảy ra tình huống phía Kế Hoạch không hài lòng với thành phẩm cuối cùng. Ví dụ như tôi muốn một hình nền lớn của tháp, vậy thì đây là tháp thế nào, dùng ở đâu, cần làm nổi bật ở phần nào, thiên về kiểu tây, kiểu Trung Hoa hay kiểu Nhật. Màu sắc tươi một chút hay là trầm một chút, cần vẽ mấy tầng? Những điều này đều phải suy nghĩ sẵn trước. Hoặc bạn có thể đưa ra một vài từ khóa, thu thập chất liệu hình ảnh tương ứng để Thiết Kế dễ tưởng tượng ra, hiểu yêu cầu mỹ thuật của bạn, khiến thiết kế giao diện càng phù hợp với dự tính của bạn hơn. Chia sẻ một ví dụ nhỏ trong công việc của chính tôi, trong game cần thêm vào ba hình tôn hiệu ở bảng xếp hạng Sinh Lực Động Cây, dựa vào thế giới quan của game, đối với Sinh Lực Động Cây đưa ra từ khóa liên quan: Động Cây, Sinh Lực, tên cây lịch sử, Nhật Bản, cuối cùng đã tìm được bonsai nổi tiếng trong lịch sử Nhật Bản. Từ trong đó chọn ra 3 cái tên: Vũ Y (800 năm), Azuma Matsuzo (200 năm), Ko Mayumi (80 năm). Sau đó tìm được hình liên quan đến mỗi loại bonsai để tham khảo hình dáng, lại dựa vào màu sắc đã có trong game tìm được hình ảnh đẹp để tham khảo về phối màu, cuối cùng đưa ra yêu cầu.  *Bảng yêu cầu và so sánh thành phẩm* **6. TỔNG KẾT** Một quy trình thao tác ngắn gọn hiệu quả cao có tác dụng rõ rệt đối với việc tăng trải nghiệm của người dùng, đặc biệt là lưu lại của tân thủ. Nếu một giao diện có thể khiến người chơi rất dễ lấy điểm của bạn, vậy thì giao diện UI này là thành công. Nếu thao tác của giao diện này còn rất ngắn gọn trang nhã thì giao diện này chính là khá thành công. Nếu giao diện này còn rất đẹp thì nó chính là rất thành công. Kiến nghị Kế Hoạch chế tác giao diện phải đi học một chút kiến thức cơ bản về chế tác ảnh động, hoặc chế tác hiệu ứng động. Đơn giản nhất, khi chế tác giao diện làm sao có thể khiến cho giao diện có hai tab tương đồng khi đổi qua đổi lại thì vị trí nút của các phần giống nhau không đổi, giúp thao tác trở nên không kỳ lạ, khiến giao diện dễ hiểu.