گیمولوژی | رسانه تحلیلی بازی سازی | رابط کاربری (UI) بازی های ویدئویی (3): پیش به سوی حرفه ای شدن
پس از آشنا شدن با مفاهیم کلی مرتبط با مبحث UI در قسمت اول و تشریح برخی از ویژگی های ضروری یک رابط کاربری خوب و معرفی افراد مناسب برای ورود به این عرصه در قسمت بعدی؛ حالا در سومین بخش از این سری مطالب قصد داریم تا با معرفی برخی از مهارت های فردی و تعدادی از ابزارهای مورد نیاز برای اجرا آنها؛ رفته رفته پس از علوم پایه، قدم در مسیر مهارت های حرفه ای در این زمینه بگذاریم.
طراحی نمودار درختی (Wire Farme) و پیش الگو (Prototype):
برای شروع پروسه طراحی رابط کاربری ابتدا می بایست نقشه راه را معلوم کرد تا علاوه بر معلوم بودن کلیت مسیر، برخی از عملکردها و شیوه‌های انتقالی و چگونگی اتصال میان بخش های مختلف را روی آن مشخص نمود. این نقشه که همان شجره نامه خانوادگی رابط کاربری است؛ نمودار درختی یا Wire Frame نامیده می شود. دقت داشته باشید که نمودار درختی در واقع قسمتی از خود رابط کاربری نیست. اما تهیه و اجرای آن (خصوصا در پروژه های بزرگ) اجتناب ناپذیر است. این عضو از مجموعه عوامل بصری که شاید نام آن را کمتر شنیده باشید با اینکه هرگز توسط کاربر و پلیر دیده نخواهد شد اما نقش مهمی را چه در طراحی UI و چه در روند کلی تولید بازی ایفا می کند. Wire Frame به طراح رابط کاربری (و بقیه عوامل تیم به خصوص UX Designer) کمک می کند تا در شلوغی بخش های مختلف بازی و ترتیب و چگونگی اتصال آنها دچار سردرگمی نشده و چیزی را از قلم نیندازند. برای طراحی یک نمودار درختی می بایست تمام صفحاتی که کاربر به آن ها دسترسی پیدا می کند را با فرم های ساده و بدوی مشخص نمود. سپس ترتیب و اولویت دستیابی به هر کدام از آن ها را به وسیله خطوط و دیگر علائم بصری معلوم کرده و هرکدام از نکات ضروری مورد نیاز را در جای مناسب یادداشت کرد.
برای طراحی نمودار درختی سه روش کلی وجود دارد:
1- ابزارهای دیجیتال طراحی و نرم افزارها مثل Photoshop، Illustrator و Corel Draw
2- ابزارهای آنلاین و وبسایت های ارائه دهنده این سرویس نظیر:
3- با استفاده از دست و ابزارهای سنتی طراحی (کاغذ، خط کش، شابلون و انواع قلم)
به این نکته دقت داشته باشید که اجرای این نمودار تنها مختص روند طراحی رابط کاربری نبوده و این شیوه در بسیاری از پروسه‌های تولید یک بازی راه گشاست. هر کدام از این پروسه‌ها می توانند wireframe مخصوص به خود را همراه با اطلاعات،علائم و اصطلاحات تخصصی خودشان داشته باشند.
بعد از شجره نامه (که شامل تمام بخش های در نظر گرفته شده در نقشه UI بازی همراه با جزئیات اندک و نحوه اتصال و ارتباط آنها با یکدیگر است) نوبت به طراحی پیش الگو یا Prototype برای هر بخش می رسد. در طراحی پیش الگو اجزای تشکیل دهنده هر بخش در ساده ترین حالت بصری صرفا جهت پیش بینی مکان و اندازه ی هر جز در صفحه به تصویر کشیده می شود. پیش الگو نسخه پیاده شده‌ای از استخوان های رابط کاربری هر بخش می باشد که تحت چیدمان راهبردی و هدفمندی در کنار هم قرار گرفته اند. اما سوال اینجاست که چه قواعدی در تعیین جزییات این ساختار مبتنی بر منطق برقرار است؟ جواب این سوال در واقع محل و اندازه ی اجزای رابط کاربری را معلوم می کند.
نظام بصری یا معماری هنرمندانه
این شاید حساس ترین مرحله در طراحی یک UI باشد. جايي كه باید هنر اوليت بندی در پیاده سازی روابط منطقی، منجر به خلق ساختاری موجه شود که کاربر از تعامل با آن احساس “رضایت” داشته باشد. رابط کاربری که در واقع یک جعبه ابزار همه فن حریف برای پلیر است؛ بایستی دارای ابزارهای متنوعی باشد که تمامی نیازهای های او را رفع کند. UI مجموعه ی منظمی از اشیای متفاوتی است که هرکدام بنا بر وظیفه ای طراحی شده اند. مجموعه این اشیا با توجه به عملکرد، اهمیت، جنس و … دارای شباهت ها و تفاوت هایی می باشند که اولویت آنها را برای اندازه و مکان قرارگیری، در صفحه معلوم می کند. همان طور که تمام آچارها در یک جعبه ابزار در کنار هم قرار می گیرند، این تناسب میان اندازه، مکان و سایر مولفه های اجزای UI باید به گونه ای محاسبه شود که پلیر درست سر وقت به هر کدام از آنها دست پیدا کرده و از -در کنار هم- دیدن آنها سردرگم نشود.
ژانر بازی و جامعه هدف آن نیز از عوامل تاثیر گذار در نظم بصریِ رابط کاربری هستند. بر همین اساس پیش بینی نوع و میزان محاسبات ذهنی پلیرها و سطح تجربه آنها هنگام تصمیم گیری در انواع تعاملاتشان با بازی، تاثیر مستقیمی بر تعیین انواع تناسبات هدفمند ابعادی و مکانی دارد. برای مثال اگر ژانر بازی تمرکزی باشد پس رابط کاربری نباید توجه زیادی به خود جلب کند. دقت کنید که این موضوع هیچ با منافاتی با زیبایی بازی ندارد. گاهی ساده ترین ساختارها در رابط های کاربری به زیبا ترین شکل ممکن پیاده سازی و پرداخت می شوند. برای مثال نرم افزار Lumosity که مجموعه ای از بازی های فکری را ارائه می کند؛ در طراحی رابط کاربری خود با توجه به همین ژانر، تحت ساختاری ساده اما خوش سلیقه و کارآمد عمل کرده تا در کنار حفظ تمرکز کاربر، ماموریت خود را به “زیبایی” انجام داده باشد.
در نهایت هر کدام از فرم ها، تمثیل ها، جداول، عناوین، جملات و … هر آنچه که در قلمرو رابط کاربری به حساب می آید؛ باید برای جایگاه و ابعاد خود دلیل قانع کننده ای داشته باشد تا معماری این ساختار برای پلیر توجیه پذیر و صد البته رضایت بخش به نظر برسد.
سبک يا موضوعیت هنری (Theme):
سبك هنری در واقع جنس یا نوع لباس UI محسوب می شود. همان طور که شما برای هر مقصدی نوع لباس منطبق بر هنجارها و فرهنگ مقصد مورد نظر را انتخاب می کنید؛ در طراحی رابط کاربری نیز باید با توجه به فضا، داستان و موضوع بازی، سبك هنری UI را انتخاب کرد. تخت یا سه بعدی بودن، بافت اجزا، فرهنگ موضوعی، بومی و زمانی غالب بر آنها و … می توانند از مولفه های سبک هنری UI و در اجرای هنرمندانه آن تاثیر گذار باشند. اما در واقع شما در انتخاب نوع لباس بازی (سبک هنری) به شرط مشکل ساز نبودنش آزادی کامل دارید. درست مثل اینکه بخواهید در یک عروسی (که غالبا لباس رسمی به تن دارند) با لباس های اسپرت حضور پیدا کنید. این شاید به نظر کسی عجیب نرسد اما در چنین مراسمی کسی را تصور کنید که با لباس شنا حضور پیدا کرده است! در این بین بازی های زیادی را می شناسیم که Theme هنری رابط کاربری آنها متاثر از فضای کلی و داستان بازی طراحی شده باشد. سری بازی های Halo با موضوع سفرها و جنگ های فضایی تولید شده اند. پس انتظار می رود رابط کاربری آنها تداعی کننده مفاهیمی همچون تکنولوژی های فوق پیشرفته و زمان آینده باشد.
ترکیب رنگی و پالت مناسب:
بدون شک طراحان رابط کاربری بایستی مهارت ویژه ای در زمینه تشخیص، تحلیل و انتخاب رنگ داشته باشند تا بتوانند از رنگ ها به عنوان یک ابزار کارآمد برای پیشبرد اهداف UI خود استفاده کنند. رنگ ها می توانند در کنار داشتن جاذبه بصری و زیباسازی طرح در انتقال برخی از مفاهیم و پیام ها به ناخودآگاه بازیکن و کاربر نقش مهمی را ایفا کنند. رنگ ها قبل از هر نوشته یا تمثیلی (icon) با کاربر حرف می زنند. به طور مثال احتمالا پلیر می داند برای انتخاب کلید یا دکمه هایی که با رنگ قرمز متمایز شده اند باید دقت بیشتری به خرج دهد یا با انتخاب دکمه ها و عملکردهایی با رنگ سبز در حال تایید پروسه ای می باشد. به تصویر زیر توجه کنید. علی رغم زبان جنوب شرق آسیایی این رابط کاربری همه ی ما می داریم که با انتخاب هر کدام از گزینه ها چه اتفاقی رخ می دهد.
شناخت رنگ ها و توانایی انتخاب و به اصطلاح گلچین ترکیب مناسبی از آنها در یک پالت که در کنار زیبایی موجب کارایی هرچه بیشتر رابط کاربری می شود؛ از مهارت های فردی یک UI Designer به شمار می رود. مباحث مربوط به تقویت این مهارت و بخشی از قواعد انتخاب پالت های رنگی، پیش از این در سه گانه تئوری رنگ ها (1 / 2 / 3) در گیمولوژی بیان شده و در مطالب تخصصی تر در زمینه رنگ ها و مفاهیم و پیام های آنها در آینده نیز ادامه خواهد داشت.
در قسمت بعدی این مبحث به معرفی و مقایسه ابزار و مهارت های بیشتری خواهیم پرداخت اما فراموش نکنید که هیچ تئوری و مقاله ای جای تماشا و تجربه عملی را نمی گیرد پس در راه تبدیل شدن به یک طراح حرفه ای رابط کاربری در بازی های ویدئویی الزاما می بایست: بازی کنید، بازی ببینید، الهام بگیرید اما …
