گرید سیستم‌ها: مبانی و اصول مقدماتی

مبانی و اصول مقدماتی گرید سیستم‌ها

زمان تقریبی مطالعه: ۱۵ دقیقه

 

تا به‌حال به‌این موضوع فکر کردید که بعد از اینکه ساختار طراحی رو به‌دست آوردیم و دونستیم که در هر صفحه چه المان‌هایی وجود داره، بر چه اساسی باید این المان‌ها رو کنار هم قرار بدیم؟ چقدر حاشیه باید اطراف صفحه وجود داشته باشه؟ فاصله المان‌ها از کنار و بالا و پایین صفحه بر چه اساسی به‌دست میاد؟

جواب همه این‌ها در گرید سیستم‌ (Grid System) است. برای طراحی یک محصول کاربردی و در عین حال زیبا، استفاده از گرید سیستم‌ها در کنار مفاهیمی مثل روانشناسی رنگ‌ها و تایپوگرافی بسیار مهم و اثر بخشه. با استفاده از گرید، طراح‌ها می‌تونند محتوا و عناصر بصری رو بهتر و سریعتر سازماندهی و مدیریت کنند. گرید به طراحی واسط کاربری انسجام میده و باعث میشه که Layout متوازن و منظم داشته باشیم. علاوه بر طراح‌های محصولات دیجیتال، توسعه‌دهنده‌های واسط کاربری (Front-end Developer) هم، چه وب و چه موبایل، باید با مفهوم گرید آشنا باشند. اکثر کتابخانه‌های شناخته شده برنامه‌نویسی واسط کاربری از گرید سیستم‌ها تبعیت می‌کنند. مقاله امروز ما درباره گرید سیستم‌ها است.

 

تعریف گرید

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

 

اجزای گرید

آناتومی یک گرید از چند قسمت تشکیل میشه که به اون‌ها اجزای گرید گفته میشه. البته همه این اجزا در هر گریدی لزوما حضور نداره و این حضور بستگی به نوع گرید داره. در ادامه، مهم‌ترین اجزا رو معرفی می‌کنیم. این اجزا عبارتند از Format یا کادر، Margin یا حاشیه، Flowline یا خط جریان، Module یا واحد، Region یا ناحیه، Column یا ستون، Row یا سطر و Gutter یا شریان.

 

اجزای گرید سیستم

 

Format یا کادر: Format، محدوده‌ایه که محتویات و هر چیزی که در طراحی هست داخل اون قرار می‌گیره. در چاپ، این بخش یعنی کل صفحه و در وب‌سایت یعنی مرورگر (Browser).

Margin یا حاشیه: منظور از Margin، فاصله بین Format و لبه صفحه است. Margin یک نوع از فضاهای خالی است.

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

Module یا واحد: ماژول‌ها بلوک‌های گرید هستند که از تقاطع خطوط عمودی و افقی به‌وجود اومدند.

Region یا ناحیه: وقتی که Moduleهای همسایه با هم یک واحد رو تشکیل میدن، یک Region به‌وجود میاد. یک ناحیه افقی می‌تونه جایگاه یک فایل ویدئویی، و یک ناحیه عمودی جایگاه یک بلوک متنی باشه.

Column یا ستون: وقتی که یک Region به‌صورت عمودی شکل بگیره، ستون به‌وجود میاد.

Row یا سطر: وقتی که یک Region به‌صورت افقی شکل بگیره، سطر به‌وجود میاد.

Gutter یا شریان: به فضای خالی بین سطرها و ستون‌ها Gutter گفته میشه. اندازه ‌Gutterها باید با هم برابر باشه تا تناسب بصری به‌وجود بیاد.

 

انواع گرید‌ها

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

به‌صورت کلی، چهار نوع گرید وجود داره که می‌تونند متفارن  یا متقارن باشند و عبارتند از Manuscript یا کتابی، Colunm یا ستونی، Modular یا پیمانه‌ای و Baseline یا خطی. ما در این مقاله، گریدهای متفارن رو به شما معرفی می‌کنیم و در ادامه، به بررسی این گریدها می‌پردازیم.

 

گریدهای کتابی یا ‌‌Manuscript

