در یک فرم شلوغ، کاربر ممکن است نداند توضیح کوتاه مربوط به کدام فیلد است. در یک کارت، قیمت و دکمه خرید ممکن است آن‌قدر دور باشند که رابطه‌شان روشن نباشد. فضای خالی به ما اجازه می‌دهد این رابطه‌ها را با فاصله توضیح دهیم. پیش از اضافه کردن خط، رنگ یا قاب تازه، می‌توان جای عناصر و مقدار فضای میان آن‌ها را بررسی کرد.
Whitespace یا فضای خالی، محدوده‌ای است که عنصر اصلی محتوا در آن قرار ندارد. لازم نیست سفید باشد؛ پس‌زمینه تیره، رنگی یا حتی بخش آرام یک تصویر هم ممکن است چنین نقشی داشته باشد. در کار عملی، باید مشخص کنیم این فضا چه چیزی را از چه چیزی جدا می‌کند و کدام عناصر را کنار هم نگه می‌دارد. زیاد بودن فاصله به‌تنهایی نشانه کیفیت طراحی نیست.
فاصله را از رابطه محتوا شروع کنیم
فرض کنید یک فرم اطلاعات تماس و اطلاعات ارسال دارد. برچسب هر فیلد باید به ورودی خودش نزدیک باشد و دو گروه فرم فاصله بیشتری داشته باشند. اگر تمام فاصله‌ها برابر باشند، تشخیص گروه‌ها به خواندن همه عنوان‌ها وابسته می‌شود. در این نمونه آموزشی، تغییر فاصله‌ها ساختار را آشکار می‌کند؛ از آن نمی‌توان درصد ثابتی برای افزایش خوانایی همه فرم‌ها استخراج کرد.
برای شروع، روی یک طرح بدون رنگ علامت بگذارید: کدام عنوان به کدام توضیح مربوط است، چه چیزی یک گروه محسوب می‌شود و کدام اقدام به آن گروه تعلق دارد. سپس فاصله داخل گروه و فاصله بین گروه‌ها را جدا تنظیم کنید. این تمرین کمک می‌کند حتی پیش از انتخاب پالت، بتوانید درباره رابطه عناصر صحبت کنید و تصمیم‌ها را به تیم منتقل کنید.
همه جدایی‌ها با فاصله حل نمی‌شوند. در فهرست طولانی یا جدول فشرده، ممکن است خط جداکننده یا زمینه متفاوت هم لازم باشد. بررسی کنید حذف یک مرز باعث اشتباه در خواندن ردیف‌ها می‌شود یا نه. هدف کم کردن تزئینات به هر قیمت نیست؛ کاربر باید بتواند اطلاعات هم‌ردیف و بخش‌های مستقل را تشخیص دهد.
فضای داخل گروه و فضای بین گروه‌ها
در مقیاس کوچک، فاصله سطرها، فاصله عنوان تا متن و فضای داخل کارت را بررسی می‌کنیم. این فاصله‌ها هنگام خواندن یک عنصر دیده می‌شوند. در مقیاس بزرگ، فاصله بین بخش‌های صفحه، حاشیه بدنه و فضای اطراف یک تصویر مطرح است. این دو مقیاس به هم مربوط‌اند، اما افزایش حاشیه صفحه مشکل فشردگی سطرهای یک پاراگراف را اصلاح نمی‌کند.
در تصویر زیر، یک کارت و دو گروه جدا نمایش داده شده‌اند. فاصله داخلی برای خواندن اجزای کارت است و فاصله بیرونی برای جدا کردن گروه‌ها. وقتی این دو نقش را با یک عدد مشترک تعریف می‌کنیم، ممکن است داخل کارت بیش از حد باز و بین بخش‌ها بیش از حد فشرده شود. برای هر نقش، نمونه محتوای واقعی بگذارید و نتیجه را ببینید.
در متن فارسی، فاصله را با فونت بسنجیم
فاصله سطر مناسب را با پاراگراف واقعی انتخاب کنید. اندازه حروف، وزن فونت، طول سطر و وجود واژه‌های لاتین بر ظاهر متن اثر می‌گذارند. یک پاراگراف تک‌جمله‌ای برای تصمیم کافی نیست؛ چند سطر با عدد، لینک و واژه ترکیبی هم بگذارید. سطرها نباید روی هم بیفتند و فضای میانشان نباید آن‌قدر زیاد شود که دنبال کردن یک پاراگراف دشوار باشد.
برای حروف فارسی، افزایش فاصله حروف را به‌عنوان نسخه آماده خوانایی به کار نبرید. شکل اتصال حروف و رفتار فونت را بررسی کنید. اگر یک عنوان فشرده دیده می‌شود، شاید وزن یا اندازه آن نیاز به تغییر دارد. قبل از دست‌کاری فاصله، مطمئن شوید فونت اصلی بارگذاری شده و نمایی که می‌بینید خروجی فونت جایگزین نیست.
طول سطر را هم کنار فاصله سطر ببینید. متن بسیار عریض ممکن است برگشت چشم به ابتدای سطر بعدی را دشوار کند. در صفحه مقاله می‌توان عرض بدنه را محدودتر از عرض گالری یا کارت‌ها گرفت. این تصمیم به معنای ناهماهنگی کل صفحه نیست؛ خطوط مشترک و حاشیه‌ها هنوز می‌توانند رابطه بخش‌ها را نگه دارند. مقاله گرید در طراحی درباره این ساختار توضیح می‌دهد.
فاصله و دسترس‌پذیری متن
کاربر ممکن است فاصله‌های متن را با ابزار خودش تغییر دهد. در محتوای مشمول معیار Text Spacing از WCAG 2.2، تغییر فاصله‌ها به مقادیر تعریف‌شده نباید موجب از دست رفتن محتوا یا عملکرد شود. جزئیات و استثناها در راهنمای رسمی فاصله متن W3C آمده است. این معیار را با یک دستور ثابت برای ظاهر همه سایت‌ها اشتباه نگیرید.
برای آزمون، عنوان، توضیح و دکمه یک کارت را با فاصله و اندازه متن بزرگ‌تر ببینید. اگر ارتفاع کارت قفل شده باشد، متن ممکن است زیر بخش دیگر برود. به‌جای حذف توضیح ضروری، اجازه رشد محتوا را بررسی کنید. وضعیت دکمه، پیام خطا و توضیح فیلد هم باید قابل خواندن بماند؛ فقط پاراگراف اصلی مقاله را آزمایش نکنید.
یک مثال برای بازطراحی کارت محصول
کارت فرضی ما تصویر، نام، قیمت، وضعیت موجودی و دکمه دارد. ابتدا ترتیب نیاز خواننده را روشن می‌کنیم. نام باید به تصویر مربوط باشد و وضعیت موجودی نزدیک تصمیم خرید دیده شود. اگر قیمت در گوشه‌ای دور و توضیح موجودی زیر تصویر پنهان باشد، افزایش padding کل کارت به‌تنهایی ارتباط این اطلاعات را اصلاح نمی‌کند.
در بازطراحی، فاصله نام و توضیح را کوچک‌تر از فاصله آن گروه با بخش اقدام می‌گیریم. برای دکمه فضای کافی در نظر می‌گیریم، اما آن را از اطلاعات لازم برای تصمیم جدا نمی‌کنیم. سپس کارت دیگری با نام بلند و کارت بدون تخفیف می‌گذاریم. اگر فقط نمونه خوش‌ظاهر را بسازیم، مسئله اصلی هنگام افزودن محصولات تازه برمی‌گردد.
رنگ هم باید نقش مشخصی داشته باشد. فضای خالی ممکن است برخی مرزها را روشن کند، ولی پیام خطا یا وضعیت موجودی نباید فقط از رنگ فهمیده شود. برای بررسی نقش رنگ کنار متن و نشانه، مقاله روان‌شناسی رنگ در طراحی وب را ببینید. این دو ابزار را بر اساس نیاز محتوا ترکیب کنید.
فضای خالی در موبایل و صفحات فشرده
در موبایل، کاهش عرض معمولاً متن را چندخطی می‌کند. اگر همه فاصله‌های نسخه عریض را بدون بررسی نگه دارید، ممکن است یک کارت بخش زیادی از صفحه را بگیرد. از سوی دیگر، حذف همه فاصله‌ها گروه‌ها را به هم می‌چسباند. ابتدا ساختار را بازچینید، سپس فاصله‌ها را با محتوای تازه تنظیم کنید. مقایسه فقط با یک تصویر کوچک‌شده از دسکتاپ کافی نیست.
یک داشبورد با اطلاعات فراوان الزاماً به فاصله‌های یک صفحه معرفی محصول نیاز ندارد. کاربر شاید بخواهد چند ردیف را هم‌زمان مقایسه کند. در این وضعیت، فشردگی را با خط‌های مشترک، برچسب روشن و مرز گروه‌ها مدیریت کنید. فاصله کمتر باید هنوز رابطه‌ها را قابل فهم نگه دارد. «فضای بیشتر» را هدف مستقل طراحی قرار ندهید.
هنگام تغییر عرض و بزرگ‌نمایی، اطلاعات لازم نباید ناپدید شود. راهنمای بازچینی محتوا در W3C شرایط معیار و استثناهای آن را توضیح می‌دهد. می‌توانید فهرست کارت‌ها را به ستون‌های کمتر ببرید؛ برای روش اجرایی، نمونه‌های CSS Grid مسیر مرتبطی است.
فضای منفی در تصویر و لوگو
در یک تصویر، فضای اطراف سوژه ممکن است محل قرار گرفتن عنوان یا بخشی از روایت باشد. برش عکس را با محل متن هماهنگ کنید. اگر نسخه موبایل فضای آرام تصویر را حذف کند، عنوان ممکن است روی قسمت پرجزئیات بیفتد. به یک فایل برش‌خورده برای همه نسبت‌ها تکیه نکنید؛ جای متن و ناحیه امن تصویر را در هر استفاده ببینید.
در لوگو، فضای میان شکل‌ها بخشی از فرم است. کوچک کردن لوگو ممکن است این فضاها را ببندد یا شکل تازه‌ای بسازد. آزمون تک‌رنگ و اندازه کوچک نشان می‌دهد فاصله‌ها هنوز کار می‌کنند یا نه. مقاله نسبت طلایی در طراحی لوگو درباره اصلاح بصری و آزمون کاربرد توضیح دارد؛ یک نسبت هندسی به‌تنهایی جای بررسی فضای داخلی را نمی‌گیرد.
قواعد فاصله را قابل استفاده تحویل بدهیم
به‌جای ثبت ده‌ها عدد بدون توضیح، چند نقش مشخص تعریف کنید: فاصله عنوان و متن، فضای داخلی کارت، فاصله آیتم‌های یک گروه و فاصله بخش‌های مستقل. اگر یک فاصله استثنا دارد، علتش را کنار نمونه بنویسید. قواعدی که بر اساس رابطه محتوا نام‌گذاری شده‌اند، برای اضافه کردن عنصر تازه روشن‌تر از فهرست عددهای پراکنده‌اند.
در مرور نهایی، از یک نفر بخواهید گروه‌های صفحه را بدون توضیح شما مشخص کند. اگر رابطه‌ای اشتباه برداشت شد، همان قسمت را با تغییر محدود اصلاح کنید و دوباره ببینید. این آزمون کوچک جای پژوهش رسمی را نمی‌گیرد، اما نقطه مبهم طرح را نشان می‌دهد. خروجی مرور باید تصمیم قابل اجرا باشد؛ مثلاً نزدیک‌تر کردن راهنمای فیلد به ورودی خودش یا افزایش فاصله دو بخش مستقل.
هنوز دیدگاهی ثبت نشده
اولین نفری باشید که نظر می‌دهد!