vagadesign
vagadesign
خواندن ۵ دقیقه·۵ سال پیش

ابزارهای UI/UX برای مبتدیان: طراحی و ‌پیش‌نمونه‌سازی در اسکچ

شاید این سوال برای شما به عنوان یک طراح تازه‌کار پیش آید که کدام ابزار را بهتر است یاد بگیرید تا در حوزه‌ی کاری جدید خود، موفق باشید. گزینه‌های بسیار زیاد و گیج‌کننده‌ای پیش روی شماست. با وجود آنکه هر فروشگاه طراحی، هر شرکت و یا هر فرد، دلخواه‌های خود را دارد، اسکچ یکی از پرکاربردترین ابزارها در این خصوص است. این مقاله را بخوانید تا بدانید چرا اینگونه است و به محض آنکه کمی درباره‌ی آن دانستید، از برخی از آفرهایی که برای موکاپ‌های اسکچ گروه UI/UX design شرکت Ramotion ، فراهم شده است، بازدید کنید.

طراحی و نمونه سازی در UI/UX

همانطور که احتمالاً پیش از این یاد گرفته‌اید، وایرفریم‌ها و پیش‌نمونه‌ها بخش بزرگی از ارائه‌ی طراحی UI/UX هستند. طرح‌های دستی اولیه بر روی کاغذ و یا حتی خط و خطوط در هم و برهم روی وایت‌برد، معمولاً در همکاری با طراحان دیگر بررسی و اصلاح می‌شوند. بهترین موکاپ‌ها باز هم اصلاح شده تا به وایرفریم‌های متعارفتری، چه بصورت دستی و چه به کمک نرم‌افزار، تبدیل گردند. سپس طرح‌ها و شیوه‌ها بر آنها اعمال شده و در پایان، برای نمونه‌های اولیهِ‌ با وفاداری بالا و آزمون پذیر، تعامل نیز به آن افزوده می‌شود.

در ویدیوی گروه نیلسن/نورمن، Pencils vs. Pixels for UI Protyping [sic] and Sketching ، طراحان توضیح می‌دهند که این فرایند همیشه فرایندی خطی نیست. یکی از طراحان برجسته، دوست داشت که اول با سایر طراحان روی کاغذ یا تخته سفید کار کند، اما احساس کرد که طر‌ح‌های با وفاداری بالاتر برای به اشتراک گذاشتن با ذینفعان، بهتر است. ایده‌ها را می‌توان همان اول به اشتراک گذاشت و هر رویکردی، سبکی و سنگینی‌های خودش را دارد. ذینفعان اغلب نمی‌توانند با وایرفریم‌هایی که وفاداری‌ِ کمتری داشته و طراحی زیبایی ندارند، فرآورده‌ی نهایی را حتی تجسم نمایند. از سوی دیگر، انتظارات بایستی به گونه‌ای مدیریت شود که وقتی مدل بسیار زیبا باشد، ذینفعان چنین تصور نکنند که فراورده‌ی نهایی تقریباً تکمیل شده است.

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

اسکچ چه می‌کند

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

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

امکانات اصلی

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

· اسکچ یک ابزار مبتنی بر بردار است که فایل‌ را کوچک نگهداشته و تغییر اندازه آن را نرم و هموار می‌کند.

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

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

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

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

پلاگین‌ها و ابزارهای سازگار

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

· Zeplin – با کامپایل کردن اسپک‌ها، محول کردن کار به توسعه‌دهندگان را آسان می‌کند.

· Stark – به طراحان کمک می‌کند طرح‌هایی قابل دسترس، برای افراد با ناتوانی‌های جسمی درست کنند.

· Userflows – ایجاد فلودیاگرام و سایت‌مپ‌ها را ساده می‌کند.

مقایسه با ابزارهای دیگر

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

اما جدا از این ابزارها، گزینه‌های بسیار زیاد دیگری هم هست. سایت UXtools.co مقایسه ی خوبی از سایر ابزارهای طراحی و پیش‌نمونه‌سازی، ارائه داده است. همان طور که می‌توانید ببینید، داده‌های آنها و دلایل خوبی که آورده‌اند، نشان می‌دهند که اسکچ برای طراحان UI/UX بسیار مورد پسندتر از دیگر ابزارهای پیشنهاد شده، است.

فتوشاپ و ایلاستریتور

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

· هنگام حرکت به سوی یک پیش‌نمونه‌ی قابل کلیک، اسکچ برای رفتارهای تعریف کننده، بسیار بهتر است.

· داشتن مقواهای نامحدود در اسکچ مجاز است و امکانی به نام pages‌ دارد که به شما اجازه می‌دهد آنها را بصورت نواحی که به آسانی راهبری شده‌اند، گروه‌بندی کنید.

· دم به دم کرش نمی‌کند.

سایر ابزارهای مستقل

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

یک ابزار وایرفریمینگ خوب دیگر، Balsamiq است. این ابزار فاقد توانایی ایجاد جلوه‌های دیداری با وفاداری بالاست.

Figma یک ابزار مبتنی بر مرورگر است. فیگما گزینه‌ی خوب دیگری برای همکاری و پیش‌نمونه‌سازی است. قیمت آن بر اساس آبونمان است ولی اگر مسائل امنیتی برای شما مهم باشد، ممکن است گروه IT به شما اجازه‌ی استفاده از این نرم‌افزار را ندهد.

نتیجه‌گیری

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

uiuxsketchdesign
شاید از این پست‌ها خوشتان بیاید