اصول استفاده از Responsive grids

گرید ها روشی برای هم ترازی سیستماتیک، نظم بخشیدن ، ایجاد سلسله مراتب و "منطق" طراحی های طرح های شما هستند. این امر باعث می شود همه چیز کمتر شناور به نظر برسد ومنظم و زیباتر به نظر برسند و به طور کلی می توانید با نگاه به طرح ها بگویید چه کسی از گرید به درستی استفاده نمی کند. با تبدیل شدن افراد به طراحان بهتر ، چشمان آنها دائماً در همه جا خطوط افقی و عمودی می کشند تا این نظم و تراز را ایجاد کنند و طرح قدرتمند را تشخیص دهند.مطمئنا همه شما میدانید که چرا باید از گرید ها در طراحی استفاده کنید اما تا به حال به این فکر کرده اید نحوه استفاده درست از این گریدها چگونه میباشد؟بهتر است در ابتدا آناتومی گرید را توضیح دهیم.Field Elementsبلوک های طراحی شما هستند که میتواند شامل عکس, متن و یا هر المان دیگری باشداسامی دیگر مثل units, elements, parent containers هم به همین معنی استفاده میشود.Columnsستون‌ها خط های ضخیم رنگی هستند که عرض محتوای شما را تشکیل میدهند. المان های طراحی شما روی تعداد مشخصی از ستون ها قرار میگیرند به طور سنتی عرض ستون ها در یک سیستم طراحی تغییر نمیکند اما تعداد ستون ها در سیستم‌های مختلف عوض میشود در رایانه ها 12 ستون، در موبایل 4 و در تبلت به 8 ستون تغییر میکند .شما از هر اندازه ستون میتوانید برای طراحی خود استفاده کنید که این اندازه بین 60 تا 80 پیکسل است اما انتخاب بهترین عرض خیلی مهم است چون عرض محتوای شما را در برمیگرد و به طرح شما زیبایی میدهد.Guttersگاتر به فاصله بین ستون ها گفته میشود که اندازه رایج آن 20 پیکسل میباشد. استفاده از این فضای سفید باعث خواناییِ بهتر المانهای صفحه طراحی شما میشود .این اندازه زمانی که میخواهید یک masonry design یا گالری تصاویر طراحی کنید خیلی مهم است .Side marginsبا عنوان outside gutters هم شناخته میشوند در واقع حاشیه های جانبی برای طراحی بهتر شما هستند که از این حاشیه ها به وفور در طراحی هایتان استفاده میکنید.حال که با عبارات پایه آشنا شدیم بهتر است ببینیم چگونه باید ازگرید ها استفاده کرد البته این نکته هم مد نظر داشته باشیم این قوانین بایدی ندارند و فقط برای دیزاین تمیزتر به ما کمک میکنند.قرار گیری المان های صفحه روی تعدادی از ستونهامحتوای شما باید روی تعداد مشخصی از ستون ها قرار بگیرند حال به هر نحوی که دوست دارید در مثال زیر کارت ها در ستون های 3 تایی ,6 تایی ,4 تایی قرارگرفته اند .ممکنه با خودتان بگوید به این صورت محتوای ما خیلی بهم نزدیک میشوند(و قانون فضای سفید نقض میشود) و ممکن است در نگاه اول بهم ریخته نشان داده شوند.اما برا اینکه نظم خود را رعایت کنیم میتوانیم به صورت زیر طراحی کنیم.در تصویر در واقع محتوای 3*3 و منظمی را داریم که هر ستون یک حاشیه نامرئی دارد جهت نظم بهتر و پیروی از این قانون و میتوانید این موضوع را با برنامه نویس خود به راحتی درمیان بزارید.ببینید تصویر چقدر تمیز و مرتب میباشد.محتوی را به صورت مرتب روی ستون ها قرار دهید محتوا را بین خطوط سفید رها نکنیدنیازی نیست همه المان ها قوانین گرید را رعایت کنند فقط کافی است المان مادر از قانون گرید پیروی کندکارت اصلی روی ستون ها قرار گرفته اگر هیچ دلیلی برای جایگذاری المان ها خارج از حاشیه ها ندارید این کار را نکنیدفکر نکنید صفحه مرورگر یک بوم نقاشی است که میتوانید هر محتوایی را در هر جایی از صفحه قرار دهید محتوای مهم و کلیدی باید در حاشیه درست صفحه قرار بگیرندحالا ببینیم ریسپانسیو چگونه کار میکند و چند نوع داریم؟تا این جا قسمت های مختلف گرید و نحوه استفاده صحیح را یاد گرفتیم ببینیم انواع ریسپانسیو توی مرورگر ها چگونه کار میکنند.توی طراحی سنتی عرض ستون ها و گاتر ثابت میماند و فقط تعداد ستون ها در دستگاه های مختلف تغییر میکند.حال چرا ؟به این دلیل که کار برای طراحان راحتر میشود.برای مثال فکر کنید صفحه ای برای دسکتاپ که شامل سه کارت در سطر اول میباشد طراحی کرده اید حال اگر همین صفحه در تبلت نمایش یابد دو کارت در سطر اول و کارت سوم در سطر دوم نمایش می یابد و اگر در موبایل باشد در هر سطر یک کارت نمایش میدهید.Fixed Gridاگر برنامه نویس شما از این حالت برای تغییر اندازه استفاده کند با هر تغییر اندازه و نزدیک شدن به نقاط شکست ,یک سری حاشیه دور متن و تصاویر شما به وجود می آید در این حالت تصاویر به صورت داینامیک تغییر اندازه نمیدهند در واقع با تغییر اندازه مرورگر تصاویر و متن ها به صورت ثابت در صفحه میباشند.Fluid gridدر این حالت انگار تصاویر و متن ها در صفحه به صورت سیال هستند و با هر تغییر اندازه مرورگر اندازه متن و تصویر هم عوض میشود.سایت Airbnb این حالت را بخوبی ایجاد کرده است Hybrid Gridsهمچنین میتوانید از هر دو نمونه ثابت و سیال به صورت ترکیبی استفاده کنید اصولا بیشتر سایت ها به صورت ثابت طراحی میشوند و در موبایل به صورت سیال ,چون استفاده افراد از موبایل بیشتر استسیستم های گرید جالب!!این سیستم ها درسته از قوانین ستون و گاتر که در بالا گفتیم استفاده نکرده اند اما با یک قاعده خیلی خوب این قوانین را تحت سیستم خود پیاده کرده اند .Invision’s Genome Projectاین سایت نه تنها واقعاً خوب طراحی شده است ، بلکه در واقع از نمایش سیستم گرید خود در طراحی استفاده می کند تا حتی زیباتر به نظر برسد. در این سیستم هیچ گاتری وجود ندارد و 8 ستون ضخیم وجود دارد.حتما به این سایت سر بزنید قسمت جذاب منوی سایت را ببینید.Dropbox Designدر این سیستم هیچ حاشیه جانبی و گاتری تعریف نمیشود.در عوض صفحه به دو قسمت تقسیم میشود.محتوا در این قسمت ها قرار میگیرد و با هر قسمت مثل یک صفحه هنری جداگانه رفتار میشود.در نهایت ....هدف از این پست ارائه برخی راهنمایی ها در چگونگی استفاده از گرید در طراحی ریسپانسیو بود.بهترین کاری که می توانید انجام دهید این است که ببینید سایت های دیگر چگونه عناصر موجود در صفحه خود را تراز می کنند ، شروع به دیدن الگوها کنید.دیزاین سیستم های زیر میتونه برای درک بهتر این موضوع کمک کنه.Google’s Material Design SystemIntuit’s Design SystemIBM’s Carbon Design System…And here’s huge list of other systems you can look throughپس از درک کامل نحوه کار شبکه ها ، شما یک طراح بهتری میشوید . من همچنین طراحی تمیزتر و تمیزتر می شود که در صورت داشتن جریانی که از صفحه ای به صفحه دیگر می رود ، محصول نهایی را با کیفیت بالا می برد. بهتره سیستم گریدی پیدا کنید که برای شما و تیم توسعه اتان مناسب باشد و اطمینان حاصل کنید که همه طراحان یک تیم از گرید به همین روش استفاده می کنند.امیدوارم این مقاله براتون مفید بوده باشه منبع :https://uxdesign.cc/responsive-grids-and-how-to-actually-use-them-970de4c16e01https://designsystemsrepo.com/design-systems/