علیرضا اصفهانی
علیرضا اصفهانی
خواندن ۵ دقیقه·۶ سال پیش

تحقق یک رویا: طراحی اینترفیس، اینبار ساده‌تر و سریع‌تر

وظیفه یه طراح (ui/ux designer) خوب اینه که زندگی رو برای بقیه ساده‌تر کنه و خب چرا اینکار باید اینقدر سخت باشه؟

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

نگهداری نسخه‌های مختلف یک طرح و مدیریت اون‌ها کار سخت و عذاب‌آوریه
نگهداری نسخه‌های مختلف یک طرح و مدیریت اون‌ها کار سخت و عذاب‌آوریه



حالا یک سناریو دیگه؛ فرض کنید شما در یک تیم استارت‌آپی وظیفه طراحی رابط‌کاربری یک اپلیکیشن موبایل رو دارید که قراره نسخه android و ios داشته باشه؛ قطعا هر صفحه این اپلیکیشن شامل تعدادی آیکن و تصویر و ... (assets) میشه. که این assetها باید درکنار تصویر کامل هر صفحه؛ با فرمت‌ها، رنگ‌ها و اندازه‌های مختلف در اختیار توسعه‌دهنده‌های تیم قرار بگیره. واضحه که وظیفه خروجی گرفتن تمام این موارد به عهده طراح‌ هست؛ تا اینجا کار همه چی آرومه ولی اگه تغییر بزرگی در طرح اتفاق بیوفته؛ مثلا سبک آیکن‌های کل طرح از outlines به solid عوض بشه، چی؟ و صدالبته اگه حجم پروژه زیاد بشه این خروجی گرفتن‌های متوالی دردسر زیادی رو برای طراح و توسعه دهنده‌ها ایجاد میکنه.

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


تحقق یک رویا

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

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

(مقایسه نسخه‌های مختلف یک طرح)
(مقایسه نسخه‌های مختلف یک طرح)

کار با سیمپلی ساده اس، طراح کافیه در سیمپلی عضو بشه، یک پروژه جدید در سیمپلی ایجاد کنه، پلاگین سیمپلی برای نرم‌افزاری که باهاش طراحی میکنه (sketch - adobe xd - photoshop) رو نصب کنه و وقتی کار هر صفحه تموم شد از داخل همون نرم‌افزار طرح رو سینک کنه روی اکانت سیمپلی پروژه.

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

(سینک کردن صفحات طرح از طریق پلاگین اسکچ)
(سینک کردن صفحات طرح از طریق پلاگین اسکچ)

سیمپلی برای توسعه دهنده ها هم پلاگین داره، توسعه دهنده بعد از عضویت در سیمپلی و دعوت شدن به پروژه در سیمپلی، میتونن از مزایای اون در وب‌اپ سیمپلی استفاده کنن، همچنین توسعه دهنده‌های android میتونن پلاگین android studio و توسعه‌دهنده‌های ios میتونن پلاگین Xcode این پلتفرم رو نصب کنن و خیلی راحت طرح رو در کنار کد داشته باشند و assetها،‌ متن‌ها، اندازه‌های متون، فاصله‌ها و ... رو به سرعت در اختیار داشته باشن.

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

(محیط xcode بعد از نصب و استفاده از پلاگین سیمپلی)
(محیط xcode بعد از نصب و استفاده از پلاگین سیمپلی)

در زمانی که من این متن رو مینویسم سیمپلی یک اکانت ۳۰ روزه رایگان برای ثبت‌نام اولیه به همه میده تا از تمام امکاناتش بتونین بهره ببرنند و البته بعد از تموم شدن این ۳۰ روز هم میتونید همچنان به کارتون بصورت رایگان ادامه بدید،‌ اما محدودیت یک پروژه‌ فعال برای هر اکانت اعمال میشه (‌که خیلیم بد نیست :دی)

من در انتها مزایای استفاده از سیمپلی ( و یا پلتفرم‌های مشابه ) رو که قسمتیش رو قبلا هم اشاره کردم لیست میکنم.

برای طراح‌ها:

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

برای توسعه‌دهنده‌ها:

  • دریافت راحت متون درون طرح، رنگ‌ها، assets، استایل‌ها، فواصل، چینش‌ها و ...
  • قابلیت درگ-اند-دراپ و افزودن assets درون IDE
  • مقایسه نسخه‌های‌مختلف طرح برای متوجه شدن سریعتر تغییرات و اعمال آن‌ها
  • و ...

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



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

طراحیuiandroidios
توسعه‌دهنده وب @ esfahani.dev
شاید از این پست‌ها خوشتان بیاید