دیزاین هنداف و تحویل پروژه

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

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

دیزاین هنداف یا design handoff چیست و چرا باید انجام شود؟

دیزاین هنداف یعنی تحویل پروژه از طراح رابط کاربری به برنامه نویسان. البته گاهی ممکن است کارفرما خودش کاری را تحویل گرفته و در بازه‌های زمانی دیرتری به برنامه‌نویس آن را محول کند و یا از شما بخواهد در آینده، جلسه‌ای را با برنامه‌نویس داشته باشید و توضیحاتی را به آن‌ها به صورت حضوری یا آنلاین، ارائه کنید. ابزار هنداف ui شامل اشتراک‌گذاری اصل پروژه، assetهای پروژه مانند فونت، ویدئو و سایر فایل‌ها و از همه مهم‌تر، اصولی و منظم طراحی کردن پروژه است.

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

بررسی قابلیت هنداف در طراحی ui

با چه ابزارهایی باید کار هنداف را انجام دهیم؟

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

دقت کنید که به برنامه نویسان صرفا دسترسی can view بدهید. ترجیحا بخش can access روی گزینه Only people invited to this file فعال باشد. چون در این صورت است که صرفا افرادی که ایمیل‌شان وارد شده باشد می‌توانند پروژه را ببیند. سپس روی copy link زده و لینک را برای برنامه نویسان ارسال کنید. نکته دیگر اینکه تب Publish برای انتشار پروژه در Community فیگما است و طبیعتا انتشار در آنجا به منزله این است که همه افرادی که اکانت فیگما دارند، می‌توانند آن را کامل دریافت کنند.

ابزار هنداف ui

زپلین یا Zeplin راهکاری دیگر برای هنداف پروژه

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

استفاده از نرم افزار زپلین برای هنداف پروژه ui

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

استفاده از Dev Mode در فیگما و افزونه Figma for vscode

برنامه نویسان با فعال کردن قابلیت Dev Mode می‌توانند بخشی از ساختار کد css و حتی android و ios را ببینند. دقت کنید که برنامه نویسان برای کار با فیگما، حتی با همان دسترسی can view نیز بهتر است اکانت رایگان فیگما را حداقل داشته باشند. نکته مهم دیگر این است که نرم‌افزار vscode به عنوان یک text editor قدرتمند که توسط خیلی از برنامه نویسان استفاده می‌شود، یک پلاگین یا Extension برای فیگما دارد. بدین صورت برنامه نویسان می‌توانند مستقیما طرح را داخل vscode برده و در کنار کد نویسی، آن را مشاهده و استفاده کنند.

افزونه Figma for vscode برای بررسی کدها در طرح فیگما

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

نکته: ابزار dev mode در فیگما، از اول فوریه 2024 پولی شده است.

تحویل اصولی طرح به برنامه نویس با Design Handoff

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

5/5 - (1 امتیاز)

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

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

سایر جلسات این دوره

متخصصین آژانس نوآوری رسام
فرم درخواست پروژه و مشاوره
تماس با کارشناسان رسام: 09351436045