تاثیر انیمیشن در طراحی سایت

[نه فقط به برای زیبایی و چیدمان، بلکه به عنوان جز جدایی ناپذیر UX]

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

بسیاری مواقع طراحان  فقط برای بهبود و ایجاد زواید سایت، دستی در روند پروژه طراحی وبسایت دارند. این باعث می شود که من احساس کنم که کار من فرعی و ثانوی بوده. یا اگر زمان کافی برای انیمیشن سازی سایت نباشد، به من گفته می شود که عنصر دیگری را که فکر می کنم مهم است و یا به عنوان انیمیشن برای وب سایت خوب است،انتخاب کنم. خب، سئوال این است که٬ آیا واقعا آن “انیمیشن خوبی برای سایت بوده است”؟!!

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

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

مغز و چشم های ما برنامه ریزی شده اند تا به اشیاء متحرک توجه کنند-که این یک واکنش غیراردای است. شعبده باز ها از حرکت دستان خود برای اجرای ترفند استفاده می کنند. مشابه آن هم انیمیشن می تواند به چشم کمک کند که ببنید یک شیئ جدید از کجا می آید و شیئ قبلی کجاست. حرکت چیز زایدی نیست، بلکه لازم است و می تواند از  طریق عینیت بخشی و تجسم، تجربه کاربری (user experience) را بهبود ببخشد.

انیمیشن رابط (Interface animation) به شیوه های گوناگون خلاء ادراکی را پر می کند.

• انیمیشن در طراحی سایت، برای ایجاد اثر متقابل و خلق یک محرک تصویری حیاتی است، که باعث می شود کاربر اطلاعات جدید را در تغییر وضعیت رابط درک کند.
• ساخت انیمیشن برای سایت، بازخورد بصری (visual feedback) را بهبود می بخشد و راهنمای مناسبی برای موارد بعدی است.
• انیمیشن انتقال منطقی فضایی بین صفحات (spatially logical transitions) ایجاد می کند. طبق قوانین فیزیک، عناصر متحرک به دلیل آشنا و قابل پیش بینی بودن، به مردم کمک می کنند به راحتی رابط کاربری رابه خاطر بسپارند.
• نسبت به هر نوع تصویر ثابتی، سبک های انمیشینی ارتباط شخصیتی بیشتری با محتوا ایجاد می کنند.
• انیمیشن های خوش ساخت دل کاربرها را بدست می آورد، کمک می کنند کاربران ارتباط بهتری با محصول برقرار کنند و تجربه بسیار دلپذیرتر و دوست داشتنی تری داشته باشند.

محبوبیت دستگاه های صفحه کوچک در دنیای امروز، ما را به سمت پیاده سازی رابط هاری کاربری اصلی در فضاهای کوچک می برد. تشخیص ارتباط فضایی بین لایه ها، تب های کشویی (sliding tabs) و زوم – بدون اینکه کار طراح حرکت که ارتباط موثر ایجاد کند- برای کاربر گیج کننده و آزاردهنده خواهد بود. همانند تایپوگرافی، که می تواند برای خواندن و اضافه کردن حالتی به محتوا کابرد عملی داشته باشد، انیمیشن فراتر رفته و به “کار”، در هماهنگی و هارمونی با طراحی شکل می دهد. این سطح از توجه به جزییات -هم در تایپوگرافی و هم در انیمیشن- است که یک پروژه طراحی وبسایت فوق العاده را از یک پروژه طراحی وبسایت متوسط، متمایز می کند.

برای اطلاعات بیشتر، مطالعه Jedi Principles of UI Animation نوشته Kit Oliynyk را پیشنهاد می کنم.

همچنین ویدئوی  Illusion of LifeT، ۱۲ اصل بنیادین انیمیشن اثر Frank Thomas و Ollie Johnston محصول Walt Disney را تماشا کنید.

نویسنده: Vanessa Nunes

منبع: http://www.awwwards.com

مقالات مرتبط:

آموزش طراحی وبسایت واکنش گرا – با اولویت نسخه دسکتاپ ۲۰۱۷ اصول طراحی سایت – ۲۰۱۷ بهترین شیوه های طراحی وب سایت واکنش گرا (کتاب) طراحی وب سایت حرفه ای

طراحی خلاقانه دموی وبسایت شما به صورت رایگان و در ۷ روز

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

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

اگر شما طراحی ما را دوست داشتید و مایل بودید با یکدیگر کار کنیم، آن وقت همکاری ما آغاز می گردد.

در غیر این صورت تنها حقوق استفاده از طراحی انجام شده برای Nexar محفوظ خواهد بود.

بیشتر بدانید