در طراحی رابط کاربری یکی از مهمترین نیازها ایجاد ساختاری منظم و قابل اعتماد است. سیستم گرید در متریال دیزاین برای همین هدف توسعه یافته است. این سیستم کمک میکند محتوای صفحه در موبایل و تبلت و دسکتاپ با چینشی هماهنگ و واکنشگرا نمایش داده شود. متریال دیزاین و نسخه MDL آن امکان ایجاد چیدمان حرفهای را بدون پیچیدگی فراهم میکنند. این مقاله یک بررسی کامل از ساختار گرید و نحوه کارکرد آن ارائه میدهد.
سیستم Grid در Material Design چیست؟
گرید در متریال دیزاین یک ساختار ستونبندی استاندارد است!!! این ساختار پایهای برای چیدمان واکنشگرا محسوب میشود . ستونهای گرید در سه دستهبندی اصلی قرار میگیرند.
- ۱۲ ستون در دسکتاپ.
- ۸ ستون در تبلت.
- ۴ ستون در موبایل.
این تقسیمبندی باعث میشود محتوا در هر اندازه صفحه قابل پیشبینی باشد . نتیجه کار یک صفحه منظم و خواناست.
رفتار Cell ها در گرید
هر گرید از چند Cell تشکیل میشود. هر Cell میتواند یک یا چند ستون را اشغال کند. دو رفتار مهم برای Cell ها تعریف شده است.
۱. انتقال به ردیف بعد
اگر فضای خالی ردیف برای Cell کافی نباشد عنصر به خط بعد منتقل میشود .
۲. اشغال یک ردیف کامل
اگر اندازه Cell از تعداد ستونهای موجود در ردیف بیشتر باشد ردیف را به صورت کامل در اختیار میگیرد.
این دو قاعده موجب میشود گرید بدون نیاز به کدنویسی پیچیده رفتار واکنشگرا داشته باشد.
کلاسهای اصلی در گرید MDL
کلاسهای پایه
- mdl-grid
معرفیکننده یک کانتینر گرید.
- mdl-cell
تعریف یک خانه در ساختار گرید.
کلاسهای مربوط به ستونبندی
- mdl-cell–N-col
تعیین تعداد ستونها. مقدار بین یک تا دوازده.
- mdl-cell–N-col-desktop
تعیین اندازه در نمایشگر دسکتاپ.
- mdl-cell–N-col-tablet
وضعیت در نمایشگر تبلت.
- mdl-cell–N-col-phone
بررسی وضعیت در موبایل.
این کلاسها باعث میشوند Cell ها در هر نمایشگر اندازه مناسب خود را دریافت کنند.
کلاسهای پنهانسازی
- mdl-cell–hide-desktop
- mdl-cell–hide-tablet
- mdl-cell–hide-phone
این کلاسها برای حذف عناصر در نمایشگرهای خاص استفاده میشوند .
کلاسهای تراز عمودی
- mdl-cell–top
- mdl-cell–middle
- mdl-cell–bottom
این کلاسها موقعیت عمودی محتوای Cell را مشخص میکنند.
کلاسهای فاصله و پر شدن
- mdl-grid–no-spacing
حذف فاصله میان Cell ها .
- mdl-cell–stretch
پر کردن کامل فضای عمودی.
مزیتهای سیستم گرید در متریال دیزاین
۱. واکنشگرایی دقیق
رفتار Cell ها در دستگاههای مختلف واضح و استاندارد است. توسعهدهنده نیاز به Media Query های متعدد ندارد.
۲. نظم بصری
ستونها و فواصل از قبل استاندارد شدهاند. همین موضوع منجر به هماهنگی ظاهری صفحه میشود .
۳. پیادهسازی سریع
برای ساخت یک چیدمان متنوع تنها کافی است تعداد ستونها تغییر داده شود .
۴. هماهنگی با زبان طراحی متریال
اگر پروژه بر پایه متریال دیزاین باشد استفاده از این گرید بهترین نتیجه را ارائه میدهد .
چگونه یک گرید ساخته میشود؟
روند ساخت گرید ساده است. یک Container معرفی میشود. سپس Cell ها داخل آن قرار میگیرند. هر Cell تعداد ستون مشخصی دارد. با تغییر عرض صفحه اندازه Cell ها نیز تغییر میکند. نتیجه کار یک ساختار واکنشگراست که بدون تصویر هم قابل فهم است .
مقایسه گرید MDL با Bootstrap
گرید متریال دیزاین بهصورت طبیعی با زبان طراحی گوگل هماهنگ است و ساختار ستونهای آن بسته به نوع صفحه میان ۴، ۸ و ۱۲ ستون تغییر میکند. این انعطاف باعث میشود چیدمان همیشه با استانداردهای بصری متریال هماهنگ بماند . در مقابل بوتاسترپ همیشه از یک ساختار ۱۲ستونی ثابت استفاده میکند و تغییرات معمولاً از طریق کلاسهای متعدد انجام میشود.
متریال دیزاین در استفاده روزمره سادهتر است زیرا با تعداد کلاس کم میتوان چیدمان واکنشگرا ساخت . بوتاسترپ نیز پاسخگو است اما بیشتر به Breakpointها وابسته است و برای برخی چیدمانها به کدنویسی بیشتری نیاز دارد .
به طور خلاصه اگر پروژه بر پایه اصول طراحی گوگل پیش میرود و یکپارچگی ظاهری اهمیت دارد، گرید متریال انتخاب بهتر است. اما اگر هدف سرعت توسعه و انعطاف گسترده باشد، بوتاسترپ کارایی بیشتری ارائه میدهد.
نتیجهگیری
سیستم گرید در متریال دیزاین یک بستر ساختاریافته و واکنشگرا برای طراحی صفحات وب ایجاد میکند. این سیستم از ستونبندی مشخص و کلاسهای ساده استفاده میکند. همین ویژگیها باعث میشود توسعهدهنده بتواند بدون کدنویسی اضافی چیدمانی استاندارد و منظم ایجاد کند. استفاده از گرید متریال در پروژههای مبتنی بر طراحی گوگل باعث افزایش خوانایی صفحه و بهبود تجربه کاربری میشود. نتیجه کار یک رابط کاربری پایدار و هماهنگ است .
