سیستم فاصله‌گذاری در طراحی؛ شبکهٔ ۴ و ۸ واحدی به زبان ساده

چرا فاصله‌ها طراحی را می‌سازند؟

دو نسخهٔ یک کارت را تصور کنید: هر دو همان فونت، همان رنگ و همان آیکون را دارند. نسخهٔ اول، فاصله‌هایش ۱۳ و ۱۹ و ۲۶ پیکسل است؛ نسخهٔ دوم، همه‌اش ضریبی از ۸. بینندهٔ معمولی نمی‌تواند بگوید فرقشان چیست، اما حس می‌کند دومی «تمیزتر» است. آن حس، همان اثر سیستم فاصله‌گذاری است؛ نظمی که چشم آن را تشخیص نمی‌دهد اما دریافت می‌کند. فاصله‌ها ساختار نامرئی هر طراحی‌اند و همان‌قدر مهم که سیستم شبکه در طراحی برای چیدمان کلی است، مقیاس فاصله برای اجزای داخل صفحه اهمیت دارد.

مشکل تازه‌کارها دقیقاً همین‌جاست: هر فاصله را «به حس» می‌گیرند و نتیجه، اعدادی است که نه ربطی به هم دارند نه قابل تکراراند. وقتی صفحهٔ دوم پروژه سراغتان بیاید، نمی‌دانید آن ۲۱ پیکسل از کجا آمده. سیستم ۴/۸ این آشوب را با یک قانون ساده تمام می‌کند و مهم‌تر از آن، زبان مشترک شما با توسعه‌دهنده می‌سازد؛ وقتی می‌گویید «فاصلهٔ بین بخش‌ها ۶۴ است»، این عدد در کد هم دقیقاً همان معنا را دارد.

مقیاس ۴/۸ چطور کار می‌کند؟

واحد پایه، ۴ پیکسل است چون کوچک‌ترین واحد مفید در نمایشگرهای امروزی است و همه‌چیز باید ضریبی از آن باشد: ۴، ۸، ۱۲، ۱۶، ۲۴، ۳۲، ۴۸، ۶۴ و ۹۶. به فاصله‌های مجاز نگاه کنید و به الگوی رشدشان دقت کنید: از ۱۶ به ۲۴ با گام ۸، از ۳۲ به ۴۸ با گام ۱۶ و از ۴۸ به ۶۴ با گام ۱۶ رشد می‌کنیم؛ فاصله‌های بزرگ‌تر، گام بزرگ‌تر دارند چون چشم تفاوت‌های ریز را در فواصل بزرگ نمی‌بیند. اعداد ممنوعه مشخص است: ۱۸، ۲۰، ۲۵، ۳۰ و هر عددی که مضرب ۴ نباشد.

حالا نقش هر پله در یک صفحهٔ واقعی: ۴ و ۸ برای فاصلهٔ آیکون تا متن و فاصلهٔ اجزای داخل یک دکمه؛ ۱۲ برای فاصلهٔ لیبل و فیلد فرم؛ ۱۶ برای فاصلهٔ ردیف‌های یک لیست و پدینگ عمودی دکمه‌ها؛ ۲۴ برای پدینگ داخلی کارت‌ها؛ ۳۲ و ۴۸ برای فاصلهٔ بین بلوک‌های محتوایی داخل یک بخش؛ ۶۴ و ۹۶ برای فاصلهٔ بین بخش‌های اصلی صفحه. این تخصیص نقش‌ها را یک بار برای پروژه‌تان بنویسید؛ از آن به بعد هر فاصله، جای مشخصی در این نردبان دارد.

فاصلهٔ داخل، بین و اطراف

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

