01-16-2018، 09:46 AM
رشد چشمگیر علم طراحی سایت و استفاده از تکنولوژی های مختلف در آن با عث شده تا طراحی سایت ، سلیقه ای زیادی را بتواند برطرف کند . در این مقاله قصد داریم تا شما را با نکات استفاده از بک گراند طراحی سایت آشنا کنیم .
در ادامه به ده نکته استفاده از ویدیو در طراحی سایت میپردازیم :
۱) فایل ویدیویی خود را تا جاییکه می‌توانید فشرده کنید
زیاد بودن حجم ویدیوی پس زمینه، زمان بارگذاری سایت را بالا می‌برد. برای جلوگیری از این مشکل باید ویدیو را با پایین ترین نرخ بیت فشرده‌سازی کنید. البته می‌توانید از ویدیو های با کیفیت تری نیز استفاده نمایید. ولی نباید سرعت بارگذاری صفحه را قربانی کیفیت ویدیو کنید. شرایط مورد نظر خود را به خوبی بسنجید و بهترین فیلم را انتخاب نمایید. در انتخاب حجم ویدیو سرعت اینترنت کاربران را نیز در نظر بگیرید.
۲) یک overlay مناسب روی ویدیو پیاده‌سازی کنید
ممکن است برای بالا بردن سرعت بارگذاری سایت خود از یک ویدیوی با کیفیت پایین استفاده کرده باشید. در اینصورت از یک overlay برای پنهان کردن کیفیت پایین آن استفاده نمایید.
برای اینکار باید یک div بعد از تعیین ویدیوی خود بیاورید یا اینکه از شبه کلاس ::after استفاده کنید. با استفاده از خاصیت pointer-events: none; اطمینان حاصل کنید که ویدیو با کلیک راست کاربر متوقف نمی‌شود. استفاده از یک Overlay مناسب باعث می‌شود تا کیفیت پایین ویدیو دیده نشود.
۳) طول ویدیو را محدود کنید
طول ویدیو را کم انتخاب کنید تا بدون توقف نمایش داده شود. البته طول ویدیو نباید به اندازه‌ای کم باشد که پشت سرهم نمایش داده شده و کاربر را اذیت کند.
بهتر است مدت زمان ویدیوی شما بین ۳۰ تا ۴۰ ثانیه باشد. سعی کنید سایز ویدیو نیز از ۲ مگابایت بیشتر نباشد. می‌توانید ویدیو های جالبی را از سایت html5backgroundvideo برای این منظور انتخاب کنید.
۴)از حرکات بیش از اندازه اجتناب کنید
همانطور که از نام ویدیوهای پس زمینه بر می‌آید، این ویدیوها باید در پس زمینه‌ی سایت اجرا شوند. به این معنی که ویدیوی انتخابی شما نباید به گونه‌ای باشد که توجه کاربر را از محتوای اصلی سایت دور کند. حرکت‌های سریع و پرش‌های مداوم توجه کاربر را به خود جلب می‌کند.
۵)متن با ویدیو هماهنگی داشته باشد
اگر قرار است روی ویدیوی پس زمینه متنی نمایش داده شود، باید قابل خواندن باشد. می‌توانید با استفاده از یک لایه‌ی overlay متن را متمایز کنید. یا اینکه رنگ متن را تغییر دهید تا قابل خواندن باشد. مطمئن شوید که متن و ویدیو خیلی با هم متضاد نباشد و چشم کاربر را اذیت نکند.
۶)ابعاد مناسبی را برای ویدیو انتخاب کنید
درCSS3 ویژگی به نام ظرفیت پس زمینه برای تصاویر مطرح می‌شود که برای ویدیو ها نیز صادق است. به این معنی که سایز یک تصویر یا ویدیوی پس‌زمینه باید به اندازه‌ای باشد که جایگاه خود را پر کند. خاصیت object-fit همین کار را برای شما انجام خواهد داد. با استفاده از این خاصیت می‌توانید مطمئن شوید که ابعاد ویدیو با ابعاد محلی که قرار است در آن قرار بگیرد، همخوانی دارد.
۷) دیوایس‌های کاربران را در نظر بگیرید
پس زمینه‌های ویدیویی اغلب مورد پسند کاربران قرار می‌گیرد. با این وجود ممکن است این ویدیوها روی برخی از دستگاه‌ها اجرا نشود. برای همین باید شرایطی را در نظر بگیریم که دستگاه‌های مختلف قادر به پخش ویدیوی شما باشند. معمولا طراحان عکسی را به صورت پیش فرض در نظر می‌گیرند تا در صورتی که فیلم قابل نمایش نباشد برای کاربر نمای داده شود.
۸) ویدیو در یک حلقه نشان داده نشود
اگر ویژگی حلقه را در طراحی سایت خود در نظر بگیرید، ویدیوی پس زمینه‌ی شما تا زمانیکه صفحه را نبسته‌اید، پشت سر هم نمایش داده خواهد شد. این کار به سی پی یو دیوایس کاربر آسیب می‌زند و حتی ممکن است سرعت صفحات دیگر را پایین بیاورد.
برای رفع این مشکل می‌توانید از یک قطعه کد کوتاه و ساده برای توقف ویدیو استفاده کنید. در واقع ویدیو بعد از چندین بار که نمایش داده می‌شود، متوقف می‌شود.
۹) یک دکمه مکث برای ویدیو در نظر بگیرید
ممکن است کاربر بخواهد ویدیوی در حال پخش را متوقف کند. برای پشتیبانی از این حالت می‌توانید با استفاده از جاوا اسکریپت یک دکمه‌ی مکث / نمایش را به ویدیوی خود اضافه کنید و محل این دکمه را بر اساس خواست خود تغییر دهید.
۱۰) ابتدای فیلم را آهسته انتخاب کنید
ویدیو باید به گونه‌ای باشد که حواس کاربر را پرت نکند. یک حرکت ناگهانی در ابتدای نمایش فیلم باعث می‌شود تا کاربر محتوای اصلی سایت را نبیند! برای جلوگیری از این مشکل می‌توانید ویدیویی انتخاب کنید که شروع آرامی داشته باشد یا اینکه از تکنیک محو شدن برای ابتدای فیلم استفاده کنید.
در ادامه به ده نکته استفاده از ویدیو در طراحی سایت میپردازیم :
۱) فایل ویدیویی خود را تا جاییکه می‌توانید فشرده کنید
زیاد بودن حجم ویدیوی پس زمینه، زمان بارگذاری سایت را بالا می‌برد. برای جلوگیری از این مشکل باید ویدیو را با پایین ترین نرخ بیت فشرده‌سازی کنید. البته می‌توانید از ویدیو های با کیفیت تری نیز استفاده نمایید. ولی نباید سرعت بارگذاری صفحه را قربانی کیفیت ویدیو کنید. شرایط مورد نظر خود را به خوبی بسنجید و بهترین فیلم را انتخاب نمایید. در انتخاب حجم ویدیو سرعت اینترنت کاربران را نیز در نظر بگیرید.
۲) یک overlay مناسب روی ویدیو پیاده‌سازی کنید
ممکن است برای بالا بردن سرعت بارگذاری سایت خود از یک ویدیوی با کیفیت پایین استفاده کرده باشید. در اینصورت از یک overlay برای پنهان کردن کیفیت پایین آن استفاده نمایید.
برای اینکار باید یک div بعد از تعیین ویدیوی خود بیاورید یا اینکه از شبه کلاس ::after استفاده کنید. با استفاده از خاصیت pointer-events: none; اطمینان حاصل کنید که ویدیو با کلیک راست کاربر متوقف نمی‌شود. استفاده از یک Overlay مناسب باعث می‌شود تا کیفیت پایین ویدیو دیده نشود.
۳) طول ویدیو را محدود کنید
طول ویدیو را کم انتخاب کنید تا بدون توقف نمایش داده شود. البته طول ویدیو نباید به اندازه‌ای کم باشد که پشت سرهم نمایش داده شده و کاربر را اذیت کند.
بهتر است مدت زمان ویدیوی شما بین ۳۰ تا ۴۰ ثانیه باشد. سعی کنید سایز ویدیو نیز از ۲ مگابایت بیشتر نباشد. می‌توانید ویدیو های جالبی را از سایت html5backgroundvideo برای این منظور انتخاب کنید.
۴)از حرکات بیش از اندازه اجتناب کنید
همانطور که از نام ویدیوهای پس زمینه بر می‌آید، این ویدیوها باید در پس زمینه‌ی سایت اجرا شوند. به این معنی که ویدیوی انتخابی شما نباید به گونه‌ای باشد که توجه کاربر را از محتوای اصلی سایت دور کند. حرکت‌های سریع و پرش‌های مداوم توجه کاربر را به خود جلب می‌کند.
۵)متن با ویدیو هماهنگی داشته باشد
اگر قرار است روی ویدیوی پس زمینه متنی نمایش داده شود، باید قابل خواندن باشد. می‌توانید با استفاده از یک لایه‌ی overlay متن را متمایز کنید. یا اینکه رنگ متن را تغییر دهید تا قابل خواندن باشد. مطمئن شوید که متن و ویدیو خیلی با هم متضاد نباشد و چشم کاربر را اذیت نکند.
۶)ابعاد مناسبی را برای ویدیو انتخاب کنید
درCSS3 ویژگی به نام ظرفیت پس زمینه برای تصاویر مطرح می‌شود که برای ویدیو ها نیز صادق است. به این معنی که سایز یک تصویر یا ویدیوی پس‌زمینه باید به اندازه‌ای باشد که جایگاه خود را پر کند. خاصیت object-fit همین کار را برای شما انجام خواهد داد. با استفاده از این خاصیت می‌توانید مطمئن شوید که ابعاد ویدیو با ابعاد محلی که قرار است در آن قرار بگیرد، همخوانی دارد.
۷) دیوایس‌های کاربران را در نظر بگیرید
پس زمینه‌های ویدیویی اغلب مورد پسند کاربران قرار می‌گیرد. با این وجود ممکن است این ویدیوها روی برخی از دستگاه‌ها اجرا نشود. برای همین باید شرایطی را در نظر بگیریم که دستگاه‌های مختلف قادر به پخش ویدیوی شما باشند. معمولا طراحان عکسی را به صورت پیش فرض در نظر می‌گیرند تا در صورتی که فیلم قابل نمایش نباشد برای کاربر نمای داده شود.
۸) ویدیو در یک حلقه نشان داده نشود
اگر ویژگی حلقه را در طراحی سایت خود در نظر بگیرید، ویدیوی پس زمینه‌ی شما تا زمانیکه صفحه را نبسته‌اید، پشت سر هم نمایش داده خواهد شد. این کار به سی پی یو دیوایس کاربر آسیب می‌زند و حتی ممکن است سرعت صفحات دیگر را پایین بیاورد.
برای رفع این مشکل می‌توانید از یک قطعه کد کوتاه و ساده برای توقف ویدیو استفاده کنید. در واقع ویدیو بعد از چندین بار که نمایش داده می‌شود، متوقف می‌شود.
۹) یک دکمه مکث برای ویدیو در نظر بگیرید
ممکن است کاربر بخواهد ویدیوی در حال پخش را متوقف کند. برای پشتیبانی از این حالت می‌توانید با استفاده از جاوا اسکریپت یک دکمه‌ی مکث / نمایش را به ویدیوی خود اضافه کنید و محل این دکمه را بر اساس خواست خود تغییر دهید.
۱۰) ابتدای فیلم را آهسته انتخاب کنید
ویدیو باید به گونه‌ای باشد که حواس کاربر را پرت نکند. یک حرکت ناگهانی در ابتدای نمایش فیلم باعث می‌شود تا کاربر محتوای اصلی سایت را نبیند! برای جلوگیری از این مشکل می‌توانید ویدیویی انتخاب کنید که شروع آرامی داشته باشد یا اینکه از تکنیک محو شدن برای ابتدای فیلم استفاده کنید.