Chọn một kiểu hình ảnh

Lựa chọn một phong cách nghệ thuật là quá trình lên kế hoạch một hướng nhìn thẩm mỹ cho các thành phần UI của bạn. Điều quan trọng là bắt đầu quá trình thiết kế của bạn với một hướng nhìn thẩm mỹ bởi vì các hướng nhìn cung cấp các quy tắc ngữ cảnh m

Sử dụng trình phát laser mẫu laser tag kinh nghiệm.rbxl file as a reference, this section of the user interface curriculum shows you how to make meaningful decisions on how to design your UI elements according to the genre of your experience, including guidance on:

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

Sau khi hoàn thành mục 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 truyền đạt cho người chơi qua UI 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 bạn. Thực hiện công việc này ở giai đoạn đầu

Có nhiều cách khác nhau để brainstorm các thành phần UI cần thiết cho yêu cầu gameplay của bạn, nhưng được khuyến nghị bắt đầu với việc tưởng tượng những gì mà một người chơi cần biết ngay khi tham gia trải nghiệm của bạn. Ví dụ, khi một người chơi mở trải ngh

• Mục tiêu của trải nghiệm là gì?
• Làm thế nào để tôi biết ai trong nhóm của tôi?
• Làm thế nào để tôi theo dõi điểm của đội tôi?
• Làm thế nào để tôi chọn một máy bay phản lực?
• Làm sao để tôi biết nơi các cánh tay laser của tôi bắn?
• Nếu tôi đang ở trên một thiết bị di động, tôi có thể bắn blaster của tôi?
• Sau khi tôi 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 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 nhãn ai đó bằng Blaster của tôi?
• Làm thế nào để tôi biết khi đội địch thành công tag 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 cho người chơi để thành công, bạn có thể sắp xếp UI cần thiết của mẫu laser tag trong ba loại cần thiết cho thành công:

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.

Phân loại UI của trải nghiệm của bạn thành các danh mục là hữu ích vì bạn có thể biến hình dạng nghệ thuật của mình xung quanh mỗi nhóm để tăng cường 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ủ

Sau khi sắp xếp UI của trải nghiệm của bạn 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ạimục. Để minh họa, mẫu thẻ laser sử dụng bảng dữ liệu 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 bạn, đã đến lúc bắt đầu tạo những lựa chọn stylistic và semantic cho mỗi nhóm các thành phần UI, bắt đầu với một chủ đề màu.

Chọn chủ đề màu

Một chủ đề màu , hoặc bảng màu, là một lựa chọn màu sắc mà mỗi người gửi tin nhắn qua ứng dụng đồng nhất trong trải nghiệm của bạn, chẳng hạn như sử dụng một màu sắc để cho thấy khi có thứ gì đó có thể chọ

Trong môn đệm về môi trường艺术 환경 , mỗi phần của môi trường laser tag được mã hóa màu sắc từ một xây dựngđi

Trải nghiệm laser tag mẫu tương tự sử dụng chủ đề màu này trong UI của mình để làm nổi bật thông tin liên quan đến mỗi đội, chẳng hạn như bộ chỉ dẫn đội của mỗi người chơi trong môi trườnggian 3D hoặc trì

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

• Sức mạnh của một chủ đề màu sắc dựa trên việc giúp người chơi tạo ra các mối quan hệ tâm lý 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 sắc của bạn để chỉ xem xét các thông tin chính xác mà bạn muốn người chơi liên hệ với các thành
• Để đảm bảo người chơi mù màu có thể hiểu thông điệp của chủ đề màu của bạn, không bao giờ 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 các biểu tượng, hình dạng và / hoặc hoạt họa để đảm bảo
• Quan trọng hơn là để UI của bạn có thể đọc được hơn là thẩm mỹ. Vì lý do này, ưu tiên giao diện đơn giản hơn với màu sắc đọc được trên cả các thành phần ánh 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 màu trung tính của đen và trắng cho hầu như mọi thành phần UI khác nhau mà khuất phục màn hình 2D. Black và white có mối quan hệ tương phản tốt và dễ đọc, và chúng đều dễ dà

Ủy biểu các biểu tượng đơn giản

Một icon là một biểu tượng đại diện cho một hành động, một vật thể hoặc một khái niệm trong một trải nghiệm. Đường nét những biểu tượng đơn giản và dễ nhận biết là quan trọng vì kết quả cu

Các biểu tượng đơn giản thường có một lối kiểu riêng từ các thành phần 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

Để bổ sung phong cách nghệ thuật này mà vẫn được độc đáo, tất cả các thành phần UI mà bạn sẽ học cách làm sau trong hướng dẫn này bao gồm một futuristic aesthetic và góc nhìn tròn mà không phù hợp với ngôn ngữ hình ảnh của 3D assets trong môi trường. Điều này

