Home-theater-designers
어두운 사용자 인터페이스가 인기를 얻었고 이제 많은 응용 프로그램에서 밝은 모드와 어두운 모드 사이를 전환할 수 있는 옵션을 제공합니다. 그러나 어두운 UI를 구현하는 것은 사용된 색상, 글꼴, 이미지 및 간격에 주의를 기울여야 하는 어려운 작업일 수 있습니다.
이러한 요소에 실수가 있으면 사용자 경험이 저하될 수 있습니다. 다음 팁은 첫 번째 어두운 UI를 디자인할 때 도움이 될 것입니다.
오늘의 메이크업 비디오 콘텐츠를 계속하려면 스크롤하세요.
1. 순수한 검정색을 사용하지 마십시오.
어두운 UI를 디자인할 때 순수한 검정색 배경을 사용하지 마십시오. 어두운 회색 음영을 사용하는 것이 좋습니다. 예를 들어, Google의 머티리얼 디자인 테마 색상 #121212를 권장합니다.
흰색 텍스트와 검은색 배경이 결합되면 대비가 너무 높아 눈의 피로를 유발할 수 있습니다. 대신 어두운 회색 음영은 그림자, 깊이 및 높이를 쉽게 표시할 수 있습니다.
2. 텍스트 대비가 WCAG 2.0 지침을 충족하는지 확인
텍스트를 읽을 수 있도록 적절한 수준의 대비를 제공하는 색상 조합을 선택하십시오. WCAG 2.0 가이드라인에서는 텍스트 또는 텍스트 이미지의 명암비가 최소 4.5:1이어야 하고 큰 텍스트(최소 18포인트 또는 굵은 14포인트)의 명암비가 최소 3:1이어야 한다고 명시하고 있습니다.
안드로이드에서 동영상 자르는 방법
다음을 포함하여 색상 대비를 확인하는 여러 도구가 있습니다. 파도 색상에 대한 접근성도 확인하는 Chrome 확장 프로그램입니다.
3. 올바른 글꼴 스타일 선택
또한 크기, 두께 및 줄 높이를 포함하여 텍스트의 글꼴 스타일을 고려해야 합니다. 글꼴 옵션을 찾고 있다면 잊지 마세요. 무료 글꼴을 제공하는 많은 사이트 . 글꼴 크기는 어두운 배경에서 텍스트가 선명하고 잘 보이도록 충분한 값을 사용하십시오.
웹 페이지에 대해 다음 스타일을 고려하십시오.
body {
font-family: "Courier New", monospace;
font-size: 12px;
font-weight: 200;
line-height: 1;
color: #333333;
}
글꼴 패밀리가 읽기 어렵고 글꼴 크기가 너무 작고 글꼴 두께가 너무 가볍습니다. 이러한 스타일은 아래 스크린샷에서 볼 수 있듯이 페이지를 읽기 어렵게 만듭니다.
다음은 대신 사용할 수 있는 몇 가지 적절한 스타일입니다.
body {
font-family: "Arial", sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 1.5;
color: #FFFFFF;
background-color: #121212;
}
결과 페이지는 다음과 같습니다.
4. 포화된 악센트 색상을 피하십시오
채도가 높은 색상은 어두운 배경에서 너무 밝고 흐릿할 수 있습니다. 대신 덜 강렬하고 차분한 색상을 사용하십시오. 이렇게 하면 텍스트가 보이는 사용자 인터페이스를 만들 수 있습니다.
ps5는 ps4 게임을 합니까
시연하려면 다음 두 가지 버튼 스타일을 고려하십시오.
/* Saturated blue */
.btn-saturated-blue {
background-color: #121212;
color: #0e0bf6;
}
/* Muted blue */
.btn-muted-blue {
background-color: #121212;
color: #4c5ab3;
}
진한 파란색은 너무 밝아서 어두운 배경에서 읽기 어려울 수 있는 반면, 연한 파란색은 대비가 좋고 읽기 쉽습니다.
같은 도구 착색 가능 접근성 지침을 따르는 색상 조합을 생성하는 데 유용합니다.
5. 무거운 UI 생성 방지를 위해 여백 사용
어두운 색상 팔레트는 UI를 사용자에게 무겁게 보이게 할 수 있습니다. 여백을 적절하게 사용하면 중요한 UI 요소를 강조 표시하고 텍스트를 쉽게 훑어볼 수 있습니다. 충분한 간격은 디자인을 보다 깔끔하고 현대적으로 만들 수 있습니다.
예를 들어, 애플의 랜딩페이지 . 요소 사이의 공간은 페이지를 매우 현대적이고 시각적으로 흥미롭게 만들어 중요한 요소를 돋보이게 합니다.
6. 다양한 색상 음영을 사용하여 UI에 깊이 추가
라이트 UI를 디자인할 때 그림자를 사용하여 요소에 깊이와 높이를 추가할 수 있습니다. 그러나 배경이 어둡기 때문에 어두운 UI에서 그림자가 잘 보이지 않는 경우가 있습니다.
어두운 색상의 여러 음영을 사용하여 어두운 UI에서 깊이를 얻을 수 있습니다. 예를 들어 하나의 어두운 배경 대신 동일한 색상의 밝은 음영을 버튼 및 모달과 같은 다양한 요소에 추가할 수 있습니다.
7. 다크 UI 일치 확인
라이트 모드와 다크 모드에 동일한 이미지를 사용할 필요가 없습니다. 다크 모드를 사용할 수 있습니다 CSS 미디어 쿼리 사용자가 다크 모드로 전환할 때마다 다크 UI와 일치하는 이미지를 전환합니다.
플레이 스토어 2016에 없는 최고의 안드로이드 앱
예를 들어 어두운 모드에서 페이지 섹션에 특정 배경 패턴을 적용하려면 .bgpattern 클래스 이름을 사용하고 스타일시트에 다음 코드를 추가할 수 있습니다.
@media (prefers-color-scheme: dark) {
/* Apply this style in dark mode only */
.bgpattern {
background-image: url("/dark.jpg");
}
}
이 미디어 쿼리는 사용자가 선호하는 색 구성표가 어두울 때만 참조된 배경 이미지가 표시되도록 합니다.
다크 UI를 사용해야 하는 경우
다크 UI 디자인은 웹 사이트나 애플리케이션에 현대적인 미학을 부여하는 좋은 방법입니다. 또한 눈의 피로를 최소화하고 배터리 수명을 절약할 수 있습니다. 그러나 어두운 UI는 모든 애플리케이션에 적합하지 않으며 항상 브랜드와 사용자 기반을 고려해야 합니다.
일반적으로 어두운 UI는 럭셔리, 명성, 미니멀리즘 또는 미스터리를 우선시하는 브랜드에 가장 적합합니다. 또한 대시보드 및 시각화 도구를 위한 훌륭한 선택이 될 수 있습니다.