สร้าง Wireframe ของการจัดเรียงของคุณ

การออกแบบระเบียบาดของการจัดเค้าโครงของคุณ ผู้เล่นUI ในกระบวนการทำงานต่าง

โดยใช้ประสบการณ์ เลเซอร์เท็งก์ตัวอย่าง.rbxl ในฐานะตัวอย่าง ส่วนนี้ของหลักสูตร UI แสดงให้คุณเห็นวิธีการจัดเรียงส่วนประกอบของ UI บนหน้าจอรวมถึงคำแนะนำเกี่ยวกับ:

• วางแผนระดับของวิзуเซลสำหรับ UI ของคุณที่นำผู้เล่นไปยังคุณสมบัติและข้อมูลที่พวกเขาต้องการเพื่อประสบความสำเร็จในประสบการณ์ของคุณ
• บล็อกในส่วนของ UI ด้วยรูปร่างพื้นฐานเพื่อตรวจสอบการแต่งตั้ง UI ของคุณรวมกับการแสดงผล UI หลักของ Roblox และการควบคุมการแตะ
• การพัฒนาการไหลของผู้ใช้เพื่อช่วยให้ผู้เล่นทำงานได้ตามเป้าหมายที่ต้องการ

หลังจากที่คุณจบส่วนนี้คุณจะเรียนรู้วิธีการสร้างและกำหนดค่า UI ของคุณใน Studio ที่เคารพสไตล์ศิลปะและโครงสร้างของคุณ

วางแผนระเบียบาดาลของวิดีโอ

ระเบียบาลองการจัดระเบียบริหารของวิดีโอเป็นการจัดระเบียบริหารของวิดีโอโดยให้เน้นไปที่รายการสิ่งที่สำคัญของ UI ตามลำดับความสำคัญ การวางระเบียบาลองการจัดระเบียบริหารส

หนังสือการจัดอันดับทางสายตาที่มีประสิทธิภาพช่วยให้ผู้เล่นผ่านคุณสมบัติและข้อมูลที่พวกเขาต้องการเพื่อตอบสนองความต้องการในการเล่นเกมของคุณตามสถานที่ที่พวกเขามองบน

1. ข้อมูลเกี่ยวกับเป้าหมายของประสบการณ์
2. ข้อมูลเกี่ยวกับ blaster
3. ข้อมูลเกี่ยวกับสถานะของผู้เล่น

ตำแหน่งแต่ละหมวดหมู่ที่อยู่บนหน้าจอในการออกแบบดีไซน์สุดท้ายเน้นย้ำความสำคัญของพวกเขา:

• ประเภทแรกอยู่ใกล้ด้านบนเพราะมันมีส่วนประกอบของ UI ที่มีความสำคัญมากที่สุดในการชนะเกม
• ประเภทที่สองครองพื้นที่หน้าจอส่วนใหญ่ใกล้กลางเพราะมันทำงานเป็นจุดโฟกัสเพื่อดึงดูดผู้เล่นให้สนใจในการกระทําในพื้นที่ 3D และมีความสําคัญมากที่สุดสําหรับการเล่นเกม
• ประเภทที่สามอยู่ใกล้ ด้านข้าง การเล่นเกมนี้โดยไม่เปลี่ยนความสนใจออกจากเกม

สำหรับบางประเภทของประสบการณ์ คุณเพียงแต่ต้องแสดงประเภทของข้อมูลหนึ่งในแต่ละครั้งเพราะมันเป็นประเภทของข้อมูลเท่านั้นที่สำคัญสำหร

เมื่อวางแผนหน้าที่เห็นสำหรับกระบวนการในประสบการณ์ของคุณเอง กำลังติดตาม:

• หากคุณนำรวมรวมรูปแบบ UI จากหมวดหมู่ที่แตกต่างกันทั่วหน้าจอผู้เล่นจะไม่รู้ว่าพวกเขาต้องการสิ่งใด เพื่อช่วยให้ผู้เล่นในการนำทางประสบการณ์ของคุณ รวมรูปแบบ UI จากหมวดหมู่เดียวกันทั่วหน
• หากคุณมีหมวดหมู่มากเกินไปในหน้าจอในเวลาเดียวกันผู้เล่นอาจไม่รู้ว่าพวกเขาต้องให้ความสนใจกับข้อมูลใด เพื่อหลีกเลี่ยงผู้เล่นที่เกิดความสับสนด้วยคลัสเตอร์, แสดง UI เองติดต่อสำหรับแต่
• เช่นเดียวกันหากมีตัวอักษร UI มากเกินไปต่อประเภทมันสามารถทำให้ผู้เล่นไม่สามารถเข้าใจได้ว่าจะทำให้การกระทําหรือกระบวนการเสร็จสิ้นได้อย่างไร ด้วยเหตุผลนี้จึงเป็นเรื่องสําคัญที

