hostcode

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

1 ارسال در این موضوع قرار دارد

 

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

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

 

 

3.jpg

 

 

 

4.jpg

 

 

 

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

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

 

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

عناصر رایج

 

5.jpg

 

 

 

6.jpg

 

 

 

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

 

 

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

 

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

 

7.jpg

 

 

 

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

 

 

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

 

 

 

8.jpg

 

 

 

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

 

چرا کار می کند

 

9.jpg

 

 

10.jpg

 

 

 

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

 

 

 

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

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

 

 

به اشتراک گذاری این ارسال


لینک به ارسال
به اشتراک گذاری در سایت های دیگر

برای ارسال دیدگاه یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

برای اینکه بتوانید دیدگاهی ارسال کنید نیاز دارید که کاربر سایت شوید

ایجاد یک حساب کاربری

برای حساب کاربری جدید در سایت ما ثبت نام کنید. عضویت خیلی ساده است !

ثبت نام یک حساب کاربری جدید

ورود به حساب کاربری

دارای حساب کاربری هستید؟ از اینجا وارد شوید

ورود به حساب کاربری