یک مثال عددی کامل از یک فرم ورود: فاصلهٔ لیبل تا فیلد ۴، فاصلهٔ فیلدهای مختلف از هم ۲۴ (مهم! فیلدهای مستقل با ۲۴، نه ۸؛ چون هر فیلد یک واحد کامل است)، فاصلهٔ دکمهٔ ورود تا آخرین فیلد ۳۲، پدینگ داخلی کارت فرم ۳۲ و فاصلهٔ بخش فرم از عنوان صفحه ۶۴. اشتباه رایج دقیقاً برعکس این اعداد است: فاصلهٔ داخل اجزا زیاد و فاصلهٔ بین بخش‌ها کم، تا جایی که همهٔ صفحه به هم چسبیده و شلوغ به‌نظر می‌رسد؛ درمانش را در طراحی با فضای منفی با جزئیات می‌خوانید.

راه‌اندازی در فیگما

فیگما برای همین کار ساخته شده و سه ابزار کلیدی دارد. اول، اتولِی‌اوت (Auto Layout): همهٔ اجزا را با اتولی‌اوت بچینید و فاصله‌ها را در پنل راست با کلیدهای میان‌بر Alt+Arrow با گام‌های ۴ پیکسلی تنظیم کنید؛ فیگما خودش روی مضرب‌های ۴ می‌پرد. دوم، متغیرها (Variables): برای هر پلهٔ مقیاس یک متغیر با نام استاندارد بسازید؛ space/100 برای ۴، space/200 برای ۸، space/300 برای ۱۲ و تا space/900 برای ۹۶. وقتی فاصله‌ای را از منوی متغیرها انتخاب می‌کنید، همیشه عدد مجاز دارید و در آینده با تغییر یک متغیر، کل پروژه به‌روز می‌شود.

سوم، بازبینی نهایی با چشمتان نه فقط با عدد: صفحه را کوچک کنید (Zoom به ۵۰٪) و به ریتم عمودی نگاه کنید؛ فواصل باید مثل خطوط یک دفتر شعر، منظم دیده شوند. اگر نمی‌دانید از کجا شروع کنید، آموزش فیگما از صفر مقدمات اتولی‌اوت را خوب توضیح داده و سیستم طراحی و زمان نیاز به آن نشان می‌دهد این متغیرها چطور به توکن‌های مشترک با تیم توسعه تبدیل می‌شوند.

فاصله در تایپوگرافی و موبایل

مقیاس ۴/۸ فقط برای جعبه‌ها نیست؛ تایپوگرافی هم عضو این سیستم است. ارتفاع خط متن بدنه را ۱.۵ تا ۱.۷ برابر اندازهٔ فونت بگیرید (متن ۱۶ با ارتفاع خط ۲۴، دقیقاً روی پلهٔ مقیاس) و برای تیترها ۱.۲ تا ۱.۳ کافی است. فاصلهٔ بین پاراگراف‌ها همان ۱۶ یا ۲۴ است و فاصلهٔ تیتر تا متنِ بعد از خودش، کمتر از فاصله‌اش تا متنِ قبلی — تا تیتر به محتوای خودش بچسبد، قانونی کلیدی در سلسله‌مراتب بصری.

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

چک‌لیست بازبینی فاصله‌ها

• شمارش مضرب‌ها: همهٔ فاصله‌ها را انتخاب کنید و در پنل ببینید؛ هر عددی که مضرب ۴ نبود، عمداً انتخاب شده یا اشتباه است.
• تست لایه‌ها: فاصلهٔ داخل اجزا از فاصلهٔ بین اجزا کمتر است؟ فاصلهٔ بین بخش‌ها بزرگ‌ترین عدد صفحه است؟
• مقایسهٔ اجزای هم‌نقش: فاصلهٔ همهٔ ردیف‌های لیست یکی است؟ همهٔ کارت‌ها پدینگ یکسان دارند؟
• تست چشمی از دور: صفحه را در نمای کوچک ببینید؛ اگر بخش‌ها به‌هم‌چسبیده به‌نظر می‌رسند، پلهٔ فاصلهٔ بخش‌ها را یکی بالا ببرید.
• تست موبایل: همان بازبینی را در فریم ۳۹۰ پیکسلی هم اجرا کنید؛ نظم دسکتاپ نباید در موبایل بشکند.

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