الگو شبکه بندی

شبکه بندی صفحات بر اساس سیستم های مختلف مثل bootstrap طراحی و اجرا میشود تا صفحات را بر اساس این سیستم بتوان هماهنگ و در یک چهارچوب خاص پیاده سازی کرد.

شبکه بندی یا grid system در واقع خطوط عمودی و افقی هستند که بستر طراحی را برایمان ساده میکنند تا توسعه دهنده های وب به راحتی بتوانند طرح های پیچیده را واکنش گرا (responsive) کنند به گونه ای که این بخش ها با هم تداخلی نداشته باشند.

مزایای استفاده از سیستم شبکه بندی:

  1. طراحی متناسب با سایز دستگاه (واکنش گرا)
  2. خوانایی و تناسب بصری
  3. انسجام و یکپارچگی سایت
  4. توسعه دهندگان میتوانند کدهای استاندارد بنویسند
  5. پشتیبانی اکثر مرورگرها از این سیستم

بررسی این الگو در وب سایت دیوار

در وب سایت دیوار از grid استفاده شده تا اجزای صفحه در فضای مربوط به خودشان قرار گیرند. سیستم شبکه بندی در لپ‌تاپ و مانیتور ها بر اساس 12 ستون است که از طرفین صفحه فاصله معینی دارند، به این فاصله margin می‌گویند و همچنین ستون ها هم از یکدیگر فاصله ی معینی دارند که به gutter معروف هستند. اندازه و تعداد ستون ها نسبت به نوع دستگاه متفاوت است، به طور مثال در موبایل تعداد ستون ها به 2 عدد کاهش می یابد به این دلیل که اندازه موبایل کوچکتر از دسکتاپ و یا تبلت ها است. شاید تا به الان کلمه break point را شنیده باشد، اگر اندازه عرض و طول دستگاه نمایش تغییر کند تعداد ستون های شبکه و margin و gutter هم تغییر میکند که به این حالت break point میگوند و دانستن این اندازه و تغییرات برای طراحی وب سایت واکنش گرا  بسیار مهم است. همانطور که در عکس ها مشاهده میکنید نحوه نمایش کارت های آگهی و بقیه اجزای صفحه نسبت به طول و عرض صفحه تغییر میکند. در وب سایت دیوار شبکه بندی به خوبی طراحی و اجرا شده همچنین طراحان با توجه به نیاز کاربران فضای منفی یا سفید را هم در نظر گرفته اند. این فضا باعث میشود طرح خوانایی، سلسله مراتب بصری و اطلاعاتی و مقیاس پذیر بهتری داشته باشد .

توجه کردن به این نکات جز اصول اولیه طراحی رابط کاربری(ui)  هر وب سایتی است. همچنین توسعه دهندگان با لحاظ کردن کدهای مربوطه میتوانند این اصول را پیاده سازی کنند. نرم افزارهای طراحی مثل فیگما، XD به صورت پیش فرض یک سری سیستم شبکه بندی را برای هر اندازه از صفحه در نظر گرفته اند که روند طراحی را آسانتر میکند. شبکه بندی bootstrap از متداولترین و پر طرفدارترین سسیستم های شبکه بندی وب سایت ها شناخته میشود.  در وب سایت دیوار هم از شبکه بندی CSS استفاده شده است.

 

نظر شما درباره طراحی بر اساس شبکه بندی چیست؟ آیا با خلاقیت و نوآوری مغایرت دارد؟ شما تاکنون از چه شبکه بندی ای  استفاده کرده اید؟ آیا نکته دیگری درباره شبکه بندی وجود دارد که ما به آن اشاره نکرده ایم؟

شما برایمان بنویسید.