완벽한 웹 애니메이션 디자인 가이드

믿거 나 말거나, 당신은 당신의 사이트 방문자가 주변에 머 무르도록 설득 할 시간이 없습니다. 창문은 실제로 생각보다 훨씬 짧습니다.

본질적으로, 그것은 단지 걸립니다 0.05 초 방문자가 의견을 작성하기 위해 페이지가로드 된 후 보다 구체적으로 말하면 50 밀리 초로 해석됩니다. 놀랍도록 짧습니까?

좋아, 그들 중 일부는 떠날 것이다. 그러나 다른 사람들은 머물기로 선택할 수도 있습니다.

그런 다음 기본적으로 노출 단계가 진행됩니다. 10 초간 지속. 사이트에서 견고한 사이트를 관리 할 수없는 경우 전환 프로세스를 시작하기 전에 대부분의 트래픽이 손실됩니다. 그들은 단지 뒤로 또는 닫기 버튼을 누르십시오.

그리고 당신이 그들을 복구 할 희망이 있다면, 여기에 어려운 진실이 있습니다. 그들 중 88 % 경험이 좋지 않으면 웹 사이트로 돌아올 수 없습니다.

그러나 잠시만 기다려주십시오. 웹 사이트에 착륙 한 후에 웹 트래픽을 유지하는 것은 누구의 일입니까?

물론 사이트의 콘텐츠 관리자를 비난하는 것은 당연합니다. 그리고 당신이 옳을 수도 있습니다. 그러나 부분적으로 만.

그것은 모두 웹 디자이너로 시작한다는 것이 밝혀졌습니다. 실제로 광범위한 소비자 피드백을 광범위하게 조사한 연구 결과는 부정적인 것의 94 % 디자인 관련되었습니다.

이것은 무엇을 의미할까요?

우선, 이스케이프가 없습니다. 주요 책임은 귀하에게 있습니다. 이전 기사에서 다룬 모든 디자인 모범 사례를 구현하는 것 외에도 PR 모자를 착용하고 트래픽과 효과적으로 연결되는 요소를 고려해야합니다.

나는 웹 애니메이션과 같은 것들에 대해 이야기하고 있습니다.

그리고 우리는 왜 그것을 구체적으로 제안합니까?

글쎄, 그것이 곧 공개 할 것입니다. 이 가이드는 웹 애니메이션의 모든 중요한 측면을 안내합니다. 먼저, 기본을 살펴 보자 ...

웹 애니메이션의 기초

좋아하는 만화 캐릭터가 화면을 가로 질러 걷는 모습을 그려보세요. 또는 장치를 다시 시작할 때 화면에서 전화기 로고가 춤추는 것일 수 있습니다. 그들의 공통점이 무엇입니까?

글쎄, 둘 다 애니메이션의 기본 예입니다.

애니메이션은 기본적으로 스틸 요소가 "생명을 얻었을 때"발생합니다. 그런 다음 어떤 형태의 움직임을 보이기 시작합니다.

이 연습이 언제 시작되었는지 정확히 알 수 없습니다. 그러나 우리는 첫 애니메이션 영화 역사상 한 세기 전에 만들어졌습니다. 기술의 진보에 힘 입어 그 이후로 트렌드는 상당히 광범위하게 발전했습니다.

그러나 한 가지 중요한 것은 애니메이션의 원리입니다. 사실, 디즈니의 올리 존스턴과 프랭크 토마스는 나중에 그들의 책에서“인생의 환영 : 디즈니 애니메이션". 전체 목록은 다음과 같습니다.

  • 항소
  • 솔리드 드로잉
  • 과장
  • 타이밍
  • 보조 조치
  • 느리게 그리고 느리게
  • 후속 조치와 중복 조치
  • 똑바로 앞서 행동하고 포즈를 취하십시오
  • 준비
  • 기대
  • 스쿼시와 스트레치

XNUMX 개는 여전히 웹에 비디오, WebGL, SVG, CSS 및 GIF로 게시 된 애니메이션을 비롯하여 애니메이션 디자인을위한 프레임 워크를 제공합니다.

