رابط کاربری ( UI ) چیست؟

فرق طراح رابط کاربری با گرافیست چیه؟ چرا اصلا بهش رابط کاربری می گن؟ یه رابط کاربری خوب چه ویژگی هایی داره؟ و بازار کارش چطوره؟

تصویر مطلب

معمولا افرادی که تازه کار طراحی رابط کاربری رو شروع کردن چند تا سوال مهم توی سرشون دارن. توی این مطلب قصد دارم علاوه بر اینکه یه توضیح کلی از مفهوم رابط کاربری داشته باشم، به اون سوال ها هم جواب بدم.

تفاوت طراح رابط کاربری با گرافیست چیه؟

طراحی رابط کاربری زیر مجموعه طراحی گرافیکی به حساب میاد. توی صنعت نرم افزار به گرافیست می گن طراح دیداری (Visual designer). ولی این فقط یه اختلاف لفظیه و عملا تفاوتی بین گرافیست و طراح دیداری نیست. دلیل این اختلاف اینه که توی این صنعت کلمه «طراح» برای نقش های بیشتری استفاده می شه و ما اینطوری اونها رو تفکیک و قابل شناسایی می کنیم.

وقتی در مورد طراحی حرف می زنیم اغلب مردم به طراح دیداری یا همون گرافیستفکر میکننن و دلیلش اینه که قابل فهم تره. طراحان دیداری کارشون اینه که رنگ و تصاویر مناسب رو انتخاب کنن. لوگو رو طراحی کنن و یک سری کارای دیداری این شکلی. این نوع طراحی همون چیزیه که بیشتر مردم بهش میگن «هنر».

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

طراحی دیداری خوب یعنی نرم افزار باید خوشگل باشه. رابط کاربری خوب یعنی کار با نرم افزار باید ساده باشه. نمونه طراحی دیداری خوب می شه Apple. نمونه یه رابط کاربری خوبم می شه گوگل (البته بجز Google Docs و اندروید که بهتره از این لیست حذف بشنwink).

یه طراح UI چی باید بلد باشه؟

با اینکه گفتیم طراحان دیداری (گرافیست ها) با طراحان رابط کاربری متفاوت هستن، اما واقعیت اینه که معمولا یه طراح UI باید طراحی دیداری رو هم بلده باشه. علتش اینه که معمولا اغلب شرکت ها یه نفر رو استخدام می کنن تا کار هر دو رو انجام بده. بنابر این اولین مهارتی که طراح رابط کاربری نیاز داره اینه که بتونه با ابزار های گرافیکی مثل Photoshop و یا Illustrator کار کنه. البته منظور من اصلا این نیست که برای طراحی فوری فتوشاپ رو باز کنید. بهتره قبلش طراحی اسکچ (Sketch) رو یاد بگیرید.

با اینکه من عملا برنامه نویس front-end رو با طراح UI یکی نمی دونم، اما اینم از اون کاراییه که اغلب توسط طراح رابط کاربری انجام می شه. معمولا طراح UI باید مهارت های کدنویسی لازم رو هم برای زبان های HTML، CSS و گاهی هم Javascript داشته باشه.

مهارت دیگه ایی که بهش نیاز دارید اینه که نسبت به نرم افزار های مختلف و کاربرد اونها آشنایی کافی داشته باشید. اگه تمرکزتون روی وب سایته، خیلی خوبه که سبک های مختلف طراحی رو بشناسید. به عنوان مثال بهتره به مزایا و معایب سبک هایی مثل تخت، رئالیسم، سه بعدی و .. آشنایی کافی داشته باشید.

بازار کار برای طراح رابط کاربری

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

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

چیزی که من در طول این سالها فهمیدم اینه که توی استخدام شدن به عنوان یه طراح رابط کاربری چهار تا چیز مهم هستن: کیفیت کارای شما، رزومه تون (یعنی قبلا واسه چه شرکت هایی کار کردید)، کیا (کدوم طراح های مطرح) رو می شناسید؟ و اینکه توی مصاحبه چقدر اعتماد به نفس و جذبه دارید.

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

