زمانی که قصد نوشتن مقالهای در مورد UI و یا همان رابط کاربری را داشتم، تصمیم گرفتم تا در ابتدا نگاهی به مقالات سطح وب در مورد این مفهوم بیندازم. پس از مطالعه چندین مقاله متوجه شدم که اغلب مطالب موجود، صرفا باعث ایجاد گمراهی در ذهن مخاطبان میشود و هیچ کدام نمیتواند به خوبی مفهوم واژه UI را به یک کاربر تازه کار و مبتدی برساند.
از همین رو تصمیم گرفتم تا به جای نوشتن یک مقاله معمولی، مقاله آشنایی با UI یا رابط کاربری به زبان ساده را بنویسم.
UI چیست؟

در یک تعریف ساده، هر آنچه که شما در مانیتور صفحه رایانه یا تلفن همراه خود مشاهده میکنید، UI یا رابط کاربری (USER INTERFACE) است. موضوعی که باعث گمراه شدن اغلب مخاطبان و حتی نویسندگان شده، این است که واژه رابط کاربری را با طراحی رابط کاربری یکی میدانند.
زمانی که صحبت از ساختمان میشود، شاید ذهن شما صرفا به یاد یک بنای ساخته شده بیوفتد، احتمالا در زمان تصور کردن این بنا، به جزییاتی مانند زیبایی، روشنایی، محیط اطراف و… توجه میکنید. اما زمانی که صحبت از ساختمان سازی میشود، دیگر بحث یک بنای ساخته شده نیست. بلکه این بار صحبت از ساخت و ساز است.
حال در محیط رایانه؛ زمانی که به سایت mrsalar وارد میشوید؛
- رنگ روشن بکگراند
- فونت خوانا
- منوهای مرتب
- لوگو
- دکمههای شبکههای اجتماعی و ارتباطی
- و…
تماما اجزای تشکیل دهنده UI یا رابط کاربری سایت محسوب میشوند. در مقابل؛ چینش، طراحی و ساخت این موارد که بر عهده شخص بنده (گرافیست) بوده است، طراحیِ رابط کاربری نامیده میشوند.
تا اینجا با دو مفهوم اصلی این مقاله آشنا شدیم. حال باید در مورد جزییات پیرامون آنها اطلاعاتی بیشتری به شما بدهم تا به خوبی متوجه شوید که وظیفه یک طراح رابط کاربری چیست و چه چیزی در رابط یا واسط کاربری سایت تأثیر گذار است.
طراحی رابط کاربری
وظیفه یک طراح رابط کاربری چیست؟ احتمالا ساخت و ساز صفحات وب سایت و اپلیکیشنها بر اساس اصول UI. این جمله تعریف اشتباهی نیست اما مانند این است که بگوییم وظیفه معمار، ساخت دیوارهای ساختمان طبق اصول معماری است!!
زمانی که در موضوع UI صحبت از وظیفه باشد، با چند سِمت مختلف برخورد میکنیم:
- طراح UI یا رابط کاربری
- UI Developer
- طراح UX یا تجربه کاربری (به مقاله UX مراجعه شود)
طراحِ UI یا رابط کاربری
وظیفه یک طراح UI ایجاد نقشهِ ساختار کلی یک صفحه است. این شخص باید با در نظر گرفتن نیازهای برند یا کسب و کار مورد نظر، به طراحی صفحه بپردازد و به خوبی رنگ، فونت، اِلمانها، تصاویر و دیگر اجزای صفحه را با یکدیگر ادقام کند. در این فرایند طراح رابط کاربری باید نمای صفحه را به صورت جزیی و با تمام ویژگیها بر روی کاغذ آورده و یا با استفاده از نرم افزارهای مخصوص، آنها را به صورت یک طرح آماده به دست کدنویس یا طراح سایت و اپلیکیشن بسپارد.
در نهایت، کاربر خروجیِ کار طراح کاربری را مشاهده میکند. زمانی که شما با ورود به یک سایت و مشاهده ترکیب رنگ آن، قرارگیری المانها و وجود تصاویر با کیفیت شگفتزده میشوید، اینها نتایج کار یک UI کار حرفهای هستند. در این مثال میتوان گفت این طراح به هدف خود که طراحی یک رابط کاربری زیبا و مناسب بوده، رسیده است اما این به معنای اتمام کار نیست.
یک طراح همواره به بهبود این فضا میپردازد و هربار برای بهتر شدن حس کاربر از مشاهده صفحات، تلاش میکند و تغییرات جدیدی را به وجود میآورد
UI Developer
تمامی مواردی که در بالا گفته شد وظیفه طراح UI بود و پیادهسازی آن بر روی صفحات وظیفه Developer (برنامه نویس) است. در آخر و از ادقام این دو واژه، عبارت UI DEVELOPER یا برنامه نویس UI ساخته میشود. وظیفه این فرد علاوه بر تمامی وظایف ذکر شده برای طراح UI، پیادهسازی طرحهای نهایی بر روی صفحات سایت و اپلیکیشن است.
چنین شخصی علاوه بر طراحی باید بر کدنویسی نیز مسلط باشد. مهم ترین زبانهای مورد نیاز برای یک UI Developer:
- CSS
- HTML
- و JAVA SCRIPT
است.
وظایف یک نیروی UI چیست؟
با توجه به اینکه مهمترین کار یک نیروی UI، طراحی صفحات مختلف است، باید به برنامههای گرافیکی مسلط باشد تا به خوبی بتواند این فعالیت را انجام دهد. مهمترین نرم افزارهای گرافیکی مورد نیاز او، فتوشاپ و ایلستریتور هستند.
پس از مسائلی چون روانشناسی رنگها، دید مناسب به فضای طراحی و… این نیرو باید با چند موردی که در پایین گفته میشود آشنا بوده و آنها را در صفحات وب به کار ببرد. در اصل موارد ذکر شده در پایین، اصول طراحی رابط کاربری هستند:
ساختار: منظور از اصل ساختار، قابل درک بودن خروجی طراحی شده توسط کاربر است. نتیجه نهایی باید کاملا ساختار یافته باشد و موارد مربوط در صفحه در کنار یکدیگر به کار رفته و از پیچیدگی و بهم ریختگی دور باشد.
سادگی: سادگی را میتوان مهم ترین اصل در UI دانست. برخی از افراد تازه کار تصور میکنند با پیچیدگی میتوانند به خوبی نظر کاربر را در صفحات وب جلب کنند در حالی که این مورد به شدت باعث دور شدن کاربر از فضای صفحات میشود.
پایداری: منظور از اصل پایداری، قابل دید بودن همه اجزای صفحه است. کاربر نباید برای پیدا کردن مقصود خود زمان بیشتری را نسبت به زمان استاندارد آن صرف کند. همه اجزای مهم باید در دیدرس و دسترس او باشند.
بازخورد: به هیچ عنوان نباید فعالیتهایی که در صفحه اتفاق میافتد (لود صفحه و…)، کاربر را گیج و سردرگم کند.
تحمل: در نهایت نیز طراح باید تا جای ممکن از بروز خطا جلوگیری کند. اصل تحمل اشاره به کاهش خطاهای طراح در زمان طراحی دارد که این موضوع نیازمند دقت تجربه و البته دقت در حین کار است.
کلام آخر
در این مقاله از سایت مِستر سالار اطلاعات جامع و البته مختصری در مورد رابط کاربری یا UI به شما داده شد. علاوه بر این در مورد تفاوت طراحی رابط کاربری با رابط کاربری و وظایف نیروی UI مواردی به شما گفته شد. امیدواریم این مقاله برای شما مفید بوده باشد.