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ên kế hoạch một hướng thẩm mĩ cho các thành phần UI của bạn.Thiết yếu để bắt đầu quá trình thiết kế của bạn với một phong cách nghệ thuật bởi vì phong cách nghệ thuật cung cấp các quy tắc mặt hình học bạn có thể tham khảo để đảm bảo UI của bạn dễ dàng cung cấp thông tin cho người chơi về những gì họ có thể làm trong trải nghiệm của bạn.

Sử dụng tập tin trải nghiệm nhãn laser mẫu.rbxl như một tham khảo, phần này của chương trình giảng dạy giao diện người dùng cho bạn thấy cách thực hiện các 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 kinh nghiệm của bạn, bao gồm hướng dẫn về:

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

Sau khi hoàn thành phần này, bạn sẽ học cách thiết kế cấu trúc và dòng chảy thông tin bạn muốn gửi đến người chơi thông qua giao diện người dùng trong trải nghiệm của bạn.

Xác định các thành phần 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 các thành phần UI bạn cần cho các loại thông tin khác nhau bạn muốn truyền đạt cho khán giả của mình.Làm việc này ngay từ đầu quá trình thiết kế của bạn là rất quan trọng bởi vì nó cho phép bạn phân loại các thành phần UI theo mục đích chức năng của chúng, đưa ra các quyết định theo nghĩa để người chơi tương tác với mỗi thành phần UI, và lên kế hoạch nơi bạn có thể tái sử dụng các thành phần UI trong trải nghiệm của mình.

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

• Mục tiêu của trải nghiệm là gì?
• Làm thế nào để tôi biết ai đang ở trong nhóm của tôi?
• Làm thế nào để theo dõi điểm của đội tôi?
• Làm thế nào để tôi chọn một máy phun?
• Làm thế nào tôi biết nơi blaster bắn laser?
• Nếu tôi ở trên một thiết bị di động, làm thế nào tôi bắn blaster của mình?
• Sau khi bắn một 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?
• Làm thế nào tôi biết khi tôi thành công trong việc gắn thẻ ai đó với blaster của tôi?
• Làm thế nào tôi biết khi đội địch thành công gắn thẻ tôi?

Bằng cách sử dụng những câu hỏi này để hiểu những thông tin nào là bắt buộc đối với người chơi để thành công, bạn có thể phân loại nhu cầu giao diện người dùng của trải nghiệm laser mẫu thành ba danh mục:

1. Thông tin về mục tiêu của trải nghiệm.
2. Thông tin về blaster.
3. Thông tin về tình trạng của người chơi.

Sắp xếp các yêu cầu UI của trải nghiệm của bạn thành các danh mục là hữu ích bởi vì bạn có thể biểu hiện phong cách nghệ thuật xung quanh mỗi nhóm để làm nổi bật những 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 bạn cho người chơi biết các hành động họ có thể thực hiện đối với tình trạng tháisứ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ể nhận ra chức năng của họ một cách nhanh chóng.

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

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

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

Một chủ đề màu hoặc bảng màu , là một lựa chọn các màu mà mỗi cái giao tiếp một thông điệp thông qua ứng dụng nhất quán trong trải nghiệm của bạn, chẳng hạn như sử dụng một màu sáng để chỉ ra khi có thể chọn được điều gì đó.Áp dụng một chủ đề màu cho các yếu tố UI của bạn là quan trọng, đặc biệt là khi bạn dựa vào các tiêu chuẩn màu sắc trong thể loại trải nghiệm của bạn, bởi vì nó 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 thẻ laser được mã hóa màu từ quan điểm từ trên xuống để phân biệt khu vực nào của bản đồ gần khu vực sinh sản của mỗi đội: mint cho đội tập hợp ở bên trái của bản đồ, và carnation pink cho đội tập hợp ở bên phải của bản đồ.Những màu cụ thể này hữu ích bởi 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 môi trường xung quanh và tự hướng dẫn mình mà không phụ thuộc vào hướng mà họ đang đối mặt trong tòa xây dựng.

>

Trải nghiệm thẻ laser mẫu sử dụng chủ đề màu tương tự này trong giao diện người dùng để 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 đội mà che phủ 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ải nghiệm trong quá trình chơi game nhanh chóng của một trải nghiệm bắn súng góc nhìn thứ nhất, đặc biệt là khi người chơi cần đưa ra các quyết định nhanh chóng trong khi di chuyển qua môi trường.

Khi chọn một chủ đề màu cho trải nghiệm của riêng bạn, hãy xem xét những theo dõi:

