پروژه طراحی رابط کاربری باید به شکلی ایجاد شود که برنامه نویس هنگام اجرا طرح با مشکلی برخورد نکند. به همین دلیل برای کاهش دفعات اشتباه بهتر است از ابزار هنداف 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 طرح خود را به شکل کامل برای اجرا به برنامه نویسان تحویل دهید. در این قسمت از دوره تجربه کاربری و طراحی رابط کاربری آموزش دیزاین هنداف و تحویل پروژه به برنامه‌نویسان را توضیح دادیم. خوشحال می‌شویم تجربیات خود را با ما به اشترک بگذارید. همچنین اگر سوالی در مورد این مبحث داشتید از بخش دیدگاه‌ها، از متخصصین آژانس نوآوری رسام بپرسید. موفق باشید 😍
معرفی منابع و تمرین برای این جلسه
ویدئو هنداف در این جلسه را مشاهده کرده و سعی کنید با عضویت در سایت‌هایی مانند zeplin، موضوعات داخل ویدئو را تمرین کنید. چهار مقاله بسیار عالی و باکیفیت و جدید هم از این موضوع برای شما اینجا درج کرده‌ایم. آنها را عشق و شوق مطالعه کرده و هر سوالی داشتید از ما بپرسید.
https://www.interaction-design.org/literature/topics/design-handoffs
https://www.figma.com/design-handoff
https://www.uxpin.com/studio/blog/design-handoff-tools
https://blog.zeplin.io/design-delivery/design-handoff-101-how-to-handoff-designs-to-developers
36 پاسخ
سلام استاد ، وقت شما بخیر ، باز هم ممنون بابت اموزش عالی شما.
من قصد دارم برای شروع به تمرینات عملی و پروژه ای، به توصیه شما توی قدم اول از روی سایت های کار شده، طراحی انجام بدم (کپی) و مرحله بعد سایت های از صفر طراحی کنم.
شما پیشنهادی دارین از چه سایت‌هایی کپی کنم؟ توی دریبل و سایت‌های ایده یابی، فقط حالت موکاپ کار شده و اینکه ترجیح من اینه چند وقتی کنار یه شخص حرفه ای تر کار کنم (کارآموزی یا درامد کم) تا اینکه مستقل باشم، خواستم نظر شما رو بدونم.
تشکر.
درود بر شما دوست گرامی، وقت شما بخیر
چون الان به جلسه دیزاین‌هنداف رسیدید، پیشنهاد میکنم جلسه بعدی که در خصوص نمونه‌کار هست رو ببینید. آنجا گفتم که چطور پروژه‌های خوب فارسی و انگلیسی پیدا کنیم و برای تمرین مشابه آنها طراحی کنیم. برای کارآموزی هم در ویدئو دیگر آن جلسه توضیح دادیم. در سایت‌هایی مثل جابینجا میشه کارآموزی یافت. در مورد اینکه اصلا کارآموزی خوب هست یا نیست هم باز توضیحات زیادی دادیم. حتما آن جلسه که دو ویدئو دارد را مشاهده بفرمائید و بعد اگر ابهامی ماند از ما بپرسید.
موفق باشید.
یه سوال دیگه هم داشتم خدمتتون
فرق spotlight با start conversation چیه؟ و اینکه برای شروع گفت و گو اول باید ایمیلشون رو اد کنیم؟ اینو دقیقا متوجه نشدم به چه صورت هست.
درود بر شما دوست گرامی، وقت شما بخیر
قابلیت Spotlight برای این هست که افراد بتوانند اصطلاحاً صفحه ما را دنبال کنند. مثلا قصد داریم یک پرزنت آنلاین برای نفرات مختلف داشته باشیم. (مفروض بر اینکه نخواهیم صفحه خود را در گوگل میت Share کنیم). اینطوری با Spotlight افراد می‌توانند حرکت ما در صفحه را ببینند اگر دست‌کم، دسترسی Can View در فیگما داشته باشند. از این نظر خوب هست که سرعت بالا می‌رود نیازی به Screen Share در گوگل میت نیست.
موفق باشید.
سلام روز بخیر خسته نباشید
استاد چجوری باید با کامپیوتر یا لپ تاپ ویس بگیریم؟ باید حتما میکروفن بهش وصل باشه؟
درود بر شما دوست گرامی، وقت شما بخیر
خود لپتاپ میکروفون دارد. میشه بهش میکروفون قوی‌تر هم متصل کرد که کیفیت بالاتر برود.
موفق باشید.
سلام استاد وقت بخیر
input box از یک مستطیل و متن تشکیل شده
برای نام گذاری های این ها auto layout اینو به input box بزاریم کافیه یا نه لایه زیریش هم باید نامگذاری بشه
منظوری از لایه زیری همون rectangles و textهستش که دیفالت اینجوری نامگذاری میشه
درود بر شما دوست گرامی، وقت شما بخیر
خود لایه متن رو معمولا نامگذاری نمی‌کنند. چون با متن داخلش اسم می‌گیرد و ایرادی هم ندارد فارسی باشد. ولی سایر عناصر مثل frame و rectangle رو نامگذاری می‌کنند. با هوش مصنوعی فیگما هم میشه خودکار نامگذاری کرد اما در نسخه پریمیوم آن، قابل دسترس است.
موفق باشید.
سلام استاد وقتت بخیر. استاد من داخل نام گذاری صفحه‌ها یا بخش‌هایی از پروژه که می‌زنیم برای نام گذاری‌ها کم میارم. مثل کلاس‌ها داخل html css
چکار باید انجام بدم استاد؟
درود بر شما دوست گرامی، وقت شما بخیر
سپاسگزارم. یکم مهندس احتمال می‌دهم سخت می‌گیرید (شاید البته اشتباه میکنم). دیگه آنقدرها هم نباید این موضوع وقت ازتون بگیره. در واقع اصلا اشکالی هم نداره برخی لایه‌های داخلی هم‌نام باشن. مثلا فرض کنید وقتی 4 محصول داریم میشه اسامی هر 4 مورد رو بزنیم product-item. هوش مصنوعی نسخه پریمیوم فیگما یه قابلیتی داره خودش نام‌گذاری‌ها رو با هوش مصنوعی درست می‌کنه. به‌نظرم مرتب بکنید. منم مثل شما روی این موضوع حساسم. ولی خیلی هم اگر حساس بشویم از اصل موضوع ممکن است بمانیم.
موفق باشید.
سلام و احترام
بابت آموزش دقیق و با حوصله شما در جهت ارتقا دانش طراحی وب، uiux بسیار تشکر کنم. من آموزش‌های بسیاری رو می‌بینم و سعی میکنم هر روز خودم رو آپدیت کنم. این حجم از آموزش‌های خوب من رو مجدد پای یادگیری نشاند.
برای شما آرزوی سلامتی و موفقیت روز افزون را دارم.
درود بر شما دوست گرامی. وقت شما بخیر
سپاسگزارم از لطف و همراهی و مهربانی شما. شاد و سلامت باشید همیشه.
موفق باشید.
سلام وقت بخیر
ممنون از دوره بسیار عالی تون.
فایل کل پروژه این دوره رو که مربوط به طراحی سایت گلدونی هست رو از کجا باید دانلود کنیم؟
درفت که در قسمت رنگ ها هست بخشی از فایل هست.
درود بر شما. وقت بخیر
سپاس از همراهی شما. هنوز پروژه کامل رو درج نکردم. قصد داشتم بازم کاملش کنم بعد درج کنم ولی کامنت‌ها بابت این موضوع زیاد شده. بنابراین قصد دارم تا پایان همین ماه گرم و آتشین تابستان، این فایل را هم در کامیونیتی درج کنم. نهایتا بعدا آن را کامل‌تر هم خواهم کرد.
موفق باشید.
سلام استاد، تشکر می کنم به خاطر آموزش های خوبتون
1- طراح رابط کاربری موقع تحویل پروژه به به برنامه نویس آیا فایل های عکس رو باید با سایز اورجینال تحویل بده (که خیلی بزرگ هستند) یا با سایزی که در پروژه استفاده شده؟
2- برنامه نویس چطوری قسمت های منحنی که با ابزار pen طراحی شدن رو باید کدنویسی کنه؟!
3- آیکون هایی که طراح رابط کاربری استفاده کرده آیا معادل اون کتابخانه ای در کدنویسی هست؟ مثلا همین آیکون هایی که ما در پروژه استفاده کردیم رو برنامه نویس می تونه عینا همون هارو در کدنویسی استفاده کنه؟
درود بر شما رویا جان. وقت بخیر
اگر تصاویر استفاده شده در پروژه، کیفیت کافی برای استفاده در وب را دارن، همان‌ها کفایت می‌کنه. اما به طور کل، ما باید یک پوشه داشته باشیم و فایل‌ها را نگهداری کنیم که اگر لازم شد، از آنها استفاده کنیم. برنامه‌نویس می‌تواند خروجی svg بگیرد از انحناها و به‌طور کل، وکتورهایی که ایجاد شده در پروژه. بله آیکن‌هایی مثل material و FontAwesome و iconsax همگی پکیج وب هم دارند.
موفق باشید.
سلام و عرض ادب. دوره بسیار عالی بود بسیار ممنون
درود بر شما. وقت بحیر
سپاس از لطف و همراهی و مهربانی شما دوست عزیز.
موفق باشید.
سلام و عرض ادب
شما برای پرزنت پروژه در انتهای پروژه پروفایل دریبل خود را نوشتید
میخواستم بپرسم فونت انگلیسی که استفاده کردید چی هستش؟
درود بر شما، وقت بخیر
فونت Poppins هستش. نیازی به نصب ندارد و در فیگما وجود دارد. جز فونت‌های گوگل هست و به رایگان هم می‌توان آن را از سایت fonts.google.com دانلود کرد.
موفق باشید.
سلام وقت بخیر من تازه فیگما رو شروع کردم کارفرمام گفتن باید مدل انیمیشنی بهشون بدم اسلایدی نباشه سوالم اینه الان میشه همون پروتوتایپ؟ یعنی پروتوتایپ نقاط تعریف کنم ایشون خودش بره تو فیگما کلیلک کنه؟
درود بر شما. وقت بخیر
به طور کل ساختن اینترکشن و موشن در فیگما را با استفاده از پروتوتایپ (همان تب پروتوتایپ) انجام می‌دهند. برخی را نیز در کامپوننت‌ها می‌سازند که به آنها اینترکتیو کامپوننت گفته می‌شود. جلسات 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 و صرفا با استفاده از برگه‌ساز المنتور، طرح داخل فیگما را پیاده کنید. (ما داخل دوره وردپرس طرح فیگما را پیاده خواهیم کرد). این قبیل پروژه ها حرفه ای تر هستند و درآمد بیشتری را نصیب ما می‌کنند.
موفق باشید.