Chọn một phong cách nghệ thuật

Chọn một phong cách nghệ thuật là quá trình lập kế hoạch cho một hướng thẩm mỹ cho các yếu tố giao diện người dùng (UI) của bạn. Việc bắt đầu quá trình thiết kế của bạn với một phong cách nghệ thuật là rất quan trọng vì các phong cách nghệ thuật cung cấp các quy tắc thị giác mà bạn có thể tham khảo để đảm bảo rằng UI của bạn cung cấp thông tin một cách trực quan cho người chơi về những gì họ có thể làm trong trò chơi của bạn.

Sử dụng tệp trò chơi bắn laser mẫu sample laser tag game .rbxl làm tài liệu tham khảo, phần này của chương trình giảng dạy giao diện người dùng sẽ chỉ cho bạn cách đưa ra những quyết định có ý nghĩa về cách thiết kế các yếu tố UI của bạn theo thể loại trò chơi của bạn, bao gồm hướng dẫn về:

• Xác định các yếu tố UI cần thiết theo những gì bạn muốn truyền đạt cho người chơi trong suốt trò chơi của bạn.
• Chọn một chủ đề màu sắc củng cố các quy ước màu sắc theo thể loại mà trực quan cho khán giả của bạn.
• Phác thảo các biểu tượng đơn giản dễ hiểu trên bất kỳ kích thước màn hình nào.
• Thiết lập thứ tự nút bấm phù hợp với khả năng xảy ra của các quy trình làm việc khác nhau của người chơi.
• Xác định một hệ thống văn bản đảm bảo tính dễ đọc trên các thiết bị mục tiêu.

Sau khi bạn hoàn thành phần này, bạn sẽ học cách thiết kế cấu trúc và luồng thông tin mà bạn muốn truyền đạt cho người chơi thông qua UI trong trò chơi của bạn.

Xác định các yếu tố UI của bạn

Bước đầu tiên trong việc chọn một phong cách nghệ thuật cho UI của bạn là xác định những yếu tố UI nào bạn cần cho các loại thông tin khác nhau mà bạn muốn truyền đạt cho khán giả của mình. Thực hiện công việc này ngay từ đầu quá trình thiết kế của bạn là rất quan trọng vì nó cho phép bạn phân loại các yếu tố UI theo mục đích chức năng của chúng, đưa ra các quyết định ngữ nghĩa theo nơi và thời điểm người chơi sẽ tương tác với từng yếu tố UI, và lập kế hoạch nơi bạn có thể tái sử dụng các yếu tố UI trong trò chơi của bạn.

Có nhiều cách khác nhau để động não những yếu tố UI nào là cần thiết cho yêu cầu gameplay của bạn, nhưng được khuyến nghị bắt đầu bằng cách hình dung những gì một người chơi cần biết ngay khi họ tham gia trò chơi của bạn. Ví dụ, khi một người chơi mở trò chơi bắn laser mẫu, họ có thể tự hỏi những câu hỏi sau:

• Mục tiêu của trò chơi là gì?
• Làm thế nào tôi biết ai là đồng đội của mình?
• Làm thế nào tôi theo dõi điểm số của đội mình?
• Làm thế nào tôi chọn một khẩu súng?
• Làm thế nào tôi biết khẩu súng bắn laser ở đâu?
• Nếu tôi đang sử dụng thiết bị di động, làm thế nào tôi bắn khẩu súng của mình?
• Sau khi tôi bắn một tia laser, khi nào tôi có thể bắn lại?
• Làm thế nào tôi biết khi nào tôi bắt đầu vòng đấu?
• Làm thế nào tôi biết khi nào tôi đã thành công trong việc đánh dấu ai đó bằng khẩu súng của mình?
• Làm thế nào tôi biết khi nào đội địch đã đánh dấu tôi thành công?

Bằng cách sử dụng những câu hỏi này để hiểu thông tin nào là cần thiết cho người chơi để thành công, bạn có thể phân loại nhu cầu UI của trò chơi bắn laser mẫu thành ba danh mục:

1. Thông tin về mục tiêu của trò chơi.
2. Thông tin về khẩu súng.
3. Thông tin về trạng thái của người chơi.

Phân loại nhu cầu UI của trò chơi của bạn thành các danh mục là hữu ích vì bạn có thể hình thành phong cách nghệ thuật của mình xung quanh mỗi nhóm để củng cố thông tin mà mỗi danh mục cần dạy cho người chơi. Ví dụ, nếu bạn muốn UI của mình cho người chơi biết những hành động họ có thể thực hiện liên quan đến trạng thái sức khỏe của nhân vật, bạn có thể chọn một phong cách nghệ thuật với các yếu tố UI ưu tiên màu xanh lá cây và/hoặc biểu tượng cộng để người chơi có thể nhanh chóng nhận ra chức năng của chúng.

