در حالی که Sketch، Adobe XD، Figga و Invision Studio، همه محصولات مشابهی را با تفاوت های اندکی در زمینه های تمرکز و روند اجرا ایجاد می کنند، ابزارهای مفیدی هم تنها برای کاهش سختی ها و دردسرهای جریان کار ساخته شده اند. در این مقاله به معرفی چهار مورد از بهترین ابزارهای جدید طراحی مدل بلوکی می پردازیم، ابزارهایی که در طراحی سایت نیز کاربرد بسیار زیادی دارند.
۱- Whimsical.co
فلوچارت
اکثر پروژه ها معمولا با یک فلوچارت یا نموادر قدم به قدم شروع می شوند. کار ما فقط طراحی یک تصویر ثابت و ایستا نیست و تجربیات را طراحی می‌کنیم، پس بهتر است از ابتدا آهسته و قدم به قدم پیش برویم.
من معمولاً فلوچارت پروژه های بزرگ را روی کاغذ یا تخته وایت‌بورد پیاده سازی می کنم اما هنوز هیچ برنامه یا ابزار رایگان مناسبی برای رسم این نمودارها پیدا نکرده ام. من قبلا نمودار ها را در برنامه SKETCH رسم می کردم که برنامه اختصاصی و مناسبی برای این کار نیست. با این حال برای بهینه سازی این روند، از نمادها یک کتابخانه ایجاد کردم که کار با آن همیشه آزار دهنده بوده است.
در حال حاضر من برای این کار از Whimsical استفاده می کنم، چراکه عملکرد آن همان طوری است که انتظار می رود. شما هم شروع کنید… یک مستطیل (یا هر شکل دیگری که دوست دارید) وارد کنید، درون آن یک متن بنویسید و آن را به مستطیل (شکل) بعدی مرتبط کنید.
نمونه عملی یک فلوچارت Whimsical – عملکرد آن همانطوری است که انتظار می رود.
وایرفریم ها (بتا)
محصول دوم آن ها کمی بلندپروازانه تر است. Whimsical با استفاده از همان نوع ویرایشگر به عنوان برنامه فلوچارت به شما اجازه می دهد که wireframe ها را ایجاد کنید. با دارا بودن بانک کوچکی از عناصر، فقط با یکی دو کلیک آنها را روی صحنه بکشید و تصویرتان را ایجاد کنید.
آن ها wireframeها را طوری مدیریت می کنند که ساده به نظر بیایند و باعث می شوند که هر نوع سفارشی سازی بصری را محدود کنند اما اجازه می دهند فقط چیزی را بسازید که در یک زمان محدود نیاز دارید. آن ها با این روش سرعت تیم را بهبود می بخشند.
UI Wifi Widest Frame – از لحاظ سرعت بهینه سازی شده است.
از آنجایی که این نسخه بتا است، برخی از ویژگی ها، از جمله یک بانک عناصر بزرگتر را ندارد. من استفاده از این ابزار را به مدیران محصول توصیه می کنم که به نظر مناسب ترین کاربران برای آن هستند.
whimsical.co
۲- Overflow.io
برنامه جدید مورد علاقه من ،Overflow است.
برای ما که جهت پیشبرد پروژه خود از نمودار جریانی گام به گام استفاده می کردیم و در اواسط کار مجبور شدیم که برنامه را تغییر دهیم، نرم افزاری نیاز بود که بتوان با آن چارت ها را با همان شکل به صفحاتمان مرتبط کنیم و این دقیقا همان کاری ست که Overflow انجام می دهد.
شاید شما هم مانند من، تا به حال این کار را در Sketch انجام می داده اید و ساختن یک صفحه نمایش ۱۰۰۰۰ پیکسلی برای متصل کردن ۳۰ تصویر با کیفیت بالا کاسه صبرتان را لبریز می کرده است. اما حالا با Overflow خیلی راحت artboard های خود را با برنامه، همگام سازی و شروع به ایجاد اتصالات سودمند و پرکاربرد می کنید.
صفحه Overflow ها – آرت بورد ها را همگام سازی و شروع به اتصال کنید.
overflow.io
۳- Maze.design
تست کارایی بسیار مهم است که استفاده بهینه از آن نیازمند منابع و فرآیندهای زیادی است. یک آزمایش خوب در تصمیم گیری های بهتر به شما کمک می کند و آن زنجیره بازخوردی نامحدود را که همه ما ساعت ها برای یافتن بهترین راه حل بر سر آن بحث می کنیم، می بندد. Maze به طور مستقیم با پروتوتایپ های مورد علاقه ما یکی میشود و کلیک خورهای مورد نیاز مان را وارد تست می کند.
مجموعه ای از وظایفی که می خواهید شرکت کنندگان انجام دهند را ایجاد و آن ها را ذخیره کنید، سپس آزمایش خود را انجام دهید.
هنگامی که کاربران شما شروع به تکمیل Maze کنند، گزارش تجزیه و تحلیل جامعی از جلسات و بازخوردهای شرکت کنندگان را دریافت خواهید کرد.
متأسفانه ما هنوز به هیچ راهی برای ادغام پرسشنامه یا ثبت جلسات شرکت کنندگان بر نخورده‌ایم و تمرکز اصلی برنامه بر روی جنبه های تکلیفی کار است.
ایجاد یک سری از ماموریت
گزارش تجزیه و تحلیل جامعی از جلسات و بازخوردهای شرکت کنندگان
در این بخش با Maze.design، یکی دیگر از ابزارهای جدید طراحی مدل بلوکی آشنا شدید، اما برای اطلاعات بیشتر می توانید با کلیک بر روی تصویر زیر، وارد سایت آن شوید.
maze.design
۴- Toybox
به عنوان یک طراح، هماهنگی و ثبات همیشه در ذهن ما نقش بسته است. با ورود به دوران جدید سیستم های طراحی، ما به نگهداری آسان و اجرای بهتر UI های سازگار نزدیک تر میشویم.
با این حال، وضعیت فعلی سیستم طراحی هنوز هم بر روی پلتفرم های مختلفی تقسیم شده است. کتابخانه نمادهای Sketch، استوری بوک React، کتابخانه Angular،صفحات سایت لایو و…
به این مخلوط، فایل های اسکچ قدیمی، بازیکنان سرکش و یک تیم طراحی بزرگ را اضافه کنید که مشغول حل مشکلات متفاوت هستند.
در این ابعاد پیدا کردن یک راه حل مناسب همچنان سخت به نظر میرسد.
تیم Toybox systems به شما کمک می‌کند که بدانید چطور از سیستم خود در سازمانتان استفاده کرده اید تا از اشتباهات موجود بپرهیزید و آن را بهبود بخشید.
هدف آن ها ایجاد برنامه ای است که بر تمام سیستم عامل های شما نظارت کند تا درباره سبک های طراحی مورد استفاده تان به دیدگاه معینی برسید.
این تیم در حال حاضر پلاگین Sketch بسیار مفیدی را منتشر کرده اند که فایل شما را اسکن می کند تا ناهماهنگی ها را هنگام کار شناسایی کند. به گفته آن ها : “این برنامه برای Sketch حکم غلط گیر را دارد”.
رنگ های خود را وارد کنید، دکمه “Lint My file” را فشار دهید و ببینید که آیا در طراحی خود از مقادیر ناهماهنگ استفاده کرده اید؟
از آنجا پلاگین شما را به لایه های مختلف هدایت می کند و رنگ های درست و مناسب را به شما پیشنهاد می دهد.
همچنین آن ها گزارشی از استفاده از رنگ در هر عنصر در سراسر فایل را به عنوان پاداش به شما ارائه می دهند.
Plugin Toybox Roller – ایجاد لیستی از رنگ های غیر منتظره در فایل شما
Toybox Roller plugin — خطاهای شما را به لایه درست هدایت می کند و رنگ های بهتر را پیشنهاد می دهند
Toybox Roller plugin — گزارش استفاده از رنگ در هر عنصر در سراسر فایل
toyboxsystems.com
منبع: uxdesign