แนวทางการออกแบบที่ปรับตัวได้

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

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

หลักการพื้นฐาน

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

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

ความคล่องตัวในการป้อนข้อมูล

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

• ออกแบบการควบคุมและทางลัดสำหรับการป้อนหลายประเภท — ตรวจสอบให้แน่ใจว่าทุกการกระทำในเกมของคุณสามารถถูกเรียกใช้โดยใช้ปุ่มเกมแพด/D‑pad ทางลัดจากคีย์บอร์ด และสัมผัส การควบคุมควรตอบสนองได้ทั้งทางสายตาและฟังก์ชันสำหรับการนำทางด้วยทิศทางหรือสติ๊ก ทดสอบโหมดการป้อนแต่ละโหมดเพื่อให้แน่ใจว่าเกมเพลย์หลัก เมนู และ UI สามารถเข้าถึงได้และรู้สึกเป็นธรรมชาติไม่ว่าจะใช้อุปกรณ์ใด
• ให้ความคืบหน้าทางภาพตามประเภทการป้อนข้อมูล — ปรับปรุงชื่อ UI คำแนะนำ และคำอธิบายเพื่อสะท้อนวิธีการป้อนที่ใช้งานอยู่ เช่น แสดง Press A เมื่อใช้เกมแพด Pinch เมื่อสัมผัส หรือ ShiftA เมื่อใช้คีย์บอร์ด ใช้ไอคอนและภาษาที่ผู้เล่นแต่ละแพลตฟอร์มคุ้นเคย

เลย์เอาต์ที่ตอบสนอง

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

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

การปรับขนาดแบบพลศาสตร์

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

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

การอ่านและความชัดเจนทางสายตา

ผู้เล่นสามารถอ่านข้อความของคุณบนหน้าจอโทรศัพท์ขนาดเล็กหรือทีวีขนาดใหญ่ที่อยู่ไกลจากพวกเขาหรือไม่ ปุ่มของคุณมองเห็นได้ง่ายหรือไม่เมื่อเทียบกับพื้นหลังของโลก 3D ของคุณ?

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

ความคิดสุดท้าย

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