สำหรับการตรวจทานรูปแบบของหน้างานเลเซอร์ทั้งหมดสำหรับตัวอย่าง ดูตารางต่อไปนี้:

บล็อกใน UI เอเลเมนต์

ตอนนี้คุณมีระดับขั้นสายตาแล้ว RobloxUI โดยใช้รูปร่างพื้นฐานเพื่อตรวจทานการจัดเค้าโครงของ UI ของคุณเองบนหลายอุปกรณ์ เช่น บนมื

ก่อนที่คุณจะเริ่มต้น คุณต้องหาว่ามีพื้นที่หน้าจอเท่าไหร่สำหรับส่วนประกอบ UI ของคุณโดยพิจารณาจาก UI หลักของ Roblox รวมทั้งประสบการณ์ที่มีอยู่ โดยปกติ Roblox จะแสดงส่วนประกอบ UI ต่อไปนี้ในแต่ละประส

• รายชื่อผู้เล่นในประสบการณ์
• แถบสุขภาพของตัวละคร
• กระเป๋าของตัวละคร
• หน้าต่างการแชท
• ปุ่มการจับกุม
• เมนูป๊อปของอีโมจิ.

คุณสามารถ ปิดการใช้งาน ใด ๆ ขององค์ประกอบเหล่านี้ที่ไม่ตรงตามความต้องการในการเล่นเกมของประสบการณ์ของคุณเพื่อประห

นอกเหนือจาก UI หลักของ Roblox คุณยังต้องพิจารณาพื้นที่หน้าจอที่จำเป็นสำหรับการควบคุมแสดงผลด้วยแท็ชสกรีนของ Roblox เมื่อผู้ใช้เข้าถึงประสบการณ์ข

โดยการนำ Roblox เข้าสู่ในประเภท UI หลักที่จำเป็นสำหรับการเล่นเกมของประสบการณ์ของคุณและความเป็นไปได้ของการควบคุมการแตะคุณสามารถบล็อกใน หนึ่งการออกแบบ เพื่อแสดงให้เห็นวิธีการนี้ โปรดดูภาพสองภาพต่อไปนี้ของการประสานเลเซอร์แท็กตัวอย่างใน UI ที่กำหนดเองสำหรับอุปกรณ์มือถือและ PC ทั้งสองภาพรวมถึง:

• รูปทรงพื้นฐานที่จะแทนที่ UI ที่กำหนดเองเพราะมันช่วยให้การออกแบบเข้าถึงได้อย่างง่ายดายหลายๆ รอบก่อนที่จะได้รับการออกแบบที่สุดท้าย
• การสีขีดสีที่เปิดให้สีของตาติดตามข้อมูลโดยไม่ต้องสูญเสียสภาพแวดล้อมของพื้นหลังที่มีสีสัน
• สถานะเปิดของหน้าต่างแชทและรายชื่อผู้เล่นที่เปิดและหน้าต่างแชทเพื่อดูว่าพวกเขาใช้พื้นที่เท่าไหร่บนหน้าจอ
• พื้นที่สำหรับการควบคุมด้วยเครื่องมือบนมือถือแม้ว่าพวกเขาจะไม่จำเป็นสำหรับอุปกรณ์พีซี

เมื่อคุณออกแบบการจัดเรียงของคุณในวิธีนี้โดยพิจารณาว่าจำนวนเท่าของรายการ UI ที่สามารถมีอยู่บนหน้าจอในเวลาเดียวกันตามอุปกรณ์ของผู้เล่นและกระบวนการทำงาน

เมื่อบล็อกในรายการ UI สำหรับการจัดเค้าโครงของคุณ กำลังติดตาม:

