تا به حال برایتان پیش آمده است که با ورود به یک وب سایت یا اپلیکیشن، مجذوب طراحی جذاب آن شده و صرفا به دلیل طراحی فوق‌العاده تصمیم به استفاده از آن گرفته باشید؟ حتی گاهی اوقات پیش می‌آید که ما به صورت کاملا ناخودآگاه، صرفا بخاطر جذابیت بصری یک فروشگاه اینترنتی از آن خرید می‌کنیم یا حتی به دلیل نداشتن جذابیت کافی به فروشگاه دیگری می‌رویم. اینجاست که نقش و اهمیت یک طراح رابط کاربری (UI) بیشتر به چشم می‌آید و هر وب سایت، اپلیکیشن و به طور کلی هر محصول دیجیتالی که از برکت وجود یک طراح رابط کاربری خوب استفاده نکند، به سعادت جذب کاربران و جلب اعتماد آن‌ها نمی‌رسد.
به بیان دیگر می‌توان گفت هر طراح رابط کاربری، الماس درون یک تیم توسعه‌دهنده است. اگر می‌خواهید که آن الماس شما باشید، باید مسیر پر پیچ و خمی را بگذرانید؛ پس به یک نقشه راه و از همه مهم‌تر راهنمایی یک فرد باتجربه که دستی بر آتش طراحی UI داشته باشد، نیاز دارید. ما در ادامه این نقشه راه ارزشمند را به شما خواهیم داد. امیدواریم که به خوبی از آن استفاده کنید.
در انتها به پرسش‌های زیر پاسخ خواهیم داد:
ابتدا طراحی UI را به شما معرفی می‌کنیم؛ سپس، بار و بندیل را جمع می‌کنیم و به سراغ ساخت الماس درونی خودمان می‌رویم.
طراحی رابط کاربری، یک رشته به سرعت در حال رشد است که به علت اهمیت بالا، اخیرا استارتاپ‌ها و شرکت‌های برنامه نویسی توجه ویژه‌ای به آن نشان داده‌اند. هدف طراحی رابط کاربری این است که به کاربر کمک کند در کنار تجربه‌ای خوشایند به اهدافش برسد.
طراحی UI، طراحی همه بخش‌هایی بصری که کاربر با آن‌ها در ارتباط است را شامل می‌شود. وظیفه یک طراح رابط کاربری، فقط ایجاد یک چیز زیبا نیست که کاربر با دیدن آن شروع به به‌به و چه‌چه کند؛ بلکه درک ذهنیت کاربر، پیش بینی انتظارات آن‌ها و سپس ایجاد یک طراحی کاربرپسند است.
مهم‌ترین چیز در طراحی UI، درک عمیق مشتری و انگیزه او و سپس ارائه راهکارهای منطقی با رعایت اصول زیبایی‌شناسی است.
کاربران با مشاهده رابط کاربری برنامه ما، درباره قابل اطمینان بودن، حرفه‌ای بودن و بسیاری چیزهایی که حتی ممکن است به ذهنمان نرسد، ما را قضاوت می‌کنند و بر اساس این قضاوت درباره ترک کردن یا خرید از ما تصمیم می‌گیرند.
اکنون که می‌دانیم این علم تا چه حد بر روی میزان جلب اعتماد مخاطب و به دنبال آن میزان درآمد کسب و کار ما تاثیرگذار می‌گذارد، بهتر است هر چه سریع‌تر به سراغ نقشه راه یادگیری طراحی رابط کاربری برویم.
تصویر رابط کاربری سایت فروشگاهی خوب و بد
اولین گام، مهم‌ترین گام آموزش طراحی UI است؛ چراکه اگر منبع آموزشی خوبی انتخاب نکنید، یا مفاهیم را به درستی یاد نمی‌گیرید و یا در نیمه راه منصرف شده و آن را رها می‌کنید. در این رابطه یک ضرب‌المثل قدیمی هم داریم که می‌گوید: خشت اول گر نهد معمار کج تا ثریا می‌رود دیوار کج.
اینجا دو روش پش روی شماست.
روش اول: یادگیری رایگان از طریق مشاهده ویدئوهای رایگان، مطالعه کتاب، مطالعه مقالات موجود در سطح وب. تنها مزیت این روش رایگان بودن آن است اما هزینه زمانی زیادی برای شما دارد. همانطور که می‌دانید زمان باارزش‌ترین دارایی ما در دنیاست که هیچ جایگزینی هم برای آن وجود ندارد. علاوه براین، در یادگیری جسته‌گریخته ممکن است نتوانید تمامی مفاهیم و سرفصل‌های موردنیاز خود را در اینترنت پیدا کنید.
روش دوم: یادگیری از طریق دوره‌های آموزشی و کلاس‌های حضوری. در این روش شما با پرداخت هزینه، تجربیات چندین ساله یک استاد را به‌دست می‌آورید. البته این مبلغ، هزینه سرمایه‌گذاری روی خودتان است. مزیت این روش این است که سرعت بسیار بیشتری نسبت به روش قبل دارد و در واقع همانند یک لقمه حاضر و آماده است.
پس از اینکه تصمیم گرفتید کدام روش را انتخاب کنید، به سراغ گام‌های بعدی بروید.
یادگیری مفاهیم اولیه و شناخت استانداردها، همانند خط کشی جاده هستند که شما را حین رانندگی، هدایت و راهنمایی می‌کنند. در این مرحله شما باید با اصول طرح‌بندی، انواع رنگ‌ها، تایپوگرافی، فاصله‌گذاری، الگوهای طراحی، آیکونوگرافی، سبک‌های طراحی، اسکچ، وایرفریم، پروتوتایپ، موکاپ و طراحی ریسپانسیو آشنا شوید.
اگر فکر می‌کنید این مباحث تئوری هستند و به کارتان نمی‌آیند، سخت در اشتباه هستید. هر طراح رابط کاربری باید با اصطلاحات و مفاهیم حوزه کاری خود آشنا باشد و به حدی بر آن‌ها تسلط داشته باشد که بتواند حداقل 5 دقیقه درمورد هرکدام توضیح دهد. گاهی اوقات کارفرمایان در مصاحبه‌های استخدامی سوالاتی از این مفاهیم می‌پرسند تا میزان تسلط و درک شما را بسنجند. پس یادگیری مفاهیم اولیه را جدی بگیرید.
تصویر برای نشان دادن اصول طرح‌بندی، انواع رنگ‌ها، تایپوگرافی، فاصله‌گذاری، الگوهای طراحی، آیکونوگرافی، سبک‌های طراحی، اسکچ، وایرفریم، پروتوتایپ، موکاپ و طراحی ریسپانسیو
همانطور که یک هنرمند نقاش، در ابتدا با ابزارهایی همچون بوم و انواع قلم‌مو آشنا می‌شود، شما هم باید ابزارهای خود را بشناسید و طرز استفاده از آن‌ها را یاد بگیرید. البته در اینجا ابزارهای ما فرق دارند.
در گذشته که این حوزه به اندازه الآن محبوب و ترند نشده بود، از ابزارهایی مثل فتوشاپ و ایلاستریتور برای طراحی رابط کاربری وب سایت‌ها و اپلیکیشن‌ها استفاده می‌شد. البته این ابزارها هنوز هم برای شما کاربرد دارند. برای مثال برای طراحی بک‌گراند می‌توانید از فتوشاپ و برای طراحی لوگو از ایلاستریتور استفاده کنید. اما امروزه خوشبختانه ابزارهایی که به صورت حرفه‌ای بر طراحی UI تمرکز دارند، در دسترس ما هستند. این ابزارها عبارتند از:
Sketch: برای طراحی رابط کاربری – مختص کاربران مک.
Figma: برای طراحی رابط کاربری – با قابلیت همکاری گروهی در پروژه – قابل استفاده توسط کاربران تمامی سیستم عامل‌ها.
Balsamiq: برای ایجاد چارچوب و لایه‌های طرح و تولید ایده‌ها در مراحل اولیه – مختص کاربران مک و ویندوز.
Adobe XD: برای طراحی رابط کاربری – مختص کاربران مک و ویندوز.
Invision: برای ساخت پروتوتایپ و همکاری گروهی – مختص کاربران مک و ویندوز.
Redpen: برای همکاری گروهی – قابل استفاده توسط کاربران تمامی سیستم عامل‌ها.
البته یادگیری تمامی ابزارهای بالا برای شما الزامی نیست چراکه برخی از آن‌ها کاربرد یکسانی دارند. هر چند که داشتن آشنایی کلی با تمامی ابزارها می‌تواند برایتان مفید باشد. توصیه می‌کنیم سری به وب سایت‌های آگهی کار بزنید و ببنید که کارفرمایان از شما انتظار دارند کار با کدام نرم افزارها را بلد باشید.
ما در مقالات آموزش نرم افزار Figma و آموزش طراحی رابط کاربری با Adobe XD از سیر تا پیاز این دو نرم افزار محبوب را آموزش داده‌ایم. توصیه می‌کنیم حتما آن‌ها را مطالعه کنید.
شاید تا پیش از اینکه تصمیم بگیرید طراح رابط کاربری شوید، توجه زیادی به رنگ‌ها فونت‌ها و سایر جزئیات نمی‌کردید، اما از امروز به بعد باید این کار را انجام دهید. چشم‌هایتان را بشویید و وب سایت‌ها و برنامه‌هایی که معمولا از آن‌ها استفاده می‌کنید را این‌بار جور دیگری ببینید.
به این فکر کنید که چرا آن‌ها لوگو را اینجا قرار دادند و نه آنجا؟ و چرا یک دکمه خاص در انتها قرار دارد و در ابتدا نیست؟ گوشه کدام عناصر گرد است و کدام یک نوک تیز؟ شما با پرسیدن این گونه سوالات از خود و پاسخ دادن به آن‌ها و همچنین با کاوش گزینه‌های موجود در ذهن خود، علاوه بر استفاده از وب سایت یا برنامه موردنظر، آن را از نظر حرفه‌ای ارزیابی می‌کنید.
توصیه دیگر ما به شما این است که هر روز به وب سایت‌های Behance، Dribbble و Awwwards سر بزنید. طراحان زیادی از سراسر دنیا طرح‌های خود را در این وب سایت‌ها به اشتراک می‌گذارند و شما می‌توانید از آن‌ها ایده بگیرید. آن قدر بر روی این طرح‌ها تمرکز کنید که وقتی سرتان را برمی‌گردانید و پلک می‌زنید طرح را روی دیوار ببینید. البته اینکه شوخیست ولی منظور این است که باید بیش از حد معمول روی این طرح‌ها دقت کنید.
اگر تازه‌کار هستید و برای استخدام به نمونه‌کار نیاز دارید، حتی می‌توانید از طرح‌های دیگران تقلید کرده و سعی کنید مشابه آن‌ها را خودتان ایجاد کنید. حتی می‌توانید خودتان را طراح یکی از سایت‌ها یا برنامه‌های مورد علاقه‌تان تصور کنید، روی صندلی او بنشینید و تصمیم بگیرید که طرح را چگونه پیاده‌سازی کنید (بدون کپی کردن).
تصویر طراحی چند رابط کاربری سایت و اپ
وقت آزاد افراد حرفه‌ای بسیار کم است؛ علاوه براین، کمک کردن به افراد مبتدی به زمان، تلاش و اعصاب زیادی احتیاج دارد. اما اگر صفر تا صد طراحی رابط کاربری را از یک مدرس حرفه‌ای یاد بگیرید، شانس این را دارید که از او بخواهید در مورد طرح‌های شما نظر داده و اشکالاتش را به شما بگوید.
علاوه براین می‌توانید یک وبلاگ ایجاد کنید و چیزهای جالبی که آموخته‌اید را به ساده‌ترین زبان به دیگران آموزش دهید. این روش به شما کمک می‌کند تا موضوعات را بهتر درک کرده و مطالب را بهتر به خاطر بسپارید. همچنین می‌توانید نمونه‌کارهای خود را در شبکه‌های اجتماعی به اشتراک بگذارید و از همکاران، همکلاسی‌ها و حتی افرادی که در حوزه شما متخصص نیستند بخواهید نظر خود را درباره طرح‌های شما بگویند.
همانطور که در ابتدا گفتیم، هر طراح UI می‌تواند به اندازه الماس برای یک تیم توسعه‌دهنده ارزش داشته باشد. ماده اولیه سازنده الماس، کربن است که پس از تحمل فشار زیاد به الماس تبدیل می‌شود. اگر تا این مرحله از آموزش، نتایج چشمگیری به‌دست نیاوردید یا از سختی راه خسته شدید، نباید روحیه‌تان را از دست دهید. اگر رسیدن به موفقیت روش ساده‌ای داشت، ارزش الماس هم به اندازه سنگ‌های معمولی بود. پس آن‌قدر تلاش کنید تا به الماس ارزشمندی تبدیل شوید.
تصویر مربی در حال اموزش طراحی رابط کاربری
در حال حاضر متخصصان ایرانی فعال در حوزه طراحی رابط کاربری، اکثرا از فارق التحصیلان رشته‌های مهندسی کامپیوتر، مهندسی فناوری اطلاعات و گرافیک هستند. البته شما برای تبدیل شدن به طراح UI نیاز الزامی به داشتن مدرک در رشته خاصی ندارید؛ چراکه هر فردی می‌تواند مهارت‌های لازم را با گذراندن یک دوره تخصصی بیاموزد.
گرچه داشتن مدرک دانشگاهی معیار خوبی برای تشخیص یک طراح خوب از طراح بد نیست. با این حال، ممکن است برخی از کارفرمایان انتظار داشته باشند شما مدرک دانشگاهی مرتبط داشته باشید. البته هیچ‌کس انتظار ندارد که این مدرک در زمینه طراحی UI باشد؛ زیرا در حال حاضر رشته‌ای با نام لیسانس طراحی رابط کاربری وجود ندارد.
طراحی UI یک رشته بین رشته‌ای است و یک حوزه دانشگاهی واحد وجود ندارد که همه موارد لازم برای فعالیت در این زمینه را پوشش دهد. در دانشکده مهندسی کامپیوتر، مهارت‌های طراحی را به شما آموزش نمی‌دهد همانطور که در دانشکده هنر، مهارت‌های فنی کامپیوتر آموزش داده نمی‌شود و باید این مهارت‌ها را از جای دیگری فرا بگیرید.
میزان درآمد یک طراح UI با توجه به میزان تجربه و تسلط بر مهارت‌های جانبی مانند کار با افترافکت، فتوشاپ و... می‌تواند متغیر باشد. در ایران مبلغ پرداختی ثابتی برای این شغل وجود ندارد. افرادی که کارمند هستند مبلغ اندکی بیشتر نسبت به حقوق تعیین شده وزارت کار، دریافت می‌کنند. اما افراد فریلنسر معمولا می‌توانند درآمد ماهیانه 2 الی 3 برابر بیشتر از کارمندان معمولی داشته باشند.
اگر به زبان انگلیسی تسلط داشته باشید و بتوانید با کارفرمایان خارجی ارتباط برقرار کنید نیز می‌توانید درآمد دلاری داشته باشید.
در اینفوگرافیک زیر درآمد طراحان UI در کشورهای مختلف آورده شده است. همانطور که مشاهده می‌کنید، معمولا طراحان رابط کاربری در کشورهای پیشرفته می‌توانند درآمد بالاتری کسب کنند.
اینفوگرافیک درآمد طراحات ui در کشورهای مختلف
همپوشانی زیادی بین این دو فیلد وجود دارد؛ زیرا هر دوی این نقش‌ها برای ارائه یک محصول خوب با هم کار می‌کنند. در برخی موارد یک نفر هر دو نقش را پوشش می‌دهد. اما شرکت‌های بزرگ که در سطح جهانی فعالیت می‌کنند، ترجیح می‌دهند برای هر نقش یک متخصص جدا داشته باشند.
توضیحاتی که پیش‌تر به شما ارائه دادیم در رابطه با طراح UI بود. توسعه دهنده UI که در واقع همان توسعه دهنده فرانت‌اند است، فردیست که به زبان‌های HTML، CSS و JavaScript تسلط دارد و می‌تواند طرح رابط کاربری که توسط طراح تهیه شده است را به کمک این زبان‌ها تبدیل به کد کند.