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

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

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

فضای خالی( منفی) چیست؟

فضای خالی یا فضای منفی بخشی است که هیچ المانی ندارد. در انگلیسی به آن white space می‌گویند چون معمولا فضای خالی به رنگ سفید دیده می‌شود اما این بخش می‌تواند، یک رنگ خنثی مثل خاکستری داشته باشد، یا حتی یک تصویر پس‌زمینه محو باشد.

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

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

قدرت فضای خالی در UI: 

• احساس ظرافت
• بهبود خوانایی
• برجسته شدن محتوای اصلی
• تعریف رابطه بین المان‌ها بدون استفاده از عناصر اضافی
• تقسیم فضای صفحه بدون استفاده از قاب
• حس لوکس بودن
• و…

چگونه از تکنیک فضای خالی در طراحی UI استفاده کنیم؟

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

۱-  با فضای خالی خوانایی نوشته‌ها را افزایش دهید

بخش‌های زیادی از سایت با متن پر شده است. متن‌های زیاد و بدون پاراگراف‌بندی معمولا توسط کاربر خوانده نمی‌شوند! از فضای خالی می‌توانیم برای افزایش خوانایی و درک بهتر مخاطب از عناصر متن استفاده کنیم.

• برای افزایش خوانایی سعی کنید فضای حاشیه متن‌ها خالی باشد – مثلا همین متنی که می‌خوانید را ببینید – فضای خالی در راست و چپ متن، خوانایی نوشته را بیش از ۲۰ درصد افزایش می‌دهد.
• هر پاراگراف معمولا یک عنوان دارد. متن پاراگراف باید به عنوان نزدیک باشد و متن و عنوان تشکیل یک گروه متنی را بدهند. این گروه‌های متنی را از بخش‌های دیگر با فاصله دور کنید. این کار باعث می‌شود کاربر راحت‌تر متن را درک کند.
• برای افزایش خوانایی می‌توان فاصله بین خطوط را هم افزایش داد. این کار باعث می‌شود متن درهم به نظر نرسد و دست شما در افزایش سایز فونت بازتر باشد.

۲-  با فضای خالی کاربر را به سمت محتوایی که می‌خواهید هدایت کنید

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

قانون ۱۵ امتیاز

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

فضای خالی باعث می‌شود توجه مخاطب مستقیم به سمت باکس جستجو برود.

۳- از فضای خالی برای مرزبندی صفحه استفاده کنید

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

خطوط مرزبندی قدیمی حذف شده و سایت بدون کم شدن تعداد المان حس سبکی بیشتری پیدا کرده است.

۴- با فضای خالی حس لوکس و ظریف بودن را انتقال دهید

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

استفاده از فضای منفی در طراحی سایت هاکوپیان

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

نویسنده Hossein Rahimi

علاقه‌مند به دنیای open source، وب و وردپرس