academyIT
کاربر تازه وارد
- تاریخ عضویت
- 12 اکتبر 2015
- نوشته‌ها
- 63
- لایک‌ها
- 14
- سن
- 39
پارالاکس چیست ؟
تکنیک پارالکس باعث میشود که اجزای مختلف یک صفحه ی وبسایت با سرعت های مختلف حرکت کنند هنگامی که کاربر صفحه را اسکرول میکند. به طور خاص٫ افکت هنگامی که پشت زمینه صفحه وبسایت با سرعت متفاوتی از بقیه المان ها حرکت میکند با اسکرول کاربر.
بدون شک این پدیده افکت بصری خوشایندی ایجاد می کند و جای تعجب ندارد که بسیاری از طرح های وبسایت از آن استفاده میکنند.
پدیده اسکرول پارالکسی به سرعت در حال رشد میان طراحان است٫ به خاطر آن تجربه کاربری در زمینه مشاهده آنلاین به یک سطح جدید رسیده است. در نظر داشته باشید که وب دیزاینر ها و توسعه دهندگان مدام در حال کشف راه های جدید برای بهبود عملکرد٫ جلوه های تصویری زیبا تر و درگیر کردن کاربرهاشون از طریق همین روش پارالکس که در حقیقت پرچم دار جدید تجربه کاربری است.
- میزان جست و جو عبارت ”تکنیک پارالکس در طراحی وب“
نکات مثبت استفاده از دیزاین پارالکسی چیست؟
نکات منفی استفاده از دیزاین پارالکسی چیست؟
یادگیری ساختن دیزاین پارالکسی
بعد از اینکه آشنا شدین با تکنیک پارالکس و بعضی وبسایت هاییی که با موفقیت از این روش استفاده کردند٫حالا احتمالا براتون سوال شده که چطور از این سبک در دیزاین بعدیتون استفاده کنید؟ خوشبختانه استفاده کردن این سبک خیلی سخت نیست. در واقع چهار روش که فهمشون هم آسان است وجود دارد.
روش لایه ای (The Layered Method) - استفاده کردن از پس زمینه های متعدد که هر کدام قابلیت این رو دارند که مستقلانه افقی یا عمودی حرکت کنند٫ مطابق میلتون٫و حتی میتوانند بخش های کامل کننده یکدیگر هم باشند.
روش اسپرایتی (The Sprite Method) - بطور ساده اگر بخواهم توضیح بدهم٫استفاده کردن یک تصویر بزرگ که از بخش های مختلف ساخته شده که در محل های مختلف اشاره گر (Pointer) ماوس همان بخش های تشکیل دهنده را نشان میدهد. این سبک در منو های پیمایشی غالبا استفاده میشود.
روش الگوی تکرار شونده (The Repeating Pattern Method) - تصاویر اسکرولی ساخته شده که از مربع های جدا جدا ساخته شده که میتوانند روی هم شناور باشند بر روی یک تصویر زمینه.
روش محل تصویر (The Raster Method) - پیکسل ها در یک تصویر معمولااز بالا به پایین ترکیب (Composited) و تجدید (Refresh) میشوند همراه با اندکی تاخیربین ترسیم بین یک خط و خط بعدی خطوط ساخته می شوند.جمع بندی
پارالکس معمولا برای طراحی وبسایت خوب است بسته به این چطور به کار گرفته بشود. در کل٫ باعث افزایش جذابیت صفحه های وبسایت میشود و مخصوصا زمانیکه برای داستان سرایی استفاده بشود. اگر چه استفاده از این روش مشکلاتی را هم به همراه دارد اما اگر به آن ها توجه لازم را بکنید و در حین به کارگیری از آن ها دوری کنید٫ می توانید شرکت پذیری کاربرهایتان را در وبسایتتان افزایش بدهید.
در مقاله بعدی به شما نشان خواهیم داد چگونه یک وبسایت ساده پارالکسی بسازید.
تعدادی از وب سایت هایی که به روشی مناسب از پارالاکس استفاده کرده اند :
http://mariokart8.nintendo.com
http://unfold.no/
http://brokentwill.co.uk/
http://www.bettybetty.de/
http://whois.wildlife.la/
http://www.honda.com.au/cars/models/cr-v.html
نویسنده : نریمان رجبی
تکنیک پارالکس باعث میشود که اجزای مختلف یک صفحه ی وبسایت با سرعت های مختلف حرکت کنند هنگامی که کاربر صفحه را اسکرول میکند. به طور خاص٫ افکت هنگامی که پشت زمینه صفحه وبسایت با سرعت متفاوتی از بقیه المان ها حرکت میکند با اسکرول کاربر.
بدون شک این پدیده افکت بصری خوشایندی ایجاد می کند و جای تعجب ندارد که بسیاری از طرح های وبسایت از آن استفاده میکنند.
پدیده اسکرول پارالکسی به سرعت در حال رشد میان طراحان است٫ به خاطر آن تجربه کاربری در زمینه مشاهده آنلاین به یک سطح جدید رسیده است. در نظر داشته باشید که وب دیزاینر ها و توسعه دهندگان مدام در حال کشف راه های جدید برای بهبود عملکرد٫ جلوه های تصویری زیبا تر و درگیر کردن کاربرهاشون از طریق همین روش پارالکس که در حقیقت پرچم دار جدید تجربه کاربری است.
- میزان جست و جو عبارت ”تکنیک پارالکس در طراحی وب“
نکات مثبت استفاده از دیزاین پارالکسی چیست؟
- دیزاین پارالکس فرصت بسیار خوبی است برای:
- باعث متعجب شدن بازدید کنندگان شما به خاطر انیمیشن موجود و عمق در تصویر میشود
- شیوه داستان گویی برای راهنمایی بازدید کنندگان در وبسایت میشود
- باعث میشود که زمان بازدید وبسایت شما توسط کاربران شما میشود چون تشویق میشوند که تمام صفحه وبسایت رو اسکرول کنند
- باعث کنجکاوی کاربران میشود
- هدایت میکند کاربران را به قسمتی از وبسایت که کاربر باید عملیاتی انجام دهد
- باعث استحکام اعتبار وبسایت میشود به واسطه ی محیط خلاقانه
نکات منفی استفاده از دیزاین پارالکسی چیست؟
- با وجود همه ی این فایده های دیزاین پارالکسی برای وبسایت ها٫جلوه های منفی هم دارد. بیشتر این مشکلات به این دلیل است که اکثر وبسایت های پارالکسی فقط یک صفحه ی طولانی دارند که به شدت برای سئو (SEO) وبسایت و سرعت لود آن مضر است. برخی از مشکلات استفاده از پارالکس در طراحی وبسایت عبارتند از:
- سئو (SEO) وبسایت صدمه میبیند٫ چون وبسایت هایی که فقط یک صفحه دارند فقط یک مجموعه از اطلاعات مِتا (Meta) را حق استفاده دارند٫ و همینطور فقط یک تگ h1 موثر و تنها یک URL
- تعداد زیاد تصاویر و اطلاعات در یک صفحه باعث میشود که زمان لود وبسایت طولانی میشود٫ امکان دارد کاربران که حوصله اشان سر رفته حتی صبر نکنند که وبسایت بطور کامل لود شود و صفحه را ندیده ترک کنند
- سازگاری با طراحی واکنش گرا (Responsive) و طراحی موبایل (Mobile Design) ندارند
- پیوند صفحات داخلی (Internal Page Linking) در کل وبسایت ندارند
- بیش از اندازه از این سبک در وبسایتتون استفاده نکنید برای اینکه صفحه تون پیچیده بشود
- برای بیان کردن داستان های تصویری استفاده کنید
- با استفاده از لایه ها ی مختلف تصاویر به صفحه تون عمق بدهید که جذاب تر بشود
- قسمت هایی از سایت که نیاز دارید کاربر کاری انجام دهد با این تکنیک توجه اشون رو جلب کنید
یادگیری ساختن دیزاین پارالکسی
بعد از اینکه آشنا شدین با تکنیک پارالکس و بعضی وبسایت هاییی که با موفقیت از این روش استفاده کردند٫حالا احتمالا براتون سوال شده که چطور از این سبک در دیزاین بعدیتون استفاده کنید؟ خوشبختانه استفاده کردن این سبک خیلی سخت نیست. در واقع چهار روش که فهمشون هم آسان است وجود دارد.
روش لایه ای (The Layered Method) - استفاده کردن از پس زمینه های متعدد که هر کدام قابلیت این رو دارند که مستقلانه افقی یا عمودی حرکت کنند٫ مطابق میلتون٫و حتی میتوانند بخش های کامل کننده یکدیگر هم باشند.
روش اسپرایتی (The Sprite Method) - بطور ساده اگر بخواهم توضیح بدهم٫استفاده کردن یک تصویر بزرگ که از بخش های مختلف ساخته شده که در محل های مختلف اشاره گر (Pointer) ماوس همان بخش های تشکیل دهنده را نشان میدهد. این سبک در منو های پیمایشی غالبا استفاده میشود.
روش الگوی تکرار شونده (The Repeating Pattern Method) - تصاویر اسکرولی ساخته شده که از مربع های جدا جدا ساخته شده که میتوانند روی هم شناور باشند بر روی یک تصویر زمینه.
روش محل تصویر (The Raster Method) - پیکسل ها در یک تصویر معمولااز بالا به پایین ترکیب (Composited) و تجدید (Refresh) میشوند همراه با اندکی تاخیربین ترسیم بین یک خط و خط بعدی خطوط ساخته می شوند.جمع بندی
پارالکس معمولا برای طراحی وبسایت خوب است بسته به این چطور به کار گرفته بشود. در کل٫ باعث افزایش جذابیت صفحه های وبسایت میشود و مخصوصا زمانیکه برای داستان سرایی استفاده بشود. اگر چه استفاده از این روش مشکلاتی را هم به همراه دارد اما اگر به آن ها توجه لازم را بکنید و در حین به کارگیری از آن ها دوری کنید٫ می توانید شرکت پذیری کاربرهایتان را در وبسایتتان افزایش بدهید.
در مقاله بعدی به شما نشان خواهیم داد چگونه یک وبسایت ساده پارالکسی بسازید.
تعدادی از وب سایت هایی که به روشی مناسب از پارالاکس استفاده کرده اند :
http://mariokart8.nintendo.com
http://unfold.no/
http://brokentwill.co.uk/
http://www.bettybetty.de/
http://whois.wildlife.la/
http://www.honda.com.au/cars/models/cr-v.html
نویسنده : نریمان رجبی