• RobloxUI ของคุณสามารถส่งผลกระทบต่อการแต่งตั้งของการเรียงลำดับของการเรียงลำดับของการเรียงลำดับของการเรียงลำดับของการเรียงลำดับของการเรียงลำดับของการเรียงลำดับของการเ
• การใช้งาน UI ที่อยู่ไกลออกไปจากมุมด้านล่างของอุปกรณ์บางชนิดและเครื่องแท็บเล็ตคือไม่สบายใจหรือไม่มีทาง วางส่วนประกอบใช้งานในพื้นที่ที่ใกล้ตำแหน่งพักผ่อนธรรมชาติสำหรับนิ้วเท้า ใ
• เมื่อผู้เล่นสำรวจผ่านสภาพแวดล้อมของคุณ พื้นที่ 3D สามารถเป็นที่รบกวนจาก UI บนหน้าจอของคุณ เพื่อให้แน่ใจว่ารูปแบบ UI ของคุณเหลือเวลาเหลือเวลาเหลือเวลาเหลือเวลาเหลือเวลาเหลือเวลาเห

สำหรับข้อมูลเพิ่มเติมเกี่ยวกับสิ่งที่ต้องพิจารณาเมื่อออกแบบและบล็อกในองค์ประกอบ UI ของคุณสำหรับอุปกรณ์หลายตัว, ดู ตําแหน่งและขนาด - ตัวประกอบของเครื่องมือเฉพาะแพลตฟอร์ม .

พัฒนาการใช้งานผู้ใช้

การใช้งานผู้ใช้คือคอลเลกชันของเส้นทางที่ผู้เล่นสามารถใช้ในประสบการณ์เพื่อสำเร็จภารกิจต่างๆ เช่น การเลือกอาวุธ การซื้อไอเท็ม หรือการรักษาตั

เกม

มีความสำคัญที่จะพัฒนาการไหลของผู้ใช้สำหรับทุกสิ่งที่ผู้เล่นสามารถทำได้ในประสบการณ์ของคุณเพราะมันช่วยให้คุณสามารถประเมินว่าพวกเขาต้องการที่จะเสร็จสิ้นภารกิ

• ออกจากรอบก่อนที่จะได้รับเงื่อนไขท้ายสุดหรือไม่?
• ออกจากเกมในขณะที่คุณเข้าร่วมทีม?
• รับโทรศัพท์ในตอนกลางของรอบ?
• สูญเสียการเชื่อมต่อของพวกเขาไปยังรอบในเวลาน้อยกว่า 15 วินาที?

โดยการเห็นว่าทุกการกระทําที่อาจเกิดขึ้นหรือสถานการณ์ที่อาจเกิดขึ้นกับผู้เล่นในขณะที่กําลังทํางานอยู่ คุณสามารถดําเนินการปรับแต่งการจัดเรียงของส

เมื่อพัฒนาการไหลของผู้ใช้สำหรับประสบการณ์ของคุณเอง กำลังติดตาม:

• สิ่งที่คุณต้องการให้ผู้เล่นทำในประสบการณ์ของคุณและสิ่งที่พวกเขาต้องการทำอาจแตกต่างกันไปอย่างสมบูรณ์ การทดสอบรูปแบบของคุณด้วยหลายประเภทของผู้เล่นจะช่วยให้คุณเข้าใจเส้นทางที่พ
• กราฟไหล่อาจเป็นเรื่องยากที่จะอ่านและไม่มีประสิทธิภาพหากพวกเขาพยายามจับคู่หลายสถานการณ์ในหนึ่งไดรัม เพื่อให้ความสนใจของคุณในแต่ละภารกิจ, จํากัดกราฟไหล่ให้เป็นภารกิจหลักเท่านั้นใน
• รูปแบบการใช้งานขึ้นอยู่กับว่าผู้เล่นใช้การควบคุมด้วยแตะ แผ่นเกม หรือเมาส์คอมพิวเตอร์หรือไม่ หากคุณกำลังออกแบบสำหรับอุปกรณ์หลายตัว พัฒนาการใช้งานผู้ใช้ที่ไม่ซ้ำกัน

หลังจากที่คุณจบการออกแบบของเค้าโครงเส้นใยของคุณแล้ว ก็ถึงเวลาย้ายไปที่ Studio และสร้าง UI ของคุณมาเป็นชีวิต