حمزه قریشی
حمزه قریشی
خواندن ۸ دقیقه·۳ ماه پیش

طراحی رابط کاربری در سال ۲۰۲۴ - رود مپ

تو این پست می‌خوایم در مورد طراحی UI (رابط کاربری) و UX (تجربه کاربری) صحبت کنیم و یه نقشه راه ساده برای کسانی که تازه می‌خوان وارد این حوزه بشن، ارائه بدیم.

این پست به صورت خلاصه نوشته شده، نسخه کامل رو میتونید از چنل یوتیوب تماشا کنید.

مسیر یادگیری طراحی UI-UX تو سال ۲۰۲۴
مسیر یادگیری طراحی UI-UX تو سال ۲۰۲۴

رابط کاربری (UI) و تجربه کاربری (UX) دقیقاً چی هستن و چه تفاوتی با برنامه‌نویسی و طراحی گرافیک دارن؟
رابط کاربری یا User Interface (UI) به تمام چیزهایی که تو محیط دیجیتال مشاهده می‌کنید گفته میشه، مثل سیستم‌عامل موبایل، اپلیکیشن‌ها، وب‌سایت‌ها و هر چیزی که از پشت صفحه نمایش باهاش کار می‌کنید. رابط کاربری شامل رنگ‌ها، فونت‌ها، آیکون‌ها، تصاویر و دکمه‌ها میشه. بدون رابط کاربری، مثل ۵۰ سال پیش باید با دستورات پیچیده تو محیط ترمینال کار کنید، که اصلاً راحت نیست. اگر نمی‌دونید قبل‌ها چطور بوده، می‌تونید این ویدیو یوتیوب رو ببینید که در مورد تاریخچه رابط‌های کاربری توضیح دادم.

تجربه کاربری یا User Experience (UX) به حسی که شما هنگام استفاده از یک رابط کاربری یا محصول دیجیتال دارید می‌گن. این حس شامل زیبایی، کاربردی بودن، رضایت و سادگی یا پیچیدگی محصوله.

اهمیت UI و UX در ایجاد تجربه‌ای لذت‌بخش و مفید برای کاربرانه و هدفش اینه که نیازها و انتظارات کاربر به خوبی برآورده بشه و مشکلاتش حل بشه.

کسی که UI رو طراحی می‌کنه، طراح رابط کاربری یا UI Designer هست و کسی که UX رو بررسی و طراحی می‌کنه، طراح تجربه کاربری یا UX Designer هست.

طراحی UI-UX
طراحی UI-UX

چه فرقی با برنامه نویسی و طراحی گرافیک داره داستان UI-UX؟ فرقشو با یک مثل از دنیای دنیای ساخت‌وساز و معماری بهتون توضیح میدم

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

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

این آقا یا خانم طراحی داخلی یکیو تو تیمش داره که کارش طراحی تزئینات که همون رول طراح گرافیک: طراح تزئینات به طراحی جزئیات بصری و تزئینی تو ساختمان می‌پردازده،‌مثل خلق المان‌های گرافیکی مانند نقاشی‌های دیواری، کاشی‌کاری‌های هنری، و یکسری نشانه‌ها که به فضا شخصیت و هویت می‌ده. تمرکز طراح تزیینات به اضافه کردن جزئیات هنری و گرافیکی که به زیبایی و تمایز فضا کمک می‌کند و اون محیط رو زنده و جذاب میکنه.

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

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

تو قدم‌های بعدی ببینیم چه ارتباطی بین این دو وجود داره

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


از کجا شروع کنیم؟

از کجا شروع کنیم؟
از کجا شروع کنیم؟

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

مطالعه پروسه‌های UX
مطالعه پروسه‌های UX

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

اگر الان بخوایم به ۲ الی ۳ پروسه‌های مهم تجربه کاربری خیلییی خلاصه اشاره کنیم این موارد هستش:
اول از همه فهمیدن و درک پروژه هستش، اینکه بیزینس چیه، اهدافش چیه، کارفرما با لانچ کردن این پروژه به چی میخواد برسه، یا اگر پروژه‌ای لانچ شده در حال حاضر مشکل پروژه فعلی چیه، برای چی میخواد مجدد طراحی کنه یا ریدیزاین بکنه؟!

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

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

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


