7 اصل سلسله مراتب بصری برای هر بازاریاب

آنچه ما دوست داریم:

تا به حال شده روی یک وب سایت کلیک کنید، یک نگاهی بیندازید و بگویید: “هوم، این یک نه خواهد بود” و دنبال دکمه خروج بگردید؟ برای من، این معمولا به سه دلیل است: سایت قدیمی به نظر می رسد، شلوغ است، یا پیمایش آن سخت است.

سلسله مراتب بصری در طراحی وب

الگوهای خواندن سلسله مراتبی بصری

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

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

سلسله مراتب بصری در طراحی وب

1. از تراز و ترکیب برای ایجاد نقاط کانونی استفاده کنید.

در زیر به چند نمونه سلسله مراتب بصری می پردازیم تا شما از آنها به عنوان الهام استفاده کنید.

نمونه هایی از سلسله مراتب بصری خوب

1. Visme.co

با استفاده از فضای سفید، 8AD Studio به طور ماهرانه توجه را به سه عنصر اصلی جلب می کند: لوگوی منحصر به فرد و دو CTA. این سه عنصر ضروری را با بینندگان سایت به اشتراک می گذارد و به مردم امکان می دهد بدانند در کار خود خوب است – ایجاد برندی که توجه را جلب می کند و باعث شناسایی می شود.

3. عمدتا سیاه

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

6. مجاورت و تکرار وحدت ایجاد می کند.

تراز و ترکیب به شما کمک می کند تا عناصر سایت خود را ساختار دهید و نقاط کانونی را برای بینندگان ایجاد کنید. دو قانون رایج ترکیب عبارتند از قانون یک سوم و قانون شانس.

Studio 8AD نمونه ای از سلسله مراتب بصری خوب

نمونه رنگ سلسله مراتب بصری

Predominantly Black یک شرکت دست ساز تولید عطرهای خانگی و بدن است. نمونه predominantlyBlack.com از سلسله مراتب بصری خوب

در تصویر زیر، دو نوار نارنجی در نمودار از نوارهای خاکستری متمایز هستند که نشان می دهد نارنجی یک نقطه کانونی و خاکستری ثانویه است.

قاعده شانس می گوید که تعداد فرد از عناصر باعث ایجاد علاقه و درگیری بیشتر بینندگان می شود زیرا هر عنصر را می توان به صورت جداگانه ارزیابی کرد نه در تعداد زوج گروه ها.

2. الگوهای خواندن را در نظر بگیرید.

فضای سفید در طراحی وب شما کلید جلب توجه و حفظ تعادل است.

سلسله مراتب بصری ضعیف:

  • کاربر را گیج می کند.
  • مشخص نمی کند کجا باید نگاه کرد.
  • طراحی ملایمی ایجاد می کند.

آنچه ما دوست داریم:

در سمت چپ چیزهای زیادی در جریان است. دو عنصر اصلی اندازه یکسانی دارند و چندین رنگ باعث می‌شود که نتوانید به کجا نگاه کنید.

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

منبع تصویر

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

آنچه ما دوست داریم:

اندازه در سلسله مراتب بصری ضروری است زیرا عناصر بزرگتر بیشترین توجه را به خود جلب می کنند و مهمتر تلقی می شوند.

به صدها تم و قالب وب سایت در HubSpot دسترسی داشته باشید

Visme به افراد امکان دسترسی به قالب ها و گرافیک های مورد نیاز برای ایجاد محتوا را می دهد.

فونت ها یک عنصر بصری مهم به وب سایت شما اضافه می کنند و به شما کمک می کنند تا متن را سازماندهی و طبقه بندی کنید (گاهی اوقات بر اساس سطح اهمیت).

این مثال را از نتفلیکس بگیرید.

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

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

نمونه اندازه سلسله مراتب بصری از نتفلیکس

پرسیدن این سوالات به شما کمک می کند تا از اصول ذکر شده در زیر برای ایجاد یک سلسله مراتب بصری واضح استفاده کنید.

سلسله مراتب بصری بد چیست؟

این تنوع دو سبک مختلف خواندن/اسکن را به ارمغان می آورد: الگوهای F و Z.

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

