디자인 원칙

인지심리학 관점에서 디자인할 때 지켜야 할 규칙을 정해놓은 것.

디자인 원칙의 종류

게슈탈트 심리학

• 사람이 이미지를 인식할 때 주변에 있는 요소 간의 관계와 맥락에 영향을 받는다는 이론

• 유사성의 원리 : 모양, 색상, 크기, 질감 등 시각적으로 유사한 요소들을 하나의 그룹으로 인식
• 근접성의 원리 : 가까이 위치한 요소들을 하나의 그룹으로 인식
• 폐쇄성의 원리 : 불완전한 형태도 전체로 인식
• 연속성의 원리 : 선이나 패턴이 귾기지 않고 이어지는 형태로 인식
• 공통성의 원리 : 같은 방향으로 움직이는 것들끼리 더 관련성이 높다고 인식
• 전경과 배경의 원리 : 주목할 대상(전경)과 그 배경을 구분하여 인식
• 대칭성과 단순성의 원리 : 대칭적이고 단순한 형태를 더 쉽게 인식하고 기억

UX 비주얼 디자인 원칙

• UX에 영향을 끼치는 시각 디자인의 원칙을 정리한 것

• 스케일 : 상대적 크기를 이용하여 중요도와 순위를 표시
• 시각적 위계 : 중요한 순서에 따라 시선의 흐름이 이동하도록 디자인, 명확한 시각적 위계를 만들기 위해서는 2~3개의 크기를 사용
• 균형 - 대칭 균형 : 시각적으로 안정되고 정돈된 느낌
          - 비대칭 균형 : 좌우가 동일하지 않으나, 시각적 무게를 조절하여 균형을 맞춘 형태, 역동적이고 개성 있는 디자인을 표현할 때 사용
• 대비 : 서로 다른 요소 간의 차이를 극대화하여 시각적 긴장감을 유발하는 방법

UX/UI 심리학 법칙

• 사람이 어떻게 행동하고 왜 그런 행동을 하는지를 설명한 법칙이다.

• 제이콥의 법칙 : 사용자는 새로운 제품을 사용할 때도 자신이 이미 알고 있는 익숙한 제품과 같은 방식으로 작동하길 기대한다.
• 피츠의 법칙 : 터치 대상에 도달하는 시간은 거리와 크기가 함수 관계에 있다.
• 힉의 법칙 : 의사결정에 걸리는 시간은 선택지의 개수와 복잡성에 비례해 늘어난다.
• 밀러의 법칙 : 보통 사람은 작업 기억에 7(±2)개의 항목밖에 저장하지 못한다.
• 포스텔의 법칙 : 자기 자신에게는 엄격하고, 남의 것을 받아들일 때는 너그럽게 해야한다.
• 피크엔드 법칙 : 인간의 경험은 전체 평균이나 합계가 아니라, 절정의 순간과 마지막 순간에 느낀 감정을 바탕으로 경험을 판단하는 경향이 있다.
• 심미적 사용성 효과 : 보기 좋은 디자인을 사용성이 더 뛰어난 디자인으로 인식한다.
• 폰 레스토프 효과 : 비슷한 사물이 여러 개 있으면 그 중에서 가장 차이가 나는 한 가지만 기억할 가능성이 크다.
• 테슬러의 법칙 : 모든 시스템에는 더 줄일 수 없는 일정 수준의 복잡성이 존재한다.
• 도허티 임계 : 컴퓨터와 사용자가 서로를 기다리지 않아도 되는 속도(0.4s ↓)로 인터랙션하면 생산성이 급격히 높아진다.

기업의 디자인 원칙

• 기업의 철학을 담고, 심미성과 사용성이 높은 제품을 만들 수 있도록 제시하는 가이드

---

숙제~

게슈탈트 심리학에 대한 실제 사례

1. 유사성의 원리 : 모양, 색상, 크기, 질감 등 시각적으로 유사한 요소들을 하나의 그룹으로 인식
   실제 사례 : 같은 색의 버튼(더보기, <, >), 유사한 디자인 틀을 사용해 비슷한 기능이 있다는 것을 파악할 수 있다.

