谷歌Material Design & Color

2016-04-15 · 🙈Ray · 46条 · 932次

Material Design is a design language developed by Google which was announced on June 25, 2014 at Google I/O. It can be used in both android and web apps.

You can read the documents by accessing the following address:material design document by Google.

Color in material design is inspired by bold hues juxtaposed with muted environments, deep shadows, and bright highlights. Material takes cues from contemporary architecture, road signs, pavement marking tape, and athletic courts. Color should be unexpected and vibrant.

Material Design uses 19 plaettes to restrict the use of colors.The color palette starts with primary colors and fills in the spectrum to create a complete and usable palette for Android, Web, and iOS. Google suggests using the 500 colors as the primary colors in our app and the other colors as accents colors. The picture below here is all the colors that we can use in our design. Download the color swatches for Photoshop and Illustrator from: color swatches.

We can define our app's color palatte by using a custom palette suited to our brand. Alternatively, we may use the material design color palette. All color palettes should include sufficient contrast between different UI elements.

> How to use material design color palette if we don't have our own color palette?

1. First, there are several concepts here.

Primary color: The main color of our app. This color should be the most widely used across all screens and components.

Secondary color: The secondary color may be a darker or lighter variation of the primary color. Palettes with a secondary color may use this color to indicate a related action or information.

Accent color: The accent color should be used for the floating button and interactive elements, such as:Text fields and cursors, Text selection, Progress bars, Selection controls, Buttons, Sliders and Links.


2.Limit our selection of colors to three hues from the primary palette and one accent color from the secondary palette.

> The choices of accent color

1. Darker shades and lighter tints: If our accent color is too light or dark to sufficiently contrast with the background color, use a darker shade or lighter tint of the accent color instead.

2. Primary color variations: Another alternative accent color is the 500 version of our primary color on white backgrounds. However, if our background color is already the 500 version of our primary color, make our accent color either white 100% or black 54%.

> Text and background colors

1. Text Opacity & Use opacity instead of grey

Text may be displayed with different degrees of opacity to convey how important certain information is relative to other information. The level of opacity used for text depends on whether your background is darker or lighter.

Black or white text that is transparent remains legible and vibrant against background color changes. This makes it more flexible than grey text in the same contexts.


2. Dark text on light backgrounds


White text on dark backgrounds


3. Icons, dividers and other elements

Elements like icons and dividers benefit from having a hex value of black or white (rather than a specific color) so that they work on backgrounds of any color.

> Themes

1. Customize the theme using theme attributes when we inherit from the material theme:

<resources>
<!-- inherit from the material theme -->
<style name="AppTheme" parent="android:Theme.Material">
<!-- Main theme colors -->
<!-- your app branding color for the app bar -->
<item name="android:colorPrimary">@color/primary</item>
<!-- darker variant for the status bar and contextual app bars -->
<item name="android:colorPrimaryDark">@color/primary_dark</item>
<!-- theme UI controls like checkboxes and text fields -->
<item name="android:colorAccent">@color/accent</item>
</style>
</resources>



  1
NicoleBek · 2018-04-21
网站:
回复

slot online online casino slots casinos online cassino

JasonTaple · 2018-04-20
网站:
回复

Последние женские секретики здесь www.foto-volos.ru

Larissaexcus · 2018-04-19
网站:
回复

play casino games online online casino slots casino games real money cassino

JamesFlunk · 2018-04-17
网站:
回复

Последние модные стрижки здесь chyolka.ru

JasonTap · 2018-04-17
网站:
回复

Последние новости здесь kfaktiv.ru

JanetAcill · 2018-04-16
网站:
回复

slot online casino games slots casino games real money casino games slots

Charleslah · 2018-04-15
网站:
回复

Модные женские советы здесь dicask.ru

Aaronbum · 2018-04-14
网站:
回复

Отличные строительные советы здесь akvakraska.ru

Patrickfluth · 2018-04-14
网站:
回复

Последние женские новости здесь french-foto.ru

JustinWeene · 2018-04-14
网站:
回复

Конкуренцию стандартным петельным межкомнатным открывающимся конструкциям составляют более функциональные решения – сдвижные двери. Они так же включают в себя полотна из древесины или иного материала, вот только главные элементы блока движутся по прямым линиям (направляющим) параллельно стене. Читайте об этом подробнее на сайте akro-spb.ru

ArchieFut · 2018-04-14
网站:
回复

Подарок руководителю, крупному бизнесмену, серьезному и ответственному человеку зрелого возраста должен быть солидным, запоминающимся, весомым, и недешевым, однозначно. Подробнее об этом читайте на сайте fi-hi.ru

JimmySem · 2018-04-12
网站:
回复

Последние автомобильные новости здесь drivim.ru

JamesSpich · 2018-04-11
网站:
回复

Многие пользователи желают выбор материала, исходя из плотности материала. Но специалисты утверждают, что такой подход – неправильный. Объясняют это тем, что одни и те же материалы с одинаковыми показателями плотности могут обладать разной теплопроводностью. Подробнее читайте на сайте blitz-remont.ru

Janetwense · 2018-04-11
网站:
回复

play casino games online online gambling casino best online casino slot game

VincentBoock · 2018-04-11
网站:
回复

Последние строительные советы здесь 495realty.ru