Android 앱, 안드로이드OS 디자인의 컬러 이해하기 - 패스트캠퍼스 챌린지 25일차

*모든 자료의 출처 : Material Design by Google https://material.io/design/

Material Foundation > Navigation

The color system

Principles

Color theme creation

The baseline Material color theme
Material Design comes designed with a built-in, baseline theme that can be used as-is, straight out of the proverbial box.

This includes default colors for:

• Primary and secondary colors
• Variants of primary and secondary colors
• Additional UI colors, such as colors for backgrounds, surfaces, errors, typography, and iconography.

All of these colors can be customized for your app.

 

Primary color

A primary color is the color displayed most frequently across your app's screens and components.

Dark and light primary variants

Your primary color can be used to make a color theme for your app, including dark and light primary color variants.

Distinguish UI elements

To create contrast between UI elements, such as a top app bar from a system bar, you can use light or dark variants of your primary colors. You can also use these to distinguish elements within a component, such as the icon of a floating action button from its circular container.

This UI uses a primary color and two primary variants.

 

Secondary color

A secondary color provides more ways to accent and distinguish your product. Having a secondary color is optional, and should be applied sparingly to accent select parts of your UI.

If you don’t have a secondary color, your primary color can also be used to accent elements.

Secondary colors are best for:

• Floating action buttons
• Selection controls, like sliders and switches
• Highlighting selected text
• Progress bars
• Links and headlines

Dark and light secondary variants

Just like the primary color, your secondary color can have dark and light variants. A color theme can use your primary color, secondary color, and dark and light variants of each color.

This UI uses a color theme with a primary color, a primary variant, and a secondary color.

 

Surface, background, and error colors

Surface, background, and error colors typically don’t represent brand:

• Surface colors affect surfaces of components, such as cards, sheets, and menus.
• The background color appears behind scrollable content. The baseline background and surface color is #FFFFFF.
• Error color indicates errors in components, such as invalid text in a text field. The baseline error color is #B00020.

A UI showcasing the baseline colors for background, surface, and error color:

Accessible colors

 

To ensure an accessible background behind light or dark text, your background can use light or dark variants of your primary and secondary colors.

Alternatively, these colors can be used for typography that appears in front of light and dark backgrounds.

Color swatches

A swatch is a sample of a color chosen from a range of similar colors.

 

Apps that use black text must have backgrounds that are accessible against black. These black check marks indicate when black text is accessible against various background color swatches. The 50 color swatch is applied to this UI.

 

Dark theme

A dark theme is a low-light UI that displays mostly dark surfaces.

Dark themes reduce the luminance emitted by device screens, while still meeting minimum color contrast ratios. They help improve visual ergonomics by reducing eye strain, adjusting brightness to current lighting conditions, and facilitating screen use in dark environments – all while conserving battery power. Devices with OLED screens benefit from the ability to turn off black pixels at any time of day.

Principles

---

 

강의수강화면

오늘은 안드로이드OS 매터리얼 디자인의 컬러 부분에 대한 강의를 들었다. 컬러시스템, UI에 컬러 적용하기, 컬러 사용법, 글자 가독성, 어두운 테마 이렇게 전체 5가지 주제 중에서 컬러시스템과 어두운 테마에 대해 중점적으로 배울 수 있었다.

컬러시스템의 원칙은 계층적일 것, 읽기 쉬울 것, 그리고 (브랜드를) 나타낼 것 이렇게 3가지이다. 그 원칙을 지키기 위해 컬러 테마를 만들 때는 기본적으로 기본컬러와 보조걸러를 하나씩 설정하고, 각 컬러의 변형색상을 설정해야 한다. 그리고 나서 배경색이나 표면색, 오류, 타이포그래피, 아이콘그래피에 대한 추가적인 UI 색상을 설정한다. 이 원칙과 방법을 따라 만든 컬러 테마의 예는 위 내용중 'The baseline Material color theme'에 이미지로 첨부되어 있다.

컬러스와치(Color swatch)는 유사한 색상 범위해서 선택한 색상의 샘플을 모은 것으로써, 밝거나 어두운 텍스트 뒤에서 읽기 쉬운 배경을 보장하기 위해서 기본컬러와 보조컬러의 변형색들을 가지고 만든 것이다. Material Design 에서 제공하는 Color Tool (link)를 사용하면 내가 설정한 기본컬러와 보조컬러가 배경으로 사용되었을 때 검정 글자와 흰 글자가 읽기 쉬운지, 밝은 테마와 어두운 테마에서 읽기 쉬운지 체크를 해주기 때문에 매우 유용하다.

 

---

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.

https://bit.ly/3FVdhDa