اهمیت Scrolling در طراحی سایت

اسکرول کردن (Scrolling) در حال حاضر سهمی اساسی در طراحی برنامه ها و اپلیکیش ها دارد.اما سوال اینجاست که چگونه می توان از آن برای طراحی سایت هایی مدرن وحرفه ای استفاده نمود ؟

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

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

امروزه اغلب وب سایت ها از اسکرول عمودی (Vertical Scrolling)برای هدایت کاربر به صفحات داخلی سایت و یا برای خواندن ادامه مقالات استفاده می کنند.که می توان از انواع مختلف آن در طراحی وب سایت ها استفاده نمود.

اسکرول تمام صفحه (Full Page Scrolling) :

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

سایت هایی که بصورت اسکرول تمام صفحه طراحی شده اند از JavaScript و CSS3 برای ایجاد تغییرات بصری در عکس ها استفاده می کنند تا از این طریق یک سایت ریسپانسیور با جلوه های گرافیکی برجسته و از همه مهمتر سایتی که دارای ویژگی داستان سرایی است طراحی گردد.

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

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

اسکرول کردن پارالاکس (Parallax Scrolling) :

اسکرول پارالاکس یکی دیگر از شیوه های طراحی سایت های اسکرول است. اسکرول پارالاکس به بیان ساده بخشی از طراحی وب سایت است که در آن، هنگام اسکرول کردن بوسیله غلتک موس، محتوای پس زمینه (Background) – عکس یا هرچیز دیگری – نسبت به محتوای جلویی (Foreground) سایت با سرعت متفاوتی حرکت کند.طراحی این نوع اسکرول در سایت نیز به کمک JavaScript و CSS3 انجام می گیرد که امروزه از محبوبیت زیادی در میان طراحان وب سایت برخوردار شده است.

نمونه طراحی سایت با استفاده از Parallax Scrolling

نمونه طراحی سایت بدون استفاده از Parallax Scrolling

نکته منفی در مورد  Parallax Scrolling این است که هنوز در مرورگرهای موبایل بخوبی کار نمی کند.همچنین این روش نیاز به چندین تصویر با کیفیت بالا دارد که ممکن است باعث افزایش فضای اشغالی و حجم فایل های وب سایت گردد.البته می توان با مدیریت فایل ها و استفاده از این تکنولوژی در جاهای خاصی از سایت و نه تمام صفحات این مسئله را برطرف نمود.

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

اسکرول کردن نامحدود (Infinite Scrolling):

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

اسکرول های بی پایان را می توان در طراحی سایت هایی که محتوای آنها بی نهایت زیاد است مانند وب سایت های خبری و یا شبکه های اجتماعی استفاده نمود. وب سایت های توئیتر و فیسبوک نمونه هایی هستند که از این روش در طراحی سایت خود استفاده می کنند.در وب سایت scrollmagic.io می توانید نمونه طراحی شده این نوع اسکرول ها مشاهده نمایید.