فضای سفید در طراحی رابط کاربری

فضای سفید مانند بازیگر نقش مکملی است که از سایر بازیگران پشتیبانی می‌کند و وظیفه دارد تا به نمایش دیگر ستاره‌ها کمک کند.

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

«فضای سفید» برخلاف اسمش، لازم نیست تا حتماً سفید باشد. این فضا می‌تواند با هر رنگ، بافت، الگو و حتی عکس پر شود.

تفاوت دیدگاه مشتریان و طراحان

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

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

در این مطلب به روش‌های مؤثر استفاده از رنگ سفید در طراحی وب‌سایت می‌پردازیم و به این موضوع اشاره داریم که استفاده از رنگ سفید باید به یک عادت در طراحی تبدیل شود

تمرین هایی برای استفاده از فضای سفید

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

مقاله مرتبط: ٥ تکنیک برای طراحی بهتر دکمه CTA

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

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

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

۱- ۱۵ نقطه برای جلب‌ توجه مخاطب

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

وب‌سایت MailChimp یک نمونه بسیار خوب برای روشی است که باگ به آن اشاره‌کرده است.

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

۲- اولویت خوانایی متن‌ها

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

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

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

۳- فضای خالی را بشکنید

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

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

۴- فضای سفید چقدر تاثیر دارد؟

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

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

نتیجه‌گیری

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