استفاده از توجه و تمرکز برای تقویت سلسله مراتب دیداری
المان هایی که با احاطه شدن در فضای سفید بر آنها تاکید شده، ممکن است برای متمرکز کردن توجه کاربر به یک بخش خاص در رابط کاربری استفاده شوند. به این صورت ما میتوانیم سلسله مراتب دیداری تاثیرگذار بسازیم و به ارزش قطعه هایی که میخواهیم کاربر بیشتر بر آنها تمرکز کند اضافه کنیم.
هر چه بیشتر اطراف یک المان فضای منفی اضافه کنیم، احتمال دیده شدن آن بالاتر میرود.
فاصله بین خطوط به عنوان فضای منفی
یکی از راه های اعمال فضای منفی میکرو، استفاده از فاصله خطوط است. فاصله خطوط نوعی دیگر از فضای منفی است که بین خطوط یک متن اعمال میشود. فاصله خطوط، فضای بین دو خط پایه از خطوط یک متن است.
تحقیقات نشان داده اند که رابطه مثبتی بین درک محتوا متن و فاصله خطوط وجود دارد. به این معنی که با افزایش فاصله خطوط، درک محتوا میتواند تا ۲۰ درصد افزایش یابد.
از کجا بفهمیم چه میزان فضای بین خطوط کافیست؟
بر اساس راهنمای دسترس پذیری وب (wcag 2.0) فضای بین خطوط متن باید حداقل ۱۵۰ درصد بزرگتر از اندازه فونت باشد.
این به این معنی است که تقریبا هیچگاه نباید از فاصله خطوط پیشفرض تعریف شده برای پاراگراف ها و عناوین استفاده کنیم. برای مثال اکثر مرورگر ها به صورت پیشفرض از فاصله خطوط ۱۱۰ درصد و ۱۲۰ درصد، Sketch و Adobe Creative Suite از ۱۲۰ درصد، Bootstrap از ۱۴۲ درصد اندازه فونت تعریف شده و Medium از ۱۵۷ درصد برای متون خود استفاده میکنند.
افزایش فضای منفی لزوما به صورت پیشفرض چیز خوبی نیست بلکه به نوع محتوا و اپلیکیشن بستگی دارد. برای مثال وقتی که با اپلیکیشن های خبری که تمرکز اصلی بر روی محتوای سنگین است سر و کار داریم، تامین فضای منفی کافی جهت رسیدن به خوانایی خوب و ایجاد درک درست از اپلیکیشن مانند تولید محتوا پویا و خبر هایی که به سرعت ظاهر میشوند، ضروری است. فرمول دقیقی برای تعیین میزان فضای منفی که باید در رابط کاربری اعمال کنیم وجود ندارد اما با تمرین و کسب تجربه در این کار ماهر تر میشویم.
در این دو مثال فضای منفی متفاوتی اعمال شده است:
برای اینکه ببینیم طرح بندی بدون محتوا یا فضای مثبت معنی دار چطور به نظر میرسد. در عکس زیر به وضوح میبینیم که فضای منفی چگونه به درک بهتر دیداری رابط کاربری کمک میکند:
میبینیم که اضافه کردن فضای منفی میتواند در سطوح مختلف اعمال شود. اضافه کردن درون کامپوننت ها:
استفاده از فضای منفی میکرو برای تنظیم فاصله خطوط در پاراگراف ها :
در تصویر سمت چپ پاراگرافی با اندازه فونت ۱۷ پیکسل با فاصله خطوط ۱٫۵۸ (۱۵۰%) را می بینیم و در سمت راست پاراگرافی با همان اندازه فونت و فاصله خطوط ۱٫۲۳ (۱۲۳%) را میبینیم.
اعمال فاصله خطوط سفارشی در اپلیکیشن های native اندروید و iOS
وقتی درباره اعمال فاصله خطوط سفارشی در اپلیکیشن های native صحبت میکنیم خواصی وجود دارد که باید از آنها مطلع باشیم. اگر میخواهیم از تایپوگرافی سفارشی با فاصله خطوط سفارشی در iOS استفاده کنیم نیاز است تا از نحوه اعمال شدن اندازه فونت پویا اطمینان حاصل کنیم. ویژگی مشخص کردن اندازه فونت پویا به کاربر اجازه میدهد تا با استفاده از نیاز های دسترسی پذیری اندازه فونت را در تمام دستگاه با توجه به سلیقه خود تنظیم کند که این کار اپلیکیشن ها را نیز تحت تاثیر قرار میدهد. علاوه بر این برای فاصله خطوط در استایل های کلی فونت های دستگاه هیچ اپلیکیشنی مستثنی نمیشود مگر اینکه به عنوان فونت سفارشی تعریف شده باشد که به این منظور باید مطمئن شویم که اپلیکیشن به خوبی برای کار با انداز فونت پویا پیاده سازی شده باشد. به همین دلیل زمانی که نمیتوانیم تایپوگرافی خود را با اندازه فونت پویا هماهنگ کنیم پیشنهاد میشود از فونت های سیستم iOS استفاده کنید تا از تامین حداکثر دسترسی پذیری برای کاربر اپلیکیشن خود اطمینان حاصل کرده باشیم.
در اندروید امکان تعریف مستقیم فاصله خطوط در استایل متن کلی به وسیله LineSpacingMultiplier وجود دارد.
نکات مهم
- اتکا به دانش روانشناسی و طرز کار ذهن انسان در رابطه با ادراک، حافظه و پردازش اطلاعات دیداری میتواند به ما کمک زیادی در طراحی رابط کاربری کند که این مسئله تاثیر بسزایی در تجربه نهایی کاربر دارد.
- استفاده از فضای منفی مناسب توجه کاربر را متمرکز میکند و سلسله مراتب دیداری معنی داری به وجود می آورد.
- فضای منفی مناسب در پاراگراف ها و متون توانایی خوانش و درک متن را افزایش میدهد.
فضای خالی بیشتر، تجربه کاربر برای حرکت در اپلیکیشن را سبک تر، روان تر، آسان تر، راحت تر میسازد.
منبع :
سلام و عرض ادب مطالب فوق العاده مفید و جذاب و جالب و در نهایت کاربری بودند و اشتیاق زیادی برای دنبال کردن مطالب ” طراحی کاربری ” دارم لطفا از این دسته مطالب و همچنین یک کتاب فارسی در رابطه با ” رابط کاربری ” معرفی کنید . بازم تشکر منتظر مطالب بعدتون هستم.