ตัวชี้เมาส์มีประวัติอันยาวนานในการเป็นส่วนพื้นฐานของอินเทอร์เฟซที่ทันสมัย ตัวชี้ของระบบ Windows และ Mac แทบไม่เปลี่ยนแปลงในช่วงสองสามทศวรรษที่ผ่านมา ในทางกลับกัน วิดีโอเกมมีประวัติของการคิดใหม่เกี่ยวกับตัวชี้ สัดส่วนที่สูงของวิดีโอเกมบนเดสก์ท็อปสมัยใหม่ใช้พอยน์เตอร์ที่กำหนดเองซึ่งสร้างแบรนด์สำหรับประสบการณ์ของตน แต่จะต้องใช้อะไรในการออกแบบตัวชี้วิดีโอเกมที่ทำงานในอินเทอร์เฟซที่เหมือนระบบปฏิบัติการเช่น Roblox? Roblox เป็นแพลตฟอร์มที่ผู้ใช้สามารถสร้างและสำรวจประสบการณ์เสมือนจริงที่สมจริง เนื่องจากมันทำหน้าที่เป็น metaverse ที่ไร้รอยต่อระหว่างเกมและประสบการณ์ แอพ Roblox นำเสนอความท้าทาย UX ที่ไม่เหมือนใครซึ่งฉันตื่นเต้นที่จะได้ทำงาน
ฉันเคยเห็นคำว่า "เคอร์เซอร์" และ "ตัวชี้" ใช้แทนกันได้ ส่วนใหญ่ฉันจะเลือกใช้ "ตัวชี้" เพื่อแยกความแตกต่างจากเคอร์เซอร์ข้อความ ซึ่งใช้ในฟิลด์อินพุตและอินเทอร์เฟซคำสั่ง
ปัญหา
ไคลเอ็นต์เดสก์ท็อป Roblox ใหม่กำลังดำเนินการอยู่ แต่แอปขาดองค์ประกอบ UX ที่สำคัญ — การเปลี่ยนแปลงสถานะของเมาส์ Roblox desktop client ใหม่นี้แตกต่างจากการเรียกดูและเล่นเป็นประสบการณ์ที่แยกจากกันสำหรับเกมเดสก์ท็อปส่วนใหญ่ ไคลเอนต์เดสก์ท็อป Roblox ใหม่ทำให้ผู้ใช้สามารถเรียกดูและเล่นได้อย่างราบรื่นในหน้าต่างเดียว อย่างไรก็ตาม ประสบการณ์ของตัวชี้เมาส์จำเป็นต้องทำงาน สถานะ "เลือกลิงก์" หรือ "โฮเวอร์" มีความสามารถในการมองเห็นได้ไม่ดี และสถานะ "การเลือกข้อความ" ซึ่งปรากฏขึ้นเมื่อผู้ใช้วางเมาส์เหนือช่องป้อนข้อความ หายไปโดยสิ้นเชิง นี่เป็นโอกาสในการออกแบบใหม่และปรับปรุงตัวชี้เมาส์ trifecta: ค่าเริ่มต้น ลิงก์ (โฮเวอร์) และข้อความ
การออกแบบตัวชี้สำหรับทั้งระบบปฏิบัติการและวิดีโอเกมเป็นสิ่งที่ท้าทายเนื่องจากกรณีการใช้งานที่แตกต่างกัน เคอร์เซอร์ OS ต้องเป็นสีที่เป็นกลาง คอนทราสต์สูงเพียงพอสำหรับการมองเห็น ใช้งานได้จริงเพียงพอสำหรับการใช้งานทุกวัน และไม่สว่างเกินไปจนทำให้ปวดตา เคอร์เซอร์วิดีโอเกมสามารถละเลยกฎเหล่านี้ได้หลายอย่าง เนื่องจากมักจะสอดคล้องกับรูปลักษณ์ของแบรนด์เพื่อมอบประสบการณ์ที่ดื่มด่ำ แต่มีวิธีที่ประสบความสำเร็จในการรวมคุณลักษณะทั้งสองนี้หรือไม่?
ดูที่ตัวชี้ 2012 ของ Roblox มันไปในทิศทางที่ถูกต้องโดยใช้เฉดสีเทาที่เป็นกลาง อย่างไรก็ตาม สถานะโฮเวอร์ใช้ตัวชี้สีดำ ซึ่งทำให้ผู้ใช้ใหม่บนคอมพิวเตอร์ Mac สับสน ข้อผิดพลาดอีกประการหนึ่งคือไหล่ของลูกศรถูกวาดโดยใช้แกนตั้งแทนแกนหน้าลูกศร ซึ่งหมายความว่าลูกศรไม่สมมาตรประมาณ 6.8%
มองและรู้สึก
มาถึงส่วนที่สนุก แนวโน้มปัจจุบันของตัวชี้วิดีโอเกมสำหรับเดสก์ท็อปเป็นอย่างไร ฉันรวบรวมพอยน์เตอร์เกมยอดนิยมบางส่วนและจัดอันดับตามกราฟิกและการใช้งานจริง ตัวชี้การเล่นเกมส่วนใหญ่เลือกทิศทางของภาพกราฟิกของแบรนด์ ตัวชี้ Roblox จะต้องมีกราฟิกมากกว่าตัวชี้ OS ทั่วไปเล็กน้อยในขณะที่ยังคงใช้งานได้จริงสูงสุด
ตัวชี้ Roblox ไม่เพียง แต่ต้องดูดีเพียงพอในทุกประเภทประสบการณ์ แต่ยังต้องเสริม uiBlox ระบบการออกแบบของเรา ปัจจุบันระบบการออกแบบ uiBlox ใช้ไอคอน #FFFFFF ในธีมสีเข้มเริ่มต้น สไตล์ของเราใช้เส้นโค้งรัศมี 2px และอัตราส่วนคร่าวๆ ที่ 3:1 ของมุมมนถึงสี่เหลี่ยมจัตุรัสในแต่ละไอคอน สำหรับเคอร์เซอร์ที่ชี้มือ ฉันได้รับแรงบันดาลใจจากอาร์ตเวิร์กอิโมติคอนใหม่ของเราที่แสดงโดยหนึ่งในนักออกแบบที่ยอดเยี่ยมของเรา เอมี่หลิว.
วาง All Together
หลังจากได้รับคำติชมจากนักออกแบบคนอื่นๆ เราได้พัฒนาชุดตัวชี้สุดท้ายสำหรับ Roblox ตัวชี้เริ่มต้นใหม่ในขณะนี้มีความสมมาตรและเพิ่มหางลูกศรเพื่อให้มองเห็นได้ เงามืดให้ความทันสมัยและความลึกในสภาพแวดล้อม 3 มิติ ตัวชี้โฮเวอร์ใหม่ช่วยเพิ่มความสามารถในการเข้าถึงโดยทำให้รูปร่างแตกต่างจากตัวชี้เริ่มต้น สุดท้าย ตัวชี้ข้อความถูกเปลี่ยนรูปร่างเป็นเคอร์เซอร์ #FFFFFF 1px เพื่อให้คอนทราสต์กับธีมสีเข้มของเรา จังหวะที่มืดสร้างการมองเห็นในธีมแสงของเราและประสบการณ์ Roblox อื่น ๆ ด้วยพื้นหลังสีอ่อน
การออกแบบใหม่จะมีประสิทธิภาพเท่ากับความคิดเห็นของผู้ใช้เท่านั้น เราสำรวจนักพัฒนา Roblox 215 คนเกี่ยวกับสิ่งที่พวกเขาพูดเกี่ยวกับเคอร์เซอร์ใหม่เหล่านี้ คนส่วนใหญ่เห็นด้วยว่าเคอร์เซอร์มีการปรับปรุงทั้งในด้านความสวยงามและการใช้งาน สถิติที่น่าตื่นเต้นที่สุดคือการตอบสนองของนักพัฒนาของเราต่อตัวชี้ข้อความ จากจำนวนมหาศาล 89% ที่เห็นด้วยว่าเป็นการปรับปรุงโดยรวม 74% เห็นด้วยอย่างยิ่งกับคำกล่าวนั้น การรู้ว่าผู้ใช้ของเรามีปฏิกิริยาเชิงบวกต่อการปรับปรุง UX เหล่านี้จะช่วยเราเมื่อเราพัฒนาชุดตัวชี้ที่เหลือ รวมถึงองค์ประกอบ UI อื่นๆ ในประสบการณ์
ในขณะที่ Roblox ขยายขอบเขตนอกเหนือจากการเล่นเกมไปสู่แพลตฟอร์มการสื่อสาร โซเชียล และแม้กระทั่งการทำธุรกรรม แง่มุมหนึ่งของผลิตภัณฑ์นี้จะช่วยแนะนำผู้ใช้ในขณะที่พวกเขานำทางระหว่างแอปพลิเคชันและประสบการณ์ต่างๆ ความหวังของเราคือสิ่งนี้จะเป็นมาตรฐานที่แพร่หลายสำหรับ metaverses ดิจิทัลจากนี้ไป!
สนใจร่วมทีม Roblox Design และแก้ปัญหาแบบนี้ไหม? พบกับเราได้ที่ corp.roblox.com/careers/ สำหรับโอกาสล่าสุด
Derek Wong เป็น Visual Designer ที่ Roblox เขาทำงานบนระบบการออกแบบของ Roblox ซึ่งกำหนดอินเทอร์เฟซผู้ใช้ของเว็บไซต์ Roblox และแอปเดสก์ท็อป Roblox Corporation หรือบล็อกนี้ไม่รับรองหรือสนับสนุนบริษัทหรือบริการใดๆ นอกจากนี้ ไม่มีการค้ำประกันหรือสัญญาใดๆ เกี่ยวกับความถูกต้อง ความน่าเชื่อถือ หรือความสมบูรณ์ของข้อมูลที่อยู่ในบล็อกนี้
© 2021 Roblox คอร์ปอเรชั่น Roblox, โลโก้ Roblox และ Powering Imagination เป็นเครื่องหมายการค้าจดทะเบียนและไม่จดทะเบียนในสหรัฐอเมริกาและประเทศอื่นๆ
ที่มา: https://blog.roblox.com/2022/02/designing-mouse-pointer-digital-metaverse/
- 2021
- 3d
- การเข้าถึง
- ข้าม
- ทั้งหมด
- ในหมู่
- app
- การใช้งาน
- Black
- บล็อก
- ตรา
- กรณี
- ก่อให้เกิด
- ท้าทาย
- ท้าทาย
- ร่วมกัน
- การสื่อสาร
- บริษัท
- คอมพิวเตอร์
- ประเทศ
- ปัจจุบัน
- ทศวรรษที่ผ่านมา
- ออกแบบ
- นักออกแบบ
- พัฒนา
- พัฒนา
- นักพัฒนา
- ต่าง
- ดิจิตอล
- หล่น
- มีประสิทธิภาพ
- สิ่งแวดล้อม
- ขยาย
- ประสบการณ์
- ประสบการณ์
- ตา
- ใบหน้า
- ข้อเสนอแนะ
- สาขา
- สนุก
- เกม
- เกม
- การเล่นเกม
- เฉดสีเทา
- ให้คำแนะนำ
- โปรดคลิกที่นี่เพื่ออ่านรายละเอียดเพิ่มเติม
- จุดสูง
- ประวัติ
- สรุป ความน่าเชื่อถือของ Olymp Trade?
- HTTPS
- i
- ICON
- ดื่มด่ำ
- ปรับปรุง
- การปรับปรุง
- ข้อมูล
- อินเตอร์เฟซ
- IT
- ล่าสุด
- เบา
- โลโก้
- นาน
- Mac
- ส่วนใหญ่
- การทำ
- การเพิ่ม
- metaverse
- ทันสมัย
- ข้อมูลเพิ่มเติม
- เป็นที่นิยม
- การดำเนินงาน
- ระบบปฏิบัติการ
- โอกาส
- โอกาส
- อื่นๆ
- เวที
- เล่น
- การเล่นเกม
- น่าสงสาร
- ยอดนิยม
- บวก
- ผลิตภัณฑ์
- ปฏิกิริยา
- การออกแบบ
- คำตอบ
- REST
- Roblox
- กฎระเบียบ
- s
- ไร้รอยต่อ
- ได้อย่างลงตัว
- Service
- ชุด
- เงา
- So
- สังคม
- สถานะ
- คำแถลง
- สไตล์
- ที่ประสบความสำเร็จ
- รองรับ
- ระบบ
- ข้อความ
- พื้นที่
- ชุดรูปแบบ
- ด้านบน
- เครื่องหมายการค้า
- แนวโน้ม
- เรา
- ui
- เป็นเอกลักษณ์
- us
- การใช้งาน
- ผู้ใช้
- ux
- วีดีโอ
- วิดีโอเกม
- เสมือน
- ความชัดเจน
- Website
- อะไร
- หน้าต่าง
- งาน
- โรงงาน