الگوهای طراحی, وبسایت و پروفایل شخصی داود جمیری

راهنمای غیر طراح برای سلسله مراتب بصری [بهترین روشها + مثالها]

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

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

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

Download Now: 150+ Content Creation Templates [Free Kit]

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

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

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

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

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

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

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

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

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

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

visual hierarchy example

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

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

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

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

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

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

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

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

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

Visual hierarchy reading patterns

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

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

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

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

visual hierarchy size example from Netflix

منبع تصویر

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

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

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

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

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

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

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

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

visual hierarchy color example

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

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

visual hierarchy color CTA example

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

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

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

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

visual hierarchy white space example from Quip

منبع تصویر

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

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

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

visual hierarchy white space example from Apple

منبع تصویر

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

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

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

visual hierarchy proximity and repetition example from NYT Cooking

منبع تصویر

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

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

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

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

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

1 Visme.co

Visme example of good visual hierarchy

منبع تصویر

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

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

2. استودیو 8AD

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

Studio 8AD example of good visual hierarchy

منبع تصویر

3 عمدتا سیاه

این نام تجاری مثال خوبی از همجواری برای ایجاد سلسله مراتب بصری را ارائه می دهد. PredominantlyBlack.com example of good visual hierarchy

Image Source

By organizing all products under the main title and leaving little space in between, visitors quickly understand that these products fall within the same category.

Visual hierarchy is all about ranking your elements by order of importance. Once you narrow down what you want to focus on and consider your audience’s needs, you can create designs that produce the desired impact.

content templates

نوشته ها مرتبط

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

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