اگه هم به هنر علاقه دارید و هم به مسائل فنی، احتمالاً طراحی UI و UX شغل ایدئال شماست. پس توی این راهنما کنار ما باشید تا مهم اصول طراحی UI وUX رو با شما در میون بذاریم.
طراحی UI/UX از معدود مشاغلی است که دریچه ای را توأمان به دنیای تخیل، خلاقیت و دانش فنی باز می کند. هر چند که چندوجهی بودن این مهارت، جذابیت آن است؛ اما دقیقاً چالش این حوزه هم همینجاست. با این حال راه هایی برای ارتقای مهارت های طراحی UI و UX داریم که مهم ترین آن الگو گرفتن از باتجربه ترهای این حوزه است. ما هم اینجاییم تا 10 تا از اصول طراحی UI وUX را که اساتید این هنر به مشتاقان گوشزد می کنند، به شما آموزش دهیم.
بالاتر هم اشاره کردیم که کار یک طراحی UI/UXاین است که هنر را با تخصص فنی ترکیب کند. نکته مهمی که باید بدانید این است که در بخش هنری این حرفه، باید قلم دست بگیرید و طرح هایتان را روی کاغذ بیاورید. اما خب ممکن است به مرور به قدری به ابزارهای طراحی دیجیتال (مثل ادوبی XDو ...) کشیده شوید که از کشیدن روی کاغذ به طور کل غافل شوید.
اما بگذارید سرراست بگوییم که اگر به این مرحله برسید، احتمالاً کیفیت کارهایتان کم کم ضعیف و ضعیف تر می شود. چرا؟ چون هیچ چیزی مثل ایده پردازی روی کاغذ جواب نمی دهد. این یک واقعیت ثابت شده است که به احتمال زیاد در مورد شما هم صدق می کند.
اما اینجا لازم است به یک نکته مهم دیگر هم که قطعاً جزو اصول طراحی UI وUX است اشاره کنیم. شما هر اندازه هم که در کار با ابزارهای دیجیتالی آشنا باشید، تا زمانی که قواعد و قوانین طراحی استاندارد را ندانید، نمی توانید به یک خروجی قابل قبول برسید. منظور از قوانین طراحی چیست؟
اینها مهم ترین اصول طراحی هستند (به خصوص در طراحی رابط کاربری که مقوله ای کاملاً بصری است).
مورد دوم، یکی از کلیدی ترین اصول طراحی UI وUX است: تست کاربر. در این تست خودتان را جای کاربر می گذارید و یک بار در طرح هایتان از اول تا آخر به صورت عملی پیمایش می کنید. اهمیت این کار به اندازه ای است که ابزارهای مختلفی برای آن طراحی شده اند.
یکی از بهترین ابزارهای این کار Invision است. به کمک این ابزار می توانید قبل از نهایی کردن طرح هایتان، آنها را به مدل های تعاملی و قابل کلیک تبدیل کنید. این کار را می توان فوت کوزه گری طراحی های درجه یک دانست.
همین حالا تا دلتان بخواهد طرح های یوآی و یو ایکسی طراحی می شوند که در PCو لپ تاپ عالی هستند؛ اما در موبایل و تبلت های کوچک هیچ حرفی برای گفتن ندارند. اما باور کنید ریسپانسیو بودن طرح ها برای موبایل، به اندازه ای مهم است که به خاطر آن باید روی دو نسخه جداگانه کار کنید.
بهترین کار این است که یک ماژول مختص طراحی برای موبایل ایجاد کنید. این طرح باید چند تفاوت با نسخه اصلی که برای مانیتورهای بزرگ است داشته باشد:
علاوه بر اینها بهتر است در طراحی UXبرای موبایل، در هر صفحه یک کار را طراحی کنید (یعنی در هر صفحه، تمرکز کاربر روی یک کار باشد). چرا؟ چون صفحه نمایش کاربر کوچک تر است و این که بخواهد مدام صفحه را بالا و پایین کند تا کارهای مختلف را انجام دهد برایش سخت است. مثلاً اگر در UX نسخه کامپیوترتان، کاربر برای ثبت نام در سایت باید تمام اطلاعات را در یک صفحه وارد کند، در نسخه موبایل می توانید فرم های این اطلاعات را در چند صفحه به کاربر ارائه دهید تا کار برایش راحت تر شود.
نکته آخر در اصول طراحی UI وUX ریسپانسیو برای موبایل این است که گزینه ها را جاهایی قرار دهید که کاربر برای لمس آنها به مشکل برنخورد. مثلاً دو گزینه را به اندازه ای به هم نزدیک نکنید که کاربر نتواند به راحتی روی یکی از آنها کلیک کند.
منظور از الگوی طرح های تکرارشونده چیست؟ یعنی این که اول یک عنصر بصری را برای یک کار خاص به کاربر معرفی کنید. مثلاً اول برای کاربر جا بیندازید که وقتی لوگوی سایت را می بینید، می تواند روی آن کلیک کند تا به صفحه اصلی برگردد. بعد که این عنصر را برای این کار خاص جا انداختید، حالا از آن در جاهای مختلف استفاده کنید. از این به بعد کاربر هر جا که این عنصر را می بیند، ناخودآگاه می داند که کاربرد آن چیست.
البته روش دیگر استفاده از طرح های تکرارشونده هم این است که به سراغ عناصری بروید که از قبل به چشم کاربران آشنا هستند؛ مثل بعضی از رنگ ها. با این کار بار تجربه کاربری را برای او سبُک تر می کنید. چون تشخیص گزینه ها و عناصر برای کاربر راحت تر خواهد بود.
استفاده از طرح های تکرار شونده، علاوه بر این که تجربه کاربری را برای کاربران راحت تر می کند، حس منسجم بودن رابط کاربری را هم به او القا می کند. برای ماهر شدن در استفاده از این الگوها، کافیست آنها را تمرین کنید.
آیا می خواهید یک طراح UI/UX عالی (و نه فقط خوب) باشید؟ پس تمرکز خود را در درجه اول روی عملکرد طرح هایتان بگذارید. درست است که ظاهر بد یک طرح می تواند کاربر را دفع کند. اما طرح زیبایی که عملکرد نداشته باشد قطعاً بی فایده و بلااستفاده است.
در دنیای طراحی UI/UX، یک سری روش ثابت وجود دارد که می توانند عملکرد طرح هایتان را تضمین کنند. روش هایی مثل:
یکی از ساده ترین اصول طراحی UI و UX این است که در مورد کاربران بالقوه تحقیق کنید؛ بله یکی از ساده ترین اصول و در عین حال مهم ترین آن!
به این فکر کنید که کاربر شما یک فرد مُسن است که تجربه چندانی در کاربر با سایت ندارد؟ یا کاربرتان یک جوان است که می خواهد کارش را در سریع ترین زمان ممکن انجام دهد؟ خب قطعاً طرحی که برای این دو گروه طراحی می شود کاملاً متفاوت است.
مثلاً در طراحی برای افراد میانسال، باید سعی کنید طرح های واضح و شفافی داشته باشید و راهنماهایی را هم در سایت قرار دهید. در واقع در این طرح "شفافیت" نسبت به "سرعت" اولویت دارد. اما در طراحی برای نوجوانان و جوانان، معمولاً این "سرعت" است که اولویت دارد.
می بینید؟ این که بدانید کاربرانتان که هستند، می تواند طرح نهاییتان را کاملاً تعیین کنید. بنابراین حتی قبل از شروع طراحی، در مورد سن، حوزه فعالیت، نیازها و الزامات و علایق مخاطبانتان تحقیق کنید.
ضمناً فراموش نکنید که در مرحله تست (که بالاتر در مورد آن صحبت کردیم) هم خودتان را جای همان کاربران بگذارید. یعنی کاربرانی که نیاز راهنمایی بیشتری دارند یا کاربرانی که به دنبال سرعت هستند یا ... .
چرا می گوییم از ابزارهای ذخیره سازی ابری استفاده کنید؟ چون این ابزارها می توانند سرعت کارتان را تا حد چشمگیری افزایش دهند و چرخه کاریتان را روان تر کنند.
ابزارهایی مثل Google Drive، می توانند در کارتان معجزه کنند! مثلاً می توانید یک Sheet مشترک بین اعضای گروه بسازید و تسک ها و مسئولیت ها را در آن بنویسید (این شیت از طرف همه اعضا قابل تغییر و ادیت کردن است). همینطور می توانید از Google Drawing برای به اشتراک گذاری نمودارهای حالت ساده استفاده کنید.
از دیگر موارد حذف نشدنی اصول طراحی UI و UX، تکنیک های فنی هستند. تکنیک های فنی، به نوع طراحی فاصله ها، دکمه ها، ظاهر گزینه ها و موارد این چنینی اشاره دارند. در واقع تکنیک های فنی دست به دست تکنیک های هنری می دهند تا نهایتاً یک طرح فوق العاده را بسازند.
مثلاً این که یک گزینه را در جای بدی طراحی کنید، به تنهایی می تواند طراحی شما را زیر سؤال ببرد. یا اگر به جای نوشته از آیکون استفاده کرده اید، اندازه آن به قدری کوچک باشد که کاربر نتواند معنی آن را تشخیص دهد. یا این که برای یک گزینه قابل کلیک به اندازه کافی Padding (فاصله داخلی) نگذاشته باشید.
بالاتر هم یک اشاره گذرا به مقوله رنگ شناسی داشتیم. اما اهمیت استفاده درست از رنگ ها به حدی است که واقعاً هر چه قدر هم درباره آن صحبت کنیم باز هم کم است.
شاید بتوان رنگ ها را در حوزه هنری اصول طراحی UI وUX دانست؛ اما چیزی که واضح است این است که اگر از رنگ ها درست استفاده نکنید، حتی بخش فنی کار هم جواب نخواهد داد!
به عنوان مثال با انتخاب یک رنگ متضاد، می توانید به راحتی یک عنصر را در یک صفحه برجسته و به مرکز توجه کاربر تبدیل کنید. یا با انتخاب رنگ های قرمز و نارنجی، می توانید یک پیام مهم را بیشتر از حد عادی در معرض دید کاربر قرار دهید. از طرفی استفاده نا به جا از همین رنگ های هشدار، کار را خراب خواهد کرد.
بنابراین اصول رنگ شناسی (مثل روش های ترکیب رنگ ها، معانی رنگ ها و ... ) را بیشتر بشناسید تا از آنها به عنوان یک ابزار بسیار کارآمد استفاده کنید.
حالا به آخرین مورد در لیست اصول طراحی UI وUX رسیده ایم، بگذارید این واقعیت را به شما بگوییم که برای خلق طرح های فوق العاده و درخشان، لازم نیست به سراغ طرح های پیچیده بروید. در عوض کافیست از اِلِمان های ساده، در جای درست استفاده کنید. این چیزی است که خیلی از طراحان مبتدی از آن خبر ندارند!
بعضی از اِلِمان ها هستند که طراحی آنها خیلی راحت است؛ اما می توانند در طرح ها معجزه کنند. مثل:
سعی کنید از چنین اِلِمان هایی در طرح هایتان استفاده کنید. با این کار طرح های ساده و مینیمالی خواهید داشت که کارشان را به بهترین نحو انجام می دهند.
اگر در این راهنما ما را دنبال کرده باشید، حالا دید روشن تری نسبت به اصول طراحی UI وUX دارید. پس حالا دیگر این چشم انداز می تواند چراغ راهتان باشد تا موفقیتی که برای خودتان در ذهن دارید را تبدیل به واقعیت کنید. در پایان پیشنهاد می کنیم حتما مقاله تفاوت UI و UX و CX در چیست را مطالعه کنید
اگر شما هم نکته یا ترفند دیگری را می شناسید که می تواند در طراحی رابط و تجربه کاربری مثل یک سکوی پرتاب باشد، خوشحال می شویم که در قسمت نظرات با ما به اشتراک بگذارید.
