it-swarm-korea.com

응용 프로그램에서 애니메이션을 언제 어떻게 사용해야합니까?

때로는 응용 프로그램이 UI의 애니메이션을 활용할 수 있습니다.

  • 애니메이션을 언제 사용해야하는지 결정하기위한 팁이 있습니까?
  • 애니메이션의 유용성을 극대화하고 오용을 피할 수있는 방법은 무엇입니까?
12
Dair

원인과 결과를 생각하십시오. 버튼 위로 마우스를 가져 가면 일종의 피드백을 원합니다. 무언가를 끌 수 있다면 어떻게 든 지시하십시오. 경고 나 알림이 있으면주의를 기울여야합니다. 그 외에도 애니메이션에 대한 특별한 이유가 없으면 사용하지 마십시오. 계속하면 성가신 것을 피하십시오. 애니메이션이 중요하지 않고 페이지의 주요 목적에 방해가되는 경우 제거하십시오.

6
Virtuosi Media

애니메이션이 적합한 일부 위치 :

  • 패널을 특정 위치로 최소화-애니메이션은 최소화 된 패널의 위치와 복원 방법을 사용자에게 알려줍니다.
  • 탐색 막대와 같은 자동 숨김 기능-애니메이션을 사용하면 방금 사라진 항목과 검색 가능한 위치에 대한 사용자의주의를 끌 수 있습니다.
  • 변경을 일으킨 변경 영역이 바로 근처에 있지 않은 영역을 업데이트합니다. 예를 들어, 다른 패널에서 해당 데이터의 시각적 표현을 변경하는 목록/그리드에서 데이터를 편집합니다.

애니메이션 (변경/움직임)은 대부분의 다른 것보다 눈을 사로 잡기 때문에 그렇지 않으면 사용자의주의를 끌었던 동작에주의를 기울이고 싶을 때 좋습니다.

그러나 위의 항목조차도 처음 몇 번만 수행하면 가치가있을 수 있습니다. 눈이 자동으로 그려지기 때문에주의가 산만 해 지므로 초기 "안내"가 완료된 후에는 피해야합니다 .

6
Dan Barak

사용자가 앱이 작동을 멈췄다 고 생각하지 않도록 항상 일종의 바쁜/작동 애니메이션이 있어야합니다 (특히 ajax 앱에 중요).

전체 사용자 경험에 추가하지만 너무 많이 넣지 않으면 간단한 빠른 전환이 가능합니다.

"개발자가 멋진 UI 효과를 계획했던 것처럼 실제 기능을 계획하는 데 많은 시간을 할애했으면 좋겠다"고 생각한 앱을 사용해 본 적이 있습니까? 애니메이션을 추가 할 때이 점을 명심하십시오.

4
Sruly

위대한 질문입니다. 평상시와 같이 앱에 따라 다르지만 (예를 들어 게임은 생산성 앱보다 훨씬 많은 UI 애니메이션을 사용해야 함) 몇 가지 일반적인 원칙이 있습니다.

IThings가 새롭고 뜨거웠을 때 모든 것이 애니메이션화되어야했지만 VS2010과 Office 2010을보고 얼마나 많은 not 애니메이션인지 보는 것이 흥미 롭습니다. 특히, Office 2010에서는 페이드 인 호버/버튼 롤오버 (Office 2007이 수행 한 동안). IMO는 반응이 빠릅니다. 메뉴가 여전히 페이드 인/아웃됩니다 (메뉴가 페이드하는 데 걸리는 시간 outin인지되는 증가 할 수 있습니다. 민감도).

일반적으로 애니메이션은 사용자가 명시 적으로 드래그/스크롤하지 않고 UI 구성 요소가 움직일 때 사용해야합니다 . 사용자가 아이콘을 제자리로 드래그하는 경우 다른 아이콘을 "스쿠 팅 (scootching)"하면 사용자 동작의 효과가 나타납니다 (삽입 점 선이 충분하더라도). IE/Firefox의 "정보 표시 줄"은 다른 항목을 아래쪽으로 밀어내어 점프를 줄이고 사용자의 관심을 끌도록합니다. 사용자가 다른 요소의 위치를 ​​알기 때문에 아코디언 및 트리 메뉴가 애니메이션으로 더 잘 테스트되었습니다.

모든 레벨의 사용자가 애니메이션을 적용하는 UI 요소와 상호 작용하는 경향이 적은 것으로 나타났습니다 (링크를 찾으면 업데이트하겠습니다). 따라서 사용자가 버튼을 가리킬 때 2 초 이상 버튼을 켜면 애니메이션 중에 버튼이 work이더라도 사용자는 무의식적으로 애니메이션이 끝날 때까지 기다립니다. 이에 대한 느낌을 얻으려면 WPF Themes 샘플을 확인하십시오. 일부 테마는 다른 테마보다 호버 애니메이션이 더 길며, 느리게 느껴지는 테마를 즉시 결정할 수 있습니다. 느린 페이드 효과는 Vista가 느리게 느꼈다는 사용자에게도 기여했을 수 있습니다-Win7에서는 동일한 애니메이션이 모두 있으므로 프로세서/그래픽 카드에서 느리게 진행되지만 많은 경우가 더 짧습니다.

