یک صفحه اپلیکیشن موبایل یا سایت زمانی اهمیت پیدا می‌کند که با المان‌های مختلف ما را به صفحات دیگر منتقل کند. در این صورت می‌توانیم به خدمات یا صفحه موردنظر خود دسترسی پیدا کنیم. برای مثال وقتی اطلاعات ورود خود را وارد میکنیم و روی دکمه Login کلیک میکنیم باید به صفحه دیگری منتقل شویم تا بتوانیم نیاز خود را برطرف کنیم. این عملیات با استفاده از پروتوتایپ امکان‌پذیر است. در این قسمت از دوره طراحی رابط و تجربه کاربری ui ux از آژانس نوآوری رسام قصد داریم پروتوتایپ اپلیکیشن موبایل را مورد بررسی قرار دهیم. خوشحال می‌شویم تا پایان این جلسه ما را همراهی کنید.
واژه پروتوتایپ در فیگما، 2 مفهوم متفاوت دارد
تا الان ما یک بار واژه پروتوتایپ را با مفهوم طراحی low fidelity و اضافه کردن جزئیات به پروژه، بیان کردیم. اما در فیگما و به طور کل در ui، واژه پروتوتایپ، مفهوم دیگری هم دارد که آن هم اتصال صفحات و ساخت interaction هست. در سمت راست محیط داخلی نرم‌افزار فیگما 2 تب وجود دارد که design و prototype هستند. تا جلسه امروز عمده آموزش ما در تب دیزاین بود. اما بحث امروز تب پروتوتایپ است.
حالا موضوع این تب چیست؟ در واقع در این تب هست که شما صفحات و فریم‌های خود را به یکدیگر متصل میکنید. البته شما بین واریانت‌های خود نیز می‌توانید پروتوتایپ بسازید که همان بحث جلسه بعدی یعنی interactive components است. فرض کنید در نرم‌افزار اسنپ روی یک غذا کلیک میکنید. اسکرول می‌شود وسط صفحه، یا مثلا روی منوی همبرگری اپلیکیشن تلگرام کلیک میکنید و یک منو با حالت Drawer باز می‌شود. یا روی دکمه‌ای کلیک میکنید تا از صفحه‌ای به صفحه دیگر بروید. همه این ها با تب پروتوتایپ ساخته می‌شود.
آیا تب پروتوتایپ صرفا برای طراحی اپلیکیشن موبایل است؟
قطعا نه. درست است که اپلیکیشن (گاهی) موبایل ممکن است صفحات بیشتری داشته باشد. اما این به این معنی نیست که برای موضوعات دیگر نمی‌توان اینترکشن و انیمیشن بسازیم. شما برای همه سبک پروژه‌ای می‌توانید با استفاده از این خطوط طلایی پروتوتایپ فیگما، اینترکشن‌های جذاب و در عین حال، کاربردی و مناسب بسازید. البته موضوع محتوای ویدئویی این جلسه نیز اپلیکیشن موبایل انتخاب شده است. زیرا صرف‌نظر از پروژه وب‌سایتی که انجام داده‌ایم، در پایان این دوره، بتوانید روی موضوعات مربوط به اپلیکیشن موبایل نیز کار کنید.
من یک راهنمای تصویری پروتوتایپ فیگما برای شما می‌گذارم. هم آموزش تصویری و هم ویدئو به زبان اصلی در سایت خود فیگما. در ویدئو همین جلسه نیز مفصل بخش تب پروتوتایپ در فیگما + یک پروژه پروتوتایپ اپلیکیشن موبایل، اجرا شده است که حتما آن را مشاهده و سوالات احتمالی خود را از ما بپرسید.
فایل تمرین پروژه همراه تاکسی
در کامیونیتی فیگما و به طور کل در اینترنت، فایل‌های طراحی شده بسیار زیادی وجود دارد که می‌توان از آنها برای تمرین استفاده کرد. فروشگاه، وب‌سایت، اپلیکیشن و هر موضوع دیگری را شامل می‌شود. اما فایل پروژه این جلسه نیز اینجا درج می‌شود تا در صورت تمایل از آن استفاده کنید.
ارتباط صفحات با یکدیگر از طریق پروتوتایپ
با استفاده از پروتوتایپ در اپلیکیشن موبایل می‌توانیم به صفحات مختلفی منتقل شویم تا به صفحات مدنظر دسترسی پیدا کنیم. در این قسمت از دوره طراح رابط و تجربه کاربری (ui/ux) آموزش بخش پروتوتایپ در فیگما + پروتوتایپ یک پروژه اپلیکیشن موبایل را توضیح دادیم. خوشحال می‌شویم تجربیات خود را با ما به اشترک بگذارید. همچنین اگر سوالی در مورد این مبحث داشتید از بخش دیدگاه‌ها، از متخصصین آژانس نوآوری رسام بپرسید.
موفق باشید 😍
24 پاسخ
استاد چند تا سوال داشتم
اول اینکه ما توی فیگجم یک بار پروتوتایپ رو طراحی میکنیم توی دیزاین هم یه بار اینجور تایم نمیگیره؟ چون من این پروژه رو که برامون گذاشته بودید قسمت همراه تاکسیش رو تکمیل کردم و انگار یه خورده زمانبره.
دوم اینکه توی یک پروژه ما باید تک تک صفحات مورد نیاز پروتوتایپ رو طراحی کنیم؟ مثلا توی همین پروژه اگر کسی لغو سفر زد یه overelay بیاد که تایید کنه یا انصراف بده از لغو سفر. یا اون سه نقطه هایی که توی صفحه ادرس های منتخب هست یه اورلی داشته باشه برای حذفش، همه اینارو ما باید طراحی کنیم؟
چیکار کنیم که جا نندازیم این طراحی هارو و چیکار کنیم که سریعتر بشه اخه حس میکنم خیلییی میشه
درود بر شما. وقت بخیر
در فیگجم پروتوتایپ طراحی نمی‌کنیم. حتی وایرفریم هم طراحی نمی‌کنیم. فیگجم برای طراحی فرآیند و یوزرفلو، چارت و نمودار، دیاگرام و… هست. بله همه صفحات را باید طراحی کنیم. مثلا نرم‌افزار اسنپ صفحات مختلف و Overlay های مختلف دارد. هرجای نرم‌افزار که دیده می‌شود را باید طراحی کنیم. افزون بر این، قسمت مدیریتی و داشبورد آنها هم ui دارد و آنها نیز طراحی شده است. برای اینکه جا نیفتد باید فرآیند تجربه کاربری کامل اجرا بشود. مثلا باید قبل از ui فرآیند تحقیق انجام شده و در معماری اطلاعات باید userflow و مسیرها را ساخته باشیم که براساس آنها بعداً در ui بتوانیم وایرفریم و پروتوتایپ بسازیم تا چیزی از قلم نیفتد.
موفق باشید.
سلام استاد وقتتون بخیر
توی پروژه که داشتم تمرین میکردم پروتوتایپ صفحه جستجوی راننده رو داشتم می‌ساختم به یک سوال برخوردم. سعی کردم دوتا after delay بزارم که یکیش به صفحه پیدا شدن راننده بره و یکیش به صفحه پیدا نشدن راننده اما دوتا رو قبول نمیکنه. می‌خواستم ببینم چیکار باید کرد؟ شرطی چیزی میشه تعریف کرد؟
درود بر شما. وقت بخیر
پروتوتایپ‌های شرطی در نسخه پولی فیگما هستند. اما در این مورد نیازی به دو مورد نیست. یک مورد را متصل میکنیم با کلیک به صفحه بعدی برود و یک مورد را هم با After Delay می‌توانیم تنظیم کنیم.
موفق باشید.
وقت بخیر استاد خسته نباشید. در مورد این جلسه چند تا سوال داشتم.
سوال اول: چجوری کیبورد رو درست کنیم قابلیت باز و بسته شدن داشته باشه؟ ینی کیبورد که باز شد و شماره رو وارد کردیم، بدون پاک شدن شماره بزنیم کیبورد بسته بشه و بعدش دکمه عضویت رو بزنیم بره صفحه بعد.
سوال دوم: بعد انتخاب وسیله نقلیه و ثبت درخواست رفت به پیج جستجوی وسیله نقلیه. بعدش شما گزینه عجله دارم رو زدید رفت به پیجی که وسیله نقلیه پیدا شده. سوال اینه که اگه یکی گزینه عجله دارم رو نزنه چجوری قراره بره پیجی که خودرو پیدا شده؟
شاید بگید صفحه wait رو میزاریم رو after delay در این صورت باید رو چند ثانیه بزاریم؟ چون نمیدونیم که وسیله بعد چند دقیقه جستجو قراره پیدا بشه.
سوال سوم: میشه به صورت شرطی اینتراکشن کشید؟ مثلا اگه ماشین پیدا شد منتقل شه به پیجی که خودرو پیدا شده. اگه خودرو پیدا نشد بره به پیجی که میگه خودرو پیدا نشد. اینارو چجوری باید فلش اینتراکشن بکشیم؟
سوال چهارم: اپلیکیشن رو میشه مثل حالت وب با ارتفاع زیاد درست که اسکرول کنیم بیاد پایین و از گزینه scroll to هم استفاده نکنیم؟ فقط با دست اسکرول کنیم
سوال اخر: اپلیکشن هایی مثل اینستاگرام رو چجوری طراحی میکنن که هر چی اسکرول میکنیم پایین هی اضافه میشه و تموم نمیشه؟ ما که نمیونیم تا بینهایت ارتفاع بدیم 🙁
درود بر شما. وقت بخیر
حالت باز و بسته شدن کیبورد را در قسمت Smart Anmate در همین ویدئو توضیح داده‌ایم. می‌توان برای هر حالت باز شدن کیبورد، وارد شدن متن و… Afer Delay بگذاریم اگر قرار نیست با کلیک یا عملکرد کاربر، کار صورت گیرد.
برای صفحه‌ای که گزینه “عجله‌دارم” وجود دارد، می‌توان دو اینترکشن تنظیم کرد که یکی از آنها با Afer Delay و بدون اینکه دکمه را کاربر بزند، وارد صفحه بعدی بشود. عدد خاصی وجود ندارد. نرم‌افزار پیاده‌سازی نشده است و کاربر واقعی هم که وجود ندارد که بپرسم اسنپ رسیده است یا خیر. یک مقدار می‌گذاریم. مثلا پنج ثانیه.
اینترکشن‌های شرطی در نسخه پولی فیگما وجود دارد.
بله هم می‌توان اپلیکیشن با اسکرول باشد و هم ممکن است محتوای صفحه کم باشد و بدون اسکرول تکلیف آن صفحه مشخص شود. مثل اسنپ فود که اسکرول می‌خورد و انواع محصولات را با اسکرول کردن می‌توان داخل اپلیکیشن بررسی کرد و دید.
مورد آخر مشابه همان گزینه “عجله‌دارم” بود. خب پس چه کار کنیم به نظرتان؟ آیا بیاییم همه عکس‌های اکسپلور اینستاگرام را آپلود کنیم در فیگما که بتوانیم طراحی کنیم؟ یا فرض کنید قرار است نقشه گوگل بگذارید. یعنی می‌خواهید نقشه کل دنیا را در فیگما بیاورید؟ نرم‌افزار در فاز طراحی است. پیاده‌سازی هنوز نشده. بنابراین مثلا برای همان اینستاگرام وقتی یک لودینگ هم می‌گذاریم برنامه‌نویس متوجه می‌شود که اسکرول می‌خورد.
موفق باشید.
سلام و خسته نباشید. استاد یه سوال کلی داشتم.
ما اگر بخوایم از یه آیکن استفاده بکنیم فرمودین باید اون رو در یه فضای مربعی (نامریی) 48 در 48 بندازیم؟ از نظر سایز انگشت عموم افراد؟ هم در اپ هم در وب؟
درود بر شما. وقت بخیر
بله دقیقا همانطور هست که فرمودی. در واقع اندازه استاندارد متریال دیزاین هست. آیکن 24 پیکسل و از هر 4 طرف هم 12 پیکسل پدینگ. این کار باعث می‌شود دکمه‌های کنار هم خیلی راحت‌تر کلیک شوند. برخی افراد ممکن است لرزش دست، کم‌بینایی، ناخن کاشته شده بلند و… داشته باشند که اگر دکمه‌ها خیلی کوچک و بدون فاصله (پدینگ) باشند عملا انگار که دو دکمه کنار هم کلیک می‌شوند. اگر بخواهیم با منطق لقمان حکیم پیش برویم، بهتر است یک فاجعه بزرگ رو معرفی کنم ببینی. سایت باشگاه خبرنگاران جوان را با گوشی باز کن. سه آیکن اون بالا هست. بهم چسبانده آن هم سه آیکن مهم و پرکاربرد. ببین که در واقع چقدر کار کردن با آن سه آیکن برای مردم دشوار خواهد بود.
در واقع انگشت سبابه یا همان انگشت اشاره انسان (بند اول‌اش) حدودا یک سانتی‌متر هست (بین انسان‌های مختلف متفاوت است قاعدتا می‌دانم) اما حدود 48 پیکسل تعیین شده تقریبا اندازه همان یک سانت در یک سانت هست و این باعث می‌شود عمده کاربران با سهولت بیشتری این موضوع را درک کنند. (راحت‌تر کلیک کنند). اگر دوست داشتی موضوعات مربوط به جلسه دسترسی‌پذیری را باز هم ببین و یا سایت pwcag.ir رو مشاهده بفرما و مطالب‌اش رو بخون. یک کانال یوتیوب هم دارن که خیلی خوب این موضوعات رو پوشش داده‌اند.
موفق باشید.
ممنون استاد گرانقدر از توضیح کاملتون. سایت باشگاه خبرنگاران جوان رو هم دیدم واقعا فاجعه بود و در ذهن من اهمیت این موضوع حک شد. تشکر
درود بر شما. وقت بخیر
عالی پیش می‌روید. تبریک به شما.
موفق باشید.
سلام استاد. خسته نباشید.
اون صفحه ای که scroll میکنید رو نذاشتید داخل پروژه؟ مثلا در مورد همین تاکسی کجا scroll کنیم؟
درود بر شما. وقت شما بخیر
نیازی نبود. اون بجث ساده‌ای هست. همین که ارتفاع فریم رو بیشتر کنیم می‌توانیم موارد fixed و scroll و sticky رو مطابق ویدئو هر جا نیاز بود تنظیم کنیم.
موفق باشید.
سلام
این پروتوتایپ ها رو برای وب هم باید طراحی بکنیم؟
همچنین برای نمونه کار فقط home page باید طراحی بشه یا صفحه های دیگری هم باید طراحی بشه؟ اگه صفحه های دیگه ای هم هست بیزحمت بگید ممنون
درود بر شما. وقت بخیر
برای همه صفحات سایت باید طرح ui بزنیم. صفحه اصلی صرفاً یکی از صفحات سایت است. پروتوتایپ کردن (ساختن انیمیشن‌ها و انتقال‌های بین صفحات) صرفاً مختص موبایل نیست. در پروژه‌های وب هم هست. در اپلیکیشن موبایل این موضوع بیشتر است.
موفق باشید.
سلام وقتتون بخیر من فایل تاکسی همراه رو که ایمپورت کردم فقط کاور فایل نشان داده میشه. صفحات اپلیکشن تاکسی همراه رو از کجا میتونم پیدا کنم؟ ممنون
درود بر شما. وقت بخیر
فایل چند صفحه دارد. در واقع سه صفحه دارد. سایر صفحات را هم ببینید.
موفق باشید.
سلام اقای حمداللهی من فایل تاکسی همراه نمیتونم ایمپورت کنم ارور میده از داخل فیگما نمیشه
درود بر شما. وقت بخیر
گاهی فیگما موقع ایمپورت کردن کمی اذیت می‌کند. البته که واقعا فیگما بی‌گناه هست. اینترنت داخل ایران هست که اذیت می‌کند 😭 یکبار با vpn هم تست کنید. خود فایل که مشکلی ندارد و من بارها آنرا ایمپورت کردم. اما برای من هم گاهی پیش آمده حتی فایل‌های سبک‌تر از این فایل مدنظر نیز کمی با دشواری آپلود بشوند. بنابراین در زمان دیگری تست بفرمایید قطعا مشکل حل می‌شود. یا مثلا با مرورگر دیگری تست بفرمائید.
موفق باشید.
سلام وقت بخیر. اونجایی که فرمودین ایتم ها رو انتخاب کنید و راست کلیک کنید و گزینه ی remove interactions رو بزنید، این گزینه وقتی من کلیک میکنم وجود نداره!
درود بر شما. وقت بخیر
دقت کنید که این گزینه فقط زمانی در کلیک راست رویت می‌شود که در تب prototype باشید. (بالا سمت راست دو تا تب دارید. دیزاین و پروتوتایپ).
و دیگر آنکه روی محیط خالی کلیک راست کنید.
موفق باشید.
سلام وقتتون بخیر ممنونم بابت آموزش کاملتون . من یه سوال داشتم از خدمتتون برای پرتوتایپ گزینه move in /push/slide in … خاموش هستن در چه صورتی این گزینه ها فعال میشن؟
درود بر شما. وقت شما بخیر
زمانی که روی حالت overlay هستیم گزینه‌ها محدودتر هستند. احتمالا پروتوتایپ مقصد به صورت overlay است.
موفق باشید.
سلام جناب حمداللهی عزیز و گرامی
امکانش هست فایل این تاکسی رو بزارین برای تمرین؟ من تو کامنیوتی فیگما هرچی زدم تاکسی همراه نمیاره
درود بر شما دوست گرامی، وقت بخیر و عرض ادب
بروی چشم. در همین جلسه فایل دانلود آن درج شد. پس از دانلود، آنرا ایمپورت و استفاده کنید.