خوش اومدید به مبحث فضای خالی (white space)
خب فضای خالی در واقع نامرئیه
ولی با این حال یکی از ساده‌ترین
و سریع‌ترین روش‌ها برای بهبود چشمگیر طراحی‌هاست
پس بیایم یاد بگیریم که چطور ازش استفاده کنیم
فضای خالی در اصل یعنی فاصله بین المنت‌ها
اما وقتی میزان مناسبی از فضای خالی داشته باشیم
طراحی ما تمیز مدرن و حرفه‌ای به نظر میاد
و حتی مهم‌تر از اون فهمش برای کاربر راحت‌تر میشه
کافیه به این طراحی نگاه کنید که تقریبا هیچ
فضای خالی توش وجود نداره
پس کل محتوا خیلی شلوغ و فشرده دیده میشه
و اصلا تمیز به نظر نمیاد و چشم ما
نمی‌دونه چطور باید این صفحه رو دنبال کنه
به خاطر کمبود فضا
ولی خوشبختانه این مشکل خیلی راحت حل میشه
فقط با اضافه کردن کمی فضای خالی به طراحی
حالا دیگه طراحی مدرن‌تر و مرتب‌تر دیده میشه
و حس می‌کنیم که طراحی
یه فضای نفس کشیدن پیدا کرده
این تغییر واقعا یه بهبود چشمگیر
نسبت به نسخه اول سمت چپه
اما دقیقا چرا فضای خالی انقدر مهمه؟
خب فضای خالی به صورت خودکار نشون میده
که بخش‌های مختلف اطلاعات در یک لایه (layout)
چه ارتباطی با هم دارن
و با همین کار فضای خالی در واقع
رابطه‌های نامرئی بین المنت‌های صفحه ایجاد می‌کنه
که همین باعث میشه کاربر خیلی راحت
بتونه کل صفحه رو کاملا شهودی و بی‌دردسر مرور کنه
خب حالا که فهمیدیم فضای خالی چیه
و چرا مهمه بیایم سریع یاد بگیریم چطور ازش استفاده کنیم
اول از همه باید مقدار زیادی
فضای خالی بین بخش‌هامون بذاریم
اگر دوباره به مثال قبلی نگاه کنیم
می‌بینیم که طراح واقعا مقدار زیادی
فضای خالی بین این بخش‌ها اضافه کرده
پس ۱۹۲ پیکسل فضای زیادیه
اما در واقع اصلا زیاد به نظر نمیاد
به نظرم طراحی به این شکل خیلی درست دیده میشه
همین موضوع در این مثال طراحی دیگه هم هست
که باز هم فضای خالی زیادی
بین بخش‌ها وجود داره
اینجا فقط ۱۴۰ و ۱۶۰ پیکسل استفاده شده
ولی خب این موضوع به عوامل مختلفی بستگی داره
نمی‌تونید فقط یه عدد ثابت انتخاب کنید
و بعد همون مقدار فضای خالی رو
توی همه طراحی‌هاتون به کار ببرید
حالا جای بعدی که باید فضای خالی بذاریم
بین گروه‌های المنت‌هاست
پس در اینجا هم از فضای سفید زیادی استفاده کنید
اما البته نه به اندازه فضای سفید بین بخش‌ها
مثلاً اینجا ما گروه‌های مختلفی داریم
از عناصر که می‌توانیم به وضوح آن‌ها را مشخص کنیم
و بنابراین بین آن‌ها
قطعاً مقداری فضای سفید وجود دارد
و این فضای سفید کم نیست
پس بین تیتر و اولین بلوک محتوا ۹۶ پیکسل فاصله داریم
و سپس
بین این دو ردیف ۱۵۲ پیکسل فاصله وجود دارد
پس به نظر می‌رسد فضای زیادی است
اما دوباره این دقیقاً همان فضای مورد نیاز
برای این است که طراحی تمیز و صیقلی به نظر برسد
و حالا به مثال دیگرمان برویم اینجا هم دوباره
می‌توانیم به راحتی بخش‌های مختلف محتوا را تشخیص دهیم
مثلاً این گروه‌های عناصر
که بین همه‌ی آن‌ها ۲۴ پیکسل فاصله است
پس اینجا کمی کمتر است اما البته
دوباره این بستگی به عوامل مختلف زیادی دارد
حال معمولاً بیشتر روی فضای سفید عمودی تمرکز می‌کنیم
اما مهم است که به فضای سفید افقی هم فکر کنیم
مثلاً بین این ستون‌ها
پس معمولاً به صورت عمودی
به فضای بیشتری نسبت به افقی نیاز داریم
به عنوان یک دستورالعمل کلی درست است؟
حالا اینجا در واقع یک مثال دیگر هم دارم
که همین است
و دوباره ما می‌توانیم به راحتی تمایز قائل شویم
بین گروه‌های مختلف عناصر
و بنابراین قطعاً باید مقداری فضای سفید بین آن‌ها باشد
و همین‌طور در این مثال دیگر هم صدق می‌کند
پس دوباره دو گروه از عناصر اینجا داریم
و سپس باید آن‌ها را از نظر بصری جدا کنیم
به سادگی با افزودن مقداری فضای سفید
به صورت margin مثلاً در CSS
حال گام بعدی البته این است که فضای سفید
بین عناصر کوچکتر هم رعایت شود
پس بازگشت به هر سه مثال قبلی
اینجا مقداری فضای سفید دارید
همانطور که با این فلش‌ها می‌بینید
و همچنین فضای سفید زیادی در این مثال دیده می‌شود
و در نهایت این در مثال آخر هم به راحتی قابل مشاهده است
و وقتی به این نکته آگاه باشید شروع به دیدن
این فضای سفید در هر وب‌سایت با طراحی خوب خواهید کرد
که بازدید می‌کنید
پس این چیزی است که هر وب‌سایت
با طراحی مناسب بسیار از آن استفاده خواهد کرد
و این نکته‌ای است که در تمام سایت‌های استاندارد دیده می‌شود
حال یک دستورالعمل دیگر که می‌توانم به شما بدهم
این است که داخل گروه‌های عناصر
همیشه سعی کنید از فضای سفید به جای خطوط استفاده کنید
پس استفاده از خطوط ممکن است چیزی شبیه به این به نظر برسد
و این در واقع یک اشتباه است
که بسیاری از طراحان تمایل دارند انجام دهند
آن‌ها فکر می‌کنند که برای تمایز بین عناصر
باید خطوط بصری اضافه کنند
مثل همین مثال
در حالی که در واقع این روش خیلی بهتر است
و مدرن‌تر و تمیزتر به نظر می‌رسد
که فقط کمی فاصله بین عناصر ایجاد کنیم
درست است؟
پس اینجا هنوز می‌توانید به وضوح ببینید
کدام عناصر با هم مرتبط هستند
اما همه این‌ها بدون استفاده از خطوط زشت است
و بنابراین اگر قصد دارید طراحی مدرن ایجاد کنید
این همیشه راه درست است
خوب حالا شما می‌دانید
کجا باید از فضای سفید استفاده کنید
اما چه مقدار باید استفاده شود؟
خب بیایید با چند دستورالعمل دیگر بررسی کنیم
در واقع عناصری که با هم مرتبط هستند
باید در رابط کاربری به هم نزدیک‌تر باشند
پس فاصله بین آن‌ها نصف کمتر باشد
چون این باعث می‌شود آن‌ها از سایر عناصر
یا گروه‌های دیگر عناصر متمایز شوند
و چیزی که توضیح دادم
در واقع نام رسمی هم دارد
که همان «قانون نزدیکی» است
درست است؟
حالا از طرف دیگر البته
اگر عناصر به هم مرتبط نباشند
پس باید فاصله بیشتری داشته باشند
تا کاربر به طور شهودی درک کند
که یک عنصر یا گروهی از عناصر
با گروه دیگری از عناصر مرتبط نیستند
پس دوباره همه این‌ها قانون نزدیکی است
و این باید اصل راهنما باشد
وقتی تعیین می‌کنید چه مقدار فضای سفید بین عناصر
یا گروه‌های عناصر استفاده شود
پس البته چند مثال هم وجود دارد
و اینجا فضای سفید خیلی کم است
پس همه چیز خیلی نزدیک به هم فشرده شده است
و رابطه بین این عناصر
واقعاً قابل مشاهده نیست
اما از طرف دیگر اینجا
خیلی بهتر است
پس عنوان و متن به هم مرتبط هستند
و فاصله بین آن‌ها
خیلی کمتر از فاصله بین آیکون و عنوان است
این باعث می‌شود ارتباط بصری واضح باشد
و این است قانون نزدیکی در عمل
حالا یک مثال دیگر همین فرم اینجاست
که فاصله‌بندی مبهمی دارد
پس اینجا در سمت چپ این برچسب‌های متن
بین دو فیلد ورودی قرار گرفته‌اند درست است؟
و به این شکل کاربر سخت می‌تواند بفهمد
که هر برچسب به کدام فیلد ورودی تعلق دارد
با این حال اگر فضای سفید را حذف کنیم
و برچسب را نزدیک فیلد مربوطه قرار دهیم
می‌توانیم آن ابهام را حذف کرده و
به کاربر کمک کنیم تا فرم تماس را راحت‌تر پر کند
و از آنجا که این موضوع خیلی مهم است بیایید
یک مثال دیگر را بررسی کنیم
پس در سمت چپ واقعاً منطقی نیست
که چرا دکمه Learn More اینقدر از متنی که مربوط به آن است فاصله دارد
پس به دلایلی این دکمه به لینک‌های پایین صفحه نزدیک‌تر است
اما دوباره این کار چندان منطقی نیست
پس چرا این دکمه نباید نزدیک‌تر به متن مربوطه باشد؟
و رفع این مشکل بسیار ساده است
مثل کاری که در سمت راست انجام دادیم
حالا دکمه Learn More نزدیک‌تر به چیزی است که متعلق به آن است
و به این شکل
ظاهر طبیعی‌تر و فهم آن ساده‌تر می‌شود
حالا یک دستورالعمل دیگر وجود دارد
که برای مبتدیان هنگام طراحی فضای سفید مفید است
و آن این است که ابتدا با فضای سفید زیاد شروع کنند
و سپس به تدریج مقداری از فضا را کم کنند
تا زمانی که ظاهر طراحی درست به نظر برسد
و دوباره البته با انجام این کار
باید اصل راهنما یعنی قانون نزدیکی را در نظر داشته باشیم
و همچنین بدانیم
که فضای سفید زیاد باعث می‌شود طراحی جدا از هم دیده شود
در حالی که فضای سفید کم طراحی را شلوغ و فشرده نشان می‌دهد
پس در این مثال ما در واقع این موضوع را آزمایش کردیم
و فضای زیادی اضافه کردیم
و در واقع الان همه چیز کمی جدا از هم به نظر می‌رسد
پس این وضعیت مطلوب نیست
و برای رفع این مشکل
فرض کنیم بیشتر فضای سفید را حذف کردیم
اما سپس طراحی خیلی فشرده شد
و حتی می‌توان گفت که
خواندن این متن چندان جذاب نیست
پس ظاهر آن شبیه به یک دیوار از متن شده است
که بسیاری از کاربران دوست ندارند آن را بخوانند
اما پس از کمی آزمایش و بازگرداندن بخشی از فضای سفید
ممکن است به نتیجه‌ای برسیم شبیه به این
که دقیقاً مناسب به نظر می‌رسد
و در این حالت خواندن و درک متن بسیار ساده‌تر است
همچنین طراحی ظاهری متعادل و خوشایند پیدا می‌کند
و به همین دلیل است که تجربه کاربری بهبود می‌یابد
پس می‌توان گفت آزمایش و تنظیم فضای سفید ضروری است
و نتیجه نهایی این است که همه چیز به درستی در جای خود قرار می‌گیرد
پس اینجا می‌توان حس کرد که طراحی می‌تواند نفس بکشد
و همه چیز نه بیش از حد جداست و نه خیلی فشرده
پس به این شکل وضعیت کاملاً ایده‌آل است
و بعدی یک دستورالعمل دیگر که می‌تواند به شما کمک کند
تا مقدار مناسب فضای سفید برای طراحی خود را انتخاب کنید
این است که باید سعی کنید با سایر انتخاب‌های طراحی خود هماهنگ باشد
خصوصاً وقتی صحبت از فضای سفید می‌شود
برای مثال اگر متن‌ها یا آیکون‌های بزرگی دارید
در این صورت به فضای سفید بیشتری نیاز خواهید داشت
پس درست مانند این مثال اول
اینجا متن بسیار بزرگ است
و بنابراین می‌بینیم که در اینجا واقعاً فضای خالی زیادی وجود دارد
هم در این صفحه و هم بین گروه‌های عناصر
فضای سفید قابل توجهی وجود دارد
حال اگر این را با طراحی سمت راست مقایسه کنید
اینجا متن و تصاویر همه نسبتاً کوچک هستند
و بنابراین فضای سفید بسیار کمتری وجود دارد
پس قطعاً اگر بخواهیم با این محتوای کوچک
فضای سفید زیادی بین عناصر ایجاد کنیم
این کار طبیعی به نظر نمی‌رسد
این اصلاً حس درستی ایجاد نمی‌کند درست است؟
و بنابراین دوباره باید کمی تلاش کنید
تا فضای سفید را با سایر انتخاب‌های طراحی خود هماهنگ کنید
که قبلاً انجام داده‌اید
و حالا در نهایت وقتی صحبت از
انتخاب مقادیر فضای سفید در CSS می‌شود
می‌توانید سعی کنید یک قانون سختگیرانه را دنبال کنید
همان‌طور که برای اندازه‌های فونت انجام دادیم
حالا البته نباید همان قانون را به کار ببرید
که در تایپوگرافی استفاده کردیم زیرا آن قانون
به طور خاص برای متن سازگار شده بود بلکه
می‌توانید از قانونی مشابه این استفاده کنید که فقط مضرب‌ها را به کار می‌برد
برای همه margin و paddingها 16 پیکسل مضربی باشد
که در صفحه اعمال می‌کنیم
حالا همچنین نیاز خواهید داشت برخی مقادیر کوچک‌تر را اضافه کنید
مثل ۲۴۸ و ۱۲ پیکسل
اما به طور کلی از آن به بعد
تمام مقادیر دیگر مضرب ۱۶ پیکسل خواهند بود
و برخی از آن‌ها حتی کنار گذاشته شده‌اند
فقط برای محدود کردن گزینه‌های شما
پس همان ایده‌ای است که قبلاً درباره اندازه فونت‌ها داشتیم
که گفتم محدود کردن گزینه‌ها
در واقع ایده خوبی است
پس به نظر می‌رسد محدودیت است اما در واقع عالی است
زیرا اینکه مدام درباره مقدار فاصله‌ای که می‌خواهیم استفاده کنیم فکر کنیم
می‌تواند واقعاً خسته‌کننده باشد
اما اگر سیستمی مثل این داشته باشیم
می‌توانیم فقط یک مقدار را انتخاب کنیم
و اگر آن مناسب نبود سراغ مقدار بعدی برویم
و این باور کنید
حتی راحت‌تر از قانون اندازه فونت‌ها خواهد بود
پس این کار طراحی را بسیار بسیار ساده‌تر و سریع‌تر می‌کند
به‌ویژه برای مبتدیان
و بنابراین ما دقیقاً از همین قانون در پروژه بزرگ خود استفاده خواهیم کرد
و در واقع همچنین در یکی از پروژه‌هایی که در این بخش انجام می‌دهیم
با این حال قبل از اینکه به آن بپردازیم
یک درس دیگر خواهیم داشت
که در آن درباره سلسله مراتب بصری صحبت خواهیم کرد
پس بیایید همین حالا به آن بخش برویم