Phác thảo bố cục của bạn

Phác thảo bố cục của bạn là quá trình thiết kế cấu trúc và luồng thông tin mà bạn muốn truyền đạt thông qua giao diện người dùng (UI) trong các 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 sắp xếp các yếu tố UI của mình, phát hiện các điểm đau 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ò chơi của bạn.

Sử dụng tệp trò chơi laser tag mẫu .rbxl làm tham chiếu, phần này của chương trình giảng dạy giao diện người dùng cho bạn biết cách cấu trúc các yếu tố UI 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 hình ảnh cho UI của bạn dẫn dắt 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ò chơi của bạn.
• Chặn các yếu tố UI bằng các hình dạng cơ bản để xem xét sự bố trí của các yếu tố UI của bạn bên cạnh UI cốt lõi và các điều khiển cảm ứng của Roblox.
• Phát triển các luồng người dùng để tính đến các hành động cần thiết mà người chơi phải 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 UI 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 hình ảnh

Một hệ thống phân cấp hình ảnh là một cấu trúc tổ chức làm nổi bật các yếu tố UI theo thứ tự quan trọng của chúng. Lập kế hoạch một hệ thống phân cấp hình ảnh cho các quy trình làm việc khác nhau trong trò chơi của bạn là rất 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ò chơi bắn súng góc nhìn thứ nhất, trong đó các mục tiêu thay đổi từ khoảnh khắc này sang khoảnh khắc khác.

Các hệ thống phân cấp hình ảnh hiệu quả hướng dẫn người chơi qua các tính năng và thông tin mà họ cần để đáp ứng các yêu cầu về lối 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 làm việc. Ví dụ, hệ thống phân cấp hình ảnh của trò chơi laser tag mẫu phải hướng dẫn người chơi qua các danh mục yếu tố UI sau khi họ điều hướng bản đồ và gán nhãn người chơi trong đội đối thủ:

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.

Vị trí của mỗi danh mục này trên màn hình trong thiết kế cuối cùng làm 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ố UI có ý nghĩa nhất về cách chiến thắng trò chơi.
• Danh mục thứ hai chiếm phần lớn không gian màn hình gần giữa vì nó đóng vai trò là điểm nhấn để 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 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 ngoại vi này mà không làm phân tâm sự chú ý của họ khỏi lối chơi.

Đối với một số thể loại trò chơi, 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ò chơi bắn súng góc nhìn thứ nhất, người chơi cần thấy các yếu tố UI 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, chẳng hạn như điểm số của đội họ, thời gian hồi chiêu cho khẩu súng của họ, và liệu họ có bị gán nhãn ra khỏi một vòng hay không.

Khi lập kế hoạch một hệ thống phân cấp hình ảnh 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:

• Nếu bạn nhóm các yếu tố UI từ các danh mục khác nhau lại với nhau trên màn hình, người chơi sẽ không biết nơi nào để tìm những gì họ cần. Để hỗ trợ người chơi trong việc điều hướng trò chơi của bạn, nhóm các yếu tố UI 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ố UI 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ố UI cho mỗi danh mục, điều đó có thể làm phân tâm người chơi khỏi việc hiểu cách hoàn thành một hành động hoặc quy trình. Vì lý do này, đ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 hình ảnh cho các thứ tự tương tác lý tưởng của bạn.

Để xem xét đầy đủ hệ thống phân cấp hình ảnh cho trò chơi laser tag mẫu, hãy xem bảng sau:

Chặn các yếu tố UI

Bây giờ bạn đã có một hệ thống phân cấp hình ảnh trong tâm trí, bạn có thể chặn các yếu tố UI riêng lẻ bằng các hình dạng cơ bản để xem xét sự bố trí của bố cục UI tùy chỉnh của bạn bên cạnh UI cốt lõi của Roblox trên nhiều thiết bị. Quá trình này cho phép bạn thấy nơi bạn cần điều chỉnh thiết kế của mình để nó 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ò chơi của bạn, chẳng hạn như trên điện thoại di động, máy tính bảng, máy tính xách tay và màn hình TV.

Trước khi bạn bắt đầu, bạn cần xác định không gian màn hình có sẵn cho các yếu tố UI tùy chỉnh của bạn trong khi tính đến UI cốt lõi của Roblox. Ví dụ, theo mặc định, Roblox hiển thị các yếu tố UI sau trong mọi trò chơi:

• Danh sách người chơi trong trò chơi.
• 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 chụp.
• Menu bật lên của các biểu cảm nhân vật.

