فضای خالی در طراحی UI

اشتراک گذاری در linkedin
اشتراک گذاری در twitter
اشتراک گذاری در whatsapp
اشتراک گذاری در telegram

زمان تقریبی مطالعه: ۱۰ دقیقه

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

تعریف فضای خالی (فضای سفید)

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

انواع فضای خالی

از نظر میزان بزرگی، ۲ نوع فضای خالی داریم: ۱) فضای خالی ماکرو: فضای بزرگ بین اجزای مهم صفحه و فضای حاشیه‌ای اطراف صفحه است. این فضا در سمت راست و چچپ اکثر وب‌سایت‌ها و اپلیکیشن‌ها و بین بخش‌های مهم مانند هدینگ و مرکز صفحه استفاده می‌شود. شاید بهترین مثال استفاده از فضای خالی ماکرو وب‌سایت Google.com باشد. ۲) فضای خالی میکرو: فضای بین اجزای صفحه است، مانند فضای بین حروف، سطرها و پاراگرف‌ها، دکمه‌ها و لیست‌ها. فضای خالی میکرو بر روی خوانایی محتوا تاثیر مستقیم دارد. این خوانایی را در ابتدای سطر اول هر پاراگراف، که کمی جلوتر از خط‌های زیرین است، دیده‌اید.

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

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

فضای خالی ماکرو در طراحی UI

شکل شماره ۱: فضای خالی ماکرو فعال و غیر فعال.

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

فضای خالی میکرو فعال و غیرفعال در طراحی UI

شکل شماره ۲: فضای خالی میکرو فعال و غیر فعال.

چرا فضای خالی خوب است؟

وجود فضای خالی در اطراف یک بخش باعث جلب توجه می‌شود؛ چون هیچ چیز دیگری وجود ندارد که انرژی و کشش بصری داشته باشد. در واقع، هرقدر فضای خالی بیشتر باشد، به‌همان اندازه، توجه‌ها بیشتر جلب می‌شود. یک مکان خوب برای استفاده از فضای خالی در اطرافی Call To Action است. این فضا باعث انتقال بهتر پیام CTA می‌شود و احتمال ایجاد تعامل با کاربر را افزایش می‌دهد. یک نگاه به دکمه Shop Now در شکل شماره ۳ بندازید تا این موضوع را بهتر درک کنید.

فضای خالی در اطراف CTA

شکل شماره ۳: فضای خالی صفحه تبلیغاتی سامسونگ و دکمه خرید که باعث جلب توجه بیشتر شده است.

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

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

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

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

جمع‌بندی

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

دوره آموزش صفر تا صد طراحی UI

اگه دوست داری وب‌سایت و اپلیکیشن طراحی کنی و در کنارش به‌هنر هم علاقه داری، این دوره بهت کمک می‌کنه به‌خواسته‌ات برسی

مدت: ۶ هفته + ۱ سال

سطح: متوسط

بیشتر بخونید
آموزش UX و UI
مهارت نرم

جلب اعتماد دیگران، یک مسئله مهم

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

باز کردن مقاله
طراحی معماری اطلاعات
تجربه کاربر

مبانی معماری اطلاعات

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

باز کردن مقاله

فهرست مطالب

فهرست مطالب

دوره آموزش صفر تا صد طراحی UI

اگه دوست داری وب‌سایت و اپلیکیشن طراحی کنی و در کنارش به‌هنر هم علاقه داری، این دوره بهت کمک می‌کنه به‌خواسته‌ات برسی

مدت: ۶ هفته + ۱ سال

سطح: متوسط

برای اطلاع از جدیدترین مقاله‌ها و پادکست‌ها ایمیلتون رو وارد کنید

قرار نیست با ایمیل تبلیغاتی پیاپی اذیت بشید. فقط به‌صورت ماهانه بهتون اطلاع میدیم.

آموزش تئوری فقط معلومات شما را زیاد می‌کند و در بازار کار کمک چندانی به‌شما نمی‌کند. شیوه آموزشی ما به‌صورت عملی است. پروژه‌ها و تمرین‌هایی که انجام می‌دهید عینا مشابه کارهایی است که در محیط واقعی و بازار کار به یک طراح سپرده می‌شود. با بیش از ۴ سال سابقه تخصصی در حوزه آموزش طراحی UI و UX درخدمت شما هستیم

شبکه های اجتماعی

تو وقت های اضافه هم طراحی محصول یاد بگیر

تمامی حقوق این وبسایت متعلق به آکادمی DUXLAB است.

اسکرول به بالا