이제 웹 애니메이션은 글자 위로 마우스를 가져 가면 복잡한 멀티 레이어 시리즈의 전체 화면 비디오에 표시되는 하이라이트만큼 간단 할 수 있습니다. 다시 말해, 미묘한 접근 방식을 취하거나 비명을 지르는 지배적 인 애니메이션으로 모두 나가기를 선택할 수 있습니다. 그것은 모두 상황에 달려 있습니다.

그러면 언제 애니메이션을 사용해야합니까?

언제 웹 애니메이션을 사용해야합니까?

물론 귀엽습니다. 그리고 사이트 레이아웃에 흥미로운 추가 사항이 될 것입니다.

그러나, 당신은 무엇을 알고 있습니까? 그 이후의 효능 수준은 완전히 다릅니다. 따라서 애니메이션이 모든 웹 사이트 프로젝트에 적합하지는 않습니다. 그리고 가장 중요한 것은 그것들을 우연히 채택하는 것은 나쁜 생각 일 것입니다.

그냥 그렇게 온라인 소비자의 46 % 전반적인 시각적 호소력과 미학을 바탕으로 사이트의 신뢰성을 판단합니다. 잘못 설계된 애니메이션 프레임 워크로 구성 할 수는 없습니다. 동시에 애니메이션을 활용하지 못해 골든 전환 기회를 지속적으로 놓치는 것은 불행한 일입니다.

그렇다면 언제 활용해야합니까?

음, 여기 있습니다. 웹 애니메이션은 주로 관심을 끌거나 탐색 프로세스를 통해 사용자를 도와 유용성을 향상시켜야 할 때 이상적입니다.

어떻게?

일반적으로 2.6 초 첫인상에 주로 영향을주는 웹 사이트 섹션을 방문하는 방문자의 눈을 사로 잡습니다. 그러나 애니메이션을 능숙하게 사용하면 사이트의 가장 중요한 영역에 즉시주의를 집중시켜 작업 속도를 높일 수 있습니다.

전환 유입 경로를 통해 사용자를 안내하려는 경우에도 애니메이션이 유용합니다. 예를 들어, 애니메이션 양식 팝업은 메일 링리스트 작성을위한 신중한 전략입니다. 그런 다음 구매 프로세스와 관련하여 비디오 삽입을 고려할 수 있습니다. 그들은 설득하는 것으로 입증되었습니다 구매자의 73 % 제품 또는 서비스를 진행하고 구매합니다.

마지막으로 미학적 목적으로 만 웹 애니메이션을 사용할 수 있습니다. 매끄럽고 매끄럽게 장식 된 애니메이션은 전체적인 시각적 매력을 상당히 향상시킬 수 있으며 결과적으로 사용자와 인터페이스 사이에 정서적 연결을 설정합니다. 이것이 사용자 참여 수준을 점진적으로 향상시키는 방법입니다.

웹 애니메이션 도구

웹 애니메이션 제작을 시작할 준비가 되셨습니까? 완전한! 그러나 어디서부터 시작해야합니까?

아이디어를 실제 애니메이션으로 변환 할 수있는 강력한 도구를 찾는 것은 어떻습니까? 고맙게도 웹에는 다양한 사용자와 다양한 유형의 애니메이션에 최적화 된 다양한 깔끔한 옵션이 있습니다. 프로젝트를 위해 선택하는 것은 기술, 주요 목표, 예산 및 작업중인 사이트 유형에 따라 다릅니다.