새로운 google.com 인 OTOH는 희미 해지는 기능이 있으며 Google 이미지 검색에는 라이트 박스가 있습니다. 따라서 트렌드는 양방향으로 진행되고 있습니다.

3
Robert Fraser

요약하면 애니메이션은 뇌에 두 가지 강력한 영향을 미칩니다.

  • 인지 부하 감소 : 사용자는 두 상태 사이에서 발생한 일을 볼 수 있으므로 뇌가 "격차를 메울 필요가 없습니다". 이를 통해 사용자는 모든 것이보다 명확하고 사용하기 쉽다고 느낄 수 있습니다. --> 전환에 애니메이션을 광범위하게 사용하십시오 (cf Apple 소프트웨어)

  • 사용자의주의를 끌기 : 인간은 직접 보지 않는 곳에서 움직임을 감지하는 것이 좋습니다. 이것은 움직임을 감지하는 데 사용되는 세포 인 우리의 막대 세포 덕분에 이루어집니다. 망막의 바깥 쪽 가장자리에 밀집되어 있습니다 (적대적인 환경에서 생존과 관련이 있어야 함) -> 먼 곳에서 정말 중요한 일이 생기면 애니메이션을 사용하십시오

이 효과는 파충류의 뇌와 직접 연결되어 있기 때문에 매우 강력합니다. 강력하고 동시에 위험합니다.

3
user396

웹/네이티브 앱용 애니메이션을 제작할 때는 항상 콘텐츠를로드하는 동안 0.5 초 동안 거의 "사용자의주의를 산만하게하는"github 방식을 사용합니다. 응용 프로그램에서 가장 느린 부분을 찾으십시오 (예 : 버튼을 누른 부분과 0.5 초 동안 아무 일도 일어나지 않는 것 같고 애니메이션을 수행하는 방법을 찾으십시오. 이는 사용자의 불만을 최소화하는 것입니다. " 버튼을 눌렀지만 아무 일도 일어나지 않습니다. "), 회전 로딩 휠이나 로딩 애니메이션을 의미하지는 않습니다. 미끄러운 애니메이션 같은 것을 의미합니다. , 빠른 UI (참조 : https://github.com/github/linguist 무언가를 클릭 할 때마다 github를 매우 빠르고 매끄럽게 보이게하는이 슬라이드 애니메이션이 있습니다.) 이것은 (500ms 이상 걸리는 앱의 일부 에서이 기술을 사용하여) 500ms처럼 느껴지지만 마법의 숫자이지만 실험하고 찾으십시오.

2
David

이 애니메이션은 사용자가 무슨 일이 일어나고 있는지 파악하는 데 도움이됩니까? OS X의 지니 효과를 즉시 해제했지만 간단한 최소화/복원 애니메이션은 빠르며 방금 일어난 일에 대한 추가 실마리를 제공하기 때문에 감사합니다. Spaces/Exposé도 마찬가지입니다. 또는 짧고 단순하며 부드러운 페이드 전환으로 인해 갑작스럽고 인간적인 것으로 보일 수 있습니다.

그런 다음 스타 워즈의 '루카스 와이프'와 같은 작은 감각이 당신의 상표가 될 수 있습니다.

2
John Ferguson

애니메이션에는 목적이 있으며 그 목적은 상태 변화를 시각화하는 것입니다.

웹킷이 제시 한 현대 CSS에 존재하는 종류와 같은 선언적 애니메이션에 대해 생각할 때 더 쉽게 이해 할 수 있습니다. 이 컨텍스트에서 요소가 특정 상태에서 표시되는 방식을 지정한 다음 CSS가 다른 상태에서 표시되는 방식을 알려줍니다. 상태를 어떻게 지정합니까? 클래스 이름 및 ID와 같은 CSS 규칙을 사용합니다. 예를 들어 (여기에서 코드 사용을 용서해주십시오!)

.myBox { width: 100px; height: 100px; border: solid 1px red; -webkit-transition: linear .3s; }
.myBox.open { width: 100px; height: 120px; border: solid 3px red; }

여기서 설명하는 것은 열리는 상자이며, 두 CSS 규칙 사이에 애니메이션을 적용하는 방법을 코드에 알려줍니다. 이를 통해 상태를 확인할 수 있으며, 앱에 애니메이션을 적용하는 것이 갑자기 훨씬 더 논리적이됩니다. 애니메이션이 어디로 가는지 생각하는 대신 상태 변화의 부산물로 애니메이션을보고 있습니다. 변경 사항이 발생했음을 사용자에게 알려주거나 피드백을 표시합니다.

순수한 "애니메이션"(프로그래밍 관점에서)과 "상태 변경"(선언적 관점에서)을 구별하는 법을 배웠을 때 모든 UI 디자인을 훨씬 견고하고 논리적으로 만들었습니다.

1
Rahul