کانال تلگرام

استفاده از افکت های مکان نمای موس در طراحی سایت

تاریخ : ۱۷ فروردین ۱۳۹۸
نویسنده : حمید رضا ملکی
دسته بندی ها : رابط کاربری

هنگامی که نوبت به کوچکترین روند طراحی وب میرسد، دستکاری در مکان نمای موس یک برنده بی قید و شرط است. مکان نمای شما میتواند نقشی اساسی در طراحی سایت شما ایفا کند. نکته مهمی که در مورد مکان نمای موس وجود دارد این است که می توانید مطمئن باشید که کاربران نمیتوانند آن را نادیده بگیرند، زیرا بازدید کنندگان حتما به مکان نمای موس برای ارتباط با وب سایت شما احتیاج دارند.

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

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

Yukie Nail New York

در مورد سایت Yukie Nail New York ، مکان نما نه تنها به شکل یک حلقه توخالی است، بلکه به فرصتی برای تعامل با بوم در صفحه تبدیل شده است. با جابجایی مکان نما باعث می شود موج های زیبایی در  در صفحه پدیدار میشود که به طور قابل توجهی باعث میشود آب، واقعی به نظر برسد. پس چرا منتظر هستید به سایت Yukie Nail New York کنید و خودتان امتحان کنید.

mouse-cursor-effects1

Flixxo

Flixxo یک وب سایت اختصاصی برای پخش ویدئو است. در اینجا، مکان نمای موس شامل دایره ای زرد رنگ است که شامل مثلثی با لبه های صاف است  و به ما دکمه "Play" را یاد آوری میکند. از این اشکال برای زیبا کردن مکان نما و مرتبط کردن آن با سایت پخش ویدئو استفاده مناسبی شده است.

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

mouse-cursor-effects2

BLKOUT

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

mouse-cursor-effects3

Niccolo Miranda / Sarto Bikes

در اولین مثال یعنی Niccolo Miranda ، نشانگر ماوس بازدید کننده ها را در سراسر رابط تاریک هدایت می کند و مانند رقص نور خورشید به نظر می رسد. مکان نمای این سایت نیز خلاقانه طراحی شده است.

mouse-cursor-effects4

تیم پشت Sarto Bikes از دو نوع نما برای مکان نمای سایت خود استفاده میکنند. وقتی صفحه میشود به همراه مکان نمای موس یک لوزی کوچک حرکت میکند که زمانی که بر روی لینک و یا دکمه ای در سایت قرار میگیرد تبدیل به یک دایره بزرگ سفید رنگ میشود. زمانی که الماس سفید رنگ بر روی متون سفید قرار میگرید آنها را به رنگ مشکی نشان میدهد.

mouse-cursor-effects

مکان نما به عنوان یک دکور برای زیبایی

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

Ambitious Zevenbergen / Denton Design / Icone

Ambitious Zevenbergen دارای زیبایی شناسی زنانه است. این وبسایت توازنی را میان محتوای خود و محیط گرافیکی پدید آورده است. در این سایت، یک دایره صورتی بزرگ دوست داشتنی وجود دارد که دائما سعی در گرفتن یک نقطه کوچک دارد و زیبایی سایت را دوچندان کرده است. به علاوه با حرکت مکان نمای موس بر روی عناصر صفحه این دایره زیبا بزرگتر میشود.

mouse-cursor-effects

در وب سایت Denton Design، مکان نما دارای شکل تخم مرغ است که به خوبی با تصویر بزرگ پرنده ای که در جلوی آن قرار دارد، سازگاری پیدا کرده است. همچنین، رنگ آمیزی با طرح کلی همخوانی دارد.

mouse-cursor-effects7

تیم پشت Icone از این یک حلقه زرد رنگ برای حرکت به دنبال مکان نمای موس استفاده میکند. طراحی توخالی حلقه مکان نما همراه با گرافیک کلی سایت و تایپوگرافی همگی نشان دهنده یک هماهنگی خوب در طراحی است.

mouse-cursor-effects

مقالات پیشنهادی

مشاهده همه مقالات
ثبت دیدگاه

برای ارسال دیدگاه لازم است ابتدا وارد سایت شوید