좋은 UI와 훌륭한 UI의 차이
UI 마이크로 인터렉션을 개선하기 위한 실용적인 제안.
좋은 것에서 더욱 좋은 것으로 바뀌는 UI 인터랙션 몇 가지 예를 살펴보겠습니다. 약간의 수정을 통해 디자인 퀄리티를 높일 수 있습니다. Material Motion, IBM의 Animation Principles 및 The UX in Motion Manifesto의 지침을 따랐습니다.
탭을 활성화할 때, 콘텐츠 영역에 슬라이드 인터랙션 넣기
왼쪽의 콘텐츠가 페이드 인 및 페이드 아웃됩니다. 오른쪽 슬라이드는 탭이 있는 슬라이드입니다.좋은 애니메이션은 콘텐츠 영역에서 다른 상태로 페이드 인 및 페이드 아웃합니다.
훌륭한 애니메이션은 콘텐츠 간에 이동하도록 하여 전환의 연속성을 보여줍니다.
탭이나 플라이 아웃 메뉴와 같은 상호 작용을 디자인할 때 콘텐츠를 여는 동작을 기준으로 콘텐츠의 위치를 지정해 보세요. 이렇게 하면 콘텐츠의 가시성뿐만 아니라 위치도 애니메이션 할 수 있습니다. 그리고 콘텐츠에서 다른 콘텐츠로 이동하는 스와이프 제스처를 추가해보세요.
카드의 공유 요소를 연결하자.
왼쪽의 콘텐츠는 위로 슬라이드 되며, 새 화면이 열립니다. 오른쪽은 카드가 확장되며 화면을 채웁니다.좋은 애니메이션은 왼쪽으로 밀기 또는 위로 밀기 같은 전환을 사용하여 세부 정보 화면에 내용을 표시합니다.
훌륭한 애니메이션은 공유 콘텐츠에 애니메이션을 적용하여 두 상태 간의 연결성을 보여줍니다.
서로 다른 상태 간에 애니메이션을 적용할 때, 상태 간에 공유 요소가 있는지 확인하고 연결합니다. InVision Studio를 사용하면 연결된 두 화면 사이에서 반복되는 구성 요소가 모션 전환을 만들 때 자동으로 연결됩니다 적용할 수 있는 애니메이션 유형을 보려면 Motion Manifesto를 확인하십시오. 위의 예는 Masking. Transformation, Parenting 및 Easing 원칙의 조합을 사용합니다.
콘텐츠에 계단식 효과를 사용해보자.
왼쪽의 카드는 슬라이딩 및 페이드 인으로 나타납니다. 오른쪽의 카드는 동일한 애니메이션을 특징으로 하지만 각 카드에는 짧은 속도 값이 있습니다.좋은 애니메이션은 콘텐츠들이 화면에 들어올 때 위치 값과 불투명도 값이 변경됩니다.
훌륭한 애니메이션은 각 그룹이나 요소들의 로딩에 대해 속도 값을 사용합니다.
콘텐츠의 각 부분 또는 그룹에 속도 값을 적용해 보십시오. 동일한 여유와 기간을 유지하여 일관성을 유지합니다. 이를 폭포 효과라고 부릅니다. 하지만 작은 요소들을 계단식으로 배열하지 마십시오. 콘텐츠 그룹에 애니메이션 효과를 적용하십시오. 애니메이션을 빠르고 빠르게 유지합니다. Google은 각 요소의 시작 간격이 20ms를 넘지 않도록 권장합니다. 더 많은 예를 보려면 Material Motion의 안무 원리를 확인하십시오.
콘텐츠가 다른 요소를 방해하지 않도록 합니다.
왼쪽의 애니메이션은 다른 콘텐츠 위에서 애니메이션 됩니다. 오른쪽의 애니메이션은 콘텐츠가 커짐에 따라 콘텐츠를 밀어냅니다.좋은 애니메이션은 상황에 맞는 요소를 이동하고 표시합니다.
훌륭한 애니메이션은 변경될 때 주변 환경에 영향을 미치는 요소를 보여줍니다.
콘텐츠의 요소가 주변 환경을 인식하도록 합니다. 이것은 콘텐츠가 주변 요소를 끌어당기거나 밀어내는 것을 의미합니다. 더 많은 예를 보려면 Material Design의 Aware 모션 원리를 확인하십시오.
콘텍스트에 메뉴를 표시합니다.
좋은 애니메이션 메뉴는 메뉴를 연 버튼 방향에서 나타나는 콘텐츠를 보여줍니다.
훌륭한 애니메이션 메뉴는 메뉴 버튼을 중심으로 확장되어 콘텐츠를 보여줍니다.
버튼을 사용할 때, 실시간 이벤트를 표시합니다.
왼쪽의 버튼은 상태를 나타내는 텍스트를 보여줍니다. 오른쪽의 버튼은 컨테이너를 사용하여 다양한 이벤트를 표시합니다.좋은 상호 작용은 버튼 근처에 이벤트를 표시합니다.
훌륭한 상호 작용은 버튼 자체를 사용하여 다양한 상태를 표시합니다.
버튼의 컨테이너를 사용하여 상태에 대한 시각적 피드백을 제공하십시오. 예를 들어 CTA를 스피너나 로딩 애니메이션으로 바꿀 수 있습니다. 또는 진행 상황을 보여주는 배경에 애니메이션을 추가할 수 있습니다. 솔루션은 사용자에게 달려 있으며, 아이디어는 사용자가 이미 상호 작용하고 있는 공간을 사용하는 것입니다.
중요한 콘텐츠는 사용자들에게 지속적으로 각인시켜주자.
왼쪽의 예는 색상과 위치를 사용하여 요소를 눈에 띄게 만듭니다. 오른쪽은 사용자의 주의를 끌기 위해 애니메이션을 사용합니다.좋은 디자인은 색상, 크기 및 위치를 사용하여 사용자가 주의하거나 조치를 취해야 하는 중요한 작업을 강조합니다.
훌륭한 디자인은 애니메이션을 사용하여 방해가 되지 않으면서 중요한 작업에 주의할 수 있게끔 디자인됩니다.
사용자가 중요한 작업을 수행해야 하는 경우 사용자의 관심을 끌 수 있도록 작업에 애니메이션을 적용해봅시다. 미묘한 애니메이션으로 시작하여 액션이 얼마나 중요한지에 따라 강도(크기, 색상 및 속도의 변화)를 높입니다. 중요한 작업에만 사용하세요. 이 효과는 많이 사용할수록 영향력이 줄어들고... 사용자가에게 혼돈을 줍니다.
결론
이 아티클이 여러분들의 작업물에 인터랙션을 추가할 때 더 나은 디자인 방향성을 정할 때 도움이 되기를 바랍니다. 인터랙션을 적용했을 때, 상태의 변화를 설명하고, 위에서 설명했던 원칙을 따르면 여러분들의 인터랙션이 좋았던 디자인에서 훌륭한 디자인으로 변화시켜 줄 수 있을 듯합니다.
* 위 글은 UX Collective에서 업로드한 아티클을 번역한 내용이며, 저작권 관련하여 원작자와 협의 후 Dseign Text에 업로드된 점 참고 부탁드립니다.
원문링크: https://uxdesign.cc/good-to-great-ui-animation-tips-7850805c12e5
