어둠의 패턴, 왜, 어떻게.

당신의 제품이 경쟁에서 뛰어나게 하기 위해서, 당신은 반드시 자신을 초월하여 사용자에게 깊은 인상을 남기고, 그들을 고객이 되도록 해야 합니다.

출신 배경

나는 점진적인 강화를 제창하기 때문에 우리가 사용자에게 가장 좋은 체험을 제공하는 것이 매우 중요하다고 생각한다.최근 인터넷은 우리가 새로운 방식으로 이 점을 할 수 있도록 도와주는 초강대국들이 생겼다.슈퍼능력이라면 사용자가 선호하는 새로운 CSS 미디어 조회를 가리킨다.

@media (prefers-color-scheme: dark){}
@media (prefers-reduced-motion: reduced){}

현재, 이 미디어 조회는 약 80퍼센트의 브라우저에서 작동하는데, 이것은 매우 좋다.Source - caniuse.com 그래서 어두운 모델에 대해 우리는 첫 번째, 색 방안을 주목해야 한다.

기본 색상 지정 체계

기본 색상 지정 체계 미디어 쿼리는 사용자 운영 체제 설정에서 구성을 가져옵니다.따라서 만약에 사용자로서 짙은 색의 사용자 인터페이스를 더욱 좋아한다면 사이트는 그 디자인을 조정하여 이를 존중할 수 있다.
Adam Argyle은 2019년 크롬 개발자 회의에서 어떻게 일했는지, 그리고 왜 우리가 이런 미디어 조회를 사용했는지 포함해서 잘 했습니다.
이것은 동영상입니다. 전체 과정을 보시는 것을 권장합니다. 그러나 새로운 미디어에만 관심이 있다면 4:10으로 넘어가거나 다음 섹션으로 넘어가십시오.

곧 올 것이다

인터넷에 일련의 새로운 사용자 선호가 나타나는데 이것은 근본적으로 웹 디자인의 방식을 바꿀 것이다.

@media (prefers-contrast: high){}
@media (prefers-reduced-transparency: reduced){}
@media (forced-colors: high){}
@media (light-level: dim){}

이러한 새로운 설정이 있으면 사용자의 선호 설정과 결합하여 우리의 개인 사용자에게 절대적으로 가장 좋은 디자인을 제공할 수 있다.
현재 밝기에 따라 텍스트 명암비 수준을 조정하고 사용자가 링크에 특정한 색을 사용하는 선택을 존중하며 저가 장치에서 분심이나 성능 문제를 일으킬 때 투명도 효과를 제거합니다.명세서가 계속되고 있습니다.정말 사람을 흥분시킨다!

어둠의 모드를 원하는 사람

5% of users were already configured and ready

우리는 웹 사이트를 방문할 때 어두운 모드를 사용하는 사용자의 수를 추적하기 시작했다.Google Tag Manager에서 matchMedia JavaScript API를 사용하는 사용자 정의 스크립트를 사용했습니다.우리는 약 5퍼센트의 사용자가 이미 설정되고 준비가 다 되었다는 것을 발견했다.

if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
    // dark mode use recorded
}

prefers-colour-scheme 미디어 조회에 대한 지원이 증가할 것을 알고 우리는 이러한 사용자 선호 스타일에 기반을 다지고 이를 사이트 CSS의 작성 방식에 직접 베이킹하기로 결정했다.
CSS 사용자 정의 속성은 이러한 미디어 조회를 지원하는 모든 브라우저에서 사용할 수 있기 때문에 우리는 이러한 속성을 쉽게 이용하여 모든 사용자에게 점차적으로 강화할 수 있다.
우리는 기존의 디자인 시스템 색을 사용하여 이 점을 실현하고 사용 가능한 팔레트에 새로운 변체를 추가하여 포화도와 색조를 줄인다.
그리고 스타일을 적용할 때, 우리는 CSS 사용자 정의 속성을 색의 주요 설정으로 사용하지만, SASS 변수를 사용하여 백업을 합니다. 예를 들어 바디 표시의 예시입니다.

