برنامه نویسی

پارالکس ، جدیدترین گرایش در طراحی وب سایت

پارالکس ، جدیدترین گرایش در طراحی وب سایت

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

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

شناخت و تشخیص گرایش.

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

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

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

المان های رایج.

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

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

تایپوگرافی بولد. یکی از فاکتورهای رایج استفاده از حروف بزرگ با طرح حروف جذاب است. بمنظور سهولت در خواندن و حداکثر تاثیر، طراحان از stroke serifs های ضخیم با طرح حروف بدیع استفاده میکنند.

رنگ های روشن. رنگ ها فاکتوری رایج در طراحی فلت و متریال هستند. گزینه های رایج عبارتند از بزرگ(big)، روشن(bright) و بولد((bold. پلت ها زیبا هستند اما اغلب رنگ هایی را شامل میشوند که تغییر در ظاهر پس زمینه را آسان میکنند.

تغییر در محتوا. محتوای سایت ها اغلب با اسکرول تغییر میکنند، به این ترتیب که کاربران ابتدا تصویر هیرو را میبینند سپس صفحه ای مملو از مطالب و بعد تصاویر بیشتر و درنهایت فرم یا کلید call to action. این ترتیب در محتوا بخوبی با حرکت اسکرول و پس زمینه جور است.

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

تصاویر بزرگ. معمولا تصاویر استفاده شده در صفحه اصلی بزرگتر از سایز معمولی و تاثیر گذار هستند. بیشتر سایت ها از تصاویر هیرو با سبک هدر که به اسکرول اشاره دارند استفاده میکنند.

دستورالعمل اسکرول. با معرفی هر چیز بدیع و نوین، ارائه ی دستورالعمل و نحوه ی استفاده از آن به کاربران الزامی است. بیشتر آنها برای اسکرول کردن دستورالعمل یا آیکونی ساده دارند که اغلب برای جلب توجه کاربران با انیمیشنی ساده توام میشود.

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

طراحی و انتخاب درست حرکت.

مهم ترین افکت در این گرایش جدید حرکت(movement) است. طراحان می بایست بین افکت های متحرک و پویا نمایی شده، اسکرول و سایر حرکت های اسکرین بالانس ایجاد کنند.

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

بنابراین آنچه باید انجام دهید این است که در حین اسکرول، سایر قسمت های متحرک را از حرکت باز دارید.

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

علت موفقیت آمیز بودن همراهی پارالاکس و توییست.

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

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

تو پیشگامیت، میتونی سوالات رو بپرسی و هم میتونی مطلب منتشر کنی.

پیشگام پلاس   پرسش و پاسخ



ثبت یک نظر

آدرس ایمیل شما منتشر نخواهد شد. فیلدهای الزامی مشخص شده اند *

  ورود / ثبت نام با حساب گوگل