انیمیشن و اینترکشن در ui و فیگما

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

واژه پروتوتایپ در فیگما، 2 مفهوم متفاوت دارد

تا الان ما یک بار واژه پروتوتایپ را با مفهوم طراحی low fidelity و اضافه کردن جزئیات به پروژه، بیان کردیم. اما در فیگما و به طور کل در ui، واژه پروتوتایپ، مفهوم دیگری هم دارد که آن هم اتصال صفحات و ساخت interaction هست. در سمت راست محیط داخلی نرم‌افزار فیگما 2 تب وجود دارد که design و prototype هستند. تا جلسه امروز عمده آموزش ما در تب دیزاین بود. اما بحث امروز تب پروتوتایپ است.

حالا موضوع این تب چیست؟ در واقع در این تب هست که شما صفحات و فریم‌های خود را به یکدیگر متصل می‌کنید. البته شما بین واریانت‌های خود نیز می‌توانید پروتوتایپ بسازید که همان interactive components است که در ویدئو دوم به آن پرداخته شده است. فرض کنید در نرم‌افزار اسنپ روی یک غذا کلیک می‌کنید. اسکرول می‌شود وسط صفحه، یا مثلا روی منوی همبرگری اپلیکیشن تلگرام کلیک می‌کنید و یک منو با حالت Drawer باز می‌شود. یا روی دکمه‌ای کلیک می‌کنید تا از صفحه‌ای به صفحه دیگر بروید. همه این ها با تب پروتوتایپ ساخته می‌شود.

آیا تب پروتوتایپ صرفا برای طراحی اپلیکیشن موبایل است؟

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

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

چرا باید از interactive component استفاده کنیم؟

اگر خاطرتان باشد و جلسات قبل را مشاهده کرده باشید آموزش ساخت کامپوننت و واریانت در فیگما را کامل در جلسه خاص آن، توضیح دادیم. اما نکته اینجاست که آیا می‌توانیم بین واریانت‌های خود هم اینترکشن بسازیم؟ به عنوان مثال، همان کامپوننت دکمه که ساختیم را کاری کنیم که با کلیک و یا hover تغییر رنگ و یا استایل بدهد. یا مثلا یک آکاردئون بسازیم و آن کامپوننت را کاری کنیم که با کلیک باز و بسته بشود.

دکمه‌های رادیویی، چک‌باکس، سوئیچ باتن، فرم و هر کامپوننتی که بسازیم، نیاز به این خواهند داشت که پس از ساخت واریانت‌ها و stateهای مختلف، به صورت اینتر اکتیو کامپوننت در بیایند. شاید از خود بپرسید که آیا در جلسه قبل که آموزش تب پروتوتایپ فیگما بیان شد، نمی‌توان دکمه و یا کامپوننتی ساخت؟ پاسخ این است که عملا از همان تب استفاده می‌شود. اما بین آیتم‌های واریانت. در واقع می‌توان گفت چیز جدیدی اضافه نشده است. در جلسه قبل شما کامپوننت‌ها را با اتصال صفحات یا فریم‌ها به یکدیگر ساختید اما اینجا گزینه‌های واریانت را به یکدیگر متصل می‌کنید.

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

فایل تمرین پروژه همراه تاکسی

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

دانلود پروژه همراه تاکسی

ساخت اینترکشن و ارتباط صفحات با یکدیگر از طریق پروتوتایپ

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

معرفی منابع و تمرین برای این جلسه

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

https://www.uxpin.com/studio/blog/interaction-design-its-origin-and-principles
https://www.uxpin.com/studio/blog/what-is-a-prototype-a-guide-to-functional-ux