$white:             #ffffff;
$chrome:            #f2f2f2;
$dark-chrome:       #4a4a4a;
$jet-black:         #111111;
$pale-purple:       #9387d8;
$electric-purple:   #604dd5;

:root{
    --body-color: #{$white};
    --text-color: #{$dark-chrome};
    --text-color-accent: #{$electric-purple};
}

.dark-mode {
    --body-color: #{$jet-black};
    --text-color: #{$chrome};
    --text-color-accent: #{$pale-purple};
}

body {
  background: $white;
  background: var(--body-color);
}

따라서 CSS 사용자 정의 속성을 지원하지 않는 브라우저 액세스는 기본 색상 세트로 돌아갑니다.이런 상황에서 이것은 옅은 색 방안이다.
이 코드를 지원하는 브라우저의 경우 기본적으로 조명 스타일이 로드됩니다.그러나 우리는 이 코드에서 특히 미디어 조회를 피했다. 왜?
나는 사용자에게 짙은 색 테마를 열고 닫게 하고 싶어서 이 예에서 우리는 주체에 클래스dark-mode의 테마를 적용하여 미디어 조회를 잠시 피했다.

Vue에서 암흑 모드 감지

응용 프로그램에서 설치된 라이프 사이클을 사용합니다.vue는 함수를 추가하여 prefers-color-scheme 를 검출할 수 있습니다. 함수가 짙은 색으로 설정되었을 때, 클래스 dark-mode 를 적용하여 주체의 CSS 사용자 정의 속성을 업데이트하고 대부분의 작업을 단계별로 완성할 수 있습니다.

<script>
export default {
  mounted() {
      const darkMode = window.matchMedia("prefers-color-scheme: dark");
      if(darkMode) {
          document.body.classList.add('dark-mode')
      }
  }
}
</script>

우리 구성 요소에서 심사숙고한 CSS 사용자 정의 속성을 사용하면 전체 페이지의 외관을 제어할 수 있습니다.

다크 모드 설계

내가 이곳에서 직면한 주요 도전은 우리의 현재 디자인 시스템이 나에게 필요한 일을 할 충분한 유연성을 주지 않았다는 것을 찾아내는 것이다.나는 디자인을 발효시키기 위해 새로운 색깔을 도입해야 한다는 것을 발견했다.
이러한 색상은 pale-purple, almost-black 및 light-black 입니다.그래, 사물을 명명하는 것은 확실히 어렵지만, 우리는 이미 짙은 회색을 가지고 있다.

브라우저에서 설계

대부분의 사이트에서 이미 옅은 색 배경을 설계했기 때문에 당신의 옅은 색 디자인이라고 부르기 쉬우며 보기에 당신은 이미 절반을 완성한 것 같습니다.
현재 우리는 사용자의 취향에 따라 사이트의 외관을 맞춤형 제작할 수 있고 사용자들이 그들에게 적합한 디자인을 볼 수 있도록 확보할 수 있다.
내 어두운 모드 설정을 설계하기 위해 Vue CLI를 사용하여 홈 페이지에 있는 구성 요소를 포함하여 원형 홈 페이지를 구축했습니다.이것은 나에게 수리할 수 있는 출발점을 주었다.오, 만약 네가 아직 알아맞히지 못했다면, 나는 브라우저에서 디자인하는 것을 매우 좋아한다.

if you hadn't already guessed I'm a big fan of designing in the browser.

이것은 당시 홈페이지의 한 부분이다.나는 우리의 설계 시스템에 따라 요점 검사 표시를 갱신하고 검사 표시를 비웠다.

배경과 텍스트 색을 교환하는 것은 이곳에서 장면을 설정하는 데 큰 도움이 된다.두 가지 색 중에서 주요한'행동 소환'인 보라색은 모두 똑같이 튀어나왔기 때문에 큰 변경을 할 필요가 없지만 포화도를 낮추었다. 주제 사이를 전환할 때 내 눈은 이런 변화를 거의 볼 수 없었다.
나는 제목의 중음 색깔을 바꾸었다.나는 아래 그림과 같이 검은색 배경과 충돌하는 것을 방지하기 위해 기존의 보라색 포화색조를 사용했다.🤮

