طراحی رابط کاربری ui در 5 مرحله

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

مرحله اول: در طراحی رابط کاربری ui با یک ویژگی شروع کنید، نه یک طرح

زمانی‌که شما یک پروژه جدید مثل طراحی ui یک اپلیکیشن را شروع می‌کنید، اولین چیزی که طراحی می‌کنید چیست؟ به طور مثال اگر شما، نوار بالای اپلیکیشن را طراحی می‌کنید، باید بدانید که در اشتباه هستید.

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

به طور مثال:

نوار ناوبری در بالای صفحه قرار بگیرد یا در کنار صفحه؟

لوگو در کدام قسمت قرار بگیرد؟

و...

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

راه‌حل چیست؟

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

گاهی ممکن است همین قسمت کوچک هم کافی باشد و شما حتی نیاز به اضافه کردن چیزهای دیگر هم نداشته باشید. مانند سایت گوگل که چیزی به جز "قسمتی برای جست‌وجو" ندارد.

اگر تمایل دارید که طراحی رابط کاربری ui را به‌صورت تخصصی و کامل یاد بگیرید، می‌توانید در دوره زیر شرکت کنید.

دوره تخصصی طراحی رابط کاربری در فیگما

مرحله دوم: جزئیات را بعدا اضافه کنید

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

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

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

در استفاده از رنگ‌ها صبور باشید

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

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

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

فهمیدن این‌که هر ویژگی در یک رابط کاربری چگونه باید به نظر برسد و همچنین نحوه تعامل آن‌ها با ویژگی‌های دیگر قطعا دشوار است.

به طور مثال:

اگر تعداد تماس‌های بالایی داریم، ظاهر صفحه "تماس با ما" در یک سایت چگونه باید باشد؟

پیام ارور در کجای یک فرم باید قرار بگیرد؟

ظاهر یک تقویم چگونه باید باشد اگر دو مناسبت در یک روز داشته باشیم؟

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

در یک چرخه کار کنید

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

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

در طراحی رابط کاربری بدبین باشید

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

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

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

مرحله چهارم: انتخاب پرسونا یا شخصیت مخاطب یک رابط کاربری

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

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

انتخاب فونت در طراحی ui

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

رنگ در طراحی رابط کاربری

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

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

لحن در زبان

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

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

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

مرحله پنجم: انتخاب‌هایتان را محدود کنید

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

به مثال‌های زیر توجه کنید:

آیا اندازه این متن باید 12px باشد یا 13px؟

آیا میزان شفافیت سایه این باکس باید 10% باشد یا 15%؟

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

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

یک سیستم تعریف کنید

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

به طور مثال، هر زمان که شما در طراحی رابط کاربری ui نیاز به رنگ آبی داشتید، نباید سراغ color picker و یا همان انتخاب تصادفی رنگ بروید. در واقع شما باید یک رنگ آبی را انتخاب کرده و سپس 8 الی 10 تن رنگی (از آبی روشن تا آبی تیره) انتخاب کرده و خود را موظف کرده تا فقط از آن‌ها استفاده کنید.

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

طراحی ui به روش حذف

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

به طور مثال، اگر بخواهید سایز یک آیکون را مشخص کنید، می‌توانید یک سیستمی را تعریف کنید که در آن فقط بتوانید از سایز کوچک تا متوسط را انتخاب کنید. مثلا فقط سایزهای 12px، 16px، 24px و 32px را می‌توانید انتخاب کنید.

این روش برای تمام انتخاب‌هایی که در طراحی دارید، درست عمل می‌کند.

برای هرچیزی سیستم‌سازی کنید

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

شما برای انتخاب‌های زیر نیاز به ساخت سیستم دارید:

• سایز فونت
• وزن فونت
• فاصله بین خطوط
• رنگ
• margin
• padding
• عرض
• ارتفاع
• سایه باکس‌ها
• مقدار گرد بودن گوشه‌های باکس
• شفافیت

و هر تصمیم دشواری که در طراحی رابط کاربری شما را به دردسر می‌اندازد.

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