0

راهنمای غیرطراح برای سلسله مراتب بصری [Best Practices + Examples]

بازدید 26


هنگامی که به دنبال دکمه خروج هستید ، تا به حال روی یک وب سایت کلیک کرده ، یک نگاهی بیندازید و بگویید “هوم ، این یک نه خواهد بود”؟

برای من ، این معمولاً به سه دلیل است: سایت به نظر می رسد منسوخ ، شلوغ یا پیمایش سخت باشد.

طراحی بد می تواند مخاطبان شما را از علاقه به مارک شما باز دارد.

اکنون بارگیری کنید: بیش از 150+ الگو برای ایجاد محتوا [Free Kit]

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

در اینجا یک راهنمای آسان برای یک اصل خاص طراحی وجود دارد: سلسله مراتب بصری. ما تمام عناصر موثر در سلسله مراتب بصری را پوشش خواهیم داد و به مثالهای خوب و بد نگاه خواهیم کرد.

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

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

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

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

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

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

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

این مثال را بزنید:

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

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

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

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

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

در عوض ، یک ساختار بصری ایجاد کنید که درک کاربر را تسهیل کرده و کاربر را راهنمایی کند.

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

هنگام طراحی می خواهید الگوهای طبیعی چشم مخاطبان خود را یادداشت کنید.

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

با توجه به این موضوع ، بر نحوه اسکن و درک طرح ها تأثیر می گذارد. به عنوان مثال ، کاربران غربی معمولاً الگوی خواندن F یا Z را دنبال می کنند.

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

دانستن این اطلاعات به شما کمک می کند پروژه هایی را تغییر دهید که به ویژه در صفحات فرود.

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

اندازه نقش مهمی در سلسله مراتب بصری دارد. این یکی از روشهای اصلی برای رتبه بندی عناصر در یک طرح است.

این مثال را از Netflix بگیرید.

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

منبع تصویر

اولین چیزی که هنگام مشاهده این تصویر خواهید خواند این است “فیلم های نامحدود ، نمایش های تلویزیونی و موارد دیگر.

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

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

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

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

دومین اصلی که باید به خاطر بسپارید رنگ است.

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

در طراحی ، رنگ در جلب توجه عالی است.

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

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

در یک وب سایت ، می توانید از این مورد برای جلب توجه به CTA استفاده کنید.

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

منبع تصویر

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

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

4- فضای سفید تأکید ایجاد می کند.

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

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

منبع تصویر

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

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

سیب همچنین به دلیل استفاده از فضای سفید به خوبی شناخته شده است.

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

منبع تصویر

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

5. مجاورت و تکرار باعث ایجاد وحدت می شود.

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

مجاورت سلسله مراتبی بصری و مثال تکرار از پخت و پز NYT

منبع تصویر

این طرح نمونه های زیادی از مجاورت را ارائه می دهد.

عناصر را در بخش “Master The اصول” قرار دهید. با قرار گرفتن این جعبه ها در یک گروه ، بازدیدکننده می تواند درک کند که در یک گروه قرار دارند.

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

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

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

1 Visme.co

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

منبع تصویر

Visme.co دارای یک پاپ آپ قابل توجه است که کاربران را به ثبت نام در خبرنامه خود ترغیب می کند.

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

2 استودیو 8AD

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

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

منبع تصویر

3 عمدتا سیاه

این نام تجاری مثال خوبی از همجواری برای ایجاد سلسله مراتب بصری را ارائه می دهد. PredominentlyBlack.com نمونه سلسله مراتب بصری خوب

منبع تصویر

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

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

الگوهای محتوا





منبع

نظرات کاربران

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

*

code

18  +    =  28