قدرت و تاثیر فضای خالی سفید در طراحی UI

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

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

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

ذهن شما سریعا تصویر A را ترجیح می دهد و این تصویر بیشتر برای شما جذاب خواهد بود ولی چرا این اتفاق می افتد . دلایل آن به شرح زیر می باشد:

مزیت های فضای خالی بین المنت ها
ویژگی های فضای خالی سفید بین المنت ها
  • فضای خالی سفید به کاربر اجازه میدهد تا سریع تر مطالب را بخواند و آنان را اسکن کند
  • فضای خالی سفید باعث جلوگیری از بهم ریختگی و آشفگی در UI می شود
  • فضای خالی سفید بین المنت ها باعث میشه که کاربر بتواند سریع و به راحتی بتواند المنت ها و مطالبی که بهم مربوط می شوند در کنار هم قراره داده و دسته بندی کند

فضای خالی سفید برای طراحی تجربه کاربری مثل اکسیژنه ، لازم برای نفس کشیدن طراحی گرافیکی

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

فضای خالی ماکرو (macro white space) : فضای خالی که بین دو المنت یا کامپونت بزرگ می باشد.

فضای خالی میکرو (micro white space) : فضای خالی که بین دو المنت یا کمپونت کوچیکتر می باشد.

فضای خالی سفید ماکرو و میکرو
فضای خالی ماکرو و میکرو و تفاوت های ان

قانون فاصله و نزدیکی

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

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

در تصویر زیر المنت هایی که فاصله بیشتر دارند به صورت گروه های تکی به نظر می رسند ولی المنت هایی که باهم فاصله کمتری دارند به نظر یک گروه مشترک می رسند .

تاثیر فاضی خالی در دستعه بندی المنت ها
تاثیر فاضی خالی در دستعه بندی المنت ها و کامپونت ها

فاصله بین خطوط

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

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

تاثیر فضای خالی بین خطوط در خوانایی
تاثیر فاضی خالی در دستعه بندی المنت ها و بهبود رابط کاربری

خلاصه

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

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

پست های مرتبط

روان شناسی رنگ ها و تاثیر آن بر طراحی واسط کاربری – UI

روان شناسی رنگ ها و تاثیر آن بر طراحی واسط کاربری – UI

روان شناسی رنگ ها و تاثیر آن بر طراحی واسط کاربری - UI در این پست سعی شده تاثیرات رنگ ها بر تصمیمات و افکار... .

نوشته شده در

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

با عضویت در خبرنامه از آخرین اخبار مطلع شوید