پروژه طراحی رابط کاربری باید به شکلی ایجاد شود که برنامه نویس هنگام اجرا طرح با مشکلی برخورد نکند. به همین دلیل برای کاهش دفعات اشتباه بهتر است از ابزار هنداف ui استفاده کنیم. در این بخش از دوره آنلاین ui ux از آژانس نوآوری رسام قصد داریم به بررسی این ابزار کاربردی بپردازیم. خوشحال میشویم تا پایان این جلسه ما را همراهی کنید.
دیزاین هنداف یا design handoff چیست و چرا باید انجام شود؟
دیزاین هنداف یعنی تحویل پروژه از طراح رابط کاربری به برنامه نویسان. البته گاهی ممکن است کارفرما خودش کاری را تحویل گرفته و در بازههای زمانی دیرتری به برنامهنویس آن را محول کند و یا از شما بخواهد در آینده، جلسهای را با برنامهنویس داشته باشید و توضیحاتی را به آنها به صورت حضوری یا آنلاین، ارائه کنید. ابزار هنداف ui شامل اشتراکگذاری اصل پروژه، assetهای پروژه مانند فونت، ویدئو و سایر فایلها و از همه مهمتر، اصولی و منظم طراحی کردن پروژه است.
عدم انجام هنداف به منزله این است که فعالیت خود در زمینه ui را کامل نکردهایم. باید توجه داشت که طراحی اصولی، فریمبندی، فاصلهگذاری صحیح، استفاده مناسب از autolayout و componentهای فیگما، باعث سهولت هنداف میشود. خب فرض کنید ما استایلگاید درست نکنیم. رنگها و تایپوگرافی را در لوکال استایلهای فیگما اضافه نکنیم و یک طراحی شلخته را تحویل برنامهنویس دهیم. این موضوع باعث اختلال و دیر اجرا شدن کار آنها میشود. پس در نتیجه، یکی از اصلیترین نکات در هنداف، طراحی مطابق با اصول ui است.
با چه ابزارهایی باید کار هنداف را انجام دهیم؟
در قدم اول همین فیگما. این نرمافزار دوست داشتنی، حتی در هنداف هم راهکارهای مناسبی دارد. با زدن روی دکمه آبی رنگ Share در بالا سمت راست صفحه هر پروژه، تصویر زیر را خواهید دید. البته توجه داشته باشید که هنداف خوب، ابتدا طراحی مبتنی بر autolayout و فاصلهگذاری دقیق را باید داشته باشد. اصولی و منظم. سپس با اشتراکگذاری پروژه، مراحل بعدی هنداف پیش میرود.
دقت کنید که به برنامه نویسان صرفا دسترسی can view بدهید. ترجیحا بخش can access روی گزینه Only people invited to this file فعال باشد. چون در این صورت است که صرفا افرادی که ایمیلشان وارد شده باشد میتوانند پروژه را ببیند. سپس روی copy link زده و لینک را برای برنامه نویسان ارسال کنید. نکته دیگر اینکه تب Publish برای انتشار پروژه در Community فیگما است و طبیعتا انتشار در آنجا به منزله این است که همه افرادی که اکانت فیگما دارند، میتوانند آن را کامل دریافت کنند.
زپلین یا Zeplin راهکاری دیگر برای هنداف پروژه
زپلین که لوگو و اسم آن برگرفته از کشتی هوایی است، ابزار هنداف ui و تحویل پروژه است. این نرمافزار تحت وب بوده و البته نسخه دسکتاپ نیز دارد. شیوه کار با آن به شکلی است که ابتدا باید در سایت zeplin.io اکانت بسازید. سپس پروژهای که قصد دارید در فیگما به زپلین برود (هنداف بشود) را باز کنید. پس از آن، پلاگین زپلین در فیگما را باز کرده و روی فریمهای خود کلیک و آن را به زپلین بفرستید. دقت کنید نسخه رایگان زپلین فقط اجازه هنداف یک پروژه را میدهد.
به دلیل دلاری بودن هزینههای این قبیل نرمافزارها، شاید در ایران کمتر زپلین مورد استفاده قرار بگیرد. (البته شرکت شما ممکن است محصولات مورد نیاز شما مانند زپلین و نسخه حرفهای فیگما را خریداری کند). بنابراین داخل ایران پیشنهاد همان استفاده از فیگما است. البته حتما در زپلین اکانت ساخته و با آن آشنا باشید. چون در پروژههای بینالمللی ممکن است بیشتر مورد استفاده قرار گیرد. افزون بر این، بهتر است همیشه از یک ابزار جایگزین، شناخت داشته باشیم.
استفاده از Dev Mode در فیگما و افزونه Figma for vscode
برنامه نویسان با فعال کردن قابلیت Dev Mode میتوانند بخشی از ساختار کد css و حتی android و ios را ببینند. دقت کنید که برنامه نویسان برای کار با فیگما، حتی با همان دسترسی can view نیز بهتر است اکانت رایگان فیگما را حداقل داشته باشند. نکته مهم دیگر این است که نرمافزار vscode به عنوان یک text editor قدرتمند که توسط خیلی از برنامه نویسان استفاده میشود، یک پلاگین یا Extension برای فیگما دارد. بدین صورت برنامه نویسان میتوانند مستقیما طرح را داخل vscode برده و در کنار کد نویسی، آن را مشاهده و استفاده کنند.
به این موضوع هم دقت داشته باشید که برنامهنویس لزوما کارشناس front نیست. ممکن است طرح با وردپرس پیادهسازی شود. ممکن است اپلیکیشن باشد و توسط برنامهنویسان swifft و یا android و یا حتی reactNative پیادهسازی بشود. این به پروژه شما و تصمیم کارفرما و برنامه نویسان بستگی دارد که آنها از چه پلتفرمهایی برای پیادهسازی و برنامه نویسی استفاده کنند.
نکته: ابزار dev mode در فیگما، از اول فوریه 2024 پولی شده است.
تحویل اصولی طرح به برنامه نویس با Design Handoff
با استفاد از ابزار هنداف ui طرح خود را به شکل کامل برای اجرا به برنامه نویسان تحویل دهید. در این قسمت از دوره تجربه کاربری و طراحی رابط کاربری آموزش دیزاین هنداف و تحویل پروژه به برنامهنویسان را توضیح دادیم. خوشحال میشویم تجربیات خود را با ما به اشترک بگذارید. همچنین اگر سوالی در مورد این مبحث داشتید از بخش دیدگاهها، از متخصصین آژانس نوآوری رسام بپرسید.
موفق باشید 😍
16 پاسخ
سلام وقت بخیر من تازه فیگما رو شروع کردم کارفرمام گفتن باید مدل انیمیشنی بهشون بدم اسلایدی نباشه سوالم اینه الان میشه همون پروتوتایپ؟ یعنی پروتوتایپ نقاط تعریف کنم ایشون خودش بره تو فیگما کلیلک کنه؟
درود بر شما. وقت بخیر
به طور کل ساختن اینترکشن و موشن در فیگما را با استفاده از پروتوتایپ (همان تب پروتوتایپ) انجام میدهند. برخی را نیز در کامپوننتها میسازند که به آنها اینترکتیو کامپوننت گفته میشود. جلسات 22 و 23 به این موضوعات پرداخته شده است.
موفق باشید.
سلام مجدد
سوال دیگری که دارم این هست که معمولا دولوپرها تفاوت ظاهری بین ساختار و چیدمان بریکپوینتهای مختلف (مثل لپتاپ و موبایل) را چطور پیاده سازی میکنند؟
درود بر شما. وقت شما بخیر
آنها از کتابخانهها و فریمورکهای مختلف استفاده میکنند. بهعنوان مثال از Bootstrap و Tailwind استفاده میکنند که خودش ساختار گرید سیستم را دارد. با تعیین کلاسهای مختلف میتوانند در css مشخص کنند که یک عنصر در Breakpoint های مختلف چه خصوصیات و اندازه و عرض و… داشته باشد.
موفق باشید.
سلام متاسفانه حالت dev پولی هست. به نظرتون ارزش خرید داره؟
درود بر شما. وقت شما بخیر
فعلا نیازی ندارید. به نظرم جلو بروید ابتدا چند نمونهکار خلق کنید. میتوانید هم نسخه پولی فیگما رو تا دو سال رایگان استفاده کنید با اهداف آموزشی. سرچ کنید نسخه education فیگما.
موفق باشید.
سلام. ممنون از آموزش خوبتون.
یک سوال بزرگ در ذهن من هست، این همه زمان گذاشته میشه و سایتی در فیگما طراحی میشه، آیا میشه همین فایل فیگما مستقیما به html تبدیل کنیم یا به نوعی با همین فیگما برنامه نویسی و خروجی نهایی گرفت؟ چون اینجوری که تا الان فهمیدم، برای طراحی کامل یک سایت، اون برنامه نویس باید دوباره همه این مراحل و طراحی ها رو دوباره انجام بدهد (مثلا در المنتور). خب یعنی برنامه فیگما یک ایده دهنده اولیه هست و طراح سایت باید دوباره از اول طراحی و برنامه نویسی کند؟
درود بر شما. وقت شما بخیر
یک سری ابزار برای این کارها وجود دارد. مثلا تبدیل طرح فیگما به المنتور و یا به کد. برخی رایگان و برخی پولی هستند. همچنین استفاده از هوش مصنوعیهای مربوط به دیزاین هم تا حدی کارها را آسانتر میکند. نمیتوان گفت که برنامهنویس فرانت درحال دوبارهکاری هست. چون این دو تخصص باهم فرق دارند. مهمتر اینکه برنامه نویس فرانت صرفاً از html-css استفاده نمیکند و مسئولیتهای زیادی همچون Javascript و فریمورکهای آن، شناخت بحث سئو، تعامل با برنامهنویس بکند، تا حدی بحث امنیت وب، کنترل ورژن و… را نیز دارند. بنابراین اینکه ابزاری باشد حتی تمام ساختار html-css را به این عزیزان تحویل بدهد باز کار آنها تمام نمیشود و کارهای دیگری نیز خواهند داشت.
در واقع موضوعی که فرمودید عمدتا برای تبدیل به html-css و حتی المنتور تا حدی شدنی هست (گاهی با ابزارهای رایگان و محدودیتدار و گاهی با پولیها). اما هنوز جای پیشرفت دارد و بهنظرم در آینده این موضوعات آسانتر خواهد شد.
موفق باشید.
سلام استاد
dev-mode برای نسخه ی پولیه؟ برای اینکه فاصله ها رو چک کنیم اگه نمیشه از dev-mode استفاده کرد از چه چیزی میتونیم استفاده کنیم؟
درود بر شما. اوایل برای مدتی رایگان بود. بعدا پولی شد در فیگما.
نرمافزار زپلین هم این کار را میکند که آن هم محدودیت هایی دارد. ما برای دیدن فواصل که مشکلی نداریم. با گرفتن دکمه alt میتوانیم فواصل اطراف و margin و padding را ببینیم. بخش dev mode بیشتر برای هنداف و پیادهسازی ساخته شده است.
موفق باشید.
درود
اول از همه بسیار سپاسگزاری میکنم از زحمات بی دریغ شما
بنده هرچی از فیگما یاد گرفتم از آموزش های عالی شما هست
سوالم این هست که dev mode چجوری فعال میشه؟ من میزنم پولیه باید اکانت رو پرفشنال کرد
درود بر شما. وقت شما بخیر
خوشحالم که مورد توجه قرار گرفته. سپاس از شما.
بله درست می فرمائید. این بخش از فیگما از اسفند پارسال پولی شده است.
موفق باشید.
سلام ممنون از آموزش خوبتون خیلی عالی بود
فقط یه مشکلی که هست چرا نمیشه پیشنمایش صفحه دکستاپ رو در قسمت پرزنت دید؟
درود بر شما، وقت بخیر
سپاس از لطف شما.
روی عنوان فریم کلیک کنید در حالت انتخاب باشد و بعد روی present و یا preview بزنید.
به طور کل پیشنمایش و مبدا آن وابسته به Flow هایی هست که در تب پروتوتایپ ساختهایم. بنابراین اگر بازم به نتیجه مطلوب نرسیدید به تب پروتوتایپ بروید، روی عنوان فریم مدنظر کلیک کنید. ابتدا Flow بسازید و بعد Preview را بزنید.
موفق باشید.
سلام
من یه سوال دارم ولی قبلش میخوام ازتون تشکر کنم بابت آموزش فوق العاده تون و انرژی و وقتی که گذاشتین و خالصانه دانشتون رو انتقال دادین. خیلی خیلی همه چی خوب بود و من تا ابد قدردان شما خواهم بود چون خیلی نیاز داشتم به این دوره. الهی که بهترین ها سر راهتون قرار بگیره.
و اما سوالم اینه که من چند ماهی میشه وردپرس رو شروع کردم و نسبتا خوب بلدمش. حالا که دارم فیگما رو یاد میگیرم چطور میتونم با وردپرس ترکیبی کارشون کنم. چطور باید طرحم رو با وردپرس پیاده کنم؟
درود بر شما. وقت بخیر
سپاس از لطف و مهربانی شما.
دوره رایگان وردپرس هم کپچر شده و این روزها مشغول تدوین آن هستم. تا شما این دوره را مرور کنید، دوره رایگان وردپرس نیز (تا یک ماه دیگر) روی سایت قرار میگیرد. البته خب شما فرمودید وردپرس رو هم به خوبی بلدید. این خیلی عالی هست. شما باید تلاش کنید با قالب HELLO و صرفا با استفاده از برگهساز المنتور، طرح داخل فیگما را پیاده کنید. (ما داخل دوره وردپرس طرح فیگما را پیاده خواهیم کرد). این قبیل پروژه ها حرفه ای تر هستند و درآمد بیشتری را نصیب ما میکنند.
موفق باشید.