문자의 중음 색깔을 낮추는 것 외에 나는 주영웅의 자동차 이미지에 미묘한 광조를 첨가했다.지금은 최선의 해결 방안이 아니지만 현재 전체 사이트에서 사용되고 있는 PNG는 어두운 배경에서 설계된 적이 없기 때문에 가장자리가 거칠다.이것은 가장자리를 약간 부드럽게 해서 시간에 따라 이미지를 업데이트하기 전에 변경 사항을 전개할 수 있는 기회를 줍니다.

위에서 설명한 방법으로 색을 교환할 때, 나는 배경에서 가장 어두운 색으로 시작하여 전경에서 점점 밝은 색을 사용한다.

이것은 그림과 같이 현재 디자인의 색을 층으로 나누는 방식과 상반된다.

암모드 기이치 발생기

너는 이 사진들 중에서 도시 경관 배경이 다른 사이트처럼 바뀌지 않았다는 것을 이미 알아차렸을 것이다.네 말이 맞다. 이것은 내 마음을 타오르게 한다.
크리스마스 휴식 기간에 나는 나의 새로운 색깔을 어떻게 나의 SVG에도 응용하는지 알고 싶어서 약간의 시간을 보냈다.
나는 정말 특정한 주제를 위해 독특한 요소를 추가하고 싶다. 예를 들어 추가적인 것들이다.생각해 봐, 달과 별이 어두운 모드에 있거나, 새 한 마리가 밝은 모드에 있나?이것은 매우 멋진 방식으로 우리의 디자인에 개성을 추가할 수 있다.
나는 Figma의 원작부터 좋은 색깔 변화가 있을 것이라고 생각하는 것들을 창작했다.

나는 일찍이 전경 건축물에 불빛을 첨가하려고 했지만, 나는 이것이 모두 배경 이미지이기 때문에 주의력을 너무 분산시켰다고 생각한다.나는 또 건축물에서 이런 옅은 파란색/보라색을 사용하면 그것들이 너무 유행하고 주요 차량 이미지에 대한 사람들의 주의력을 분산시키는 것을 발견했다.

나는 그것들을 거의 완전히 어두운 환경에 놓고 윤곽을 돋보이게 하는 것을 탐색했다. 마치 달빛이 건축물의 가장자리에서 반사되고 배경에는 마천루의 불빛만 남았다.

일단 내가 방안을 확정하면, 나는 일련의 CSS 클래스를 만들고, 이러한 클래스로 SVG의 내연 충전을 수동으로 대체한다.
이러한 클래스는 SVG의 경로 색상 및 가시성에 사용됩니다.

.accent {
  fill: #6accb6;
}
.cloud {
  fill: #333333;
}
.dark-mode .cloud {
  fill: #211e28;
}
.skin{
  fill: #ffffff;
}
.foreground {
  fill: #ffffff;
}
.dark-mode .foreground {
  fill: #151416;
}
.foreground-shadow {
  fill: #c9d3ff;
}
.dark-mode .foreground-shadow {
  fill: #101010;
}
.bg-color {
  fill: #edf1fe;
}
.dark-mode .bg-color {
  fill: #211e28;
}
.outline {
  fill: #333333;
}
.dark-mode .outline {
  fill: #4f4c56;
}
.dark-show {
  opacity: 0;
}
.dark-mode .dark-show {
  opacity: 0.5;
}

.dark-hide {
  opacity: 1;
}
.dark-mode .dark-hide {
  opacity: 0;
}

브라우저에서 실시간 색상 조정을 했습니다. (건축물의 윤곽 색깔이 100% 만족스럽지 않기 때문입니다.) 이것이 최종 결과입니다.이것은 미묘하게 기존의 배색 방안과 잘 융합되어 여전히 접는 이상의 대량의 문자를 증가시켰다.

현장 프레젠테이션

브라우저에서 디자인을 체험하려면 Live demo is here 링크를 클릭하십시오.