چرا باید از interactive component استفاده کنیم؟
اگر خاطرتان باشد و جلسات قبل را مشاهده کرده باشید آموزش ساخت کامپوننت و واریانت در فیگما را کامل در جلسه خاص آن، توضیح دادیم. در جلسه قبل نیز با ساخت پروتوتایپ اپلیکیشن در فیگما آشنا شدید. اما نکته اینجاست که آیا می‌توانیم بین واریانت‌های خود هم اینترکشن بسازیم؟ به عنوان مثال، همان کامپوننت دکمه که ساختیم را کاری کنیم که با کلیک و یا hover تغییر رنگ و یا استایل بدهد. یا مثلا یک آکاردئون بسازیم و آن کامپوننت را کاری کنیم که با کلیک باز و بسته بشود. در این قسمت از آموزش طراحی رابط کاربری با فیگما از آژانس نوآوری رسام قصد داریم به ساخت اینتر اکتیو کامپوننت (interactive component) و واریانت بپردازیم. پس از شما دعوت می‌کنیم تا پایان این جلسه ما را همراهی کنید.
دکمه‌های رادیویی، چک‌باکس، سوئیچ باتن، فرم و هر کامپوننتی که بسازیم، نیاز به این خواهند داشت که پس از ساخت واریانت‌ها و stateهای مختلف، به صورت اینتر اکتیو کامپوننت در بیایند. شاید از خود بپرسید که آیا در جلسه قبل که آموزش تب پروتوتایپ فیگما بیان شد، نمی‌توان دکمه و یا کامپوننتی ساخت؟ پاسخ این است که عملا از همان تب استفاده میشود. اما بین آیتم‌های واریانت. در واقع می‌توان گفت چیز جدیدی اضافه نشده است. در جلسه قبل شما کامپوننت‌ها را با اتصال صفحات یا فریم‌ها به یکدیگر ساختید اما اینجا گزینه‌های واریانت را به یکدیگر متصل می‌کنید.
افزون بر این، شما با ساخت این کامپوننت‌های تعاملی جذاب، کار خود را نیز آسان‌تر کرده‌اید. در واقع شما یکبار آنها را می‌سازید و ممکن است آنها را در صفحات بسیاری استفاده کنید. به سخن دیگر، اگر منوی همبرگری خود را بسازید، از آنها در همه صفحات می‌توانید استفاده کنید و بعدا مدیریت، ویرایش و اینترکشن‌های کامپوننت مدنظر نیز آسان بوده و باعث میشود بتوانید هرجا آن منوی همبرگری که استفاده شده را ویرایش کنید. این قابلیت سرعت شما را بسیار بالا خواهد برد.
بررسی اینتر اکتیو کامپوننت به صورت کاربردی
در این قسمت از دوره طراح رابط و تجربه کاربری (ui/ux) آموزش طراحی اینتر اکتیو کامپوننت برای پروژه‌های UI و متعلقات مربوط به این دانش مهم را توضیح دادیم. خوشحال می‌شویم تجربیات خود را با ما به اشترک بگذارید. همچنین اگر سوالی در مورد این مبحث داشتید از بخش دیدگاه‌ها، از متخصصین آژانس نوآوری رسام بپرسید.
موفق باشید 😍
12 پاسخ
درود،
خیلی ممنون بابت تدریس خوبتون. بنده یک سوال برام مطرح شده اونم تو قسمت درست کردن کامپوننت از باکس بلاگ ها هستش.
چرا به جای اینکه فقط یک عدد باکس بلاگ رو برداریم و ازش کامپوننت بسازیم و بهش یه واریانت هاور اختصاص بدیم برای 3 تا باکس این کارو انجام دادیم؟
در صورتی که میتونیم فقط برای یک دونه باکس بلاگ کامپوننت درست کنیم و داخل پروژه ازش دوتا کپی بگیریم و با Auto Layout کنار همدیگه قرارشون بدیم.
ممنون
درود و سپاس از شما
وقت بخیر
چون تصاویر متفاوتی در این کامپوننت وجود داشت و از طرفی هم افکت عکس نیز در حالت هاور تغییر می‌کرد و از طرفی یکی از متغیرها تغییر تصویر بود، بنابراین 3 مورد درج کردم که بتوانم به کاربر نشان بدهم که حتی با واریانت می‌تواند تصاویر را هم تغییر بدهد.
ارادت. موفق باشید.
سلام اقای حمداللهی
ممنون از وقتی که بابت تدریس گذاشتیذ بینظیر بود چندسوال داشتم ….
ایا باید کامپوننت ها جدا جدا تکی باید ساخته بشه؟؟
کامپوننت در اخر مرحله درست میشود یا اول ؟؟
ممکنه فایلی که اخر ویدیو بود ارسال کنید برای تمرین
ممنون از شما
درود بر شما. فایل پروژه داخل کامیونیتی فیگما هست. در گوگل سرچ کنید pooya creative agency
طبیعتا کامپوننت‌ها متناسب با موضوع خودشون به صورت جدا جدا طراحی می‌شوند. مثلا چک‌باکس، دکمه‌های رادیویی، آکاردئون، فرم و…
اما گاهی ممکن است یک کامپوننت در داخل خودش از کامپوننت‌های دیگری هم استفاده کند.
کامپوننت‌ها در بازه‌های زمانی مختلفی درست می‌شوند. برخی از آنها را که مطمئنیم در پروژه لازم داریم را در ابتدا می‌سازیم. برخی را نیز بعداً متوجه نیاز آنها خواهیم شد و آن موقع می‌سازیم. حتی ممکن است به عقب برگردیم و کامپوننت‌های قبلی را ویرایش کنیم.
موفق باشید.
خیلی ممنون از پاسخگویی شما بینظیر ویدیوهای آموزشیتون استاد
سپاس از همراهی شما.
موفق باشید.
درود و وقت بخیر تمام دکمه های کیبورد رو هم میشه اینتراکشن کرد که قابلیت تایپ داشته باشه؟
درود بر شما. وقت بخیر
بله میشود. داخل کامیونیتی فیگما uikit های زیادی برای کیبوردهای اندروید و آیفون و… وجود دارد. معمولا این کارو نمی‌کنند و از همان uikit های آماده استفاده می‌کنند.
موفق باشید.
سلام وقت بخیر
ببخشید من یک کامپوننت دارم که حاوی تصویر هست. برای تصویر چطور پراپرتی بسازم تا قابلیت عوض شدن عکس را هم داشته باشه. آیا عکس را هم باید کامپوننت مجزا کنم و بعد از instance swap استفاده کنم؟
درود بر شما. وقت بخیر
بله برای تصاویر به همان شیوه‌ای که فرمودید می‌توان پراپرتی ساخت. یعنی مجزا کامپوننت بشود و سپس instance swap بشود.
موفق باشید.
سلام. قسمت create component set تو آپدیت جدید فیگما کجاس؟ چرا همه چی تغییر کرده؟ 🙁
درود بر شما. وقت بخیر
خیلی از موارد مربوط به تغییرات ظاهری و تغییر جای بخش ها هست. موضوعی که فرمودید بالا سمت راست صفحه هست. (قبلا در بالا وسط صفحه بود. در واقع به سمت راست رفته است).
موفق باشید.