اصول visual hierarchy در UI

Visual hierarchy چیست و چرا در UI حیاتی است؟

Visual hierarchy یعنی چیدمان عناصر بصری به‌گونه‌ای که اهمیت، ترتیب و ارتباط آن‌ها برای کاربر بدون خواندن متن هم قابل درک باشد. مغز انسان در کسری از ثانیه الگوها را اسکن می‌کند؛ اگر hierarchy ضعیف باشد، کاربر نمی‌داند CTA کدام است، عنوان کجاست یا آیا دو بلوک به هم مرتبط‌اند.

در UI، hierarchy فقط «زیبایی» نیست؛ ابزار business است. landing page با hierarchy درست، conversion بالاتری دارد. dashboard با hierarchy درست، خطای کاربر در خواندن KPI کمتر می‌شود. اپ موبایل با hierarchy درست، cognitive load را پایین می‌آورد و کاربر سریع‌تر task را تمام می‌کند.

در دوره UI Nova Lab، hierarchy یکی از اولین مهارت‌هایی است که بعد از wireframe تمرین می‌شود؛ چون visual design بدون hierarchy، حتی با palette حرفه‌ای هم شلوغ و amateur به نظر می‌رسد.

Size و Weight: ستون‌های اصلی تایپوگرافی

بزرگ‌تر بودن عنصر معمولاً به معنی مهم‌تر بودن است. عنوان H1 باید از H2 و body بزرگ‌تر باشد؛ اما oversizing همه چیز hierarchy را از بین می‌برد. قانون practical: در یک viewport موبایل، حداکثر سه سطح size مشخص برای متن داشته باشید — headline، subhead، body — و از scale type system استفاده کنید (مثلاً ۱۲، ۱۴، ۱۶، ۲۰، ۲۴، ۳۲).

Font weight (Regular، Medium، Semibold، Bold) برای تاکید بدون بزرگ کردن size به کار می‌رود. در جدول، header row با Semibold و data با Regular؛ در card، title با Bold و metadata با Regular و رنگ secondary. اشتباه رایج: Bold کردن بیش از حد که همه چیز فریاد می‌زند و هیچ‌کس برجسته نمی‌شود.

Line height و letter spacing هم بر hierarchy اثر می‌گذارند. عنوان کوتاه می‌تواند line-height تنگ‌تر داشته باشد؛ پاراگرaph طولانی به leading بیشتر نیاز دارد. در فارسی، pay attention به اتصال حروف و خوانایی در sizeهای کوچک — hierarchy زمانی موفق است که متن RTL هم در یک نگاه scannable باشد.

Color و Contrast: هدایت نگاه بدون شلوغی

رنگ primary برای action اصلی (CTA)، secondary برای action کم‌اهمیت‌تر، و neutral برای ground و background. اگر همه دکمه‌ها primary باشند، hierarchy رنگی از بین می‌رود. در Nova Lab توصیه می‌کنیم در هر section فقط یک «نقطه تمرکز رنگی» داشته باشید.

Contrast ratio استاندارد WCAG (حداقل ۴.۵:۱ برای body text) نه فقط accessibility است — hierarchy را هم تقویت می‌کند. متن با contrast پایین به پس‌زمینه «می‌نشیند» و secondary به نظر می‌رسد؛ متن مهم با contrast بالا جلو می‌آید. ابزارهایی مثل Contrast checker در Figma یا pluginهای accessibility را در workflow بگنجانید.

Semantic color (success، warning، error) باید در کل product یکسان باشد. error قرمز فقط برای خطا، نه decoration. وقتی semantic color در جای درست استفاده شود، کاربر بدون خواندن پیام کامل متوجه severity می‌شود — این خود نوعی visual hierarchy است.

Spacing، Proximity و Grouping

قانون proximity در Gestalt می‌گوید عناصر نزدیک به هم، گروه یکسان به نظر می‌رسند. در فرم، label نزدیک input؛ فاصله بیشتر بین field groups. در pricing page، هر plan در card جدا با padding یکسان. فاصله نامنظم باعث می‌شود کاربر ارتباط معنایی را اشتباه بفهمد.

Spacing scale (۴، ۸، ۱۲، ۱۶، ۲۴، ۳۲، ۴۸، ۶۴) consistency ایجاد می‌کند. section بزرگ با margin بیشتر از element داخلی جدا می‌شود. white space عنصر تزئینی نیست — breathing room برای hierarchy است. صفحات شلوغ اغلب spacing کافی ندارند، نه اینکه «محتوا زیاد است».

Grid و alignment هم hierarchy را تقویت می‌کنند. محتوای left-aligned (یا RTL: راست‌چین یکدست) scannable‌تر از center-aligned طولانی است. ستون‌های نامتقارن می‌توانند area مهم را بزرگ‌تر نشان دهند — مثلاً ۲/۳ برای content اصلی و ۱/۳ برای sidebar.

تصویر، آیکون و سایه: لایه‌های ثانویه hierarchy

Hero image با contrast و subject واضح توجه را جذب می‌کند؛ اما اگر headline روی تصویر contrast کافی نداشته باشد، hierarchy از بین می‌رود. overlay تیره یا light text shadow راه‌حل رایج است. thumbnail کوچک در list نباید با hero image یک screen رقابت کند — size و position نقش را مشخص می‌کنند.

آیکون‌ها برای scan سریع label همراهی می‌کنند، نه جایگزین آن. آیکون + متن برای navigation بهتر از icon-only است، مگر در toolbar که کاربر آموزش دیده. size آیکون باید با text line-height هم‌تراز باشد تا visual noise ایجاد نشود.

Elevation (shadow، border، background tint) برای card و modal depth می‌سازد. element elevated مهم‌تر به نظر می‌رسد — مثلاً modal روی backdrop. اما shadow everywhere عمق را flatten می‌کند؛ فقط برای layer واقعاً بالاتر استفاده کنید.

تمرین عملی: ارزیابی hierarchy در Figma

یک frame طراحی‌شده را blur کنید (plugin blur یا squint test). اگر هنوز بتوانید CTA و title را حدس بزنید، hierarchy قوی است. اگر همه یک mass خاکستری شد، باید size، weight یا color را بازنگری کنید.

Grayscale test: design را موقتاً سیاه‌سفید کنید. hierarchy واقعی باید بدون رنگ هم کار کند. اگر CTA بدون رنگ گم شد، روی size/weight تکیه کنید نه فقط رنگ قرمز.

در critique کلاس Nova Lab از checklist استفاده کنید: یک primary action؟ عنوان واضح؟ secondary content متمایز؟ فاصله گروه‌ها درست؟ contrast متن OK؟ این habit در پروژه حرفه‌ای زمان review را کم و کیفیت را زیاد می‌کند.

اشتباهات رایج و اصلاح سریع

همه چیز Bold و رنگی: محدود کنید به یک CTA و یک headline dominant. بقیه neutral. «کم کردن» اغلب قوی‌تر از «اضافه کردن» است.

Typography scale تصادفی: از ۸ size مختلف در یک صفحه پرهیز کنید. design token و type scale ثابت بسازید.

Ignoring RTL: در فارسی، hierarchy باید از راست شروع شود — logo، navigation، primary content. mirror کردن layout LTR بدون فکر، flow چشم را به هم می‌ریزد.

Mobile last: hierarchy desktop که در موبایل فشرده می‌شود often می‌شکند. mobile-first hierarchy یعنی اول viewport کوچک را درست کنید، بعد expand.