جلسه ی 13 آموزش فیگما / گرید سیستم | Grid System in UI Design

درود به شما همراهان گرامی. در این ویدئو از دوره رایگان آموزش طراحی رابط و تجربه کاربری، قصد داریم گریدسیستم در فیگما برای طراحی uiux را آموزش دهیم. چه کسی از طراحی منظم و منسجم بدش می‌آید؟ برای نظم در طراحی سایت یا محصولات دیجیتال راهی جز استفاده از گرید سیستم نداریم. قصد داریم به‌صورت کاربردی به سوال گرید سیستم چیست؟ پاسخ دهیم. در واقع این ویدئو به شما کمک می‌کند تا بخش‌های مختلف محصول دیجیتال خود را، در بخش‌بندی‌های منسجم و دقیق، طراحی کنید. برای درک بهتر این موضوع، ابتدا باید با مفاهیمی که در گریدسیستم مورد بحث قرار می‌گیرد، آشنا شویم. دقت داشته باشید که تمامی نقاط شکست یا Breakpointها، مانند دسکتاپ، تبلت و موبایل، گرید سیستم خاص خود را دارند. تفاوت Container و Container Fluid اگر کل عرض صفحه را ملاک قرار بدهیم (یعنی کل ستون‌ها و مارجین سبز رنگ که عملا شامل کل عرض صفحه می‌شود)، عملا Container fluid را تعریف کرده‌ایم. Container اما صرفا تمام آن 12 ستونی هستند. اغلب در نسخه دسکتاپ، بین 1200 تا 1400 پیکسل است. بنابراین Container Fluid محدود نیست و هرچه عرض مانیتور بیشتر شود (و یا زوم کمتر بشود)، عرض صفحه نیز بزرگتر می‌شود. اما Container محدود است به اندازه همان 12 ستون. اغلب سکشن‌ها و محتوای آن‌هادر فضای Container قرار می‌گیرند. اجزای گرید سیستم گرید سیستم‌ها معمولا سطر یا row و ستون یا column دارند. تعداد ستون‌ها با توجه به نسخه دسکتاپ یا اپلیکشین متفاوت است. اغلب در نسخه دسکتاپ، 12 ستون استفاده می‌شود. برخی از طراحان برای راهنمایی بیشتر و تنظیم ارتفاع، از سطر نیز در گریدسیستم خود استفاده می‌کنند. همچنین، به شیارهای بین ستون‌ها Gutter گفته می‌شود. افزون بر این، Margin یا فاصله خارجی، همان فاصله سبز رنگ در تصویر بالاست که وجه تمایز بین Container و Container Fluid است. فاصله‌گذاری یا Spacing در UI فاصله‌گذاری با نسبت 8 در نظر گرفته می‌شود. این اعداد از صفر شروع شده و با فاصله‌های 8 تایی، مشخص می‌شوند. با این تفاوت که از اعداد 4 و 12 نیز استفاده می‌شود. اما چرا باید از نسبت 8 استفاده کنیم؟ حقیقت است است که بایدی وجود ندارد. اما استفاده از نسبت 8 به ما کمک می‌کنند که درگیر مقادیر اعشاری و فرد نشویم. این مقوله بعداً در برنامه‌نویسی، ممکن است دردسرساز شود. به طور کل، در فاصله‌گذاری عناصری که به هم مرتبط هستند، طبق قواعد گشتالت، به یکدیگر نزدیک‌تر هستند. پله‌های فاصله‌گذاری باعث می‌شود که فاصله‌گذاری‌ها دقیق بوده و مبتنی بر حدس و خطای چشم نباشد. ✅ هر سوالی داشتید در بخش کامنت ها بپرسید و این آموزش را برای دوستان علاقمند خود ارسال کنید. موفق باشید🌹 uiux uiux design uiuxfigma uiux tutorial for beginners figma figma tutorial figma tutorial for beginners figma tutorial step by step figma course figma 2025 figma color style فیگما آموزش فیگما آموزش uiux آموزش uiux با فیگما رابط کاربری تجربه ی کاربری طراحی سایت آموزش رایگان uiux آموزش رایگان فیگما آموزش فیگما پروژه محور آموزش فیگما برای طراحی سایت آموزش فیگما 2025 آموزش فیگما فارسی آموزش کامل فیگما و uiux 📖 معرفی منابع و تمرین برای این جلسه گریدسیستم و در ادامه آن بحث فاصله‌گذاری، به کل کار شما نظم می‌دهند. پس حالا که دوست دارید منظم باشید، این سه مقاله را با اشتیاق تمام مطالعه کنید. افزون بر این، بعد از دیدن ویدئو این جلسه، ساختار گرید را در فیگما تمرین کرده و آن را به استایل‌های فیگما اضافه کنید. https://www.nngroup.com/articles/usin... https://designforducks.com/ui-spacing... https://hype4.academy/articles/design... ✅ جلسه ی قبل👇    • جلسه ی 12 آموزش فیگما / ابزارهای تایپوگراف...   #فیگما #رابط_کاربری #تجربه_کاربری #دوره_رایگان_ui #دوره_رایگان_ux #آژانس_نوآوری_رسام #علیرضا_حمداللهی #آموزش_فیگما #کاربردپذیری #طراحی_سایت #گریدسیستم #figma #uiux #uiuxdesign #ui_design #ux_design #Alireza_Hamdollahi #ui #ux #usability #gridsystem #spacing