Phác thảo giao diện của bạn là quá trình thiết kế cấu trúc và dòng chảy thông tin mà bạn muốn truyền đạt thông qua giao diện người dùng trong nhiều quy trình làm việc khác nhau. Bước quan trọng này của hướng dẫn cho phép bạn lặp lại cách bố trí các yếu tố giao diện của mình, phát hiện điểm khó khăn và cải thiện trải nghiệm của người chơi trước khi bạn đầu tư thời gian và tài nguyên vào một thiết kế có vấn đề không phù hợp với trải nghiệm của bạn.
Sử dụng tệp .rbxl của trải nghiệm bắn laser mẫu làm tài liệu tham khảo, phần này của chương trình đào tạo giao diện người dùng sẽ chỉ cho bạn cách cấu trúc các yếu tố giao diện của bạn trên màn hình, bao gồm hướng dẫn về:
- Lập kế hoạch một hệ thống phân cấp trực quan cho giao diện của bạn, dẫn dắt một cách trực quan người chơi đến các tính năng và thông tin mà họ cần để thành công trong trải nghiệm của bạn.
- Bố trí các yếu tố giao diện bằng các hình dạng cơ bản để xem lại bố cục của các yếu tố giao diện của bạn bên cạnh giao diện và điều khiển cảm ứng cơ bản của Roblox.
- Phát triển quy trình người dùng để tính đến các hành động cần thiết mà người chơi cần thực hiện để đạt được mục tiêu của họ.
Sau khi bạn hoàn thành phần này, bạn sẽ học cách xây dựng và cấu hình giao diện của mình trong Studio sao cho phù hợp với phong cách nghệ thuật và các khung phác thảo của bạn.
Lập kế hoạch một hệ thống phân cấp trực quan
Hệ thống phân cấp trực quan là một cấu trúc tổ chức nổi bật các yếu tố giao diện theo thứ tự quan trọng của chúng. Lập kế hoạch một hệ thống phân cấp trực quan cho các quy trình làm việc khác nhau trong trải nghiệm của bạn là quan trọng vì nó giúp người chơi thành công trong việc đạt được mục tiêu của họ, điều này đặc biệt cần thiết cho lối chơi nhanh của các trải nghiệm bắn súng góc nhìn thứ nhất trong đó các mục tiêu thay đổi theo từng khoảnh khắc.
Các hệ thống phân cấp trực quan hiệu quả dẫn dắt người chơi qua những tính năng và thông tin mà họ cần để đáp ứng yêu cầu trò chơi của bạn theo cách mà họ tự nhiên nhìn vào màn hình để hoàn thành các quy trình. Ví dụ, hệ thống phân cấp trực quan của trải nghiệm bắn laser mẫu phải hướng dẫn người chơi qua các loại yếu tố giao diện sau khi họ điều hướng bản đồ và gắn thẻ người chơi trong đội đối thủ:
- Thông tin về mục tiêu của trải nghiệm.
- Thông tin về súng bắn.
- Thông tin về trạng thái của người chơi.
Vị trí của từng loại này trên màn hình trong thiết kế cuối cùng nổi bật thứ tự quan trọng của chúng:
- Danh mục đầu tiên gần đỉnh vì nó chứa các yếu tố giao diện có ý nghĩa nhất cho việc thắng trò chơi.
- Danh mục thứ hai chiếm đa số không gian màn hình gần giữa vì nó hoạt động như một điểm nhấn thu hút sự chú ý của người chơi đến hành động trong không gian 3D, và nó có ý nghĩa nhất cho việc chơi trò chơi.
- Danh mục thứ ba gần cạnh vì người chơi có thể đọc thông tin bên lề này mà không mất tập trung vào lối chơi.
Đối với một số thể 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 quan trọng đối với người chơi trong quy trình làm việc đó. Tuy nhiên, đối với các trải nghiệm bắn súng góc nhìn thứ nhất, người chơi cần nhìn thấy các yếu tố giao diện từ nhiều danh mục cùng một lúc vì tất cả đều cung cấp thông tin mà người chơi cần để thành công, như điểm số của đội họ, thời gian làm mát cho súng bắn, và nếu họ đã bị gán ra khỏi một vòng chơi.
Khi lập kế hoạch một hệ thống phân cấp trực quan 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 sau:
- Nếu bạn nhóm các yếu tố giao diện từ các danh mục khác nhau cùng nhau trên màn hình, người chơi sẽ không biết tìm đâu để tìm những gì họ cần. Để hỗ trợ người chơi trong việc điều hướng trải nghiệm của bạn, nhóm các yếu tố giao diện từ cùng một danh mục lại với nhau.
- 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 nào họ cần chú ý. Để tránh làm người chơi choáng ngợp với sự lộn xộn, hiển thị các yếu tố giao diện theo ngữ cảnh cho các quy trình làm việc khác nhau.
- Tương tự, nếu có quá nhiều yếu tố giao diện trong mỗi danh mục, điều này có thể làm người chơi phân tâm khỏi việc hiểu cách hoàn thành một hành động hoặc quy trình. Đó là lý do tại sao điều quan trọng là sử dụng phong cách nghệ thuật của bạn để cung cấp sự nhấn mạnh trực quan cho các thứ tự tương tác lý tưởng của bạn.
Để xem xét toàn bộ hệ thống phân cấp trực quan cho trải nghiệm bắn laser mẫu, hãy xem bảng sau:
| Danh mục | Các yếu tố giao diện | Hệ thống phân cấp trực quan |
|---|---|---|
| Thông tin về mục tiêu của trải nghiệm |
|
|
| Thông tin về súng bắn |
|
|
| Thông tin về trạng thái của người chơi |
|
|
Để biết thêm thông tin về việc ưu tiên các yếu tố giao diện trên màn hình, hãy xem Thiết kế UI & UX.
Bố trí các yếu tố giao diện
Giờ đây, khi bạn đã có một hệ thống phân cấp trực quan trong đầu, bạn có thể bố trí các yếu tố giao diện riêng lẻ bằng các hình dạng cơ bản để xem lại bố cục của giao diện tùy chỉnh của bạn bên cạnh giao diện cơ bản của Roblox trên nhiều thiết bị. Quá trình này cho phép bạn xem nơi bạn cần thay đổi thiết kế của mình sao cho hiệu quả trên tất cả các kích thước màn hình mà người chơi có thể sử dụng để truy cập trải nghiệm của bạn, chẳng hạn như trên điện thoại di động, máy tính bảng, laptop và màn hình TV.
Trước khi bắt đầu, bạn cần xác định mức độ không gian màn hình có sẵn cho các yếu tố giao diện tùy chỉnh của bạn trong khi tính đến giao diện cơ bản của Roblox. Ví dụ, theo mặc định, Roblox hiển thị các yếu tố giao diện sau trong mỗi trải nghiệm:
- Danh sách người chơi trong trải nghiệm.
- Thanh sức khỏe của nhân vật.
- Ba lô của nhân vật.
- Cửa sổ trò chuyện.
- Nút ghi lại.
- Menu popup của các động tác nhân vật.
Bạn có thể tắt bất kỳ yếu tố nào trong số này không đáp ứng yêu cầu lối chơi của trải nghiệm của bạn để tiết kiệm không gian màn hình cho giao diện tùy chỉnh của bạn. Ví dụ, trải nghiệm bắn laser mẫu không yêu cầu ba lô vì người chơi chỉ có khả năng chọn một súng bắn. Tuy nhiên, nếu người chơi có thể chọn nhiều súng bắn cùng một lúc, trải nghiệm có thể tắt giao diện cơ bản này để đảm bảo luôn có chỗ cho chọn súng khi người chơi hồi sinh, sau đó cung cấp một vị trí khác để chọn từ kho của bạn.
Ngoài giao diện cơ bản của Roblox, bạn cũng cần xem xét không gian màn hình cần thiết cho các điều khiển cảm ứng mặ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 thiết bị di động, một cần điều khiển ảo được hiển thị ở góc dưới bên trái của màn hình, và một nút nhảy được hiển thị ở góc dưới bên phải của màn hình. Điều này đảm bảo rằng người chơi luôn có thể điều hướng trải nghiệm của bạn, ngay cả khi họ không có quyền truy cập vào bàn phím hoặc bộ điều khiển.
Bằng cách tính đến cả các yếu tố giao diện cơ bản của Roblox cần thiết cho lối chơi của trải nghiệm của bạn, và khả năng có các điều khiển cảm ứng, bạn có thể bố trí các yếu tố giao diện tùy chỉnh của mình trong một thiết kế có thể điều chỉnh trên các thiết bị. Điều này rất quan trọng vì nó có nghĩa là bạn không cần duy trì các phiên bản riêng biệt của giao diện khi bạn cập nhật trải nghiệm của mình.
Để minh họa phương pháp này, hãy xem hai hình ảnh sau về cách mà trải nghiệm bắn laser mẫu bố trí các yếu tố giao diện tùy chỉnh cho cả thiết bị di động và PC. Cả hai hình ảnh đều bao gồm:
- Các hình dạng cơ bản để đại diện cho giao diện tùy chỉnh vì nó cho phép thiết kế trải qua nhiều lần lặp trước khi đạt được thiết kế cuối cùng.
- Màu xám giúp mắt có thể theo dõi thông tin mà không bị phân tâm bởi môi trường nền đầ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 hoạt động để xem thông tin chúng chiếm bao nhiêu không gian trên màn hình.
- Không gian cho các điều khiển di động ngay cả khi chúng không cần thiết cho các thiết bị PC.
Khi bạn thiết kế các bố cục của mình theo cách này trong khi suy nghĩ về số lượng yếu tố giao diện có thể tồn tại trên màn hình cùng một lúc, bạn đang tạo ra một cách giải quyết cho tất cả các bố cục tiềm năng theo các thiết bị và quy trình làm việc của người chơi.
Khi bố trí các yếu tố giao diện cho các bố cục của bạn, hãy xem xét những điều sau:
- Vị trí và cách bạn bố trí giao diện của bạn có thể ảnh hưởng đến bố cục của các bố cục. Nhắm đến sự cân bằng và đối xứng trong số lượng và kích thước của các yếu tố giao diện tùy chỉnh của bạn bên cạnh giao diện cơ bản của Roblox.
- Tương tác với giao diện ở xa các góc dưới của một số thiết bị di động và máy tính bảng có thể gây khó chịu hoặc không thể thực hiện được. Đặt các yếu tố tương tác trong các khu vực dễ tiếp cận gần vị trí tự nhiên của ngón tay.
- Khi người chơi điều hướng qua môi trường của bạn, không gian 3D có thể làm phân tâm khỏi giao diện trên màn hình. Kiểm tra các bố cục của bạn với nhiều nền tảng khác nhau để đảm bảo rằng các yếu tố giao diện trên màn hình vẫn rõ ràng và dễ đọc.
Phát triển quy trình của người dùng
Quy trình người dùng là một tập hợp các con đường mà người chơi có thể đi trong một trải nghiệm để hoàn thành một nhiệm vụ, chẳng hạn như chọn một vũ khí, mua một vật phẩm, hoặc hồi phục một nhân vật. Quy trình người dùng thường bắt đầu từ nơi bạn mong đợi người chơi bắt đầu nhiệm vụ và kết thúc với hành động cuối cùng hoặc thành tựu mà người chơi đạt được ở cuối nhiệm vụ. Ngoài ra, quy trình người dùng hiệu quả cũng tính đến các con đường bất thường mà người chơi có thể muốn đi theo để đạt được cùng một mục tiêu.
Biểu đồ luồng sau đây hiển thị quy trình người dùng của một người chơi tham gia và chơi trải nghiệm bắn laser mẫu. Khi một người chơi mở trải nghiệm, họ tham gia vào một phòng chờ. Nếu vòng không bắt đầu, họ sẽ chờ cho đến khi vòng lặp bắt đầu, nếu không thì họ tham gia vào một đội đang chơi trò chơi. Nếu điều kiện kết thúc chưa được đáp ứng, chẳng hạn như đạt giới hạn thời gian hoặc gán ra 10 người chơi mỗi đội, thì người chơi chọn súng bắn của họ và trải nghiệm lối chơi chính của việc gắn thẻ hoặc bị gán thẻ bởi đội đối thủ, trang bị một súng bắn mới trong đấu trường hoặc phục hồi sau khi bị gán ra. Khi người chơi đạt điều kiện kết thúc, họ hoàn thành vòng chơi và quay lại phòng chờ.
Việc phát triển quy trình người dùng cho mọi thứ mà người chơi có thể làm trong trải nghiệm của bạn là quan trọng vì điều này cho phép bạn đánh giá nơi và cách bạn muốn họ hoàn thành nhiệm vụ, và dự đoán nơi bạn có thể giảm bớt các điểm khó khăn cho bất kỳ ai theo con đường riêng của họ. Ví dụ, nếu bạn phát triển thêm quy trình người dùng cho trải nghiệm bắn laser mẫu, điều gì xảy ra khi người chơi:
- Bỏ cuộc một vòng trước khi điều kiện kết thúc được đáp ứng?
- Rời trải nghiệm trong khi tham gia một đội?
- Nhận cuộc gọi điện thoại giữa vòng chơi?
- Mất kết nối với vòng chơi trong chưa đầy 15 giây?
Bằng cách hình dung tất cả các hành động có thể người chơi có thể thực hiện hoặc các kịch bản có thể xảy ra với 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 cách bố cục của các yếu tố giao diện của bạn ảnh hưởng tiêu cực đến trải nghiệm của họ, sau đó thực hiện các điều chỉnh trước khi triển khai các thiết kế của bạn trong Studio. Nếu các nhiệm vụ cảm thấy trực quan, không gây cản trở và thuận tiện, người chơi có khả năng cao sẽ dành thời gian trong trải nghiệm của bạn và quay lại vào một dịp khác.
Khi phát triển quy trình người dùng cho trải nghiệm của riêng bạn, hãy xem xét những điều sau:
- 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à kiểm tra các bố cục của bạn với nhiều loại người chơi khác nhau để hiểu được các lộ trình họ muốn đi để đạt được mục tiêu của mình.
- Biểu đồ quy trình có thể trở nên khó đọc và không hiệu quả nếu chúng cố gắng nắm bắt nhiều kịch bản cùng một lúc trong sơ đồ. Để tập trung sự chú ý của bạn vào mỗi nhiệm vụ, giới hạn biểu đồ quy trình vào một nhiệm vụ chính tại một thời điểm.
- Các mẫu tương tác thay đổi tùy thuộc vào việc người chơi đang sử dụng điều khiển cảm ứng, bộ điều khiển trò chơi, hay 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 quy trình người dùng độc đáo cho mỗi thiết bị để xác định các điểm khó khăn và đơn giản hóa các quy trình làm việc.
Sau khi bạn hoàn tất thiết kế của các khung phác thảo, đã đến lúc chuyển sang Studio và biến giao diện của bạn thành hiện thực.