نقش Hover در طراحی سایت
Hover در طراحی سایت
یکی از بخش های که همیشه برای افکت دادن بر روی المان های یک سایت مورد استفاده قرار می گیرد رویداد Hover می باشد این رویداد زمانی اتفاق می افتد که کاربر نشانگر موس را بر روی یک المان در سایت قرار می دهد و طراح بنا به موقعیت و المان مورد نظر انیمیشنی را اجرا می کند این کار همیشه جزء جدای ناپذیر یک طراحی سایت می باشد
hover یک pseudo-class می باشد که برای انتخاب و استایل دهی به عنصری که کاربر نشانه گر موس و یا وسیله دیگر را بر روی آن نگه داشته است, استفاده می شود.
از hover برای تعامل بهتر کاربر با عناصر استفاده می شود, به عنوان مثال می توان به کاربر اطمینان داد که عنصری که به آن اشاره می کند واقعا در وضعیت مورد اشاره بودن است. همینطور از این انتخابگر برای نمایش محتواهای مخفی و ثانویه استفاده می شود. به عنوان مثال برای نمایش زیرمنو ها استفاده از hover بسیار کاربردی و معمول است.
استفاده از hover برای دستگاهای لمسی توصیه نمی شود چون با مشکلاتی همراه خواهد بود.
نقش Hover در طراحی سایت
نقش مثبت و تاثیرگذار هاور (Hover) روی تجربه کاربری وب سایت باعث شده که به یک ویژگی پرطرفدار در طراحی سایت و بخصوص برای طراحی سایت های فروشگاهی تبدیل شود.هاورها به طور معمول برای دادن اطلاعات بیشتر به کاربر بلافاصله بعد از قرار گیری نشانگر موس (mouse) روی یک آیتم از سایت مورد استفاده قرار می گیرند.یکی از کاربردهای اصلی hover در طراحی وب سایت های فروشگاهی و تجاری برای هدایت کاربر به کلیک روی دکمه های فراخوان (Call To Action) مانند دکمه “اضافه به سبد خرید” می باشد که در نهایت باعث صرفه جویی در وقت کاربر و هدایت هرچه سریعتر وی به صفحات اصلی وب سایت می گردد.
بنابراین درک اهمیت و تاثیر مثبت این اِفِکت و بکارگیری آن هنگام طراحی وب سایت بسیار مهم است.البته هنگام طراحی سایت باید به این نکته توجه داشت که استفاده از hover منجر به ایجاد حواسپرتی و سردرگمی کاربران نشود.
بررسی ها نشان داده کابران نیز به هاورها علاقه دارند و آنها را یکی از عناصر مفید در طراحی وب سایت ها می دانند.
بررسی Hoverو تاثیر آن بر تجربه کاربری (UX)وب سایت:
· استفاده از هاورها در طراحی سایت فروشگاهی این امکان را به شما می دهد که خیلی سریع اطلاعات اضافی را در اختیار کاربر قرار دهید.اطلاعاتی نظیر ارائه توضیح مختصر ، تعداد محصول باقی مانده در انبار و ..
· طراحی hover می تواند به روش های گوناگون انجام شود.می توان hover را در طراحی سایت به گونه ای استفاده کرد که با قرارگرفتن موس ، آیتم مورد را نظر بزرگنمایی نماید یا میتواند اطلاعات متنی به کاربر منتقل کند.
· هاور می تواند به گونه ای طراحی شود که شکل و اندازه عکس را تغییر دهد ، رنگ آن را عوض کند یا آیتم را از یک زاویه دیگر نماش دهد
· معمولا اگر هاورها متناسب با رنگ های مورد استفاده در طراحی سایت بکار گرفته شوند تاثیر بهتری خواهند گذاشت.
· هنگام طراحی وب سایت می توان از Hover ها برای کمک به کاربر جهت وارد شدن به لینک یا یک صفحه دیگر از سایت (بجای استفاده از منوی سایت) استفاده کرد.
· هاورها یکی از بهترین روش ها برای هدایت کاربر به دکمه های فراخوان (Call To Action) محسوب می شوند.
استفاده و اهمیت hover در طراحی سایت تنها محدود به موارد بالا نمی شود.اتفاقات و فعالیت های بسیار زیادی را میتوان از طریق هاور آغاز کرد و این موارد تنها تعدادی از نمونه کارهایی است که بیشتر از سایرین در طراحی سایت مورد استفاده قرار می گیرند.چگونگی استفاده و بکارگیری از Hover در طراحی وب سایت بستگی به خودتان دارد اینکه چگونه می خواهید در کاربر احساس بهتری ایجاد کنید ، وی را تحت تاثیر قرار دهید و چگونه می خواهید ار اتلاف وقت او جلوگیری نمایید.
آموزش Hover با افزونه مداد زرد
برای اضافه کردن Hover به عناصر با افزونه مداد زرد، در محیط ویرایش افزونه مداد زرد، المان هایی که قصد دارید ویژگی Hover را به آن ها اضافه کنید انتخاب نمایید. برای آموزش ایجاد تغییرات CSS در سایت با افزونه مداد زرد کلیک کنید.
از منوی سمت راست، روی نام مخصوص المان کلیک کنید. وضعیت (States) آن را در حالت Hover قرار دهید. حال هر تغییری بر روی المان ایجاد کنید به عنوان Hover در نظر گرفته میشود.
برای مثال رنگ پس زمینه المان را وقتی موس روی آن قرار میگیرد تغییر دهید. البته می توانید برای المان از قسمت Shadow سایه تعیین کنید.
پس از ایجاد تغییر و ذخیره آن، با حرکت موس روی عناصر سایت در مرورگر میتوانید تغییرات افکت Hover را مشاهده نمایید.
همان طور که گفتیم افزودن افکت های Hover به عناصر سایت، باعث تعامل بیشتر کاربران میشود. ذکر این نکته خالی از لطف نیست که استفاده بیش از حد این افکت ها و برای تمامی المان ها نیز توصیه نمیشود.
دیدگاهتان را بنویسید