Wireframing your layouts là quá trình thiết kế cấu trúc và dòng chảy của thông tin bạn muốn truyền thông qua UI trong các workflow. Bước này quan trọng của hướng dẫn cho phép bạn lặp lại cấu trúc của các thành phần UI của bạn, khám phá các đi
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 structure your UI elements on the screen, including guidance on:
- Lên kế hoạch một lớp hiện đại cho UI của bạn mà dễ dàng hướng dẫn người chơi đến các tính năng và thông tin họ cần để thành công trong trải nghiệm của bạn.
- Chặn các thành phần trong UI bằng hình dạng cơ bản để xem bố trí của các thành phần trong UI của bạn cùng với UI chính của Roblox và các nút điều khiển.
- Phát triển dòng chảy người dùng để tính toán các hành động cần thiết mà người chơi thực hiện để đạt được mục tiêu của họ.
Sau khi hoàn thành phần này, bạn sẽ học cách xây dựng và tùy chỉnh UI của bạn trong Studio tôn trọng phong cách nghệ thuật và wireframe của bạn.
Lên kế hoạch một Hệ thống Visuals
Một cấu trúc tổ chức là một cấu trúc tổ chức được tạo thành các thành phần bằng nhau theo trình tự ưu tiên của chúng. Kế hoạch một cấu trúc tổ chức cho các workflow khác nhau trong trải nghiệm của bạn quan trọng vì nó đặt người chơi lên cho thành công trong việc hoàn th
Các hiệu lực hàng đầu thị giác dẫn người chơi qua các tính năng và thông tin họ cần để hoàn thành yêu cầu gameplay của bạn theo nơi họ tự nhiên nhìn trên màn hình để hoàn thành các workflow. Ví dụ, hiệu lực hàng đầu của trang bị laser mẫu phải dẫn ng
- Thông tin về mục tiêu của trải nghiệm.
- Thông tin về blaster.
- Thông tin về tình trạng của người chơi.
Vị trí mỗi thể loại này có trên màn hình trong khu vực tổng kết cuộc thi của chúng tôi nhấn mạnh sự quan trọng của họ:
- Thể loại đầu tiên ở gần trên cùng vì nó chứa các thành phần UI có ý nghĩa nhất về cách thắng trò chơi.
- Thứ hạng thứ hai chiếm phần lớn của khu vực màn hình gần giữa vì nó hoạt động như điểm focall để thu hút sự chú ý của người chơi vào hành động trong không gian 3D, và nó có ý nghĩa nhất đối với việc chơi trò chơi.
- Thứ ba là gần các bên vì người chơi có thể đọc thông tin vùng lân cận này mà không phải chuyển hướng từ trò trải nghiệm trò chơi.
Đối với một số loại trải nghiệm, bạn chỉ cần hiển thị một danh mục thông tin tại một thời điểm vì đó là loại thông tin duy nhất đối với người chơi trong quá trình làm việc đó. Tuy nhiên, đối với c
Khi lên kế hoạch một lớp hiện đại cho các workflow trong kinh nghiệm của bạn, hãy xem xét các lựa chọn theo dõi:
- Nếu bạn nhóm các thành phần UI từ các danh mục khác nhau trên toàn bộ màn hình, người chơi sẽ không biết nơi để tìm những gì họ cần. Để giúp người chơi trong việc trình bày trải nghiệm của bạn, nhóm các thành phần UI từ cùng một danh mục .
- Nếu bạn có quá nhiều danh mục trên màn hình cùng một lúc, người chơi có thể không biết thông tin mà họ cần phải chú ý đến. Để tránh bị quá tải với những người chơi bị rối, hiển thị UI elements contextually for different workflows .
- Tương tự như vậy, nếu có quá nhiều yếu tố UI mỗi thể loại, nó có thể làm sao cho người chơi hiểu biết về cách hoàn thành một hành động hoặc quy trình. Vì lý do này, nó quan trọng để sử dụng phong cách nghệ thuật của bạn để cung cấp sự tập trung thị giác cho các đơn đặt hàng tươ
Để xem tổng quát về cấp hiệp thông bằng thị giác cho trải nghiệm laser tag mẫu, xem bảng sau:
| Thể loại | Các thành phần UI | Hierarchical thị lực |
|---|---|---|
| Thông tin về mục tiêu của trải nghiệm |
|
|
| Thông tin về blaster |
|
|
| Thông tin về tình trạng của người chơi |
|
|
Để biết thêm thông tin về việc ưu tiên các thành phần UI trên màn hình, xem Thiết kế UI & UX.
Chặn trong Các thành phần UI
Bây giờ bạn có một cấu trúc thị giác trong tâm trí, bạn có thể chặn các thành phần UI cụ thể bằng các hình dạng cơ bản để xem bố trí của UI tùy chỉnh của bạn cùng với Roblox's core UI trên nhiều thiết bị. This process allows you to see where you need to modify your design so that it's effective on
Trước khi bạn bắt đầu, bạn cần phải tìm hiểu bao nhiêu không gian màn hình có sẵn cho các thành phần người dùng tùy chỉnh của bạn khi xem xét các thành phần người dùng màn hình chính của Roblox. Ví dụ, bởi mặc định, Roblox hiển thị các thành phần người dùng này trong mọi trải nghi
- Một danh sách các người chơi trong trải nghiệm.
- Dòng sức khỏe của nhân vật.
- Cặp của nhân vật.
- Một cửa sổ trò chuyện.
- Một nút bắt.
- Một menu popup của biểu cảm nhân vật.
Bạn có thể tắt bất kỳ trong số những thành phần này không đáp ứng các yêu cầu gameplay của trải nghiệm của riêng bạn để tiết kiệm không gian màn hình cho UI của bạn khochỉnh. Ví
Ngoài UI chính của Roblox, bạn cũng cần xem xét các khu vực màn hình cần thiết cho các nút điều khiểnmặc định của Roblox. Ví dụ, khi người chơi truy cập trải nghiệm của bạn bằng một thiết bị di động, một thanh trượ
Bằng cách xem xét các thành phần trình duyệt của Roblox cần thiết cho gameplay của trải nghiệm của bạn, và khả năng điều khiển cảm ứng, bạn có thể khối trong các thành phần UI tùy chỉnh của bạn trong một thiết kế được tích hợp xu
Để minh họa cách thức này, hãy xem hai hình ảnh bên dưới cho thấy cách mà thẻ laser mẫu xuất hiện khối trong các thành phần UI tùy chỉnh cho cả mobile và PC. Cả hai hình ảnh đều bao gồm:
- Các hình dạng cơ bản để diễn tả UI tùy chỉnh vì nó cho phép thiết kế dễ dàng qua nhiều lần lặp trước khi đạt được thiết kế cuối cùng.
- Màu sắc màu xám cho phép mắt theo dõi thông tin mà không bị phân tâm bởi một môi trường màu sắc đầy màu sắc
- Trạng thái mở của cửa sổ trò chuyện và danh sách người chơi đang chơi và cửa sổ trò chuyện để xem bao nhiêu không gian mà chúng chiếm trên màn hình.
- Không gian cho điều khiển cho điện thoại, ngay cả khi chúng không cần thiết cho các thiết bị PC.
Khi bạn thiết kế bố trí của bạn theo cách này khi đang nghĩ về việc có bao nhiêu thành phần UI có thể tồn tại trên màn hình cùng một lúc, bạn đang bảo vệ tương lai cho tất cả các bố trí tiềm năng theo thiết bị và workflows của người chơi.
Khi chặn các thành phần trong UI cho các bố trí của bạn, hãy xem xét các tùy chọn theo dõi:
- Nơi và cách bạn chặn trong UI của bạn có thể ảnh hưởng đến bố trí của bố trí của bạn. Hướng tới sự cân bằng và hài hòa trong số lượng và kích thước các thành phần UI tùy chỉnh của bạn cùng với Roblox's core UI.
- Tương tác với UI ở xa một số góc dưới của một số thiết bị di động và máy tính bảng là bất kỳ khó chịu hoặc không thể thiết bị. Đặt các thành phần tương tác ở gần vị trí nghỉ ngơi tự nhiên cho ngón tay. * Khi người chơi di chuyển qua môi trường của bạn, không gian 3D có thể trở nên phức tạp khỏi UI trên màn hình của bạn. Thử nghiệm các bố trí của bạn chống lại một loạt các hình nền khả dụng để đảm bảo các thành phần trên màn hình của bạn vẫn được rõ ràng
Để biết thêm thông tin về những gì để xem xét khi thiết kế và khối trong các thành phần UI của bạn cho nhiều thiết bị, xem Vị trí và Kích thước - Yếu tố vị trí và kích thước .
Phát triển các dòng người dùng
Một user flow là một bộ sư đường mà người chơi có thể thực hiện trong một trải nghiệm để hoàn thành một nhiệm vụ, chẳng hạn như chọn vũ khí, mua một món vật phẩmhoặc chữa một nhân vật. User flows thường bắt đầu nơi bạn mong đợ
Hình dạng bảng dữ liệu dưới đây hiển thị dòng chảy người dùng của một người vào và chơi trải nghiệm Laser Tag. Khi một ng
Quan trọng là phải phát triển dòng chảy người dùng cho tất cả những gì người chơi có thể làm trong trải nghiệm của bạn bởi vì nó cho phép bạn đánh giá nơi và cách bạn muốn họ hoàn thành các nhiệm vụ, và dự đoán nơi bạn có thể giảm đau để cho bất kỳ ai theo con
- Bỏ hàng trước khi điều kiện kết thúc được đáp ứng?
- Rời khỏi trò chơi khi tham gia một đội?
- Nhận một cuộc gọi điện thoại giữa một phiên?
- Mất kết nối của họ đến vòng ít hơn 15 giây?
Bằng cách xem tất cả các hành động tiềm năng mà người chơi có thể thực hiện hoặc các kịch bản có thể xảy ra cho người chơi trong khi hoàn thành các nhiệm vụ, bạn có thể xác định tốt hơn làm thế nào bố trí của các thành phần UI của bạn ảnh hưởng
Khi phát triển dòng chảy người dùng cho trải nghiệm của riêng bạn, hãy xem xét các lựa chọn sau theo dõi:
- Những gì bạn muốn người chơi làm trong trải nghiệm của bạn và những gì họ muốn làm có thể hoàn toàn khác nhau. Tốt nhất là thử các bố trí của bạn với nhiều loại người chơi để có một hiểu biết về những con đường họ muốn đạt được mục tiêu của họ.
- Các bảng dòng có thể trở nên khó đọc và hiệu quả hơn nếu chúng cố gắng để bắt nhiều tình huống cùng một lúc trong bản vẽ. Để tập trung sự chú ý của bạn vào mỗi nhiệm vụ, giới hạn bảng dòng đến một nhiệm vụ chính ở một thời điểm .
- Các mô hình tương tác có thể thay đổi tùy vào whether người chơi đang sử dụng các nút điều khiển, gamepad hoặc chuột máy tính để tương tác với trải nghiệm của bạn. Nếu bạn đang thiết kế cho nhiều thiết bị, phát triển các mô hình tương tác độc đáo cho mỗi thiết b
Sau khi hoàn thành thiết kế của các khung của bạn, đã đến lúc di chuyển vào Studio và làm cho UI của bạn đến cuộc sống.