Sau khi bạn phân loại nhu cầu UI của trò chơi của mình thành các danh mục, bạn có thể tạo một danh sách các yếu tố UI cần thiết để đáp ứng yêu cầu của mỗi danh mục. Để minh họa, trò chơi bắn laser mẫu sử dụng bảng sau về các yếu tố UI để giải quyết danh sách các câu hỏi tiềm năng của người chơi trước đó. Khi bạn làm việc qua hướng dẫn này, chương trình giảng dạy UI sẽ tiếp tục tham chiếu đến danh sách này và làm nổi bật các quyết định thiết kế chính liên quan đến từng danh mục các yếu tố UI.

Bây giờ bạn đã có danh sách các yếu tố UI cho trò chơi của mình, đã đến lúc bắt đầu đưa ra các lựa chọn về phong cách và ngữ nghĩa cho mỗi nhóm các yếu tố UI, bắt đầu với một chủ đề màu sắc.

Chọn một chủ đề màu sắc

Một chủ đề màu sắc, hoặc bảng màu, là một lựa chọn các màu sắc mà mỗi màu truyền đạt một thông điệp thông qua việc áp dụng nhất quán trong trò chơi của bạn, chẳng hạn như sử dụng một màu sáng để chỉ ra khi một cái gì đó có thể chọn. Áp dụng một chủ đề màu sắc cho các yếu tố UI của bạn là rất quan trọng, đặc biệt khi bạn dựa vào các quy ước màu sắc trong thể loại trò chơi của bạn, vì điều này cho phép người chơi nhanh chóng hiểu UI của bạn với nỗ lực tối thiểu.

Trong Chương trình giảng dạy Nghệ thuật Môi trường, mỗi nửa của môi trường trò chơi bắn laser được mã màu từ góc nhìn trên xuống để phân biệt khu vực nào của bản đồ gần với khu vực xuất phát tương ứng của mỗi đội: xanh bạc hà cho đội tập hợp ở bên trái của bản đồ, và hồng cẩm chướng cho đội tập hợp ở bên phải của bản đồ. Những màu sắc cụ thể này rất hữu ích vì chúng là bổ sung, có nghĩa là chúng tương phản tốt với nhau, và cho phép người chơi dễ dàng quét xung quanh và định hướng bản thân bất kể họ đang đối diện hướng nào trong tòa nhà.

Trò chơi bắn laser mẫu sử dụng cùng một chủ đề màu sắc trong UI của nó để làm nổi bật thông tin liên quan đến mỗi đội, chẳng hạn như chỉ báo đội của mỗi người chơi trong không gian 3D, hoặc trình theo dõi điểm số đội phủ lên màn hình. Sự nhất quán này giúp người chơi có thể nhanh chóng hiểu thông tin về mục tiêu của trò chơi trong suốt gameplay nhanh chóng của một trò chơi bắn súng góc nhìn thứ nhất, đặc biệt khi người chơi cần đưa ra quyết định nhanh chóng trong khi di chuyển trong môi trường.

Khi chọn một chủ đề màu sắc cho trò chơi của riêng bạn, hãy xem xét những điều sau:

• Sức mạnh của một chủ đề màu sắc phụ thuộc vào việc giúp người chơi tạo ra các liên tưởng nhanh chóng giữa mỗi màu và chức năng của chúng. Vì lý do này, giới hạn chủ đề màu sắc của bạn chỉ để làm nổi bật thông tin chính mà bạn muốn người chơi liên kết với các yếu tố UI của bạn.
• Để đảm bảo rằng người chơi bị mù màu có thể hiểu thông điệp của chủ đề màu sắc của bạn, đừng chỉ dựa vào màu sắc để phân biệt giữa các yếu tố UI. Thay vào đó, kết hợp màu sắc với biểu tượng, hình dạng, và/hoặc hoạt ảnh để đảm bảo UI của bạn giao tiếp hiệu quả với mọi người chơi.
• Quan trọng hơn là UI của bạn phải dễ đọc hơn là đẹp mắt. Vì lý do này, ưu tiên UI đơn giản với màu sắc vẫn dễ đọc trên cả các yếu tố sáng và tối trong thế giới 3D.