2. 근접성의 원리 : 가까이 위치한 요소들을 하나의 그룹으로 인식
   실제 사례 : 로그인 창의 '아이디' 입력 필드와 '비밀번호'입력 필드가 가깝게 배치되어 있어서 두 입력 필드가 '로그인을 하기 위한' 하나의 묶음으로 볼 수 있다
   

3. 폐쇄성의 원리 : 불완전한 형태도 전체로 인식
   실제 사례 : 새로고침 아이콘은 원의 테두리가 완전히 닫힌 상태는 아니지만 완전한 원의 형태로 인지하게 된다.
   

4. 연속성의 원리 : 선이나 패턴이 부드럽게 이어지는 방향으로 인식하려는 경향. 분리된 요소들이라도 자연스럽게 연결되어 보이면 하나의 흐름으로 인식
   실제 사례 : 새로운 음악이 옆으로 계속 이어지는 것처럼 보이고 사용자가 스크롤 할 때, 리스트가 부드럽게 연속적으로 나타나 전체 과정이 끊어지지 않고 진행된다고 인식한다.
   

5. 공통성의 원리 : 색상, 모양, 크기, 움직임 등 어떤 시각적 특성을 공유하는 요소들을 하나의 그룹으로 인식하는 경향
   실제 사례 : 두 버튼이 색상이라는 공통적인 시각적 특성을 가지고 있기 때문에 사용자는 이 버튼들이 비슷한 기능을 하는 요소로 인식하게 된다.
   

ux비주얼 디자인 원칙에 대한 실제 사례

1. 스케일 : 요소들의 상대적인 크기를 통해 중요도나 관계를 나타내는 원칙
   실제 사례 : 웹사이트의 제목을 가장 크게, 부제목은 그거보다는 작게, 본문은 더 작게!!
   

2. 시각적 위계 : 요소들의 중요도에 따라 시선을 유도하는 순서.
   실제 사례 : 같은 색상으로 디자인 했지만 다른 스타일로 디자인(배경색버튼/텍스트버튼)하여 어떤 버튼이 더 중요한 버튼인지 강조하여 쉽게 인지할 수 있다.
   

3. 균형 : 디자인 요소들의 시각적인 무게를 적절히 분배하여 안정감을 주는 원칙
   실제 사례 : 중앙에 핵심 아이콘이 배치되어 있고 양옆으로 아이콘들이 대칭적으로 배치되어 있어 안정감을 준다.
   

4. 대비 : 두 개 이상의 요소 간의 차이를 강조하여 시각적으로 돋보이게 하거나 정보를 명확히 구분하는 원칙
   실제 사례 : 핵심 버튼에 배경색과 확연히 대비되는 색을 사용하여 시각적으로 돋보이게 한다.
   

아래에 1가지를 골라 좋은 사례라고 생각되는 제품의 화면을 찾아보고 그 근거를 게슈탈트 심리학, UX 비주얼 디자인 원칙, UX/UI 심리학 법칙을 활용해서 설명해 보세요.

검색화면

게슈탈트 심리학

• 연속성의 원리 : 카데고리 태그들이 가로로 나열되어 오른쪽으로 스크롤할 수 있다.

• 유사서의 원리 : 콘텐츠 카드가 비슷한 크기와 형태로 디자인 되어 같은 유형의 정보라는 것을 쉽게 파악할 수 있다.

• 근접성의 원리 : 콘텐츠 카드들이 일정한 간격으로 규칙적으로 배치되어 있어 하나의 그룹(검색결과)로 인식한다.

UX 비주얼 디자인 원칙 적용

• 시각적 위계 : 검색창이 화면 최상단에 위치해 가장 먼저 눈에 띄고, 그 아래의 카테고리 태그들이 다음으로 유도된다. 콘텐츠 카드들은 화면의 중심이 되어 시선을 끈다.

• 균형 : 콘텐츠 카드와 하단의 네비게이션이 중앙을 중심으로 대칭을 이루고있다.

• 대비 : 카테고리 태그의 배경색과 텍스트 색이 구분되어 텍스트를 쉽게 읽을 수 있다.

유빈님이 주신 왕탈모빔 친구^^^^
너무 피곤해서 완전 이표정으로 디자인 카타 했다
UXUI 디자인입문 강의 듣고 필기를 공부했다면 더 쉬웠을거같은데 엉엉 ㅠ 괜히 억울하구..막그러구......맥도날드구...