즉, 각각 고유 한 사용 사례가있는 몇 가지 두드러진 예가 있습니다.

  • js
  • Three.js를 사용한 3D 라인 애니메이션
  • js
  • 플러버
  • 컬러 애니메이션
  • jqClouds
  • 스크롤 리 시모
  • 셀 애니메이션
  • js
  • js
  • CSS3 애니메이션
  • 때 변환
  • js
  • 렐 락스
  • AOS
  • js
  • ScrollTrigger
  • 두루마리
  • js
  • js
  • js
  • js
  • 폭스 홀더
  • 애니 멜로
  • CSS를
  • 애니메 스타
  • js
  • CAAT
  • AnimateMate
  • js
  • 스타일 리
  • GFX
  • js
  • js
  • js
  • jQuery DrawSVG
  • 람 제트
  • 구타
  • 섞어 버리기
  • CSS를
  • CSS를
  • js
  • 시저
  • CSSynth
  • 사프란
  • CSShake
  • CSS를
  • js
  • 로켓
  • 운송
  • CSS를
  • js
  • 팝 모션
  • GreenSock의 GSAP
  • js
  • js
  • CSS 애니메이션
  • 화요일이야
  • 의뭉스러운
  • js
  • js
  • js
  • js
  • js
  • 기다림! 활기 띠게 하다
  • 모션 UI
  • js
  • 게으른 선화
  • js
  • js
  • js
  • 아니스
  • js
  • 매직 애니메이션
  • CSS를

웹 애니메이션 디자인

호버 효과

호버 애니메이션은 의심 할 여지없이 웹에서 가장 간단한 애니메이션 중 일부입니다. 포인터가 움직이면 선택한 요소가 강조 표시됩니다. 애니메이션 자체는 크기 이동 또는 색상 변경과 같은 다양한 형태로 발생할 수 있습니다.

여기서 트릭은 효과를 조금만 적용하는 것입니다. 그렇지 않으면 너무 많은 요소를 강조 표시하여 사용자를 혼란스럽게 할 위험이 있습니다.

또한 사이트 전체에서 방법론과 일관된 형태를 유지하는 것이 좋습니다. 예를 들어 홈페이지 버튼이 녹색에서 빨간색으로 바뀌면 다른 웹 페이지에서 추가 강조 표시에 동일한 프레임 워크를 사용하십시오.

배경 애니메이션

배경 애니메이션을 포함시키는 것은 주요 강조를 방해하지 않으면 서 웹 페이지에 흥분과 활력을 더하는 효과적인 전략입니다. 비디오에서 순차적으로 이동하는 미묘한 이미지까지 무엇이든 사용할 수 있습니다.

여기서 가장 좋은 방법은 구조적이고 단순하게 유지하는 것입니다. 비디오를 통합하기로 선택한 경우 그에 따라 비디오를 줄이고 사이트와 관련된 루프를 유지하십시오. 그런 다음 사용자를 압도하지 않으면서도 모션이 미묘한 지주의를 끌 수 있습니다.

GIF 스타일 애니메이션

GIF는 설정하기 매우 쉬운 애니메이션에 특히 관심이 있다면 고려해 볼 가치가 있습니다. 일반적으로 텍스트 레이아웃이나 컨텐츠 레이아웃에 포함 된 웃는 광대 같은 것일 수 있습니다.

탄탄한 아이디어를 내고 관련 비디오 또는 이미지를 얻은 다음 적절한 편집 소프트웨어를 사용하여 완벽한 GIF로 변환하면됩니다. 결과 생성물을 GIF 형식으로 업로드하면 작은 이미지만큼 빠르게로드되는 비디오와 같은 애니메이션이 생성됩니다.

전환 애니메이션

전환 애니메이션은 사용자가 사이트의 한 섹션에서 다른 섹션으로 이동할 때 활기를 불어 넣기 위해 사용됩니다. 한 슬라이드에서 다음 슬라이드로 이동할 때 나타나는 슬라이드 쇼 애니메이션과 유사합니다.

이미지 크레딧 : Shutterstock

완벽한 결과를 얻으려면 사이트 전체에서 애니메이션이 부드럽고 일관성이 있어야합니다. 또한 실제 전환 프로세스를 지연시키지 않을 정도로 짧아야합니다.

애니메이션로드

사실은 온라인 소비자의 47 % 웹 페이지가 2 초 이상로드 될 것으로 예상합니다. 이를 달성하지 못하면 7 초마다 전환 수가 XNUMX % 줄어 듭니다.

~에 의해 22 초의 현재 평균 로딩 시간2 초의 기대를 충족시키는 것은 상당히 어렵다는 것이 분명합니다. 그러나 다른 사이트 요소가 계속로드 될 때 애니메이션으로 바쁘게 유지함으로써 트래픽의 상당 부분을 절약 할 수 있습니다.

