[강의학습일지] UXUI 디자인 입문 4주차 강의

인터페이스 디자인 툴 (피그마, XD, 스케치)

인터페이스: 다양한 디바이스 화면을 대응하게 됨 (벡터 방식)

픽셀

디지털 이미지를 구성하는 최소 단위의 점

픽셀수가 많을수록 품질↑용량↑, 편집 시 픽셀수가 변해 손상 있음

.jpg, .jpeg, .png, .gif (비트맵 이미지)

벡터

그래픽을 함수공식으로 표현한 것(좌표, 정수로 만들기)

비트맵에 비해 용량이 적지만, 그래픽 모양을 좌표로 저장하기 때문에 복잡한 이미지를 벡터로 만들면 파일 용량↑

반응형 디자인은 벡터로 제작

.svg, .eps, .ai

Dev mode

화면디자인을 하고 파일 그대로 코드변환을 할 수 있음

엔지니어와의 협업이 용이해짐

Dev Mode: Design-to-Development | Figma

프로토타이핑

화면을 움직이고 동작하는 걸 볼 수 있게 함

Lo-fi(Low fidelity) 프로토타입: 움직임 위주. 와이어프레임 수준으로 움직임 구현. 초기 아이디어 빠르게 검증
Hi-fi(High fidelity) 프로토타입: 실제와 유사하게 만듦. 화면의 사용성을 시험할 때 사용. 실제 제품과 유사함

 

[강의학습일지] UXUI 디자인 입문 2주차 강의

 

인터랙션 디자인

사용자가 제품을 사용하면서 반응을 주고받음 (ex. 내가 요청한 대로 진행이 되고 있는지 응답을 해줌)

 

툴	특징
피그마	피그마로 만든 화면으로 단순한 동작을 시연할 때
프로토파이	코드로 개발하는 제품과 유사한 수준의 인터랙션 구현 코드를 안써도 GUI를 직관적으로 볼수있음
프레이머	코드기반으로 실제제품과 가장 유사한 수준으로 프로토타입 만들 수 있음 피그마처럼 화면디자인도 할 수 있음 실제 배포도 할 수 있음

 

Instant

애니메이션 없이 즉각 화면 전환

 

Dissolve

원본 화면 위에서 흐린 상태에서 진해지며 노출

 

Smart Animate

이름이 같은 레이어끼리 자연스러운 움직임 적용

 

Move In

새로운 화면이 원본 화면 위로 밀어 들어오며 노출

 

Move Out

원본 화면이 밀려 나가며 아래로 새로운 화면 노출

 

Push

새로운 화면이 원본 화면을 밀면서 노출