1. UX(User Experience) : 사용자 경험
▷ 사용자가 어떤 제품이나 서비스와 상호작용하는 과정에서 얻는 총체적인 경험입니다.
▷ 사용자 경험 디자인 : 익숙함을 전제로 디자인 하는 것
▷ 예시) 과거의 네이트온과 유사한 카카오톡
▷ 사용성이 좋다 : UX가 좋음
▷ 사용성이 나쁘다 : UX에 문제가 있음
◎ UX 디자인 원리(3가지)
(1) 일관성의 원리
▷ 상단 네비게이션바,신세계 백화점 홈페이지, 이마트, 스타벅스 로고의 위치, SSG 닷컴
(2) 행동유도성의 원리
▷ 사람이 자연스럽게 행동할 수 있게 하는 시각적인 요소
(3) 정보설계(정보위계)
▷ 페이지 구성을 위한 카테고리 정리
◎ 원리를 알아야하는 이유?
▷ 디자인에 도움이 됩니다.
▷ 논리력을 키울 수 있습니다.
2. UI(User Interface) : 사용자 인터페이스
▷ 사용자가 직접 맞닿게 되는, 즉 사용자가 마주하게 되는 제품의 시각적 영역
▷ UI 디자인 : 시각적 구성요소 (color, Icon, layout......)
▷ 햄버거 메뉴
▷ 디자인 전략 : UX/UI 디자인 방법론적 접근
▷ 기술 전략 : Adobe XD 프로그램의 이해
▷ XD는 16년도에 시작되었음
◎ UI 디자인 원리 : 시각적 디자인을 보는 감각을 기를 수 있음.
(1) 유사성의 원리 : 서로 다른 위치에 있어도 색이 같은 것끼리 유사하다고 보는 경향이 있습니다.
→ 예시) 방향, 길이, 너비, 크기, 형태, 곡률, 색상, 색조, 위치, 그룹 등이 있습니다.
(2) 근접성의 원리 : 근접한 물체들이 그룹을 형성하는 경향이 있습니다.
→ 따라서 배치할 때 비슷한 것들끼리 근접하게 모아놓음으로써 안정감과 통일감을 주는 것이 좋습니다.
(3) 일관성 : 일관성을 통해 통일감과 안정감을 줄 수 있어야 합니다. 이로 인해 사용자에게 친근감을 줍니다.
XD에서 파일 저장하면 클라우드에 저장됩니다.
따라서, 바탕화면에 저장하려면 로컬 문서로 저장해야합니다.(파이썬)
UI/UX에 대해서 기본적인 의미를 배워봤는데 역시 개념만 익혀서는 이해가 잘 되지 않는 것 같아요!
다음 시간에는 사용 방법에 대해서 알아볼게요!
많은 분들의 피드백은 언제나 환영합니다! 많은 댓글 부탁드려요~~
'FrontEnd > UI UX' 카테고리의 다른 글
[UI/UX] Adobe XD를 이용한 실습 및 단축키 사용법 (0) | 2022.12.31 |
---|---|
[UI/UX] 기본 프로세스는? (0) | 2022.12.30 |