대비
대비 (Contrast)
대비(Contrast)는 페이지에 시각적 흥미를 더하고, 서로 다른 요소 사이에 조직적 위계(hierarchy)를 만들어 사용자가 정보를 빠르게 찾도록 돕는 효과적인 방법 중 하나예요.
출처: 문서
본문
참고: 대비가 효과적이기 위한 중요한 규칙은 강해야 한다는 것이에요. 약하게 하지 마세요.
주관계와 부관계의 대비 (The Contrast of major and minor relationship)
사용자가 (폼, 모달 같은) 빠른 조작을 하도록 돕기 위해, 더 중요한 조작이나 빈도가 높은 조작을 강조해요.
참고: 강조하는 방법은 핵심 항목을 키우는 것만 있는 게 아니에요. 다른 항목을 약화시키는 방법도 있죠.
Accept와 Reject는 기본 버튼(default button)을 사용해야 해요. UI가 사용자의 결정에 영향을 주면 안 되기 때문이에요.
사용자가 신중하게 결정해야 하는 상황에서는 시스템이 중립을 유지해야 해요. 사용자를 대신해 결정하거나 판단을 유도해서는 안 돼요.
전체와 부분의 대비 (Contrast of whole and part)
타이포그래피(typesetting), 폰트(글꼴), 크기를 바꾸는 방식으로 서로 다른 레벨을 강조하고 전체와 부분을 구분해, 페이지를 더 유연하고 리드미컬하게 만들어요.
상태 관계의 대비 (Contrast of the state relation)
다양한 색상의 포인트를 사용해 서로 다른 상태를 보여 주는 예시예요.
마우스를 움직이지 않았을 때, 이 항목과 다른 항목들이 명확히 다른 시각적 효과를 보여 사용자의 조작에 영향을 주는 예시예요.
색상을 바꾸고 보조 도형을 추가하는 방식으로 상태 관계의 비교를 구현해, 사용자가 다양한 정보를 더 잘 구분하도록 도와줘요.
흔히 볼 수 있는 형태로는 「정적 대비(static contrast)」와 「동적 대비(dynamic contrast)」가 있어요.