Visual Hierarchy

نویسنده: استودیو داکس

مطالعه 2 دقیقه

لینک با موفقیت کپی شد.

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

نکات مهم درباره Visual Hierarchy

اندازه مهمه، عناصر بزرگ‌تر معمولا مهم‌تر به نظر می‌رسن.
کنتراست، کلید موفقیته، استفاده از رنگ‌های متضاد یا فونت‌های متفاوت، باعث میشه یک عنصر خاص بیشتر به چشم بیاد.
موقعیت مکانی اهمیت داره. عناصر در بالای صفحه یا وسط صفحه، معمولاً توجه بیشتری رو به خود جلب می‌کنن.
فضای خالی (White Space) هم بخشی از سلسله مراتبه. فضاهای خالی اطراف عناصر، به اون‌ها کمک می‌کنه تا برجسته‌تر به نظر برسن.
خطوط و جهت‌دارها (Lines & Arrows) هم می‌تونن راهنما باشند. اینها می‌تونن توجه رو به سمت یک عنصر خاص هدایت کنن.
اولویت‌بندی، اصل اساسیه. تعیین کنین کدوم اطلاعات مهم‌تر هستن و اون‌ها رو با تاکید بصری بیشتری طراحی کنین.

مثالی از Visual Hierarchy

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