وقتی عنوان‌ها، عکس‌ها و کارت‌های یک صفحه هرکدام از خط متفاوتی شروع می‌شوند، کاربر برای فهم رابطه آن‌ها باید بیشتر نگاه کند. گرید کمک می‌کند چند خط مشترک برای چیدمان داشته باشیم و فاصله‌ها را با تصمیم روشن انتخاب کنیم. با این حال، کشیدن دوازده ستون روی صفحه به‌تنهایی مسئله را حل نمی‌کند؛ ساختار باید با محتوایی که قرار است نمایش دهیم سازگار باشد.
Grid System یا سیستم شبکه‌ای، چارچوبی از خط‌ها و فاصله‌ها برای جای‌دادن عناصر است. از آن در صفحه‌آرایی، پوستر، هویت بصری و رابط وب استفاده می‌کنیم. هدف این است که رابطه بخش‌ها قابل فهم باشد و هنگام افزودن محتوا، مجبور نشویم همه چیز را دوباره از روی حدس جابه‌جا کنیم. یک شبکه ساده که تیم درست استفاده می‌کند، از شبکه پیچیده‌ای که فقط در فایل طراحی دیده می‌شود مفیدتر است.
قبل از انتخاب گرید، محتوا را ببینیم
ابتدا فهرست عناصر واقعی صفحه را تهیه کنید. صفحه مجله ممکن است عنوان، خلاصه، عکس شاخص، متن بلند و مطالب مرتبط داشته باشد. صفحه فروشگاه به عکس محصول، قیمت، وضعیت موجودی و اقدام خرید نیاز دارد. اگر هر دو را بدون بررسی داخل یک قالب یکسان قرار دهیم، ممکن است متن مقاله بیش از حد عریض شود یا کارت محصول فضای کافی نداشته باشد. نوع محتوا به انتخاب ساختار جهت می‌دهد.
برای شروع، یک نمونه محتوا با عنوان کوتاه و یک نمونه با عنوان بلند بگذارید. تصویر افقی و عمودی را هم امتحان کنید. شبکه‌ای که با چند مستطیل خالی مرتب دیده می‌شود، ممکن است با نام واقعی محصول یا متن فارسی چندخطی به هم بریزد. همین نمونه‌های دشوار را از ابتدا در فایل نگه دارید تا طراحی فقط برای محتوای خوش‌قدوقامت انجام نشود.
بعد مشخص کنید کدام بخش باید زودتر دیده شود و کدام بخش همراه آن است. گرید رابطه جای عناصر را تنظیم می‌کند، اما اولویت محتوا را از خود آن‌ها نمی‌فهمد. برای بررسی این تصمیم، مقاله اصول ترکیب‌بندی بصری ادامه مرتبطی است؛ آنجا می‌توان رابطه اندازه، جایگاه و ترتیب توجه را کنار نظم هندسی دید.
ستون، فاصله و حاشیه چه نقشی دارند؟
ستون‌ها محدوده‌هایی هستند که عناصر می‌توانند در آن‌ها قرار بگیرند یا چند ستون را با هم بپوشانند. فاصله بین ستون‌ها را gutter می‌نامیم؛ حاشیه بیرونی هم محتوا را از لبه محدوده جدا می‌کند. این سه تصمیم را جدا ثبت کنید. زیاد کردن فاصله بین کارت‌ها با زیاد کردن حاشیه کل صفحه یک نتیجه ندارد، حتی اگر در هر دو حالت فضای سفید بیشتر شود.
تعداد ستون‌ها الزاماً برابر تعداد کارت‌های قابل مشاهده نیست. در یک شبکه دوازده‌ستونی، هر کارت می‌تواند چهار ستون بگیرد و سه کارت در یک ردیف دیده شود. این مثال برای تقسیم محدوده مفید است، اما عدد دوازده قانون همه پروژه‌ها نیست. اگر صفحه فقط یک متن و یک بخش همراه دارد، ساختار ساده‌تر هم می‌تواند نیاز را پاسخ دهد. تعداد ستون را با تقسیم‌های مورد نیاز انتخاب کنید.
برای gutter هم بازه ثابتی مثل ۲۰ تا ۳۲ پیکسل نسخه عمومی نیست. فاصله مناسب به عرض کارت، اندازه متن، فشردگی اطلاعات و فضای صفحه بستگی دارد. در یک جدول مدیریتی و یک گالری عکس ممکن است تصمیم‌های متفاوتی بگیریم. به‌جای حفظ عدد، بررسی کنید عناصر یک گروه نزدیک‌تر از عناصر دو گروه جدا دیده می‌شوند یا نه. مقاله فضای خالی در طراحی به همین موضوع کمک می‌کند.
چهار نوع شبکه برای مسئله‌های متفاوت
در گرید ستونی، چند ستون عمودی مبنای اصلی هم‌ترازی هستند. متن، تصویر و عنوان می‌توانند عرض‌های متفاوتی داشته باشند، اما از خط‌های مشترک شروع شوند. این روش برای چیدمانی که بخش‌های مختلف آن باید هم‌راستا بمانند کاربرد دارد. لازم نیست همه عناصر عرض یکسان داشته باشند؛ کافی است رابطه عرض‌ها و محل شروع آن‌ها روشن باشد.
گرید ماژولار هم ستون دارد و هم ردیف‌هایی که محدوده‌های تکرارشونده می‌سازند. برای نمایش مجموعه‌ای از آیتم‌ها مثل کارت‌ها، عکس‌ها یا بلوک‌های اطلاعاتی می‌توان از آن کمک گرفت. در محتوای متنی متغیر، ارتفاع یکسان را بی‌دلیل تحمیل نکنید. اگر توضیح یک کارت بلندتر است، پنهان کردن اطلاعات ضروری فقط برای برابرشدن ارتفاع، تصمیم خوبی برای خواننده نیست.
گرید خط مبنا به هماهنگی سطرهای متن مربوط است. در صفحه‌آرایی چندستونی، هم‌راستا بودن سطرها می‌تواند به نظم متن کمک کند. در وب، تغییر اندازه نوشته، فونت جایگزین و محتوای پویا باید در نظر گرفته شود. هدف هماهنگی ریتم است؛ نباید برای نگه‌داشتن خط‌ها، متن را داخل ارتفاعی قفل کنیم که با افزایش اندازه بریده می‌شود.
گرید سلسله‌مراتبی از نیاز و وزن بخش‌ها شروع می‌کند. مثلاً یک معرفی اصلی بزرگ داریم و چند اطلاعات همراه که باید به آن مرتبط بمانند. می‌توان چند خط مشترک تعریف کرد، بدون اینکه همه صفحه از خانه‌های هم‌اندازه ساخته شود. این آزادی هم به توضیح نیاز دارد؛ اگر هر بخش با فاصله و خط شروع تازه‌ای طراحی شود، دیگر قاعده قابل استفاده‌ای برای تیم باقی نمی‌ماند.
یک نمونه ساده برای صفحه مجله
به‌عنوان مثال آموزشی، صفحه‌ای با شش مطلب مرتبط را در نظر بگیرید. در نمای عریض، سه کارت در هر ردیف می‌گذاریم. عنوان‌ها و تصاویر هر کارت از خط مشترک شروع می‌شوند و فاصله بین ردیف‌ها مشخص است. در کنار آن، بدنه مقاله می‌تواند عرض محدودتری داشته باشد؛ لازم نیست متن بلند تا هر دو لبه صفحه کشیده شود تا با کارت‌ها هم‌راستا به نظر برسد.
در این مثال، ابتدا عرض لازم برای خواندن عنوان و دیدن تصویر کارت را بررسی می‌کنیم. اگر با کوچک‌تر شدن صفحه عنوان‌ها به چند خط نامناسب بشکنند یا کارت‌ها بیش از حد فشرده شوند، تعداد ستون‌های قابل مشاهده را کاهش می‌دهیم. نقطه تغییر را از رفتار محتوا پیدا می‌کنیم، نه صرفاً از نام یک مدل گوشی. این نمونه فرایند تصمیم را توضیح می‌دهد و یک قالب اجباری برای همه صفحات نیست.
واکنش‌گرایی یعنی چیدمان دوباره
نسخه موبایل را با کوچک کردن کل نمای دسکتاپ نسازید. در فضای باریک، ممکن است بخش همراه زیر متن بیاید، کارت‌ها تک‌ستونی شوند و بعضی فاصله‌ها کاهش پیدا کنند. ترتیب اهمیت محتوا باید روشن بماند. اگر یک توضیح برای فهم اقدام اصلی لازم است، انتقال آن به جایی دور از دکمه می‌تواند رابطه را مبهم کند، حتی اگر صفحه از نظر هندسی منظم باشد.
رفتار صفحه را در عرض‌های بین دو طرح آماده هم ببینید. داشتن یک فایل دسکتاپ و یک فایل موبایل به این معنی نیست که همه عرض‌های میانی درست کار می‌کنند. پنجره را پیوسته تغییر دهید و عنوان بلند، تصویر متفاوت و متن بزرگ‌شده را بررسی کنید. اگر یک عنصر از محدوده بیرون می‌زند، پیش از افزودن نقطه تغییر تازه، علت عرض حداقل یا محتوای آن را پیدا کنید.
گرید در فایل طراحی با CSS Grid یکی نیست
شبکه راهنمای طراحی، تصمیم بصری شماست؛ CSS Grid یکی از ابزارهای اجرای چیدمان در مرورگر است. در CSS Grid، ردیف و ستون با هم مدیریت می‌شوند و عناصر در محدوده‌های شبکه قرار می‌گیرند. راهنمای رسمی MDN مفاهیم track، line، area و gap را توضیح می‌دهد. برای جزئیات فنی از مفاهیم پایه CSS Grid در MDN استفاده کنید.
لازم نیست همه اجزای صفحه با یک روش پیاده شوند. ممکن است محدوده اصلی با Grid و چیدمان یک ردیف دکمه با روش دیگری ساخته شود. مهم این است که نتیجه با قواعد طراحی و رفتار محتوا هماهنگ باشد. اگر به نمونه‌های اجرایی بیشتری نیاز دارید، مقاله راهنمای CSS Grid با مثال‌های عملی مسیر مرتبطی برای ادامه مطالعه است.
در صفحه فارسی، ترتیب خواندن را نگه داریم
در یک صفحه راست‌به‌چپ، شروع ستون‌ها و ترتیب کارت‌ها را با محتوای فارسی بررسی کنید. هم‌ترازی با لبه راست، ترتیب آیتم‌ها و جای اطلاعات همراه باید آگاهانه انتخاب شود. وجود یک واژه لاتین یا عدد داخل متن هم ممکن است ظاهر سطر را تغییر دهد. برای همین، نمونه‌های واقعی فارسی و ترکیبی را در آزمون بگذارید و فقط با متن نمایشی انگلیسی تصمیم نگیرید.
جابه‌جایی ظاهری عناصر نباید ترتیب منطقی محتوا را خراب کند. کاربر صفحه‌کلید و ابزارهای کمکی هم باید بتواند مسیر قابل فهمی طی کند. ترجیح دهید ترتیب اصلی محتوا از ابتدا معنادار باشد و CSS فقط چیدمان مناسب را روی آن اعمال کند. برای بررسی جزئیات این بخش، راهنمای دسترس‌پذیری CSS Grid را بخوانید.
خوانایی را برای هم‌ترازی قربانی نکنیم
متن را با افزایش اندازه و در عرض باریک آزمایش کنید. معیار Reflow در WCAG 2.2 درباره نمایش محتوا بدون از دست رفتن اطلاعات یا نیاز به پیمایش دوبعدی در شرایط تعریف‌شده است؛ بعضی محتواها استثنا دارند. از این معیار نمی‌توان یک تعداد ستون ثابت استخراج کرد. توضیح و شرایط کامل در راهنمای رسمی W3C درباره بازچینی محتوا آمده است.
اگر متن بریده می‌شود، حذف آن با سه‌نقطه همیشه پاسخ مناسب نیست. در بعضی کارت‌ها کوتاه‌سازی عنوان قابل قبول است، اما اطلاعات لازم برای تصمیم باید قابل دسترسی باشد. گرید باید اجازه رشد محتوا بدهد. همچنین همه کارت‌ها را با رنگ متفاوت از هم جدا نکنید؛ فاصله و مرز هم ابزار تفکیک‌اند. مقاله رنگ در طراحی وب درباره نقش رنگ و پیام‌های رابط توضیح بیشتری دارد.
قواعدی که به تیم تحویل می‌دهیم
در تحویل طراحی، عرض محدوده، تعداد ستون‌ها، فاصله‌ها و رفتار تغییر چیدمان را ثبت کنید. کنار قواعد، یک نمونه واقعی با عنوان بلند و یک نمونه با محتوای کم قرار دهید. توضیح دهید کدام عناصر چند ستون را می‌پوشانند و کدام فاصله‌ها برای گروه‌بندی‌اند. اگر فقط عکس صفحه را تحویل دهیم، توسعه‌دهنده باید بخش زیادی از این تصمیم‌ها را حدس بزند.
آخرین بررسی را با محتوای تازه انجام دهید: یک کارت اضافه، تصویر متفاوت و عنوان چندخطی. ببینید آیا قواعد موجود هنوز پاسخ می‌دهند یا برای هر مورد استثنای جدید می‌سازید. خروجی مرور باید اصلاح مشخص باشد؛ مثلاً کاهش تعداد ستون در عرضی که محتوا فشرده می‌شود یا جدا کردن فاصله گروه‌ها از فاصله آیتم‌ها. همین تصمیم‌های ثبت‌شده، شبکه را برای ادامه کار قابل استفاده می‌کنند.
هنوز دیدگاهی ثبت نشده
اولین نفری باشید که نظر می‌دهد!