Bạn có thể vô hiệu hóa 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ò chơi của bạn để tiết kiệm không gian màn hình cho UI tùy chỉnh của bạn. Ví dụ, trò chơi laser tag mẫu không yêu cầu một ba lô vì người chơi chỉ có khả năng chọn một khẩu súng. Tuy nhiên, nếu người chơi có thể chọn nhiều khẩu súng cùng một lúc, trò chơi có thể vô hiệu hóa UI cốt lõi này để đảm bảo luôn có chỗ cho trình 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 UI cốt lõi của Roblox, bạn cũng phải 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ò chơi của bạn bằng thiết bị di động, một cần điều khiển ảo hiển thị ở góc dưới bên trái của màn hình, và một nút nhảy 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ò chơi 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ố UI cốt lõi của Roblox cần thiết cho lối chơi của trò chơi của bạn, và khả năng có các điều khiển cảm ứng, bạn có thể chặn các yếu tố UI tùy chỉnh của mình trong một thiết kế thích ứng 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 UI khi bạn cập nhật trò chơi của mình.

Để minh họa phương pháp này, hãy xem xét hai hình ảnh sau về cách trò chơi laser tag mẫu chặn các yếu tố UI 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 UI tùy chỉnh vì nó cho phép thiết kế dễ dàng 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 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 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 hoạt động để xem xét không gian mà chúng chiếm 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ố 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ệ cho tất cả các bố cục tiềm năng theo thiết bị và quy trình làm việc của người chơi.

Khi chặn các yếu tố UI cho các bố cục của bạn, hãy xem xét những điều sau:

• Nơi và cách bạn chặn UI có thể ảnh hưởng đến sự bố trí của các bố cục của bạn. 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ố UI tùy chỉnh của bạn bên cạnh UI cốt lõi của Roblox.
• Tương tác với UI ở xa các góc dưới của một số thiết bị di động và máy tính bảng là không thoải mái hoặc không thể. Đặt các yếu tố tương tác ở những khu vực dễ tiếp cận gần vị trí nghỉ tự nhiên cho ngón tay cái.
• 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 UI trên màn hình của bạn. Kiểm tra các bố cục của bạn với nhiều loại nền khác nhau để đảm bảo các yếu tố UI trên màn hình của bạn vẫn rõ ràng và dễ đọc.

Phát triển các luồng người dùng

Một luồng 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ò chơi để 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. Các luồng 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 hoặc thành tựu cuối cùng mà người chơi đạt được ở cuối nhiệm vụ. Ngoài ra, các luồng 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ị luồng người dùng của một người chơi tham gia và chơi trò chơi laser tag mẫu. Khi một người chơi mở trò chơi, họ tham gia vào một sảnh. Nếu vòng chưa bắt đầu, họ chờ cho đến khi vòng lặp bắt đầu, nếu không 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 nhãn ra 10 người chơi mỗi đội, thì người chơi chọn khẩu súng của họ và trải nghiệm lối chơi chính của việc gán nhãn hoặc bị gán nhãn bởi đội đối thủ, trang bị một khẩu súng mới trong đấu trường, hoặc hồi sinh sau khi họ bị gán nhãn ra. Khi người chơi đạt được điều kiện kết thúc, họ hoàn thành vòng và tham gia lại vào sảnh.

Việc phát triển các luồng người dùng cho mọi thứ mà người chơi có thể làm trong trò chơi của bạn là rất quan trọng 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 bớt các điểm đau 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 các luồng người dùng cho trò chơi laser tag mẫu, điều gì sẽ xảy ra khi người chơi:

• Thoát khỏi một vòng trước khi điều kiện kết thúc được đáp ứng?
• Rời khỏi trò chơi trong khi tham gia vào một đội?
• Nhận cuộc gọi điện thoại giữa vòng?
• Mất kết nối với vòng trong chưa đầy 15 giây?

Bằng cách hình dung 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 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ố trí của các yếu tố UI của bạn ảnh hưởng tiêu cực đến trải nghiệm của họ, sau đó thực hiện đ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 dành thời gian trong trò chơi của bạn và quay lại vào một ngày sau.

Khi phát triển các luồng người dùng cho trò chơi 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ò chơi 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 con đường mà họ muốn đi để đạt được mục tiêu của họ.
• Biểu đồ luồng 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 biểu đồ. Để tập trung sự chú ý của bạn vào mỗi nhiệm vụ, giới hạn biểu đồ luồng cho một nhiệm vụ chính tại một thời điểm.
• Các mẫu tương tác khác nhau tùy thuộc vào việc người chơi đang sử dụng điều khiển cảm ứng, tay cầm trò chơi, hay chuột máy tính để tương tác với trò chơi của bạn. Nếu bạn đang thiết kế cho nhiều thiết bị, phát triển các luồng người dùng độc đáo cho mỗi thiết bị để bạn có thể xác định các điểm đau và đơn giản hóa các quy trình làm việc.

Sau khi bạn hoàn thiện thiết kế của các khung phác thảo, đã đến lúc chuyển sang Studio và biến UI của bạn thành hiện thực.