Để minh họa cho khái niệm này, hãy xem hai hình ảnh dưới đây từ trải nghiệm laser tag mẫu của crosshair cho phép người chơi biết blaster của họ đang bắn vào màn hình nào, và nút cho phép người chơi bắn blaster của họ vào các thiết b

Khi xây dựng 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 các lựa chọn theo dõi:

• Các biểu tượng đơn giản dễ dàng đọ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 đó sẽ trở nên không nhận dạng trên màn hình thiết bị di động.
• Icons là mạnh mẽ vì chúng có thể truyền đạt thông điệp bất kể ngôn ngữ của người chơi. Mặc dù nó không ảnh hưởng đến 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 localization.
• Nhiều trải nghiệm của cùng một thể loại sử dụng biểu tượng tương tự về mặt thẩm mỹ, 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 đựng đại diện cho phép thuật. Hôn ý các biểu tượng trong trải nghiệm của bạn để ngư

Nếu bạn không biết những loại icon thông thường trong thể loại trò chơi của bạn, hãy xem Cơ sở dữ liệu icon game. This free resource tool for UI designers includes screenshots from hundreds of games of different genres that you can reference during your design process.

Lập một Mệnh lệnh Tương Tác

Một trật tự hoạt tác là thứ tự các hoạt tác mà người chơi có thể có với UI của bạn. Khi có nhiều thành phần hoạt tác có thể tương tác trên màn hình, thì rất quan trọng để thiết lập một trật tự hoạt tác thuận tiện để giúp người chơi đưa ra các quyết định khi

Thông thường có ba loại tương tác trong một workflow:

• Tương Tác Chính – Hành động mà một người chơi có thể thực hiện nhiều nhất.
• Tương Tác Phụ – Hành động mà một người chơi có thể thực hiện như một hành động chính.
• Tương Tác Ba – Hành động mà một người ít khả năng thực hiện nhất.

Mỗi loại tương tác đều phải có một cấp độ nhấn mắt 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 niềm vui này, hãy xem hình ảnh bên dưới của hành động để lựa chọn một blaster trong trải nghiệ

Trong workflow này, hành động mà một người chơi có thể 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ế.

Mặc dù không thể nhưng, người chơi có thể không biết rằng họ có thể chọn một trong những nút blaster để giao tiếp với nhau nào blaster họ muốn sử dụng. Để giúp助 trong tình huống này, có hai nút mũi tên terciary người chơi có thể sử dụng

Nếu bạn đặt các interaction chính, thứ cấp và thứ cấp trong một trình tương tác khác, chẳng hạn như trao đổi nút SELECT 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õ

Khi xây dựng một trình tương tác cho các workflow trong trải nghiệm của bạn, hãy xem xét các lựa chọn theo dõi:

• 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, nó được khuyến nghị để cung cấp ít nhất một hình dạng phản hồi thị giác cho các thành phần UI có thể
• Nếu các nhãn trên các thành phần UI tương tác là nhơi hoặc giống nhau trong cùng một workflow, người chơi có thể lầm hiểu cách hoàn thành một hành động hoặc quy trình. Để tránh một trải nghiệm người chơi tiêu cực, tạo nhãn rõ dọn sạch, ngắn gọn và khác biệt với nhau * Nếu các thành phần UI tương tác quá lớn, chúng có thể làm mất trung tâm của 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 là nếu chúng ở gần nhau trên các thiết bị

Trong Triển khai trong Studio , bạn sẽ học cách sử dụng UIAspectRatioConstraint đối tượng để đảm bảo các thành phần UI duy trì một tỷ lệ kích thước cụ thể không bị thay

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

Một hệ thống chữ viết là một bộ quy tắc về chữ viết và kiểu dáng cho tất cả các từ trong UI của bạn, chẳng hạn như "luôn luôn sử dụng chữ màu đậm" hoặc "sử dụng chữ màu xanh khi tham khảo một biểu tượng sức k

Trong khi các hệ thống văn bản có thể biến đổi tùy thuộc vào thể loại trải 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ả các văn

• Các thiết bị người chơi 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 bản dịch của bạn.
• Hình ảnh nền 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 khi một người chơi bị thẻ ra sẽ thay đổi kích thước chữ của chúng tôi theo kích thước thiết bị của người chơi, bao gồm một kích thước chữ của người chơi dài hơn và bao gồm một hình nền làm mờ để người chơi có

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

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

Một khi bạn có kế hoạch cho kiểu trình duyệt của UI của bạn, bạn có thể tiến vào phần tiếp theo của hướng dẫn để học cách wireframe trình bày của mỗi thành phần trong các workflow người chơi khác nhau.