بسم الله الرحمن الرحیم
متنی که در ادامه دنبال میکنید ترجمه و خلاصهای از مقالات Nngroup در رابطه با موضوع طراحی بصری ست. هنگامی که به یک تصویر نگاه میکنیم، معمولا بلافاصله میتوانیم بگوییم که این یک تصویر جذاب است یا خیر. با این حال تعداد اندکی میتوانند علت جذابیت بصری تصاویر را تشخیص دهند و به زبان کلمات بیان کنند. گرافیکهای که از اصول طراحی بصری استفاده میکنند، میتوانند باعث افزایش تعامل کاربر و کاربردپذیری شوند. در ادامه به بررسی و تعریف ۵ اصل طراحی بصری و تاثیر آن بر طراحی تجربه کاربری میپردازیم. اصول طراحی بصری:
۱. مقیاس (Scale)
۲. سلسله مراتب (Visual hierarchy)
۳. تناسب (Balance)
۴. تضاد (Contact)
۵. قوانین گشتالت (Gestalt principles)
تقریبا هر طراحی بصری خوبی از اصل مقیاس بهره میبرد. هنگامی که این اصل به درستی استفاد شود مهمترین و اساسیترین عناصر در یک طرح بزرگتر از عناصر کماهمیت نگاشته میشوند تا توجه بیشتری به خود جلب کنند.
دقت داشته باشید که استفاده بیش از حد از سایز های مختلف یک فونت از لحاظ زیبایی بصری توصیه نمیشود درواقع در یک طراحی زیبا بیشتر از سه سایز مختلف یک فونت استفاده نمیشود.
یک دیزاین با رعایت سلسله مراتب بصری خوب به راحتی توسط کاربر شناسایی و قابل درک خواهد بود. سلسله مراتب به زبان ساده یعنی هدایت و راهنمایی چشم در صفحه به طوری که به عناصر مختلف طراحی، بر اساس اهمیت آنها توجه شود.
سلسله مراتب میتوانند از طریق تغییرات اعمال شوند، با ایجاد تغییر در رنگ، تایپوگرافی یا اسپیسینگ… . برای مثال آیتمهای مهم را با رنگهای روشن و آیتمهای کم اهمیتتر را با رنگهای مات دیزاین کنید، مثال دیگری که بسیار ملموس است و هر روز با آن مواجه میشویم، عنوان یک موضوع است که اهمیت ویژهای دارد و در بالای صفحه و با فونت بزرگ نوشته میشود تا در مواجهه اول یا First impression کاربر متوجه اصل موضوع شود. باید توجه داشت که استفاده از رنگهای زیاد باعث کاهش درک کاربر از سلسله مراتب میشود.
در طراحی خود به افراد کم بینا و یا دچار کور رنگی نیز توجه داشته باشید و فقط به استفاده از رنگ برای ایجاد سلسله مراتب اکتفا نکنید.
تعادل زمانی اتفاق میافتد که در هر دو طرف یک محور فرضی که از وسط صفحه می گذرد، سیگنال بصری به طور مساوی (اما نه لزوماً متقارن) توزیع شده باشد. این محور اغلب عمودی است اما میتواند افقی نیز باشد. در یک طراحی متعادل، هیچ ناحیهای آنقدر نظر شما را جلب نمی کند که نتوانید قسمت های دیگر را ببینید (حتی اگر برخی از عناصر وزن بصری بیشتری داشته باشند و نقاط کانونی باشند).
تعادل میتواند:
متقارن: عناصر به طور متقارن به محور فرضی مرکزی توضیع شوند.
نامتقارن: عناصر به صورت نامتقارن نسبت به محور فرضی توضیع شوند.
شعاعی: عناصر از یک نقطهی مشترک و مرکزی در جهت دایرهای به بیرون تابش پیدا میکنند.
اصل تضاد یا کنتراست یکی از اصول رایج در طراحی است که کمک میکند بخشهای خاصی از طراحی شما برای کاربران برجسته شوند. این اصل به کنار هم قرار دادن عناصر بصری غیرمشابه اشاره دارد تا این واقعیت را بیان کند که این عناصر متفاوت هستند. ایجاد تضاد از طریق تفاوت فاحش میان رنگ ها و یا سایز فونتها در تایپوگرافی امکان پذیر است و بر تمایز آنها تاکید میکند. توجه داشته باشید که هرگز برای کم اهمیت نشان دادن یک آیتم یا متن، کنتراست آن را کم نکنید! کنتراست کم، تجربه کاربری بدی به جای میگذارد زیرا کاربر احساس میکند مشکل از چشمهای اوست! همچنین طبق تحقیقات، کاربرها به متنهای با کنتراست کم، کمتر اعتماد میکنند و نتیجهٔ عدم اعتماد ترک کردن سایت یا اپلیکیشن شماست! کنتراست باید به نحوی باشد که کاربرد پذیری یا Usability کاربر را افزایش دهد. برای ایجاد کنتراست فقط به تفاوت رنگ ها اکتفا نکنید زیرا تعدادی از کاربر های شما مشکلات Readability یا مشکلات خوانداری دارند یا حتی دچار کور رنگی هستند، از این رو برای ایجاد کنتراست تنها به رنگها و تفاوت میان انها بسنده نکنید و ازطریق تفاوت میان سایز و یا نوع فونتها نیز، کنتراست ایجاد کنید.
اصول گشتالت توضیح میدهد که چگونه انسانها تصاویر پیچیدهای را که از عناصر متعددی تشکیل شدهاند، سادهسازی و سازماندهی میکنند. طبق این نظریه ذهن انسان تمایل به کلنگری دارد. نظریهٔ گشتالت قوانین و اصول متعددی را شامل میشود که در ادامه ۵ اصل اساسی و کاربرد آنها در طراحی را بررسی میکنیم.
۱. اصل مجاورت: اجزای که به هم نزدیکتر هستند به عنوان یک مجموعه واحد و مرتبت دیده میشوند.
۲. اصل تشابه: ذهن انسان اجزای که دارای خصوصیات مشابه هستند، به صورت یک مجموعه واحد میبیند. سه عامل مهم تشابه شامل شکل، رنگ و اندازه هستند که در میان آنها اندازه عامل قوی تری میباشد.
۳. اصل منطقه مشترک: براساس این اصل، عناصری که درون یک محدوده غالبا بسته گرد هم بیایند، به صورت جزئی از یک گروه درک میشوند.
۴. اصل نقطه کانونی: اشکال متمایز باعث ایجاد نقطه کانونی یا جلب نظر میشوند.