전환 사용하기
전환 사용하기 (Use Transition)
우리의 뇌는 움직임, 모양 변화, 색상 변화 같은 역동적인 것에 반응하도록 연결되어 있어요. 전환(transition)은 거친 웹 세계를 부드럽게 만들어, 변화가 더 자연스러워 보이게 해 주죠. 전환의 주요 목적은 매력적인 인터페이스를 제공하고 커뮤니케이션을 강화하는 거예요.
출처: 문서
본문
- 추가(Adding): 추가된 요소는 사용 법을 알려 주고, 수정된 요소는 인지될 수 있어야 해요.
- 후퇴(Receding): 관련 없는 페이지 요소는 적절히 제거해야 해요.
- 정상(Normal): 페이지에서 변화가 없는 요소는 안전하게 무시할 수 있어요.
뷰 전환 시 맥락 유지 (Maintain Context While Changing Views)
Slide In과 Slide Out: 가상 공간(virtual space)의 착시를 만들어요.
Carousel: 캐러셀은 가상 공간을 확장하는 데 아주 좋아요.
Accordion: 아코디언은 뷰를 전환하면서도 맥락을 유지하는 데 도움을 줘요.
방금 일어난 일 설명하기 (Explain What Just Happened)
객체 추가(Adding an Object): 테이블이나 차트에 객체를 추가해요.
객체가 추가되면 강조된 영역으로 사용자에게 보여 줘요. 이 강조는 사용자 흐름을 방해하지 않도록 몇 초 안에 사라져요.
객체 삭제(Deleting an Object): 테이블이나 차트에서 객체를 삭제해요.
객체 수정(Modifying an Object): 테이블이나 차트에서 객체를 수정해요.
상태 1: 사용자가 Detail의 값을 수정해요. 상태 2: 사용자가 저장 버튼을 클릭하면 Detail 그리드에 노란색 채움(yellow fill)이 표시되어 객체의 변화를 나타내요. 상태 3: 이 채움은 몇 초 안에 사라지고 정상으로 돌아와요.
객체 소환(Calling out an Object): 페이지 요소를 클릭하고 새 객체를 불러내요.
지각된 성능 향상 (Improve Perceived Performance)
실제 성능을 개선하기 어렵다면, 실제 성능과 지각된 성능(perceived performance) 사이에는 차이가 있어요. 사용자의 주의를 돌리는 것은 조작이 걸리는 것으로 지각되는 시간을 개선하는 좋은 방법이에요.
자연스러운 모션 (Natural Motion)
Ant Motion, a motion language를 참고하세요.