به این نوع گریدها، تک ستونه هم گفته میشه و ساده‌ترین نوع گرید هستند. گرید Manuscript یک مستطیل بزرگه که فضای زیادی از صفحه رو می‌گیره و یک Margin اون رو احاطه می‌کنه. فایل‌های Word، مجله‌ها، کتاب‌های الکترونیک و به‌طور کلی طرح‌های مبتنی بر متن، از این ساختار تبعیت می‌کنند.

گرید کتابی

 

 

گریدهای ستونی یا Column

این گریدها صفحه رو به چند ستون تقسیم می‌کنند. این ستون‌ها برای تعیین عرض و ترازبندی عمودی المان‌های صفحه استفاده میشن. هر المان می‌تونه یک یا چند ستون رو در بر بگیره (البته به‌همراه Gutterهای آن)؛ بعنوان مثال، چند ستون در کنار هم با تشکیل یک Region، میتونن مکان ساید بار (ستون کناری صفحه) رو در صفحه مشخص کنند. ارتفاع هر بخش که در یک گرید ستونی قرار گرفته، بسته به حجم محتویات و قابلیت اسکرول، به‌صورت پویا می‌تونه تغییر کنه؛ اما اگه بخوایم هر بخش ارتفاع ثابتی داشته باشه، می‌تونیم از Flowlineها استفاده کنیم و اندازه المان‌های اون بخش رو با گرید تطبیق بدیم. گرید ستونی کار رو برای طراح‌ها خیلی ساده می‌کنه و عمده کتابخانه‌های توسعه واسط کاربری هم، به‌طور پیش‌فرض از این نوع گرید تبعیت می‌کنند.

گرید ستونی

 

گرید ستونی ۲

 

گرید پیمانه‌ای یا Modular

اگه به گرید ستونی، سطرها رو هم اضافه کنیم، گرید Modular به‌دست میاد. وقتی که بخوایم چند نوع المان با اندازه‌های مختلف در صفحه داشته باشیم، به‌اصلاح طرح موزائیک داشته باشیم، این نوع گرید خیلی می‌تونه کمکمون بکنه. شما به سادگی می‌تونید با ترکیب چند Module به سلیقه خودتون، ساختار دلخواهتون رو با نظم بهتری پیاده کنید. نکنه حائز اهمین اینه که با این گرید، می‌تونید همه انواع دیگه گرید‌ها رو ایجاد کنید. حتی حالت پایه این گرید، که در هر Module یک المان قرار می‌گیره، توسط شرکت‌های بزرگ مثل اپل استفاده میشه. این رو در نظر داشته باشید که کار با گرید Modular رو وقتی که توی کارتون خبره شدید انجام بدید.

گرید ماژولار

 

گرید ماژولار ۲

 

گرید خطی یا Baseline

دفترهای خطی رو یادتونه (یا شایدم مثل من هنوز استفاده می‌کنید!)؟ گرید خطی دقیقا مثل یک دفتر خطیه. هرجا که متن وجود داره، یک Flowline هم هست. با این گرید می‌تونیم به متون ساختار بدیم و خوندن رو برای کاربر ساده‌تر کنیم. فاصله بین خطوط یک متن از همین نوع گرید تبعیت می‌کنه. در مقاله اصول تایپوگرافی می‌تونید درباره ساختارهای متنی بیشتر بخونید. گرید خطی معمولا در کنار باقی گریدها به‌کار میره. بعنوان مثال، در شکل مربوط به بخش گرید ستونی، از گرید خطی هم استفاده کردیم.

گرید خطی

 

مزایای استفاده از گرید

خوب حالا که انواع گریدها رو معرفی کردیم، بیاید راجع‌به فایده‌شون هم با هم صحبت کنیم. این بدیهیه که گرید‌ها مفید هستند؛ اما هر چیز بدیهی لزوما ساده نیست.

 

مزیت شماره ۱: ساختار منظم، قابل فهم و جذاب

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

 

مزیت شماره ۲: انسجام محصول

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

 

مزیت شماره ۳: طراحی راحت و سریع