Để làm nổi bật hướng dẫn trong điểm cuối cùng, trò chơi bắn laser mẫu sử dụng các màu trung tính của đen và trắng cho hầu hết các yếu tố UI khác phủ lên màn hình 2D. Đen và trắng tương phản tốt với nhau, và chúng dễ đọc khi phần còn lại của màn hình hiển thị một môi trường 3D đầy màu sắc khác.

Phác thảo các biểu tượng đơn giản

Một biểu tượng là một ký hiệu đại diện cho một hành động, đối tượng, hoặc khái niệm trong một trò chơi. Phác thảo các biểu tượng đơn giản và trực quan là rất quan trọng vì kết quả cuối cùng cho phép người chơi dễ dàng nhận ra những gì họ có thể làm và những gì bạn muốn truyền đạt cho họ thông qua UI của bạn mà không cần sử dụng văn bản, điều này có thể làm rối màn hình và thu hút sự chú ý khỏi nội dung quan trọng. Quy trình này càng trở nên quan trọng hơn nếu khán giả của bạn truy cập trò chơi của bạn bằng một màn hình nhỏ trên các thiết bị di động.

Các biểu tượng đơn giản lý tưởng có một phong cách khác biệt so với các yếu tố 3D của bạn trong khi vẫn bổ sung cho thế giới tổng thể của trò chơi của bạn. Ví dụ, trong môi trường cuối cùng của Chương trình giảng dạy Nghệ thuật Môi trường, cả tài sản 3D mô-đun và tài sản phụ đều có một phong cách nghệ thuật sạch sẽ, công nghệ cao sử dụng các hình dạng hình chữ nhật với các góc mềm mại, tròn. Từ các tấm vát dọc theo sàn đến các cửa sổ gần như hình tròn trên trần, không có gì bao gồm một cạnh sắc.

Để bổ sung cho phong cách nghệ thuật này trong khi vẫn giữ được sự độc đáo, tất cả các yếu tố UI mà bạn sẽ học cách tạo ra sau này trong hướng dẫn này đều bao gồm một thẩm mỹ tương lai và các góc tròn mà không khớp với ngôn ngữ hình dạng của các tài sản 3D trong môi trường. Điều này giữ cho ý nghĩa của mỗi biểu tượng khác biệt với thông tin khác trong cả không gian 2D và 3D.

Để minh họa khái niệm này, hãy xem hai hình ảnh sau từ trò chơi bắn laser mẫu về đường ngắm cho biết người chơi nơi khẩu súng của họ bắn trên màn hình, và nút cho phép người chơi bắn khẩu súng của họ trên các thiết bị di động. Cả hai biểu tượng đều bao gồm các góc mềm mại để phù hợp với thế giới tổng thể, nhưng hình dạng lục giác và hình tròn của chúng tách biệt chúng khỏi bất kỳ thứ gì mà người chơi có thể liên kết các biểu tượng với trong trò chơi.

Khi phác thảo các biểu tượng đơn giản cho trò chơi của riêng bạn, hãy xem xét những điều sau:

• Các biểu tượng đơn giản có thể đọc được ngay cả khi chúng nhỏ. Vì lý do này, giới hạn chi tiết trên các biểu tượng của bạn mà sẽ trở nên không thể nhận ra trên màn hình thiết bị di động.
• Các biểu tượng rất mạnh mẽ vì chúng có thể truyền đạt một thông điệp bất kể ngôn ngữ của người chơi. Miễn là điều này không ảnh hưởng đến sự hiểu biết của người chơi về UI của bạn, thay thế văn bản không cần thiết bằng các biểu tượng để cải thiện nỗ lực địa phương hóa.
• Nhiều trò chơi cùng thể loại sử dụng các biểu tượng có phong cách tương tự, chẳng hạn như một biểu tượng thanh kiếm đại diện cho sức mạnh, hoặc một bình chứa đại diện cho ma thuật. Ôm lấy biểu tượng trong thể loại trò chơi của bạn để người chơi có thể hiểu các biểu tượng của bạn mà không cần hướng dẫn thêm.

Nếu bạn không biết loại biểu tượng nào là phổ biến trong thể loại trò chơi của bạn, hãy kiểm tra Cơ sở dữ liệu UI trò chơi. Công cụ tài nguyên miễn phí này cho các nhà thiết kế UI bao gồm các ảnh chụp màn hình từ hàng trăm trò chơi thuộc nhiều thể loại khác nhau mà bạn có thể tham khảo trong quá trình thiết kế của mình.

Thiết lập thứ tự tương tác