از مطالعه پروسه‌های UX عبور کنیم میرسم به مطالعه طراحی گرافیک

مطالعه طراحی گرافیک
مطالعه طراحی گرافیک

اگر از فیلد طراحی گرافیک وارد دنیای UI-UX شدید نیازی به خوندن این بخش نیست، برید بخش بعدی رو بخونید، ولی چرا دونستن یکسری چیزا از دنیای طراحی گرافیک و دنیای Creative به صورت کلی مهمه؟

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

راجب دیزاین پترن‌ها مطلاعه داشته باشید، راجب آیکون‌ها و استانداردهایی که برای آیکون‌ها وجود داره مطلع باشید، راجب خروجی مختلف مثل PNG, JPG, SVG حتما اطلاعات داشته باشید بدونید فرقشون چیه و کجاها از کدوما باید استفاده کنید، بدونید خروجی پیکسلی مثل PNG , jPG فرقش با خروجی برداری مثل SVG چیه.


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

مطالعه برنامه نویسی فرانت‌اند
مطالعه برنامه نویسی فرانت‌اند

یادگیری برنامه نویسی فرانت برای یه طراح رابط کاربری، شبیه یادگیری مکانیکی برای یک رانندست، مثل بخش‌ قبلی نیاز نیست برید طراح گرافیک بشید، یسکری داستان‌های کلی بدونید کافیه، تو این بخش هم نیاز نیست برید برنامه نویسی فرانت اند رو یاد بگیرید، فقط اینکه بدونید داره چه اتفاقی تو فرانت میوفته کفایت میکنه، یکمی بدونید HTML چیه، چطور کار میکنه، تگ‌های مهم رو بدونید، تگ div چیه، تگ H1 تا H6 چیه و تگ‌های مهم دیگه، برید راجب CSS کمی مطالعه کنید، بدونید فلکس باکس چیه و چطور کار میکنه، کتابخونه‌ها و فریم‌ورک‌های مهم فرانت مثل تیل ویند و بوتسرپ رو بررسی داشته باشید حتما، داکیومنت‌هاشونو بخونید، برید راجب جاوا اسکریپت کمی مطالعه کنید، ری اکت جی اس چیه؟ وئو جی اس؟ اگر کسیو تو حوزه فرانت سراغ دارید حتما باهاش میت بزارید و باهاش صحبت کنید.


اینکه راجب فرانت اند اطلاعات داشته باشید چرا مهمه؟ تو یک جمله خروجی بهتری خواهید داشت، یکسری نکات مهم و استاندارد وب و موبایل رو رعایت میکنید و از چهارچوب خارج نمیشد، و اگر به صورت تیمی کار میکنید با بچه‌های فرانت هم راحتر ارتباط میگیرید، کار بهتر پیش میره، رفت و برگشت بینتون کمتر میشه چون شما یکسری نکات مهم رو تو طرح از قبل رعایت کردید، حتما راجب برنامه نویسی فرانت اطلاعات کسب کنید، UI-UX با فضای گرافیک دیزاین متفاوته، در نهایت طرحی که شما روش کار میکنید باید توسعه داده بشه، بهتر که کمی راجب توسعه اطلاعات داشته باشید، حتی اگر یک زمانی خودتون هم با ابزار‌های NO-Code مثل فریمر یا وب فلو خواستید کار کنید اگر دانش فرانت داشته باشید و منطقش رو بدونید خیلی راحتر میتونید با این ابزار‌ها ارتباط بگیرید مخصوصا وب فلو که بدون دانش پایه فرانت خیلی دشواره فهمیدن اون اینترفیس، اینم از اهمیت دونستن برنامه نویسی فرانت‌-اند یکی از چیزایی که چه تو حالت سازمانی و چه حالت فریلنس شما قطعا به چالش میخورید و باید بتونید ارتباط درست بگیرید با برو بچه‌های فرانت و بفهمید حرف‌های هم دیگه رو.

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

رابط کاربریبرنامه نویسیتجربه کاربریui uxطراحی محصول
طراح محصول دیجیتال
شاید از این پست‌ها خوشتان بیاید