웹 디자인의 애니메이션 소개

/2019-09-21 22:41:32/
Yousra
/사업/

애니메이션은 더 이상 만화만을위한 것이 아닙니다. 전체 화면 동영상에서 작은 호버 효과에 이르기까지 모든 곳에서 애니메이션 터치가 나타납니다. 애니메이션은 트렌디하고 재미 있고 사용자 친화적입니다.

그리고 애니메이션 사용에 대한 장애물이 떨어지기 시작했습니다. 고속 연결을 사용하는 대부분의 사용자와 간단한 동작이나 바보 같은 GIF에서 몇 분의 작업에 이르기까지 모든 것이 쉽게 만들어지면서 애니메이션은 실용적이고 유용한 웹 디자인 도구가되었습니다.

Envato Elements 살펴보기

애니메이션 기초

스틸 또는 2 차원 형태로 생성 된 무언가가 "생명을 얻었고"물리 법칙을 따르는 방식으로 움직이는 것처럼 보일 때 애니메이션이 발생합니다. 그것은 만화 캐릭터가 화면을 가로 질러 걷는 방법이거나 Mac의 데스크탑에로드하는 동안 응용 프로그램 아이콘이 공처럼 튀는 방법입니다.

애니메이션과 거의 같은 단어는 Disney입니다. 1980 년대 초, 두 회사의 최고 애니메이터는 12 가지 애니메이션 원칙을 자세히 설명하는 책을 썼습니다. Frank Thomas와 Ollie Johnston의“Illusion of Life : Disney Animation”은 오늘날에도 애니메이션의 프레임 워크를 제공합니다.

스쿼시와 스트레치
예기
각색
똑바로 앞서 행동하고 포즈를 취하십시오
후속 조치 및 겹치는 조치
느리게 그리고 느리게
호
보조 조치
타이밍
과장
솔리드 드로잉
항소

웹 애니메이션은 종종 GIF, CSS, SVG, WebGL 또는 비디오로 저장됩니다. 단어 위에 마우스를 갖다 대면 전체 화면 비디오 또는 배경 이미지로 표시되는 간단한 밑줄부터 표시 될 수 있습니다. 다른 디자인 기법과 마찬가지로 애니메이션은 미묘하거나 얼굴에 있거나 피하기 어려울 수 있습니다.

2017 년의 새로운 트렌드

웹 디자인의 애니메이션은 우리가 매일 시작하는 것입니다. 디자인 트렌드로서 애니메이션의 핵심은 검토입니다. 작고 간단한 애니메이션은 흥미롭고 흥미 롭습니다. 사용자는 애니메이션에 대해 전혀 생각하지 않을 수도 있습니다. 대규모 애니메이션은 디자인에 도움이되는 재미있는 시각 자료가 될 수 있습니다. 그러나 너무 많은 다른 움직이는 효과를 섞기 시작하면 완전히 혼란을 일으킬 수 있습니다.

애니메이션을 트렌디하게 만드는 것은 사실주의입니다. 매우 평평하고 최소한의 스타일 디자인이 많은 오늘날의 디자인 환경에서 사용자는 수행 할 작업을 알려주는 더 많은 신호가 필요합니다. 단순한 애니메이션 비트는 미적 변화없이 사용자를 안내 할 수 있습니다. 시각적으로 단순하여 사용자에게 충분한 방향을 제공 할 수없는 계획을 설계하고 명령을 추가하는 데 도움이됩니다. 이 경우 애니메이션은 단순성과 유용성 사이에서 행복한 매체를 만듭니다.

이 추세에 기여하는 또 다른 요인은 디자인의 백엔드 및 사용자 엔드에있는 도구에 대한 액세스입니다. 더 복잡한 애니메이션을 위해 더 이상 Flash가 필요하지 않습니다. (그리고 여전히 Flash로 빌드하고 있다면 이제 멈출 시간입니다.) 여러 가지 다른 방법으로 달성 할 수 있습니다. 오늘날의 애니메이션은 웹 사이트 나 웹 서버를 허비하지 않으므로 사용자에게 효과를 빠르게로드 할 수 있으며 고속 인터넷 액세스 애니메이션을 사용하면 이벤트주기 중간에 멈출 수 있습니다.

