디자인 트렌드 : 혁신적인 호버 효과

/2017-05-13 10:51:31/
Alara
/제도법/

어디를 가든 멋진 새 애니메이션 효과가 있습니다. 애니메이션이 2016 년의 필수 디자인 요소 인 경우 혁신적인 호버 효과는 2017 년의 최신 디자인 트렌드입니다.

작은 움직임에 중점을 둔 머티리얼 디자인과 애플의 애니메이션 가이드 라인의 인기 덕분에 호버 효과가 복귀하고 있습니다. 그러나 과거의 끈적 거리고 번쩍이며 튀는 회전 효과 대신 애니메이션은 단순하고 선명하며 즐겁습니다. 최고의 호버 효과는 사용자를 도와주고 경험을 향상시킵니다.

호버 효과는 전체 화면에 영향을주는 동작에서부터 방향성 신호 또는 탐색 요소와 같은 작은 것까지 다양합니다.

디자인 리소스 살펴보기

홈페이지 이동

호버 효과는 입문 사용자 경험의 핵심 부분이 될 수 있습니다. 화면을 채우는 애니메이션을 사용하면 추가 호버 효과가 매우 매력적일 수 있습니다.

위의 Haus는 화면을 가로 질러 움직이는 만화 캐릭터로 놀라운 일을합니다. 애니메이션은 생각하지 않지만 마우스로 가리키면 캐릭터가 다른 동작으로 폭발합니다. 호버링이 없으면 각 캐릭터는 화면을 가로 질러 왈츠를합니다.

이와 같은 전체 화면 호버 애니메이션으로 작업 할 때는 사용자를 압도하지 말고 기뻐해야합니다. 그것은 꽤 까다로운 중간입니다. 산세 리프 서체를 흰색으로 쉽게 읽을 수있는 어두운 나머지 평평한 배경을 디자인의 나머지 부분에 단순하게 유지하면 애니메이션이 허용됩니다. 사용자가 후속 화면으로 스크롤하기 전에 상호 작용하도록 장려하는 것은 화면의 한 가지 요령입니다.

버튼 효과

간단한 애니메이션은 실제로 사용자가 디자인에서 버튼을 클릭하거나 탭하도록 권장 할 수 있습니다. 간단 해 보이죠?

이것이이 유형의 애니메이션이 인기있는 이유 중 하나입니다.

사용자가 디자인을보다 잘 이해하여 최대의 영향을 줄 수있는 버튼 효과를 디자인하십시오. 위의 Luke Etheridge의 예는 색상이 변하는 상태를 보여주고 사용자에게 클릭으로 어떤 일이 발생할지 알려줍니다. 유용하고 기능적인 호버 애니메이션입니다.

갤러리와 슬라이드 쇼

웹 페이지에는 다양한 갤러리와 슬라이드 쇼가 있습니다. 거의 모든 슬라이드에는 슬라이드 간 이동에서 화살표 또는 다른 디봇 (divot)까지 다양한 애니메이션 효과가 포함되어있어 사용자에게 전진 또는 후퇴하는 방법을 알려줍니다.

현대적인 움직임을 디자인하는 열쇠는 머티리얼 디자인 사양에서 바로 얻을 수 있습니다.

모션이 빠릅니다
모션이 분명하다
운동은 응집력이있다

모션은 Baptiste Dumas가이 모든 일을하는 장면입니다. 모션은 사용자에게 다음에 일어날 일을 묻지 않는 방식으로 발생하며 컨텐츠 요소와 모든 요소 사이에 분명한 선이 생겨 유사하고 원활한 모션 흐름과 연결됩니다.

탐색 및 메뉴

숨겨 지은 탐색 스타일은 좋아하거나 그렇지 않은 디자인 요소입니다. 많은 애니메이션 또는 호버 효과는 사용자가 컨텐츠를 더 잘 탐색하고 디자인을 탐색하는 데 도움이 될 수 있습니다.

팝업되거나 화면에 나타나는 정보로 커지거나 희미 해지는 햄버거 아이콘에서 애니메이션 메뉴 항목은 강력한 방향 도구로 사용될 수 있습니다.

위의 Oxen Made는 홈 페이지에서 두 가지 방식으로 호버 애니메이션을 사용하여 사용자가 수행해야 할 작업을 사용자에게 안내합니다. 마우스를 올리면 '메뉴'의 색상이 변경되어 클릭 가능한 요소임을 사용자에게 알립니다. 그러면 전체 메뉴가 페이지 왼쪽에서 흔들립니다. 또한 작은 삼각형 화살표가 활성 메뉴 버튼에서 동일한 노란색을 사용하여 오른쪽 모서리에 튀어 오면서 스크롤에 더 많은 내용이 있음을 나타냅니다.

이러한 미묘한 동작은 비교적 바쁜 배경 비디오가 재생되는 동안 발생합니다. 부드러운 움직임은 배경과 충분히 대비되어 사용자의주의를 끌고 충분한 사이트 방향과 탐색 기능을 제공합니다.

양식 및 필드

호버 효과의 가장 좋은 예는 양식과 필드를 사용하는 것입니다. 방문하는 거의 모든 웹 사이트는 일종의 행동이나 정보를 요구합니다. 사용자가이 정보를 쉽게 제공할수록 실제로 정보를 수집 할 가능성이 높아집니다.

그렇다고해서 양식이 지루하다는 의미는 아닙니다. 사용자가 필드에 입력 할 내용과 형식을 기억하고 성공을 확인하는 데 도움이되는 도구 설명과 같은 시각적 신호가 중요합니다.

위의 예는 두 가지를 모두 수행합니다. 사용자는 어떤 정보를 입력해야하는지 입력을 할 수 있으며“로그인”버튼을 클릭하면 화면에 애니메이션 애니메이션이 빠르게 나타납니다. 사용자는 자신의 정보가 올바르게 입력되었는지 여부를 다시 추측 할 필요가 없으며 화면에서 빠른 확인을 통해 다음에 수행 할 작업을 진행할 수 있는지 알 수 있습니다.

간단한 호버 효과 또는 애니메이션으로 시작할 위치를 모르는 경우 양식을 사용하는 것이 좋습니다. 사용자는 이미 웹 사이트의이 부분이 대화 형일 것으로 기대합니다. 그들은 형식으로 무언가를 할 것입니다. 간단한 애니메이션으로 적절한 피드백을 제공하십시오.

시도 할 리소스 및 코드

디자인에 애니메이션 효과를 추가 할 준비가 되셨습니까? 시작하는 데 도움이되는 훌륭한 자료가 많이 있습니다.

Hover.css : 링크, 버튼, 로고, SVG, 추천 이미지 등에 적용 할 CSS3 기반 호버 효과 모음입니다. 영감을 얻기 위해 요소에 적용하거나 수정하거나 사용하십시오. CSS, Sass 및 LESS에서 사용할 수 있습니다.
이미지 호버 효과 : 이미지에서 호버 를 최대한 활용하는 데 도움이되는 효과 모음입니다. 코드를 복사하여 프로젝트에서 사용하십시오.
아이콘 호버 효과 : 원형 아이콘을 강조하기위한 간단한 호버 효과 .
놀라운 WordPress 호버 효과 : 효과 컬렉션은 WordPress 사용자에게 적합하며 순수한 CSS3로 만들어졌으며 종속성이 없습니다. 이 컬렉션에는 수십 가지 옵션과 스타일이 포함되어 있습니다.
W3Schools – CSS3 전환 : 이 자습서에서 CSS3 전환을 처음부터 사용하는 방법을 배웁니다.