شش مرحله طراحی در چالش یو آی (UI Challenge)

برای اینکه در طراحی رابط کاربری مهارت خودمون رو ارتقا بدیم احتمالا نباید به دنبال طراحی تک صفحه‌ای ثبت نام، لندینگ پیج، ماشین حساب و... باشیم، به جاش باید روی اسلاید پروجکت ها کار کنیم و روی یک تجربه کامل سرمایه گذاری کنیم و اونو طراحی کنیم و حالات مختلف یک اسکرین را دیزاین کنیم مثل حالت های: Hover, Active, empty, Warning Error, Success, Disable and etc.یک یوزر اینترفیس خوب باید کاربردپذیر و قشنگ باشه. برای این کار باید ادراک خوبی از نحوه استفاده از رنگ، تایپوگرافی و سلسله مراتب بصری داشته باشیم. میتونیم با تحقیقات و داده های کاربر شروع کنیم تا تصمیمات طراحی برامون مشخص و مستند بشه و تصمیم بگیریم چه چیزهایی باید در UI ما وجود داشته باشه، چطوری با هم کار کنن و فلو ها را شکل بدن و روی Unhappy Path ها هم کار کنیم. اگه به دقت روی مراحل UI محصول وقت بذاریم احتمالا دانش و تجربه بهترd از زمانی که فقط مرحله پیکسل پرفکشن رو برای تک صفحه ها اجرا می کنیم، بدست خواهیم آورد.شش مرحله طراحی UIبه طور کلی، طراحی رابط‌های کاربری فرآیندیه برای کشف نحوه نمایش بصری اجزاء، تغییرات حالت و تعاملاتیه که کاربر وقت تعامل با دیزاین های ما روی اسکرین باهاش مواجه می‌شه. در حالی که ممکنه این مراحل را در ترتیب متفاوتی انجام بدین یا مراحلی رو حذف یا اضافه کنین، این مقاله با یک طرح کلی به شما ایده خوبی از مراحل مختلفی که ممکنه درگیرش بشین و زمان و چرایی استفاده از اونارو توضیح میده.Stage 1: Sketchingاسکچ زدن در طراحی رابط کاربریدر مرحله اول ایده های ذهنی و طرح ها رو از ذهن استخراج کرده و روی کاغذ یا اسکرین بیارین. در ابتدای کار ممکنه ظاهری خشن و بی قواره و حتی زشت داشته باشن که هیچ اشکالی نداره. زمان کوتاهی را به کشیدن اونها اختصاص بدین. نکته مهم تنها اینه که Container های کلی رو تو این مرحله مشخص کنین و Placeholder ها که باکس هایی برای نمایش متن ترافیک و تصاویر هستن رو تو این مرحله با دقت متوسط یا بالا تعیین و ترسیم کنین. اهداف این مرحله:شروع گفتگو کمک به شفاف سازی و تعریف کردن فیچر هایی که مورد نیاز مونهکمک به امکان ایجاد تغییرات سریع و ایتریت زدن تجسم اینکه اسکرین ها در Context های مختلف چطوری به نظر می رسن.ابزارهای Sketchingقلم و کاغذقلم دیجیتال و تبلتوایت بردفیگماابزارهای اسکچینگStage 2: Wireframingوایرفرمینگ مرحله دوم وایرفرمینگ یا باکس های خاکستریه. مرحله‌ای که قبل از اپلای کردن اصول طراحی بصری انجام میشه، که در این مرحله Layout کلی المان ها و شکل گیری اونا رو میشه دید. در این مرحله Filler Content ها، متن های ساختگی لورم ایپسوم یا متن های واقعی، Placeholder ها، تصاویر یا استاک ایمیج ها ایجاد میشن. میتونید از UI kit ها استفاده کنین که قسمت‌های مختلفش از قبل آماده شده یا اینکه خودتون کار رو از اول شروع کنین.اهداف این مرحله:تجسم کلی Layout برای متقاعدسازی و جلب اعتماد استیک هولدرهاکمک به استیک هولدرها در مشاهده ایده های اولیه و Flash Out شدن ایده ها (چون وایرفریم یک راه سریع و ارزون برای ایجاد ایده های اولیه ست.)ابزارهای Wireframingنرم افزار Just in Mindنرم افزار Balsamiqفیگماابزارهای WireframingStage 3: Component Designطراحی کامپوننت هارابط های کاربری داینامیک برخلاف لندینگ پیج های استاتیک یا سایت های مارکتینگ شما رو ملزم می‌کنه که حالات مختلف و کاندیشنال رو در نظر بگیرین. طراحی کامپوننت با سیمبول هایی مثل Badges, Buttons, Element States (مثلا حالت هاور دکمه یا حالت کلیک شده دکمه ها)، جدول ها، لیست ها، کارت ها، فرم ها و متون و تصاویر واقعی را نشون میده.اهداف این مرحله:ایجاد و طراحی کامپوننت ها برنامه ریزی و آزمایش کاربردپذیریکشف مشکلات دسترسی پذیریجستجوی مشکلات Responsive بودن دیزاینترجمه ایده ها به المان های سازگار و منسجم که میشه اونارو به اشتراک گذاشت.ابزارهای Component Designنرم افزار Sketchنرم افزار Adobe Xdفیگماابزارهای Component DesignStage 4: User and Task Flowsفلوهای کاربریوزر و فلو ها و تسک فلوها ها تعیین می‌کنن که کاربر چطوری از صفحه ای به صفحه ی دیگه برسه. وقتی روی این صفحه کلیک می کنه چه اتفاقی بیفته یا وقتی فراموش می‌کنه اطلاعات را به طور کامل اضافه کنه چه اتفاقی می افته؟ این مرحله به ادراک منتال مدلهای کاربران مرتبطه. مدل های سیستم شما و هماهنگی همه مسیرها و ریسپانس هایی که رابط کاربری شما رو ارائه میکنه، تو این بخش انجام می‌شه، که وایر فرم ها رو با فلش هایی به هم متصل می کنین که وایر فلوهارو ایجاد کنین یا فلوچارت ها و دستورات شرطی بسازین.اهداف این مرحله: نشان دادن مسیرهای ناوبری چک کردن وضعیت های میسینگ و اینفورمیشنتجسم ورود، خروج و نقاط تصمیم گیری کاربر و سفر کاربرابزارهای User and Task Flowsنرم افزار Just In Mindنرم افزار Flow Mappنرم افزارWire Flowابزارهای User and Task FlowsStage 5: Mock-up / Hi-fidelity Designsطراحی موکاپ Hi-fidelityاین مرحله زمان نمایش چیزهاست دقیقاً به همون شکلی که در محصول نهایی قراره ظاهر بشن. مهارت های گرافیکی و طراحی بصری رو روی دیزاین های مرحله قبل باید اعمال کنین. هر پیکسل باید پرفکت و دقیق اندازه گیری بشه و عناصر زیبایی شناسی و تماتیک و موضوعی برند منحصر به فرد خودتون رو به دیزاین اضافه کنین.اهداف این مرحله:ایجاد پیکسل پرفکشن ایجاد طراحی بصری منسجم و سازگار اضافه کردن حس و حال و فضای برند مورد نظر انتخاب Asset های نهایی دیزاینرسیدن به توافق نهایی با استیک هولدرهاابزارهای Mock-upنرم افزار Sketchنرم افزار Adobe Xdفیگمانرم افزار Drop Box (برای اشتراک گذاری)نرم افزار Adobe illustrationابزارهای Mock-upStage 6: Prototypingپروتوتایپ کردن اسکرین هااین مرحله همه چیز رو به هم پیوند داده و نشون میده که دقیقا از برنامه چه انتظاری میره که چطور ظاهر بشه و چه رفتاری از خودش نشان بده .تمام صفحات مهم با Hi-fidelity باید تارگت پوینت ها رو نشون بدن که زمانیکه کاربر با محصول تعامل می کنه چطوری عمل میکنن. در این مرحله همه ی اسکرین ها و فلوها در یک محیط شبیه سازی شده به هم پیوند داده میشن.اهداف این مرحله:متصل کردن تمام اسکرین ها و فلوها به همدیگهشبیه سازی محیط واقعی برنامه یا سایتایجاد اطمینان از اینکه محصول کار میکنه (قبل از لانچ) این مرحله می تونه شامل Pre-Code یا No-Cod محصول شما باشه.ابزارهای Prototypingنرم افزار In Visionنرم افزار Sketchنرم افزار Adobe xdفیگماابزارهای Prototypingحرف آخراین مراحل لزوما یک فرآیند خطی نیستن، بستگی به شما، شرایط پروژه، زمان و بودجه ی کارتون داره، ممکنه چند مرحله رو همزمان مجبور باشین انجام بدید یا از یک مرحله به مرحله بعدتر جامپ کنین.منبع:https://designerup.co/