18-08-2018, 01:08 PM
اصل سلسله مراتب بصری
برای اطمینان از اینکه طرح های شما به طور موثر در حال برقراری ارتباط هستند شما باید بتوانید از نظریه رنگ ها و تصاویر در متن خود استفاده کنید کار کردن با تمام ابزارهای طراحی کنتراست ها تایپوگرافی فاصله و سایر اصول طراحی
در اینجا برخی از روش های مختلف را بررسی می کنیم که می تواند عناصر طراحی ما را به منظور ایجاد سلسله مراتب بصری ترسیم کند
یکی از ساده ترین و موثرترین روش ها برای اهمیت بصری آن است
عناصر طراحی که اهمیت ندارند می توانید آنها را کوچک کنید تا کمتر قابل مشاهده باشد
شما می توانید در طراحی با استفاده از نقطه کانونی که بیش از حد بزرگ است و یا اطلاعات ثانویه که بسیار کوچک است تعادل برقرار کنید
سلسله مراتب بصری متکی بر رابط کاربری
اما اهداف ثانویه نیز وجود دارد. اهداف خاص مانند ترویج محتوای خاص و تماس های فوری و به طور کلی بهبود تجربه کاربران
یعنی استفاده از رنگ ها و تصاویر که توجه کاربران را جلب کند
هیچ راه مشخصی برای ساختن سلسله مراتب بصری وجود ندارد و طراحان در رقابت باید از روش های جدید و خلاقانه استفاده کنند تا بتوانند در این رقابت از بقیه رقبا سبقت بگیرند
هر چه عناصر بزرگتر باشند بیشتر قابل توجه هستند
ساده ترین راه برای توضیح اینکه عناصر شما اهمیت دارد این است که بزرگ باشد اما همیشه این کار بهترین کار نیست
احتمال بیشتری وجود دارد که کاربران بر روی آیتم های بزرگتر کلیک کنند
بنابراین از این اصل به خصوص برای ساخت دکمه های تماس های فوری بسیار استفاده می شود
این به این معنا نیست که دکمه تماس با ما را 10 برابر بزرگتر از بقیه دکمه ها در نظر بگیرید هماهنگی و ظرافت بین عناصر بسیار مهم است
انتخاب رنگ برای سایت تاثیر بسیار زیادی بر روی کاربران می گذارد رنگ ها سلسله مراتب خاص خود را دارند
در حالی که رنگ مشکی و قرمز توجه بیشتری را به خود جلب می کنند و رنگ های زرد و کرم توجه کمتری را به خود جلب می کنند
رنگ های کانتراست برخلاف طبیعتشان توجه بیشتری را به خود جلب می کنند
برای دکمه تماس های فوری CTA مانند تماس با ما استفاده از رنگ هایی مانند قرمز ممکن است بیشتر جلب توجه کند
سایت های طراحی دیجیتال باید تصاویر دیجیتال بیشتری داشته باشند و عکس هایی که برای این سایت ها انتخاب می شود مهم هستند
رنگ ها کانتراست بین آبی آسمانی و رنگ شن های ساحل می تواند یک تصویر بصری پویا را به وجود بیاورد
انتخاب رنگ سفید برای تایپوگرافی اجازه می دهد تا لینک ها زیبا و ظریف تر مشاهده شوند
طرح بندی رابط کاربری سایت شما یکی از راه های مستقیم برای کنترل سلسله مراتب بصری است
البته قطعا طرح شما بر روی سلسله مراتب بصری تاثیر می گذارد
سلسله مراتب بصری یکی از مهمترین اصول طراحی موثر سایت است
تئوری های پشت آن و چگونه از یکسری تمرینات بسیار ساده در طرح خود استفاده کنیم تا بتوانیم این اصول را در عمل اجرا کنیم
اغلب مردم در مورد خواندن مطالب زیاد بی حوصله هستند اگر شما حجم اطلاعاتی زیادی را به آنها بدهید احتمال اینکه 90 درصد آنها آن را نخوانند بسیار زیاد است زیرا مغز انسان بصری است
به جای گرفتن اطلاعات و پردازش یکنواخت آنها مردم آنچه را که به صورت بصری مشاهده می کنند سازماندهی می کنند
تصویر دو حلقه را در نظر بگیرید یکی مشکی و بزرگتر و یکی قرمز و کوچکتر
دلیل آن بسیار ساده است هنگامی که چیزی ساده به عنوان دو حلقه ارائه شده است یک دایره ممکن است بزرگتر یا کوچکتر و یا رنگی باشد و یا هرگونه اختلاف دیگر
درک اینکه سلسله مراتب بصری بسیار مهم است ، خیلی عالی است
ابزاری که ما به آن احتیاج داریم به همان اندازه ابزارهای دیگر مانند ابزارهای یک نجار برای نجاری ساده است
استفاده از اندازه به عنوان یک ابزار سلسله مراتب بصری یک راه موثر برای هدایت چشم بیننده است
از آنجا که اندازه یکی از قدرتمندترین فرم های سازماندهی است بسیار مهم است که در طراحی اندازه ها را با اهمیت خاصی در نظر بگیرید
چشم انسان به طور طبیعی از عناصر بزرگ به سمت عناصر کوچک حرکت می کند
رنگ می تواند به عنوان ابزار سازمانی عمل کند
با استفاده از رنگ های شاد و آرامش بخش می توانید جاذبه های عاطفی را برای سایتتان به وجود بیاورید
رنگ ها می توانند بر روی همه چیز مانند رنگ قرمز برای نماد کوکاکولا تا احساسات مانند احساسی آرامش برای رنگ آبی تاثیر بگذارند
تغییرات چشمگیر در متن و یا رنگ را به شما نشان می دهد تغییر رنگ از یک رنگ پس زمینه روشن به یک رنگ پس زمینه تیره می تواند محتویات یک فوتر را از صفحه جدا کند
در واقع تراز بندی بین عناصر مختلف صفحه هماهنگی ایجاد می کند
اطلاعاتی که در بالای صفحه سمت راست قرار دارد را در نظر بگیرید
عموما کاربران اطلاعاتی که در آن بخش از صفحه نمایش داده می شود را بیشتر مطالعه می کنند
بنابراین آن قسمت منطقه رسمی است
تراز بندی ها می تواند بین عناصر با آن قسمت از صفحه ارتباط برقرار کند
وزن و استایلی که انتخاب می کنید بسیار اهمیت دارد
سعی کنید با استفاده از انواع مختلف وزن واندازه اهداف خود را بررسی کنید
شما می توانید سلسله مراتب متن را در سایت خود با استفاده از اندازه ها وزن ها و فاصله های مختلف ایجاد کنید
در سلسله مراتب بصری حتما دقت کنید که فضاهای خالی وجود دارد. صفحه وب سایت شما نیاز به فضاهای خالی برای نفس کشیدن دارد.
فضاهای خالی یا فضاهای سفید اغلب با عنوان فضاهای بین مطالب موجود در صفحه تعریف می شود این فضا ها همیشه سفید رنگ نیستند نام دیگر آن فضاهای منفی نیز گفته می شود
معمولا صفحات از بالا به پائین خوانده می شوند اما در بیشتر فرهنگ ها از چپ به راست خوانده می شود
در حالی که این دانش برای اغلب طراحان بسیار پراهمیت است ولی در عین حال کمی پیچیده است
افراد ابتدا صفحه را اسکن می کنند تا آن را به صورت کلی مشاهده کنند سپس شروع به خواندن آن می کنند
الگوهای اسکن معمولا به دو شکل F و Z هستند
الگوی F معمولا به صفحات سنتی و متنی بزرگ مانند مقالات یا پست های وبلاگ اعمال می شود کاربر در این الگو به دنبال کلمات کلیدی در سربرگ و یا سمت چپ صفحه است
الگو Z برای انواع دیگری از صفحات مانند تبلیغات و یا سایت ها اعمال می شود چشم بیننده در ابتدا بالای صفحه را اسکن می کند که مهمترین اطلاعات در آنجا قرار دارد سپس گوشه مقابل و سپس پائین صفحه را اسکن می کند
sitedar.com
سلسله مراحل بصری در طراحی سایت
![[تصویر: sitedesign2.png]](https://sitedar.com/blog/templates/frontend/images/sitedesign2.png)
برای اطمینان از اینکه طرح های شما به طور موثر در حال برقراری ارتباط هستند شما باید بتوانید از نظریه رنگ ها و تصاویر در متن خود استفاده کنید کار کردن با تمام ابزارهای طراحی کنتراست ها تایپوگرافی فاصله و سایر اصول طراحی
در اینجا برخی از روش های مختلف را بررسی می کنیم که می تواند عناصر طراحی ما را به منظور ایجاد سلسله مراتب بصری ترسیم کند
یکی از ساده ترین و موثرترین روش ها برای اهمیت بصری آن است
عناصر طراحی که اهمیت ندارند می توانید آنها را کوچک کنید تا کمتر قابل مشاهده باشد
شما می توانید در طراحی با استفاده از نقطه کانونی که بیش از حد بزرگ است و یا اطلاعات ثانویه که بسیار کوچک است تعادل برقرار کنید
سلسله مراتب بصری متکی بر رابط کاربری
اما اهداف ثانویه نیز وجود دارد. اهداف خاص مانند ترویج محتوای خاص و تماس های فوری و به طور کلی بهبود تجربه کاربران
یعنی استفاده از رنگ ها و تصاویر که توجه کاربران را جلب کند
هیچ راه مشخصی برای ساختن سلسله مراتب بصری وجود ندارد و طراحان در رقابت باید از روش های جدید و خلاقانه استفاده کنند تا بتوانند در این رقابت از بقیه رقبا سبقت بگیرند
هر چه عناصر بزرگتر باشند بیشتر قابل توجه هستند
ساده ترین راه برای توضیح اینکه عناصر شما اهمیت دارد این است که بزرگ باشد اما همیشه این کار بهترین کار نیست
احتمال بیشتری وجود دارد که کاربران بر روی آیتم های بزرگتر کلیک کنند
بنابراین از این اصل به خصوص برای ساخت دکمه های تماس های فوری بسیار استفاده می شود
این به این معنا نیست که دکمه تماس با ما را 10 برابر بزرگتر از بقیه دکمه ها در نظر بگیرید هماهنگی و ظرافت بین عناصر بسیار مهم است
انتخاب رنگ برای سایت تاثیر بسیار زیادی بر روی کاربران می گذارد رنگ ها سلسله مراتب خاص خود را دارند
در حالی که رنگ مشکی و قرمز توجه بیشتری را به خود جلب می کنند و رنگ های زرد و کرم توجه کمتری را به خود جلب می کنند
رنگ های کانتراست برخلاف طبیعتشان توجه بیشتری را به خود جلب می کنند
برای دکمه تماس های فوری CTA مانند تماس با ما استفاده از رنگ هایی مانند قرمز ممکن است بیشتر جلب توجه کند
سایت های طراحی دیجیتال باید تصاویر دیجیتال بیشتری داشته باشند و عکس هایی که برای این سایت ها انتخاب می شود مهم هستند
رنگ ها کانتراست بین آبی آسمانی و رنگ شن های ساحل می تواند یک تصویر بصری پویا را به وجود بیاورد
انتخاب رنگ سفید برای تایپوگرافی اجازه می دهد تا لینک ها زیبا و ظریف تر مشاهده شوند
طرح بندی رابط کاربری سایت شما یکی از راه های مستقیم برای کنترل سلسله مراتب بصری است
البته قطعا طرح شما بر روی سلسله مراتب بصری تاثیر می گذارد
سلسله مراتب بصری یکی از مهمترین اصول طراحی موثر سایت است
تئوری های پشت آن و چگونه از یکسری تمرینات بسیار ساده در طرح خود استفاده کنیم تا بتوانیم این اصول را در عمل اجرا کنیم
اغلب مردم در مورد خواندن مطالب زیاد بی حوصله هستند اگر شما حجم اطلاعاتی زیادی را به آنها بدهید احتمال اینکه 90 درصد آنها آن را نخوانند بسیار زیاد است زیرا مغز انسان بصری است
به جای گرفتن اطلاعات و پردازش یکنواخت آنها مردم آنچه را که به صورت بصری مشاهده می کنند سازماندهی می کنند
تصویر دو حلقه را در نظر بگیرید یکی مشکی و بزرگتر و یکی قرمز و کوچکتر
دلیل آن بسیار ساده است هنگامی که چیزی ساده به عنوان دو حلقه ارائه شده است یک دایره ممکن است بزرگتر یا کوچکتر و یا رنگی باشد و یا هرگونه اختلاف دیگر
درک اینکه سلسله مراتب بصری بسیار مهم است ، خیلی عالی است
ابزاری که ما به آن احتیاج داریم به همان اندازه ابزارهای دیگر مانند ابزارهای یک نجار برای نجاری ساده است
استفاده از اندازه به عنوان یک ابزار سلسله مراتب بصری یک راه موثر برای هدایت چشم بیننده است
از آنجا که اندازه یکی از قدرتمندترین فرم های سازماندهی است بسیار مهم است که در طراحی اندازه ها را با اهمیت خاصی در نظر بگیرید
چشم انسان به طور طبیعی از عناصر بزرگ به سمت عناصر کوچک حرکت می کند
رنگ می تواند به عنوان ابزار سازمانی عمل کند
با استفاده از رنگ های شاد و آرامش بخش می توانید جاذبه های عاطفی را برای سایتتان به وجود بیاورید
رنگ ها می توانند بر روی همه چیز مانند رنگ قرمز برای نماد کوکاکولا تا احساسات مانند احساسی آرامش برای رنگ آبی تاثیر بگذارند
تغییرات چشمگیر در متن و یا رنگ را به شما نشان می دهد تغییر رنگ از یک رنگ پس زمینه روشن به یک رنگ پس زمینه تیره می تواند محتویات یک فوتر را از صفحه جدا کند
در واقع تراز بندی بین عناصر مختلف صفحه هماهنگی ایجاد می کند
اطلاعاتی که در بالای صفحه سمت راست قرار دارد را در نظر بگیرید
عموما کاربران اطلاعاتی که در آن بخش از صفحه نمایش داده می شود را بیشتر مطالعه می کنند
بنابراین آن قسمت منطقه رسمی است
تراز بندی ها می تواند بین عناصر با آن قسمت از صفحه ارتباط برقرار کند
وزن و استایلی که انتخاب می کنید بسیار اهمیت دارد
سعی کنید با استفاده از انواع مختلف وزن واندازه اهداف خود را بررسی کنید
شما می توانید سلسله مراتب متن را در سایت خود با استفاده از اندازه ها وزن ها و فاصله های مختلف ایجاد کنید
در سلسله مراتب بصری حتما دقت کنید که فضاهای خالی وجود دارد. صفحه وب سایت شما نیاز به فضاهای خالی برای نفس کشیدن دارد.
فضاهای خالی یا فضاهای سفید اغلب با عنوان فضاهای بین مطالب موجود در صفحه تعریف می شود این فضا ها همیشه سفید رنگ نیستند نام دیگر آن فضاهای منفی نیز گفته می شود
معمولا صفحات از بالا به پائین خوانده می شوند اما در بیشتر فرهنگ ها از چپ به راست خوانده می شود
در حالی که این دانش برای اغلب طراحان بسیار پراهمیت است ولی در عین حال کمی پیچیده است
افراد ابتدا صفحه را اسکن می کنند تا آن را به صورت کلی مشاهده کنند سپس شروع به خواندن آن می کنند
الگوهای اسکن معمولا به دو شکل F و Z هستند
الگوی F معمولا به صفحات سنتی و متنی بزرگ مانند مقالات یا پست های وبلاگ اعمال می شود کاربر در این الگو به دنبال کلمات کلیدی در سربرگ و یا سمت چپ صفحه است
الگو Z برای انواع دیگری از صفحات مانند تبلیغات و یا سایت ها اعمال می شود چشم بیننده در ابتدا بالای صفحه را اسکن می کند که مهمترین اطلاعات در آنجا قرار دارد سپس گوشه مقابل و سپس پائین صفحه را اسکن می کند
sitedar.com
سلسله مراحل بصری در طراحی سایت