یک صفحه اپلیکیشن موبایل یا سایت زمانی اهمیت پیدا می‌کند که با المان‌های مختلف ما را به صفحات دیگر منتقل کند. در این صورت می‌توانیم به خدمات یا صفحه موردنظر خود دسترسی پیدا کنیم. برای مثال وقتی اطلاعات ورود خود را وارد میکنیم و روی دکمه 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
80 پاسخ
سلام
من 3 تا واریانت ساختم که تو هرکدوم یه باتن هست که وصل میشه ب یک پیج
ولی وقتی مثلا یکی از باتن ها را به پیج وصل میکنم نمیتونم توی واریانت دیگری اون باتن رو به ی پیج دیگه وصل کنم
چون به اون قبلیه وصله چیکار کنم
باتشکر
درود بر شما دوست گرامی، وقت شما بخیر
نباید عناصر زیرمجموعه یک Interactive Component را مستقیم به صفحات دیگر وصل کنیم. در واقع شما Interactive Component که ساختید، باید از پنل Asset بچه‌اش رو بندازید در صفحه مدنظر. بعد آن را اگر خواستید به صفحه‌ای وصل کنید. اینطوری هر تعداد واریانت را می‌توان استفاده کرد. چون از خود Main Component که نبایستی مستقیم استفاده کنیم.
موفق باشید.
سلام. روزتون بخیر.
پروژه همراه تاکسی فقط دانلود میشه و من نمیتونم توی فیگما بازش کنم. هم با Firefox امتحان کردم، هم Google. بعد از دنلود پروژه وقتی میخواد باز کنه Error میده که save یا open من هرکاری میکنم باز نمیشه.
باید چیکار کنم؟
درود بر شما دوست گرامی، وقت شما بخیر
چون فایل fig هست حتما بایستی در فیگما آپلود بشود. (با دابل کلیک باز نمی‌شود). اگر ایمپورت کردید و باز هم باز نشده، حتما نسخه تحت وب و نسخه دسکتاپ رو هم تست کنید هر دو را. یا مثلا با VPN روشن هم تست کنید. حجم زیادی ندارد. من هر موقع آپلود کردم مشکلی نبوده.
موفق باشید.
درود بر شما استاد گرامی
فرض کنیم بخوایم یه کارت محصول داشته باشیم … دارای یه عکس و کپشن و توضیحات … بعد هر وقت روی عکس یا خود فریم کلی کارت، هاور میکنیم، عکسش عوض بشه.
پیشنهاد شما چیه؟
درود بر شما دوست گرامی، وقت شما بخیر
می‌توانیم اصطلاحاً Flip Box بسازیم که وقتی Hover شد، کارت برمی‌گردد (فلیپ می‌شود). من قبلا در فیگما این رو ساختم اما در ویدئوها نیست. سرچ کنید ویدئوش هست در اینترنت و یوتیوب. البته من زیاد ازش استفاده نمی‌کنم. چون در گوشی Hover نداریم و ممکن است کاربر نداند که باید کلیک کند.
موفق باشید.
سلام استاد وقتتون بخیر
برای قسمت fixed , sticky , scorll چرا من وقتی میخوام نویگشن بار رو پایین صفحه فیکس کنم نمیشه؟ اصلا نشونش نمیده.
درود بر شما دوست گرامی، وقت شما بخیر
این را در نظر باید گرفت که تغییر این گزینه، منوط به این هست که فریم انتخابی مدنظر که قصد دارید فیکس یا استیکی بشود، باید در سطح پروژه باشد (زیرمجموعه فریم دیگری نباشد).
موفق باشید.
سلام استاد وقتتون بخیر خسته نباشید
اول اینکه خیلی ممنون از آموزش و محتوای با کیفیتتون
دوم اینکه یه سوالی داشتم بهتر نبود که برای جابجایی صفحه از wait به select-vehicle از تریگر after delay استفاده کنیم بجای اینکه برای گزینه “عجله دارم” از تریگر on tap استفاده کنیم که وارد صفحه select-vehicle بشه؟ البته امیدوارم منظورمو درست بهتون رسونده باشم
درود بر شما دوست گرامی، وقت شما بخیر
سپاس از لطف و همراهی شما. چون دکمه عجله دارم ظاهری شبیه دکمه داشت من اونو میخواستم حتما یک اینترکشن براش بسازم. موردی که شما فرمودید هم به نظر من صحیح است.
موفق باشید.
سلام استاد عزیز خسته نباشید
فقط من تفاوت تریگر pressed و mouse down , up رو نفهمیدم.
درود بر شما دوست گرامی، وقت شما بخیر
استفاده از press برای اجرای اکشن‌های لمسی یا نمایش استیت‌های «فشار داده شده» کاربرد دارد. Mouse Down دقیقاً در لحظه فشردن دکمه‌ی ماوس تریگر می‌شود و برای آغاز تعاملاتی مثل نمایش حالت فشرده یا شروع درگ مناسبه. این تریگر پیش از رهاسازی اجرا میشه و برای افکت‌های آنی یا شروع پردازش فوری استفاده میشه. Mouse Down هنگام رهاسازی دکمه‌ی ماوس رخ میده و معمولاً برای تأیید نهایی یک عمل یا پایان دادن به حالت فشرده به‌کار میره. این ترتیب باعث میشه اکشن پس از اطمینان از رهاسازی اجرا بشه نه در لحظه فشار اولیه.
مثال ملموس‌تر: وقتی ماوس را نگه می‌داریم یک رویداد می‌تونه رخ بده و هم وقتی ماوس در حالت نگه داشته شده است را رها میکنیم می‌تونه رویدادی داشته باشه. ممکنه کمی بیانش در متن دشوار باشه. این جلسه یکم تمرین بیشتری می‌خواهد. بنابراین اگر حوصله داشتید یکبار دیگه هم ببینیدش.
موفق باشید.
سلام خسته نباشید. تشکر بابت این همه لطف و محبت شما.
سوالی داشتم در رابطه با ویدئو اول اونجایی که تعدادی تصاویر رو کنار هم گذاشتید و اینترکشن براش درست کردید که drag بشه. من اومدم مثل شما تعدادی عکس رو گذاشتم کنار هم ولی وقتی گزینه on drag رو میزنم اصلا گزینه animation برام حذف میشه.
میشه بفرمایید مشکل از کجا می‌تونه باشه؟
درود بر شما دوست گرامی، وقت شما بخیر
سپاسگزارم از لطف و همراهی شما. ممکنه برای اون فریم بیش از یک پروتوتایپ ساخته شده باشه. مثلا هم onclick و هم ondrag و… دلیل غیرفعال شدن برخی گزینه‌ها این موضوع هست. این را هم در نظر بگیرید که باید Smart Animate رو هم فعال کرده باشید که اینترکشن مدنظر درست کار بکند.
موفق باشید.
سلام وقتتون بخیر. اول تشکر میکنم بابت آموزشهای خوبتون و اینکه این فرصت رو رایگان در اختیار ما قرار میدید که از دانش شما بهره ببریم.
سوالم این بود که شما توی ویدئوی اول در دو صفحه برای صفحه کلید اینترکشن ساختید، یکجا برای صفحه‌ای بود که شماره موبایل باید نوشته می‌شد که از انیمیشن smart animate و اکشن navigate to استفاده کردید و جای دیگه اکشن open overlay و انیمیشن move in رو به کار بردید. میخواستم بدونم تفاوت صفحه‌ها چی بود که از اینترکش متفاوت برای صفحه کلید استفاده کردید؟
درود بر شما دوست گرامی، وقت شما بخیر
سپاسگزارم از لطف و همراهی شما. هر دو روش رو به این دلیل گفتیم که در واقع آموزش رو کامل‌تر کنیم. در واقع هم Overlay رو بیشتر توضیح داده باشیم و هم Smart Animate. اما در حالتی که کیبورد وجود دارد حالت Smart Animate بهتر است چون باعث می‌شود که دکمه‌ها در قدم اول روی فیلدها قرار نگیرند. از نظر تجربه کاربری بهتر است.
موفق باشید.
سلام و وقت بخیر استاد عزیز
چند سوال برام پیش امد. برای کد تخفیف کیبورد بزاریم یا نه چون تو آموزش نذاشته بودید. سوال بعدی اینه که برای اینتراکشن back ایا میشه دوتا یا بیشتر صفحه پیاده کرد. چون گفتین بک باعث میشه از هر صفحه که امده برگرده همونجا و چون شاید اصلا بشه هم از صفحه 1.2.3 و یا بیشتر بره به یک صفحه دیگه و با زدن دکمه بک به هر کدوم از صفحه هایی که اخرین بود برگرده و سوال اخر اینکه ایا اگر برای همه کیبورد ها اورلی گذاشته بشه بهتر نیست و البته اورلی جوری باشه که صفحه پشتش قابل اسکرول باشه که البته این یک مورد توضیح نداین تو اموزش یعنی همزمان که کیبورد باز هستش صفحه وب هم اسکرول بشه.
درود بر شما دوست گرامی، وقت شما بخیر
در خصوص تخفیف و طبیعتاً هرجا که بخواهیم از کاربر ورودی دریافت کنیم، بله درج کنیم بهتر است. کلا پروژه اپ موبایلی که در این جلسه مشاهده فرمودید به صورت صد در صدی کامل نیست. چون قصد نداشتم خیلی پیچیده‌اش کنم. این بخش رو باید برای شروع با تعداد صفحات زیر 50 تا آموزش داد که ابتدا کاربر مسلط بشود و بعد یواش یواش سراغ پروتوتایپ‌های پیچیده نیز برود. اینترکشن Back رو در هر صفحه‌ای که قبلش صفحه دیگری مطابق flow داشته باشد می‌توانیم درج کنیم و محدودیتی ندارد. البته سوال شما لایه‌های عمیق‌تر از یک مورد بود که آنجا خب با همان On Click به‌نظرم جواب بهتری می‌گیریم. در خصوص مورد آخر، چرا این را به شکل دیگری توضیح دادیم. با استفاده از Smart Animate می‌توان منتقل شدن کیبورد و… را کنترل کرد. در واقع اصلا همیشه عمداً هر دو حالت رو بیان میکنم که بتوانم مفهوم Smart Animate رو بهتر بیان کنم.
موفق باشید.
سلام مجدد استاد عزیز وقتتون بخیر
من اکاردیون رو اصلاح کردم فقط یک مشکلی که من در ویدیو هم دیدم وجود داشت اینکه وقتی اکاردیون را موقع اجرا باز میکنیم بخاطر افزایش ارتفاع قسمت جواب با سکشن بعدی قسمت بلاگ برخورد می‌کند. وروی آن قسمت قرار می‌گیرد و ظاهر خوبی ندارد. من برای حل این مشکل تصمیم گرفتم کل فریم دسکتاپ رو اتولیوت کنم فقط مسئله اینه که تمام فواصل باید روی 64 تنظیم بشه مشکلی نیست از نظر شما؟ چون قسمتی که آیکن‌ها بود روی 40 فاصله تنظیم شده بود و برای اینکه هدر به بالا نچسبه پدینگ 24 بالا پایین دادم.
این راهکار ایا صحیح هست؟
درود بر شما دوست گرامی، وقت شما بخیر
ما فقط در یک سایز آکاردئون ساختیم. برخی کامپوننت‌ها ممکن است اندازه و فواصل‌شون در Breakpoint های مختلف مثل موبایل و دسکتاپ و تبلت و… کمی تغییر بکند. بنابراین اشکالی ندارد که اگر اندازه‌ای مثلا در دسکتاپ زیاد بود، ما آن را در گوشی کمتر کنیم. مثلا پدینگ یا مارجین برخی عناصر ممکن است در دسکتاپ بیشتر و در گوشی کمتر باشد.
موفق باشید.
دقیقاً منظورم همین بود فقط اشتباه بیان کردم😅
ممنون ازشما
سلام جناب اقای حمدالهی
خیلی ممنون از تدریس عالیتون. من برای حالت دسکتاپ کامپوننت اکاردیون به درستی کار کرد اما حالت گوشی چون عرض اکاردیون بیشتر از 326 بودبیرون زدگی داشتو آیا باید برای حالت موبایل کامپوننت جدا تعریف کنم؟
درود بر شما دوست گرامی، وقت شما بخیر
کامپوننت جدا نمی‌خواهد در واقع State جدا می‌خواهد. مثل دکمه‌ها که State های Primary و… داشتند، اینجا شما State های دسکتاپ و موبایل دارید. حالت موبایل که بزرگتر می‌شود رو خب طبیعتا می‌توان اندازه فریم‌اش را کوچکتر کرد و این اشکالی ندارد.
موفق باشید.
سلام استاد وقتتون بخیر و خسته نباشید
خیلی ممنون بابت توضیحتون در مورد ایراد قبلیم متوجه مشکلش شدم
فقط استاد تو این جلسه وقتی با on drag دو طرفه به مشکل خوردیم شما روش carousel drag رو پیشنهاد دادید ولی راستش من متوجه نشدم که دقیقا چطوری کارمونو ساده تر کرد و مشکل برگشت به عکس قبلی رو دوباره با on drag حل کرد و خب چرا فقط هردفعه به همون عکس مد نظر interaction نسازیم به جای اینکه همه ی عکسا تو کل فریم باشه؟
درود بر شما دوست گرامی، وقت شما بخیر
گاهی برخی چیزها رو مثل همین کروسل، به چند شکل می‌توان درست کرد. همون حالت که بیان شد هم اشتباه نیست ولی مابین این روش‌ها، گاهی برخی‌شون بهتر هستند. اگر خواستید پروژه “iran sport” در کامیونیتی فیگما را مشاهده بفرمائید. آنجا هم یک اسلایدر مشابه این حالت هست.
موفق باشید.
سلام ممنون از دوره خوبتون
یک سوالی که برام پیش امده این انمیشن هاش رو چطور با وردپرس در بیاریم
درود بر شما دوست گرامی. وقت شما بخیر
خود المنتور در تب پیشرفته خیلی امکانات زیادی برای translate و skew و scale و… داره. قطعا با آنها زیاد کار کردید. تا حدی میشه از آنها استفاده کرد. اگر هم به دلیلی، نتوانستیم آن چیزی که می‌خواهیم رو بسازیم (یا بهتره بگم اگر بدون نصب پلاگین، نمی‌شد این کار را بکنیم)، می‌توانیم از پکیج‌های المنتوری سبک که ویجت‌های خاص‌تری دارند استفاده کنیم. برخی از آنها واقعا قابلیت و ویجت‌های جذابی دارند. اگر باز هم نشود که بدیهی است که دست به کد باید بشویم و با کاستوم کردن ویجت‌ها، برسیم به آنچه می‌خواهیم. هرچقدر هم خب پروژه سخت‌تر باشد نهایتا پول بیشتری حق داریم از کارفرما دریافت کنیم.
موفق باشید.
سلام و وقت بخیر استاد
ممنون از آموزش بی نظیرتون. منبع خاصی یا دوره آموزشی ای که پروتوتایپ و اینتراکشن کامپاننت‌ها رو به صورت پیشرفته‌تر و جامع‌تر آموزش بده می‌تونین معرفی کنین؟
درود بر شما. وقت شما بخیر
سپاسگزارم. من جلسه مربوط به نمونه‌کار و بهبود رزومه، منابع بیشتری (فارسی و انگلیسی) برای ادامه دادن این تخصص، معرفی کردم.
موفق باشید.
سلام وقت بخیر
وقتی اکاردئون رو می‌سازیم، واسه اینکه بتونیم نشون بدیم که با بازکردن یک گزینه، سایز گزینه ها بسته میشه، باید مثل اسلایدر که آموزش دادید، جدا جدا کامپوننت بسازیم؟ اینطوری اون اسلاید تکی که ساختیم و باز و بسته شدنش رو کامپوننت کردیم، دیگه عملا اینجا کاربرد نداره، درسته؟
درود بر شما. وقت شما بخیر
بله میشه با تو در تو ساختن کامپوننت، درستش کرد یکم پیچیده میشه. از نسخه پولی فیگما هم برای طراحی کامپوننت‌های پیچیده و شرطی، میشه استفاده کرد.
موفق باشید.
استادی جدا برازنده شماست :))
درود بر شما محمد جان. وقت شما بخیر
سپاسگزارم از لطف و مهربانی شما 😍 این واژه هنوز برای شخصی مثل من سنگین هست. کلمه استاد خیلی بزرگ هست. واقعا باید تلاش کنم روزی خودمو برسونم به مرحله‌ای که این عبارت در من صدق کند. فکر میکنم هنوز خیلی فاصله دارم.
ارادت. موفق باشید.
جناب حمداللهی سلام وقتتون بخیر
اگر توجه کرده باشید توی سری های جدید ایفون status bar یا dynamic island وجود داره. حالا برای منوی موبایل چند پیکسل باید در اصله از بالا در نظر گرفت که در مرورگر Safari طراحی سر جای خودش قرار بگیره و به محدوده داینامیک ایلند تجاوز نکنه؟ و در رابطه با دستگاه‌ها ایندروید هم همینطور. در واقع اصلا باید فاصله‌ای در نظر بگیریم یا طراحی رو لب به لب فریم اصلی انجام بدیم؟
ممنون
درود بر شما. وقت بخیر
در طراحی اپ موبایل ضرورت بیشتری دارد. پروژه فعلی اپ موبایل نیست و در مرورگر باز می‌شود. اگر نباشد هم اشکالی ندارد ولی بهتر است درج کنیم. داخل این جلسه یک فایل در کامیونیتی معرفی کردیم برای درج status bar و keyboard و… هم برای آیفون و هم برای ios. در جلسه دیزاین‌سیستم هم، داخل دیزاین‌سیستم‌های متریال و اپل، این موارد هستند و معرفی کردیم.
موفق باشید.
سلام وقتتون بخیر استاد
ممنون بابت آموزش های عالیتون، یک مشکل کلی دارم اینکه UIKit – Android & IOS داخل کامیونیتی فیگما پیدا نکردم [iOS] هست ولی برای کیبورد فارسی دقیقا باید از کجا بتونیم پیداش کنیم یا اصلا حذف شده از فیگما!
میشه لطفا راهنمایی کنید؟ خیلی ممنون
درود بر شما رویا جان. وقت بخیر
چرا هست موارد زیادی. داخل کامیونیتی فیگما هم سرچ کنید. من هم لینک یک مورد را درج میکنم مشاهده بفرمائید. دیزاین‌سیستم‌های اندروید و ios هم هستن. برخی شون فارسی هم شدن.
لینک
موفق باشید.
سلام استاد، وقتتون بخیر
در بخش پروتوتایپ اگه بخوایم اسلاید آخر نپره بره اسلاید اول و به صورت عادی و مثل بقیه اسلایدها بره اسلاید اول باید چکار کنیم؟
درود بر شما رویا جان. وقت بخیر
اسلایدر به صورت کلیکی هست یا درگ؟ یک نمونه من معرفی کردم اسمش iran sport هست. سرچ کنی در کامیونیتی فیگما میادش. اون دقیقا همان شکلی هست که شما فرمودی. اون رو حتما مشاهده بفرما. (پروتوتایپ‌اش رو ببین).
موفق باشید.
سلام و عرض خسته نباشید خدمت استاد گران قدر
استاد در بخش پروتوتایپ، میخوام در قسمت register صفحه کلید رو جوری تنظیم کنم که به صورت overlay باز بشه یعنی مثل همه برنامه ها وقتی روی کیبورد کلیک میکنیم کلمات رو بنویسه ولی اگه بالای قسمتی که شماره وارد میشه(فضای خالی) کلیک شه، صرفا قسمت کیبورد بیاد پایین
میتونید راهنمایی کنید چطوری این بخش باید پیاده سازی بشه؟
متشکرم
درود بر شما. وقت بحیر
وقتی حالت Overlay رو انتخاب کنیم برای کیبورد، یک گزینه داره که اسمش Close when clicking outside هستش. اون رو حتما باید فعال بفرمائید که وقتی بیرون کیبورد کلیک شد بسته بشود (البته فیگما یه باگ ریزی داره که حتی اگر فعال کنید هم در فضای بالا سرش کلیک کنید بسته نمیشه و حتما باید بیرون کل فضای فریم کلیک کنید تا بسته بشه).
موفق باشید.
سلام وقت بخیر
در پروتوتایپ اپلیکیشن چطور می‌تونیم به نوعی تنظیم کنیم که وقتی منوی همبرگری اورلی میشه برای بستنش بتونیم به روی بخش کمی از صفحه قبل که نمایانه کلیک کنیم و صفحه اورلی خود به خود بسته بشه مثل خیلی از برنامه ها که به این شکل هستن و همیشه مجبور به کلیک بر روی ضربدر نیستیم. روش های مختفی رو امتحان کردم ولی جواب نداد. سوال دوم اینکه در برخی گوشی‌ها مثل سامسونگ با تپ کردن دکمه خود گوشی که قبلا فیزیکی بود و الان اکثرا به شکل علامتی ثابت در پایین صفحه هست به برنامه صفحه قبل می‌رفت آیا این بخش از طراحی وظیفه کدنویس است یا ما باید به نوعی تعیین کنیم؟
درود بر شما. وقت بخیر
در خصوص سوال اول، چنین چیزی رو فیگما داره خودش. وقتی از Overlay استفاده میکنیم یک تیک رو هم در انتهای تنظیمات مربوط به این حالت می‌توان انتخاب کرد. عنوان آن Close when clicking outside هست. فعال شدن این گزینه باعث می‌شود تا کاربر وقتی بیرون آن فریم کلیک کند Overlay خودش بسته بشود. در خصوص سوال دوم، برخی از طراحان رابط کاربری قسمت آنتن و جزئیات شارژ را در بالای صفحه و قسمت دکمه بازگشت و… را هم در پائین صفحه به طرح ui خود اضافه می‌کنند. البته عملکردی به آنها اضافه نمی‌شود. مثلا برای Back از تنظیمات خود پروتوتایپ فیگما استفاده می‌شود.
موفق باشید.
بله اون گزینه رو توی ویدئو توضیح دادین اما وقتی کلا بیرون گوشی پریویو می زنیم خارج میشه ولی وقتی که روی قسمت نمایان صفحه پشتی می زنیم بسته نمیشه
در رابطه با توضیح سوال دوم هم متوجه نشدم یعنی طراحی بازگشت با دکمه گوشی وظیفه ما هست؟ یا به صورت پیش فرض گوشی به این شکل عمل می کنه و طراح ui خود گوشی این کار رو می کنه؟
چون در همه برنامه ها دکمه بک ثابت هست و فکر می کردم که آنتن و دکمه رو ما طراحی نمی کنیم و فریمی که بر روی آن طراحی انجام میشه از بخش دکمه و آنتن منها شده
متشکر از پاسخگوییتون
درود بر شما. وقت بخیر
در فیگما وقتی Preview می‌گیریم صرفا وقتی بیرون فریم کلیک میکنیم گزینه را می‌بندد. (توی فریم بزنیم نمی‌بندد و این مسئله کلا در فیگما به همین شکل بوده). اما خب راه درستش همین هست. در واقع همان تیک که در کامنت قبل عرض کردم را باید فعال کنیم. کلا در پروتوتایپ فیگما گزینه Back وجود دارد. پس در واقع بازگشت به قبل یک عنصر مهم و پرکاربرد هست و طراحان از آن در فیگما استفاده می‌کنند.
موفق باشید.
متشکر از پاسخگویی
سلام
باتشکر از اموزش خوبتون
ولی متاسفانه فایل خراب بود ارور میزنه که لیمیت تعداد تیمیت میزنه.
درود بر شما. وقت بخیر
فایل مسئله‌ای ندارد خوشبختانه. اگر مشکلی در آپلود داشتید حتما یکبار هم با vpn روشن تست کنید. یا مثلا اگر با نرم‌افزار آپلود کردید یکبار هم با نسخه تحت وب، آپلود بفرمائید.
موفق باشید.
فوقالعاده بود این جلسه! ممنون از زحماتتون.
درود بر شما. وقت بخیر
سپاس از لطف و مهربانی شما. خوب و سلامت باشید همیشه.
موفق باشید.
سلام استاد ممنون از آموزشهای عالي شما
استاد من بعد از اینکه uikit و فونت ها و رنگ ها و همه رو برای ساخت سایتم آماده کردم و تقريبا سایت رو ساختم
حالا برگشتم که وارینت ها و پروتوتایپ هامو بسازم، اما متاسفانه وقت انتخاب رنگ و فونت با اینکه در لیست سمت راست وجود دارند اما وقت ادیت لود نمیشن و اصلا بالا نمیان که بتونم از توی اونا انتخاب کنم
دلیلش ضعف انترنت نیست کلا از لایبرری رنگ و اینها لود نمیکنه چیزی برام
درود بر شما. وقت بخیر
کلا استایل‌های فیگما وقتی روی عنصری کلیک کردیم و داریم ویرایش میکنیم، لیست نمی‌شوند. در واقع وقتی در محیط خالی صفحه طراحی کلیک میکنیم، لیست می‌شوند. روی عناصر هم کلیک کنیم (مثلا یک متن) باز موقع انتخاب فونت و رنگ و افکت، به لیست‌شون دسترسی داریم. اگر احساس میکنید چیزی حذف شده که قبلا بوده، می‌توانید از version history تغییرات رو ببینید و برگردید به ورژن‌های قبلی. دقت کنید قبلش برای بکاپ، حتما یک خروجی save local copy بگیرید.
موفق باشید.
سلام استاد روزتون بخیر و ممنون بابت تمامی پشتیبانی های رایگانتون و اموزشات فوق العادتون. یک سوال خیلی کلی داشتم درمورد اینترکشن ها. توی این پروژه‌ای که تو این دوره آمورش دادید برای مواردی که اینترکشن حالت هاور رو ساختید مثل بلاگ کارت‌ها یا دکمه ها همگی کامپوننت شده بودند و بین واریانت ها اینترکشن ساختیم. اگر بخوام یک فریم کارت مانند(کامپوننت نیست) بعد از هاورشدن مثلا پایین کارت یک فلش اضافه بشه و حالا رنگ المان های داخل کارت هم تغییر کنه، باید چیکار کنم؟
حالتی که می‌خواهم بعد از هاورشدن ایجاد بشه رو طراحی کردم. اما توی ساختن اینترکشن‌ها بین این موارد دچار مشکل شدم. البته که توضیح مشکل به وجود آمده به صورت متنی خیلی سخته ولی خب انگار برای ایجاد اینترکشن‌ها باید طراحی کارت قبل هاورشدن و طراحیش بعد از هاورشدن در یک فریم باشن که بشه اینترکشن ایجاد کرد بینشون. درسته؟ من از کارت طراحی شده (قبل از طراحی) کپی کردم و داخل صفحه uikit کارت بعد از هاورشدنش رو هم طراحی کردم و بعد داخل یک فریم قرار دادمشون و اینترکشنشون رو ساختم ولی قاعدتا داخل صفحه اصلی سایت این اعمال نشد(فک کنم چون کامپوننت نبود).
درود بر شما. وقت بخیر
اگر اینترکتیو کامپوننت نسازیم عملا باید با اتصال فریم‌ها اینترکشن بسازیم. این کار را سخت‌تر خواهد کرد. بنابراین برای ساختن هاور بهتر است عناصر را کامپوننت کنیم (چون خود ساخت کامپوننت که زمان‌بر نیست و مقوله دشواری هم نیست و لزوماً ما را ملزم نمی‌کند که فریم‌های زیادی بسازیم).
موفق باشید.
عالی. ممنون از منابع آموزشی رایگانتون. دست به خاک میزنید بشه طلا.
درود بر شما. وقت بخیر
سپاس از لطف و مهربانی شما. امیدوارم مفید واقع بشود.
موفق باشید.
استاد چند تا سوال داشتم
اول اینکه ما توی فیگجم یک بار پروتوتایپ رو طراحی میکنیم توی دیزاین هم یه بار اینجور تایم نمیگیره؟ چون من این پروژه رو که برامون گذاشته بودید قسمت همراه تاکسیش رو تکمیل کردم و انگار یه خورده زمانبره.
دوم اینکه توی یک پروژه ما باید تک تک صفحات مورد نیاز پروتوتایپ رو طراحی کنیم؟ مثلا توی همین پروژه اگر کسی لغو سفر زد یه 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 است.
موفق باشید.
سلام جناب حمداللهی عزیز و گرامی
امکانش هست فایل این تاکسی رو بزارین برای تمرین؟ من تو کامنیوتی فیگما هرچی زدم تاکسی همراه نمیاره
درود بر شما دوست گرامی، وقت بخیر و عرض ادب
بروی چشم. در همین جلسه فایل دانلود آن درج شد. پس از دانلود، آنرا ایمپورت و استفاده کنید.