การออกแบบ UI และ UX

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


ระบบผู้ใช้ (UX) เกมการจัดเก็บร้านค้า และการแส

UI

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

  • การกำหนดความสามารถ
  • โปรดทราบ
  • ภาษาทางสายตา
  • คอนเฟอร์เรนซี่
  • ความสม่ำเสมอ

การกำหนดความสามารถ

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

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

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

ตัวอย่าง

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

A close up view of an unselected circular Items button with a brown book icon. The environment in the background is a brown dirt with a patch of snow.
รายการก่อนที่จะเลือกใน Spellbound RPG >
A close up view of a selected circular Items button with a brown book icon, along with three additional buttons for skills, equipment, and the players deck. The additional buttons only display when the button is selected.
รายการหลังจากการเลือกใน Spellbound RPG >

ใน Super Striker League การโต้ตอบของผู้เล่นจะแตกต่างกันตามว่าพวกเขาควบคุมลูกบอลหรือไม่ โดยไม่มีลูกบอลผู้เล่นสามารถวิ่งและแทคเพื่อกู้คืนการคว

ปุ่มบริบทัชใน Super Striker League
ปุ่มบริบทัชใน Super Striker League

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

คุณสมบัติ HUD ในเกมเอาชีวิตรอด

โปรดทราบ

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

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

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

ตัวอย่าง

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

UI ซีซั่นพาสใน Jailbreak

ใน ภาพเสียงผจญภัยมังกร, ความสามารถทางสายตาของ visual จะได้รับการเพิ่มขนาดของมันและแยกออกด้วยการเพิ่มพื้นที่เพิ่มเติมเพื่อแยกมันออกจากกลุ่มขนาดเล็ก.

แพ็คเหรียญใน Dragon Adventures

ใน เครื่องจําลองป้องกันหอคอยเชิงยุทธศาสตร์ ทั้งขนาดและความใกล้ชิดจะใช้เพื่อวิสual กลุ่มและระแนงป้องกันหอคอยประจำวันจากกล่องประจำวัน

ร้านค้าใน Tower Defense Simulator

ภาษาทางสายตา

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

ไอคอน

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

สถิติของผู้เล่นใน Winds of Fortune > >

ปุ่ม

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

ปุ่มใน เครื่องมือส่งบอต

ข้อความนี้

หัวข้อและชื่อเรื่องที่มีข้อมูลระดับสูงควรจะใหญ่กว่าข้อความตัวอักษร สีที่มีความน่าอ่านสูงและสีที่มีความน่าสนใจเหมาะสมต่อสีพื้นหลังที่พวกเขาจะแสดงได้ควรพิ

ร้านขายเสื้อผ้าใน Winds of Fortune >

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

คอนเฟอร์เรนซี่

ข้อตกลงทั่วไปเป็นตัวเลือกการออกแบบที่ใช้กันอยู่ในหลายเกมที่แตกต่างกัน บางตัวอย่างรวมถึง:

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

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

X ปิดปุ่มใน Winds of Fortune ، Dragon Adventures ، BotClash Simulator และ
2>DOORS2> >

ความสม่ำเสมอของสถิติ "สุขภาพ" ใน Arcane Odyssey

ความสม่ำเสมอ

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

นี่คือตัวอย่างบางส่วนของความสอดคล้องของ UI ในเกม:

  • สถิติ "สุขภาพ" ปรากฏขึ้นสีเขียวในข้อความทั้งหมด ไอคอนที่เกี่ยวข้อง และบาร์สุขภาพ
  • บทสนทนา NPC ใด ๆ ที่เอ่อนเมาส์ในเกมจะปรากฏขึ้นตัวหนังสือในตัวอักษรขนาดใหญ่
  • ปุ่มปิดอยู่เสมอเป็นสี่เหลี่ยม, สีแดง, และมี X สีขาว, ปรากฏในมุมด้านขวาบนของกระทู้เท่านั้น
  • เลือกซื้อราคาจะปรากฏขึ้นด้วยสีแดง

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

UX

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

เข้าใจผู้เล่น

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

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

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

  • ความรู้จักของประเภท: เกมความรู้จักของประเภทเหมาะกับผู้เล่นที่มีประสบการณ์เล่น

  • สไตล์การเล่นเกม: ผู้เล่นมักจะชื่นชอบประเภทเกมที่แตกต่างกัน ตั้งแต่การแข่งขันและการรวบรวมความสำเร็จไปจนถึงการสำรวจและการร่วม