거의 즉시 트래픽을로드 할 수있을 정도로 가볍고 간단한 사이트를 만드는 데 집중하면 사이트로 리디렉션됩니다. 브랜드 및 전체 웹 사이트 테마를 방문자에게 체계적으로 소개하도록 설계해야합니다.

스크롤 트리거 애니메이션

웹 사이트 사용자가 사용한 시선 추적 연구 결과 접은 시간의 57 %. 그러나, 당신이 유리한 디자인 구조와 메커니즘을 제공하는 한, 그들 중 많은 사람들이 아래로 스크롤하려는 경향이 있습니다.

스크롤이 발생하는 애니메이션이 나오는 곳이 바로 여기에 있습니다. 사용자가 즉시 스크롤을 시작하여 매끄럽고 끝없는 페이지의 환상을 만듭니다. 스크롤을 방해하는 전환을 제거하는 신중한 방법입니다.

탐색 및 메뉴 애니메이션

솔직 해지자 메뉴 옵션은 상당히 많은 양의 화면 공간을 차지하며, 특히 여러 수준의 선택이 가능한 전체적으로 역동적 인 사이트에서 사용됩니다. 다행스럽게도 애니메이션을 사용하여 옵션을 숨긴 다음 사용자가 해당 버튼을 클릭하거나 마우스를 올려 놓을 때만 표시 할 수 있습니다.

이 유형의 애니메이션은 전체 구조를 시각적으로 연결된 메뉴 옵션으로 압축하여 탐색 프로세스를 간소화하고 단순화합니다. 프레임 워크는 사용자가 오버레이 메뉴 옵션을 클릭하거나 가리킬 때마다 체계적으로 팝업되는 하위 메뉴 세그먼트로 설계되어야합니다.

갤러리 및 슬라이드 쇼

아마도 놀랍지 않게 인간의 평균 관심 범위 적어도 Microsoft가 실시한 최근 ​​연구에 따르면 8 초입니다. 금붕어조차도 일반적인 개인보다 더 오랫동안 세 심하게 머무를 수 있습니다. 따라서 대부분의 사이트 방문자가 모든 갤러리 항목을 클릭 할만큼 충분히 지속되지는 않을 것입니다.

하지만 그거 알아? 갤러리와 슬라이드 쇼 애니메이션을 영리하게 활용하여 사용자가 이미지를 탐색하지 않아도 수많은 이미지를 자동으로 표시 할 수 있습니다.

여기서 가장 중요한 것은 이미지 표시 시간입니다. 전환 속도가 빠른 짧은 디스플레이는 서두르고 전환 속도가 느린 긴 디스플레이는 지루하고 느립니다. 이를 염두에두고 다음 레이아웃으로 빠르게 전환하기 전에 약 5-8 초 동안 각 이미지를 표시하도록 전체 레이아웃을 설계하십시오.

결론

대체로 애니메이션이 사용자 경험을 얼마나 향상시키는 지에 따라 애니메이션을 분석해야합니다. 좋은 것은 사용자의 감정적 인 연결을 유발하거나 탐색 과정을 용이하게해야합니다. 반면에, 완벽한 사람은 동시에 편안하게 둘 수 있습니다.

이를 달성하려면 애니메이션을 디자인하고 사이트에 임베드 할 때 모든 관련 매개 변수를 비판적으로 평가해야합니다. 그리고 브랜드에 맞게 단순하고 가벼우 며 잘 맞도록하십시오.

헤더 이미지 제공 알 프리 다 빌라 | 바넬 티아

보그 단 란 세아

Bogdan은 Inspired Mag의 창립 멤버로서이 기간 동안 거의 6 년의 경험을 축적했습니다. 여가 시간에는 클래식 음악을 공부하고 시각 예술을 탐구하는 것을 좋아합니다. 그는 또한 수정 프로그램에 상당히 집착하고 있습니다. 그는 이미 5를 소유하고 있습니다.