[하루 5분 UX] 요약 | 8장 시각 디자인 원칙

51. 시각적 무게(콘트라스트와 사이즈)

• 사용자가 의미있는 정보를 알아차릴 수 있게 함
• 콘트라스트 : 강조
• 뎁스와 사이즈 : 시각적 계층을 만들어냄

52. 색상

• UX 디자이너 : 기능에 집중. 와이어프레임을 작성할 때 흑백만 사용.
• UI 디자이너 : 심미성, 느낌, 스타일에 집중.
• 그러나 때로는 색상 자체가 기능이 되기도 한다. (ex. 맛과 어울리는 사탕, 신호등)
• 색상에 의미를 담는다
  • 확인, 취소, 삭제
  • 경고, 강조
  • 무언가를 나타낼 필요가 없다면 색상은 UI 디자이너에게 맡기는 것이 좋지만, 색상을 일부러 선택했다면 의미를 담아야 한다
• 진출 혹은 후퇴를 표현한다
  • 사람들은 앞으로 진출하는 것처럼 보이는 색상을 더 많이 클릭한다
  • 클릭하길 원하지 않는 부분을 후퇴 시킨다
• 와이어프레임을 단순하게 만들어라

53. 반복과 패턴 깨기

• 패턴이 반복될 경우 왼쪽에 있는 옵션을 많이 클릭할 것 (왼쪽에서 오른쪽으로 읽어나가기 때문에)
• 강조하고 싶은 부분에 패턴의 변화를 주어라
  • 예상치 못한 색상, 사이즈, 형태, 스타일

54. 라인 텐션과 엣지 텐션

• 사람의 두뇌는 존재하지 않는 패턴조차 본다
  • 라인텐션 : 선이 없어도 일렬로 있으면 선을 인식
  • 엣지텐션 : 네모모양이 없어도 엣지 4개가 있으면 네모모양을 인식
• 시각적 텐션을 이용하여 사람들이 클릭했으면 하는 버튼으로 향하는 시각적 길을 만들 수 있다 (그라데이션, 시각적 무게 등)

55. 정렬과 근접성

• 디자인 요소를 추가하지 않고도 순위와 의미를 부여하는 방법
• 정렬 : 열과 행 속에서 의미를 전달할 수 있음
• 근접성 : 두 대상 사이의 거리가 서로 관련이 있게 느껴짐

56. UX를 위한 모션 이용하기

• 모션은 종종 짜증을 유발한다
  • 모션이 반복되게 하거나, 사용자를 기다리게 하지 마라
  • 사용자가 해야할 목표에 방해가 되게 하지 마라
• 직선은 방향성을 만든다
  • 주요 기능을 강조하거나 사용자들이 어디로 가야할지 안내하고 싶다면 움직이는 직선 모션
• 사람들의 시선은 곡선을 따라 이동한다
  • 온보딩 시 화면을 한바퀴 둘러볼 수 있도록 곡선 모션 이용