지망생 UX 모션 디자이너를위한 20 가지 최고의 공짜
인터페이스 디자이너는 사용자 작업을 에뮬레이션하는 애니메이션 모형을 사용하여 UX 디자인에 더 많은 관심을 기울이고 있습니다. 이러한 UX 모델 모션에 의존하다 애니메이션 효과로 정의 인터페이스가 사용자 입력에 어떻게 반응해야하는지.
대부분의 UX 디자이너는 소프트웨어를 사용하여 이러한 애니메이션을 만드는 법을 배웁니다. 가장 인기있는 두 가지 옵션은 Adobe After Effects 및 Principle (OS X 만 해당)입니다. 너는 할 수있다. 디자인 인터페이스 모형 Photoshop과 같은 프로그램에서 UI를이 프로그램으로 옮깁니다. 애니메이션 용.
UX 애니메이션을 배우는 데 관심이 있다면 공짜 물건은 엄청난 자산이 될 것입니다. 다른 사람들의 작품을 연구하고, 디자인을 가지고 놀아서 어떻게 작동하는지 볼 수 있습니다..
아래에서 Principle 및 AE 사용자를위한 최고의 무료 공짜를 찾을 수 있습니다. UX 모션 디자인에 들어가기. 그들은 분명히 당신이 이해할 수 있도록 도와 줄 것입니다. UX 애니메이션 작동 방식, 자신 만의 방법을 구성하는 방법.
1. 액션 삭제
스 와이프 다양한 용도로 모바일 앱에서 매우 일반적인 행동입니다. 기본 iOS 스 와이프 동작은 항목 편집 / 삭제를위한 대체 옵션 표시, 그리고 그것은 바로 Ramil Derogongun이 만든이 공짜로 얻는 것입니다..
After Effects 용 무료 AEP 파일을 다운로드하여 직접 사용해 볼 수 있습니다. UI는 아주 기본적인 와이어 프레임 계획 사용자 입력은 파란색 점으로 표시됩니다. 이러한 유형의 사용자 동작은 표시하는 것이 가장 좋습니다 애니메이션을 통해 개발자들에게 인터페이스가 작동하는 방법.
2. 위젯 스 와이프
다음은 스 와이프 애니메이션 모형입니다. 슬라이드 쇼의 장바구니 항목에. 레온 우 (Leon Wu)가 디자인 한이 무료 스 와이프 애니메이션은 원칙을 위해 제작 된 PRD 파일과 함께 제공됩니다..
애니메이션은 매우 간단하며 항목이 화면에서 어떻게 움직여야 하는지를 보여줍니다. 압력이 가해질 때. 당신은 또한 완화 효과 스 와이프 동작이 해제 될 때마다.
3. Dualshock UI
Alexander Boychenko가 공유하는 놀랍도록 역동적 인 UX 애니메이션 효과가 있습니다. 이 모형은 모바일 앱 UI 용 PlayStation Controller를 기반으로합니다. 무료로 다운로드 할 수있는 스케치 및 원리 파일이 포함되어 있습니다..
이 공짜는 전환을 만드는 방법을 보여줍니다. 화면간에 스 와이프하기. 그러나 페이지 요소가 화면에서 어떻게 움직이는지를 보게됩니다. 다양한 방향으로.
4. 햄버거 메뉴 애니메이션
햄버거 아이콘은 여전히 모바일 인터페이스의 모든 분노입니다. 이 메뉴 아이콘 공짜로 3 개 막대 아이콘에 "X"아이콘으로 애니메이션을 적용하십시오..
그것은 반복 애니메이션, 그래서 "X"는 다시 햄버거 메뉴 아이콘으로 움직입니다. 이것에 대해 배울 수있는 훌륭한 공짜입니다 UI 요소에 대한 벡터 조작.
5. 스냅스터
이 무료 모형은 Snapster라고 불리는 모바일 앱용입니다. 초점 환영 / 온보드 화면에서 사용자가 앱의 데모를보고 실제로 어떻게 작동하는지 배울 수 있습니다..
PRD 파일이므로 불행히도 After Effects에서는 좋지 않습니다. 따라서 Principle 사용자 만이 이점을 누릴 수 있습니다..
6.로드 스피너
다음은 AEP After Effects 공짜입니다. 모바일 로딩 스피너. 이러한 종류의 애니메이션 GIF는 Ajax가 웹 개발의 주류가되었을 때 매우 인기가있었습니다..
이제 이러한 모바일 로더는 십분의 일이며, 무겁게 주문을 받아서 만들어진 특정 인터페이스에 맞게. 이 공짜 물건에는 AEP 파일과 스케치 파일이있어 수정하려는 경우 벡터를 편집 할 수 있습니다..
7. 전환 재생 / 일시 중지
전환 효과 종종 매우 단순 해 보이지만 실제로는 많은 양의 작업이 필요합니다. Alex Pronsky가 만든이 재생 / 일시 정지 애니메이션은 훌륭한 예입니다.
이 공짜로 당신은 다양한 얇은 선 아이콘을 움직이는 방법을 검사 할 수 있습니다. 모양과 상징으로. 일단 프로그램을 배우면이 유형의 자료를 처리하는 것이 훨씬 쉬워 지므로 연구를 위해 자유롭게 공짜로 가질 수 있습니다..
8. iPhone Mockup
이 무료 공짜가 애니메이션을 직접 포함하지는 않지만, 사용하기위한 것입니다. 아이폰 애플리케이션 제작 작업용. After Effects에서 iPhone 템플릿으로 사용할 수있는 무료 iPhone 5S AEP 파일입니다..
인터페이스 모형을 가져 와서 After Effects에서 애니메이션을 만들면됩니다. 그런 다음이 아이폰 모형에 플러그인하여 팀과 공유 할 수 있습니다..
9. iPhone 템플릿
이것은 또 다른 것이다. 사용자 지정 After Effects 템플릿 ~와 보다 현대적인 iPhone 디자인. 이 공짜는 모션의 UX에서이 페이지에서 볼 수 있습니다..
템플릿의 모든 내용은 다음과 같습니다. 사용자 정의하기 쉬운 슈퍼. 다운로드 페이지에서 '동영상 안내'라는 섹션을 찾아 앱의 애니메이션을 만드는 방법을 배울 수 있습니다..
10. 마이크로 애니메이션
심지어 가장 작은 앱 애니메이션도 사용자 경험에 큰 영향을 줄 수 있습니다. 이 공짜 물건은 "좋아"마이크로 애니메이션 사용자가 게시물을 "좋아"할 때마다.
심장 아이콘 자체 애니메이션을 가지고있다. 사용자의 프로필 사진이 좋아하는 사람들의 스택에 추가됩니다. 이 공짜 물건은 원리를 위해서만 사용되며 또한 .mov 원한다면 다운로드 할 파일.
11. 월렛 앱
디지털 지갑이 점점 대중화되고 있으며,이 공짜로 지갑을 쉽게 디자인 할 수 있습니다. 원시 벡터 요소가 모두 포함 된 스케치 파일과 원리 애니메이션 용 무료 PRD 파일을 얻을 수 있습니다..
이 공짜 물건은 Sergey Bykov가 재미있는 작은 프로젝트로 디자인했습니다. 그러나 당신이 그것을 분해하고 애니메이션으로 단계별로 작업한다면 그것은 매우 교육적 일 수 있습니다..
12. iOS 스위치
Apple의 iOS 7을 통해 세상에는 온 / 오프 레이블을 위해 새롭게 디자인 된 스위치가 있습니다. 이로 인해 무료 애니메이션을 비롯한 다양한 효과가 나타났습니다. 네이티브 온 / 오프 스위치를 모방한다..
이 파일에서 기본적인 이완 효과로 아주 간단한 애니메이션 효과를 얻을 수 있습니다. 스위치가 넘어서고 배경이 녹색으로 바뀌고 스위치가 꺼지면 다시 돌아옵니다..
13. Ritter App
Sergey Bykov가 Ritter App이라고 부른 것에 대해 발표 한 멋진 또 다른 공짜 물건이 있습니다. 여기에는 원칙 인터페이스 애니메이션을위한 무료 PRD 파일과 함께 벡터 인터페이스 용 무료 스케치 파일이 포함됩니다.
당신은 얻을 것이다 많은 다른 애니메이션들 이 공짜로, 중급에서 고급까지 디자이너에게 더 유용 할 것 같아요. 초보자도 많이 배울 수 있지만 가파른 학습 곡선이있을 수 있습니다..
14. 친구 초대하기
우리는 모두 Google의 플러스 아이콘 플라이 아웃 메뉴를 알고 있으며 좋아합니다. 음, Jardson Almeida는 간단한 소재 디자인 개념을 기반으로 한 친구 초대 메뉴를 만들었습니다..
모든 것이 스케치에서 설계되었고 애니메이션을 위해 원칙으로 가져 왔습니다. 두 파일을 공짜로 다운로드하고 주변에서 장난감으로 가져옵니다..
15. 카드 스 와이프
원칙 사용자들만을위한 또 다른 일반 스 와이프 공짜 공모가 있습니다. 이것은 카드 스 와이프 인터페이스 일반 용도의 슬라이드 쇼 또는 기본 앱 UI 용으로 제작되었습니다..
나는 이것이 원칙에 들어가는 초보자를위한 완벽한 공짜 물건이라고 생각한다. 너무 복잡해서 잃어버린 느낌이 들지는 않습니다. 그러나 그렇게 단순하지 않아서 평범함을 느끼지 못할 것입니다..
16.지도 채팅
많은 디자이너가 아직 포토샵을 사용하여 인터페이스를 제공하고 있으며이 맵 채팅 공짜에 대해서도 마찬가지입니다. 인터페이스 용 PSD 파일과 원칙 애니메이션 용 PRD 파일을 다운로드 할 수 있습니다..
놀랍도록 길들인 스타일의 애니메이션이지만 단순한지도 / 위치 정보 앱에서 기대했던 것과 똑같은 기능을합니다..
17. 앱로드 중
모바일 앱에서 자주 사용합니다. 화면로드 중 방문자에게 백엔드에서 일어나는 일이 무엇인지 알려줍니다. 이 컬렉션에서 내가 좋아하는 공짜 물건 중 하나는 Roman Wagner가 만든 로딩 애니메이션입니다..
개별 요소를로드합니다. 속삭이다 로드 화면이 완료되면 이 애니메이션은 매우 부드럽고 모바일 앱 디자인의 영역에서 완전히 신뢰할 수 있습니다..
18. 온 보딩 카드
사용자 온 보딩 모든 새로운 모바일 응용 프로그램을위한 중요한 단계입니다. 이 단계에서 일부 애니메이션을 포함시키는 것이 좋습니다. 이러한 온 보딩 카드 애니메이션은 앱 디자이너에게 큰 도움이 될 수 있습니다.
이것은 Austin Baird가 만들었으며 모든 UI / UX 프로젝트에서 무료로 사용할 수 있도록 배포되었습니다..
19. 주요 데모
Principle에 대해 자세히 살펴볼 때 많은 고급 워크 플로우 기술을 배우게됩니다. 추가로 진행할 수있는 최고의 공짜 물건 중 하나는 Yalantis 크리에이티브 팀을 위해 만든 것입니다..
원칙 사용자가 다운로드하여 사용할 수있는 완전히 무료 리소스입니다. Principle 애니메이션에서 프로가되는 법을 보여주는 몇 가지 트릭을 다루고 있습니다..
20. 드롭 다운 메뉴
메뉴 드롭 다운은 종종 우리의주의를 끌기 위해 미친 애니메이션을 사용합니다. 이 After Effects 공짜 물건은 드롭 다운 계단 애니메이션 개별 요소에 대한 메뉴에서 계단처럼 떨어 뜨릴 수 있습니다..
모든 사용자에게 유용하지는 않지만 After Effects 인터페이스 애니메이션에 대해 배울 수있는 좋은 방법입니다..
최종 단어
이러한 리소스는 모두 자신의 프로젝트에서 완전히 무료로 다운로드 할 수 있습니다. 만약 당신이 UX 애니메니션을 처음 접한다면 나는이 공짜 물건을 공부함으로써 많은 것을 배울 것임을 보장합니다. 다른 훌륭한 리소스가 댓글에 링크를 포함시킬 수 있다고 생각되면.
