UIUX 디자인 입문 5주차 디자인 원칙의 실제 사례 찾아보기 5-6(숙제)

• 1. [숙제] 제시한 원칙이 잘 드러난 실제 사례를 찾아보세요.
  1️⃣ 게슈탈트 심리학에서 3가지를 골라 실제 사례를 찾아보세요.
  1. 유사성의 원리
  2. 근접성의 원리
  3. 페쇄성의 원리
  4. 연속성의 원리
  5. 공통성의 원리
   2️⃣ UX 비주얼 디자인 원칙에서 3가지를 골라 실제 사례를 찾아보세요.
  1. 스케일
  2. 시각적 위계
  3. 균형
  4. 대비
   3️⃣ [심화] 아래에 1가지를 골라 좋은 사례라고 생각되는 제품의 화면을 찾아보고 그 근거를 게슈탈트 심리학, UX 비주얼 디자인 원칙, UX/UI 심리학 법칙을 활용해서 설명해 보세요.
  1. 온보딩
  2. 로딩
  3. 검색
  4. 회원가입
  5. 리스트 

예를 들면 토스 회원가입화면 아니면 배민 로딩화면 이런식으로 하나만 선택하면 됨 (심화)

게슈탈트심리학에 의해서 ~ 머 이 화면의 디자인이 잘 디자인 됬다. 라고 디자인원칙에 따라 설명할 수 있어야한다.

 

 

게슈탈트 심리학 3가지

 

1) 유사성의 원리 모양, 색상

 

스타벅스 앱이다. 앱에서 주문을 할때 보이는 화면이다.

물론 음료 푸드 상품 탭이 따로 있어서 별도 근접성의 원리와 같이 여백을 주지 않아도, 카테고리 별로 분리가 된다.

앱에서는 화면이 작기 때문에 탭이 유용한듯하다.

음료 탭안에서도 원형으로 음료라는 그룹으로 되어있구나를 알 수 있고, 보기도 편하다.

자세히보면 색상을 다르게 해놨다.

비슷한것끼리 묶여있다는것을 짐작할 수 있었다.

신메뉴가 추가된것은 핑크색이고 커피종류와 피지오는 짙은 그린색상 바탕이다.

그리고 리저브로 된것은 연한 크림색상으로 바탕이 되어있다.

모양보다도 색상이주는 소속감이 강한 예시이다.

 

 

2) 근접성의 원리 여백

 

이번에는 PC화면에서 스타벅스 홈페이지를 들어가보았다.

근접성 원리는 색상을 이용한 유사성보다 더 강력한 힘이 있다!

스타벅스 메뉴 카테고리이다.

음료, 푸드, 상품, 카드, 메뉴이야기 각각 잘 분류 되어있고, 여백으로 간결해보이며,

어떤 정보가 있는지 빠르고 쉽게 찾기 편하다. 

 

 

3) 연속성의 원리

 

삼성 메인 홈페이지에서 하단쪽 콘텐츠 부분인데, 연속성의 원리로 되어있는 것 같아 가져와보았다.

대기업은 어떨까하고 찾아보았다.

배운거랑 똑같은게 나온거같아서 신기방기!

텍스트도 추가가 되어있긴하지만 이미지와 너비를 맞춰주고 있고, 3컬럼으로 되어있으며,

수직적인 원리가 적용되었다. 

 

 

 

 

비주얼 디자인 원칙 3가지

 

1) 균형 사례

 

균형에서도 대칭을 이용한 올리브영 메인 홈페이지이다.

중심축을 기준으로 대칭으로 이미지가 분포되어있다.

판매하는 상품 이미지를 다수 활용하여 매치했다. 

각이 맞춰져 있어 정적느낌을 주고 안정적이다.

 

 

2) 시각적 위계 사례

 

요즈음 유투브에 자주 뜨는 사이더 피시화면 홈페이지를 들어가보았다.

텍스트의 위계 질서가 아주 잘 표현된 예시이다.

타이틀>중타이틀>내용

라지 미디엄 스멀

중요도 순으로 타이틀을 작게 그리고 점점 작게 표현했다.

 

 

시각적 위계 사례 하나더!

티맵지도에서 반반 비율인 스케일을 확인할수 있었다.

 

3) 대비 사례

아이쉐어링 앱이다. 이것은 지도화면이 거의 70~80프로 차지해보인다. 하단에는 공유하고 있는 친구가 뜬다.

본론으로 들어가면 

다른요소들은 무난한 검정 컬러임에 비해 긴급요청 색깔은 빨강으로 색상을 이용해 대비를 주었다.

지도앱이다보니 위험한 사항을 서로 공유된 사람에 긴급알람을 전송될수 있도록 했다.

클릭하면 빨강색으로 전체화면이 되고 10초 카운트 들어간다.

넘어간 바탕색깔도 앱에서 사용한 색깔 대비 빨강! 

 

이거 피츠의법칙 사례도 됌ㅋ 엄지손가락으로 편리하게 이용도 가능

 

그리고 추가적으로 스케일!!

쉐어링앱의 사용자 프로필을 볼 수 있는 화면이다.

첫빠따에는 이름과 전화번호내역이 들어가고

쉐어링앱의 주요기능들을 중간에 영역을 크게 배치했다.

주요기능이자 주목을 받을 수밖에 없는 기능이라 생각한다.

이 앱의 목적이 알림관리와 등록한 상대방에 대한 정보인 프라이버시&친구!

그리고 부수적 필요한 프리미엄서비스와 고객관리를 그 아래 배치했다.

 

 

심화

 

당근 마켓 

 

 

리스트

홈화면에 리스트에서 글자크기를 비주얼 디자인 원칙의 시각적 위계를 잘 적용해서 만들었다.

그리고 플로팅버튼인 글쓰기 버튼의 색깔이 주황색으로 확 튀기때문에 쉽게 글쓰기 버튼을 찾아 중고거래 상품을 올릴 수 있어서 대비표현도 잘 되어있다. 다른 것에 비해 강조되고 싶을 때 색감을 처리해서 대비를 많이 표현한다고 배웠는데,

중고거래 특성상 사려는 사람은 클릭해서 보면 되지만 팔려고하는 사람은 글쓰기 버튼을 빨리 찾는데 인지부하 측면에서도 복잡함이 덜 하고 접근하기 쉬운 UI이다.

게슈탈트의 원칙에서 근접성의 원리에 있어서 여백과 선이 잘 표현되어있어 각 사용자들이 올린 리스트를 구분하여 볼 수 있다.

그리고 우측 하단에 버튼이 배치되어있어서 오른손의 엄지와 가까와서 쉽게 이용할 수 있기 때문에 심리학 법칙에서도 피츠의법칙이 잘 적용되어있다.