Một thứ tự tương tác là trình tự các tương tác mà người chơi có thể có với UI của bạn. Vì thường có nhiều yếu tố UI có thể tương tác trên màn hình, việc thiết lập một thứ tự tương tác trực quan là rất quan trọng để hỗ trợ người chơi trong việc đưa ra quyết định khi họ điều hướng qua các quy trình làm việc khác nhau.

Thông thường có ba loại tương tác trong một quy trình làm việc:

• Tương tác chính – Hành động mà người chơi có khả năng thực hiện nhất.
• Tương tác phụ – Hành động mà người chơi có khả năng thực hiện như một lựa chọn thay thế cho hành động chính.
• Tương tác thứ ba – Hành động mà người chơi ít có khả năng thực hiện nhất.

Mỗi loại tương tác phải có một mức độ nhấn mạnh thị giác khác nhau tùy thuộc vào khả năng người chơi thực hiện hành động. Để minh họa khái niệm này, hãy xem hình ảnh sau về thứ tự tương tác cho quy trình làm việc để chọn một khẩu súng trong trò chơi bắn laser mẫu, trong đó A đại diện cho tương tác chính, B đại diện cho tương tác phụ, và C đại diện cho tương tác thứ ba.

Trong quy trình làm việc này, hành động mà người chơi có khả năng thực hiện nhất là chọn giữa hai loại súng khác nhau, vì vậy các nút súng lớn hơn nhiều so với bất kỳ yếu tố có thể tương tác nào khác trong thiết kế. Mức độ nhấn mạnh thị giác này thu hút sự chú ý của người chơi và hướng ánh mắt của họ đến giữa yếu tố UI tổng thể. Sau khi người chơi đưa ra quyết định của mình, bước tiếp theo hợp lý trong quy trình làm việc là xác nhận lựa chọn của họ và bắt đầu vòng đấu. Vì lý do này, nút CHỌN nằm ngay bên dưới tương tác chính.

Mặc dù không có khả năng, người chơi có thể không biết họ có thể chọn một trong các nút súng để truyền đạt khẩu súng mà họ muốn sử dụng. Để hỗ trợ trong tình huống này, có hai nút mũi tên thứ ba mà người chơi có thể sử dụng để chuyển đổi giữa các lựa chọn của họ. Những nút này rất tinh tế và nhỏ hơn nhiều so với các yếu tố của các tương tác chính và phụ, nhưng chúng cũng có thể nhận thấy đối với người chơi cần hướng dẫn về những hành động mà họ có thể thực hiện.

Nếu bạn đặt các tương tác chính, phụ và thứ ba này trong một thứ tự tương tác khác, chẳng hạn như hoán đổi nút CHỌN với nút mũi tên trái, người chơi sẽ không có hướng dẫn rõ ràng về trình tự các lựa chọn mà họ cần thực hiện. Vì lý do này, ngoài nhấn mạnh thị giác của thứ tự nút bấm, các quy trình làm việc hiệu quả theo một hệ thống phân cấp thị giác hướng dẫn người chơi qua thứ tự quyết định lý tưởng của bạn theo hướng mà họ có khả năng quét thông tin, chẳng hạn như từ trên xuống và từ trái sang phải.

Khi thiết lập một thứ tự tương tác cho các quy trình làm việc trong trò chơi của riêng bạn, hãy xem xét những điều sau:

• Người chơi cần có một hiểu biết rõ ràng về khi nào họ có thể tương tác với UI của bạn để thực hiện các hành động. Vì lý do này, được khuyến nghị cung cấp ít nhất một hình thức phản hồi thị giác cho các yếu tố UI có thể tương tác, chẳng hạn như hiển thị một đường viền hoặc thay đổi kích thước, màu sắc, hoặc hoạt ảnh của nút khi nó đang được tập trung.
• Nếu nhãn trên các yếu tố UI có thể tương tác là mơ hồ hoặc tương tự nhau trong cùng một quy trình làm việc, người chơi có thể hiểu sai cách hoàn thành một hành động hoặc quy trình. Để tránh trải nghiệm tiêu cực cho người chơi, tạo nhãn rõ ràng, ngắn gọn và khác biệt nhau.
• Nếu các yếu tố UI tương tác quá lớn, chúng có thể gây phân tâm khỏi các thông tin quan trọng khác trên màn hình. Ngược lại, nếu chúng quá nhỏ, chúng có thể khó đọc hoặc khó chọn, đặc biệt nếu chúng ở gần nhau trên các thiết bị di động. Vì lý do này, rất quan trọng để xem xét kích thước của các yếu tố UI có thể tương tác của bạn trên nhiều kích thước màn hình khác nhau.

