سلسلهمراتب بصری در طراحی
پنج اهرم کنترل و آزمون چشمبندی برای هر طرحبندی.
طراحی شما سه ثانیه فرصت دارد تا به کاربر بگوید کجا نگاه کند. اگر همه چیز به یک اندازه جلب توجه کند، هیچ چیز خوانده نمیشود، هیچ چیز کلیک نمیشود و کاربر صفحه را ترک میکند. این یک نظر طراحی نیست. این نحوه عملکرد بینایی است.
سلسلهمراتب بصری سیستمی است که آن پنجره سه ثانیهای را کنترل میکند. در ادامه یاد میگیرید چگونه سیستمی بسازید که واقعاً کاربران را هدایت کند.
سلسلهمراتب بصری واقعاً چیست
سلسلهمراتب بصری چیدمان عناصر به گونهای است که چشم آنها را به ترتیب مشخصی پردازش کند. نه به صورت تصادفی، نه همه یکجا، بلکه به ترتیب: اول این، بعد این، سپس این.
مغز یک صفحه را مثل یک کتاب از بالا به پایین نمیخواند. به دنبال سیگنالها میگردد. اندازه، کنتراست، رنگ، فاصله و موقعیت همه به چشم میگویند چه چیزی مهمتر است. یک سلسلهمراتب خوب، مهمترین عنصر را غیرقابل چشمپوشی و کماهمیتترین عنصر را آسان برای نادیده گرفتن میکند.
پنج اهرم کنترل
هر سلسلهمراتب بصری از پنج اهرم ساخته میشود. لازم نیست همه پنج را همزمان استفاده کنید. به ترکیب مناسب برای طرحبندی خاص خود نیاز دارید.
۱. اندازه
عناصر بزرگتر اول دیده میشوند. این واضحترین اهرم و قابل اعتمادترین است. یک تیتر ۴۸ پیکسلی همیشه قبل از یک پاراگراف ۱۴ پیکسلی توجه را جلب میکند. نسبت بین اندازهها سلسلهمراتب را ایجاد میکند، نه اعداد مطلق.
اشتباه رایج: بزرگ کردن همه چیز. وقتی تیتر، زیرتیتر، متن و دکمه فراخوان همه بزرگ باشند، سلسلهمراتب مسطح میشود و هیچ چیز هدایت نمیکند.
۲. کنتراست
کنتراست بالا چشم را جذب میکند. یک عنصر تیره روی صفحه روشن، یک دکمه درخشان روی پسزمینه ملایم، یک نشان رنگی روی طرح خاکستری. کنتراست سریعترین راه برای برجسته کردن یک عنصر بدون تغییر اندازه آن است.
این در جهت معکوس هم کار میکند. کنتراست پایین عناصر را به عقب میراند. متادیتا، برچسبهای زمانی و عناوین ثانویه باید کنتراست پایین داشته باشند تا با محتوای اصلی رقابت نکنند.
۳. رنگ
رنگ وزن احساسی ایجاد میکند. یک نشان قرمز در میان خاکستری همیشه توجه را جلب میکند، نه به خاطر خاص بودن قرمز، بلکه به خاطر اینکه تنها عنصر با انرژی رنگی در آن زمینه است. پالت رنگ زمانی به سلسلهمراتب خدمت میکند که هر رنگ نقش مشخصی داشته باشد.
۴. فاصلهگذاری
فضای سفید، فضای خالی نیست. یک سیگنال است. عنصری که فضای سخاوتمندانهای اطرافش باشد مهم خوانده میشود چون فضا آن را جدا و متمایز میکند. عناصر چسبیده به هم ثانویه خوانده میشوند چون هیچ چیز متمایز نیست.
رایجترین شکست سلسلهمراتب در طراحی وب، فاصله ناکافی بین بخشهاست. وقتی هر بخش به بعدی میریزد، چشم نمیتواند تشخیص دهد یک ایده کجا تمام و دیگری کجا شروع میشود.
۵. موقعیت
چشم به طور طبیعی در زبانهای چپ به راست از بالا-چپ شروع میکند و الگوهای قابل پیشبینی را دنبال میکند. قرار دادن مهمترین عنصر در موقعیت شروع طبیعی، قبل از اعمال هر اهرم دیگری به آن مزیت میدهد.
موقعیت به تنهایی ضعیف است. یک عنصر کوچک با کنتراست پایین در بالا-چپ باز هم به یک عنصر بزرگ با کنتراست بالا در مرکز میبازد. موقعیت وقتی بهتر کار میکند که چهار کنترل دیگر را تقویت کند.
آزمون چشمبندی
سریعترین راه برای بررسی عملکرد سلسلهمراتب اینجاست. به طراحی خود آنقدر چشمبندی کنید تا همه چیز محو شود. عناصری که همچنان قابل مشاهدهاند، همانهایی هستند که سلسلهمراتب شما اولویتبندی میکند.
اگر اولین چیزی که هنگام چشمبندی میبینید دکمه فراخوان، تیتر یا تصویر اصلی است، سلسلهمراتب شما کار میکند. اگر اولین چیز یک نوار کناری تزیینی یا منوی ناوبری است، کار نمیکند.
شکستهای رایج سلسلهمراتب
همه چیز بولد است. اگر هر پاراگراف با متن بولد شروع شود، هیچ چیز تأکید نمیشود. بولد وقتی کار میکند که نادر باشد.
نقاط کانونی زیاد. صفحهای با سه عنصر هماندازه و همرنگ سلسلهمراتب ندارد. سه رقیب دارد. برای هر نمای صفحه یک برنده انتخاب کنید.
نادیده گرفتن موبایل. سلسلهمراتبی که برای صفحه ۱۴۴۰ پیکسلی طراحی شده، اغلب روی گوشی ۳۷۵ پیکسلی فرو میریزد. پنج کنترل باید برای هر نقطه شکست مجدداً ارزیابی شوند.
رنگ بدون کنتراست. دکمه رنگی روی پسزمینه رنگی ناپدید میشود. سلسلهمراتب فقط وقتی کار میکند که نسبت کنتراست بین عنصر کانونی و اطرافش به اندازه کافی بالا باشد.
ساختن سلسلهمراتب در عمل
یک چارچوب عملی برای هر طرحبندی صفحه:
- یک چیز را تعیین کنید. مهمترین اقدام یا پیام در این صفحه چیست؟ آن عنصر بیشترین اندازه، بیشترین کنتراست و بهترین موقعیت را میگیرد.
- بقیه را رتبهبندی کنید. فهرست شمارهگذاری شدهای از هر عنصر صفحه به ترتیب اهمیت بسازید.
- حداقل دو کنترل برای هر سطح اعمال کنید. سطح اول: اندازه بزرگ + کنتراست بالا. سطح دوم: اندازه متوسط + رنگ. سطح سوم: اندازه کوچک + کنتراست پایین.
- حذف کنید تا خراب شود. عناصر را حذف کنید تا سلسلهمراتب آسیب ببیند. آخرین عنصری که قبل از خرابی حذف کردید، احتمالاً غیرضروری بود.
سؤالات متداول
سلسلهمراتب بصری در طراحی چیست؟
سلسلهمراتب بصری چیدمان عناصر طراحی به ترتیب اهمیت است. از اندازه، کنتراست، رنگ، فاصلهگذاری و موقعیت برای کنترل ترتیب پردازش اطلاعات توسط چشم استفاده میکند.
چرا سلسلهمراتب بصری مهم است؟
چون کاربران نمیخوانند، اسکن میکنند. بدون سلسلهمراتب مشخص، هر عنصر به طور مساوی برای جلب توجه رقابت میکند، کاربر غرق میشود و صفحه را ترک میکند.
چگونه سلسلهمراتب بصری را آزمایش کنم؟
آزمون چشمبندی سریعترین روش است. طراحی را محو کنید و ببینید کدام عناصر قابل مشاهده باقی میمانند. اگر عناصر نادرست غالب هستند، اندازه، کنتراست یا فاصلهگذاری را تنظیم کنید.
Need layouts that guide the eye? Brainy builds interfaces with hierarchy baked in.
Get Started
