برنامه هایتان را مانند آب خوردن به بهترین شکل طراحی کنید !
سلام دوستان دوباره وقت کردم که مطلب بذارم و امروز می خوام یه سایت جالب رو بهتون معرفی کنم :)
خیلی وقت ها پیش اومده که حوصله کار کردن با فتوشاپ و انتخاب رنگ و ... نداشتید و به دنبال ساخت یک Ui استاندارد و قدرتمند بودید ... اما چطوری ؟
سایت fluidui یه سایت جالب هست که امکانات زیادی رو برای طراحی در اختیار شما میذاره و می تونید مانند کاغذ ایده های خودتون رو قبل از طراحی روی اون امتحان کنید اما با گرافیک بالا و زیبا :)
از طریق این لینک می تونید مستقیما به محیط طراحی برید و کارمون رو شروع کنیم ، بعد از باز کردن لینک مثل عکس زیر نوشته که برای اضافه کردن صفحات جدید Double-Click کنید .
بر روی صفحه دوبار کلیک می کنیم و یه صفحه مانند عکس زیر ایجاد میشه و برای ورود به محیط طراحی بر روی صفحه کلیک می کنیم
بعد از کلیک کردن بر روی صفحه جدیدی که ایجاد شده است به محیط طراحی وارد می شویم !
از طریق دکمه ای که در بالا سمت چپ به صورت پیشفرض بر روی Wireframe تنظیم هست می تونیم انتخاب کنیم که برای کدام سیستم عامل طراحی می کنیم ! که جدیدا طراحی برای iOS8 هم به لیست اضافه شده است. بر روی دکمه کلیک می کنیم و در لیست Android4.4 را انتخاب می کنیم.
بعد از کلیک کردن بر روی Android4.4 می بینید که منابع گرافیکی در سمت چپ صفحه تغییر می کنند . حالا باید تعیین کنیم که می خوایم بر روی چه دستگاهی طراحی کنیم . به طور پیشفرض بر روی Iphone 5 S قرار دارد که مانند عکس زیر با کلیک روی آیکون Page Setting صفحه مورد نظر رو باز می کنیم.
توی پنجره باز شده می تونیم محیط طراحی رو به Landscape تغییر بدیم یا سایز صفحه رو به صورت دستی وارد کنیم ، حتی می تونیم براش انیمیشن در نظر بگیریم !! بر روی Device Settings کلیک می کنیم و در صفحه باز شده Android 480 x 800 رو انتخاب می کنیم.
به صفحه اصلی بر میگردیم ، خوب ما می خوایم توی پروژمون یه Background داشته باشیم پس از سمت چپ تو قسمت Backgrounds به دلخواه یکی را انتخاب کرده و به داخل صفحه مانند انیمیشن زیر Drag&Drop می کنیم .
و بعد از کلیک کردن بر روی آیتمی که اضافه کردیم تنظیماتش ظاهر میشه مانند عکس زیر :
بر اساس شماره های عکس بالا :
1- حذف آیتم
2- تغییر رنگ آیتم
3- مخفی کردن تنظیمات
4- لینک دادن به صفحه ای دیگر
ولی هر آیتم تنظیمات خاص خودش رو داره مثلا شما وقتی یه متن رو به صفحه بکشید می تونید فونت اون رو هم تغییر بدید.
در کل برنامه امکانات فوق العاده ای رو برای طراحی در اختیار شما میذاره که دیدن بقیش رو میذارم به عهده خودتون چون واقعا حوصله تایپ کردن ندارم :| امکاناتی مثل :
-ساخت صفحات متعدد و لینک دادن آن ها به یک دیگر
-اجرای با کلیک بر روی گزینه play در سایت
-اجرای برنامه بر روی گوشی با کلیک بر روی گزینه Share و انتخابTest on Device ( باید Barcode Scanner ) بر روی موبایلتون نصب شده باشه
- و ....
فقط میمونه ذخیره طرح ها و استفاده از اون های توی Eclipse که چون Ui استاندارد ساخته میشه پیاده سازی اون در Eclipse بسیار راحت هستش.
برای ذخیره طرحتون به صورت تکه تکه شده و استفاده در Eclipse باید اکانت Lite بخرید که ما نمیتونیم ! ولی با این ترفند میشه به راحتی ذخیرشون کرد :D
اگر از فایرفاکس استفاده می کنید بعد از تمام شدن کارتون بر روی اجزای صفحه کلیک راست کنید و Save As Image رو بزنید به همین راحتی :|
اگر هم عکس ها کوچیک بودند صفحه رو در سایز بالاتر بسازید :)
فقط یه پیشنهاد خیلی خوب میشه طرح هایی رو که ساختید در اینجا به صورت پاسخ جدید قرار بدید تا ببینیم میشه چه طرح های زیبا و استانداردی رو ساخت .
امیدوارم مطلب مفیدی بوده باشه ، موفق و سربلند باشید به امید پیشرفت Ui برنامه های ایرانی ...
پاسخگویی و مشاهده پاسخ های این سوال تنها برای اعضای ویژه سایت امکان پذیر است .
چنانچه تمایل دارید به همه بخش ها دسترسی داشته باشید میتوانید از این بخش لایسنس این آموزش را خریداری نمایید .
