ووقتی مرحله توسعه محصول آغاز میشود، معمولاً طراحان خروجیهای طراحی رابط کاربری را به ذینفعان (Stakeholders)، توسعهدهندگان (Developers) یا سایر اعضای تیم تحویل میدهند تا بازخورد دریافت کنند و طرحها در محصول واقعی پیادهسازی شوند.
خروجیهای طراحی UI میتوانند شامل موارد زیر باشند:
- چیدمانها (Layouts)
- گریدها (Grids)
- رنگها (Colors)
- تایپوگرافی (Typography)
- تعاملات (Interactions)
- ایلاستریشنها (Illustrations)
- انیمیشنهای رابط کاربری (UI Animations)
- سایر داراییهای طراحی موردنیاز برای انتشار محصول
در حالت ایدهآل، طراحان باید از همان مراحل اولیه طراحی شروع به جمعآوری این موارد در اسناد قابلاشتراک کنند. این کار دو مزیت مهم دارد:
- طراحیها سازگارتر و برای کاربران قابلدرکتر میشوند.
- زمان صرفهجویی میشود و سوءتفاهم میان اعضای تیم کاهش مییابد.
خروجیهای طراحی ابزار بسیار قدرتمندی برای همکاری تیمی (Collaboration) و اطمینان از همراستایی همه اعضای تیم با محصول هستند.
مودبوردها (Mood Boards)
مودبوردها یکی از اولین خروجیهایی هستند که ممکن است در فرآیند طراحی ایجاد کنید. معمولاً مودبورد برای ارائه به مشتری ساخته میشود تا اطمینان حاصل شود که شما و مشتری درباره حس و حال کلی (Look & Feel) محصول در یک مسیر قرار دارید.
مودبوردها میتوانند فیزیکی یا دیجیتال باشند و معمولاً شامل موارد زیر هستند:
- لوگوها
- تایپوگرافی
- پالت رنگی
- تصاویر
- اسکچها
- داراییهای طراحی
مودبورد به مشتری و سایر ذینفعان کمک میکند تا جهت کلی طراحی را درک کنند. در این مرحله هنوز جزئیات طراحی قطعی نشدهاند، بنابراین دریافت بازخورد درباره اینکه آیا ایدههای طراح با انتظار مشتری همسو هستند یا نه بسیار ارزشمند است.
سیستم تایپوگرافی (Type Systems)
سیستم تایپوگرافی یکی از عناصر کلیدی طراحی است و مواردی مانند فونتها، اندازه متنها و فاصلهگذاریها را تعیین میکند. این سیستم به حفظ یکپارچگی بصری کمک میکند و توجه کاربران را هدایت میکند.
برای ایجاد یک سیستم تایپوگرافی مؤثر، اصول زیر اهمیت دارند:
- هماهنگی با برند و مخاطب: فونتها باید با شخصیت برند و انتظار کاربران همخوانی داشته باشند.
- انتخاب تعداد محدود فونت: معمولاً ۲ تا ۳ فونت متنوع کافی است.
- ایجاد سلسلهمراتب تایپوگرافی: نقشهای مختلفی برای متنها تعریف کنید تا کاربران راحتتر محتوا را دنبال کنند.
- اولویت دادن به خوانایی: خوانایی در دستگاهها و شرایط مختلف بررسی شود.
- حفظ فاصلهگذاری ثابت: فاصله خطوط و فاصله میان عناصر باید سازگار باشد.
- هماهنگی با سیستم طراحی: سیستم تایپوگرافی باید با عناصر دیگر مانند رنگ و گرید هماهنگ باشد.
سیستم رنگ (Color Systems)
سیستم رنگ مجموعهای از رنگهای انتخابشده است که بهصورت منسجم در کل محصول استفاده میشوند تا تجربه کاربری هماهنگ و جذاب ایجاد شود.
یک سیستم رنگ فقط انتخاب چند رنگ زیبا نیست؛ بلکه شامل موارد زیر نیز میشود:
- روانشناسی رنگ (Color Psychology)
- دسترسپذیری (Accessibility)
- هویت برند (Brand Identity)
برای مثال:
- یک رنگ برای اقدام اصلی (Primary Action)
- یک رنگ برای هشدار (Warning)
- یک رنگ برای پسزمینه (Background)
با تعریف قوانین استفاده از هر رنگ، طراحان مطمئن میشوند محصول نهتنها زیبا بلکه قابلفهم و کاربردپذیر نیز باشد.
سیستم طراحی (Design Systems)
سیستم طراحی مجموعهای یکپارچه از موارد زیر است:
- الگوهای طراحی (Design Patterns)
- بهترین شیوهها (Best Practices)
- قطعهکدها (Code Snippets)
- راهنمای سبک طراحی (Style Guides)
همه این موارد با ارزشها و اصول برند ترکیب میشوند.
سیستم طراحی مانند یک جعبهابزار مشترک عمل میکند و استفاده از کامپوننتهای قابلاستفاده مجدد را تسهیل میکند.
مزایای سیستم طراحی:
- ایجاد یکپارچگی: حفظ ظاهر و رفتار یکسان در کل محصول
- بهبود همکاری: ایجاد زبان مشترک میان طراحان و توسعهدهندگان
- افزایش بهرهوری: جلوگیری از طراحی مجدد عناصر
- تقویت هویت برند: بازتاب ارزشها و شخصیت برند در طراحی
سیستم گرید (Grid Systems)
سیستم گرید برای ایجاد طراحیهای ساختاریافته و کاربرمحور استفاده میشود.
گریدها شامل شبکهای از خطوط عمودی و افقی هستند که به طراحان کمک میکنند عناصر را در سراسر پروژه و در اندازههای مختلف صفحه نمایش بهطور منظم تراز کنند.
مزایای گرید:
- تقویت سلسلهمراتب بصری
- سازماندهی بهتر محتوا
- سادهتر شدن طراحیهای پیچیده
همچنین گرید به طراحان کمک میکند بدون نیاز به محاسبه دستی فاصله هر عنصر، چیدمان دقیق ایجاد کنند.
تحویل طراحی (Design Handoff)
وقتی طراحی نهایی آماده میشود، طراح آن را به تیم توسعه تحویل میدهد. این فرآیند Design Handoff نام دارد.
سند Design Handoff شامل موارد زیر است:
- ماکاپها
- تعاملات
- متنها
- بررسیهای دسترسپذیری
- مشخصات فنی (Specs)
- داراییهای طراحی
این موارد به تیم توسعه کمک میکنند محصول یا بهروزرسانی آن را پیادهسازی کنند.
نکته حرفهای: صفحهها را بهوضوح نامگذاری کنید و برای هر صفحه توضیحاتی درباره تصمیمات طراحی خود بنویسید.
ماکاپها (Mockups)
ماکاپها مدلهای واقعی از صفحههای طراحی هستند که نشان میدهند طراحی در دستگاه واقعی چگونه دیده خواهد شد.
کاربردهای ماکاپ:
- بررسی عملکرد طراحی توسط توسعهدهندگان
- نمایش طراحی به ذینفعان
- استفاده در تست کاربر
- استفاده در پورتفولیو
ماکاپها کمک میکنند طراحیها حرفهایتر و ملموستر به نظر برسند.
مجموعه آیکونها (Icon Sets)
مجموعه آیکونها شامل نمادهایی هستند که عملکردها، اقدامات یا محتوا را در یک رابط دیجیتال نشان میدهند.
آیکونها نقش مهمی در طراحی UI دارند زیرا:
- کاربران را در استفاده از رابط راهنمایی میکنند
- اطلاعات را سریع منتقل میکنند
- از موانع زبانی عبور میکنند
یک مجموعه آیکون خوب باید از نظر:
- سبک
- رنگ
- اندازه
با یکدیگر هماهنگ باشد و در هماهنگی با سیستم طراحی محصول عمل کند.