نشانگر ماوس سابقه طولانی دارد که بخشی اساسی از رابط مدرن است. نشانگرهای سیستم ویندوز و مک در چند دهه اخیر به سختی تغییر کرده اند. از سوی دیگر، بازیهای ویدیویی سابقه بازبینی نشانگر را دارند. نسبت بالایی از بازیهای ویدیویی رومیزی مدرن از نشانگرهای سفارشی استفاده میکنند که برای تجربیاتشان مارکگذاری شدهاند. اما برای طراحی یک اشاره گر بازی ویدیویی که در رابطی شبیه به سیستم عامل مانند Roblox نیز کار می کند، چه چیزی لازم است؟ Roblox پلتفرمی است که در آن کاربران می توانند تجربیات مجازی همهجانبه ای را ایجاد و کشف کنند. از آنجایی که برنامه Roblox به عنوان یک متاواسر یکپارچه بین بازی ها و تجربیات عمل می کند، یک چالش UX منحصر به فرد ارائه می دهد که من مشتاق بودم روی آن کار کنم.
من دیده ام که اصطلاحات "مکان نما" و "نشانگر" به جای یکدیگر استفاده می شوند. من بیشتر قصد دارم "اشاره گر" را انتخاب کنم تا از مکان نماهای متنی که در فیلدهای ورودی و رابط های فرمان استفاده می شوند، متمایز شوند.
مشکل
کلاینت دسکتاپ جدید Roblox در دست اجرا بود، اما برنامه یک عنصر ضروری UX را از دست داده بود - تغییر وضعیت ماوس. برخلاف اینکه مرور و بازی برای اکثر بازیهای دسکتاپ تجربههای جداگانهای هستند، کلاینت دسکتاپ جدید Roblox به کاربران اجازه میدهد تا در یک پنجره بهصورت یکپارچه مرور و بازی کنند. با این حال، تجربه نشانگر ماوس نیاز به کار داشت. حالت «انتخاب پیوند» یا «هوور» توانایی بصری ضعیفی داشت. و حالت "انتخاب متن"، که زمانی که کاربر روی یک فیلد ورودی متن قرار میگیرد ظاهر میشود، بهکلی از بین رفته بود. این فرصتی بود برای طراحی مجدد و بهبود نشانگر ماوس trifecta: Default، Link (Hover) و Text.
طراحی یک اشاره گر هم برای سیستم عامل و هم برای بازی های ویدیویی به دلیل موارد استفاده متفاوت آنها چالش برانگیز است. مکاننمای سیستمعامل باید رنگی خنثی، کنتراست کافی برای دید داشته باشد، برای استفاده روزمره به اندازه کافی کاربردی باشد و برای ایجاد خستگی چشم، آنقدر شلوغ نباشد. مکاننمای بازی ویدیویی میتواند بسیاری از این قوانین را نادیده بگیرد، زیرا معمولاً با ظاهر و احساس برند مطابقت دارد تا تجربهای فراگیر ارائه دهد. اما آیا راهی موفق برای ترکیب هر دوی این ویژگی ها وجود دارد؟
به اشاره گر Roblox در سال 2012 نگاهی بیندازید. با استفاده از رنگ های خاکستری خنثی در مسیر درستی قرار گرفت. با این حال، حالت شناور از یک نشانگر سیاه استفاده میکرد که کاربران جدید را در رایانه مک گیج میکرد. یکی دیگر از اشتباهات این است که شانه های فلش با استفاده از محور عمودی به جای محور صورت فلش کشیده شده است. این به این معنی است که فلش حدود 6.8٪ نامتقارن است.
نگاه کن و احساس کن
اینجا قسمت سرگرم کننده است. روند فعلی نشانگرهای بازی ویدیویی برای دسکتاپ چیست؟ من برخی از محبوب ترین نشانگرهای بازی را گردآوری کردم و آنها را بر اساس گرافیک و کاربردی بودن رتبه بندی کردم. بیشتر نشانگرهای بازی در جهت گرافیک مارک دار انتخاب می شوند. اشاره گر Roblox باید کمی گرافیکی تر از اشاره گر سیستم عامل معمولی باشد و در عین حال کاربردی بودن را به حداکثر برساند.
نشانگر Roblox نه تنها باید در همه ژانرهای تجربه کافی به نظر برسد، بلکه باید سیستم طراحی ما، uiBlox را تکمیل کند. سیستم طراحی uiBlox در حال حاضر از نمادهای #FFFFFF در یک تم تیره پیشفرض استفاده میکند. سبک ما از منحنیهای شعاع 2 پیکسلی و نسبت تقریبی 3:1 گوشههای گرد به مربع در هر نماد استفاده میکند. برای مکان نما نشانگر دست، من از اثر هنری شکلک جدیدمان که توسط یکی از طراحان عالی ما به تصویر کشیده شده بود، الهام گرفتم. امی لیو.
ادغام همه با هم
پس از دریافت بازخورد از طراحان دیگر، مجموعه اشاره گر نهایی را برای Roblox ایجاد کردیم. نشانگر پیشفرض جدید اکنون متقارن است و یک دم فلش برای مشاهده اضافه میکند. یک سایه در یک محیط سه بعدی مدرنیته و عمق را ارائه می دهد. نشانگر شناور جدید با متمایز کردن شکل از نشانگر پیشفرض، دسترسی را افزایش میدهد. در نهایت، نشانگر متن به یک مکاننمای #FFFFFF 3px تغییر شکل داده میشود تا به آن کنتراست در تم تاریک ما بدهد. ضربه تیره روی تم روشن ما و سایر تجربیات Roblox با پسزمینه روشن، دید ایجاد میکند.
طراحی مجدد فقط به اندازه بازخورد کاربر موثر است. ما ۲۱۵ توسعهدهنده Roblox را در مورد آنچه که در مورد این مکاننماهای جدید میگفتند، بررسی کردیم. اکثریت قابل توجهی موافق بودند که مکان نماها هم در زیبایی و هم در قابلیت استفاده بهبود یافته اند. هیجان انگیزترین آمار پاسخ توسعه دهندگان ما به اشاره گر متن است. از 215 درصدی که موافق بودند این یک پیشرفت کلی است، 89 درصد آنها به شدت با این بیانیه موافق بودند. دانستن اینکه کاربران ما واکنش مثبتی به این پیشرفتهای UX دارند، به ما کمک میکند وقتی بقیه مجموعه اشارهگر خود و همچنین سایر عناصر رابط کاربری را در تجربه ایجاد میکنیم.
همانطور که Roblox فراتر از بازی به یک پلتفرم ارتباطی، اجتماعی و حتی تراکنشی گسترش مییابد، این یکی از جنبههای محصول به راهنمایی کاربر در هنگام حرکت بین برنامه و تجربیات آن کمک میکند. امید ما این است که از اینجا به بعد این به عنوان یک استاندارد رایج برای متاورزهای دیجیتال عمل کند!
علاقه مند به پیوستن به تیم طراحی Roblox و حل مشکلات این چنینی هستید؟ ما را در corp.roblox.com/careers/ برای آخرین فرصت ها
درک وانگ یک طراح بصری در Roblox است. او روی سیستم طراحی Roblox کار می کند که رابط کاربری وب سایت Roblox و برنامه دسکتاپ را شکل می دهد. نه شرکت Roblox و نه این وبلاگ هیچ شرکت یا خدماتی را تایید یا پشتیبانی نمی کنند. همچنین هیچ ضمانت یا قولی در رابطه با صحت، قابلیت اطمینان یا کامل بودن اطلاعات موجود در این وبلاگ داده نمی شود.
©2021 Roblox Corporation. Roblox، آرم Roblox، و Powering Imagination از علائم تجاری ثبت شده و ثبت نشده ما در ایالات متحده و سایر کشورها هستند.
منبع: https://blog.roblox.com/2022/02/designing-mouse-pointer-digital-metaverse/
- 2021
- 3d
- دسترسی
- در میان
- معرفی
- در میان
- نرم افزار
- کاربرد
- سیاه پوست
- بلاگ
- مارکدار
- موارد
- علت
- به چالش
- به چالش کشیدن
- مشترک
- ارتباط
- شرکت
- کامپیوتر
- کشور
- جاری
- دهه
- طرح
- طراح
- توسعه
- توسعه
- توسعه دهندگان
- مختلف
- دیجیتال
- قطره
- موثر
- محیط
- گسترش می یابد
- تجربه
- تجارب
- چشم
- چهره
- باز خورد
- زمینه
- سرگرمی
- بازی
- بازیها
- بازی
- سیاه و سفید
- راهنمایی
- اینجا کلیک نمایید
- زیاد
- تاریخ
- چگونه
- HTTPS
- i
- ICON
- همهجانبه
- بهبود
- بهبود
- اطلاعات
- رابط
- IT
- آخرین
- سبک
- آرم
- طولانی
- مک
- اکثریت
- ساخت
- به حداکثر رساندن
- متاوررس
- مدرن
- بیش
- محبوبترین
- عملیاتی
- سیستم عامل
- فرصت ها
- فرصت
- دیگر
- سکو
- بازی
- بازی
- فقیر
- محبوب
- مثبت
- محصول
- واکنش
- طراحی مجدد کردن
- پاسخ
- REST
- Roblox
- قوانین
- s
- بدون درز
- یکپارچه
- محصولات
- تنظیم
- سایه
- So
- آگاهی
- دولت
- بیانیه
- سبک
- موفق
- پشتیبانی از
- سیستم
- متن
- La
- موضوع
- بالا
- علائم تجاری
- روند
- ما
- ui
- منحصر به فرد
- us
- قابلیت استفاده
- کاربران
- ux
- تصویری
- بازی های ویدئویی
- مجازی
- دید
- سایت اینترنتی
- چی
- پنجره
- مهاجرت کاری
- با این نسخهها کار