چرا باید از interactive component استفاده کنیم؟
اگر خاطرتان باشد و جلسات قبل را مشاهده کرده باشید آموزش ساخت کامپوننت و واریانت در فیگما را کامل در جلسه خاص آن، توضیح دادیم. در جلسه قبل نیز با ساخت پروتوتایپ اپلیکیشن در فیگما آشنا شدید. اما نکته اینجاست که آیا می‌توانیم بین واریانت‌های خود هم اینترکشن بسازیم؟ به عنوان مثال، همان کامپوننت دکمه که ساختیم را کاری کنیم که با کلیک و یا hover تغییر رنگ و یا استایل بدهد. یا مثلا یک آکاردئون بسازیم و آن کامپوننت را کاری کنیم که با کلیک باز و بسته بشود. در این قسمت از آموزش طراحی رابط کاربری با فیگما از آژانس نوآوری رسام قصد داریم به ساخت اینتر اکتیو کامپوننت (interactive component) و واریانت بپردازیم. پس از شما دعوت میکنیم تا پایان این جلسه ما را همراهی کنید.
دکمه‌های رادیویی، چک‌باکس، سوئیچ باتن، فرم و هر کامپوننتی که بسازیم، نیاز به این خواهند داشت که پس از ساخت واریانت‌ها و stateهای مختلف، به صورت اینتر اکتیو کامپوننت در بیایند. شاید از خود بپرسید که آیا در جلسه قبل که آموزش تب پروتوتایپ فیگما بیان شد، نمی‌توان دکمه و یا کامپوننتی ساخت؟ پاسخ این است که عملا از همان تب استفاده میشود. اما بین آیتم‌های واریانت. در واقع می‌توان گفت چیز جدیدی اضافه نشده است. در جلسه قبل شما کامپوننت‌ها را با اتصال صفحات یا فریم‌ها به یکدیگر ساختید اما اینجا گزینه‌های واریانت را به یکدیگر متصل می‌کنید.
افزون بر این، شما با ساخت این کامپوننت‌های تعاملی جذاب، کار خود را نیز آسان‌تر کرده‌اید. در واقع شما یکبار آنها را می‌سازید و ممکن است آنها را در صفحات بسیاری استفاده کنید. به سخن دیگر، اگر منوی همبرگری خود را بسازید، از آنها در همه صفحات می‌توانید استفاده کنید و بعدا مدیریت، ویرایش و اینترکشن‌های کامپوننت مدنظر نیز آسان بوده و باعث میشود بتوانید هرجا آن منوی همبرگری که استفاده شده را ویرایش کنید. این قابلیت سرعت شما را بسیار بالا خواهد برد.
بررسی اینتر اکتیو کامپوننت به صورت کاربردی
در این قسمت از دوره طراح رابط و تجربه کاربری (ui/ux) آموزش طراحی اینتر اکتیو کامپوننت برای پروژه‌های UI و متعلقات مربوط به این دانش مهم را توضیح دادیم. خوشحال می‌شویم تجربیات خود را با ما به اشترک بگذارید. همچنین اگر سوالی در مورد این مبحث داشتید از بخش دیدگاه‌ها، از متخصصین آژانس نوآوری رسام بپرسید.
موفق باشید 😍
34 پاسخ
سلام استاد من توی قسمت آکاردئون‌ها همه مراحل رو مثل شما جلو رفتم ولی زمانی که میخوتم تست بگیرم تو صفحه هیج جیزی برای من نمیاره.
ممنون میشم علتش رو بهم بگین. آیا باید کار دیگه‌ای هم انجام بدم؟
درود بر شما. وقت بخیر
باید حتما فرزند کامپوننت را توی یک فریم دیگر بندازید و سپس از آن Preview بگیرید. برای درج فرزند کامپوننت می‌توان از منوی Assets هم آن را برداشت و در صفحه (فریم) مدنظر انداخت.
موفق باشید.
وقت بخیر استاد عزیز. برای مثال داخل همین صفحه شما قسمت کامنت هارو چجوری طراحی کردید که وقتی به تعداد کامنت ها اضافه میشه، کامنت ها نمیرن روی مطالب پایین تر و فوتر و هر چی پایین تر هست رو هل میدن پایین و خود فریم کل صفحه ارتفاعش بیشتر میشه.
تنها راهی که به ذهن من میرسه اینه که کل بخش های صفحه و فریم اصلی رو اتولیاوت کنیم. یا اینکه اشتباه می‌کنم؟ آیا ایردی نداره من کل فریم اصلی صفحه رو اتولیاوت کنم واسه حل این مشکل؟
درود بر شما. وقت بخیر
بله باید لایه بالاتر Auto Layout باشد. چون حتی عناصر زیرمجموعه اگر Auto Layout باشند فریم بالاتر از تغییر سایز موارد زیرمجموعه نمی‌تواند تبلیعت کند. مگر اینکه Auto Layout باشد.
موفق باشید.
سلام استاد وقتتون بخیر
یک سوال کلی داشتم می‌خواستم بدونم بجز در آیتم‌های واریانت شده و آیتم‌های بین دو صفحه مجزا دیگه در چه مواردی میشه از اینترکشن ها استفاده کرد؟
المانی دارم که برای حالت هاورش نیاز به اینترکشن ها دارم اما در دو صفحه مجزا نیستن و کامپوننت هم نیستند. آیا راه دیگه ای هم هست؟
درود بر شما. وقت بخیر
باید کامپوننت بسازید. در واقع اصلا اینترکتیو کامپوننت‌ها وجود دارند که مشکلات این چنینی حل بشود.
موفق باشید.
استاد یک سوال دیگه که از خدمتتون داشتم اینکه من درحال بازسازی و کپی طراحی یک سایتم که خودتون لطف کردید بهم معرفی کردید (صرفا جهت افزایش مهارتم در فیگما) و توی مرحله اینترکشن ساختن‌هاش، سوالی برام پیش آمد. چون من از روی خود سایت نهایی (که اجرا شدس) درحال طراحی مجدد هستم، می‌خواستم بدونم آیا تمام افکت‌ها و انیمیت‌های اعمال شده روی سایت رو با فیگما میشه درآورد؟ چون یک سری از افکت‌ها رو هرکار می‌کنم توی فیگما درنمیاد یا خیلی پیچیده است درصورتی که خب همون افکت به راحتی توی وردپرس با دوتا کلیک درمیاد. می‌خوام بدونم آیا لزوماً تمام افکت‌ها در طراحی ui و فیگما ساخته میشه؟ یا یک سری از آنها خلاقیت‌های اضافه شده‌ی اجرا کننده وردپرس هست؟
درود بر شما. وقت بخیر
بله خیلی از اینترکشن‌ها با فیگما قابل طراحی هستند. البته برخی موارد هم اگر خیلی پیچیده باشد از نرم‌افزارهایی مانند افترافکت استفاده می‌کنند. همیشه که پروژه با وردپرس پیاده نمی‌شود. ممکن است اصلا پروژه وب‌سایت نباشد. یک داشبورد مدیریتی یا یک اپ موبایل باشد.
موفق باشید.
سلام
آقای حمداللهی عزیز از شما یک خواهشی داشتم اگر امکان داره براتون این interactive component را آموزش بدید واقعا نیاز است.
Lunar Calendar (Persian Calendar) (Community)
درود بر شما. وقت بخیر
بعدا قطعا کامپوننت‌های بیشتری طراحی خواهیم کرد. قصد بروزرسانی دوره را داریم. البته در همین دوره نیز کامپوننت‌های خوبی را طراحی کرده‌ایم.
موفق باشید.
سلام استاد
ممنونم از آموزش های دقیق، منظم و عالی شما
یه سوال تو این مبحث چرا باکس‌های تعاملی که کاربر باید پر کنه با متن یا عدد مثل نام و … رو درس ندادید؟
ممنون میشم توضیح بدین
درود بر شما. وقت بخیر
متوجه نشدم منظور کدام موارد هست. هدف این جلسه آموزش Interactive Component بوده و کامپوننت‌هایی ماند چک‌باکس، دکمه‌های رادیویی، سوئیچ باتن، آکاردئون، کارت و… را گفته‌ایم. داخل پروژه برخی جاها فرم هم ساخته‌ایم. اما خب تعداد uikit هایی که در یک دیزاین سیستم ساخته میشود بیشتر از این حرفاست. ما موارد مهم و پرکاربرد را ساخته‌ایم. خصوصاً دکمه که یک جلسه به آن مفصل پرداخته‌ایم. بعدا هنگام بروز کردن دکمه، باز هم مواردی را خواهیم ساخت.
موفق باشید.
سلام استاد خوبین؟
برای کارت های بلاگ چجور باید واریانتی تعریف کنیم که بشه عکس هارو هم تغییر داد؟
درود بر شما. وقت بخیر.
در ویدئو 2 روش را توضیح داده‌ایم. اول آنکه می‌توان چند تصویر را باهم کامپوننت و سپس واریانت کرد و از فرزند آن در کامپوننت دیگر (مثلا کارت بلاگ یا محصول) استفاده کنیم. حالت دیگر این هست که کلا کارت ها را با تصاویر کامپوننت و واریانت کنیم. همین باعث میشود اولین پراپرتی ساخته شود که عوض شدن آیتم‌های کارت می‌تواند برای تصاویر به کار رود. در ویدئو همین روش دوم را استفاده کرده‌ایم و روش اول را نیز توضیح داده‌ایم.
موفق باشید.
استاد من متوجه نشدم ویدیو دوم کدوم منظورتون بود چون این جلسه یه ویدیو داره. توی روش اول وقتی عکس هارو کامپوننت و واریانت کنیم باید از این عکس ها توی کامپوننت مادر کارت ها استفاده کرد درسته؟ چون کامپوننت فرزند تعییر نمیکنه و انگار یه جورایی داریم همون روش دوم رو اجرا میکنیم.
ممنونم بخاطر پاسخگوییتون
درود بر شما. وقت بخیر
منظور 2 روش بود که در آن ویدئو بیان شده بود. یک کامپوننت می‌تواند بخشی از یک کامپوننت دیگر هم باشد و تغییر هم بکند که به آن instance swap می‌گفتیم. دقیقاً مثل چیزی که در دکمه ها ساختیم.
موفق باشید.
سلام استاد ممنون از این همه وقت و انرژی که به صورت رایگان در اختیار ما میذارید
یک سوال داشتم از خدمتتون
صرفا برای اینکه واریانت عکس‌ها رو هم بتونید بسازید، همه‌ی ایتم های بلاگ رو باهم کامپوننت کردید؟
اگر یکی از کارت های بلاگ رو کامپوننت کنیم میشه موقع استفاده ازش عکسش رو دستی تغییر بدیم؟ بدون اینکه واریانتی ازش داشته باشیم؟
یا اینکه باز باید برای تغییر عکس از حالت کامپوننت خارجش کنیم؟
درود بر شما. وقت بخیر
همه را کامپوننت کردم که تصاویر قابل تغییر باشند. البته راه دیگری هم وجود داشت. می‌توانستیم چند تصویر را از قبل کامپوننت کنیم و کپی آن (کپی از فرزند آن) را داخل کامپوننت کارت بندازیم. چنین کاری را در کامپوننت آکاردئون انجام دادیم برای ساخت گزینه‌های زیرمجموعه که برای hover شدن و تغییر رنگ، از آن استفاده کردیم. اگر تعداد تصاویر زیاد باشد راه حل دوم گزینه بهتری است.
موفق باشید.
وقت بخیر استاد عزیز خسته نباشید.ممنون بابت اموزش خوبتون. چند تا سوال در مورد این جلسه پیش اومده. پروتوتایپ هاور و پرس رو یادگرفتیم دقیقا چجوری بکشیم می‌خواستم بدونم پروتوتایپ حالت disable دکمه‌ها رو چجوری باید فلش کشید؟ یا مثلا بعضی سایت‌ها و اپلیکیشن‌ها میریم وقتی یه کاری انجام میدیم مثلا یه فرمی پر میکنیم یا یه عملیاتی رو کامل میکنیم دکمه از حالت disable خارج میشه و رنگش روشن میشه اینا چجوری درست میشن؟
سوال دوم اینه که در ساختن پروتوتایپ باکس بلاگ‌ها شما بولین درست کردید که متن رو نشون بده یا نه یا change title, change caption و… درست کردید. میشه ما این مرحله رو انجام ندیم و به جاش داخل پروژه بعد آوردن کامپوننت فرزند دوبار بزنیم رو متنش و عوضش کنیم یا حذفش کنیم؟ سوال اخرم اینه که شما یه نمونه‌ای معرفی کردید در کامیونیتی فیگما به اسم Android status & navigation bar که میزان شارژ گوشی و ساعت و میزان آنتن دهی گوشی و آنتن وای‌فای رو بالا نشون میده. موقع طراحی اپلکیشن موبایل مگه باید اینارم ما طراحی کنیم که بالای صفحه نشون داده بشن؟ مگه خود گوشی نشون نمیده اینارو؟
درود بر شما. وقت بخیر
برای Hover و Press در پروتوتایپ فیگما خودش گزینه دارد و در طول دوره زیاد انجام دادیم. خصوصا Hover رو. اما برای مواردی مانند Disable لزوماً اینترکشنی برای Hover و Press ایجاد نمی‌کنند. در واقع قرار نیست برای همه State ها Hover تعیین کنیم. مثلا Disable عمدتاً نیاز ندارد. بله میشود گزینه‌های مربوط به کامپوننت کارت را نگذاریم و در پروژه وارد کنیم. اما در پروژه‌های بزرگ که تعداد صفحات زیاد است، این موارد لازم است. چون تعداد کارت‌ها خیلی زیاد میشود. در خصوص Status و Navigation الزامی نیست. می‌توانیم نگذاریم. اما درج آن باعث پرزنت بهتر آن اپلیکیشن خواهد شد. نیازی به طراحی ندارند و می‌توانید از کامپوننت آماده آن چه برای آیفون و چه برای اندروید استفاده کنید که فایل آن داخل کامیونیتی هست و در پروژه اپلیکیشن، معرفی کردیم.
موفق باشید.
سلام استاد. وقت بخیر
hover کردن رو تمام مراحلش رو درست انجام دادم اما نه واسه ی button کار میکنه و نه واسه ی اون قسمت سه تایی مقالات… بنظرتون مشکل کجاست؟؟؟ 🙁
درود بر شما. وقت بخیر
اگر دکمه به صورت کامپوننت شده، حتما باید داخل واریانت فلش‌های پروتوتایپ را متصل کرد. همچنین عناصر داخل واریانت همگی باید جداگانه کامپوننت شده باشند. یک مسئله مهم دیگر این است که مثلا زمانی که یک چک‌باکس هاور میشود، بخش‌های زیرمجموعه یا stateها حتما باید یک تکه باشند. مثلا آن دکمه حتی اگر از عناصر مختلفی مثل آیکن و متن و… تشکیل شده، در نهایت state آن باید یکپارچه باشد. مثلا فریم یا Autolayout باشد.
موفق باشید.
سلام. قسمت create component set تو آپدیت جدید فیگما کجاس؟ چرا همه چی تغییر کرده؟ 🙁
درود بر شما. وقت بخیر
خیلی از موارد مربوط به تغییرات ظاهری و تغییر جای بخش ها هست. موضوعی که فرمودید بالا سمت راست صفحه هست. (قبلا در بالا وسط صفحه بود. در واقع به سمت راست رفته است).
موفق باشید.
سلام وقت بخیر
ببخشید من یک کامپوننت دارم که حاوی تصویر هست. برای تصویر چطور پراپرتی بسازم تا قابلیت عوض شدن عکس را هم داشته باشه. آیا عکس را هم باید کامپوننت مجزا کنم و بعد از instance swap استفاده کنم؟
درود بر شما. وقت بخیر
بله برای تصاویر به همان شیوه‌ای که فرمودید می‌توان پراپرتی ساخت. یعنی مجزا کامپوننت بشود و سپس instance swap بشود.
موفق باشید.
درود و وقت بخیر تمام دکمه های کیبورد رو هم میشه اینتراکشن کرد که قابلیت تایپ داشته باشه؟
درود بر شما. وقت بخیر
بله میشود. داخل کامیونیتی فیگما uikit های زیادی برای کیبوردهای اندروید و آیفون و… وجود دارد. معمولا این کارو نمی‌کنند و از همان uikit های آماده استفاده می‌کنند.
موفق باشید.
خیلی ممنون از پاسخگویی شما بینظیر ویدیوهای آموزشیتون استاد
سپاس از همراهی شما.
موفق باشید.
سلام اقای حمداللهی
ممنون از وقتی که بابت تدریس گذاشتیذ بینظیر بود چندسوال داشتم ….
ایا باید کامپوننت ها جدا جدا تکی باید ساخته بشه؟؟
کامپوننت در اخر مرحله درست میشود یا اول ؟؟
ممکنه فایلی که اخر ویدیو بود ارسال کنید برای تمرین
ممنون از شما
درود بر شما. فایل پروژه داخل کامیونیتی فیگما هست. در گوگل سرچ کنید pooya creative agency
طبیعتا کامپوننت‌ها متناسب با موضوع خودشون به صورت جدا جدا طراحی می‌شوند. مثلا چک‌باکس، دکمه‌های رادیویی، آکاردئون، فرم و…
اما گاهی ممکن است یک کامپوننت در داخل خودش از کامپوننت‌های دیگری هم استفاده کند.
کامپوننت‌ها در بازه‌های زمانی مختلفی درست می‌شوند. برخی از آنها را که مطمئنیم در پروژه لازم داریم را در ابتدا می‌سازیم. برخی را نیز بعداً متوجه نیاز آنها خواهیم شد و آن موقع می‌سازیم. حتی ممکن است به عقب برگردیم و کامپوننت‌های قبلی را ویرایش کنیم.
موفق باشید.
درود،
خیلی ممنون بابت تدریس خوبتون. بنده یک سوال برام مطرح شده اونم تو قسمت درست کردن کامپوننت از باکس بلاگ ها هستش.
چرا به جای اینکه فقط یک عدد باکس بلاگ رو برداریم و ازش کامپوننت بسازیم و بهش یه واریانت هاور اختصاص بدیم برای 3 تا باکس این کارو انجام دادیم؟
در صورتی که میتونیم فقط برای یک دونه باکس بلاگ کامپوننت درست کنیم و داخل پروژه ازش دوتا کپی بگیریم و با Auto Layout کنار همدیگه قرارشون بدیم.
ممنون
درود و سپاس از شما
وقت بخیر
چون تصاویر متفاوتی در این کامپوننت وجود داشت و از طرفی هم افکت عکس نیز در حالت هاور تغییر می‌کرد و از طرفی یکی از متغیرها تغییر تصویر بود، بنابراین 3 مورد درج کردم که بتوانم به کاربر نشان بدهم که حتی با واریانت می‌تواند تصاویر را هم تغییر بدهد.
ارادت. موفق باشید.