سیستم سلسله مراتب بصری، پایه واساس یک محصول دیجیتال موفق است که کمک می کند تا عناصر UI را به شیوه موثر سازماندهی کنید تا محتوا بتواند به راحتی درک و دیده شود. ارائه عناصر بصری تاثیر زیادی بر تجربه کاربر دارد. اگر اجزا و عناصر بصری مناسب باشد، کاربر تجربه لذت بخشی به دست خواهد آورد.
بنابراین، چه چیز سلسله مراتب بصری قدرتمندی را ایجاد می کند؟ البته انواع مختلف محصولات ، نیاز به روش های مختلف برای ساخت آن وجود دارد. در حال حاضر ، راه کارهای مشترکی برای سازماندهی UI وجود دارد. در این مقاله می خواهیم، در مورد ایجاد سلسله مراتب بصری توضیحاتی دهیم.
اهداف کسب و کار خود را در ذهن داشته باشید
اغلب اهداف کسب وکار ها، در پشت یک محصول دیجیتال وجود دارد. برای رسیدن به این اهداف، تیم خلاق نیاز است تا بتوانند عناصر UI را طراحی کنند. با در نظر گرفتن اهداف بازاریابی ، تیم بازاریابی می تواند اهداف بازاریابی بصری را تعیین کند.
سلسله مراتب بصری: سازماندهی محتوا بر اساس الگو طبیعی چشم
بیایید به یک موضوع نگاه کنیم که به اندازه کافی قابل توجه است، چگونه ما به طرح های بصری نگاه می کنیم؟ زمانی که می خواهید عنصری را طراحی کنید اگر به این نکته توجه داشته باشید که چشم انسان چطور آن را پردازش می کند، سپس می توانید عناصر موثر تری را خلق کنید.
محتوا در هر صفحه دیجیتال، سلسله مراتب خاصی را دنبال می کند. هدر در بالای صفحه ظاهر می شود. منوها در پائین، بالا، چپ و راست صفحه نمایش داده می شوند. سپس بقیه مطالب در بالا وپائین ترین الویت قرار دارند.
"سلسله مراتب بصری" یک روش ساده و عالی برای سازماندهی مطالب به ترتیب الویت است. همچنین از سلسله مراتب بصری برای نشان دادن روابط بین بلوک های محتوا استفاده می شود.
اصل سلسله مراتب بصری
چشم انسان اطلاعات را به صورت بصری درک می کند. برای اطمینان از اینکه طرح های شما به طور موثر در حال برقراری ارتباط هستند، شما باید بتوانید از نظریه رنگ ها و تصاویر در متن خود استفاده کنید. این اصل سلسله مراتب بصری است: کار کردن با تمام ابزارهای طراحی مانند رنگ ها ، کنتراست ها، تایپوگرافی، فاصله و سایر اصول طراحی.
یکی از مهمترین توابع سلسله مراتب بصری کمک کردن به نقطه کانونی است. در اینجا برخی از روش های مختلف را بررسی می کنیم که می تواند عناصر طراحی ما را به منظور ایجاد سلسله مراتب بصری ترسیم کند:
استفاده از اندازه ها برای بهبود مشاهده
بزرگ کردن سایز عناصر و مقیاس آن ؛ یکی از ساده ترین و موثرترین روش ها برای اهمیت بصری آن است. از سوی دیگر عناصر طراحی که اهمیت ندارند و یا کم اهمیت تر هستند ، می توانید آنها را کوچک کنید تا کمتر قابل مشاهده باشد. بنابراین سلسله مراتب بصری آن پائین می آید.
همانند هر اصل طراحی ، تعادل و اعتدال کلید است. شما می توانید در طراحی با استفاده از نقطه کانونی که بیش از حد بزرگ است و یا اطلاعات ثانویه که بسیار کوچک است ، تعادل برقرار کنید.
سلسله مراتب بصری در طراحی وب
سلسله مراتب بصری متکی بر رابط کاربری ، که بر اساس اصول زیبا شناسی است . اما اهداف ثانویه نیز وجود دارد. اهداف خاص مانند ترویج محتوای خاص، تشویق ثبت نام کاربران و تماس های فوری و به طور کلی بهبود تجربه کاربران.
اصطلاح سلسله مراتب بصری؛ یعنی استفاده از رنگ ها و تصاویر که توجه کاربران را جلب کند. اما هیچ راه مشخصی برای ساختن سلسله مراتب بصری وجود ندارد و طراحان در رقابت باید از روش های جدید و خلاقانه استفاده کنند تا بتوانند در این رقابت از بقیه رقبا سبقت بگیرند.
در زیر عناصر اصلی برای ساخت بلوک های ضروری ساختنی برای پشتیبانی از سلسله مراتب بصری گفته شده است:
اندازه
هر چه عناصر بزرگتر باشند ، بیشتر قابل توجه هستند، اما همیشه بهترین نیست. ساده ترین راه برای توضیح اینکه عناصر شما اهمیت دارد این است که بزرگ باشد اما همیشه این کار بهترین کار نیست. این کار زمانی که ما به جزئیات می رسیم، پیچیده تر می شود.
یک اصل که همیشه وجود دارد، احتمال بیشتری وجود دارد که کاربران بر روی آیتم های بزرگتر کلیک کنند. بنابراین از این اصل به خصوص برای ساخت دکمه های تماس های فوری بسیار استفاده می شود. مطمئنا ، این به این معنا نیست که دکمه تماس با ما را 10 برابر بزرگتر از بقیه دکمه ها در نظر بگیرید. خیر، هماهنگی و ظرافت بین عناصر بسیار مهم است.
رنگ
انتخاب رنگ برای وب سایت تاثیر بسیار زیادی بر روی کاربران می گذارد. هر رنگ ارتباط روانشناختی خاص خود را دارد. رنگ ها سلسله مراتب خاص خود را دارند. در حالی که رنگ مشکی و قرمز توجه بیشتری را به خود جلب می کنند و رنگ های زرد و کرم توجه کمتری را به خود جلب می کنند.
با این حال این اثرات را می توان با استفاده از کنتراست افزایش داد. رنگ های کانتراست برخلاف طبیعتشان، توجه بیشتری را به خود جلب می کنند. این می تواند تاثیر بسیار زیادی بر سلسله مراتب بصری بگذارد. برای دکمه تماس های فوری (CTA) مانند تماس با ما ، استفاده از رنگ هایی مانند قرمز ممکن است بیشتر جلب توجه کند.
به طور طبیعی، وب سایت های طراحی دیجیتال باید تصاویر دیجیتال بیشتری داشته باشند و عکس هایی که برای این وب سایت ها انتخاب می شود مهم هستند. از نظر تئوری رنگ ها، کانتراست بین آبی آسمانی و رنگ شن های ساحل ، می تواند یک تصویر بصری پویا را به وجود بیاورد. برای عملکرد مناسب، انتخاب رنگ سفید برای تایپوگرافی، اجازه می دهد تا لینک ها زیبا و ظریف تر مشاهده شوند.
طرح بندی
طرح بندی رابط کاربری وب سایت شما یکی از راه های مستقیم، برای کنترل سلسله مراتب بصری است. البته قطعا طرح شما بر روی سلسله مراتب بصری تاثیر می گذارد.
درک سلسله مراتب بصری در طراحی وب
سلسله مراتب بصری یکی از مهمترین اصول طراحی موثر وب سایت است. در زیر بررسی می کنیم که ایجاد سلسله مراتب بصری در طرحی وب سایت چقدر اهمیت دارد، تئوری های پشت آن و چگونه از یکسری تمرینات بسیار ساده در طرح خود استفاده کنیم تا بتوانیم این اصول را در عمل اجرا کنیم.
طراحی = ارتباطات
طراحی همه چیز در مورد ارتباطات بصری است، برای اینکه یک طراح حرفه ای باشید باید بتوانید ایده های خود را به صورت واضح به ببندگان خود نشان دهید و بتوانید توجه آنها را جلب کنید. اغلب مردم در مورد خواندن مطالب زیاد بی حوصله هستند. اگر شما حجم اطلاعاتی زیادی را به آنها بدهید ، احتمال اینکه 90 درصد آنها آن را نخوانند بسیار زیاد است. فکر می کنید که چرا اغلب انسان ها به این صورت هستند؟ زیرا مغز انسان بصری است.
برای درک این موضوع، لازم است کمی در مورد چیزهایی که می بینیم، فکر کنیم. به جای گرفتن اطلاعات و پردازش یکنواخت آنها، مردم آنچه را که به صورت بصری مشاهده می کنند، سازماندهی می کنند. تصویر دو حلقه را در نظر بگیرید، یکی مشکی و بزرگتر و یکی قرمز و کوچکتر. احتمالا شما دو شکل را به صورت دو حلقه نمی بینید در عوض آن را به شکل یک دایره قرمز و یک دایره مشکی می بینید. دلیل آن بسیار ساده است: هنگامی که چیزی ساده، به عنوان دو حلقه ارائه شده است، بلکه مغز انسان می خواهد تمایز بین این دو را ببیند. یک دایره ممکن است بزرگتر یا کوچکتر و یا رنگی باشد و یا هرگونه اختلاف دیگر. این تفاوت ها به ما اجازه می دهد بین اشیاء مختلف ، تمایز قائل شویم و به آنها معانی خاص بدهیم.
جعبه ابزارهای سلسله مراتب بصری
درک اینکه سلسله مراتب بصری بسیار مهم است ، خیلی عالی است اما طراح چگونه باید آن را ایجاد کند؟ ابزاری که ما به آن احتیاج داریم به همان اندازه ابزارهای دیگر مانند ابزارهای یک نجار برای نجاری ساده است.
اندازه
اشیائی که بزرگتر هستند توجه بیشتری را به خود جلب می کند. استفاده از اندازه به عنوان یک ابزار سلسله مراتب بصری یک راه موثر برای هدایت چشم بیننده است. از آنجا که اندازه یکی از قدرتمندترین فرم های سازماندهی است، بسیار مهم است که در طراحی اندازه ها را با اهمیت خاصی در نظر بگیرید. عناصر بزرگتر در بیشتر موارد اهمیت بیشتری دارند و عناصر کوچکتر اهمیت کمتری دارد. چشم انسان به طور طبیعی از عناصر بزرگ به سمت عناصر کوچک حرکت می کند.
رنگ
رنگ یک ابزار جالب است زیرا می تواند به عنوان ابزار سازمانی عمل کند. رنگ های پر رنگ و متضاد در یک عنصر خاص، می تواند باعث جلب توجه بیشتری شود(مانند دکمه های تماس های فوری ، لینک ها و یا پیام های خطا). با استفاده از رنگ های شاد و آرامش بخش، می توانید جاذبه های عاطفی را برای وب سایتتان به وجود بیاورید. رنگ ها می توانند بر روی همه چیز از نماد مارک ها (مانند رنگ قرمز برای نماد کوکاکولا ) تا احساسات (مانند احساسی آرامش برای رنگ آبی ) تاثیر بگذارند.
کانتراست
کانتراست نسبت های مهم را نشان می دهد . تغییرات چشمگیر در متن و یا رنگ را به شما نشان می دهد. تغییر رنگ از یک رنگ پس زمینه روشن به یک رنگ پس زمینه تیره می تواند محتویات یک فوتر را از صفحه جدا کند.
هم ترازی
تراز بندی، بین عناصر مختلف نظم ایجاد می کند. در واقع تراز بندی بین عناصر مختلف صفحه هماهنگی ایجاد می کند. به عنوان مثال، اطلاعاتی که در بالای صفحه سمت راست قرار دارد را در نظر بگیرید. عموما کاربران اطلاعاتی که در آن بخش از صفحه نمایش داده می شود را بیشتر مطالعه می کنند. از آنجا که کاربران بیشتر انتظار دارند که اطلاعات را در این بخش از وب سایت مشاهده کنند مانند حساب های کاربری پروفایل ها، چرخ دستی های خرید و غیره . بنابراین آن قسمت، منطقه رسمی است. تراز بندی ها می تواند بین عناصر با آن قسمت از صفحه ارتباط برقرار کند.
فونت
انتخاب فونت در سلسله مراتب بصری بسیارمهم است. فونت ها نه تنها مهم هستند بلکه نحوه استفاده از آن ها نیز مهم هستند. وزن و استایلی که انتخاب می کنید ، بسیار اهمیت دارد. برای سازماندهی بیشتر، سعی کنید با استفاده از انواع مختلف وزن واندازه، اهداف خود را بررسی کنید. شما می توانید سلسله مراتب متن را در سایت خود، با استفاده از اندازه ها ، وزن ها و فاصله های مختلف ایجاد کنید. اگر از یک فونت تنها استفاده می کنید، اهمیت ندارد.
فضاهای خالی
در سلسله مراتب بصری حتما دقت کنید که فضاهای خالی وجود دارد. صفحه وب سایت شما نیاز به فضاهای خالی برای نفس کشیدن دارد.
فضاهای خالی یا فضاهای سفید اغلب با عنوان "فضاهای بین مطالب موجود در صفحه " تعریف می شود . این فضا ها همیشه سفید رنگ نیستند. نام دیگر آن فضاهای منفی نیز گفته می شود.
الگو صفحات
در اغلب فرهنگ ها، معمولا صفحات از بالا به پائین خوانده می شوند اما در بیشتر فرهنگ ها از چپ به راست خوانده می شود. اما در حالی که این دانش برای اغلب طراحان بسیار پراهمیت است ولی در عین حال کمی پیچیده است.مطالعات نشان می دهد که افراد ابتدا صفحه را اسکن می کنند تا آن را به صورت کلی مشاهده کنند سپس شروع به خواندن آن می کنند. الگوهای اسکن معمولا به دو شکل "F" و "Z" هستند.
الگوی F
الگوی F معمولا به صفحات سنتی و متنی بزرگ مانند مقالات یا پست های وبلاگ اعمال می شود. کاربر در این الگو به دنبال کلمات کلیدی در سربرگ و یا سمت چپ صفحه است. در نتیجه به نظر می رسد چیزی شبیه به F باشد.
الگوی Z
الگو Z برای انواع دیگری از صفحات مانند تبلیغات و یا وب سایت ها اعمال می شود. چشم بیننده در ابتدا بالای صفحه را اسکن می کند، که مهمترین اطلاعات در آنجا قرار دارد سپس گوشه مقابل و سپس پائین صفحه را اسکن می کند.
چرا سلسله مراتب بصری اهمیت ویژه دارد؟
هنگامی که بازدیدکننده ای به وب سایت شما می آید، احتمالا به عناصر بصری خاص تمرکز می کند. کاربران در وب سایت، تمایل دارند سایت را به سرعت اسکورول کنند مگر زمانی که یک ویدئو و یا عکس خاصی توجه آنها را جلب کند. به عنوان یک طراح ، می خواهید که بازدیدکنندگان وب سایت شما، ابتدا کجا را ببینند.
سلسله مراتب بصری به طراحان کمک می کند تا یک جریان تصویری ایجاد کنند، که اهداف وب سایت شما را تقویت کند.