شاید برای بسیاری از افراد طراحی وایرفریم و اسکچ لذت بخش نباشد. زیرا این مدل طرح‌ها هیچ رنگ و رویی ندارند. اما در مرحله ساخت پروتوتایپ از دنیای سیاه و سفید به دنیای رنگی می‌رویم. پس از طراحی وایرفریم پروژه، نوبت به طراحی پروتوتایپ (prototype) می‌رسد. اجرای این بخش یعنی اینکه دیگر در مقیاس low fidelity design نیستیم و طراحی ما به مرحله high fidelity design رسیده است. در این مرحله، جزئیات پروژه مانند رنگ‌ها، تایپوگرافی و گریدسیستم دقیق، اینترکشن‌ها، فاصله‌گذاری، متن و محتوای دقیق، تصاویر و حتی ویدئو اضافه خواهد شد. افزون بر این، uikitهای پروژه نیز کامل می‌شوند.
در این جلسه از دوره تجربه کاربری و رابط کاربری از آژانس نوآوری رسام قصد داریم یک قدم در طراحی جلوتر بگذاریم و به سراغ طراحی پروتوتایپ در فیگما برویم. همچنین میخواهیم به سوال پروتوتایپ یعنی چه؟ در این قسمت پاسخ دهیم. خوشحال می‌شویم تا پایان این قسمت ما را همراهی کنید.
طراحی در مقیاس high fidelity شامل چه مواردی می‌شود؟
در جلسه قبل که در خصوص طراحی وایرفریم صحبت کردیم، مشاهده شد که برای سهولت اجرای پروژه و جلوگیری از خطاهای تصمیم‌گیری و اتلاف زمان و هزینه، بهتر است ابتدا وایرفریم (low-fidelity) اجرا شود. اما وقتی وایرفریم اجرا شد، در مراحل بعدی سراغ high fidelity می‌رویم. اجرای طراحی پروتوتایپ، شامل افزودن رنگ‌ها، تصاویر، کامپوننت‌ها، استایل‌گایدها و تکمیل کردن پروژه است. اینکه بیان کنیم پروتوتایپ لزوما همان وایرفریم است که کامل شده و چیزی تغییر نکرده، لزوما صحیح نیست. مثلا ممکن است یک بخشی در وایرفریم اجرا بشود. کارفرما ابتدا موافق اجرای آن باشد اما بعدا به دلایل بیزنسی، آن بخش حذف بشود و در مرحله ساخت پروتوتایپ، پیاده‌سازی نشود.
تصویر بالا یک نمونه پروتایپ خوبی در پروژه طراحی رابط کاربری رسام است. توجه داشته باشید که ارائه آموزشهای طراحی رابط کاربری در قالب محتوای متنی، گاهی دشوار می‌شود. بنابراین حتما توصیه می‌کنیم که 4 ویدئو این جلسه را با دقت ببینید و سوالات خود را از ما بپرسید. افزون بر این، اگر جلسه قبل که مربوط به طراحی وایرفریم بود را مشاهده نکردید، آنها را نیز حتما مشاهده کرده تا به طراحی این دو مقوله، اشراف پیدا کنید.
با ساخت پروتوتایپ یک قدم در طراحی جلوتر برویم
برای طراحی پروتوتایپ باید از دنیای خاکستری وایرفریم فاصله بگیریم و به جزئیات بیشتری در طرح از جمله رنگ، تایپوگرافی، استایل گایدها، کامپوننت و تصاویر بپردازیم تا طراحی ما کامل‌تر شود. در این قسمت از دوره طراحی رابط کاربری آموزش prototype در فیگما را برای پروژه‌های UI و متعلقات مربوط به این دانش مهم را توضیح دادیم. خوشحال می‌شویم تجربیات خود را با ما به اشترک بگذارید. همچنین اگر سوالی در مورد این مبحث داشتید از بخش دیدگاه‌ها، از متخصصین آژانس نوآوری رسام بپرسید.
موفق باشید 😍
63 پاسخ
سلام استاد حمداللهی بسیار ممنونم بابت آموزش های فوق العادتون
یک سوال داشتم چرا وقتی نسخه دسکتاپ پروژه رو preview می کنیم تو حالت ریسپانسیو فواصل فریم ها از سمت راست خیلی بیشتر از سمت چپ نمایش داده میشه؟
درود بر شما. وقت بخیر
خود صفحه preview ممکن است زوم داشته باشد. بالا سمت راست تنظیماتی برای نمایش صفحه دارد. آن گزینه‌ها را هم مشاهده بفرمائید.
موفق باشید.
ممنون بابت پاسخگویی استاد. واسه حالت افقی گوشی ها هم نیازه دوباره طراحی رو انجام بدیم یا نیازی نیست؟
درود بر شما. وقت بخیر
این حالت هم به هر حال یک Breakpoint به حساب می آید و قاعدتا نیاز به طراحی دارد که ممکن است در برخی پروژه‌ها توسط کارفرما مطالبه شود.
موفق باشید.
وقت بخیر استاد. می‌خواستم بدونم اگه بخواهیم سایتی رو طراحی کنیم که مناسب همه سایزهای گوشی های اندروید و IOS باشه چه سایز فریمی باید استفاده کنیم؟ یا اینکه باید سایت رو به صورت جداگانه یک بار برای اندروید و یک بار برای IOS طراحی کنیم؟
درود بر شما. وقت بخیر
قاعدتا باید برای چند Breakpoint نسخه موبایل طراحی کنیم. حتی گاهی بیشتر از دو مورد. اما در اغلب پروژه‌ها کارفرما همان یک سایز یا نهایتا دو سایز برای اندروید و IOS را از شما مطالبه می‌کند. برای انتخاب سایز مناسب هم بهتر است آن Breakpoint ای انتخاب بشود که عرض کمتری دارد. چون بزرگتر کردن یک Breakpoint کوچک، آسانتر است. مثلا اگر شما عرض 390 را انتخاب کنید راحت‌تر می‌توانید آن را کپی کنید و نسخه با عرض 450 پیکسل هم درست کنید. اما تبدیل 450 به 390 سخت‌تر است. حتی در پیاده‌سازی برای برنامه‌نویسان هم چنین چیزی وجود دارد. برای IOS نسخه با عرض 390 مناسب است. برای اندروید هم موردی که عرض کمتری دارد گزینه مناسبی است.
موفق باشید.
درود فراوان
استاد توی طراحی پروتوتایپ موبایل، متن زیر مجموعه تایتل آژانس خلاقیت پویا(همون که بالای پاراگراف هست) رو نباید بزاریم؟
درود بر شما، وقت بخیر
بله متن بهتر است باشد اما گاهی ممکن است یک عنصری در نسخه دسکتاپ باشد و در موبایل نباشد (یا مثلا محدودتر باشد).
موفق باشید.
سلام و خسته نباشید
استاد میشه توضیح بدید چه مواقعی ایتم ها رو فریم میکنید و چه مواقعی Auto layout؟
متوجه تفاوت این دو هستم ولی اینکه کجا از کدوم استفاده کنم یه مقدار گیج کننده شده برام
درود بر شما. وقت بخیر
در واقع Auto Layout همان فریم هست که فواصل را خودکار تنظیم می‌کند همانطور که از اسمش هم پیداست. زمانی که قصد داشتیم فواصل را خودکار تنظیم کنیم و با پدینگ و مارجین، عرض و ارتفاع را تا حد زیادی مشخص کنیم، از Auto Layout استفاده می‌کنیم. استفاده از Auto Layout سرعت طراحی را بسیار بالا می‌برد. یک مثال بزنم. مثلا در یک باکس طراحی شده که عنوان و توضیح درج شده، اگر زیر عنوان بخواهید یک زیرعنوان یا subtitle بگذارید (فرض کنید که Frame هست و Auto Layout نشده) در این حالت باید دستی فریم را بزرگتر کنید و دوباره فواصل بین عناصر و پدینگ را تنظیم کنید. خب زمان زیادی از ما می‌گیرد. در صورتی که اگر Auto Layout کنیم خیلی راحت‌تر می‌توانیم با تنظیم فواصل پدینگ و مارجین، به نتیجه مطلوب خود برسیم.
حتما حتما ویدئوی Auto Layout رو باز هم ببینید. حتی اگر قبلا هم دیده باشید. این مبحث یکم سخت هست و تکرار و تمرین بیشتری نیاز دارد. اگر بهش مسلط بشویم واقعا طراحی بسیار راحت‌تر و سریع‌تر و به نظرم دلچسب‌تر می‌شود.
موفق باشید.
😃 بله استاد به لطف شما بحث UIام خیلی بهتر شده و تا حدود زیادی راه افتادم.
درسته استاد کاملا متوجه شدم. ممنون
درود بر شما. وقت بخیر
خیلی هم عالی. درود بر این تلاش. فقط یک دلیل دارد. آن هم نظم و تلاش شماست.
موفق باشید.
سلام استاد خسته نباشید.
ببخشید در ویدیو 4 زمان 18:03 زمان ساختن بخش اخبار و مقالات چرا autolayout را از حالت افقی به عمودی تغییر ندادین؟ من که عمودی میکنم بعد میخوام سایز رو به 358 تغییر بدم همه چیز به هم میریزه. فلسفشو متوجه نشدم.
درود بر شما. وقت بخیر
داری تمومش می‌کنی ها 😎. اینجا من در واقع ctrl + shift + G رو زدم. این همان Ungroup و Unframe هستش که اگر روی فریم Auto Layout این رو بزنیم، هم حالت Auto Layout و هم فریم رو حذف میکنه. این باعث میشه عناصر زیرمجموعه فریمی که حذف شد، بیاد زیرمجموعه لایه بالاتر قرار بگیره. خب ممکنه جهت Auto Layout لایه بالاتر فرق کنه. مثلا عمودی باشه در صورتی که لایه داخلی که حذف شد افقی بوده. اینطوری اون عناصر زیر هم می‌افتند. حالا چرا خودم عمودی‌اش نکردم؟ چون می‌خواستم فریم اضافه هم حذف بشه و لایه‌ها بی‌مورد زیاد نشوند.
موفق باشید.
ممنون بابت پاسخگویی استاد. ببینید کلا دوتا باکس هست یکی متن عنوان، زیرش هم یک باکس با چند خط متن طولانی و عریضتر نسبت به عنوان که از جایی کپی کردم اوردم. باکس پایینی رو که نمیشه auto width کرد چون چند خط رو تبدیل میکنه به یک خط خیلی عریض و طولانی پس میزارمش رو auto height. ولی عنوان که یک خطه رو auto width هست. بعدش این دوتارو باهم auto layout میکنم. مشکل فقط وقتی ایجاد میشه که عرض رو روی hug میزارم در غیر این صورت همه چی درسته و مشکلی از لحاظ ظاهری نداره. استاد یکم پیش خیلی کلنجار رفتم به یک نتیجه ای رسیدم. وقتی دوتا باکس متن رو auto layout میکنم و بعدش تک تک باکس متن هارو به صورت تکی انتخاب میکنم میبینم که در قسمت width رفتن روحالت fill(container). از این قسمت، متن باکس تک خطی عنوان رو که میشه گذاشت رو حالت hug یا از قسمت پایین تر گذاشت رو auto width. بعدش وقتی متن چند خطی با باکس عریض تر رو از حالت fill container میزارم رو حالت fixed width دیگه عرضش تغییر نمیکنه و رو حالت hug هم میشه گذاشت بهم نمیریزه اصلا و درست میشه. واقعیتش الان نمیدونم بعد auto layout این تغییرات رو انجام بدم و بزارم رو حالت hug یا بزارم رو حالت پیش فرض fill container بمونه و اصلا hug نکنم. چون من در ویدیو های اموزشی ندیدم شما این تغییراتو بدید ولی بعد auto layout، باکس متنای شما به صورت پیش فرض رو حالت fixed width هست و لایه auto layout شدش هم روحالت hug هست.
درود بر شما. وقت بخیر
اگر متن پاراگرافی هست اشکالی ندارد که همان Auto Height باشد. ولی نباید Fixed Height باشد. اگر این دو لایه (یعنی عنوان و متن زیر آن) را به‌صورت عمودی Auto Layout کنیم و روی حالت Hug باشند، بهم نمی‌ریزد. من داخل پروژه همین دوره هم چنین چیزی به وفور استفاده شده است. نه نیازی نیست که زیرمجموعههاش رو Fill بگذاریم. من داخل ویدئو Auto Layout در مورد Fill Container هم صحبت کردم و کاربرد آن را بیان کردم. حتما ویدئو Auto Layout را مجدد ببینید.
موفق باشید.
وقت بخیر استاد خسته نباشید. بنده الان متوجه یه مشکلی شدم. فرض کنید بنده یه عنوانی رو مینویسم. زیرش هم چند خط متن طولانی که عرض بیشتری نسبت به عنوان داره. حالا این دوتارو باهم Auto layout میکنم تا اینجا مشکلی نیست. height که مشکلی نداره ولی وقتی width رو میزارم روحالت hug متن بهم میریزه. ینی عرض رو بر اساس عرض عنوان هاگ میکنه و عرضش خیلی کوچیک میشه و متن به اون عریضی رو میاره داخل این کادر کم عرض. میخاستم بدونم دلیلش چیه؟ تا وقتی رو حالت hug نزاشتم اصلا ایرادی وجود نداره و همه چی درسته. مشکلی نست اگه اصلا رو حالت hug نزاریم و بزاریم تو این حالت بمونه؟ من از سر کنجکاوی رو حالت hug گذاشتم دیدم بهم ریخت کلا. پیشاپیش ممنون بابت پاسخگویی و راهنمایی هاتون
درود بر شما. وقت بخیر
با توجه به توصیف اون دو عنوان، عرض رو اگر روی hug بگذارید بهم نمیریزه. ببینید متون داخلی آن آیا به صورت Auto Width هستند؟ کلا حالت Hug یعنی اینکه اندازه آن وابسته باشند به عناصر داخل آن. برخی جاها لازم می‌شود. برخی مواقع لازم است. اینکه فرمودی بهم می‌ریزد باید دید آیا لایه بالا دست آن هم Auto Layout هست؟ (چون می‌تواند موثر باشد). کلا کمی Auto Layout سخت هست و واقعا خودم هم موقع یادگیری آن کمی اذیت شدم. اما خیلی در طراحی کمک‌کننده است. حتما یکبار دیگر ویدئو نیم ساعته Auto Layout رو مشاهده بفرمائید.
موفق باشید.
بله خیلی ممنونم از توضیحاتتون. منظورم ریسپانسیو شدن برای حالتیه که مثلا در اسکرین گوشی های مختلف یا در سایزهای مختلف دسکتاپ طراحی ثابت بمونه یا تغییرات درستی داشته باشه. این حالت که الان بریک پوینت برای دسکتاپ و موبایل داریم درسته ولی در تغییر سایزها بخوایم نشون بدیم که چه اتفاقی میفته باید چیکار کنیم. این برام خیلی گیج کننده است.
درود بر شما. وقت بخیر
بله همان حالت هست. همان حالتی هست که هم فریم اصلی و هم تمامی عناصر با Autolayout طراحی می‌شوند. البته همیشه این روش ممکن است استفاده نشود. این کار باعث می‌شود از حالت Absolute Position یا همان Ignore Autolayout هم بیشتر لازم بشود استفاده کنیم.
موفق باشید.
بعد اینکه چرا در قسمت اخبار برای ورژن موبایل سایز فونت هارو کوچیک نکردین؟
درود بر شما. وقت بخیر
چرا کلا سایز بادی در نسخه موبایل کوچکتر شده است. کلا عناوین H1-H6 با دو سایز مختلف در استایل‌ها وارد شدند که در نسخه موبایل بتوان آنها را در برخی موارد که نیاز هست کوچکتر کنیم.
موفق باشید.
سلام و خسته نباشید.
این هارو به این صورت وقتی طراحی کردیم ریسپانسیو هم هست یا برای ریسپانسیو شدن باید تغییراتی بدیم؟
ممکنه جایی حواسمون نباشه کانسترینت رو درست قرار نداده باشیم یا لایه های داخلی fill نباشن. بهتر نیست از ابتدا همه رو حالت ریسپانسیو هم بکنیم؟ و اینکه برای طراحی های پیچیده تر سخت چطور میشه؟
درود بر شما. وقت بخیر
ما در این پروژه هم نسخه موبایل و هم نسخه دسکتاپ را طراحی کردیم. می‌توان البته نسخ دیگری مانند تبلت هم طراحی کرد. استفاده از Constraints لزوماً برای طراحی ریسپانسیو نیست. مثلا همین که ما عنصری را می‌کشیم به جهتی، می‌توانیم رفتار عناصر داخل آن را کنترل کنیم و این موضوع جاهای مختلفی ثمربخش است. اگر منظور از حالت ریسپانسیو این هست که مثلا تمامی فریم ها به صورت Autolayout باشند و فریم اصلی هم در این وضعیت باشد، بله خوب هست. البته همیشه ممکن است این کار صورت نگیرد. چون ممکن است گاهی و به دلایلی نخواهیم برخی فریم‌ها را Autolayout کنیم. پروژه‌ها از جهاتی با یکدیگر متفاوت هستند.
موفق باشید.
سلام و خسته نباشید.
استاد جسارتا برای فوتر به جای اون blue-box میشه به خود باکس فوتر سایه داد با زاویه مناسب؟
درود بر شما. وقت بخیر
بله. هم می‌توان stroke به بالا داد صرفاً. هم می‌توان drop-shadow در حالتی که blur و spread صفر هست، اعمال کرد. باز در جهت بالا.
موفق باشید.
سلام و درود خدمت شما استاد گرامی. تشکر فراوان از آموزشهای بی نظیرتون.
استاد روش mask کردن رو در جلسات پیش رو آموزش میدید؟ یا قبلا آموزش دادید من توجه نکردم؟
درود بر شما. وقت بخیر
در جلسه 11 هست. برای Mask باید از Shape استفاده کنیم. مانند rectangle و… مثلا یک عکس را بخواهیم داخل یک دایره بندازیم. تصویر باید رو باشد. دایره زیر باشد. هر دو را انتخاب کنیم و سپس ctrl + alt + M را بزنیم mask می‌شود.
موفق باشید.
با سلام و وقت به خیر
سپاس فراوان بابت تدریس عالی و با کیفیت شما استاد محترم
استاد چطوری میشه برای دکمه ها واریانت برای پوزیشن آیکن ها درست کرد؟
درود بر شما، وقت بخیر
منظور این هست که آیکن داخل کامپوننت دکمه، قابل انتخاب باشد که سمت راست، سمت چپ و یا مخفی باشد؟ اگر درست درک کرده باشم فرمایش شمارو، باید عرض کنم که این کار یک واریانت می‌خواهد (یعنی با بولین نمی‌توان آنرا ساخت چون بیش از دو حالت دارد). پس یک واریانت به اسم آیکن، با مقایر راست، چپ و مخفی.
موفق باشید.
سلام
میشه به طور کلی بگید که چه وقت‌هایی باید از Auto layout و frame کردن استفاده کنید و تفاوتشون چیه؟
چون زمانی که میخوام قبل از انجام دادن شما خودم section رو درست کنم، قاطی میکنم که از کدام استفاده کنم.
درود بر شما. وقت بخیر
به‌طور کل هرجا بخواهیم که عناصر به صورت خودکار تنظیم شوند (مثلا فواصل آنها از قبیل پدینگ و مارجین و حتی عرض و ارتفاع) از حالت Autolayout استفاده می‌کنیم. همچنین در طراحی واکنش‌گرا، این مقوله لازم است. مواردی هم که نیازی به این خودکار بودن تنظیمات فواصل و اندازه‌ها نباشد از Frame استفاده می‌کنیم. جلسه Autolayout که همان جلسه 17 هست را باز هم مشاهده بفرمائید. کمی تکرار و تمرین می‌خواهد.
موفق باشید.
سلام مجدد و ممنون از پاسخگوییتون
متوجه شدم که اطلاعات رو از کجا میتونم پیدا کنم اما منظورم اینه که وقتی یک پروژه جدید ایجاد میکنم چه جوری از اطلاعات پروژه شما در پروژه خودم استفاده کنم؟
شاید سوالم ساده و بدیهی باشه اما من نتونستم از اطلاعات پروژه شما در پروژه خودم استفاده کنم باید دوباره تک تک اونها رو تعریف کنم.
باز هم تشکر فراوان از شما استاد گرامی
درود بر شما. وقت شما بخیر.
راه اول انتقال در پروژه‌های تیمی که این کار شدنی هست، یک راه دیگر هم وجود دارد (چون در نسخه رایگان فیگما نمیشه زیاد تیم ساخت پس راه دوم الان مناسب‌تر هست).
اما راه دوم حتی ساده‌تر هم هست. شما می‌توانید از سمت چپ صفحه و در بالا (همان جا که اسم پروژه را نوشته است) یک فلش رو به پائین وجود دارد. آن را که بزنید یک گزینه وجود دارد به نام Duplicate وجود دارد. آن را که بزنید از کل پروژه فعلی شما یک کپی برمی‌دارد. حالا در فایل جدید می‌توانید موارد اضافه را حذف کنید و از همان استایل‌های Add شده در فیگما نیز استفاده کنید.
یک راه دیگر هم البته هست. شما با کپی پیست کردن استایل‌گایدها راحت می‌توانید به پروژه جدید هرچیزی را ببرید. اما در این حالت بازم استایل‌هارو دوباره باید Add کنید توی فیگما که البته با پلاگین‌هایی مثل Chroma colors توی کمتر از 5 دقیقه حتی اگر زیاد هم باشند می‌توان آنها را اضافه کرد.
موفق باشید.
سلام
توی ویدیو دوم قسمتی که “ویدیو معرفی تیم پویا” رو درست کردیم چند المانی که تو در تو هستند (عکس و افکت و آیکن و…) چه تفاوتی میکنه که ما اونها رو group کنیم یا frame؟ چون در دو حالت توی ظاهر هیچ تغییری نمیکنه.
درود بر شما. وقت شما بخیر
از Group استفاده نکنید و صرفاً برای بخش‌بندی عناصر در طرح UI از همان Frame استفاده کنید. عملکرد Frame بهتر است و خصوصا زمانی که قصد داریم از Autolayout و طراحی ریسپانسیو استفاده کنیم، بهتر هست که پایه عناصر Frame باشد.
موفق باشید.
سلام استاد گرامی
دو تا سوال داشتم از خدمتتون چه جوری میشه پترن ها رو به پروژه خودمون اضافه کنیم و چه جوری میشه از فایل شما منظورم اطلاعات رنگ ها و فونت ها و asset ها و ایکون ها و…برای پروژه خودمون استفاده کنیم من یکم گیج شدم و یا شاید دروس قبل رو فراموش کردم.
با تشکر فراوان از محتوای کامل دروس و پاسخگوییتون
درود بر شما. وقت شما بخیر
برای پترن هم می‌توانید در کامیونیتی فیگما عبارت Pattern رو سرچ کنید. خیلی فایل زیاده و رایگان هستند. در بخش پلاگین‌های فیگما هم موارد زیادی هست سرچ بفرمایید زیاد هستند. در سایت‌هایی مانند Freepik هم خیلی موارد زیادی هست. حتی رایگان‌هاش هم خوب هستند. اگر پروژه نهایی دوره را نیاز داشتید در گوگل بزنید Pooya creative agency figma این رو که سرچ کنید هست و می‌توانید کل پروژه را از آنجا بردارید.
موفق باشید.
سلام استاد وقت بخیر
دقیقه 4:24 که شما فریم رو پاک کردید بدون اینکه محتویاتش پاک بشه؟
چطور اینکارو کردید اون لحظه فقط انجام دادید توضیح ندادید
ممنون میشم توضیح بدید
درود بر شما. وقت بخیر
من هر 4 ویدئو این حلسه در ثانیه‌ای که شما فرمودید را دیدم. احتمالا ویدئو 4 این جلسه مدنظر شماست که در آن ثانیه‌ای که شما فرمودید من صرفاً با دکمه Shift + A آن فریم را Autolayout کردم. فواصل خالی اطراف هم به خاطر Autolayout شدن خود به خود حذف شده بود. دلیل آن هم این بوده که داخل آن فریم، محتواهای دیگری وجود داشته است.
موفق باشید.
سلام ببخشید من هرکاری میکنم در پری ویو تمام فریم ها را نشون نمیده. از حالت زوم هم درآوردم اما در نمای کلی صفحه ی وبسایت در دسکتاپ بعضی از فریم ها در پری ویو نشون داده نمیشه. میتونم جایی براتون عکسش رو بفرستم بهتر راهنمایی بگیرم؟
درود بر شما. وقت بخیر
این مسئله به جز نکته مربوط به zoom که خدمت شما عرض کردم، دو نکته مهم دیگر هم دارد که این دو را نیز مورد بررسی قرار بدهید.
1. شاید اندازه فریم‌ها متناسب نباشد. مثلا فرض کنید فریم دسکتاپ که باید 1920 یا همان اندازه 1440 باشد، به هر دلیلی سایز بسیار بزرگتر یا کوچکتری داشته باشد. این موضوع در اسکرین شات هم لزوما ممکن است قابل تشخیص نباشد. وارد تب دیزاین بشوید (در همان حالت طراحی) اندازه یا همان عرض فریم‌ها را بررسی کنید ببینید یک وقت سایز آنها نامتعارف نباشد.
2. نکته دیگر بحث flow هست. منظورم از flow همان flowهای پروتوتایپ هست که در جلسات پیش رو باهاش آشنا خواهید شد. در جلسه پروتوتایپ اپلیکیشن موبایل آن را توضیح داده‌ایم. حتما آنرا ببینید. ضمن اینکه از پائین صفحه هم می‌توانید با فلش‌های راست و چپ، بقیه فریم‌ها را مشاهده کنید.
موفق باشید.
سلام استاد وقتتون بخیر. میشه راهنمایی بفرمایید دلیل اینکه در پری ویو که میخواهیم کل صفحه ی طراحی شده را یکجا ببینیم. چرا بعضی قسمت ها نشان داده نمیشود؟
درود بر شما. وقت بخیر
در صفحه preview هم حالت zoom وجود دارد. از بالا سمت راست صفحه چک بفرمائید. (یک فلش دارد که تنظیمات zoom آنجا هست).
موفق باشید.
استاد وقت بخیر
یه سوال دیگه: من هر دو سمت grid م، حدود 80 پیکسل با اطراف فاصله داره اما در present preview میبینم که فقط یکطرفش رو فاصله داده و طرف دیگه چسبیده!! چرا؟
درود بر شما. وقت بخیر
شاید در حالت preview زوم شده است.
موفق باشید.
در حالتهای recommended خودش اونشکلی نشون میده ولی در حالت مثلا fit width گذاشتم درست نشون داد.
سلام استاد عزیز
میشه روی همون طرح wireframe مون ، طرح prototype رو بندازیم؟ و دوباره طراحی نکنیم؟ یعنی همون اول یک کپی بگیریم ازش و باهاش کار کنیم
درود بر شما. وقت بخیر
بله می‌توان این کار را انجام داد. البته گاهی اوقات از نظر زحمت طراحی، یکسان هست اما خب به هر حال انجام کاری که فرمودید مشکلی ندارد.
موفق باشید.
یعنی ما توی فیگما روی داشتن اسکرول کار نمی کنیم؟
درود بر شما. وقت شما بخیر.
چرا کار می کنیم. اتفاقا یکی از حالتهای ساخت اینترکشن در فیگما همین اسکرول هست. اما توی این جلسه نیست. در جلسات 22 و 23 هستش. کلا در این دو جلسه، موضوعات ساخت اینترکشن در فیگما را خواهیم گفت.
موفق باشید.
سلام مجدد
بله متوجهش شدم
الان در مرحله ایجاد پروتو تایپ هستم. که روی صفحه ی اولم یک گزینه هست که روی اون بزنید صفحه پاپ اپ باز میشه اما توی اجرا و نمایشش نمیدونم چرا دیگه اسکرول کار نمیکنه. صفحه ی پاپ اپ در واقع نصفه نیمه نمایش داده میشه.
درود بر شما. وقت بخیر
ما در این دوره پاپ آپ طراحی نکردیم اصلا. در واقع این جلسه صرفا high-fidelity پروژه رو اجرا کردیم. اگر موضوع preview و یا present پروژه هست و هنگام این کار نمایش نصفه است و یا اسکرول ناقص هست، باید از تنظیمات تب پروتوتایپ، تنظیم کنیم که در موکاپ متناسب با پروژه، طرح را نمایش بدهد. اصلا می‌توان آنرا روی none گذاشت که مطمئن بشویم به درستی نمایش داده می‌شود.
سلام استاد
من به انتهای طراحی یک صفحه رسیدم
سعی کردم همه چی فاصله ها ضریب 8 باشه . اما الان قاطی کردم که فاصله ی ایتم تا AUTO LAYOUT که داخلشه باید ضریب 8 باشه یا اندازه ی خود AUTO LAYOUT ایجاد شده ام باید مبنای 8 باشه . یا حتی فاصله ی هر فریم تا صفحه یا فریم با فریم هم باید ضریب 8 باشه؟
قاطی کردم این ضریب 8 بودن رو
درود بر شما. وقت شما بخیر
ببینید استفاده از نسبت 8 الزامی نیست. اما بله اون موارد که فرمودید بهتره ضریب 8 باشند. مثلا فاصله بخش‌ها از هم. مثلا هدر و بخش زیر آن. گاترهای گریدسیستم هم که 24 هستند. فوصل بین متون رو هم که ما از 8 و 16 و 24 و 32 استفاده کردیم. در واقع همه جا نسبت 8 بود. اما خب استفاده از آن الزامی نیست. چون بین طراحان این روش فاصله‌گذاری خیلی رایج هست من هم بیان کردم که مخاطب با آن آشنا بشود. من خودم به جز نسبت 8 ها از عدد 4 و 12 هم استفاده میکنم (فریمورک‌های معروف مانند بوت‌استرپ هم از این نسبت استفاده کرده‌اند).
موفق باشید.
سلام و عرض ادب.
ممنون و متشکر بابت دوره کامل و بی نظیرتون استاد گرامی.
لطفا بفرمایید پس از طراحی با فیگما از چه طریقی می‌توانم سایت را در اینترنت پابلیش کنم؟
آیا با وردپرس امکان پذیر است یا روش دیگری دارد!
سپاس بیکران
درود بر شما. وقت بخیر
سپاس از لطف شما.
برای پیاده‌سازی طرح UI می‌توانیم از صفر برنامه نویسی کنیم و تمام آنچه که میخواهیم را پیاده سازی کنیم.
البته وردپرس هم به عنوان یک سیستم مدیریت محتوای رایگان، در خیلی از پروژه ها راهگُشا هست. ما اخیراً یک دوره رایگان وردپرس در سایت آپلود کردیم که در صورت تمایل آن را هم ببینید.
موفق باشید.
سلام استاد اگ امکانش هست عکس ها و پترن هارو بزارید
درود بر شما. وقت شما بخیر
تمام محتوای پروژه در کامیونیتی فیگما منتشر شده است.
https://www.figma.com/@hamdollahi
موفق باشید.
سلام مجدد استاد و سپاس برای راهنماییتون.
مشکل قبلی رفع شد، الان چیزی که هست اینه که اکثر مواقع وقتی میخوام پلاگینی رو اجرا کنم یا مدت خیلی زیادی طول میکشه تا اجرا بشه یا همین جور میچرخه و گیر میکنه! و یا این پیغام رو میده: An error occured while searching for plugins. و با وی پی ان روشن یا خاموش هم وضعیت همینه.. من از نسخه ی وب فیگما هم استفاده میکنم. همین باعث میشه یا مدت زیادی سر یه جلسه معطل بشم یا اینکه تمرین نکرده برم قسمت بعد…نمیدونم مشکل چیه و باید چیکار کنم؟
درود بر شما. وقت شما بخیر
متاسفانه گاهی این مسئله رخ می‌دهد. سرور پلاگین‌های فیگما متفاوت هست و عملا دیتای آن از جاهای دیگری و از شرکت‌های ارائه کننده آن سرویس‌ها فراخوانی می‌شود. بنابراین، برخی پلاگین‌ها نیاز به VPN دارند. مثل پلاگین Lottiefiles و… اما خطایی که باهاش مواجه شدید همیشگی نیست. مثلا گاهی با رفرش صفحه و دوباره تلاش کردن درست می‌شود. (البته گاهی نیز بیشتر اذیت می‌کند).
کلا بخش عمده‌ای از این مسائل به خاطر وضعیت اینترنت داخلی ایران هست. چون نهایتا مواردی که تحریم باشیم و range ip ایران رو بسته باشند با VPN درست می‌شود. اما گاهی حتی سایت‌هایی که تحریم نکرده‌اند نیز سخت باز می‌شوند. اگر خواستید سایت shecan.ir رو هم بررسی کنید. این راهکار هم گاهی مشکل را حل می‌کند.
موفق باشید.
سلام استاد وقت بخیر. سوالی که داشتم اینه که ایا ضرورتی داره تو قسمت لایه ها، اسم فریم ها رو تغییر بدیم؟ من توی فیلمها یکم گیج میشم وقتایی که هی دارین اسم گذاری میکنید براشون.
و سوال دیگه ای که داشتم چرا فونتهای فارسی رو برای من نمیاره؟ عددهاییم که مینویسم انگلیسیه… با وجودی که کارایی که تو جلسه تایپوگرافی هم گفتید انجام دادم
درود بر شما. وقت بخیر
نام‌گذاری فریم‌ها الزامی نیست ولی خب مرتب می‌شود. موقع خروجی گرفتن فایل‌ها اسم فایل‌ها بهتر می‌شود. ضمن اینکه خودمان هم راحت‌تر بعدا می‌توانیم بین فریم‌ها چیزی را تغییر بدهیم. قرار است فیگما در آپدیت‌های جدید روش‌هایی برای rename کردن ارائه کند. پلاگین‌هایی نیز برای این موارد وجود دارد.
برای اینکه فونتهای نصب شده در سیستم عامل شما کار کند، باید installer آنرا نصب کنید. در صفحه figma.com/downloads بروید آنجا installer هست. (سمت راست صفحه)
فونت وزیرمتن هم اعداد انگلیسی دارد و هم پارسی. برای اینکه اعداد پارسی باشند باید در tab جزئیات تایپوگرافی بروید و مقدار farsi digits رو تیک بزنید فعال بشود.
موفق باشید.