فضای خالی در طراحی تعاملی : به کارگیری قدرت پنهان «هیچ‌چیز»! (بخش اول)

\r\nطراحی ما در یک صفحه نمایش محدود قرار دارد. در این جعبه‌ی کوچک چیزهای زیادی می‌تواند گفته شود و انجام شود.پس هر پیکسل بسیار ارزشمند است.\r\n \r\n\r\nهمه طراحان، حتی آن‌هایی که مبتدی هستند می‌دانند که نباید یک صفحه را بیش از حد شلوغ کنند. اما طراحان خبره هم گاهی فراموش می‌کنند که چه مقدار از فضای خالی را باید استفاده کنند.\r\n فضای خالی (white space) که گاهی با نام فضای منفی (negative space) نیز شناخته می‌شود، هر فضایی است که بین دو المان خارجی در صفحه‌ی نمایش قرار دارد. این فضا حتما نباید سفید یا حتی خالی باشد.\r\n فضای منفی یک خلأ از محتوا ایجاد می‌کند ، به طوری که توجه بیشتری را به محتوای موجود جلب کند.\r\n در این مقاله ، درباره ی چگونگی اعمال یکی از قدرتمند ترین ابزار طراحان در جعبه ابزار آنها صحبت خواهیم کرد :‌ هیچ چیز!\r\n

ایجاد فضای خالی

\r\nمی‌دانیم که فضای منفی ابتدا یکی از اجزاء زیبایی شناسی بوده است.\r\n\r\n\r\n\r\nدر طراحی دیجیتال، این فضای خالی در محصول اهمیت بیشتری پیدا می‌کند. فضای منفی لزوما به صورت بصری جذاب نیست، بلکه باید نقشی عملی در هماهنگ سازی سلسله مراتب بصری و هدایت چشم کاربر به نقاط استراتژیک تعامل را بازی کند. علاوه بر این، اگر متنی وجود داشته باشد، فضای خالی باید واضح ترین و خوانا ترین محیط را فراهم کند. این مهم‌ترین وظیفه فضای خالی است.\r\n به طور کلی، فضای خالی به صورت مستقیم موار زیر را تحت تاثیر قرار می‌دهد:\r\n\r\nبررسی چشمی : فضای بین المان‌های بزرگ تر (فضای خالی ماکرو) بر روی چگونگی حرکت چشم کاربر حین بررسی صفحه تأثیر می‌گذارد، و هنگامی که به درستی استفاده می‌شود می‌تواند دید کاربر را به گونه‌ای جهت دهد که هر المانی دوست داریم و می خواهیم دیده شود را ببیند. این تأثیر برای ایجاد هویت نام تجاری و افزایش تعاملات کاربر مفید است.\r\n\r\nقابلیت خوانایی : فضای بین عناصر کوچکتر (فضای خالی میکرو) مانند حروف، خطوط متن ها، موارد لیست، و گاهی آیکون ها می توانند به اینکه چه مقدار هر کدام از آن ها می‌توانند واضح تر و سریع تر خوانده شوند و احتمالاً انتخاب شوند تأثیر می‌گذارد.\r\n\r\nزیبایی شناسی : وقتی همه اجزا را در نظر می‌گیریم ، فضای خالی نقش بسیار مهمی در سازمان دهی بصری (و به دنبال آن زیبایی شناسی) را در رابط بازی می‌کند.به عنوان مثال دسته‌بندی تصادفی محتوا به طور معمول مفید نیست.\r\n\r\nلوکس بودن : فضای خالی زیاد، صفحه شما را پر از ظرافت و کمال خواهد کرد.\r\n\r\nبرای درک بهتر چگونگی استفاده از فضای خالی، می توانیم انواع مختلف و همچنین روش های مختلف استفاده از آنها را دسته بندی کنیم.\r\n

ماکرو و میکرو

\r\nاینکه فضای خالی کجا و چگونه در یک صفحه استفاده شده است نقش آن را تحت تاثیر قرار می دهد. برای ساده سازی ، می توانیم آن را به انواع میکرو و ماکرو بشکنیم.\r\n

۱. فضای خالی در ابعاد بزرگ (macro white space)

\r\nفضای خالی ماکرو به فاصله ی بین المان ها و عناصر بزرگ گفته می‌شود. این فضا برای موارد زیر استفاده می شود:\r\n

    \r\n

  • ترکیب عمومی
  • \r\n

  • جدا سازی عناصر مختلف
  • \r\n

  • ستون های متنی
  • \r\n

  • حاشیه ها
  • \r\n

  • پدینگ
  • \r\n

  • فضای بین عکس‌ها و تصاویر گرافیکی
  • \r\n

