09107603363 m.m.rahmani734@gmail.com امیرآباد دانشکده فنی دانشگاه تهران

ابزارهای پرکاربرد در طراحی رابط کاربری

ابزارهای مورد استفاده در دوره آموزشی UI و UX

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

ابزار پروتوتایپینگ ابزاری برای کمک به شما در ایجاد سریع تر و بسیار مؤثر محصول است. نمونه‌های اولیه ایده‌های شما را نشان می‌دهند و با انجام این کار می‌توانید شیوه طراحی را تغییر دهید.

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

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

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

طراحی

Sketch

آموزش sketch

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

به فتوشاپ در ترکیب با Illustrator فکر کنید، اما یک نرم افزار سبک وزن با آرشیو نامحدود دارید.

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

شخصاً یکی از ویژگی‌های آن که من آن را دوست دارم نمادهای تو در تو است.

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

یکی دیگر از ویژگی‌های جدیدی که منتشر شد “صادرات به کد” توسط Launchpad برای افزونه Sketch است که طراحی شما را در عرض چند ثانیه قالب بندی می‌کند. این کمک می‌کند تا سریعتر از گذشته به توسعه برسید!

Zeplin

آموزش zeplin

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

علاوه بر این، Zeplin اجازه می‌دهد تا مستقیماً بارگیری هر عنصر از artboard به عناصر بارگیری شود.

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

Figma

آموزش figma

Figma ابزاری نسبتاً جدید است و تقریباً با همان رابط Sketch طراحی شده است.

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

درست شنیدی! بوم فیگما به شما کمک می‌کند تا روند طراحی خود را به روشی مشترک انجام دهید.

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

همراه با Slack، کل تیم به هم متصل است و این روند می‌تواند روان و کارآمدتر از همیشه باشد.

FramerX

آموزش framerx

Framer X تمام ویژگی‌های مورد نیاز شما را برای ترسیم همه چیز از آیکون‌های سفارشی گرفته تا تصاویر پیچیده دارد. طرح‌های خود را با ویرایشگر مسیر پیشرفته تنظیم کنید، هر چیزی را از بوم خود و موارد دیگر صادر کنید.

ویرایش برداری پیشرفته ساده است. همه چیز را از آرمها و نمادها گرفته تا تصاویر مفصل با Framer X.

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

MockPlus iDoc

آموزش mockplus

 

Mockplus iDoc ابزاری قدرتمند برای طراحی محصول برای طراحان و مهندسان است. این اجازه می‌دهد تا طراحان به طور خودکار طراحی دستی و طراحی صادرات را از Sketch، Photoshop یا Adobe XD به صورت خودکار انجام دهند و مشخصات تهیه شده را بطور خودکار مشاهده کنند. نمونه‌های اولیه تعاملی و متحرک ایجاد کنید. همکاری طراحی را آسان تر کنید.

ویژگی‌های اصلی:

طرح‌ها را با یک کلیک از Sketch، XD و PS صادر کنید

مشخصات دقیق، دارایی‌ها، قطعه کد را بطور خودکار تولید کنید

کارهای طراحی و گردش کار را در صفحه داستانی کامل نمایش دهید

برای ارائه بازخورد فوری، درست در مورد طرح‌ها نظر دهید

ساخت نمونه‌های اولیه تعاملی سلام با فایل‌های طراحی واقعی

Mock Flow

آموزش mock flow

MockFlow یک مجموعه آنلاین UX برای طراحان خلاق و مهندسان قابلیت استفاده است. این یک ابزار با کاربرد آسان برای ایجاد فریم‌های سیم و نمونه برداری کاغذ است.

Balsamiq

آموزش balsamiq

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

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

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

طراحی و توسعه

Webflow

آموزش webflow

این ابزار در سال 2013 توسط 2 برادر به منظور کمک به طراحان در ایجاد سایت‌ها بدون دانستن نحوه کد، راه اندازی شد.

جریان وب به طراحان اجازه می‌دهد تا در حالی که از رابط نسبتاً مشابهی با فتوشاپ استفاده می‌کنند، سایتهایی را در زمان نسبتاً کوتاه ایجاد کنند.

اگرچه برای کار با این ابزار نیازی به دانستن کد ندارید، اما می‌توانید برچسب‌های html / css سایت را با توجه به نیاز مشتری صادر و تغییر دهید.

