[ TECH ] Google Design's Photos, Calender & Auto Android Dark Theme's!

Dinesh Vishwakarma · 发表于 2019-06-30 14:12:19

[p]

[br]

[p]Over the past several months, many Google apps have adopted dark themes with the Google appand Gmail likely coming next. Google today detailed how the teams behind Photos, Calendar, and other first-party services designed their dark modes.[br][br]

[tbody][div align="center"][font size="4"][font color="#ff0000"][strong]Google Photos[/strong][/div][/tbody][p][br]At the moment, the Google Photos dark theme is only available on Android Q. The team approached the dark design with a “light touch” as to not detract from the pictures being displayed.[br][br]

[div align="center"][a href="https://c.mi.com/forum.php?mod=viewthread&tid=2264330&aid=4405870&from=album&page=1"][img id="aimg_4405870" width="776" height="315" src="https://u01.appmifile.com/images/2019/06/28/a44d383d-7f8a-4e26-81cc-3d44c726dc7b.jpg" alt="Screenshot_2019-06-28-06-37-17-605_com.android.chrome.jpg" title="Screenshot_2019-06-28-06-37-17-605_com.android.chrome.jpg"][/a][/div][p][br]The background is rendered in a dark gray rather than pure black, because that saturation contrasts well against bright pixels to better express colorful photos, and icons appear in desaturated soft grays and blues for stronger legibility. The dark background even creates a slideshow effect that’s ideal for casual viewing—imagine turning the lights off at home to watch home videos or project vacation photos on to the wall.[br][br]

[tbody][div align="center"][font size="4"][font color="#000000"][strong]Google Calendar[/strong][/div][/tbody][p][br]Calendar is a particularly colorful app as you can theme events to make them stand out in the agenda view. According to Google, those colors “look dramatically different” against a dark background.[br][br]

[div align="center"][a href="https://c.mi.com/forum.php?mod=viewthread&tid=2264330&aid=4405871&from=album&page=1"][img id="aimg_4405871" width="776" height="388" src="https://u01.appmifile.com/images/2019/06/28/28da084f-7d3e-4516-8147-864f24e735e3.jpg" alt="google_calendar_dark_mode_1.jpg" title="google_calendar_dark_mode_1.jpg"][/a][/div][p][br]Leveraging Material guidance, Calendar crafted an internal system for adapting a wide range of colors to dark theme, desaturating hues and defining brightness, while still letting users express themselves in any shade of the rainbow. The result is vivid color that feels native to a charcoal gray backdrop.[br][br]

[tbody][div align="center"][font size="4"][font color="#000080"][strong]Google News[/strong][/div][/tbody][p][br][font color="#2e8b57"][strong]The text-heavy nature of articles presents a different problem for Google News:[/strong][br][br]A dark theme for Google News had to consider pixel-bleed, where small white letters contrast too heavily and blur against a dark background (imagine the inverse of ink-bleed on print newspapers, where black letters smudge on white paper).[br][br]

[div align="center"][a href="https://c.mi.com/forum.php?mod=viewthread&tid=2264330&aid=4405872&from=album&page=1"][img id="aimg_4405872" width="776" height="388" src="https://u01.appmifile.com/images/2019/06/28/fe969659-9d6d-4a6e-84bb-0e22bc1aa579.jpg" alt="google_news_dark_mode.jpg" title="google_news_dark_mode.jpg"][/a][/div][p][br]To cut down on blur, the design team utilized the same deep gray backdrop as Google Photos so that light gray text reads clearly, with minimal “vibration.” Gray surfaces also make it easier to create a gradation between shades, which results in surfaces that look elevated—a key element in any Material Design interface.[br][br]

[tbody][div align="center"][font size="4"][font color="#4169e1"][strong]Android Auto[/strong][/div][/tbody][p][br]Coming this summer, the Android Auto redesignnotably introduces a Google-designed dark theme that helps match car interiors. It is also safer to use when driving in both day and night conditions by reducing glare.[br][br]

[div align="center"][a href="https://c.mi.com/forum.php?mod=viewthread&tid=2264330&aid=4405875&from=album&page=1"][img id="aimg_4405875" width="776" height="318" src="https://u01.appmifile.com/images/2019/06/28/7aed9760-5f43-4075-b2bb-8cfa64a658b7.jpg" alt="Screenshot_2019-06-28-06-38-27-129_com.android.chrome.jpg" title="Screenshot_2019-06-28-06-38-27-129_com.android.chrome.jpg"][/a][/div][p][br]To further improve glanceability in dark theme, Android Auto also chose to keep graphics simple. Material guidance calls for using elevated layers of graphics to create an information hierarchy, but Auto uses fewer than most Material apps. This way, the driver doesn’t need to visually sort through as many levels of information, and eyes can stay on the road.[br][br][h4][a href="https://9to5google.com/2019/06/27/google-design-dark-theme/" target="_blank"]Source[/a][/h4]