การออกแบบเลย์เอาต์ด้วยโครงร่าง

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

พัฒนากระแสผู้ใช้

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

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

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

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

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

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

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

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