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