ร่างเค้าโครงเลย์เอาต์ของคุณ

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

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

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

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

วางแผนลำดับชั้นภาพ

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

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

1. ข้อมูลเกี่ยวกับวัตถุประสงค์ของเกม
2. ข้อมูลเกี่ยวกับปืนเลเซอร์
3. ข้อมูลเกี่ยวกับสถานะของผู้เล่น

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

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

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

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

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

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

บล็อกองค์ประกอบ UI

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

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

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

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

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

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

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

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

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

เมื่อบล็อกองค์ประกอบ UI สำหรับเลย์เอาต์ของคุณ ให้พิจารณาสิ่งต่อไปนี้:

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

พัฒนากระบวนการทำงานของผู้ใช้

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

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

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

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

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

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

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

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