رابط کاربری یا UI چیست؟ + نقشه راه یادگیری

چگونه طراحی UI را از پایه بیاموزیم؟
آیا کسی می تواند طراح UI شود وقتی که در UI تخصص نداشته باشد؟

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

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

طراح رابط کاربری (User Interface) تمام تعاملات و رفتارهای کاربر با یک محصول را بررسی می کند تا رابطی ایجاد کند که به بهترین شکل ممکن با نیازهای کاربر سازگار باشد.

هدف از طراح رابط کاربری ایجاد رابطی است که کاربر برای استفاده آسان و از نظر زیبایی شناسی دلپذیر باشد.

یک طراح رابط کاربری تمام صفحه‌های یک محصول را طراحی می‌کند و عناصر بصری و ویژگی‌های تعاملی آن‌ها را ایجاد می‌کند که تعامل کاربر را تسهیل کند. برای رسیدن به این هدف از مواردی مانند الگوها، فاصله، متن و رنگ برای راهنمایی کاربر استفاده می کنند.

رابط کاربری (User Interface) نقطه تعامل بین انسان و کامپیوتر است. طراحی رابط کاربری فرآیند طراحی ظاهر، احساس و تعامل با استفاده از المان های بصری برای یک محصول دیجیتال است.

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

صفحاتی که پیمایش می‌کنید، دکمه‌هایی که ضربه می‌زنید و فرم‌هایی که پر می‌کنید همگی بخشی از رابط کاربری هستند.

طراحان رابط کاربری ظاهر و احساس رابط کاربری یک برنامه را ایجاد می کنند.

برخی از اِلمان های رابط کاربری:

1- اینپوت ها

2- دکمه ها

3- رنگ ها

4- تایپوگرافی

5- آیکون ها

6- و...

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

تفاوت رابط کاربری (UI) با تجربه کاربری (UX) چیست؟

طراحی تجربه کاربری (UX) و طراحی رابط کاربری (UI) دست به دست هم می دهند، اما آنها دو رشته مجزا هستند.
کولمن والش، مدیر عامل موسسه طراحی UX، طراحی UX و UI را به معماری و طراحی داخلی تشبیه می کند:

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

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

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

در زمینه طراحی محصول، طراحان UX معماران و طراحان UI طراحان داخلی هستند.

طراحی UX کل تجربه کاربر را از A تا Z در نظر می گیرد و همیشه نیازها، اهداف و نکات دردناک کاربران هدف را در نظر می گیرد. هدف طراحی UX ایجاد محصولات و تجربیاتی است که برای کاربر نهایی آسان، کارآمد، لذت بخش و با ارزش باشد.

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

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

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

چگونه یک طراح UI شویم؟

1- با مفهوم واقعی طراحی آشنا شوید.

واقعیتی که وجود دارد، عموما نمونه کارهای طراحان مختلف رو در پلتفرم های مختلفی مانند Dribbble، Behance، اینستاگرام و… دیده اند و به این حوزه یعنی طراحی UI و UX علاقه مند شده اند. عموم این افراد تصوری که از طراحی UI دارند، بسیار سطحی و مربوط به جنبه های زیبایی شناختی و ظاهری یک محصول است. عموم این افراد فکر می کنند طراحی حرفه ای رابط کاربری به زیبایی رابط کاربری، انیمیشن های موجود در رابط کاربری و استفاده از Micro interaction ها و یا خرده تعاملات حرفه ای محدود می شود.

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

طراحی (Design) چیست؟

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

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

پس ذهنیتتان را در خصوص طراحی UI و UX عوض کنید. طراحان فقط به زیبایی و جذابیت یک محصول فکر نمی کنند، آن ها وظایف مهمتری در کنار خلق یک ظاهر زیبا برای محصول دارند. جنبه های مهندسی و Problem solving یک محصول به اندازه زیبایی آن اهمیت دارند.

یک محصول زیبا اما ناکارامد را تصور کنید؟ چطور بود؟

2- مفاهیم اولیه طراحی UX را بیاموزید.

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

3- حس زیبایی شناسی را توسعه دهید.

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

وبسایت هایی برای الهام گیری رابط کاربری:

onepagelove.com

awwwards.com

behance.net

dribbble.com

pinterest.com

pttrns.com

uimovement.com

4- کار با ابزارهای طراحی UI و UX را یاد بگیرید.

به عنوان یک طراح می بایست طرح های مدنظرتان که حاصل اطلاعات به دست آمده در مراحل قبلی هستند را با استفاده از نرم افزار ها و ابزارهای مختلف طراحی رابط کاربری اجرا کنید.

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

ابزارها و نرم افزارهای مختلفی برای طراحی UI و UX وجود دارند که تقریبا در موارد کلی یکسان عمل می کنند. از این نرم افزار ها می توان به Adobe XD، Figma، Invision، Sketch و… اشاره کرد که می توانید بسته به نیاز خود و انتظاراتی از یک نرم افزار طراحی رابط کاربری دارید، نرم افزار مورد نظر خود را انتخاب کنید و یادگیری را شروع کنید.

5- چشمتان را برای طراحی با کیفیت تمرین دهید.

شما به عنوان طراح، نه تنها باید دیدگاه شما دستخوش تغییر شود بلکه چشم شما هم باید با دید یک طراح به طرح های مختلف نگاه کند. دیگران با نگاه کردن به یک طرح باید “مو” را ببینند و شما “هم مو و هم پیچش مو” !

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

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

6- با کپی کردن طرح های طراحان بزرگ، حرفه ای تر یاد بگیرید.

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

همیشه توجه داشته باشید که سایر طراحان UI و UX چگونه از مواردی که تا کنون یاد گرفته اید در طرح هایشان استفاده کرده اند. به راه حل هایی که طراحان در طرح های مختلف به کار برده اند توجه کنید. ببینید این طراحان چگونه برای حل یک مشکل خاص از المان های مختلف رابط کاربری استفاده کرده اند.

یک نکته مهم در خصوص کپی کردن وجود دارد و آن هم این که سعی کنید کارهایی را کپی کنید که به لحاظ تعداد صفحات نسبتا کامل باشند و نکته مهم دیگر این است که طرح هایی با موضوعات مختلف را کپی کنید.

7- پروژه‌های فرضی اجرا کنید.

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

8- از طراحان حرفه ای، بازخورد بگیرید.

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

9- به صورت مداوم و پیوسته یاد بگیرید و تمرین کنید.

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

بهترین منابع طراحی Ui:

منابع رایگان

https://www.youtube.com/@TheEhsanez

https://www.youtube.com/@Hossein.Mahmoodi

https://www.youtube.com/@niayeshuiux

https://www.youtube.com/@AmirTaqiabadi

منابع پولی

https://amanjacademy.com/uidesign/online/

https://mojtabaui.ir/product/ui/

امیدوارم از خواندن این مطلب لذت و بهره کافی را برده باشید.

منبع:

https://ui-ux.org

https://www.simplilearn.com