언제나 안전한 시각적 디자인 규칙
매번 이러한 규칙을 따를 필요는 없습니다. 이 규칙을 어길 타당한 이유가 있다면 그렇게 하십시오.
그러나 이러한 규칙을 따르는 것이 항상 안전합니다.
순수한 흑백을 사용하는 대신 흑백에 가깝게 사용하십시오.
순수한 검정은 화면상 부자연스럽고, 순수한 흰색은 너무 밝습니다. 대신 검정에 가깝고 흰색에 가까운 것을 사용하십시오. 이 규칙에서 “검은색” 및 “흰색”에 대한 다른 참조는 사용자가 해당 규칙을 따르고 있다고 가정합니다.
당신의 중립을 포화
중립은 일반적으로 검은색, 흰색 또는 회색입니다. UI에서 색상을 사용하는 경우 해당 색상 중 일부를 중립에 추가하십시오. 이렇게 하면 색상 팔레트가 더 일관성 있게 느껴질 것입니다. HSB 색상 시스템을 사용할 때 채도는 5% 미만이어야 합니다.
중요한 요소에는 고대비를 사용합니다.
중요한 요소는 버튼, 콘텐츠 또는 사용자가 주의를 기울여야 하는 기타 모든 것입니다. 대비가 높다는 것은 요소가 주목을 받는다는 것을 의미하며, 이는 중요한 요소에 유용합니다. 사용자의 주의가 필요하지 않은 요소(예: 구조적 요소, 그림자)는 가능한 한 적은 대비를 사용할 수 있습니다.
디자인의 모든 것은 의도적이어야 합니다.
디자인의 모든 것에 주의를 기울여야 합니다. 공백, 정렬, 크기, 간격, 색상, 그림자, 모든 것. 누군가 디자인의 임의의 부분을 지적하면 왜 그렇게 보이는지 설명해야 합니다. 그렇지 않으면 디자인이 일관성 있게 느껴지지 않습니다.
디자인을 처음 접하는 경우 이 규칙을 사용하여 의도하지 않은 사항에 대해 알아볼 수 있습니다.
광학 정렬은 종종 수학적 정렬보다 낫습니다.
디자인 소프트웨어는 사물을 수학적으로 정렬할 수 있습니다. 그러나 일부 모양은 이러한 유형의 정렬에 적합하지 않습니다. 예를 들어, 일부 이상한 모양은 수학적 중심과 시각적 중심이 다릅니다. 일이 제대로 보이도록 눈을 정렬해야 하는 경우가 많습니다.
눈 맞춤은 연습이 필요하지만 정기적인 연습을 통해 금방 배울 수 있습니다.
텍스트가 클수록 글자 간격과 줄 높이가 작아집니다.
텍스트가 작아질수록 글자 간격과 줄 높이가 높아집니다.
이것은 모든 텍스트에 적용됩니다. 텍스트가 클수록 각 문자와 줄 사이에 필요한 공간이 줄어듭니다. 그 반대. 그렇지 않으면 큰 텍스트가 퍼지고 작은 텍스트가 서로 너무 가깝게 나타날 수 있습니다.
컨테이너의 가장자리는 컨테이너 및 배경과 대비되어야 합니다.
예: 1픽셀 테두리가 있고 더 어두운 배경에 더 어두운 배경이 있는 카드가 있는 경우 1픽셀 테두리가 둘보다 더 밝아야 합니다. 지도의 배경색과 페이지의 배경색 사이에 밝기가 없어야 합니다. 그렇지 않으면 컨테이너의 가장자리가 충분히 선명하게 보이지 않습니다. 밝은 배경색에도 동일하게 적용됩니다. 1px 테두리는 두 배경색보다 어두워야 합니다.
아래 예에서 왼쪽은 잘못된 것이고 오른쪽은 오른쪽입니다.
모든 것이 조정되어야 합니다.
정렬을 통해 사물이 연결되어 있음을 알 수 있습니다. 무언가가 다른 것과 맞지 않으면 디자인에 속하지 않는 것처럼 느껴집니다. 이상적으로는 각 요소가 일종의 논리에 따라 다른 요소와 정렬되어야 합니다.
팔레트의 색상에는 고유한 밝기 값이 있어야 합니다.
색상의 밝기 값이 다르면 색상뿐만 아니라 밝기에서도 색상과 느낌이 크게 다릅니다. 이렇게 하면 색상이 서로 경쟁하지 않으므로 더 나은 색상 팔레트가 생성됩니다.
중성 색상의 채도가 높으면 따뜻하거나 차가운 색상을 사용하십시오. 둘 다 사용하지 마십시오.
따뜻한 색상과 차가운 색상을 모두 사용하여 중성색을 채우면 색상 팔레트가 일관되지 않게 느껴집니다.
아래 예에서 왼쪽은 따뜻한 배경과 차가운 전경을 사용합니다. 오른쪽은 따뜻한 배경과 전경을 사용합니다.
측정은 수학적으로 관련되어야 합니다.
요소 사이에 사용하는 간격과 요소의 크기는 일종의 축척을 기반으로 해야 합니다. 이렇게 하면 디자인이 일관되게 보이는 데 도움이 됩니다. 아래 예에서 모든 요소는 8의 배수를 사용합니다. 그리드를 기반으로 하는 가로 및 세로 그리드는 이미지와 같은 요소의 크기를 적절하게 조정하는 데 유용합니다.
요소는 시각적 무게의 순서대로 배치해야 합니다.
행이나 열에 많은 항목이 있고 그 중 일부는 다른 것보다 시각적으로 더 무겁다면(예: 버튼 2개와 링크 3개) 삼각형처럼 배열해야 합니다. 시각적으로 가장 무거운 항목이 먼저 오고 가장 무거운 항목이 마지막에 와야 합니다. 한 가지 주의할 점은 시각적으로 가장 무거운 요소는 바깥쪽 가장자리에 있어야 한다는 것입니다. 예를 들어 요소가 디자인의 오른쪽 가장자리에 있는 경우 가장 무거운 요소는 오른쪽 가장자리에 있어야 합니다. 크기나 무게별로 분류한 아이템이 더 만족스러워 보입니다.
수평 그리드를 사용하는 경우 12개의 열을 사용합니다.
12개의 열을 사용하여 디자인을 세로 열로 나눕니다. 12열 그리드는 1열, 2열, 3열, 4열로 나눌 수 있어 유동적입니다.
고 대비 영역 사이에는 거리가 제공되어야 합니다.
예를 들어 랜딩 페이지의 콘텐츠 블록 사이에 100픽셀의 세로 간격을 원하는 경우 디자인에서 요소 사이의 간격을 측정할 때 그 간격은 하나의 고대비 지점에서 다음 지점까지여야 합니다. 우리의 눈은 대비를 기준으로 요소의 가장자리를 찾기 때문에 대비되는 지점 사이의 간격을 예상하기 때문입니다.
흰색 배경에 검정색 단락이 있는 텍스트는 대조 지점이 한 단락의 끝과 다음 단락의 시작임을 나타냅니다. 그러나 단일 흰색 단락 다음에 검은색 배경을 삽입하는 경우 간격은 단락 끝에서 검은색 배경 시작까지, 검은색 배경 시작에서 단락 시작까지 간격이 있어야 합니다.
주변 요소는 가벼워야 합니다.
화면의 요소가 사용자에게 가까울수록 더 밝아집니다. 이는 실생활에서 작동하는 방식이므로 라이트 모드와 다크 모드 UI 모두에 적용됩니다.
아래 예에서 왼쪽이 틀리고 오른쪽이 오른쪽입니다.
그림자 흐림 값은 거리 값의 두 배가 됩니다.
예를 들어 Y축을 따라 4픽셀 확장되는 그림자를 만드는 경우 흐림 값 8픽셀을 사용합니다. 뷰어에서 요소가 “닫힐” 때 그림자의 불투명도를 낮추는 것도 좋은 생각입니다. 요소가 광원에 가까워질수록 그림자가 흐릿해지기 때문에 보기 좋습니다.
복잡할 땐 단순, 단순할 땐 복잡
복잡한 배경(예: 그라데이션 채우기)은 전경(예: 텍스트)이 단순할 때 가장 잘 작동합니다. 복잡한 전경 요소는 단순한 배경에서 가장 잘 작동합니다. 간단하게 말할 수 있지만 평범 해 보입니다. 콤플렉스는 소화하기 어려우며 시각적 혼란을 가중시키므로 피해야 합니다.
밝기 제한 내에서 컨테이너 색상 유지
배경과 컨테이너 사이의 밝기 차이는 어두운 인터페이스의 경우 12% 이내, 밝은 인터페이스의 경우 7% 이내여야 합니다. 이 비율은 HSB 색상 시스템의 밝기 값을 나타냅니다.
약 100개의 잘 디자인된 웹 사이트에 대한 연구를 기반으로 배경과 컨테이너의 밝기를 확인했습니다.
외부 패딩을 내부 패딩보다 같거나 크게 만듭니다.
컨테이너에서 내부 패딩은 컨테이너 내의 요소 사이의 공간입니다. 외부 패딩은 항목과 컨테이너 가장자리 사이의 공간입니다. 이 외부 패딩은 내부 패딩보다 크거나 같아야 합니다. 기타 관련 항목은 밀접하게 관련되어야 합니다. 컨테이너 내의 요소는 컨테이너 자체보다 서로 더 관련이 있습니다.
본문 텍스트를 16픽셀 이상 유지
16px는 대부분의 브라우저에서 기본 텍스트 크기입니다. 이 크기 미만의 텍스트는 읽기 어려우므로 플로팅 텍스트는 피하는 것이 가장 좋습니다. 16px 이상에서는 텍스트가 더 읽기 쉬워집니다.
코드를 직접 작성하는 경우 원하는 픽셀을 사용하면 됩니다.
약 70자의 행 길이를 사용하십시오.
한 줄의 길이가 60자인지 80자인지는 중요하지 않지만 너무 길어지면 미묘한 가독성 문제가 발생할 수 있습니다.
버튼의 세로 패딩 크기의 두 배인 가로 패딩을 만듭니다.
표준 버튼 패턴은 높이보다 폭이 넓습니다. 사용자가 요소를 버튼으로 인식하게 하려면 패턴을 따르는 것이 가장 좋습니다. 아래 예에서 레이블의 상하 패딩은 30픽셀이고 좌우 패딩은 60픽셀입니다.
최대 2개의 글꼴을 사용하십시오.
두 번째 글꼴은 디자인 뒤에 있는 개념을 강화할 수 있는 기회입니다. 또한 디자인에 다양성을 더하는 데 도움이 됩니다. 둘 이상을 사용할 필요가 거의 없으며 디자인이 시각적으로 복잡해질 수 있습니다.
모서리를 올바르게 중첩
때로는 두 개 이상의 둥근 모서리가 겹칩니다. 올바르게 보이도록 안쪽 모서리 반경을 바깥쪽 모서리 반경에서 그 사이의 거리를 뺀 값으로 설정합니다. 아래 예에서 외부 반경은 30픽셀이고 간격은 20픽셀이므로 내부 모서리 반경은 10픽셀입니다.
두 개의 하드 디바이더를 서로 옆에 두지 마십시오.
배경 전환, 컨테이너 가장자리 및 구분선은 시각적 분할을 복잡하게 만듭니다. 두 개 이상의 하드 파티션을 서로 옆에 두지 마십시오. 아래 예에서 빨간색으로 표시됩니다. 두 개 이상의 솔리드 디바이더는 시선을 사로잡는 시각적 혼란을 만듭니다. 이 예에서는 하드 분할이 컨테이너의 가장자리에서만 발생하도록 배경 전환을 제거했습니다.
https://anthonyhobday.com/sideprojects/saferules/ 번역
항상 따라도 안전한 시각적 디자인 규칙
항상 안전하게 따를 수 있는 시각적 디자인 규칙 이러한 규칙을 매번 따를 필요는 없습니다. 그들 중 하나를 깨뜨릴 타당한 이유가 있다면 그렇게 하십시오. 그러나 그들은 매번 따라갈 것입니다. 순수한 흑백 대신 흑백에 가까운 사용
anthonyhobday.com