Visual Hierarchy یا سلسله‌مراتب بصری یعنی مشخص کنیم کاربر در یک صفحه چه چیزی را اول، دوم و بعدتر ببیند. در UI Design، طراحی گرافیک و صفحه‌آرایی از اندازه، وزن، رنگ، کنتراست، فاصله و موقعیت استفاده می‌کنیم تا اهمیت عناصر برای کاربر قابل فهم باشد.
Visual Hierarchy چرا مهم است؟
اگر همه عناصر وزن بصری یکسانی داشته باشند، کاربر برای پیدا کردن عنوان، CTA یا اطلاعات اصلی انرژی بیشتری صرف می‌کند. Hierarchy خوب باعث می‌شود ساختار صفحه سریع‌تر قابل اسکن باشد و مسیر توجه با هدف محصول هماهنگ شود.
1. اندازه و مقیاس
عنصر بزرگ‌تر معمولا توجه بیشتری می‌گیرد، اما اندازه باید با نقش محتوا هماهنگ باشد. Heading اصلی لازم نیست صرفا «خیلی بزرگ» باشد؛ باید نسبت مشخص و سازگاری با Type Scale محصول داشته باشد.
2. رنگ و کنتراست
تفاوت رنگ، Lightness و Contrast می‌تواند یک عنصر را برجسته‌تر کند. از Accent Color برای عناصر واقعا مهم استفاده کنید تا اگر همه چیز رنگ تاکید داشته باشد، اثر Hierarchy از بین نرود.
3. Typography و Font Weight
تفاوت بین Heading، Body، Label و Supporting Text باید قابل تشخیص باشد. Size، Weight، Line Height و فاصله‌ها را به‌صورت سیستماتیک تعریف کنید. برای این بخش می‌توانید راهنمای Type Scale در UI را ببینید.
4. فاصله و گروه‌بندی
عناصری که به هم نزدیک‌اند معمولا مرتبط‌تر ادراک می‌شوند. Spacing فقط تزئین نیست؛ می‌تواند رابطه بخش‌ها و مرز گروه‌های اطلاعاتی را نشان دهد. این موضوع با بعضی اصول Gestalt مثل Proximity ارتباط دارد، اما Hierarchy را نمی‌توان صرفا زیرمجموعه Gestalt دانست.
5. موقعیت و Layout
جایگاه عنصر در صفحه، ترتیب خواندن و الگوهای آشنای رابط روی توجه اثر دارند. مثلا CTA اصلی باید در Context درست و در نزدیکی اطلاعاتی قرار بگیرد که کاربر برای تصمیم‌گیری نیاز دارد، نه صرفا در نقطه‌ای که از نظر بصری خالی است.
Visual Hierarchy در UI و صفحه‌آرایی
- عنوان اصلی باید از Headingهای فرعی و Body قابل تشخیص باشد.
- CTA اصلی نسبت به Actionهای ثانویه وزن مناسب‌تری داشته باشد.
- Metadata و متن کم‌اهمیت‌تر نباید با محتوای اصلی رقابت کند.
- Spacing و Alignment باید گروه‌بندی محتوا را روشن کنند.
- در Mobile Hierarchy باید با فضای کمتر هم قابل حفظ باشد.
