فاطمه علاءالدین
فاطمه علاءالدین
خواندن ۳ دقیقه·۴ سال پیش

فضای منفی در طراحی رابط کاربری


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

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


فضای سفید یا white space دقیقا چیه؟

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

حالا یه کم عمیق تر بررسی کنیم ببینیم چه تاثیری روی usability و ui داره؟

1. اولویت بندی:
در واقع visual hierarchy یا اولویت بندی بصری یه گام مهم در طراحی رابط کاربری است. معمولا قسمت‌های مهم به صورت بولد و در بالا قرار میگیره به طوری که به راحتی قابل دیدن و خواندن باشه و قسمت های دیگه در زیر به صورتی طراحی میشه که کمتر توجه جلب کنه. اما اگر شما فضای سفید رو در طراحی رعایت نکنید، طراحیتون گیج کننده و غیر جذاب می‌شه.


2. استفاده از فضای منفی برای جلب توجه در قسمتی خاص

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

همچنین فضای منفی می‌تونه باعث ایجاد تاکید بر روی متن بشه. می‌تونه در ترکیب با تغییرات سایز و رنگ متن استفاده بشه.





این جمله که با فضای منفی احاطه شده نمونه‌ای از این موارد است!




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

وقتی همه چیز بزرگ و درخشان و مهمه در واقع هیچ چیزی مهم به نظر نمی‌رسه!!


3. پیدا کردن تعادل

چه مقدار از فضای منفی کافیه؟ این سوالیه که معمولا در حوزه طراحی پیش میاد. یه جواب ساده اینه: طراح‌هایی که به کاربر امکان میده اطلاعات رو راحت درک کنند.

استفاده از فضای سفید تا چه اندازه‌ای کفایت می‌کنه؟ این پرسشی‌ است که غالبا در حوزه‌ی دیزاین مطرح می‌شه. پاسخ ساده به این مسئله استفاده‌ی متعادل از فضای سفید است، به نحوی که به کاربر اجازه درک و دریافت اطلاعات رو بده ولی بر مخاطب چیره نشه.

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


4. ایجاد ثبات و یکدستی در طرح ها (Consistency )

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

ناسازگاری (Inconsistency ) در استفاده از این مورد باعث ایجاد یه رابط کاربری خراب و مشکل دار می‌شه.

در مثال سمت چپ فضای منفی ناسازگار باعث شده عکس‌ها در 2 مجموعه دیده بشن، یک گروه در بالا و یکی در پایین.

در حالی که در تصویر سمت راست فضای منفی یکسان و ثابت است و 6 تصویر به صورت یک گروه دیده میشن.



5. استفاده از فضای منفی به صورت خلاقانه

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

از این روش میشه برای به تصویر کشیدن یک موضوع بصری مرتبط استفاده کرد و در واقع ویژگی بصری اون نوشته و طرح رو تقویت کرد.

استفاده خلاقانه از فضای منفی
استفاده خلاقانه از فضای منفی


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


در نتیجه فضای منفی مثل هنره. باید درست انجامش بدید تا دیزاینتون موثر‌تر و حرفه‌ای‌تر بشه.

امیدوارم خوندن این مطلب بهتون کمک کنه به فضاهای منفی در طراحی رابط کاربری طور دیگه ای نگاه کنید.

*می‌تونید اینجا و اینجا منابع اصلی این مطلب رو ببینید و بیشتر در موردش بخونید.

طراحی رابط کاربریطراحی تجربه کاربریui designwhite space
شاید از این پست‌ها خوشتان بیاید