اصول سلسلهمراتب دیداری در رابط کاربری
سلسلهمراتب دیداری به کاربر می‌گوید اول کجا نگاه کند، چه چیزی مهم‌تر است و بعد چه کار کند. در این مقاله اندازه، وزن، رنگ، فاصله و تضاد را با مثال رابط مرور می‌کنیم.
سلسلهمراتب دیداری چیست و چرا حیاتی است؟
سلسلهمراتب دیداری یعنی چیدن عنصرها طوری که اهمیت، ترتیب و ارتباط آن‌ها حتی بدون خواندن متن قابل درک باشد. مغز در کسری از ثانیه الگو را اسکن میکند؛ اگر سلسلهمراتب ضعیف باشد، کاربر نمی‌داند دعوت به عمل کدام است، عنوان کجاست، یا آیا دو بلوک به هم مربوط‌اند.
در رابط این فقط زیبایی نیست؛ ابزار کسب‌وکار است. صفحهٔ فرود با سلسلهمراتب درست تبدیل بالاتری دارد. داشبورد با سلسلهمراتب درست خطای خواندن شاخص را کم میکند. اپ موبایل با سلسلهمراتب درست بار ذهنی را پایین می‌آورد و کار زودتر تمام میشود.
در دورهٔ رابط Nova Lab سلسلهمراتب یکی از اولین مهارت‌ها بعد از طرح اولیه است؛ چون طراحی دیداری بدون آن، حتی با پالت حرفه‌ای، شلوغ و تازه‌کار به نظر می‌رسد.
اندازه و وزن: ستون‌های تایپوگرافی
بزرگ‌تر بودن معمولاً یعنی مهم‌تر بودن. عنوان اصلی باید از عنوان فرعی و متن بدنه بزرگ‌تر باشد؛ اما بزرگ کردن همه چیز سلسلهمراتب را از بین می‌برد. قانون عملی: در یک نمای موبایل حداکثر سه سطح اندازه برای متن — عنوان، زیرعنوان، بدنه — و از مقیاس ثابت استفاده کنید (مثلاً ۱۲، ۱۴، ۱۶، ۲۰، ۲۴، ۳۲).
وزن قلم (معمولی، متوسط، نیمه‌ضخیم، ضخیم) برای تأکید بدون بزرگ کردن اندازه به کار می‌رود. در جدول، سرستون نیمه‌ضخیم و داده معمولی؛ در کارت، عنوان ضخیم و اطلاعات جانبی معمولی با رنگ فرعی. اشتباه رایج: ضخیم کردن بیش از حد که همه فریاد می‌زنند و هیچ‌کس برجسته نمی‌شود.
ارتفاع خط و فاصلهٔ حروف هم اثر دارند. عنوان کوتاه می‌تواند ارتفاع خط تنگ‌تر داشته باشد؛ پاراگراف طولانی به فاصلهٔ خط بیشتر نیاز دارد. در فارسی به اتصال حروف و خوانایی در اندازهٔ کوچک توجه کنید — سلسلهمراتب وقتی موفق است که متن راست‌به‌چپ هم در یک نگاه قابل اسکن باشد.
رنگ و تضاد: هدایت نگاه بدون شلوغی
رنگ اصلی برای عمل اصلی، رنگ فرعی برای عمل کم‌اهمیت‌تر، و خنثی برای زمینه. اگر همه دکمه‌ها اصلی باشند، سلسلهمراتب رنگی از بین می‌رود. در Nova Lab توصیه می‌کنیم در هر بخش فقط یک نقطهٔ تمرکز رنگی داشته باشید.
نسبت تضاد استاندارد دسترس‌پذیری (حداقل ۴.۵ به ۱ برای متن بدنه) فقط دسترس‌پذیری نیست — سلسلهمراتب را هم تقویت میکند. متن با تضاد پایین در پس‌زمینه می‌نشیند و فرعی به نظر می‌رسد؛ متن مهم با تضاد بالا جلو می‌آید. ابزار بررسی تضاد در Figma را در روند کار بگنجانید.
رنگ معنایی (موفقیت، هشدار، خطا) باید در کل محصول یکسان باشد. قرمز خطا فقط برای خطا، نه تزئین. وقتی رنگ معنایی درست استفاده شود، کاربر بدون خواندن پیام کامل شدت را می‌فهمد — این خود نوعی سلسلهمراتب است.
فاصله، نزدیکی و گروه‌بندی
قانون نزدیکی گشتالت می‌گوید عنصرهای نزدیک گروه یکسان به نظر می‌رسند. در فرم، برچسب نزدیک فیلد؛ فاصلهٔ بیشتر بین گروه‌های فیلد. در صفحهٔ قیمت، هر طرح در کارت جدا با فاصلهٔ داخلی یکسان. فاصلهٔ نامنظم باعث میشود کاربر ارتباط معنایی را اشتباه بفهمد.
مقیاس فاصله (۴، ۸، ۱۲، ۱۶، ۲۴، ۳۲، ۴۸، ۶۴) یکدستی می‌سازد. بخش بزرگ با حاشیهٔ بیشتر از عنصر داخلی جدا میشود. فضای خالی تزئین نیست — جای نفس کشیدن برای سلسلهمراتب است. صفحات شلوغ اغلب فاصلهٔ کافی ندارند، نه اینکه «محتوا زیاد است».
شبکه و تراز هم تقویت می‌کنند. محتوای یکدست راست‌چین در فارسی قابل اسکن‌تر از وسط‌چین طولانی است. ستون نامتقارن می‌تواند ناحیهٔ مهم را بزرگ‌تر نشان دهد — مثلاً دو سوم برای محتوای اصلی و یک سوم برای نوار کناری.
تصویر، آیکون و سایه: لایه‌های ثانویه
تصویر قهرمان با تضاد و سوژهٔ واضح توجه را می‌گیرد؛ اما اگر عنوان روی تصویر تضاد کافی نداشته باشد، سلسلهمراتب از بین می‌رود. پوشش تیره یا سایهٔ ملایم متن راه‌حل رایج است. تصویر کوچک فهرست نباید با تصویر قهرمان در یک صفحه رقابت کند — اندازه و جای نقش را مشخص می‌کنند.
آیکون‌ها برای اسکن سریع برچسب را همراهی می‌کنند، نه جایگزین آن. آیکون به‌علاوهٔ متن برای ناوبری بهتر از فقط آیکون است، مگر در نوار ابزاری که کاربر آموزش دیده. اندازهٔ آیکون باید با ارتفاع خط متن هم‌تراز باشد تا شلوغی دیداری نسازد.
ارتفاع (سایه، حاشیه، ته رنگ پس‌زمینه) برای کارت و پنجره عمق می‌سازد. عنصر بالاتر مهم‌تر به نظر می‌رسد — مثلاً پنجره روی پس‌زمینه تیره. اما سایه همه‌جا عمق را تخت میکند؛ فقط برای لایهٔ واقعاً بالاتر استفاده کنید.
تمرین عملی: ارزیابی در Figma
یک فریم طراحی‌شده را تار کنید (افزونه یا آزمون چشم نیمهبسته). اگر هنوز بتوانید دعوت به عمل و عنوان را حدس بزنید، سلسلهمراتب قوی است. اگر همه یک تودهٔ خاکستری شد، اندازه، وزن یا رنگ را بازنگری کنید.
آزمون سیاه‌سفید: طراحی را موقتاً بدون رنگ کنید. سلسلهمراتب واقعی باید بدون رنگ هم کار کند. اگر دعوت به عمل بدون رنگ گم شد، روی اندازه و وزن تکیه کنید نه فقط رنگ قرمز.
در نقد کلاس Nova Lab از چک‌لیست استفاده کنید: یک عمل اصلی؟ عنوان واضح؟ محتوای فرعی متمایز؟ فاصلهٔ گروه‌ها درست؟ تضاد متن کافی؟ این عادت در پروژهٔ حرفه‌ای زمان بازبینی را کم و کیفیت را زیاد میکند.
اشتباهات رایج و اصلاح سریع
همه چیز ضخیم و رنگی: محدود کنید به یک دعوت به عمل و یک عنوان غالب. بقیه خنثی. کم کردن اغلب قوی‌تر از اضافه کردن است.
مقیاس تایپ تصادفی: از هشت اندازهٔ مختلف در یک صفحه پرهیز کنید. توکن طراحی و مقیاس ثابت بسازید.
نادیده گرفتن راست‌به‌چپ: در فارسی سلسلهمراتب باید از راست شروع شود — لوگو، ناوبری، محتوای اصلی. آینه کردن چیدمان چپ‌به‌راست بدون فکر، جریان چشم را به هم می‌ریزد.
موبایل آخر: سلسلهمراتب دسکتاپ که در موبایل فشرده میشود اغلب می‌شکند. اول نمای کوچک را درست کنید، بعد بزرگ کنید.
سوالات متداول
سلسلهمراتب دیداری و معماری اطلاعات چه فرقی دارند؟
معماری اطلاعات ساختار محتوا و دستهبندی را تعریف میکند (چه آیتم منو، چه برچسب). سلسلهمراتب دیداری همان ساختار را در لایهٔ دیداری اولویت میدهد. معماری بدون سلسلهمراتب قابل فهم اما تخت است؛ سلسلهمراتب بدون معماری شلوغ اما بیمعنا.
چند سطح در یک صفحه کافی است؟
معمولاً سه تا پنج سطح (اصلی، فرعی، سوم، اطلاعات جانبی، غیرفعال) کافی است. بیش از آن بار ذهنی بالا می‌رود. در موبایل حتی سه سطح اغلب بهینه است.
آیا در حالت تاریک فرق میکند؟
بله. تضاد و روشنایی ادراکشده عوض میشود. توکن جدا برای حالت تاریک تعریف کنید و دوباره آزمون چشم نیمهبسته بگیرید. رنگ اصلی ممکن است در حالت تاریک به اشباع یا روشنایی متفاوت نیاز داشته باشد.
بهترین تمرین برای مبتدی چیست؟
بازطراحی یک صفحهٔ فرود شلوغ با حفظ محتوا و بهبود سلسلهمراتب. مقایسهٔ قبل و بعد در نمونهکار بسیار آموزنده است. دورهٔ رابط Nova Lab تمرین مشابه با نقد دارد.