چیز دیگه ایی هم هست؟

من هرچیزی رو لازم می دونستم اینجا نوشتم، اما طبیعتا نمی شد به همه موضوعات بپردازم. علاوه‌بر این پیشنهاد میکنم به گروه های فعال در زمینه UX و UI بپیوندید.

UX Shiraz بزرگترین و فعال‌ترین تشکل سازمانی کشوره که سالانه رویدادهای متفاوتی رو با موضوع تجربه کاربری (UX) برگزار میکنه. متخصصین زیادی رو میتونید توی این گروه پیدا کنید.

به جمع اعضای این جامعه بپوندید

حرف آخر

وب ادوایس به کارش خاتمه داده و دیگه اینجا مطلب جدیدی منتشر نمیشه.

از این بعد فقط توی وب سایت قدیمی‌تر خودم مینویسم. اونجا مطالب کوتاه هستن، اما بطور مداوم همه چیزهایی که روزمره تجربه میکنم یا باهاشون در ارتباط هستم رو می‌نویسم. تفاوت مهمش با وب ادوایس اینه که همین نکات رو در ارتباط با مسایل کاری و زندگی اجتماعی تحلیل میکنم.


فاطمه
۲۰ شهریور ۱۳۹۶ ۰۴:۳۲ فاطمه

عالی بود موفق باشید. 


Avish
۲۹ خرداد ۱۳۹۶ ۰۵:۵۳ Avish

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


شهیار
۲۸ شهریور ۱۳۹۶ ۰۴:۴۰ شهیار Avish

سلام.

در پاسخ به این دوست عزیز میتونید wamp یا xamp رو نصب کنید و صفحات وبسایت خودتون رو اونجا تست کنید.


شهیار
۲۸ شهریور ۱۳۹۶ ۰۴:۴۰ شهیار Avish

سلام.

در پاسخ به این دوست عزیز میتونید wamp یا xamp رو نصب کنید و صفحات وبسایت خودتون رو اونجا تست کنید.


مشتبا
۲۸ فروردین ۱۳۹۶ ۰۹:۱۱ مشتبا

دمت گرم عزیز


حسین زینی وند
۱۹ بهمن ۱۳۹۵ ۲۱:۲۱ حسین زینی وند

عالی بود امید جان . من وب ادوایس رو برای هر سخنرانیم معرفی می کنم چون از مطالبش پاور پوینت و شو  درست می کنم الان داشتم برای سخنرانی فردا دانشگاه بهشتی مطلب بر می داشتم . واقعا وب ادوایس سایت مرجع عالی با دانش فوق العاده ای هست .  حسین زینی وند http://zeinivand.ir


فائزه
۱۹ بهمن ۱۳۹۵ ۱۰:۳۳ فائزه

خیلی ممنون. توضیحات شفاف، مفید و راهگشایی بود.

سپاسگزارم


پیمان حبیبی
۲۶ تیر ۱۳۹۵ ۰۷:۳۰ پیمان حبیبی

سعید طاهری
۲۳ خرداد ۱۳۹۵ ۲۱:۳۵ سعید طاهری

سعید طاهری
۲۴ خرداد ۱۳۹۵ ۱۱:۲۴ سعید طاهری سعید طاهری

اما نا امید نشید چون درصد افرادی که جاوااسکریپت رو غیر فعال کردن در مقابل کسانی که اصلا کلمه جاوااسکریپت رو نشنیدن خیلی کمتره


غزاله
۱۸ خرداد ۱۳۹۵ ۱۸:۱۴ غزاله

با سلام و تشکر از مطلبتون

میشه معیارهای طراحی رابط کاربری دسته بندی کرد؟ ویا معیار ها و اصول طراحی خوب چیه؟


نگین
۳۰ اردیبهشت ۱۳۹۵ ۲۰:۱۱ نگین

