UXUI 디자인 입문 - 1주차 정리
UX/UI란?
UI - 제품과 사용자 사이를 이어주는 다양한 시각적 요소
UX - 사용자가 제품을 사용하는 과정에서 얻는 경험
제품과 사용자 사이를 이어주는 것이 UXUI다.
UI디자인은 화면의 전체적인 구조와 시각적 요소(레이아웃, 색상, 크기, 정렬, 컴포넌트(버튼, 아이콘, 이미지 등)를 디자인 하는 것이다.
UX디자인은 사용자의 경험을 이끄는 것이며 제품 외에 서비스나 브랜드등 이용할 때 느끼는 경험을 UX로 볼 수 있다.
HUI(Human Computer Interaction) - 인간과 컴퓨터 간의 상호작용에 대해 연구하는 분야
CX(Customer Experience) - 브랜드를 처음 접하는 순간부터 사용까지 고객의 모든 측면에서 경험하는 느낌이나 인상을 말한다. UX와 다른 점은 느낌과 인상에 집중된다.
BX(Brand Experience) - 브랜드와 상호작용할때 느끼는 인식, 생각, 감정을 의미한다. CX,UX가 포함되어 있다.
UX UI 디자이너의 역할
UI디자이너 - 화면 전체적인 구조와 시각적인 요소를 다자인
UX디자이너 - 사용자가 제품이나 서비스를 이용하면서 느끼는 총체적인 경험을 디자인(조사, 분석)
프로덕트 다지이너 - UI/UX를 포함한 제품 전반의 경험(시작과 끝)을 디자인
애플의 Human Interface Guidelines, 구글의 Material Design
디자인 가이드라인(=디자인 시스템, 스타일 가이드) - 일반적으로 브랜드의 디자인 원칙과 컴포넌트별 규칙을 정의한 것
-일관된 디자인을 하기위한 지침서
-디자인 할 때 지켜야하는 원칙과 규칙 제안
-디자인 스타일부터 브랜드 철학이나 디자인 원칙등 다양한 것이 포함
디자인 가이드라인의 좋은점
기업
- 브랜드 아이덴티티 유지
- 디자이너 간의 결과물 수준을 상향 평준화
디자이너 - 컴포넌트를 재사용하면서 불필요하게 반복되는 업무를 줄여 효율적인 업무
사용자 - 일관된 사용자 경험
애플의 Human Interface Guidelines과 구글의 Material Design
UXUI의 근간
iOS와 안드로이드가 전 세계 운영체제 사징의 99%를 차지
운영체제의 규칙
한 화면을 디자인해 iOS와 안드로이드 모두 동일하게 적용하지만 일부 특정한 스타일은 운영체제 이슈로 적용이 불가능한 경우도 있음
UX/UI의 역사와 트렌드
리얼메타포 > 스큐어모피즘 > 플랫디자인 > 뉴모피즘
리얼메타포
1990년대
IBM HCI디자인 팀에서 초보자들도 컴퓨터를 쉽게 이용할 수 있게 실제 물건을 모방하여 디자인한 것이 시초이다.
대표적으로 Real Thing 프로젝트
디자인은 혁신적이었지만 실제 사용성은 좋지 못 했다.
스큐어모피즘
2007년, 아이폰과 함께 등장한 양식
실제 물건의 특징을 최대한 반영
디자인에 많은 시간이 필요
플랫디자인
2013년 애플이 iOS7에서 처음 선보인 GUI 양식
사용자의 인터페이스를 조작능력이 늘어나면서 이전처러 ㅁ자세하게 디자인 하지 않아도 UI를 이해할 수 있게 됨
기술의 발전으로 스크린 크기가 다양해지면서 반응형으로 효율적인 디자인 필요성이 커짐
그라데이션이나 그림자와 같은 입체적인 효과를 줄이고 최대한 단순하게 표현
뉴모피즘
2020년부터 스큐어모피즘과 플랫디자인의 장점을 결합한 디자인 트렌드로 떠오르고 있는 양식
실물의 입체감을 구현
단순한디자인+그림자로 볼륨감을 줌
내가 자주 쓰는 서비스 뜯어보기
Filled button을 사용
보낼 금액이 입력되지 않은 상태에서 버튼이 Disabled상태가 된다.
보내기 버튼이 하단에 위치하여 한손으로 사용할 경우에도 쉽게 사용할 수 있다.
텍스트필드가 대화형으로 보인다.
텍스트필드에 숫자로 10,000원이 적히면 하단에 1만 원이라고 표시되어 사용자가 긴 숫자를 읽지 않아도 얼마를 입력했는지 쉽게 확인 할 수 있다.
이미지 출처 WWIT
