ویجت

۹۱۳۰۲۶۵۴ ۰۲۱

معرفی امکان Hover Effect یا جلوه‌ در حالت هاور

جلوه های هاور

آنچه خواهید آموخت

معرفی امکان Hover Effect یا جلوه‌ در حالت هاور: طراحی تعاملی صفحات سایتتون را تقویت کنید

با المان Hover، بدون کدنویسی CSS، می‌تونید به‌راحتی و به صورت بصری در وردپرس، افکت‌های رایگان Hover را به سایتتون اضافه کنید. طراحی وب راه درازی را از دوران وبسایت‌های راکد HTML طی کرده.

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

با ارائه این ویژگی تو ورژن‌های قدیمی المنتور، اضافه کردن Hover Effect به وردپرس خیلی  آسون شد و به کاربر اجازه می‌داد تا حجم عظیمی از افکت‌های حالت hover را بدون اندکی کدنویسی ثبت کند. تو این پست، می‌خوام بیشتر در مورد انواع hover effect یا جلوه‌های هاور براتون توضیح بدم. در آخر شما متوجه میشید که چطور از هاور برای پروژه‌های بعدیتون استفاده کنید.

انواع Hover Effect

انواع hover effectهای که در افزونه المنتور هست شامل:

  • هاور در رنگ پس زمینه
  • هاور گردیان پس زمینه
  • هاور عکس و ویديو
  • هاور روکش رنگی
  • هاور سایه جعبه یا Box Shadow Hover
  • هاور حاشیه یا Border Hover

این شش تا hover روی تمام بخش‌ها، ستون‌ها و بیشتر ابزارک‌ها قابل پیاده‌سازی هستند.

ممکنه پیش خودتون فکر کنید که  تأثیر افکت‌‌های هاور روی site stickiness، bounce rate و حتی conversion چی هست!

خود المنتور تابه‌الآن چنین موضوعی رو بررسی نکرده اما سایت envato.com اومده ویژگی hover effects رو جزء 4 تا از دیزاین‌های برتری که خیلی هم رو بورس هستند، قرار داده. این ویژگی نرخ conversion سایت شما را هم افزایش میده.

توضیح چند اصطلاح فوق که ممکنه اون‌ها را ندونید:

  1. sitestickiness : مدت زمانی که کاربر تو سایت شما وقت میذاره
  2. bounce rate : نرخ کاربرانی که بعد از ورود به سایت شما، تو سایت نمی‌موند و سایت رو ترک می‌کنند
  3. conversion : نرخ کلیک در سایت از جمله کلیک روی تبلیغات و خرید محصول

عملکرد جلوه‌های هاور یا Hover Effects

بیایید به بعضی از جلوه‌هایی که میشه با استفاده از المان Hover به وردپرس اضافه کنید، بپردازیم.

جلوه هاور

جلوه هاور رنگ پس زمینه

بازدیدکننده‌ها نه تنها با چشم‌هاشون، بلکه با mouse صفحه‌ی شما را مرور می‌کنند.  با اضافه کردن hover effect تغییر و تحول رنگ یک سکشن یا بخش، با قرار گرفتن mouse روی اون بخش، تجربه‌ی باارزش و متعاملی را به کاربر انتقال میدید. اون بخشی که اشاره گر mouse کاربر روش قرار داره، می‌تونه روشن یا فوکوس بشه و به چشم بیاد.

دستورالعمل: برید به بخش> استایل> پس زمینه> هاور> رنگ #49a9e5 تنظیم کنید و مدت زمان جابجایی را روی 1.5 قرار بدید.

روی

ما

هاور

کن

هاور در رنگ پس‌زمینه  ستون

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

دستورالعمل: برید به ستون> استایل> پس‌زمینه> هاور و رنگ را روی #f1c40f ست کنید.

هاور حاشیه

روی این کادر کلیک کنید تا تغییر رنگ حاشیه را در حین هاور متوجه شوید

جلوه هاور حاشیه

Border یا حاشیه یکی از بهترین راه‌های جلب تمرکز و علاقه کاربران محسوب میشه. برای مثال اینی که می‌بینید یک باکس هست که با استفاده از یک رنگ ساده برای حاشیه سمت چپ، بسیار گیرا و جالب توجه شد. این مدل استفاده از هاور  حاشیه یا border hover، حسی تزیینی و شیک بهش می‌ده و واسه وقتی که قصد دارید لندینگ پیج و وبسایت‌هایی تو زمینه‌ی طراحی و تکنولوژی طراحی کنید، یک گزینه عالی محسوب میشه. این تغییرات نامحسوسه؛ پس مناسب وبسایت‌های دارای سبک مینیمال هست.

توجه کنید که تو این مثال ، ما به “ستون” که تو حالت عادی هیچ حاشیه‌ای نداشتند، برای حالت هاور یک حاشیه آبی در سمت چپ اضافه کردیم. همین منجر میشه تا کل محتوای “ستون” با جلوه‌ی حرکتی به سمت راست منتقل بشه.

