1228_UX/UI (+게슈탈트 심리학, 디자인 원칙)
📕 5주차 📕
01. 게슈탈트 심리학
1. 유사성의 원리
2. 근접성의 원리
3. 폐쇄성의 원리
4. 연속성의 원리
5. 공통성의 원리
1. 유사성의 원리
👉 크기나 형태, 방향, 색 등의 특성이 비슷한 것끼리 묶어서 지각하려는 경향
예시) VIBE의 홈화면
같은 주제끼리 비슷한 크기, 모양의 UI를 활용해, 사용자들에게 유사 관계를 인지하도록 한다.
-> 정보의 그룹화로 사용자가 내용을 파악하기가 편함.
2. 근접성의 원리
👉 가까운 것끼리 묶어서 지각하려는 경향을 말해요.
사람들은 가까이 있는 요소들이 멀리있는 요소보다 더 관련성이 있다고 느낌
어떤 것들이 모두 비슷한 간격으로 떨어져 있다면, 사이에 특별한 관계가 있다고 생각하지 않을 것.
유사성의 원리에서 알아본 색상을 사용한 유사 관계보다 여백을 사용한 근접 관계가 더 큰 힘을 가짐.
예시) Footer 티스토리
같은 카테고리끼리는 가까이 두고 사이에는 여백을 크게 주어 그룹별로 잘 구분하고 있음
그룹마다 상단에 타이틀을 가까이 두어 그룹마다 어떤 정보가 있는지 빠르게 인지하도록 함.
3. 폐쇄성의 원리
👉 공백이 있더라도 틈이나 간격을 메워서 닫힌 형태로 인식하려는 경향
도형의 일부가 끊어져 있거나, 이어져 있지 않더라도 완벽한 형태로 인식할 수 있음
예시) 로딩화면, 스피너도 다 채워졌을 상황을 인식해서, 정보를 이를 보고 쉽게 전체 형태(바, 원)을 지각할 수 있음.
4. 연속성의 원리
👉 연속적으로 직선이나 곡선을 이루는 요소를 잘 인지하는 경향
사람들은 어떤 요소가 방향성을 가지고 연속되어 있을 때 편안함을 느낀다.
직선이나 곡선을 따라 배열된 대상을 하나의 단위로 인식
예시)
리스트 형식에서 많이 찾아 볼 수 있다. 여러개의 컴포넌트들이 연속적으로 배치되면 중간에 다른 요소가 가로막더라도 사용자는 그것을 하나의 그룹으로 인식한다.
5. 공통성의 원리
👉 같은 방향으로 움직이는 것들끼리 더 관련성이 높다고 인식하는 경향
모양, 색상 등에 관계없이 함께 움직이거나 바뀌는 요소는 서로 더 관련이 있다고 느낌.
이 원리는 주로 모션 그래픽에서 자주 사용됨
예시) 넷플릭스
탐색할 때 영화와 tv 프로그램이 장르나 테마에 따라 가로로 그룹화됨
각 장르나 테마에 따라 썸네일 + 제목의 리스트가 한 방향으로 움직이는 것을 보고 한 그룹이라는 것을 알 수 있음
02. UX 비주얼 디자인 원칙
1. 스케일
2. 시각적 위계
3. 균형
4. 대비
1. 스케일
👉 상대적인 크기를 사용하여 구성의 중요도와 순위를 표시하는 것.
예시) 앱스토어
앱 내에서 사용자에게 보여주고 싶어 하는 '광고 영역'을 상단에 크게 배치함.
그리고 그 밑에 추천 앱이나, 인기 앱 등이 배치 됨.
2. 시각적 위계
👉 중요한 순서에 따라 시선의 흐림이 이동하도록 디자인하는 것
시각적 위계는 크기, 색상, 간격, 배치 등을 통해 표현할 수 있음
사용자가 화면에서 정보를 찾는데 어려움을 겪는 경우 명확한 시각적 위계가 없을 가능성이 높음
명확한 시각적 위계를 만들기 위해서는 2-3개 정도의 텍스트 크기를 사용한다.
위계의 낮음, 중간, 높음에 따라 요소의 크기를 large, medium, small로 분류
중요하다고 생각되는 요소는 채도가 높고 색상 대비가 크게, 덜 중요한 요소에는 채도가 낮고 색상 대비가 크지 않도록 적용
예시) 브런치
Large: 오전 11시, 브런치스토리 인기글
Medium: 글 제목
small: 본문 미리보기, 작가
중요도 순으로 눈에 들어올 수 있게끔 시각적 위계를 두어서 디자인 됨.
3. 균형
👉 디자인 요소 간에 적당한 배열이나 비율을 주는 것
시소처럼 디자인 요소 간의 균형을 맞춘다고 생각하면된다.
수직이나, 수평의 가상 축에 비슷한 양의 시각적 정보가 배치되도록 한다. 이 때 꼭 대칭이 아니어도 된다.
✔️ 균형에 활용할 수 있는 요소
1) 대칭
디자인 요소가 가상의 중심축을 기준으로 대칭으로 분포하는 것
안정적이고 정적인 느낌을 주고 싶을 때 사용
2) 비대칭
디자인 요소가 가상의 중심축을 기준으로 비대칭으로 분포하는 것
역동적이고 신선한 느낌을 주고 싶을 때 사용
3) 방사형
중앙의 점을 기준으로 원형으로 배치한 것
시선을 중앙에 집중시키고 싶을 때 사용
4. 대비
👉 눈에 띄게 구별되도록 강조하기 위해 두 요소 간의 차이를 두는 것
특정 부분을 사용자에게 돋보이게 하고 싶을 때 사용
크게 색상을 사용해 두 디자인요소간에 뚜렷한 차이를 줌
주로 명의 차이를 주거나 색상의 차이를 주는 방법을 많이 사용
주의해야할 것은 덜 중요한 텍스트의 강조를 줄이기 위해 배경과의 명도 차이를 너무 줄이지 않아야 함. 너무 흐릿한 글자는 사용성을 떨어뜨림.
예시) 모니모
탈퇴는 돌이킬 수 없는 기능이기 때문에 제품에서 사용하지 않는 전혀 반대의 색상을 사용해 강조하고 있음
📕 6주차 📕
👩💻
화면을 구성하는 요소를 나누는 방법에는 여러 가지가 있어요
예를 들어, 파운데이션 → 엘리먼트 → 모듈 → 페이지로 나눌 수도 있어요.
파운데이션: 더 이상 세부 속성으로 쪼개지지 않는 가장 기본이 되는 요소
예) 색상, 폰트, 아이콘 등
엘리먼트: 파운데이션이 모여서 만드는 요소
예) 버튼, 뱃지, 탭 등
모듈: 엘리먼트가 모여서 만드는 요소
예) 리스트, 캐러셀, 네비게이션 등
페이지: 모듈이 모여서 만드는 최종 화면
예) 홈, 마이페이지, 장바구니, 회원가입