• Sức mạnh của một chủ đề màu dựa trên việc giúp người chơi thiết lập các kết nối tư duy nhanh 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 của bạn chỉ để nhấn mạnh thông tin chính 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 người chơi bị mù màu có thể hiểu được thông điệp của chủ đề màu sắc của bạn, đừng chỉ dựa vào màu một mình để phân biệt giữa các thành phần UI.Thay vào đó, kết hợp màu với biểu tượng, hình dạng và/hoặc hoạt họa để đảm bảo UI của bạn giao tiếp hiệu quả với mọi người chơi.
• Nó quan trọng hơn đối với UI của bạn là có thể đọc được hơn là thẩm mĩ.Vì lý do này, ưu tiên giao diện người dùng đơn giản với màu vẫn có thể đọc đượ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 ở điểm cuối cùng, trải nghiệm laser tag mẫu sử dụng các màu trung lập của đen và trắng cho gần như tất cả các thành phần UI khác nhau che lấp màn hình 2D.Đen và trắng tương phản với nhau tốt, 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 màu sắc khác.

Nét vẽ các biểu tượng đơn giản

Một biểu tượng icon là một biểu tượng đại diện cho một hành động, đối tượng hoặc khái niệm trong một trải nghiệm.Xác định các biểu tượng đơn giản và trực quan là 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 nói với họ thông qua giao diện người dùng của bạn mà không sử dụng văn bản, điều này có thể làm lộn xộn màn hình và kéo sự chú ý khỏi nội dung quan trọng.Quá trình này càng quan trọng hơn nếu khán giả truy cập trải nghiệm của bạn bằng một màn hình nhỏ trên các thiết bị di động.

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

Để bổ sung phong cách nghệ thuật này trong khi vẫn giữ nguyên sự độc đáo, tất cả các thành phần UI mà bạn sẽ học để tạo sau này trong hướng dẫn này bao gồm một phong cách thẩm mĩ tương lai và các góc tròn không phù hợp với ngôn ngữ hình dạng của 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 với thông tin khác trong 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ải nghiệm thẻ laser mẫu cho crosshair cho biết nơi mà người chơi có thể bắn blaster của họ lên màn hình, và nút cho phép người chơi bắn blaster của họ trên các thiết bị di động.Cả hai biểu tượng bao gồm các góc mềm để phù hợp với thế giới chung, nhưng hình dạng lục giác và tròn của chúng tách biệt chúng khỏi bất cứ thứ gì một người chơi có thể liên kết biểu tượng với trong trải nghiệm.

Khi xác định các biểu tượng đơn giản cho trải nghiệm của riêng bạn, hãy xem xét những điều theo dõi:

• Biểu tượng đơn giản vẫ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 biểu tượng của bạn sẽ trở nên không thể nhận ra trên màn hình thiết bị di động.
• Biểu tượng mạnh mẽ bởi 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à nó không ảnh hưởng đến sự hiểu biết của người dùng về UI của bạn, thay thế văn bản không cần thiết bằng biểu tượng để cải thiện nỗ lực dịch thuật.
• Nhiều trải nghiệm cùng một 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 kiếm đại diện cho sức mạnh, hoặc một cái bình đại diện cho phép thuật. Tôn vinh biểu tượng bên trong thể loại trải nghiệm của bạn để người chơi có thể hiểu biểu tượng của bạn mà không cần hướng dẫn bổ sung.

Nếu bạn không biết các loại biểu tượng nào phổ biến trong thể loại kinh nghiệm của bạn, hãy xem cơ sở dữ liệu Game UI Database.Công cụ tài nguyên miễn phí này cho các nhà thiết kế UI bao gồm hình ảnh chụp màn hình từ hàng trăm trò chơi của các 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.

Xác lập một trật tự tương tác

Một thứ tự tương tác là chuỗi 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 thành phần UI tương tác trên màn hình, việc thiết lập một trật 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 các quyết định khi họ di chuyển 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à một người chơi có khả năng thực hiện nhất.
• Tương tác thứ cấp – Hành động mà một người chơi có thể 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 có khả năng thực hiện thấp nhất.

Mỗi loại tương tác phải có một cấp độ nhấn mạnh hình ảnh khác nhau tùy thuộc vào khả năng một 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 đây của lệnh tương tác cho dòng công việc để chọn một blaster trong trải nghiệm laser mẫu, trong đó A đại diện cho tương tác chính, B đại diện cho tương tác thứ cấp và C đại diện cho tương tác thứ ba.