دستورالعمل: برید به ستون> استایل> حاشیه> هاور> حاشیه سمت چپ را یکپارچه با 8 پیکسل ضخامت تنظیم کنید.

جلوه‌های هاور روکش پس زمینه

جلوه‌های هاور روکش پس زمینه

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

دستورالعمل: برید به بخش> استایل> روکش پس‌زمینه> هاور> رنگ را #3820a3، شفافیت را 0.6 و مدت زمان جابجایی را 1 تنظیم کنید.

هاور تصویر

جلوه هاور box shadow

به واسطه‌ی ترکیب هاور box shadow و افزایش قابلیت انیمیشنی هاور، تیم المنتور تونست عکس‌ها را طوری به نمایش بذاره که انگار که از روی زمینه بلند شدن و برجسته هستند. اگر تمایل دارید، بهتون پیشنهاد می‌کنیم که این مقاله را در سایت SmashingMagazine مطالعه کنید؛ این مقاله شرح میده که چطور box shadow‌ها با توجه به جنبه‌های عملکردی متعلق به دیزاین و طراحی، می‌تونند بازدیدکننده را آگاه کنند.

دستورالعمل: برید به تصویر> پیشرفته> حاشیه> هاور> رنگ را #7F7E7F و محوشدگی را 30، گسترده را 6 و عمودی را 20 تنظیم کنید.

هاور موقعیت تصویر

هاور موقعیت تصویر

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

دستورالعمل: برید به بخش> استایل> پس‌زمینه> هاور> برای حالت عادی و هاور عکس مشترکی رو تعیین کنید و برای حالت هاور، موقعیت را رو پایین-مرکز ست کنید.

هاور خلاقانه

قبل و بعد جلوه‌ی هاور تصویر

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

دستورالعمل: برید به بخش> استایل> پس‌زمینه> برای عکس تو حالت نرمال سیاه و سفید را انتخاب کنید و برای نسخه‌ی هاور ورژن رنگی را ست کنید.

نحوه عملکرد المان هاور

المان هاور مؤلفه‌ی جدید المنتور نیست. قبل از این المان، این ویژگی تو یکسری ابزارک‌ها مثل ابزارک دکمه با قابلیت هاور انیمیشن وجود داشت.

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

استفاده از جلوه‌های هاور یا hover effects برای انواعی از ابزارک‌ها (مثل دکمه‌ها، آیکن های شبکه‌های اجتماعی، عنوان ها و تصاویر) یک گزینه‌ی عالی هست.

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

جابجایی هاور

چیز جالبی که راجع به ویژگی hover effect وجود داره اینه که جلوه‌ی هاور  با ملایمت و حالت جابجایی انیمیشنی، اتفاق میفته. برای هاور رنگ، رنگ‌ها به سادگی برنمی‌گردند، اما بجاش به رنگ جدید تغییر رنگ می‌دند. حتی شما می‌تونید مدت زمان جابجایی رنگ را تعیین کنید.

همین اثر انتقال در مورد موقعیت تصویر ، سایه‌های جعبه یا box shadow و حاشیه‌ها صادق هست. بیایید جلوتر بریم و با چند مثال مشخص برای کمک به شما در شروع کار، هر کدوم از این جلوه‌های هاور  را مرور کنیم.

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

توصیه عملی برای استفاده خلاقانه از جلوه‌ی هاور

پایین به چندتا از مورادی که المان هاور، به عنوان طراح وب به کارتون میاد اشاره کردیم:

بهبود محتوای راکد

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

رو CTA تأکید کنید

عناوین call to action را با جلوه‌های هاور به چشم بیارید تا شانس توجه بازدیدکننده به اون‌ها افزایش پیدا کنه.

با استفاده از هاور box shadow، شما می‌تونید دکمه‌ها را برجسته نشون بدید تا دکمه‌ها برای کلیلک توسط کاربر واضح‌تر به چشم بیان.

بخش‌های ویژه را تقویت کنید

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

نتیجه گیری

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

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

البته یکم طول میکشه که متوجه بشید که کدوم قسمت‌های سایت می‌تونند با جلوه‌های هاور بهبود پیدا کنند. بهتون پیشنهاد می‌کنیم که اگه با این ویژگی تعاملی تازه آشنا شید، اول خودتون تستش کنید و بعدش از این مقاله یا بقیه مقالات مرتبط الهام بگیرید. کلی مثال متنوع از جلوه‌ی هاور یا hover effect وجود داره. اگر بازخوردی در این زمینه داشتید می‌تونید با ما در اشتراک بذارید. برای اینکه بیشتر با المنتور و ویژگی‌های آشنا بشید آموزش المنتور را از دست ندید.

2 پاسخ

  1. سلام ببخشید یه سوال داشتم ، این کادر یک پیام بفرست رو با ویجت فرم طراحی کردین ؟

    1. درود بر شما،
      بله با ویجت فرم در المنتور پرو طراحی شده.

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

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