[231227]UXUI 디자인 입문 강의 5주차 강의정리/HW_디자인 원칙 실제 적용 사례 찾아보기

12/27

*강의 정리*

1. 디자인 원칙
   인지심리학의 관점에서 디자인할 때 지켜야 할 규칙을 정해놓은 것
   많은 사람들이 비슷하게 느끼고, 행동하는 방식에 기조해 디자인하는 방법을 제시
   사람들이 편안하게 느끼고 자연스럽게 행동하도로 유도할 수 있고, 사용성이 높은 제품을 만들 수 있도록 도와줌
2. 게슈탈트 심리학
   : 사람이 이미지를 인식할 때 주변에 있는 요소 간의 관계와 맥락에 영향을 받는 다는 이론
   *착시현상_사람의 의식이 기본적으로 통일성, 연속성, 유사성을 요구하기 때문에 생김
   사람의 뇌는 필요없는 것은 지우고 기억하기 쉬운 상태로 정리해 받아들이기 때문!
   1) 유사성의 원리
   -모양, 크기, 색, 방향: 차이가 있다면 차이가 있는 이유가 있겠지?라고 생각함
   색상 유사성(가장 강력함)>모양의 유사성
   정보의 그룹화 - 유사성의 원리를 이용할 것
   2) 근접성의 원리
   -가까운 것끼리 묶어서 지각하려는 경향
   여백의 근접 원리>색상의 유사성>형태의 유사성
   예) 푸터-카테고리끼리 분리하기 위해 여백
   3) 폐쇄성의 원리->신기하다
   공백이 있더라도 틈이나 간격을 닫힌 형태로 인식

   

   4) 연속성의 원리
   직선과 곡선을 따라 배열된 대상을 하나의 단위로 인식 EX)핀터레스트의 수직선 배열
   5) 공통성의 원리
   EX) 넷플릭스 장르, 테마에 따라 가로로 그룹화
3. UX 비주얼 디자인 원칙
   :  UX에 영향을 끼치는 시각 디자인의 원칙을 정리한 것
   장점! 시각적으로 매력적인 이유를 근거를 들어 설명할 수 있도록 도와줌! 근거가 있다.
   심미성&사용성 모두 향상
   제품에 몰입하는 것을 도와주고 쓰기에도 편리함
   - 스케일
    상대적인 크기를 사용하여 중요도와 순위를 표시
    3가지 이하의 크기
   - 시각적 위계
    중요한 순서에 따라 시선의 흐름이 이동하도록 유도하는 디자인
    2~3개의 텍스트 크기 사
   - 균형
    디자인 요소 간에 적당한 배열이나 비율을 주는 것, 시소처럼 요소 간의 균형을 맞춘다?
    비대칭이더라도 어느 정도의 균형을 맞추자
    >대칭, 비대칭, 방사형, 대비 
   
   
4. UX/UI 심리학 법칙
   (제이콥, 피즈, 밀러, 포스텔, 피크엔드의 법칙 / 심미적 사용성 효과, 폰 레스토프 효과, 테슬러의 법칙, 도허티 임계)
   사람의 마음을 깊이 들여다보고 이해해 보면서 어떤 것들이 디자인에 직접적인 영향을 끼치는지 알아보자
   
    - 제이콥의 법칙: 새로운 제품을 접하면 기족의 지식과 경험을 바탕으로 비슷하게 사용하려고 시도함
      > 멘탈모델? 다양한 대상에 대해 갖고 있는 생각패턴 예) 스마트폰 사진을 확대할 때 두 손가락 사용하는 것
   
    - 피즈의 법칙:사용자가 인터렉션해야하는 대상은 거리가 가깝고, 크기가 커야 사용성이 좋다.
     > 터치하는 대상 크기. 대상끼리의 간격, 손이 닿을 수 있는 거리 고려하기
     > 아이콘 영역 확보, Thumb zone-중요한 기능들은 오른손 엄지가 닿는 곳에 배치
   
   -힉의 법칙: 의사결정에 걸리는 시간은 선택지의 개수와 복잡성에 비례하여 늘어난다
     >*인지부하 최소화하기-복잡한 작업은 더 작은 단계로 나누기, 선택지 개수 최소화, 추천 선택지 강조도 굿,
     너무 추상적.단순화는 좋지 않을 수도 예)토스...단계로 쪼개서 쉽게 통과해서 더 쉽다고 느낌
   
   - 밀러의 법칙: 보통 사람은 작업 기억에 7(+- 2)개 정도밖에 저장하지 못함
     >*단순 개수가 아니라 그룹화 된 정보의 덩어리임!!, 덩어리의 크기는 중요 x
     >정보의 구조화, 그룹화
     
5. 기업의 디자인 원칙(위의 3가지를 합쳐서 기업의 철학을 담음)
   - 기업의 철학을 담고, 심미성과 사용성이 높은 제품을 만들 수 있도록 제시하는 가이드이다.
   -Spotify: 연관성, 인간, 통일

*HW_디자인 원칙의 실제 사례 찾아보기*

 

  제시한 원칙이 잘 드러난 실제 사례를 찾아보세요.

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

[네이버]

• 게슈탈트 심리학 중 유사성의 원리, 공통성의 원리_언론사들이 한 그룹으로 묶임
• 시각적 위계 존재
• 컨텐츠 양의 비례하여 균형이 잡힘

[티빙]

• 카테고리끼리 유사성의 원리
• 폐쇄성 적용
• 강조하고 싶은 컨텐츠를 크게 하여 스케일 차이를 두었다.