Rollover چیست؟

رول‌اور چیست؟ (Rollover) و چرا باید بدانیم؟

سلام دوستان!

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

رول‌اور یعنی چی؟

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

فرض کنید توی یه منوی سایت، روی یه گزینه موس رو می‌برید و رنگش عوض میشه. این یه رول‌اور ساده است. یا مثلاً روی یه دکمه موس رو می‌برید و یه سایه دورش ایجاد میشه. باز هم رول‌اور!

چرا از رول‌اور استفاده می‌کنیم؟

چند تا دلیل خیلی خوب وجود داره که طراحان وب از رول‌اور استفاده می‌کنن:

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

رول‌اور چطوری کار می‌کنه؟

رول‌اور معمولا با استفاده از کدهای CSS و JavaScript پیاده‌سازی میشه. با CSS میشه ظاهر یه عنصر رو وقتی که موس روش میره تغییر داد. با JavaScript هم میشه کارهای پیچیده‌تری انجام داد، مثلا یه تصویر رو عوض کرد یا یه انیمیشن پخش کرد.

یه مثال ساده با CSS:

        
            .button {
                background-color: #4CAF50; /* رنگ اصلی دکمه */
                color: white;
                padding: 15px 32px;
                text-align: center;
                text-decoration: none;
                display: inline-block;
                font-size: 16px;
                cursor: pointer;
            }

            .button:hover {
                background-color: #3e8e41; /* رنگ دکمه وقتی موس روش میره */
            }
        
    

توی این مثال، یه کلاس CSS به اسم .button تعریف کردیم که ظاهر دکمه رو مشخص می‌کنه. بعدش، از یه شبه-کلاس به اسم :hover استفاده کردیم تا مشخص کنیم که وقتی موس روی دکمه میره، رنگ پس‌زمینه دکمه عوض بشه.

انواع مختلف رول‌اور

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

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

برای اینکه بهتر متوجه بشید، یه جدول با چند مثال میذاریم:

نوع رول‌اور	توضیحات	مثال
تغییر رنگ	وقتی موس روی دکمه میره، رنگش عوض میشه.	دکمه "ارسال" وقتی موس روش میره سبزتر میشه.
تغییر اندازه	وقتی موس روی عکس میره، کمی بزرگتر میشه.	تصاویر کوچیک گالری وقتی موس روشون میره بزرگتر میشن.
تغییر تصویر	وقتی موس روی یه آیکون میره، یه آیکون دیگه به جاش نشون داده میشه.	آیکون "خانه" وقتی موس روش میره به آیکون "خانه با سایه" تبدیل میشه.
نمایش متن اضافی	وقتی موس روی یه لینک میره، یه توضیح کوتاه نشون داده میشه.	روی یک لینک اسم درس وقتی موس رو قرار می دیم، می نویسد: 'برای دیدن سرفصل های این درس اینجا کلیک کنید'

نکات مهم در استفاده از رول‌اور

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

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

رول‌اور در موبایل

یه نکته خیلی مهم اینه که رول‌اور برای دستگاه‌هایی که صفحه لمسی دارن (مثل موبایل و تبلت) اصلا کاربرد نداره! چون کاربر موس نداره که روش نگه داره و ببینه چه تغییری ایجاد میشه. پس اگه دارید یه سایت رو برای موبایل طراحی می‌کنید، باید یه راه دیگه برای نشون دادن اطلاعات اضافی یا راهنمایی کاربر پیدا کنید. مثلا می‌تونید با یه ضربه روی صفحه (tap) اون اطلاعات رو نشون بدید.

جمع‌بندی

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

خوشحال میشم اگر سوءالی داشتید بپرسید.

موفق باشید!

کلیدواژه‌ها:

رول‌اور، طراحی وب، تجربه کاربری، CSS، JavaScript، hover

رول‌اور چه فایده ای داره؟

به کاربر نشون میده کدوم قسمت های سایت قابل کلیک کردنه، سایت رو جذاب تر میکنه و تجربه کاربری رو بهبود میبخشه.

آیا استفاده از رول‌اور برای موبایل مناسبه؟

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

با چه زبون هایی میشه رول‌اور درست کرد؟

معمولا با CSS و JavaScript درست میشه. با CSS میشه ظاهر یه عنصر رو وقتی موس روش میره تغییر داد، و با JavaScript میشه کارهای پیچیده تر مثل عوض کردن تصویر انجام داد.

چطوری میتونم یه رول‌اور ساده با CSS درست کنم؟

میتونید از شبه-کلاس :hover استفاده کنید. مثلاً button:hover { background-color: red; } باعث میشه رنگ پس زمینه دکمه وقتی موس روش میره قرمز بشه.

آیا رول‌اور برای همه وب‌سایت‌ها مناسبه؟

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