می‌توانید یکپارچه سازی کامل با فونت‌های گوگل، cms با کیفیت بالا، دسترسی به کد، ذخیره سازی و صادرات کامل کد طراحی را پیدا کنید.

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

Flinto

آموزش flinto

به شخصه یکی از ابزارهای نمونه سازی مورد علاقه من به دلیل عدم تمایل کامل با Sketch است.

Flinto به طراحان اجازه می‌دهد نمونه‌های اولیه تعاملی برای موبایل، دسک تاپ یا هر برنامه وب دیگر ایجاد کنند.

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

Framer

آموزش framer

نکته در مورد Framer این است که شما باید با CafeScript کدگذاری کنید.

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

شما اساساً می‌توانید همه کارهایی را که در وب امکان پذیر است مانند استفاده از داده‌های زنده انجام دهید یا در 100 روز 100 پروژه منحصر به فرد مختلف ایجاد کنید.

این ابزار طراحی خاص خود را در داخل دارد اما کاملاً با Sketch هماهنگ است.

اگر با Framer بسیار با تجربه نیستید، من هنوز هم توصیه می‌کنم به آن ضربه بزنید. این یک منحنی یادگیری بسیار مناسب و آسان است.

Rapid UI

آموزش rapid ui

این پلت فرم جدید بدون نیاز به نوشتن کد، پرونده‌های فتوشاپ را به سایت‌های زنده تبدیل می‌کند.

پرونده PSD خود را در داشبورد خود بکشید و رها کنید و PSD در چند دقیقه به HTML و CSS تبدیل می‌شود.

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

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

Hype 3

آموزش hype 3

با استفاده از Hype می‌توانید انیمیشن‌هایی را تولید کنید که گویی با After Effects کار می‌کنید که از طریق keyframes انیمیشن ایجاد می‌کنند. این ابزار انیمیشن‌های ایجاد شده را ضبط می‌کند و به طور خودکار آنها را به HTML5 صادر می‌کند.

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

بیشتر بخوانید: تاثیر UX بر سئو

بیشتر بخوانید: تفاوت UI و UX

Principle

آموزش principle

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

Adobe XD

آموزش adobe xd

Adobe به خاطر Photoshop و Illustrator شناخته شده است. اما سال گذشته Adobe ابداع جدید نمونه اولیه UX را Adobe Experience Design CC (که قبلاً با نام Project Comet شناخته می‌شد) راه اندازی کرد.

Adobe XD در حدود دو زبانه متمرکز شده است: طراحی و نمونه اولیه. برگه Design از ابزارهای بردار و متنی ساده برخوردار است و برای ایجاد طراحی شما استفاده می‌شود. برگه نمونه اولیه برای پیش نمایش و به اشتراک گذاری طرح شما است. با استفاده از Adobe، می‌توانید نمونه‌های اولیه وفاداری بسازید – همچنین روی رایانه.

Origami

آموزش origami

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

Invision

آموزش invision

در بین کلیه ابزارهای نمونه سازی محبوب، Invision وجود دارد، که همچنین یکپارچه با Sketch ادغام می‌شود.

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

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

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

Axure RP

آموزش axure rp

Axure RP در زمینه طراحی UX کاملاً مشهور است. غیرقابل انکار، یکی از جامع ترین (از نظر کارایی) ابزار نمونه سازی است.

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

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

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

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

Proto.io

آموزش proto.io

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

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

Atomic

آموزش atomic

ابزاری که امکان حل مشکلات پیچیده در فرآیند ساخت محصول را فراهم می‌کند.

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

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

ذکر این نکته حائز اهمیت است که از نظر ساخت ستونها، تابلوهای آرشیو، لایه بندی، میانبرها، شباهت غیرقابل تشخیصی بین رابط Atomic و رابط Sketch وجود دارد.

اگر از Sketch استفاده می‌کنید، احتمالاً با استفاده از این ابزار در خانه احساس می‌کنید.

 

UXpin

آموزش uxpin

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

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

یک مدل مناسب برای پیکسل را در Sketch یا Photoshop بسازید، سپس آن را مستقیماً در همان سند بارگذاری کنید تا یک نمونه اولیه با وفاداری بالا از همان طرح اصلی ویندوز ایجاد شود.

ProtoPie

آموزش protopie

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

ProtoPie به شما امکان می‌دهد تا با اسکن بارکدی، قابلیت‌های نمونه‌های اولیه خود را آزمایش کنید.