Trong dòng công việc này, hành động mà một người chơi có nhiều khả năng thực hiện là chọn giữa hai loại blaster khác nhau, vì vậy các nút blaster lớn hơn nhiều so với bất kỳ thành phần tương tác nào khác trong thiết kế.Cấp độ nhấn mạnh hình thức này thu hút sự chú ý của người chơi, và kéo mắt họ đến giữa các thành phần UI chung.Sau khi người chơi đưa ra quyết định, bước tiếp theo logic 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.Vì lý do này, nút SELECT 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 blaster để giao tiếp blaster nào 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 tinh tế và nhỏ hơn nhiều so với các yếu tố của tương tác chính và thứ cấp, nhưng chúng cũng có thể nhận thấy được với người chơi cần hướng dẫn về các hành động họ có thể thực hiện.

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

Khi thiết lập một lệnh tương tác cho các quy trình làm việc trong trải nghiệm của riêng bạn, hãy xem xét những điều theo dõi:

• Người chơi cần có sự hiểu biết rõ ràng khi nào họ có thể tương tác với giao diện người dùng của bạn để thực hiện hành động.Vì lý do này, nó được khuyến khích cung cấp ít nhất một hình thức phản hồi hình ảnh cho các thành phần UI có thể tương tác, chẳng hạn như hiển thị một bản khái niệm hoặc thay đổi kích cỡ, màu sắc hoặc hoạt họa của nút khi nó ở trong tâm trí.
• Nếu các nhãn trên các thành phần UI tương tác không rõ ràng hoặc giống 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 quá trình.Để tránh trải nghiệm người chơi tiêu cực, tạo nhãn dễ dọn sạch, ngắn gọn và khác biệt với nhau .
• Nếu các yếu tố giao diện người dùng tương tác quá lớn, chúng có thể làm mất tập trung 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ó lựa chọn, đặc biệt nếu chúng ở gần kề trên các thiết bị di động.Vì lý do này, rất quan trọng để kiểm tra kích thước của các thành phần UI tương tác của bạn trên các kích thước màn hình khác nhau .

Trong Thực hiện trong Studio, bạn sẽ học cách sử dụng UIAspectRatioConstraint các đối tượng để đảm bảo các thành phần UI duy trì một tỷ lệ khác biệt cụ thể bất kể thiết bị người dùng sử dụng để truy cập trải nghiệm 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 tuân thủ đề xuất Kích thước và khoảng cách mục tiêu chạm của Thông lượng truy cập Nội dung Web dành cho người khuyết tật để tạo một khu vực chạm cho các thành phần giao diện người dùng tương tác ít nhất 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 bộ quy tắc về phông chữ và phong cách cho tất cả các từ trong UI của bạn, như "luôn luôn in đậm tiêu đề" hoặc "sử dụng phông chữ xanh khi tham chiếu một 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 đồng nhất trong suốt trải nghiệm của mình để người chơi biết những gì họ có thể mong đợi khi tìm kiếm thông tin họ cần.

Trong khi các hệ thống văn bản có thể thay đổi tùy thuộc vào thể loại kinh nghiệm 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 trải nghiệm truy cập và 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ư:

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

Ví dụ, thiết kế phản hồi màn hình tiếp theo khi một người chơi bị nhãn sẽ tăng lên kích thước phông chữ nhỏ hơn hoặc lớn hơn theo thiết bị của người chơi, bao gồm đủ không gian ở cả hai bên của văn bản tiếng Anh cho các ngôn ngữ có bản dịch lâu hơn, và bao gồm một nền đối lập để người chơi có thể đọc văn bản bất kể màu nền của họ.

Khi xác định một hệ thống văn bản cho trải nghiệm của riêng bạn, hãy xem xét những theo dõi:

• Văn bản khó đọc khi nó hòa lẫn với tiếng ồn của nền nhạc nền.Để cải thiện độ dễ đọc của UI của bạn, hiển thị văn bản trên một màu tương phản hoặc với một đường nét .
• Nếu bạn không thay đổi kích cỡ văn bản 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 những 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ế.
• Từ có thể mở rộng ngoài thiết kế ban đầu của bạn khi bạn dịch chúng sang các ngôn ngữ khác.Để cải thiện bố trí của thiết kế của bạn, tham chiếu nhiều không gian nhất có thể 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ải nghiệm 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ó phong cách thưa thớt , chẳng hạn như cho tiêu đề hoặc văn bản cảnh báo.

Khi bạn có kế hoạch cho phong cách nghệ thuật của UI, bạn có thể chuyển sang phần tiếp theo của hướng dẫn để học cách thiết kế bố trí của mỗi yếu tố trong các luồng công việc của người chơi khác nhau.