گرید مثل یک نقشه است. این نقشه بهمون می‌گه که هر المان باید کجا باشه و چقدر بزرگ یا کوچک باشه. وقتی که نقشه داشته باشیم، سریع‌تر راه رو پیدا می‌کنیم و به مقصدمون می‌رسیم.

 

مزیت شماره ۴: همکاری خوب و کارآمد بین طراح‌ها و توسعه‌دهنده‌ها

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

 

مزیت شماره ۵: تبدیل ساده‌تر به طرح رسپانسیو (Responsive)

 طراحی رسپانسیو یعنی اینکه یک طرح در صفحات مختلف با اندازه‌های مختلف به‌خوبی اجرا شه. طراحی رسپانسیو می‌تونه کار سخت و زمان‌بری باشه و استفاده از گرید این کار رو ساده‌تر می‌کنه. در طراحی رسپانسیو، با تغییر اندازه صفحه نمایش، اندازه یا تعداد اجزای گرید استفاده شده هم تغییر می‌کنه. بعنوان مثال، اگه در طراحی وب از ۱۲ گرید ستونی استفاده کنیم، می‌تونیم در حالت تبلت ۸ ستون، و در حالت موبایل ۴ ستون داشته باشیم. با این کار، نظم المان‌ها پابرجا باقی می‌مونه و وقتی که صفحه کوچک میشه، راحت‌تر می‌تونیم تصمیم بگیریم که چه المانی بالا یا پایین بره.

 

چطور از گرید سیستم‌ها در طراحی استفاده کنیم؟

یک نکته مهم اینه که گریدها در صفحات چاپ (کتاب، مجله، روزنامه، بنر و غیره) با گریدهای طراحی دیجیتال (وب، موبال) متفاوت هستند. در واقع، اندازه گریدها در طراحی دیجیتال، به‌دلیل متغیر بودن اندازه صفحه نمایش کاربرها، ثابت نیست (یا حداقل نباید ساده باشه). ساده‌ترین و رایج‌ترین گرید در طراحی دیجیتال، گریدهای ستونی هستند. بعنوان مثال، گرید ۱۲ ستونه به‌دلیل انعطاف زیاد (قابلیت تقسیم به ۲، ۳، ۴ و ۶) استفاده زیادی داره؛ البته ما می‌تونیم گرید منحصر به فرد خودمون رو بر اساس نوع محصول و محتوامون داشته باشیم.

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

برای طراحی دیجیتال، گرید سیستم‌های زیادی وجود داره، مثل Bootstrap و Grid 960. هر کدوم از این گرید سیستم‌ها ساختار پیش‌فرض خودشون رو دارند. برای شروع، می‌تونید یکی از این ساختارها رو انتخاب کنید و از اون‌ها الهام بگیرید. خوبی این سیستم‌ها اینه که اکثر توسعه‌دهنده‌ها هم آشنایی خوبی باهاشون دارند و سرعت پیاده‌سازی طرح بالا میره.

 

جمع‌بندی

گرید یک ساختاره که از یک سری خطوط عمومی و افقی که در هم تنیده هستند تشکیل میشه. این ساختار مثل یک راهنما است که کمک می‌کنه المان‌های صفحه بهتر و سریع‌تر سازماندهی و مدیریت شوند. انواع گریدها عبارتند از Manuscript یا کتابی، Colunm یا ستونی، Modular یا پیمانه‌ای و Baseline یا خطی که می‌تونیم بر اساس نیاز، از یک یا چند تا از این‌ها استفاده کنیم. در طراحی محصول دیجیتال، استفاده از گرید باعث نظم، انسجام، افزایش سرعت، تعامل موثر بین طراح‌ها و توسعه‌ دهنده‌ها و طراحی رسپانسیو میشه.

امیر گردکانه، دارای مدرک کاشناسی مهندسی کامپیوتر است. او کار خود را با برنامه‌نویسی Front-end شروع کرد و مدت دو سال است که در زمینه طراحی بصری، به‌صورت حرفه‌ای فعالیت می‌کند.

دیدگاه‌ها

  • شهریار

    ۱۳۹۸-۰۲-۱۲

    نکات نسبتا جامع و کامل بود. ممنون. 👌

    پاسخ

ارسال نظر