کمتر، بیشتر، پر کردن فضا با عناصر زیاد ممکن است اگر بینندگان نتوانند بفهمند به چه چیزی نگاه می کنند، می تواند باعث سردرگمی و منصرف شود.

منبع تصویر

دعوت به اقدام جدید

فهرست مطالب

منبع تصویر

این مثال را در نظر بگیرید:

منبع تصویر

مثال نزدیکی سلسله مراتب بصری و تکرار از NYT Cooking

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

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

خواندن از بالا به پایین یک استاندارد جهانی است، اما تنوع فرهنگی در نحوه خواندن افقی افراد وجود دارد. استاندارد “غربی” برای زبان هایی مانند انگلیسی و اسپانیایی خواندن از چپ به راست است، در حالی که زبان های سامی و هندوآریایی مانند عربی، عبری و اردو از راست به چپ می خوانند.

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

به سوی تو

نمونه فضای سفید سلسله مراتب بصری از Quip

Visme نمونه ای از سلسله مراتب بصری خوب

همانطور که صفحه وب خود را طراحی می کنید، در نظر بگیرید که می خواهید مخاطبان شما در ابتدا به چه چیزی نگاه کنند و از آن برای هدایت استراتژی خود استفاده کنید.

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

به عنوان مثال، وب سایت آشپزی نیویورک تایمز را در نظر بگیرید. هدر “Master The Basics” آن دارای چهار جعبه دستور العمل نزدیک به گروه است، که به بینندگان اجازه می دهد بدانند که احتمالاً سطح اهمیتی دارند.

به همین دلیل است که سلسله مراتب بصری در طراحی وب بسیار مهم است، زیرا یک وب سایت بد می تواند بازدیدکنندگان را از جلب توجه به برند شما باز دارد.

کنار هم قرار دادن عناصر به کاربران می گوید که عناصر مرتبط هستند.





منبع

وقتی به سلسله مراتب بصری فکر می کنید، می خواهید چند سوال از خود بپرسید:

  • می خواهیم توجه را به چه چیزی جلب کنیم؟
  • ما از کاربران خود می خواهیم چه اقداماتی انجام دهند؟
  • چشم به طور طبیعی به کجا می رود و کجا فرود می آید؟

CTA چشمگیر Visme از اصول سلسله مراتب فونت پیروی می کند تا کاربران را تشویق به ثبت نام در خبرنامه خود کند. بزرگ ترین کلمات تاثیرگذارترین کلماتی هستند که باید بدانید، و متن ثانویه و ثالث اطلاعات بیشتری را با حرکت خوانندگان به پایین صفحه ارائه می دهد.

2. 8AD Studio

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

سلسله مراتب فونت سه بخش دارد:

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

اپل همچنین به دلیل استفاده از فضای سفید معروف است.

منبع تصویر

برای ایجاد بیشترین تاثیر بصری با رنگ، کمتر اغلب بیشتر است.

4. فضای سفید باعث ایجاد تاکید می شود.

منبع تصویر

اگر مطمئن نیستید که چگونه عناصر خاصی را گروه بندی کنید، می توانید از استراتژی های تحقیق UX، مانند مرتب سازی کارت، برای گروه بندی عناصر بر اساس انتظارات مخاطبان خود استفاده کنید.

7. سلسله مراتب فونت به شما در سازماندهی متن کمک می کند.

8AD Studio یک آژانس تولیدی با خدمات کامل است که در برندسازی تخصص دارد.

نمونه سلسله مراتب بصری

نمونه فضای سفید سلسله مراتب بصری از اپل

مثال CTA رنگ سلسله مراتب بصری

فضای سفید به فضای خالی در یک طرح اشاره دارد.

در اینجا یک راهنمای آسان برای درک اصول کلیدی طراحی سلسله مراتب بصری برای جذب مخاطب، درگیر نگه داشتن آنها و ایجاد تبدیل وجود دارد.

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

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

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

منبع تصویر

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

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

3. کاربران به راحتی متوجه عناصر بزرگتر می شوند.

منبع تصویر