روند طراحی سایت: اختلاف منظر ( Parallax) با پیچ و تاب

hostcode · 12 خرداد 1398

روند طراحی سایت: اختلاف منظر ( Parallax) با پیچ و تاب

2019/05/17

MAGBOT +

روند طراحی سایت: اختلاف منظر ( Parallax) با پیچ و تاب

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

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

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

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

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

عناصر رایج

بسیاری از این اختلاف منظر با طرح پیچیده چند عنصر رایج دارند.

۱- تایپوگرافی پررنگ: علامت بزرگ با انتخاب متن های جالب یک عامل رایج است.
۲- طراحی تک صفحه ای: برای به حداکثر رساندن تاثیر این تکنیک، این وب سایت ها اغلب در یک صفحه طراحی می شوند.
۳- رنگ روشن: رنگ الهام گرفته از طراحی مسطح و طرحی متریال یک عامل رایج است. رنگ روشن و جسورانه رایج هستند.
۴- تغییر انواع محتوا: محتوا در صفحه اغلب با اسکرول تغییر می کند، به طوری که کاربر ابتدا یک ابر متن، سپس یک «صفحه» متن، سپس تصاویر بیشتر و سپس یک فرم تماس دریافت می کند.
۵- داستان مداوم: در حالی که محتوا ممکن است در طول طراحی تغییر کند، یک داستان واحد عنصری است که همه آنها را با هم مرتبط می کند.
۶- تصاویر بزرگ: طراحان از تصاویر استفاده می کنند، تصاویر - به ویژه در صفحه اصلی - بسیار تاثیر گذار هستند. اکثر این وب سایت ها با یک ابر تصویر و یک نشانه برای حرکت آغاز می شود
۷- زبان ساده: از آنجا که چارچوب پشت این پس زمینه متحرک پیچیده است، همه چیز در اطراف آن تمایل به سادگی دارد، از جمله زبان سایت. این کنتراست پیچیدگی و سادگی سایت را آسان می کند تا کاربر به اندازه کافی آن را درک کند و به اندازه کافی جالب باشد تا به ادامه تعامل تشویق شود.

طراحی نوع جنبش

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

ترفند: تنها در یک زمان خاص، باید یک چیز حرکت کند. به نظر می رسد بسیار ساده است، درست؟

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

چرا کار می کند

چرا اختلاف منظر با پیچیدگی آغاز می شود؟

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

به همین دلیل است که ما احتمالا وب سایت های بیشتری را با استفاده از اختلاف منظر و زمینه های متحرک در آینده می بینیم. روندهای بی نظیر و تکنیک هایی که شما می توانید برای پروژ های مختلف استفاده کنید.

مقالات مرتبط