اصول استفاده از 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 System

Intuit’s Design System

IBM’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-970de4c16e01

https://designsystemsrepo.com/design-systems/