Trong Triển khai trong Studio, bạn sẽ học cách sử dụng các đối tượng UIAspectRatioConstraint để đảm bảo các yếu tố UI duy trì tỷ lệ khung hình cụ thể bất kể thiết bị nào mà người chơi sử dụng để truy cập trò chơi của bạn. Ngoài việc làm cho quá trình thiết kế của bạn dễ dàng hơn, kỹ thuật này cũng có thể giúp bạn đáp ứng các hướng dẫn về khả năng tiếp cận nội dung web Kích thước và Khoảng cách Mục Chạm để tạo ra một vùng chạm cho các yếu tố UI tương tác có kích thước ít nhất là 9x9 mm trên các thiết bị di động.

Xác định một hệ thống văn bản

Một hệ thống văn bản là một tập hợp các quy tắc về phông chữ và kiểu cho tất cả các từ trong UI của bạn, chẳng hạn như "luôn in đậm tiêu đề" hoặc "sử dụng phông chữ màu xanh khi tham chiếu đến chỉ số sức khỏe." Xác định một hệ thống văn bản sớm trong quá trình thiết kế của bạn cho phép bạn có một cấu trúc mà bạn có thể áp dụng nhất quán trong toàn bộ trò chơi của mình để người chơi biết điều gì mong đợi khi họ tìm kiếm thông tin mà họ cần.

Trong khi các hệ thống văn bản có thể khác nhau tùy thuộc vào thể loại trò chơi hoặc yêu cầu thế giới 3D, quy tắc quan trọng nhất mà tất cả các hệ thống văn bản phải tuân theo là đảm bảo tất cả văn bản UI của bạn rõ ràng và dễ đọc. Bằng cách sử dụng quy tắc này làm cơ sở cho tất cả các quyết định liên quan đến hệ thống văn bản của bạn, bạn có thể cải thiện khả năng tiếp cận và trải nghiệm người dùng cho người chơi đọc UI của bạn bằng cách xem xét các cách khác nhau mà người chơi có thể tương tác với văn bản của bạn, chẳng hạn như:

• Thiết bị mà người chơi có thể sử dụng để truy cập trò chơi của bạn.
• Ngôn ngữ mà người chơi có thể đọc văn bản đã được địa phương hóa của bạn.
• Nền có thể có phía sau văn bản trên màn hình.

Ví dụ, thiết kế phản hồi màn hình sau đây khi một người chơi bị đánh dấu ra sẽ thay đổi kích thước phông chữ nhỏ hơn hoặc lớn hơn tùy thuộc vào thiết bị của người chơi, bao gồm đủ không gian ở hai bên văn bản tiếng anh cho các ngôn ngữ có bản dịch dài hơn, và bao gồm một nền tương phản để người chơi có thể đọc văn bản bất kể màu sắc nào có trong nền của họ.

Khi xác định một hệ thống văn bản cho trò chơi của riêng bạn, hãy xem xét những điều sau:

• Văn bản khó đọc khi nó hòa vào tiếng ồn của nền. Để cải thiện tính dễ đọc của UI của bạn, hiển thị văn bản trên nền màu tương phản hoặc với một đường viền.
• Nếu bạn không thay đổi kích thước văn bản của mình cho các thiết bị khác nhau, văn bản sẽ chiếm quá nhiều không gian hoặc trở nên nhỏ và không thể đọc được trên màn hình của người chơi. Để phát hiện sự khác biệt trong văn bản của bạn, kiểm tra thiết kế của bạn trên nhiều thiết bị trong suốt quá trình thiết kế.
• Các từ có thể mở rộng ra ngoài thiết kế ban đầu của bạn khi bạn địa phương hóa chúng sang các ngôn ngữ khác. Để cải thiện cấu trúc của thiết kế của bạn, tham khảo không gian mà văn bản của bạn có thể chiếm trên màn hình.
• Trong khi một số phông chữ có thể phù hợp với thẩm mỹ của trò chơi của bạn, chúng có thể khó đọc trong số lượng lớn. Vì lý do này, sử dụng văn bản cách điệu một cách tiết kiệm, chẳng hạn như cho tiêu đề hoặc văn bản cảnh báo.

Khi bạn đã có một kế hoạch cho phong cách nghệ thuật của UI của mình, bạn có thể chuyển sang phần tiếp theo của hướng dẫn để học cách tạo khung cho bố cục của từng yếu tố trong các quy trình làm việc của người chơi khác nhau.