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