여유를 선택해보세요

버튼에 마우스 온 등, 약간의 연출에 잡는 이징...데포토로 하고 있지 않습니까...! ?
평소 별로 의식하지 않는 약간의 연출에 붙이는 이징의 어떻게 할지 생각해보고 싶습니다.
(사이트의 분위기에 맞추는 것이 제일입니다만, 여기에서는 어느 정도 범용적으로 생각해 보겠습니다)

여유의 종류

왼쪽에서 ease-in , ease-out , ease-in-out 입니다.
세세하게는 그 밖에도 여러가지 있습니다만, 기본은 이 3개 + 각각에 강도가 있는 느낌.


(도도리 미도리)

어떤 여유를 추천합니까?

개인적으로, 우선 선택한다면 ease-out
왜! ?

이유

왜, ease-out인가.
일단 저 나름대로 이유가 있습니다.

초동이 빠르다

이것입니다!
3가지 타입 중에서 ease-out이 제일 초동이 빠릅니다.

만약 duration을 0.3초로 하면, 최초의 0.1초의 변화량이 제일 많은 것이 ease-out입니다.
다음 점에서 ease-in-out, 가장 변화하기 어려운 것은 ease-in입니다.

왜 초동이 빠르면 좋을까

유저가 자신의 조작이 그 반응을 일으켰다고 느껴지는 최장의 감각이 약 0.1초※1이라고 합니다.
자기 귀속감※2등이라고 하기도 합니다!

0.1초 사이에 변화가 없으면, 유저가 느끼는 「바삭바삭 움직인다」라든가 「가벼운」같은 감각을 얻기 어려워집니다.
ease-in-out이나 ease-in도 변화가 없는 것은 아닙니다만, 변화의 양이 적기 때문에 유저에게 주는 인상이 얇아지는 경향이 있습니다.
그 점, ease-out은 처음에 많이 변화가 일어나기 때문에 다른 2개와 비교하면, 좋은 인상을 주기 쉬워집니다.

※1 출처:「 UI 디자인의 심리학 - 이해하기 쉽고 사용하기 쉬운 법칙 」(서적)
※2 출처:「 녹는 디자인 하드×소프트×넷 시대의 새로운 설계론 」(서적)

망설이면 ease-out

그렇다고 해서 극단적입니다만, 만약 헤매는 것이 있으면 우선 ease-out를 설정해 보고, 거기에서 조정해 보는 것은 어떻습니까!

특히 버튼이나 텍스트 링크의 마우스 온 등, 유저가 자주 사용하는 것에는 추천입니다.

좋은

「애초에 거기에 애니메이션 필요 없어?」나 「설정하는 duration에 의하네요」등 여러가지 있다고 생각합니다만, 이번은 이징에 짜 봤습니다.
독단과 편견으로 메모 정도로 썼기 때문에 어디까지나 참고까지.