کــــار آفرینــــ بلاگــــ

بلاگیــــ برایــــ امروزیــــ ها

به این ۶ شیوه طراحی وب سایت در سال ۲۰۱۶ توجه بیشتری کنید(قسمت دوم)

به این ۶ شیوه طراحی وب سایت در سال ۲۰۱۶ توجه بیشتری کنید(قسمت دوم)

 

 

شیوه طراحی وب سایت۲۰۱۶ (٢)

 

به ادامه نکات شیوه طراحی وب سایت۲۰۱۶ می پردازیم.

 

۳- پارالاکس اسکرولینگ (‌Parallax Scrolling) در طراحی وب سایت


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

- مضر برای سئو سایت و بهینه سازی سایت .


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


- باعث تنزیل دادن اجرا می شود.


ناشی از استفاده ی سنگین و زیاد گرافیک ها و Javascript ها یک صفحه می تواند در بارگذاری گیر کند و این مسئله همچنین یک دردسر بزرگ برای کاربران موبایل است. مدت زمان بارگذاری صفحات پارالکس در موبایل به دلیل استفاده سنگین جاوا اسکریپت به سمت بالا میل می کند.


- تاثیر منفی بر روی کاربران.


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

 

06 The McWhopper Proposal

 

حتی اگر سایت به صورت کمی کارتونی باشد , کامل باشد و همان طور که به پایین صفحه اسکرول می کنید برایتان داستانی را بگوید. این قدرت Parallax Scrolling است . به شما این اجازه را می دهد که به صورت تاثیرگذاری داستانی را تنها با استفاده از عناصر گرافیکی بازگو کنید. وب سایت بالا , عکس ها و متن ها و ویدیوهای گنجانده شده درش دارد پس ما آن را با نرم افزار GT Metrix بررسی کردیم تا ببینیم چه طور در برابر بازرسی کامل و دقیق ما زمانی که به سرعت می رسیم مقابله کند.

 

07

 

همانطور که مشاهده می کنید, صفحه امتیاز A در سرعت صفحه و امتیاز C در Yshow راکسب کرده است که خیلی هم بد نیست اما اگر نگاهی به زمان بارگذاری صفحه بیندازیم , حدود 2 و ۱۸ ثانیه است که بسیار کندتر از بارگذاری خیلی از وب سایت های تبلیغاتی است که به آنها برخورد می کنید. (‌براساس GTMetrix میانگین سرعت بارگذاری صفحات 6.6 ثانیه می باشد‌)
براساس GTMetrix یک سایت علاوه بر موارد دیگر باید از مجموعه کاراکترها در برچسب متا نیز پرهیز کنید.

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

چند نکته ی دیگر :‌

- با تاخیر تجزیه و ترکیب کردن Javascript به طوری که برای نمونه ۳۱۳/۶ کیلوبایت از حجم Javascript در طول نخستین بارگذاری صفحه تجزیه و ترکیب می شود و به تاخیر انداختن آن کاهش مسدود کردن تغییر صفحه را در پی دارد.
-Yslow توصیه می کند که در هر جای ممکن سایت Cssو Javascript بهتر است کوچک شوند.
- سایت بهتر است از یک CDN* استفاده کند.

CDN مخفف کلمه Content Delivery Network می باشد.

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

 

۴- بارگذاری پیچیده صفحات نمایش وب سایت

 

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

 

08

 

در مثال بالا , تنها مجبور به تماشای یک فلش ویدیو که ۴۱ ثانیه طول می کشد می باشید. هیچ نشانه ای از این که این سایت در چه موردی است وجود ندارد و هیچ مسیری نیز موجود نمی باشد که کاربران را گیج و سردرگم رها می کند.

این طور می توانیم برداشت کنیم که سایت همانند چیزی شبیه فیلم سازی است . اما در واقع هیچ موردی برای تایید برداشت ما وجود ندارد. نماد سیب به شما این اجازه را می دهد که ویدیو را در iTunes باز کنید , اما URL ای که در iPad به آن وارد می شید پیغام Server Cant be Found را می دهد؟

 

09

 

دومین مثال بالا چیزی کسل کننده است و شما می بینید که به شمارشگری که به آهستگی به ۱۰۰درصد بالا می رود خیره شده اید.کسالت آور بودن آن همچنین زیاد می شود.

 

10

 

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

با این حال زمانی که بالاخره سایت بارگذاری می شود, کاملا مشخص و واضح است که سایت در چه موردی است و این سوال را برایتان پیش می آورد که به هیچ یک از آن کارها نیازی نبود.

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

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

 

11

 

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

 

12

 

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

 

 

با ما در مقالات دیگرکارآفرین بلاگهمراه باشید.

شیوه طراحی وب سایت۲۰۱۶ (١)

شیوه طراحی وب سایت۲۰۱۶ (٣)

١٤ روش طراحی وب سایت٢٠١٥ 

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