เลื่อนระดับ: คำแนะนำเกี่ยวกับ UI ของเกม (พร้อมอินโฟกราฟิก)

เมื่อหกสิบปีที่แล้ว ห้องทดลองแห่งชาติบรู๊คฮาเวนในเมืองอัพตัน รัฐนิวยอร์ก ได้จัดงานเปิด ผู้เข้าชมที่เยี่ยมชมห้องแล็บจะได้รับการจัดแสดงแบบอินเทอร์แอคทีฟ เกมชื่อ Tennis for Two การตั้งค่าทำได้ง่าย—จอแสดงผลแอนะล็อกขนาด 5 นิ้วและตัวควบคุมสองตัว โดยแต่ละตัวมีปุ่มเดียวและปุ่มเดียว วิดีโอเกมแรกของโลกถือกำเนิดขึ้น แต่หลังจากผ่านไปสองปี นิทรรศการก็ปิดตัวลง

สิบสองปีผ่านไป และเกมอาร์เคดที่คล้ายคลึงกันอย่างน่าขนลุกปรากฏขึ้นในบาร์ชื่อ Andy Capp's Tavern ชื่อเกม? โป่ง . ผู้ผลิต? อาตาริ. ดูเหมือนเพียงชั่วข้ามคืน โลกของวิดีโอเกมที่กำลังขยายตัวก็เปลี่ยนไป ความแปลกใหม่กลายเป็นอุตสาหกรรม

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

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

คำบรรยาย

การเล่าเรื่องเป็นเรื่องราวที่วิดีโอเกมบอกเล่า

กำแพงที่สี่

กำแพงที่สี่เป็นกำแพงในจินตนาการระหว่างผู้เล่นเกมกับพื้นที่ที่เกมเกิดขึ้น

การเล่าเรื่องและกำแพงที่สี่มีคำถามสองข้อที่ต้องถามจากทุกองค์ประกอบ UI ที่รวมอยู่ในเกม:

1. มีองค์ประกอบอยู่ในเรื่องราวของเกมหรือไม่?
2. มีส่วนประกอบอยู่ในพื้นที่เกมหรือไม่?

จากคำถามสองข้อนี้ ส่วนประกอบ UI ของวิดีโอเกมสี่คลาสปรากฏขึ้น: ไดเอเจติก; เชิงพื้นที่; และเมต้า

ไม่ใช่ไดเอเจติก

• มีองค์ประกอบอยู่ในเรื่องราวของเกมหรือไม่? ไม่
• มีส่วนประกอบอยู่ในพื้นที่เกมหรือไม่? ไม่

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

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

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

ไดเอเจติก

• มีองค์ประกอบอยู่ในเรื่องราวของเกมหรือไม่? ใช่
• มีส่วนประกอบอยู่ในพื้นที่เกมหรือไม่? ใช่

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

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

เชิงพื้นที่

• มีองค์ประกอบอยู่ในเรื่องราวของเกมหรือไม่? ไม่
• มีส่วนประกอบอยู่ในพื้นที่เกมหรือไม่? ใช่

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

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

เมต้า

• มีองค์ประกอบอยู่ในเรื่องราวของเกมหรือไม่? ใช่
• มีส่วนประกอบอยู่ในพื้นที่เกมหรือไม่? ไม่

องค์ประกอบของ Meta UI มีอยู่ในเรื่องราวของเกม แต่ไม่มีอยู่ในพื้นที่ของเกม อวาตาร์ของผู้เล่นอาจทราบหรือไม่ทราบองค์ประกอบเมตา ตามเนื้อผ้า มีการใช้องค์ประกอบเมตาเพื่อแสดงความเสียหายต่ออวาตาร์ของผู้เล่น

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

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

อ่านเพิ่มเติมเกี่ยวกับบล็อก Toptal Design:

• UI ที่มืด ความดีและความชั่ว สิ่งที่ควรทำและไม่ควรทำ
• Design Foundations – A Guide to Visual Hierarchy (พร้อมอินโฟกราฟิก)
• Augmented Reality vs. Virtual Reality vs. Mixed Reality – An Introductory Guide
• ก้าวกระโดดสู่การออกแบบ VR/AR
• แนวทางปฏิบัติในการออกแบบ Gamification