\r\nفضای خالی ماکرو یا در ابعاد بزرگ به شدت روی جریان بصری کاربر تأثیر می‌گذارد. این تاثیر یا با ملایمت توجه مخاطب را جلب می‌کند و یا به زور این کار را انجام می‌دهد. در اینجا یک قانون وجود دارد و آن این است که فواصل بیشتر با شدت بیشتری توجه را جلب می کنند. در واقع ما می‌خواهیم تعادل را بر هم بزنیم اما فضای خالی بیش از حد اصول ژستالت (Gestalt Principles) را نقض می‌کند و رابطه‌ی بین اشیاء را هم ضعیف می‌کند.\r\n بیایید نگاهی به سایت Tomasz Wysocki به عنوان نمونه ای از استفاده مناسب از فضای خالی در تعامل با کاربر داشته باشیم.\r\n\r\n\r\n\r\nاولین چیزی که بیشتر کاربران به آن نگاه می کنند تیترصفحه است. “Digital Art & Experiments” در یک فونت معمولی . در رابطه با اندازه متن ، فضای خالی اطراف تیتر توجه کاربران را از هر دو طرف جلب می کند. همچنین منو های بالا و پایین هم توجه را به خود جلب می‌کنند. اگرچه نه به همان اندازه زیرا فقط در یک طرفشان فضای خالی دارند. به طور کلی ، فضای خالی وظیفه‌ی خود را برای جلب کردن توجه کاربر انجام می دهد. با کشیدن نشانگر موس روی صفحه ناگهان تجربه‌ای جذاب خلق می‌شود. تصویر زیر نقاشی‌ای که روی بوم ظاهر می‌شود را نشان می‌دهد.\r\n\r\n\r\n\r\nبا استفاده از فضای خالی به عنوان یک ابزار برای تحریک کاربران، wysocki تجربه ای ایجاد می‌کند که به طرز عجیبی اعتیاد آور است. بعد از اینکه اولین تصویر ظاهر می‌شود ، دوست داریم ببینیم که دیگر چه چیزی از ما مخفی شده است.\r\n

۲. فضای خالی در ابعاد کوچک و ریز یا میکرو (micro white space)

\r\nوقتی طراحان از فضای سفید میکرو صحبت می کنند منظورشان فضای بین عناصر کوچکتر یا هر یک از عناصر با عناصر بزرگتر است. این عناصر عبارتند از:\r\n

    \r\n

  • حروف
  • \r\n

  • خطوط متن
  • \r\n

  • پاراگراف ها
  • \r\n

  • آیتم‌های یک لیست
  • \r\n

  • دکمه‌ها و آیکون‌ها
  • \r\n

\r\nفضاهای خالی میکرو بیشتر برای وضوح کلی سایت بخصوص خوانایی تایپوگرافی استفاده می‌شود (این که چگونه می‌توان هر حرف را به وضوح تشخیص داد). هنگامی که درون یک متن و اطراف آن فضای خالی ایجاد می‌کنیم، میخواهیم کمی تعادل را بر هم بزنیم تا به شفافیت و وضوح کمک کند اما نمی‌خواهیم از بر هم زدن تعادل به قدری باشد که حواس مخاطب را از بخش‌های مهم‌تر پرت کند.\r\n معمولا تنظیم ارتفاع خط (فضای عمودی بین خطوط) به اندازه حدودا ۱.۵ برابر اندازه حروف مقدار خوبی است.\r\n همانطور که در بحث درباره اصول ژستالت اشاره می‌شود، قرار دادن عناصر در مجاورت و نزدیکی یکدیگر نشان دهنده این است که آنها مشابه هم عمل می‌کنند. فضای خالی میکرو می‌تواند نشان دهنده ارتباط بین دکمه ها یا لینک ها باشد و استفاده از این فاصله ها در جای دیگر یک الگو را تقویت می‌کند که باعث افزایش شناخت و قابلیت یادگیری در حین استفاده می‌شود.\r\n با این که ماکرو و میکرو از انواع فضای خالی هستند، هر کدام از آنها می توانند به صورت فعال یا غیر فعال مورد استفاده قرار بگیرند که در ادامه توضیح می دهیم.\r\n\r\n