تا به حال شده روی یک وب سایت کلیک کنید، یک نگاهی بیندازید و بگویید: “هوم، این یک نه خواهد بود” و دنبال دکمه خروج بگردید؟ برای من، این معمولا به سه دلیل است: سایت قدیمی به نظر می رسد، شلوغ است، یا پیمایش آن سخت است.
به همین دلیل است که سلسله مراتب بصری در طراحی وب بسیار مهم است، زیرا یک وب سایت بد می تواند بازدیدکنندگان را از جلب توجه به برند شما باز دارد.
در اینجا یک راهنمای آسان برای درک اصول کلیدی طراحی سلسله مراتب بصری برای جذب مخاطب، درگیر نگه داشتن آنها و ایجاد تبدیل وجود دارد.
فهرست مطالب
سلسله مراتب بصری بر آنچه که در یک طراحی به آن نگاه می کنید و روی آن تمرکز می کنید تأثیر می گذارد، خواه این یک تصویر، طراحی گرافیکی یا طراحی وب باشد. این یک بازیکن کلیدی در معماری اطلاعات است (یعنی نحوه سازماندهی و نمایش اطلاعات برای درک آسان و ناوبری) و می تواند تأثیر زیادی بر تجربه کاربر (UX) بگذارد.
وقتی به سلسله مراتب بصری فکر می کنید، می خواهید چند سوال از خود بپرسید:
- می خواهیم توجه را به چه چیزی جلب کنیم؟
- ما از کاربران خود می خواهیم چه اقداماتی انجام دهند؟
- چشم به طور طبیعی به کجا می رود و کجا فرود می آید؟
پرسیدن این سوالات به شما کمک می کند تا از اصول ذکر شده در زیر برای ایجاد یک سلسله مراتب بصری واضح استفاده کنید.
سلسله مراتب بصری بد چیست؟
وقتی صحبت از سلسله مراتب بصری می شود، یک قانون طلایی وجود دارد: اگر هر عنصر مهم به نظر برسد، هیچ چیز مهم به نظر نمی رسد.
سلسله مراتب بصری به عنوان راهی برای رتبه بندی اطلاعاتی که مصرف می کنید عمل می کند. اگر راهی برای تمایز بین عناصر وجود نداشته باشد، سلسله مراتب ضعیف در نظر گرفته می شود.
این مثال را در نظر بگیرید:
در سمت چپ چیزهای زیادی در جریان است. دو عنصر اصلی اندازه یکسانی دارند و چندین رنگ باعث می‌شود که نتوانید به کجا نگاه کنید.
در سمت راست، چشم شما به طور خودکار به سمت کادر آبی اصلی در سمت چپ کشیده می‌شود، سپس به طور طبیعی قبل از فرود بر روی نارنجی دعوت به اقدام (CTA) به عناصر سمت راست می‌رود.
سلسله مراتب بصری ضعیف:
- کاربر را گیج می کند.
- مشخص نمی کند کجا باید نگاه کرد.
- طراحی ملایمی ایجاد می کند.
در عوض، یک ساختار بصری ایجاد کنید که درک را تسهیل می کند و کاربر را راهنمایی می کند. سلسله مراتب بصری مناسب در یک وب سایت به شخص کمک می کند تا بفهمد یک صفحه در مورد چیست. در زیر به اصول سلسله مراتب بصری در طراحی وب خواهیم پرداخت.
7 اصل طراحی وب برای سلسله مراتب بصری
- از تراز و ترکیب برای ایجاد نقاط کانونی استفاده کنید.
- الگوهای خواندن را در نظر بگیرید.
- کاربران به راحتی متوجه عناصر بزرگتر می شوند.
- رنگ و کنتراست چشم را جلب می کند.
- فضای سفید باعث ایجاد تاکید می شود.
- نزدیکی و تکرار وحدت ایجاد می کند.
1. از تراز و ترکیب برای ایجاد نقاط کانونی استفاده کنید.
تراز و ترکیب به شما کمک می کند تا عناصر سایت خود را ساختار دهید و نقاط کانونی را برای بینندگان ایجاد کنید. دو قانون رایج ترکیب عبارتند از قانون یک سوم و قانون شانس.
با قانون یک سوم، صفحه شما با دو خط افقی و عمودی تقسیم می شود و شبکه ای از 9 مربع هم اندازه ایجاد می کند. نقاطی که خطوط تلاقی می کنند، نقاط کانونی هستند که عناصر مهم طراحی خود را در آنجا قرار می دهید.
قاعده شانس می گوید که تعداد فرد از عناصر باعث ایجاد علاقه و درگیری بیشتر بینندگان می شود زیرا هر عنصر را می توان به صورت جداگانه ارزیابی کرد نه در تعداد زوج گروه ها.
2. الگوهای خواندن را در نظر بگیرید.
خواندن از بالا به پایین یک استاندارد جهانی است، اما تنوع فرهنگی در نحوه خواندن افقی افراد وجود دارد. استاندارد “غربی” برای زبان هایی مانند انگلیسی و اسپانیایی خواندن از چپ به راست است، در حالی که زبان های سامی و هندوآریایی مانند عربی، عبری و اردو از راست به چپ می خوانند.
این تنوع دو سبک مختلف خواندن/اسکن را به ارمغان می آورد: الگوهای F و Z.
- الگوی Z بینندگان از سمت چپ بالای صفحه شروع می‌شوند و به سمت راست بالا، سپس پایین و عقب به سمت چپ پایین و سپس به سمت راست پایین حرکت می‌کنند.
- الگوی F بینندگان از بالا سمت چپ شروع می‌شوند و مانند بینندگان الگوی Z به سمت راست بالا حرکت می‌کنند، اما از سمت چپ صفحه به عنوان راهنما استفاده می‌کنند و به سرعت به سمت راست در یک حرکت کوتاه‌تر اسکن می‌کنند (خط کوتاه‌تر F)، سپس به عقب برمی‌گردند. به سمت چپ و پایین صفحه.
می‌توانید الگوهای سنتی خواندن را دنبال کنید و صفحاتی را طراحی کنید که با پردازش طبیعی فرد مطابقت دارند یا الگوی سنتی را مختل کنید و عنصر اصلی تمرکز را برای استفاده برای پیمایش فراهم کنید. به خاطر سپردن این موضوع به شما کمک می کند تا پروژه هایی را طراحی کنید که تبدیل شوند، به خصوص صفحات فرود.
3. کاربران به راحتی متوجه عناصر بزرگتر می شوند.
اندازه در سلسله مراتب بصری ضروری است زیرا عناصر بزرگتر بیشترین توجه را به خود جلب می کنند و مهمتر تلقی می شوند.
این مثال را از نتفلیکس بگیرید.
منبع تصویر
اولین چیزی که با دیدن این تصویر می خوانید این است:نامحدود فیلم، نمایش تلویزیونی، و بیشتر.سپس قبل از اینکه سایر عناصر صفحه را بررسی کنید، خط بعدی را می خوانید، و سپس خط بعدی را می خوانید.
«فیلم‌های نامحدود، نمایش‌های تلویزیونی و موارد دیگر» به‌عنوان ضروری‌ترین بخش پیام نمایش داده می‌شود که منطقی است، زیرا این نقطه فروش اصلی نتفلیکس است.
همانطور که صفحه وب خود را طراحی می کنید، در نظر بگیرید که می خواهید مخاطبان شما در ابتدا به چه چیزی نگاه کنند و از آن برای هدایت استراتژی خود استفاده کنید.
4. رنگ و کنتراست چشم را جلب می کند.
مردم به سمت رنگ هایی کشیده می شوند که احساسات را برمی انگیزند و مفاهیم فرهنگی و اجتماعی دارند. فقط به آرم ها بر اساس صنعت نگاه کنید، متوجه خواهید شد که مارک های مواد غذایی به سمت رنگ های زرد جذب می شوند و موسسات مالی تمایل به آبی دارند.
در طراحی، رنگ برای جلب توجه به عناصر خاص عالی است. و رنگ های متضاد برای نشان دادن تفاوت بین عناصر صفحه شما یا جلب توجه به یکی بر دیگری عالی هستند. به عنوان مثال، استفاده از رنگ سبز نئون و سپس رنگ سفید مایل به زرد، توجه را به عناصر سبز نئون جلب می کند.
در تصویر زیر، دو نوار نارنجی در نمودار از نوارهای خاکستری متمایز هستند که نشان می دهد نارنجی یک نقطه کانونی و خاکستری ثانویه است.
در یک وب سایت، می توانید از رنگ ها برای جلب تمرکز روی CTA خود استفاده کنید. در تصویر زیر، گزینه طرح برجسته به رنگ بنفش پوشیده شده است، در حالی که بقیه سفید هستند. این برند احتمالاً از کاربران می خواهد که آن طرح را انتخاب کنند، بنابراین افزودن رنگ به آن توجه و علاقه آنها را جلب می کند.
منبع تصویر
در مثال بالا، CTA که بیشتر خودنمایی می کند در وسط قرار دارد. این برند احتمالاً از کاربران می خواهد که این گزینه را انتخاب کنند. سایر CTA ها هنوز قابل مشاهده هستند اما در مقایسه با نارنجی خاموش هستند.
برای ایجاد بیشترین تاثیر بصری با رنگ، کمتر اغلب بیشتر است.
4. فضای سفید باعث ایجاد تاکید می شود.
فضای سفید به فضای خالی در یک طرح اشاره دارد.
منبع تصویر
فضای سفید در طراحی وب شما کلید جلب توجه و حفظ تعادل است.
کمتر، بیشتر، پر کردن فضا با عناصر زیاد ممکن است اگر بینندگان نتوانند بفهمند به چه چیزی نگاه می کنند، می تواند باعث سردرگمی و منصرف شود.
اپل همچنین به دلیل استفاده از فضای سفید معروف است.
منبع تصویر
این برند یک رابط کاربری ساده با تاکید بر عناصر موجود در صفحه ارائه می دهد. استفاده اپل از فضای سفید نیز نشان دهنده هویت یک برند است.
6. مجاورت و تکرار وحدت ایجاد می کند.
کنار هم قرار دادن عناصر به کاربران می گوید که عناصر مرتبط هستند.
به عنوان مثال، وب سایت آشپزی نیویورک تایمز را در نظر بگیرید. هدر “Master The Basics” آن دارای چهار جعبه دستور العمل نزدیک به گروه است، که به بینندگان اجازه می دهد بدانند که احتمالاً سطح اهمیتی دارند.
منبع تصویر
اگر مطمئن نیستید که چگونه عناصر خاصی را گروه بندی کنید، می توانید از استراتژی های تحقیق UX، مانند مرتب سازی کارت، برای گروه بندی عناصر بر اساس انتظارات مخاطبان خود استفاده کنید.
7. سلسله مراتب فونت به شما در سازماندهی متن کمک می کند.
فونت ها یک عنصر بصری مهم به وب سایت شما اضافه می کنند و به شما کمک می کنند تا متن را سازماندهی و طبقه بندی کنید (گاهی اوقات بر اساس سطح اهمیت).
سلسله مراتب فونت سه بخش دارد:
- اولیه: متن اصلی شما بزرگ‌ترین متن در صفحه است، توجه اولیه را به خود جلب می‌کند و حاوی مهم‌ترین کلمات کلیدی برای فراخوانی افراد است.
- ثانوی: فونت ثانویه عناوین فرعی یا توضیحات ثانویه شما هستند. به اندازه متن اصلی برجسته نیست، اما همچنان ارزش می‌بخشد و به نگاه آنها در صفحه شما کمک می‌کند.
- دوره سوم: متن سوم کوچکترین متن در صفحه شما است، اما همچنان قابل خواندن است. می تواند جزئیات بیشتری در مورد صفحه شما ارائه دهد و کوتاه (مانند شرح) یا طولانی (مانند یک پاراگراف یا توضیحات کامل) باشد.
در زیر به چند نمونه سلسله مراتب بصری می پردازیم تا شما از آنها به عنوان الهام استفاده کنید.
نمونه هایی از سلسله مراتب بصری خوب
1. Visme.co
Visme به افراد امکان دسترسی به قالب ها و گرافیک های مورد نیاز برای ایجاد محتوا را می دهد.
منبع تصویر
آنچه ما دوست داریم:
CTA چشمگیر Visme از اصول سلسله مراتب فونت پیروی می کند تا کاربران را تشویق به ثبت نام در خبرنامه خود کند. بزرگ ترین کلمات تاثیرگذارترین کلماتی هستند که باید بدانید، و متن ثانویه و ثالث اطلاعات بیشتری را با حرکت خوانندگان به پایین صفحه ارائه می دهد.
2. 8AD Studio
8AD Studio یک آژانس تولیدی با خدمات کامل است که در برندسازی تخصص دارد.
منبع تصویر
آنچه ما دوست داریم:
با استفاده از فضای سفید، 8AD Studio به طور ماهرانه توجه را به سه عنصر اصلی جلب می کند: لوگوی منحصر به فرد و دو CTA. این سه عنصر ضروری را با بینندگان سایت به اشتراک می گذارد و به مردم امکان می دهد بدانند در کار خود خوب است – ایجاد برندی که توجه را جلب می کند و باعث شناسایی می شود.
3. عمدتا سیاه
Predominantly Black یک شرکت دست ساز تولید عطرهای خانگی و بدن است. 
منبع تصویر
آنچه ما دوست داریم:
عمدتاً مشکی یک مثال عالی از چگونگی ایجاد سلسله مراتب بصری توسط نزدیکی ارائه می دهد. با سازماندهی محصولات تحت عنوان اصلی و گذاشتن فضای کمی در این بین، بازدیدکنندگان به سرعت متوجه می شوند که این محصولات در یک دسته قرار می گیرند.
به سوی تو
سلسله مراتب بصری همه چیز در مورد رتبه بندی عناصر شما بر اساس ترتیب اهمیت است. هنگامی که آنچه را که می خواهید روی آن تمرکز کنید محدود کردید و نیازهای مخاطبان خود را در نظر گرفتید، می توانید طرح هایی ایجاد کنید که تأثیر دلخواه را ایجاد کند.
