آشنایی با صفحه آرایی در Grid

@title

امروزه با پیشرفت سریع تکنولوژی و استفاده وسیع کاربران از اینترنت گوشی همراه لزوم واکنش گرا بودن سایت ها بیشتر از قبل مورد توجه قرار گرفته در واقع یکی از اولیه تری انتظارات یک کاربر از یک سایت این است که با باز کردن سایت مورد نظر در نمایشگرای مختلف با یک وب سایت در هم ریخته و نامرتب مواجه نشود.

براین اساس طراحی سایت واکنش گرا که در اصطلاح به آن "ریسپانسو" نیز گفته میشه از الزامات طراحی سایت با نماسایت است .

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

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

ما برای گریدبندی از سیستم BC-Col که مخفف Basis-Core استفاده می کنیم .

Field Elements یا اِلمان ها :

@title

شما در طراحی با المان ها سر و کار داریدن که آنها در واقع بلاک های شما هستن.

این المان ها می توانند متن , تصویر یا ترکیبی از آنها باشن . البته رنگ زمینه المان محسوب نمی شه

نام هر المان می تونه یک بخش کانتِینر پدر باشه .

Columns یا ستون ها :

@title

المان هایی که توضیحات آن داده شد باید در تعداد مشخصی از ستون ها قرار بگیره .

قاعدتا در طراحی ، عرض ستون ها نباید تغییر کنه ولی تعداد ستون ها در Desktop دوازده , در Tablet هشت و در موبایل چهار هست .

با این حساب شما هر چیزی میتونین استفاده داشته باشین یعنی اندازه ستون ها و تقسیم بندی آنها با توجه به فاصله بین ستون ها باید بر اساس نحوه چیدمانی که برای المان ها دارید باشه .

Gutters یا گپ ها :

@title

Gutters فواصل بین ستون های شما هستن که عموما20Px در نظر گرفته میشه .

این فواصل در طراحی های بلاک محور و کارت محور مثل گالری بسیار مهم هستن. در سیستم های طراحی عموما با کاهش اندازه Device فاصله ها هم کم میشه .

Side Margin یا فواصل بیرونی:

@title

فضای بیرونی در واقع فضای سفید بیرون از عرض مطالب و Content شما هست.

فواصل بیرونی با افزایش اندازه عرض Device افزایش پیدا میکند. Side Margin ها عموما در موبایل 20-30 Px هست .

در ادامه به برخی از قوانین گریدبندی در طراحی اشاره می کنیم :

@title

1. قرار دادن المان در ستون های مشخص :

این انتخاب شما هست که چه تقسیم بندی برای ستون ها (grid) در نظر میگیرین که 4 تا 3تایی یا 4تا 3تایی یا 6-6 ستون باشه.

2. رها نکردن المان ها بین فضا و فواصل خالی :

المان ها باید در ستون ها قرار بگیرن و اگه این مسئله به هر شکلی رعایت نشه یعنی شما گریدبندی را رعایت نکردین .

3. مشکلی ندارد اگر المان وکانتینر اصلی ( پدر ) در ستون مشخص قرار گرفته است و المان های داخلی (فرزند) شما با گریدها هم تراز نباشه.

4. استفاده نکردن از ستون ها به عنوان Padding

فضاهای سفید بیرونی در واقع Padding شما هستن و دیگر نیازی به در نظر گرفتن یک ستون به عنوان Padding نیست .

5. المان های (Full Bleed ) تمام صفحه را که صد در صد مرورگر و محیط اجرایی هستن را نباید به عنوان در نظر نداشتن ساختار گریدبندی طلقی کرد .

در طراحی همیشه استثناهایی هم وجود داره مثل فوتر – هدر – Nav – اسلایدر .

گاهی برای اینکه در Nav فضای بیشتری داشته باشیم باید تمام صفحه در نظر بگیریم.

عموما در طراحی گرید محور عرض ستون ها و فواصل ثابت باقی می مونه و تنها نام گذاری ستون ها تغییر میکنه اما چرا ؟

فرض کنین شما 3 کارت در Desktop را در 4 ستون قرار میدهید.

در Tablet شما باید 2 کارت را در یک ردیف و کارت دیگر در ردیف بعدی همین طور در تلفن همراه کارت ها در 4 ستون قرار میگیره که هر کارت در یک ریف و بقیه کارت ها در اسکرول عمودی قرار خواهند گرفت و در نتیجه نیازی به تغییر اندازه ستون ها نیست .

تهیه شده

توسط تیم تحریریه نماسایت


پیام گذاشتن


refresh
captcha

logo

برای ورود به کسب و کار اینترنتی این گیره به کارتان می‌آید

استفاده از مطالب سایت برای مقاصد غیر تجاری و با ذکر منبع بلا مانع است. کلیه حقوق این سایت متعلق به شرکت منظومه نگاران نت می باشد