큰 애니메이션과 작은 애니메이션

웹에 애니메이션을 적용 할 때 크고 작은 두 가지 범주로 이해하기 쉽습니다. (어떻게 보이는지 추측 할 수 있습니다.)

큰 애니메이션은 확장 가능한 애니메이션입니다. 런타임이 포함 된 비디오의 형태로, 대규모 애니메이션은 화면의 상당 부분을 채우고 짧은 영화의 특징입니다. 이 애니메이션은 전체 디자인에서 초점이됩니다. 사용자는 애니메이션이 움직이는 것을보기 위해 어떤 작업도 수행하지 않아도됩니다. Studio 메타 사이트를 자세히 보면 사본을 읽을 때 큰 이미지가 각각 확대됩니다.

작은 애니메이션은 웹 사이트와 상호 작용을 시작할 때 발견하는 작은 조각과 조각입니다. 이 divots는 호버 상태, 작은 장식 또는 사용 설명서 또는 도구의 형태 일 수 있습니다. 작은 애니메이션은 전체적인 미학에 영향을주는 악센트이지만 디자인의 초점이되지는 않습니다. Henry Brown의 사이트에서 간단한 애니메이션은 자세히 보면 그림의 눈이 실제로 깜박입니다.

애니메이션 사용시기

이 트렌드를 포함한 모든 트렌드의 문제점은 언제 사용해야하는지 아는 것입니다. 애니메이션은 디자인 툴 키트에는 큰 도움이 될 수 있지만 모든 프로젝트에 적용되는 것은 아닙니다. 애니메이션은 부드럽거나 매끄럽지 않고 매끄럽고 매끄러 워야합니다. 그것은 사용자를위한 목적을 제공해야하며 컨텐츠를 방해하지 않아야합니다.

애니메이션을 사용하는 주된 이유는 유용성을 높이기 위해서입니다. 간단한 애니메이션은 사람들이 웹 사이트 맵에서 어떤 버튼을 클릭하거나 다음에 어디로 가야하는지 이해하도록 돕는 훌륭한 안내 도구가 될 수 있습니다. 복잡한 스크롤 효과를 사용하는 많은 디자이너는 간단한 애니메이션을 사용자 도구와 함께 사용하여 스크롤하거나 클릭합니다. (이것은 간단한 수신 거부 아이콘 또는 "스크롤 다운"이라고 표시되는 단어의 모든 것을 포함합니다.)

유용성은 몇 가지 형태로 제공됩니다.

커뮤니케이션 기능 또는 웹 사이트 사용법
양식을 올바르게 채우거나 요소를 클릭 할 수 있음을 강조 표시하는 등 변경 사항 표시
흐름을 만들거나 사용자를 클릭 유도 문안으로 안내

애니메이션을 사용하는 두 번째 이유는 미적인 것입니다. 애니메이션은 훌륭한“장식”이 될 수 있습니다. 때로는 애니메이션 요소의 목표가 순전히 시각적이며 허용 가능한 용도입니다. 이 장식적인 애니메이션은 이야기를 말하거나 인터페이스와 사용자 사이의 감정적 인 연결을 만드는 데 도움이됩니다. 애니메이션의 목적은 시각적 인 관심을 불러 일으키고 사용자가 귀하의 사이트에 더 오랜 시간 참여하도록하는 것입니다.

순수하게 시각적 인 애니메이션을 만들 때는해야 할 일을 고려하십시오. 사용자가 원하는 연결에 대해 생각하십시오. 재미 있거나 놀랍습니까? 공유하도록 설계된 독창적 인 콘텐츠입니까? 순수한 비주얼조차도 목표가 있어야합니다.