[디자인부트캠프]디자인 기초

DAY2 : UI와 UX

[복습내용]
SERVICE / UX / UI란?
SERVICE 디자인은 아날로그부터 디지털까지 포함한 디자인이다. ex) 교통카드
SERVICE : 전략, 행동 과학, 마케팅, 프로젝트 관리, 서비스 컨셉, 비즈니스 이해, 서비스 운영/유지
UX : 사용자 만족도 조사, 사용성 테스트,인사이트 추출, 요구사항 분석, IA기획 (감성적인 영역)
* IA (Information Architecture)란. 서비스를 기획함에 있어 기획자의 설계 구조를 전반적으로 정리하는 문서
UI : GUI, SUI, VUI, 사용자와 만나는 최종 접점을 디자인, 일러스트, 인터렉션 디자인, 사용성 (기술적인 영역)
*GUI(Graphical User Interface)는 사용자가 컴퓨터와 상호작용할 수 있도록 그래픽을 사용하는 인터페이스
*VUI(Voice User Interface) 음성을 통해 사용자와 컴퓨터가 상호작용하는 인터페이스

 디자인의 4가지 원리
1) 균형 : 어느 한쪽으로 기울거나 치우치지 않고 고른 상태 (비례-완전한 대칭ex카드뉴스, 방사형-중심에서 밖으로 퍼짐ex시계, 비대칭-숨겨진 균형ex나이키)
2) 대비 : 질적, 양적으로 반대되는 요소들이 서로 대립되어 나타나는 구조 (형태, 크기, 명암, 질감, 색상)
3) 강조 : 어떤 특정 부분을 강하게 표현하여 두드러지게 하는 것 
4) 조화 :두 개 이상의 조형 요소들이 만들어 내는 어울림 (유사조화, 대비 조화)

---

UX 연구를 통해 얻어낸 여러가지 원칙 : 사람이 어떻게 행동하고 왜 그런 행동을 하는지를 설명하는 원칙

1. 멘탈모델 : 유저가 시스템이나 서비스를 어떻게 이해하고 예측하는지를 나타내는 개념
ex) 카카오톡
우리가 기대하는건 메신저 기능
텍스트 작성/수정/삭제 등 메세지의 기능을 이해하고 행동 할 수 있다. 
행동패턴=> 멘탈모델

ex) 인지공간  영화에 대해 의견을 나눈다
=> 관란 후 영화 토론한다 / 영화 추천한다 => 영화 토론한다 => 토론을 피한다, 의견을 물어본다…등등 행동 기준이 나눠짐

2. 어포던스 : 디자인 요소가 유저에게 어떤 동작을 할 수 있는 단서나 힌트를 제공하는 형태
행동 유도 => 자연스럽게 내가 어떤 행동을 유도하게 하는 것
ex)도로 유도선 / 설계자의 의도에 맞게 행동하는 것

3. 게슈탈트 원칙 :  사람이 이미지를 인식할 때 주변에 있는 요소 간의 관계와 맥락에 영향을 받는다는 이론
1) 유사성의 원리 : 겉모습이 비슷하면 서로 더 관련성 있다고 보고 그룹화 한다는 원리
색상 사용한 유사 관계 형상은 가장 강력함(붉은색이 변주를 주기에 좋은 색상- 활력) 
모양 < 크기 < 색상

2) 근접성의 원리 : 가까이 있는 것이 멀리 있는 것보다 관련성이 있다고 느낀다는 이론
(gmb = 로고, 메뉴 / 게시판명 /  컨텐츠) 각각의 컨텐츠들 근접성의 원칙 가까운 것을 그룹하는 경우가 있음 
여백을 사용한 근접 관계가 더 큰 힘을 가짐

3) 폐쇄성의 원리 : 공백이 있더라도 간격을 메워서 닫히 상태로 인식하는 원리 (주로 아이콘에 많이 사용함) - 개방감이 있음

4) 연속성의 원리 :  연속성의 원리 연속적으로 직선이나 곡선을 이루는 요소를 잘 인지하는 원리 / 편안함을 느낌 / 하나의 단위로 인식함

5) 공통성의 원리 : 모양, 색상 상관없이 함께 움직이며 바뀌는 요소는 서로 관련이 있다고 느끼는 원리 (모션 그래픽에서 많이 사용함)

4. 힉의 법칙
사용자가 선택하는 하는데 중복, 과잉을 줄이면 사용자가 빠르게 목적을 달성하도록 돕는다는 이론
모바일 퍼스트 개념이 나오면서 다양한 ui에서 선택지들이 줄어드는걸 알 수 있음

5. 피츠의 법칙
엄지 존 멀어질수록 빈도수가 적다는 것을 알 수 있음
터치의 거리감에 따라서 다르게 느낌 
* 상단 => 메뉴 / 미디엄 => 컨텐츠 / 하단 => 확인, 결제하기(액션)
요즘은 컨텐츠가 많아서 요즘 both 양쪽 고려하는 편

6. 제이콥의 법칙
인체 공학적인 키보드가 많이 나왔지만 사용자들은 결국 익숙한 키보드를 사용함
결국 새로운 ui가 나왔어도 보편하고 익숙한 ui를 사용한다는 법칙임 

7. 밀러의 원칙
같은 숫자여도 덩어리로 묶어서 기억하는게 쉬움
026493217
02) 649 3217

[오늘의 과제-UX원칙과 UX디자인이 잘 적용된 굿 사례 분석 후 컴포넌트 활용하여 만들어보기]

https://www.figma.com/design/VyzfCWJe51NMFSiSX4GUwA/PD_3_%E1%84%80%E1%85%B5%E1%86%B7%EC%A7%80%ED%9D%AC?node-id=13-2&t=TgDLalj4CPsr97kn-1

[번외-피그마 사용법 익히기 / 마음에 드는 앱 리서치 하기]