[UIUX] UIUX디자인입문 W1-5

1.  게슈탈트 심리학 3가지 사례

1) 폐쇄성의 원리 - 정보의 공백을 메꾸어 인식하는 경향
- 3번째 썸네일이 끊겨 있어도 옆으로 스크롤하면 완전한 카드 캐러셀이 나올 것이라고 기대

2) 공통성의 원리 - 같은 방향으로 움직이면 더 관련성이 높다고 생각함
- 위로 스크롤 시, 디바이더로 나뉜 각 쇼핑몰 별로 훑어 볼 수 있음
- 옆으로 스크롤 시,  디바이더로 나뉜 해당 쇼핑몰에서만 취급하는 의류를 볼 수 있다고 생각함

3) 유사성의 원리 - 크기나 방향, 색 등 특성이 비슷한 것끼리 묶어서 지각하는 경향
- 작은 정사각형 아이콘들은 하나의 카테고리 메뉴라고 취급
- 4:3 직사각형 사진은 각 상품별 썸네일이라고 지각
- 맨 위 볼드체는 각 쇼핑몰, 레귤러체는 상품명, 분홍색 %는 할인율 등이라고 지각
- 빈 하트가 아닌 분홍 하트는 찜 목록에 들어가 있는 것들이라고 지각

2. 에어비앤비 :  UX 비쥬얼 디자인 원칙 3가지

1) 시각적 위계 - 중요한 순서대로 사용자의 시선이 자연스럽게 따라가도록
- 숙소 목록대 위치 표시 지도 화면 비율 7:3. 같은 화면에서 숙소 상세 상태와 더불어 부가적으로 대략적인 위치를 함께 보여줌
- 숙소 상태 카드 : 사진, 제목, 부제목, 가격, 별점을 타이포그라피로 위계 설정. 숙소 사진과 제목으로 중요한 정보를 먼저 눈에 띄도록 배치

2) 균형 - 디자인 요소간 적당한 배열과 비율
- 숙소별 사진 : 정사각형 배치로 균일한 느낌을 줌
- 숙소사진 + 상태 설명 : 약 3:4 직사각형 배치
- 각 숙소 컴포넌트와 gnb, 카테고리 마진값을 동일하게 맞춰 각 요소간 수직 축의 대충을 이뤄 균형을 맞춤
- 숙소 검색 시 안정적이고 정적인 느낌을 줌

3) 스케일 - 상대적인 크기로 중요도와 순위를 부여
- 숙소 사진 배치를 맨 상단, 가장 크게 배치하여 최우선순위를 부여. 사진을 먼저 확인해 숙소 상태를 점검할 수 있도록 함
- 가격 및 예약 CTA 버튼 영역을 카드 영역으로 따로 잡아 그 다음으로 시선이 떨어지게 만듦. 예약하기 버튼에 색상을 부여해 대비를 강조.
- 평점이 좋은 숙소인 점을 아이콘 뱃지와 카드 영역으로 잡아 유저에게 숙소에 대한 신뢰감을 부여
- 각 제목과 부제목 간의 글자 크기, 볼드 여부, 색상으로 위계를 부여함