سلسله مراتب، یک اصل مهم در لی‌اوت

سواد بصری کافی ندارد.

این یک جمله تکراری است که همه ما حداقل یکبار از آن برای آرام کردن خودمان استفاده کردیم، وقتی فکر می‌کنیم طرح بسیار جذابی دیزاین کردیم اما به ناگهان کارفرما در نیم نگاهی همه چیز را بهم می‌زند.

باید کلاه خودمان را قاضی کنیم، همه چیز به سواد بصری کارفرما برنمی‌گردد. من به تجربه متوجه شده‌ام که اکثر کارفرمایان انتقال درست پیام را بر جنبه‌های زیباشناختی ارجح می‌دانند.

نحوه استفاده از المانهای طراحی و اولویت بندی آن ها نقش موثری در انتقال درست پیام دارند. در واقع سلسه مراتب یا Hierarchy یک اصل مهم در طراحی لی‌اوت است.

رسانه‌ها برای عرضه‌ی محتوا و اطلاعات به کاربر طراحی می‌شوند. در هر رسانه‌ای محتوایی وجود دارد که مخاطب باید آن‌ها را در‌یک‌ نگاه و خیلی سریع پیدا کند. اساسا مخاطب نباید دنبال چیزی در طرح ما بگردد و این وظیفه‌ی طراح است که مطمئن شود طرح‌بندی هر صفحه‌ (Page Layout) به‌گونه‌ای است که مخاطب را به مهم‌ترین و کاربردی‌ترین اطلاعات هدایت می‌کند. برای رسیدن به آن هدف باید با مفهومی به‌ نام سلسله ‌مراتب بصری (Visual Hierarchy) آشنا شویم.

تعریف Visual Hierarchy

حقیقت این است که چشم (ذهن) مخاطب با الگوهای آشنا و قابل ‌پیش‌بینی مانوس‌تر است و تمایل دارد از آن الگو‌ها پیروی کند. در واقع، ذهن انسان به بازشناسی تمایل دارد. یعنی ما به‌طورطبیعی نمی‌خواهیم خیلی تلاش کنیم برای خواندن و فهمیدن چیزی، ترجیح ما این است که مفاهیم را دریک‌ نگاه تشخیص دهیم. 

سلسله مراتب بصری عبارت است از چیدمان درست محتوا (متن، تصویر و …) در یک ترکیب تا مخاطب دریک‌ نگاه، بدون فکر کردن، همه‌ی اطلاعات را به ‌ترتیب اهمیت آن‌ها دریابد. سلسله مراتب بصری مخاطب را ابتدا به مهم ترین اطلاعات و سپس به محتوای ثانویه هدایت می کند.

چگونه سلسله مراتب را ایجاد کنیم.

در طراحی، سلسله مراتب می تواند خود را به روش های بصری زیادی نشان دهد. از طریق چیدمان دقیق عناصر بصری است که سلسله مراتب واضحی ایجاد می‌شود. سلسله مراتب را می‌توان با روش های بصری زیادی مانند مقیاس، رنگ، کنتراست، فضا، تراز، شکل و فرم ایجاد کرد.

سلسله مراتب با مقیاس

در تصویر پایین هشت خط داریم که از بالا به پایین از ضخیم به نازک زیر هم قرار گرفته‌اند. سلسله مراتب مقیاس در این هشت مرحله، جهت سلسله مراتب را نشان می دهد. جریان اهمیت در اینجا از بالا شروع می شود و از ضخیم به نازک پایین می رود.

سلسله مراتب با رنگ

این تصویر مثال قبلی را به چالش می‌کشد. در اینجا دقیقاً همان ترکیب را داریم اما این بار رنگ تغییر کرده است. در این مثال، نازک ترین خط تیره ترین رنگ و ضخیم ترین خط روشن ترین رنگ است. حتی اگر خط‌ّا در بالا ضخیم تر هستند، خط نازک قوی‌تر تلقی می‌شود، زیرا آشکارتر است. در واقع در این مثال با تغییر رنگ ها، ساختار سلسله مراتبی را تغییر داده‌ایم.

سلسله مراتب با فضا

اگر عمق این اشکال را از طریق همپوشانی تغییر دهیم، یک سلسله مراتب جدید ایجاد می‌کنیم. اشکالی که در بالا قرار دارند به ما نزدیک‌تر به نظر می‌رسند و آن‌هایی هستند که ما واضح‌تر می‌بینیم. سلسله مراتب در اینجا اکنون با فضا تعریف می شود.

سلسله مراتب با پرسپکتیو

در مثال پایین ما شکل هایی را که به ما نزدیک تر هستند را کاملا درک می کنیم. البته در طراحی، بسته به سادگی یا پیچیدگی پیام مورد نظر، سلسله مراتب در طراحی می تواند به اشکال مختلف وجود داشته باشد و همزمان با یکدیگر در رقابت باشند.