قدرت فضای خالی در UI

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

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

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

فضای منفی یک فضای هدر رفته نیست.

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

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

فضای منفی عصر فعال در طراحی ست

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

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

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

چگونه فضای منفی را در طراحی اعمال کنیم

دو نوع فضای منفی وجود دارد :1-میکرو 2- ماکرو . به طور ساده فضای ماکرو فاصله خارجی بین آیتم ها ست و فضای میکرو فاصله داخلی بین آیتم ها ست.

روش های که میتوان این فضا ها را در طراحی وب تغییر داد استفاده از margin(فاصله خارجی) ،
(فاصله داخلی)padding و spacing است.

چرا فضای منفی مهم است؟

فضای منفی به دلیل این که طراح می تواند با استفاده از آن توجه کاربر را به آنچه که خود می خواهد جلب کند.

چه طور ما این فضا را درک کنیم؟

ادراک ما همیشه به نخوی عمل می کند که ما اشیا را در ارتباط با هم می بینیم این بدان معناست که ما چگونه درک می کنیم.یعنی تقاضای اصلی در UI تقریباً 100% بر روی اشیای اطراف آن بستگی دارد.

همان طور که آندلسون نشان می دهد دو مقدار A و B دارای رنگ های متفاوتی هستند ، اما در حقیقت رنگ های آن ها یکسان است.با توجه به اینکه ذهن ما تمایل به درک آن ها به عنوان یک نتیجه از سایه و روشن را دارد رنگ های اطراف آن متفاوت است.حتی زمانی که ما از این واقعیت آگاه هستم که رنگ ها یکسان هستند باز هم نمی توانیم رنگ آن ها را از یکدیگر جدا کنیم. بنابراین همچنان رنگ را متفاوت می بینیم.

چگونه از این دانش در مورد درک ما در ارتباط با فضای منفی استفاده می کنیم؟

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

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

اکنون ببینیم که چگونه می توان برچسب ها را به ورودی ها اعمال کرد.

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

برای اعمال قوانین نزدیکی از میکرو و ماکرو استفاده می کنیم ، که میکرو فاصله بین هر گروه با برچسب است و ماکرو فاصله بین گروه ها در فرم است.

چگونه فضای منفی کمک می کند که داده ها را به سرعت و آسانی پردازش کنیم؟

یک روش خوب برای تعریف بخش ها در UI استفاده از فضای منفی ست. ما می توانیم از فضای سفید برای ایجاد گروه ها معنا داری از عناصر استفاده کنیم که به کاربر این امکان را می هده که آسانی آن ها را از هم جدا کند (بخش بندی کند.) به طوری که هر چه بیشتر با UI ارتباط برقرار کند عناصر برای کاربری ظاهر و معنایی داشته باشند.

استفاده از توجه و تمرکز برای تقویت سلسه مراتب بصری

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

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

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

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

چگونه بفهمیم که فاصله بین خطوط کافی است؟

با توجه به دستورالعمل دسترسی وب (wcag 2.0) فاصله بین خطوط باید 150% بزرگتر از اندازه فونت باشد.

این بدان معنا ست که ما هرگز از فاصله پیش فرض بین خطوط استفاده نمی کنیم. به عنوان مثال اغلب مرورگر ها به طور پیش فزض از 110% تا 120% فاصله بین خطوط استفاده می کنند و یا اسکچ ادوبی از 120% بوت استرپ 142% و Medum از 157%فاصله بین خطوط استفاده می کند.

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

برای دیدن ظاهر بدون محتوا یا فضای مثبت معنادار دیدگاه زیر را میتوان بدست آورد، که حتی در آن فضای منفی بهتر به درک UI یک رابط کاربری کمک می کند.

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

استفاده از فصای منفی میکرو برای تنظیم فاصله خطوط در پاراگراف ها

در سمت چپ از فونت سایز 17 پیکسل و فاصله بین خطوط 1.58 (150%) برابر فونت 17 پیکسل استفاده شده است. و در سمت راست با همان فونت سایز (17) و فاصله بین خطوط 1.23 (120%) فونت استفاده شده است.

فاصله بین خطوط در اندروید و IOS

هنگامی که از فاصله بین خطوط در برنامه ای داخلی استفاده می کنیم ، برخی از ویژگی ها از آن دیدگاه باشد.اگر می خواهید از تایپوگرافی سفارسی و فاصله بین خوطوط سفارشی در IOS استفاده کنید باید مطمئن شوید که از نوع داینامیک باشند. منظوز از داینامیک این است که کاربر تواند اندازه فونت را براساس دستگاه خود تغییر دهد . بنابراین یک توصیه خوب برای استفاده از فونت در IOS این است که حداکثر دسترسی را به کاربر در این زمینه دهیم . در اندروید هم می توان فاصله خطوط را به طور مستقیم با استفاذه از lineSpacingMultiplier انجام داد.

نتیجه گیری

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

با استفاده از فضای منفی می توان توجه کاربر را به آنچه که ما می خواهیم جلب کرد.

فضای منفی مناسب خوانایی و درک متن را افزایش می دهد.

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