หลังจากพิจารณาปัจจัยเหล่านี้และเลือกกลุ่มผู้เล่นเป้าหมาย (หรือกลุ่ม) ให้รู้จักพวกเขาโดยการพบปะพูดคุยกับพวกเขาและเรียนรู้เกี่ยวกับเป้าหมายและความชอบของพวกเขาเพื่อให้การออกแบบที่ดีขึ้น

การออกแบบปฏิสัมพันธ์

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

  • คอนเฟอร์เรนซี่
  • เมทาโฟร
  • ข้อเสนอแนะ

ข้อตกลง:

การเรียกแร้ เป็นการออกแบบ UX และหลักการที่ผู้เล่นอาจเคยคุ้นเคยจากเกมอื่น

ใกล้เคียง "E" ใน ชีวิตของนางเงือก
>

ตัวอย่างของคำแนะนำรวมถึง:

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

ข้อตกลงกลายเป็นตัวแปรที่เป็นที่นิยมเมื่อการนำเสนอหรือการออกแบบที่เฉพาะเจาะจงเติบโตขึ้นในความนิยมเนื่องจากความง่ายในการใช้งาน "C

เมทาโฟร์ม

เมทาโฟร์ เกี่ยวข้องกับแนวคิดที่เป็นที่รู้จักมากขึ้นในแนวคิดที่คุ้นเคย สร้างทางลัดสู่การเข้าใจ ในตัวอย่างนี้จาก Spellbound Wizard RPG

การโยนเวทย์เป็นไพ่ใน Spellbound RPG >

ข้อเสนอแนะ

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

  • ศัตรูที่เล่นภาพเคลื่อนไหว "ตี" ของมันเพื่อแสดงว่ามันได้รับความเสียหายจากอาวุธของผู้เล่น
  • ปุ่มที่เปลี่ยนสีเพื่อแสดงสถานะที่เลือก (เลือก) และปล่อย
  • เอฟเฟคเสียงเคาน์เซอร์ "cha-ching!" เมื่อผู้เล่นเสร็จสิ้นการซื้อ
  • แถบความคืบหน้าจะเติมเมื่อผู้เล่นสำเร็จเป้าหมาย

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

การออกแบบกระบวนการ

การโต้ตอบหลายอันเป็นประโยชน์สำหรับผู้เล่นเพื่อให้พวกเขาสร้างประตู นักออกแบบ UX กังวลว่าผู้เล่นจะนำทางจากการกระทําหนึ่งหน้าจอหรือ UI หรือตัวเลือกไปยังอันต่อไปและให้แน่ใจว่าเส้นทางเหล่านี้เป

เช่นเดียวกับการใส่สินค้าในอวาตาร์ใน Berry Avenue RP ผู้เล่นจะต้อง:

  • ค้นหาและแตะปุ่ม Avatar
  • เลือกประเภทไอเทม (หน้า, หัว, คอ, ฯลฯ)
  • เลื่อนเพื่อค้นหารายการที่สนใจ
  • แตะที่ไอเท็มเพื่อใส่ในอวาตาร์ของพวกเขา
  • ค้นหาและแตะปุ่มเสร็จสิ้นเพื่อออกจากการปรับแต่งอวาตาร์
การปรับแต่ง Avatar ใน RP ทางถนนเบอร์รี่

ขั้นตอนเหล่านี้ที่มีกันอยู่เป็นตัวแทนการปรับแต่ง avatar ขั้นตอนนี้เป็นเรื่องง่ายและเป็นไปได้ด้วยขั้นตอนน้อยที่สุดเท่าที่จะเป็นไปได้เพื่อให้สวมใส่ไอเท็ม เนื่องจ

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

  • อวาตาร์
  • ค้นหารายการได้ง่ายขณะที่แก้ไข
  • การดูตัวอย่างไอเทมก่อนเลือก
  • การลบรายการอย่างง่ายหลังการเลือก

เหล่านี้เป้าหมายจะนำการออกแบบ UI และ UX ของคุณสมบัติ:

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

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

ตัวอย่างของกระบวนการไหล.