چه کسی از طراحی منظم و منسجم بدش می‌آید؟ برای نظم در طراحی سایت یا محصولات دیجیتال راهی جز استفاده از گرید سیستم نداریم. در این قسمت از دوره آموزش ui ux رایگان آژانس نوآوری رسام قصد داریم به‌صورت کاربردی به سوال گرید سیستم چیست؟ پاسخ دهیم. در واقع این مقاله به شما کمک می‌کند تا بخش‌های مختلف محصول دیجیتال خود را، در بخش‌بندی‌های منسجم و دقیق، طراحی کنید. برای درک بهتر این موضوع، ابتدا باید با مفاهیمی که در گریدسیستم مورد بحث قرار می‌گیرد، آشنا شویم. دقت داشته باشید که تمامی نقاط شکست یا Breakpointها، مانند دسکتاپ، تبلت و موبایل، گرید سیستم خاص خود را دارند.
تفاوت Container و Container Fluid
به تصویر بالا دقت کنید. اگر کل عرض صفحه را ملاک قرار بدهیم (یعنی کل ستون‌ها و مارجین سبز رنگ که عملا شامل کل عرض صفحه می‌شود)، عملا Container fluid را تعریف کرده‌ایم. Container اما صرفا تمام آن 12 ستونی هستند که در بالا می‌بینید. اغلب در نسخه دسکتاپ، بین 1200 تا 1400 پیکسل است. بنابراین Container Fluid محدود نیست و هرچه عرض مانیتور بیشتر شود (و یا زوم کمتر بشود)، عرض صفحه نیز بزرگتر می‌شود. اما Container محدود است به اندازه همان 12 ستون. اغلب سکشن‌ها و محتوای آن‌هادر فضای Container قرار می‌گیرند.
اجزای گرید سیستم
گرید سیستم‌ها معمولا سطر یا row و ستون یا column دارند. تعداد ستون‌ها با توجه به نسخه دسکتاپ یا اپلیکشین متفاوت است. اغلب در نسخه دسکتاپ، 12 ستون استفاده می‌شود. برخی از طراحان برای راهنمایی بیشتر و تنظیم ارتفاع، از سطر نیز در گریدسیستم خود استفاده می‌کنند. همچنین، به شیارهای بین ستون‌ها Gutter گفته می‌شود. افزون بر این، Margin یا فاصله خارجی، همان فاصله سبز رنگ در تصویر بالاست که وجه تمایز بین Container و Container Fluid است.
به تصویر بالا دقت کنید. برای طراحی کارت‌های بلاگ، از گریدسیستم داخل فیگما استفاده شده است. گرید باعث می‌شود که ما به سهولت، برای هر کارت، 4 ستون در نظر بگیریم بدون اینکه مشکلی در ظاهر و اندازه‌ها رخ بدهد. همچنین وجود شیار یا Gutter بین آنها، تفکیک خوبی بین کارت های بلاگ ایجاد کرده است. خطوط افقی 8 پیکسلی که مشاهده می‌شود نیز، برای کمک به تنظیم ارتفاع و فاصله‌گذاری است. دقت کنید: سایزهایی که اینجا بیان می‌شود، لزوما برای همه پروژه‌ها مناسب نیستند و گریدسیستم‌های متنوعی وجود دارد. البته اندازه‌هایی که بیان می‌شوند، اغلب مناسب هستند.
گرید موبایل
اغلب گرید موبایل 4 ستونه ایجاد می‌شود. همچنین با توجه به کوچک بودن این Breakpoint مقدار Gutter را نیز 16 در نظر گرفته‌ایم. فاصله اطراف یا Margin نیز همان 16 پیکسل در نظر گرفته شده‌اند. (اندازه عرض frame از 360 تا 428 پیکسل که مقادیر رایج گوشی‌های هوشمند امروزی است، در نظر گرفته شده است).
گرید تبلت
در این Breakpoint اغلب به صورت 6 ستونه، گرید ساخته می‌شود. مقدار Gutter اینجا نیز 16 در نظر گرفته می‌شود. مقدار مارجین از حاشیه نیز مقدار 48 پیکسل (البته با فرض استفاده از frame تبلت که به صورت Portrait قرار دارد).
گرید دسکتاپ
گرید دسکتاپ با فرض استفاده از فریم 1440 فیگما، بهترین حالت با 12 ستون و Gutter با اندازه 24 پیکسل ساخته می‌شود. همچنین Margin (برای هر دو طرف راست و چپ) مناسب برای دسکتاپ، با این اندازه این فریم مقدار 80 پیکسل مناسب است. گاهی برای پروژه فروشگاهی ممکن است Margin را کمتر بگیریم تا مقدار Container از 1280 پیکسل، به 1320 پیکسل برسد. این اندازه‌ها به طور کل خوب هستند. ولی گرید سیستم با توجه به نوع پروژه، تغییر کند.
گرید سطری – Row Grid
از این گرید نیز برای ایجاد سطر استفاده می‌شود. دلیل آن نیز، سهولت جابجا کردن عناصر و دقت در ارتفاع است. (مثلا استفاده از سطرها با فواصل 8 پیکسلی که در ویدئو توضیح داده شد).
فاصله‌گذاری یا Spacing در UI
در تصویر مقابل، فاصله‌گذاری با نسبت 8 مشاهده می‌شود. (در تصویر بالاتر نیز، اعداد این فاصله‌گذاری را مشاهده فرمودید). این اعداد از صفر شروع شده و با فاصله‌های 8تایی، مشخص می‌شوند. با این تفاوت که از اعداد 4 و 12 نیز استفاده می‌شود. اما چرا باید از نسبت 8 استفاده کنیم؟
حقیقت است است که بایدی وجود ندارد. اما استفاده از نسبت 8 به ما کمک می‌کنند که درگیر مقادیر اعشاری و فرد نشویم. این مقوله بعداً در برنامه‌نویسی، ممکن است دردسرساز شود. به طور کل، در فاصله‌گذاری عناصری که به هم مرتبط هستند، طبق قواعد گشتالت، به یکدیگر نزدیک‌تر هستند. پله‌های فاصله‌گذاری باعث می‌شود که فاصله‌گذاری‌ها دقیق بوده و مبتنی بر حدس و خطای چشم نباشد.
گرید سیستم و انسجام بیشتر در طراحی
در این قسمت از دوره طراحی رابط و تجربه کاربری آموزش گرید سیستم، فاصله‌گذاری در UI و متعلقات مربوط به این دانش مهم را توضیح دادیم. هر چقدر اصول فاصله گذاری در طراحی را رعایت کنیم، بدون شک محصول دیجیتالی منحصر به فردی پیاده سازی خواهیم کرد. خوشحال می‌شویم تجربیات خود را با ما به اشترک بگذارید. همچنین اگر سوالی در مورد این مبحث داشتید از بخش دیدگاه‌ها، از متخصصین آژانس نوآوری رسام بپرسید.
موفق باشید 😍
20 پاسخ
سلام و خسته نباشید.
واقعا اموزشتون عالی و کامل هست یک دنیا ممنونم از شما استاد بزرگوار.
درود و سپاس از لطف و همراهی شما.
سلام وقتتون بخیر، من قبلا یه دوره کلاس 30 ساعته با شما گذروندم و ممنونم ازتون
راستش الان یه مشکلی دارم من مارجین و 80 پیکسل در نظر میگیرم اما موقع پلی شدن و نمایش تصویر از سمت چپ فاصله زیادی میفته ممنون میشم راهنمایی کنین.
درود بر شما. وقت بخیر
این دوره محتوای بسیار بیشتری دارد و نسبت به موارد قبلی بروز هست.
اگر فاصله خیلی زیاد هست به اندازه فریم اصلی نگاه بکنید. مثلا 1440 هست یا 1920 و یا حتی بزرگتر. چون اون مقدار ممکن است تغییر کرده باشد و باعث بشود که فواصل خیلی زیادتر دیده شود. همچنین شاید اندازه column ها کمتر باشد و این اتفاق رخ داده باشد.
موفق باشید.
سلام عرض ادب
من توی انتخاب این کانتینر واقعا مشکل دارم.
شما گفتین تو دسکتاپ یک عددی بین 1300 تا 1400 معمولا هست.
مثلا من عرض 1344 با gutter 24 رو برای طرح فروشگاهم مناسب میدونم.
1. آیا این عرض مناسب هست؟
2. این هرعددی باشه استاندارد هست؟
درود بر شما. وقت شما بخیر
برای نسخه دسکتاپ سایز کانتینر اغلب در بازه 1280 تا 1400 هست. نمی‌توان گفت مثلا دقیقا فلان عدد باشد. در واقع عرض کل کانتینر برگرفته از عرض ستون و عرض گاتر و تعداد ستون هست. مثلا 24 برای گاتر خوب هست. هم نسبت 8 هست و هم اینکه بوت‌استرپ و خیلی از library های فرانت هم از این سایز استفاده می‌کنند. من مقادیری که برای نسخه دسکتاپ گفتم مناسب و رایج هستند. اما اگر باز منبع دیگری رو خواستید مدنظر بدید، مثلا می‌توانید از گرید بوت‌استرپ و Tailwind و… استفاده کنید. آنها نیز تقریبا همین مقادیر و اندازه‌ها را دارند. مثلا اغلب در پروژه‌های دسکتاپ عرض ستون بین 80 الی 90 هست. مگر اینکه پروژه داشبورد باشد که چون سایدبار دارد کمی روی سایزها تفاوت ایجاد خواهد شد. در دیزاین‌سیستم‌های مختلف هم نمونه‌های زیادی از گریدسیستم وجود دارد. در جلسه دیزاین‌سیستم موارد زیادی از آنها را معرفی کرده‌ایم.
موفق باشید.
استاد من سوال دارم ازتون. چجوری میتونم باهاتون در ارتباط باشم؟
درود بر شما. وقت شما بخیر
بله در خدمت هستیم. کلا چه در این دوره و چه در دوره جدید وردپرس هر سوالی بود در جلسه مربوط به آن مطرح بفرمایید ما حتما همان روز به آن پاسخ خواهیم داد.
موفق باشید.
با سلام ممنون از آموزش خوبتون
ببخشید برای اندروید هم با همان اندازه‌های ios گرید بندی میکنیم؟
و برای داشبورد که میفرمایید گرید بندی متفاوتی داره هم میشه اندازه‌هاش رو بگید؟
درود بر شما خانم زمانی، وقت بخیر
برای اندروید می‌توان بریکپوینت خاص خودش رو انتخاب کرد (فریم android large را انتخاب بفرمائید). برای اندروید هم می‌توان از همان اندازه‌هایی که در گرید گوشی گفتیم استفاده کرد. چون اغلب گریدهای نسخه موبایل 4 ستونه هستند و ماریجن و گاتر 16 پیکسلی اغلب گزینه مناسبی هست.
موفق باشید.
https://rasam.agency/wp-content/uploads/2024/01/grid-spacing.webp سلام اینو چجوری باید ساخت؟ فایل رو دانلود کردم گفتید import کنیم ولی اصن باز نمیشه و اینکه بعد import میشه edit کردش؟
درود بر شما. وقت بخیر.
تصویر بالا همان گریدهایی هستند که در همین ویدئو ساخته شده اند. یکم قیافه فیگما تغییر کرده و بروز شده و شاید از این نظر کمی مشکل ساز شده باشد. بنابراین اگر خواستید با نسخه دسکتاپ که هنوز ظاهر قدیمی تر را دارد کار کنید و یک بار دیگه ویدئو گرید سیستم را ببینید.
موفق باشید.
سلام وقتتون بخیر
ممنون از محتوای عالیتون خیلی مفید و کاربردی بود.
درود و سپاس از لطف شما
موفق باشید.
سلام. وقت بخیر
استاد جای نوار ابزار فیگما عوض شده و به پایین صفحه منتقل شده؟ یا تنظیمات سیستم من دچار تغییراتی شده؟ چون تا چند روز پیش بالای صفحه بود!!
درود بر شما. وقت شما بخیر
اخیرا نرم‌افزار فیگما بروز شده. وقتی داخل پروژه هستیم، یک علامت سوال با زمینه مشکی در پائین، سمت راست صفحه هست. روی آن کلیک کنیم می‌توانیم گزینه Go back to previous ui… رو انتخاب کنیم تا برگرده به ظاهر قبلی.
موفق باشید.
سلام استاد من در حال دیدن دوره باکیفین و عالی شما می باشم من در قسمت 14 رسیدم خواستم بگهم که چگونه فونت ها ورنگ ها رو رو ذخیره کنم راهنمایی کنید استاد.
درود بر شما آقای اکبری، وقت بخیر
ذخیره رنگ‌ها و فونت‌ها را در چه جایی می‌فرمائید؟ اضافه کردن به استایل‌های فیگما اگر مدنظر هست، در جلسات 12 و 13 مفصل عرض کردم.
موفق باشید.
مثل همیشه عالی و کاربردی
سپاس از شما استاد گرامی
درود بر شما. وقت بخیر
سپاسگزارم از لطف و مهربانی شما. امیدوارم مفید واقع بشود.
موفق باشید.