UI 애니메이션 원칙 : Disney is Dead

사진은 그림의 죽음으로 예상되었다 (초기 Daguerreotype)

(이메일을 통해 UI 애니메이션 관련 기사를 받고 뉴스 레터에 추가하려면 여기를 클릭하십시오.)

새로운 매체

Paul Delaroche는 1839 년 경에 Daguerreotype을 만났을 때“오늘부터 그림이 죽었다”고 유명하게 선언했습니다.

그때까지 외부 세계를 시각적으로 문서화하는 유일한 방법은 수작업으로 표면에 적용된 매체를 사용하는 것입니다. 다양한 분야의 수세기에 걸친 장인 정신으로 인해 다양한 매체에서 수많은 원칙과 기술이 발견되었습니다. 문화와 시대가 진행됨에 따라 시각적 표현이 어떻게 보일지에 대한 스타일과 시각적 언어 (원래 디자인 패턴).

초기 사진 작가들은 이미지를 오늘날의 인기있는 그림과 비슷하게 만들려고 노력하면서 종종 조명과 인쇄 기술을 조합하여 이미지를 부드럽게하고 회화적인 모습을 만들었습니다. 사진 매체가 무엇을 할 수 있었는지에 대한 그들의 이해는 회화 세계에 대한 이해에 의해 친밀하게 연결되고 영향을 받았으며 제한되었습니다.

Ansel Adams, Imogen Cunningham, Edward Weston 및 'Group f / 64'와 같은 사진 작가들이 사진과는 다른 시각적 매체로 사진을 독창적 인 매체로 구분하는 시각적 언어로 중요한 진입을하기까지는 거의 100 년이 걸렸습니다. 언어와 원칙, 그리고 그렇게하면서 그들은 사진의 영역에 혁명을 일으켰습니다.

에드워드 웨스턴, 이모 겐 커닝엄, 안젤 애덤스

디즈니는 다른 문제를 해결했다

행복하게도, 우리는 UI 애니메이션의 혁명에 자신을 찾습니다.

1981 년 Ollie Johnston과 Frank Thomas는 Disney Animation : Illusion of Life를 발표했으며 현재 '12 가지 기본 애니메이션 원칙 '을 도입했습니다.이 원칙은 유기체에서 발생하는'현실적인 모션 '을 만드는 방법의 문제를 해결했습니다. 물리적 공간에서 움직이고 반응한다 (이 원리는 또한 감정적 인 타이밍과 성격의 호소와 같은 것들을 포함한다).

사용자 경험의 일부인 UI 애니메이션은 겨우 20 살이며 아직 초기 단계입니다. UI 애니메이션 도메인이 등장함에 따라 사용자 인터페이스가 제 시간에 어떻게 동작하는지 설명 할 수있는 유일한 도구는 12 가지 애니메이션 원칙이었습니다. 초기 사진 작가들이 그림의 규칙을 통해 사진을 이해하려고 시도한 것과 마찬가지로, 디자이너들은 디즈니 애니메이션의 규칙을 통해 UI 애니메이션을 이해하려고 시도했습니다.

표면적으로 어느 정도의 오버랩이 있기 때문에 이해할 수 있습니다. 12 가지 애니메이션 원칙 중 하나 인 손쉬운 모션은 모션을 통한 '적합성'을 강화시켜 사용자 경험에 중요한 요소입니다. 여유를 가지지 않으면 서 UI 애니메이션은 어색하고 이상하게 느껴집니다.

사용자 인터페이스의 맥락에서 12 가지 원칙을 자세히 살펴보면 완전한 분석이 가능합니다.

Squash and Stretch는 객체에 가중치와 유연성을 제공합니다. 사용자 인터페이스의 규칙이 아니라 예외입니다.

기대는 어떤 일이 일어나고 있으며 사용자 경험과 관련하여 거의 쓸모가 없다는 의미를 만듭니다. 선택적인 마이크로 인터랙션 및 버튼 상태에 대해 제한된 방식으로 만 작동합니다.

스테이징은 애니메이션의 레이아웃을 말합니다. 캐릭터가 계속 움직이고 있기 때문에 디즈니 만화에 적합하지만 사용자 경험에서는이를 '디자인'이라고 생각합니다.

직진 액션과 포즈 포즈는 실제 드로잉 / 애니메이션 프로세스에 대한 접근 방식보다 원칙이 적습니다. 연속 프레임을 그리는 경우 더 유동적 인 애니메이션을 만들거나 포즈를 사용하여 몇 가지 키 프레임을 설정하고 간격을 채울 수 있습니다 . 실제 프레임 별 애니메이션이 발생하지 않는 한 사용자 환경에서이 프로세스는 거의 변환되지 않습니다. 기본적으로 사용하는 도구에 관계없이 거의 모든 UI 애니메이션이 키 프레임을 사용하여 만들어집니다.

후속 및 겹침 동작은 물리 및 관성 법칙을 따르는 것과 신체가 반응하는 방식과 관련이 있습니다. 두 가지 원칙은 그룹에서 가장 유용한 다음 원칙에 의지하지 않는 한 사용자 인터페이스와 거의 관련이 없습니다. .

Slow In and Slow Out은 물체의 속도를 높이고 늦출 시간이 필요하다고 말합니다. UI 애니메이션의 100 %가이 원칙을 사용해야하므로 이는 매우 관련이 있습니다. 일반적으로‘완화’라고하며 매우 중요합니다.

아크 (물리적 모션을 재현하는 데 필요)는 UI 애니메이션에 거의 쓸모가 없으며 규칙이 아닌 예외이기도합니다.

보조 작업은 유용하며 화면 전환 및 시각적 계층 설정에 좋습니다.

타이밍은 캐릭터를 그릴 때 관련이 있지만 반응을 느끼기 위해 모션이 선명해야하는 사용자 인터페이스에서는 인터랙션 느낌이 아닌 지속 시간을 디자인하는 것이 더 좋습니다.

과장은 디자인이 미리 결정되어 있기 때문에 UI 애니메이션과 거의 관련이없는 사실감이나 캐리커처의 정도와 관련이 있습니다.

UI 애니메이션은 객체 자체의 실제 디자인이 아니라 시간이 지남에 따라 인터페이스 객체의 동작을 처리하므로 솔리드 드로잉도 거의 무가치합니다.

또한 이의 제기는 시각 치료에 관한 것으로서, 시간이 지남에 따라 인터페이스의 작동 방식과는 관련이 없습니다.

결론적으로

여전히 의문의 여지가 있습니다. 애니메이션의 12 가지 기본 원리가 왜 UI 애니메이션을 정확하게 설명하지 않습니까?

UI 애니메이션은 물리적 공간에서 움직이는 유기체와 동일한 규칙을 따르거나 동일한 규칙을 따르지 않습니다. UI 애니메이션은 사진과 그림이 구별되는 뚜렷한 매체입니다 (사진과 그림은 모두 빛과 구도에 의존하는 정적 시각 구성). 기본적으로 다른 매체입니다.

간단히 말해, 12 가지 기본 애니메이션 원칙은 다른 문제를 해결하기 때문에 UI 애니메이션에 적용되지 않습니다.

다음 기사에서는 UI 애니메이션 원리가 무엇인지, UI 애니메이션 원리가 해결하는 문제, 원리가 기법과 어떻게 다른지, 현재 및 미래의 프로젝트에서 UI 애니메이션을 디자인하고 사용하여 유용성 및 보다 강력하고 효과적인 사용자 경험을 만듭니다.