سلام من با html و css آشنایی دارم اما اصلا در مورد ui هیچی نشنیده بودم تا اینکه رفتم یه جا برای مصاحبه کاری هرچی پرسیدن جواب دادم تا اینکه رسیدن به کلمه ui من متوجه نشدم اما سعی کردم یه جورایی بحث رو جمع کنم اما بعد چند روز که دیدم خبری ازشون نشد متوجه شدم همین کلمه کار دستم داد... خلاصه کنم اون مصاحبه با اینکه به سرانجام نرسید اما نکته مثبتش این بود که من با استفاده از این مطلب کامل شما یه قدم برم جلوتر...ممنونم


علیرضا
۲۳ بهمن ۱۳۹۴ ۱۱:۰۰ علیرضا

خیلی ممنون بخاطر مطالب قوی و خوبتون_یک سوال مهم دارم_چندتا دانشگاه تلویزیون و هنرهای دیجیتال تو ایران وجود داره؟


امید امرایی
۲۴ بهمن ۱۳۹۴ ۱۲:۲۱ امید امرایی علیرضا

سلام علیرضا، متاسفانه من خیلی اطلاعات دقیقی در خصوص رشته های دانشگاهی در داخل کشور ندارم. در این حد مطلعم که در دانشگاه صدا و سیما تدریس میشه.


تارا
۰۳ دی ۱۳۹۴ ۱۳:۴۷ تارا

بسیار ممنون از مطلبتون.

جواب همه ی سوالاتم رو توش پیدا کردم،


ساسان
۲۸ آذر ۱۳۹۴ ۱۹:۲۷ ساسان

امید امرایی
۲۹ آذر ۱۳۹۴ ۲۰:۵۴ امید امرایی ساسان

سلام، من بطور کلی متوجه فرمایشات شما نشدم. نتونستم بفهمم شما بین موزیسین و نوازنده پیانو تفاوت قایل هستید یا نه.


مهدی
۱۴ اردیبهشت ۱۳۹۴ ۱۳:۲۳ مهدی

امید امرایی
۱۸ اردیبهشت ۱۳۹۴ ۰۶:۴۲ امید امرایی مهدی

سلام مهدی عزیز،
تاریخ این مطلب به زمانی برمیگرده که گوگل هنوز متریال دیزاین رو در خیلی از سرویس هاش نداشت. بخش زیادی از کاربران اندروید هم از نسخه های پایین تر ۴ استفاده می کردن که این سبک از طراحی رو درش نمی دیدیم.


hassani
۱۰ اسفند ۱۳۹۳ ۱۷:۵۹ hassani

سلام من از راهنماییتون در قسمت بازار کار برای طراح رابط کاربری استفاده کردم.ممنونم از شما


مهدی
۰۳ دی ۱۳۹۴ ۱۶:۰۹ مهدی hassani

ممنون متوجه شدم


سلمان گلریز
۱۲ بهمن ۱۳۹۳ ۱۱:۰۰ سلمان گلریز

امید امرایی
۱۲ بهمن ۱۳۹۳ ۱۱:۰۸ امید امرایی سلمان گلریز

سلام سلمان عزیز، با تعریف شما از گرافیک موافقم. جز اینکه ui در هیچ حالتی نمی‌تونه زیر مجموعه گرافیک باشه. چون گرافیک تنها بخشی از رابط کاربریه. سایر مواردی مثل راحتی استفاده، قابلیت پیمایش (ناوبری)، یافت پذیری و ... ارتباط چندان با مبحث گرافیک ندارن. در کل هیچ کدوم زیر مجموعه دیگری نیستن. هر دو علومی هستن که که یک سری همپوشانی ها دارن.


رضا
۰۶ بهمن ۱۳۹۳ ۰۹:۲۲ رضا

به نظر من یک طراح رابط کاربری حتما نباید کدنویسی هم بدونه :)


مهدی
۱۴ اردیبهشت ۱۳۹۴ ۱۳:۲۶ مهدی رضا

