5 دلیل مفید بودن UI Kit ها


[تعداد: 2    میانگین: 5/5]

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

مثالی از UI Kit ها

UI Kit

در این مقاله میخواهیم به بررسی 5 دلیل اصلی مفید بودن UI Kit ها و اینکه چگونه ابزار های طراحی میتوانند روی روند کار،دانش و ارتباط شما تاثیر بگزارد بپردازیم:

1. از شر وایرفریمهای بی روح خلاص می شویم:

 

طراحی از ابتدا با المانها و بدون طراحی وایرفریم

طراحی بدون وایر فریم، طراحی از ابتدا با المانها

با وجود UI Kit ها دیگه نیازی به استفاده از وایرفریم ها نیست. و UI Kit ها این امکان رو به ما میدهند که طرح مورد نظر راوخیلی سریعتر و شکیل تر پیاده سازی کنیم.

2. باعث صرفه جویی در زمان و انرژی با اجرای چند پروژه با یک طراحی:

 

با استفاده از یک UI Kit چند پروژه مشابه طراحی کنید

چند پروژه یک طراحی

شما میتونید طرح اولیه تون رو به عنوان library ذخیره کنید و در چندین پروژه ی مشابه به سرعت و به راحتی از اون استفاده کنید. و همچنین برای پروژه های بزرگ میتوانید فایل رو به دسته بندی های کوچکتر مثل آیکون ها،فونت ها،دکمه ها و… تفکیک و ذخیره کنید.

در اینجا چند پلاگین مفید برای sketch معرفی میکنیم:

symbol swapper:امکان جا به جایی المان ها رو در فایل ها یا کتابخانه ها با همان اسم به طراح میدهد.

sketch style libraries:امکان همسان سازی لایه ها و استایل تکست ها با کتابخانه های موجود و ادغام استایل های شبیه به هم یا حذف غیرمفید ها  و تبدیل آن به یک کتابخانه ی مستقل سازماندهی شده به طراح میدهد.

move to library: انتقال المان های باز در یک فایل (پروژه ی شما) به یکی از کتابخانه های موجود.(انتقال فایل sketch به library)

3. طراحان با آشنا شدن با دیگر طراحان و طرح های آنها مهارت هایشان بهتر می شود:

 

طراحان با آشنا شدن با دیگر طراحان و طرح های آنها مهارت هایشان بهتر می شود

ذهنی خلاق تر با تحلیل طراحی های دیگران

با دیدن طراحی های دیگران شما به راحتی میتوانید نقاط قوت کار رو برای خودتون ذخیره کنید و به راحتی تشخیص بدید که نقاط ضعف یا ایرادات کار کجاست و دید و دانش خود را در این حیطه افزایش بدین.

4. برقراری ارتباطی بهتر با تیم پیاده سازی:

برقراری ارتباطی بهتر با تیم پیاده سازی

ارتباط بهتر با اغضای تیم

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

در ادامه چند فریم ورک مفید برای اشتراک گذاری ، نگه داری و خروجی گرفتن Kit در sketch را بررسی خواهیم کرد:

marketch: به طور خودکار امکان ساخت html از فایل sketch طراحی شده با استایل css را فراهم میکند.

typex: تکست استایل شما رو به صورت خروجی css،sass یا html میدهد.

sketch2react: همانطور که از اسمش پیداست ، یک پلاگین برای تبدیل طرح اولیه ی طراحی شده در sketch به کد های react است.

plant: اپ خوبی است برای کار با فایل های بزرگ جهت همگام سازی تغییرات چندین طراح روی یک طرح.این برنامه ی رایگان اجازه میده که دونفر هرچقدر که بخواهند باهم به وسیله ی این اپ کار کنند.

abstract: برای مدیریت و همکاری در پروژهای خیلی بزرگ کاربرد دارد، گرچه کمی کند است اما ثابت و امن هست.

5. برنامه ریزی برای طراحی بدون درگیری ذهنی:

 

برنامه ریزی برای طراحی بدون درگیری ذهنی

برنامه ریزی سریع برای طراحی

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

معرفی 3 پلاگین مفید برای طراحان :

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

marvel: یه پلاگین خوب که امکان همگام سازی و خروجی گرفتن را در marvelapp.com به شما میدهد تا روی طرح خود در این محیط کار کنید و از روند کار خودتون رو رکورد کنید.

realtimeborad plugin: پلاگین خوب که اجازه میده تصاویر sketch طراحی شده رو در بورد های miro بار گذاری کنیدو  به شما کمک میکند که درباره ی یک پروژه گفتگو داشته باشید و نواقص رو بیپوشاند.

نتیجه گیری:

از آنجایی که ابزار های طراحی هر سال محبوب تر و محبوب تر میشوند، و هچنین میبینیم کمپانی هایی مانند Adobe،Framer،Invision یا Unity در اپ های طراحیشون در قسمت marketplace المان هایی رو میسازندو قرار میدهند. بهتر است با استفاده از این المانها تمرکز رو بر روی روند کار و طراحی قرار دهیم نه جزئیات. با استفاده از ui kit ها، طراحی: بدون نیاز به وایرفریم ها،با صرف زمان و انرژی کمتر،امکان طراحی چندین پروژه،افزایش دانش طراحی طراح،افزایش همبستگی و همگام سازی بیشتر با تیم پیاده سازی،و بدون هیچ سردرگمی و پیچیدگی ذهنی برای طراح به سادگی انجام میپذیرد. پس زمان رو از دست ندید و همین الان چند ui kit رایگان را دانلود و استفاده کنید

 

آموزشطراحی اپلیکیشن iOSطراحی اپلیکیشن اندرویدطراحی فروشگاه اینترنتیمقالات آموزشی

download ui kitdownload ui kit freeuiui designUI Kitui kit designUI Kit چیست؟uiduxux designuxdتجربه کاربریرابط کاربریطراحیطراحی اپلیکیشن موبایلطراحی تجربه کاربریطراحی رابط کاربریطراحی سایت

سیده زهرا میرکاظمیمشاهده نوشته ها

دانشجوی مهندسی کامپیوتر، علاقه مند به ui/ux و front-end

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *