เลือกสไตล์ศิลปะ

*เนื้อหานี้แปลโดยใช้ AI (เวอร์ชัน Beta) และอาจมีข้อผิดพลาด หากต้องการดูหน้านี้เป็นภาษาอังกฤษ ให้คลิกที่นี่

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

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

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

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

ระบุองค์ประกอบ UI ของคุณ

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

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

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

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

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

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

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

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

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

เลือกธีมสี

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

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

The door on the mint green side of the map.
สีฟ้า-เขียวอ่อน
The door on the carnation pink side of the map.

กุหลาบสีชมพู
>

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

ตัวอย่างของตัวติดตามจุดทีมในประสบการณ์แท็กเลเซอร์ตัวอย่าง

เมื่อเลือกธีมสีสำหรับประสบการณ์ของคุณเอง กำลังติดตาม:

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

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

ไอคอนที่เรียบง่ายสรุป

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

ไอคอนที่เรียบง่ายมีสไตล์ที่แตกต่างจากองค์ประกอบ 3D ของคุณในขณะที่ยังคงชมเชยโลกรวมของประสบการณ์ของคุณตัวอย่างเช่นในสภาพแวดล้อมสุดท้ายของ หลักสูตรศิลปะสิ่งแวดล้อม ทั้งทรัพยากรโมดูลและโปร 3D มีสไตล์ศิลปะที่สะอาดและทันสมัยที่ใช้รูปทรงสี่เหลี่ยมที่มีมุมโค้งอ่อนและมุมโค้ง Thai:ตัวอย่างเช่นในสภาพแวดล้อมสุดท้ายของ หลักสูตรศิลปะสิ่งแวดล้อม ทั้งทรัพยากรโมดูลและ prop 3D มีสไตล์ศิลปะที่สะอาดและทันสมัยที่ใช้รูปทรงสี่เหลี่ยมที่มีมุมโค้งอ่อนและมุมโค้งจากแผงแบนที่ขัดขวางไปตามพื้นถึงหน้าต่างวงกลมใกล้ๆ ในเพดานไม่มีอะไรรวมถึงขอบที่แหลมคม

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

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

เมื่อวาดภาพไอคอนง่ายๆสำหรับประสบการณ์ของคุณเอง กำลังติดตาม:

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

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

กำหนดลำดับการโต้ตอบ

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

มักจะมีสามประเภทของการโต้ตอบในกระบวนการทำงาน:

  • การโต้ตอบหลัก – การกระทำที่ผู้เล่นมีแนวโน้มที่จะดำเนินการ
  • การโต้ตอบรอง – แอ็คชัน
  • การโต้ตอบระดับที่สาม – การกระทำที่ผู้เล่นมีแนวโน้มที่จะทำน้อยที่สุด

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

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

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

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

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

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

  • ผู้เล่นจำเป็นต้องมีความเข้าใจอย่างชัดเจนเกี่ยวกับเมื่อพวกเขาสามารถโต้ตอบกับ UI ของคุณเพื่อดำเนินการได้ด้วยเหตุผลนี้จึงแนะนำให้ ให้ข้อเสนอแนะทางสายตาอย่างน้อยหนึ่งรูปแบบสําหรับองค์ประกอบ UI ที่สามารถโต้ตอบได้เช่นการแสดงเอาต์ไลน์หรือเปลี่ยนขนาดปุ่ม สี หรือแอนิเมชั่นเมื่ออยู่ในโฟกัส * หากฉลากบนองค์ประกอบ UI ที่สามารถโต้ตอบได้ไม่ชัดเจนหรือคล้ายกันในกระบวนการเดียวกันผู้เล่นอาจเข้าใจผิดวิธีการสําเร็จการดําเนินการหรือกระบวนการเพื่อหลีกเลี่ยงประสบการณ์ผู้เล่นเชิงลบ ล้างข้อมูลกระชับ และแตกต่างจากกัน
  • หากองค์ประกอบ UI โต้ตอบมีขนาดใหญ่เกินไป พวกเขาสามารถรบกวนจากข้อมูลสำคัญอื่นๆ บนหน้าจอได้ในทางกลับกันหากพวกเขามีขนาดเล็กเกินไปพวกเขาอาจอ่านยากหรือยากที่จะเลือกโดยเฉพาะอย่างยิ่งหากพวกเขาอยู่ใกล้เคียงกับอุปกรณ์เคลื่อนที่ด้วยเหตุผลนี้จึงเป็นสิ่งสำคัญที่จะต้อง ตรวจสอบขนาดขององค์ประกอบ UI ที่โต้ตอบได้บนหน้าจอขนาดต่างๆ ใน ใช้ในสตูดิโอ , คุณจะเรียนรู้วิธีการใช้วัตถุ UIAspectRatioConstraint เพื่อให้แน่ใจว่าองค์ประกอบ UI รักษาสัดส่วนความสูงที่เฉพาะเจาะจงไม่ว่าผู้เล่นจะใช้อุปกรณ์ใดเพื่อเข้าถึงประสบการณ์ของคุณนอกจากการทำให้กระบวนการออกแบบของคุณง่ายขึ้นแล้ว เทคนิคนี้ยังสามารถช่วยให้คุณปฏิบัติตามข้อแนะนำ ขนาดและระยะการสัมผัสเป้าหมายของเว็บเนื้อหาที่เข้าถึงได้ เพื่อสร้างโซนสัมผัสสำหรับองค์ประกอบ UI ที่โต้ตอบได้ที่มีขนาดอย่างน้อย 9x9 มม. บนอุปกรณ์มือถือ

กำหนดระบบข้อความ

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

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

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

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

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

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