وقتی عنوان، تصویر و چند دکمه با شدت یکسان دیده می‌شوند، خواننده باید خودش حدس بزند از کجا شروع کند. ترکیب‌بندی بصری به جای هر عنصر و رابطه آن با بقیه مربوط است. پیش از انتخاب یک قاعده هندسی، باید بدانیم پیام اصلی قاب چیست و چه چیزی برای فهم آن لازم است. یک چیدمان مرتب هم ممکن است اولویت اشتباه را نشان دهد.
Composition در پوستر، عکس، صفحه مجله و رابط وب کاربرد دارد، اما رفتار مخاطب در این محیط‌ها یکسان نیست. پوستر ممکن است از فاصله دیده شود، در حالی که صفحه وب چند عرض و چند حالت تعاملی دارد. قواعدی مثل یک‌سوم، تقارن و هم‌ترازی را به‌عنوان ابزار آزمایش به کار ببرید. هیچ‌کدام تضمین نمی‌کنند که هر محتوا در هر قاب درست خوانده شود.
یک پیام اصلی برای هر قاب
در یک پوستر فرضی رویداد، نام رویداد، زمان، مکان و راه ثبت‌نام را داریم. ابتدا مشخص کنید مخاطب باید چه چیزی را زودتر بفهمد. اگر هدف معرفی رویداد است، نام و موضوع آن نقش اصلی دارند. بزرگ کردن لوگوی برگزارکننده ممکن است این پیام را عقب ببرد. اندازه عناصر را بر اساس نیاز ارتباطی انتخاب کنید و برای هر چیز مهم، تأکید یکسان نسازید.
همین تمرین را برای یک بخش صفحه وب انجام دهید. پیام اصلی را در یک جمله بنویسید و عناصر ضروری برای فهم آن را زیرش بیاورید. اگر سه پیام مستقل دارید، شاید لازم باشد قاب را به بخش‌های روشن‌تر تقسیم کنید. پیش از کوچک کردن فونت برای جا دادن همه چیز، درباره حذف تکرار یا انتقال اطلاعات همراه تصمیم بگیرید.
برای بررسی اولیه، شکل‌ها را بدون جزئیات و با رنگ ساده بچینید. عنوان به یک بلوک، تصویر به یک مستطیل و متن به چند خط تبدیل شود. این تمرین ظاهر نهایی را تعیین نمی‌کند؛ فقط نشان می‌دهد کدام عنصر وزن بیشتری گرفته است. اگر در همین مرحله همه بلوک‌ها رقابت می‌کنند، اضافه کردن فونت و رنگ تازه احتمالاً رابطه را مبهم‌تر می‌کند.
سلسله‌مراتب با اندازه و جایگاه
اندازه بزرگ‌تر یکی از ابزارهای تأکید است، اما تنها ابزار نیست. جای عنصر، فضای اطراف، تضاد با زمینه و وزن نوشته هم بر دیده شدن اثر دارند. در یک کارت کوچک، شاید عنوان با اندازه متوسط و فاصله مناسب از توضیح جدا شود. لازم نیست برای مهم کردن آن، کل کارت را با نوشته بسیار درشت پر کنیم و اطلاعات همراه را به گوشه‌ای فشرده ببریم.
عنوان بلند را از ابتدا آزمایش کنید. اگر سلسله‌مراتب فقط با یک عنوان تک‌خطی کار می‌کند، ورود محتوای تازه آن را تغییر می‌دهد. دو نسخه با عنوان کوتاه و بلند بسازید و ببینید آیا هنوز موضوع اصلی مشخص است. یک تصویر پرجزئیات هم ممکن است توجهی بیشتر از تصویری آرام بگیرد؛ وزن بصری را با عکس واقعی بسنجید.
در استفاده از رنگ، نقش هر تأکید را روشن کنید. وقتی عنوان، قیمت، برچسب و دکمه همگی رنگ برجسته دارند، رنگ دیگر اولویت را توضیح نمی‌دهد. برای بررسی معنای رنگ در زمینه و حفظ خوانایی پیام، مقاله رنگ در طراحی وب ادامه مرتبطی است. تصمیم درباره رنگ را کنار اندازه و فاصله ببینید.
هم‌ترازی و نزدیکی، رابطه می‌سازند
چند خط شروع مشترک کمک می‌کنند بخش‌های مرتبط یک ساختار قابل دنبال کردن داشته باشند. در یک صفحه فارسی، می‌توان عنوان و متن همراه را با لبه راست مشترک تنظیم کرد. اگر هر بخش از نقطه تازه‌ای شروع شود، خواننده باید رابطه‌ها را از روی متن پیدا کند. لازم نیست همه عناصر عرض یکسان داشته باشند؛ مهم این است که خط‌ها و فاصله‌ها انتخاب مشخصی داشته باشند.
نزدیکی هم رابطه را نشان می‌دهد. توضیح تصویر باید نزدیک همان تصویر دیده شود و برچسب یک ورودی به ورودی خودش مربوط بماند. برای جدا کردن دو گروه، ممکن است افزایش فاصله کافی باشد. مقاله فضای خالی و گروه‌بندی این کاربرد را با مثال توضیح می‌دهد. اگر رابطه هنوز مبهم است، مرز یا عنوان گروه را هم بررسی کنید.
یک شبکه راهنما در فایل طراحی تعریف کنید و چند عنصر را روی خط‌های آن قرار دهید. سپس راهنما را خاموش کنید و خروجی را ببینید. شبکه باید به رابطه عناصر کمک کرده باشد، نه اینکه فقط در نمای خطوط زیبا باشد. برای انتخاب ستون‌ها و رفتار آن‌ها، گرید در طراحی و نظم بصری را بخوانید.
تقارن و تعادل نامتقارن
در ترکیب متقارن، دو سوی یک محور با ساختار مشابه چیده می‌شوند. این روش ممکن است برای یک معرفی مرکزی یا قاب رسمی مناسب باشد. با این حال، محتوای دو سمت همیشه یکسان نیست. اگر متن یک سمت بلندتر است، حفظ تقارن هندسی نباید به حذف اطلاعات ضروری یا فاصله‌های بی‌دلیل منجر شود. نتیجه را با محتوای واقعی ببینید.
در تعادل نامتقارن، عناصر دو طرف مشابه نیستند، ولی می‌توانند از نظر وزن بصری رابطه‌ای قابل قبول داشته باشند. یک شکل بزرگ ممکن است کنار چند عنصر کوچک قرار بگیرد. فاصله از مرکز، رنگ و جزئیات هم در این برداشت نقش دارند. تصویر زیر یک نمونه مفهومی است و فرمول عددی برای محاسبه تعادل همه طرح‌ها ارائه نمی‌کند.
برای مقایسه، دو نسخه از یک قاب بسازید: یکی با محور مرکزی و دیگری با تمرکز در یک سمت. پیام، اندازه متن و محتوای اصلی را ثابت نگه دارید تا تفاوت چیدمان قابل بررسی باشد. درباره حس کلی با واژه مبهم «بهتر» تصمیم نگیرید؛ مشخص کنید در کدام نسخه عنوان راحت‌تر خوانده می‌شود یا رابطه تصویر و توضیح روشن‌تر است.
قاعده یک‌سوم و خطوط راهنما
در قاعده یک‌سوم، قاب را با دو خط عمودی و دو خط افقی به نه قسمت تقسیم می‌کنیم. می‌توان جای سوژه را نزدیک خط‌ها یا تقاطع‌ها امتحان کرد. این تمرین برای ساختن گزینه تازه مفید است، اما قرار دادن سوژه روی تقاطع به‌تنهایی دلیل موفقیت ترکیب نیست. جهت نگاه، فضای اطراف و هدف تصویر را هم باید در نظر گرفت.
اگر سوژه به یک سمت نگاه می‌کند، فضای آن سمت را در چند برش مختلف بررسی کنید. در یک عکس برای عنوان مقاله، ممکن است به ناحیه آرامی برای نوشته نیاز داشته باشیم. اگر عکس را فقط برای رعایت یک‌سوم برش بزنیم و جای عنوان از بین برود، قاعده به نیاز واقعی پاسخ نداده است. نسخه بدون نوشته و نسخه همراه عنوان را کنار هم ببینید.
خط‌های موجود در عکس یا طرح می‌توانند به جهت توجه کمک کنند، اما باید مقصد آن‌ها روشن باشد. یک خط مورب که از قاب بیرون می‌رود شاید توجه را از پیام اصلی دور کند. با حذف یا تغییر همان خط، تفاوت را بررسی کنید. جهت فرضی حرکت چشم را به‌عنوان نتیجه اندازه‌گیری‌شده مخاطبان معرفی نکنید؛ برای آن ادعا به مشاهده و آزمون واقعی نیاز داریم.
ترکیب‌بندی صفحه فارسی در عرض باریک
در وب، قاب با تغییر عرض عوض می‌شود. تصویری که کنار متن بوده ممکن است بالای آن بیاید و عنوان دوخطی به چهار خط تبدیل شود. نسخه باریک را دوباره ترکیب کنید و اولویت اطلاعات را نگه دارید. کوچک کردن همه عناصر نسخه عریض معمولاً برای متن خواندنی کافی نیست. فاصله، برش تصویر و جای اطلاعات همراه را جدا بررسی کنید.
ترتیب ظاهری را با ترتیب منطقی محتوا هماهنگ نگه دارید. یک چیدمان جذاب نباید مسیر صفحه‌کلید را بین بالا و پایین صفحه جابه‌جا کند. راهنمای دسترس‌پذیری شبکه در MDN توضیح می‌دهد که جابه‌جایی با CSS ترتیب منبع را تغییر نمی‌دهد. برای اجرای چیدمان، نمونه‌های عملی CSS Grid را هم ببینید.
تمرین و مرور قابل اجرا
یک قاب با عنوان، تصویر و یک اقدام بسازید. سپس با حفظ محتوا، فقط اندازه عنوان را تغییر دهید و نتیجه را مقایسه کنید. در دور بعد، فقط فاصله گروه‌ها را تغییر دهید. این روش کمک می‌کند علت تغییر را بفهمید. عوض کردن هم‌زمان فونت، رنگ، تصویر و جای عناصر باعث می‌شود ندانید کدام تصمیم مشکل را حل کرده است.
در مرور با تیم، از افراد بخواهید پیام اصلی و اطلاعات همراه را مشخص کنند. پاسخ‌های متفاوت را یادداشت کنید و روی بخش مبهم کار کنید. این مشاهده کوچک جای آزمون کاربری کامل را نمی‌گیرد، ولی برای یافتن رقابت ناخواسته عناصر مفید است. اصلاح را دقیق ثبت کنید: مثلاً کاهش وزن عنوان فرعی، نزدیک کردن توضیح به تصویر یا تغییر برش عکس در موبایل.
فایل تحویل باید دلیل چند تصمیم اصلی را داشته باشد. بنویسید کدام عنصر نقش اصلی دارد، چه خط‌هایی مشترک‌اند و در عرض باریک چه چیزی جابه‌جا می‌شود. برای عنوان بلند و تصویر متفاوت هم نمونه بگذارید. وقتی قواعد با محتوا توضیح داده شوند، طراح بعدی می‌تواند قاب تازه‌ای بسازد که به همان هدف ارتباطی پاسخ دهد.
هنوز دیدگاهی ثبت نشده
اولین نفری باشید که نظر می‌دهد!