Что такое «цветные» образцы Google «500»?

36

Я читал о Материальном дизайне Google, и когда я читаю о Стиле, они продолжают упоминать основные 500 цветов (а также любое другое число в диапазоне от 50, который почти белый, до 900), но что делает это значит?

Я бы хотел попробовать свои силы в создании собственных образцов цветов, вдохновленных материалом, но, поскольку названия их цветов смущают меня, я не совсем уверен, с чего начать. Я попытался поискать в поисках ответа (что-то кажется немного ироничным), но до сих пор я не нашел много убедительных ответов. Если бы мне пришлось угадывать, похоже, это как-то связано с длиной волны цвета?

Также есть упоминание цветов от A100 до A700 ...

Cleverbird
источник
8
Только Google мог придумать цветовую систему, которую графические дизайнеры не могут понять.
Саймон Уайт

Ответы:

21

Мне было интересно, что сам.

Во-первых, «500», кажется, не указывает, сколько цветов, но странная система нумерации, которую они используют. 500 - это основа, 400 - светлее, чем 600, темнее. Это очень похоже на нумерацию шрифтов ( информация ), так что, возможно, это как-то связано с этим.

Я обнаружил, что некоторые из чисел меньше 500 можно найти, потушив их на белый (режим наложения «Экран» в Photoshop) или черный («Умножение»).

  • 900: 59% (закрыто)
  • 600: 10% (почти точно)
  • 500: база
  • 400: 15% (точно)
  • 300: 30% (точно)
  • 200: 50% (точно)
  • 100: 70% (закрыто)
  • 50: 88% (точно)

Я не вижу здесь паттерна. И, возможно, нет ни одного. Или, может быть, есть что-то очевидное, что я упускаю из виду; Я довольно плохо разбираюсь в цветах.

BevansDesign
источник
1
Хм, я надеялся, что это будет означать нечто более конкретное. Но я предполагаю, что это просто способ именования цветов Google. Спасибо за ответ, по крайней мере!
Cleverbird
1
эта цветовая нумерация является стандартом defacto ?
Youngjae
2
@Youngjae нет. Не за что.
DA01
11

Я собираюсь оставить это здесь, потому что это новая информация по теме.

https://www.youtube.com/watch?t=73&v=xYkz0Ueg0L4

Опубликовано 28 мая 2015 г.

Немного ржавый по вашей теории цвета? Материальный дизайн облегчает цвет. Узнайте больше о цвете и дизайне материалов на сайте www.google.com/design .

ETA: основные цвета (500) - это цвета, которые Google выбрал в качестве «основного цвета» (или цветов), на которых вы основываете свой дизайн. Вы начинаете с первичных 500, затем масштабируете от светлого до темного; эти цвета применяются к различным элементам в пользовательском интерфейсе.

500-е обозначают доминирующую тему в продукте (и отлично подходят для панелей инструментов). Оттуда можно масштабировать до 700-х для строк состояния или до 300-ти для вторичной информации. Цвета A - это акцентные цвета - более яркое и насыщенное, стимулирующее взаимодействие. Они идеально подходят для выделения основных кнопок действий, стандартных кнопок, переключателей и ползунков.

Интересно то, что информация в этом видео, кажется, противоречит или, по крайней мере, противоречиво излагает информацию, которую Google предоставляет на упомянутой выше палитре ( http://www.google.com/design/spec/style/color .html # color-color-palette ).

На странице палитры они говорят: «Google предлагает использовать 500 цветов в качестве основных цветов в вашем приложении, а другие цвета - в качестве цветов акцента ». В видео они говорят: «Цвета A - это цвета акцента ...»

Конечно, небольшая разница, но если Google собирается разработать руководство по стилю, они должны соответствовать использованию слова « акцент ».

jqning
источник
5

Возможно, вы уже нашли этот ресурс, но Google собрал невероятно удобное руководство, чтобы помочь разработчикам и дизайнерам синхронизироваться с новой вибрацией материала.

Полное руководство можно найти здесь - http://www.google.com/design/spec/material-design/introduction.html#

В частности, на этой странице доступны для загрузки все их любимые цвета - http://www.google.com/design/spec/style/color.html#color-color-palette

krrl
источник
3
Именно там я нашел термин «Первичные 500 цветов», но то, что я пытаюсь выяснить, относится к этому числу.
Cleverbird
4

Вот ответ на ваш вопрос .. посмотрите это видео

В 500s является Primary Colors идеальным описывающим доминирующую темы в вашем продукте и отлично подходит для панелей инструментов.

700-е используются для статус-баров

и 300 используются для вторичной информации

Таким образом, в основном эти числа представляют предопределенные оттенки и оттенки основных цветов для определенного раздела / частей дизайна.

Пратик Шах
источник
0

На мой взгляд, соглашение об именах основано на соглашении о присвоении веса веб-шрифту:

  • 500: база
  • <500: тоньше / легче
  • > 500: толще / темнее

Очень полезный и логичный способ именования чего-либо с базовой линией и вариациями.

Снимок экрана со страницы GitHub шрифта Inter

Ссылочная ссылка: Ссылка на страницу GitHub шрифта Inter

В качестве примера здесь приведен скриншот шрифта Mozilla «Inter», который использует такое именование веса шрифта, но в их случае обычный / базовый вес нумеруется как 400. Многие шрифты фактически используют 400 в качестве «обычного» веса, но это другая тема.

mrtn
источник