سلام
 نمیدونم تا چه حد این بازار رو میشناسین!
منم اشنایی مختصری دارم ولی اغلب سایت های پروژه یابی مثل پونیشا رو که بررسی کردم دقیقا همشون طراح رابط کاربری مسلط به کدنویسی میخاستن!


جوجو
۲۷ آذر ۱۳۹۳ ۱۴:۵۵ جوجو

سلام ! شما آدم موفقی هستید چون به کار ادامه می دید و این مهمترین تفاوت بین آدماست


سلمان
۱۱ آذر ۱۳۹۳ ۱۴:۲۵ سلمان

داریوش
۰۸ آذر ۱۳۹۳ ۰۹:۰۵ داریوش

خوب بود


فرهاد مرادی
۱۰ آبان ۱۳۹۳ ۱۰:۳۰ فرهاد مرادی

سلام به عنوان یه تازه کار از این مطلب شما استفاده کردم ممنون که زحمت کشیدید


mr sinoser
۰۶ مهر ۱۳۹۳ ۱۸:۲۹ mr sinoser

امید امرایی
۰۶ مهر ۱۳۹۳ ۲۲:۰۵ امید امرایی mr sinoser

mr sinoser
۰۷ مهر ۱۳۹۳ ۲۰:۱۵ mr sinoser امید امرایی

Mekaeil
۱۵ خرداد ۱۳۹۳ ۲۲:۲۵ Mekaeil

سلام مطلب خوبی بود . سپاس

ولی به نظر من یک طراح رابط کاربری لزومی نداره به ابزارهایی مثل فتوشاپ وارد باشه البته در حد مقدماتی خوبه ولی نه زیاد! من خودم طرحهای وب رو میریزم بعد گرافیست پیاده سازی میکنه و جاهایی که لازمه تغییر میدیم

و نکته ی دیگه ای هم که لازمه بگم اینه که یک گرافیست وقتی وارد دنیای کدنویسی شد دیگه نباید زیاد به کیفیت کاریش امیدوار بود چون وارد درگیری محدودیت و تنبلی میشه من این رو تجربه کردم! :)

موفق باشید


امید امرایی
۱۸ خرداد ۱۳۹۳ ۱۲:۲۹ امید امرایی Mekaeil

قطعا اگر توی یه تیم تخصصی قرار بگیرید، کار یه گرافیست از یه طراح ui جدا می شه. اما در واقع اغلب اینطور نیست. البته من هم فکر نمی کنم یه گرافیست حتما باید کد نویسی هم بکنه، اما حداقل این باید بخشی از شناخت های عمومیش باشه.


سمانه
۱۴ خرداد ۱۳۹۳ ۱۸:۰۷ سمانه

سلام، 

خب اگر نخوایم تمرکزمون روی طراحی وب سایت باشه چی؟ اون وقت چه چیزهایی رو باید یاد بگیریم ؟ (نرم افزار های تحت وب و موبایل اپلیکیشن ها )

و این که همه توصیه میکنن که کارهای کوچیک هر چند بی کیفیت رو شروع کنیم تا یاد بگیریم،اولین بار هست که چنین نظری رو میخونم،جالب بود.


امید امرایی
۱۵ خرداد ۱۳۹۳ ۰۶:۱۵ امید امرایی سمانه

سمانه
۱۵ خرداد ۱۳۹۳ ۲۰:۳۸ سمانه امید امرایی

ممنونم 

مشترک مشاوره‌های رایگان بشید

آدرس ایمیل‌تون رو وارد و هر ۳ یا ۴ هفته یه سری مشاوره های رایگان ما رو دریافت کنید. ضمنا ما هم مثل شما از اسپم متنفریم.

یا اینکه نه منصرف شدم

آخ! دیدید داشت یادمون می‌رفت؟

ما هنوز نمیدونیم شما رو باید چی صدا بزنیم، این بد نیست؟

و یا انصراف