Darkmode가 궁금하다

흰색 등의 심플한 디자인을 기조로 한 어플리케이션이 다크 모드를 만드는 사례가 늘고 있습니다.
Apple의 movaje에서 도입된 적도 있어, 향후 iOS에서의 대응이나, 기능으로서 수요가 높아질지도 모릅니다・・・

(다크 모드 자체에 대해서는 이 기사에서 잘 정리되어 있다고 생각합니다.)
htps : // 이 m / 미안해 / ms / f18c03411501081f1296

2019/10/11 이쪽도 꽤 알기 쉽게 색조의 생각을 명기하고 있습니다
htps : // 쿠다쿠라게. 하테나아 ry. 코m/엔트리/2019/07/29/083000
여기에서 소개하는 다크 모드는 거의 악센트 칼라가 있는 UI입니다만, 올 그레이 스케일 경우의 때등에 참고가 되는 생각이 정리하고 있습니다.

2019/11/15
이 기사에서하는 일의 상위 호환 같은 기사입니다. 도움이 됩니다.
htps : //에서. 츠미키인 c. 이 m/n/n 949 아 295574d8

이를 위해 선도적 인 앱이 어떤 색상 규칙을 채택했는지 어쩐지 보려고합니다.

색상을 얻는 방법

칼라를 어떻게 취득하는지입니다만, 리버스 엔지니어링 같은 것은 실시하지 않고,
iPhone에서 스크린 샷을 찍고 PC 페인트의 스포이드 도구로 컬러 정보를 얻습니다.



그래서 절대적인 컬러 코드 등은 다를지도 모릅니다만, 어디까지나 조사하고 싶은 것은, 다크와 디폴트의 색의 상대 관계이므로, 같은 조건으로 샘플링하고 있기 때문에 좋다고 합니다.

또, 문자색등은, 제일 면적이 큰 것 같은 부분이 가능한 한 중심으로부터 픽하도록(듯이) 하고 있기 때문에, 실제의 설정치로부터 꽤 멀어져 버리고 있을지도 모릅니다.
취할 수 있는 수단의 한계라고 하는 것으로 용서해 주세요.

트위터

요점은 아이콘 색상의 하늘색이 변하지 않는다는 것입니다.
그러나 얇은 문자, 아이콘이 선택되어 있지 않은 사이의 Inactive 표시는, 디폴트와 다크로 Hue와 Saturation은 거의 바꾸지 않고 Brightness를 변화시키고 있는 것 같습니다.
배경의 색상이 어두워지는 것으로, 「보통의 문자색」으로부터 조금 톤을 떨어뜨린 색의 떨어뜨리는 방법이 바뀐다고 하는 곳입니까.

Skype

둘 다 공통으로 존재하는 색상은 흰색과 # 2B2C32의 색상입니다.
다크 모드가 될 때 큰 영역을 취하는 색미를, 디폴트 때의 문자색으로 하고 있으므로, 재미있는 배색입니다.

디폴트의 ​​뒤로부터 다크를 구성한 것이 아니라, 다크시의 색미를 의식해, 굳이 문자색을 조금만 Blue에 전해진 어두운 색으로 하고 있을지도 모릅니다.

YouTube

역시, 악센트와 브랜드 이미지가 되는, 빨강은 변화 없음입니다.
youtube의 UI로 좋다고 생각한 것이, 배경·문자색·얇은 문자색 등은, 거의 모노톤으로 구성되어 있는 곳입니다.
동영상을 표시하는 것이 주요 기능이기 때문에 색감이있는 프레임으로 만들지 않겠습니까?

흑백이라고 하면서 미묘하게 색칠이 되어 있는 패턴도 있습니다만, 어디까지나 악센트는 적색으로 조리개 구성하고 있는 곳이, 블루 베이스로 다크 칼라에 떨어뜨리고 있는 Twitter와의 큰 차이라고 말할 수 있다고 생각합니다.

기타

또 찾아 픽업하는 대로 축적해 가면 좋겠습니다.
그리고, 여기에서 채용되고 있는 룰이라고 할까, 발상을 바탕으로, Dark Mode의 UI 설계를 생각해 가려고 생각합니다.

이쪽도 참고가 되었습니다.
htps : // m / shtkgm / ms / 3d f126c286fd098f10