Czytam o projektowaniu materiałów Google, a kiedy czytam o stylu, wciąż wspominają o 500 podstawowych kolorach (a także o każdej innej liczbie od 50, która jest prawie biała, do 900), ale co robi to znaczy?
Chciałbym spróbować swoich sił w tworzeniu własnych próbek kolorów inspirowanych materiałem, ale ponieważ mylą mnie nazwy ich kolorów, nie jestem pewien, od czego zacząć. Próbowałem googlować po odpowiedź (która wydaje się nieco ironiczna), ale jak dotąd nie znalazłem wielu rozstrzygających odpowiedzi. Gdybym musiał zgadywać, wygląda na to, że ma to coś wspólnego z długością fali koloru?
Wspomniano także o kolorach od A100 do A700 ...
color
google
google-material-design
Cleverbird
źródło
źródło
Odpowiedzi:
Zastanawiam się nad tym.
Po pierwsze, „500” nie wydaje się wskazywać liczby kolorów, ale dziwny system numerowania, którego używają. 500 to podstawa, 400 jest jaśniejsze niż podstawa, 600 jest ciemniejsze. Jest to dość podobne do sposobu liczenia grubości czcionek ( informacji ), więc może to ma coś wspólnego z tym.
Przekonałem się, że niektóre liczby mniejsze niż 500 można znaleźć poprzez zanikanie ich w kolorze białym (tryb mieszania „Screen” w Photoshopie) lub czarnym („Multiply”).
Nie widzę tutaj wzoru. A może nie ma. A może przeoczyłem coś oczywistego; Jestem dość zły w układaniu kolorów.
źródło
Zostawię to tutaj, ponieważ są to nowe informacje na ten temat.
https://www.youtube.com/watch?t=73&v=xYkz0Ueg0L4
Opublikowano 28 maja 2015 r
Trochę zardzewiały na twojej teorii kolorów? Konstrukcja materiału ułatwia kolor. Dowiedz się więcej o kolorze i wzornictwie materiałów na www.google.com/design .
ETA: Kolory podstawowe (500) to kolory, które Google wybrał jako „kolor główny” (lub kolory), na których opierasz swój projekt. Zaczynasz od podstawowej 500, a następnie skalujesz od jasnego do ciemnego; kolory te są stosowane do różnych elementów interfejsu użytkownika.
500s opisuje dominujący motyw w produkcie (i świetnie nadają się do pasków narzędzi) Stamtąd można skalować do 700 dla pasków stanu lub do 300 dla informacji dodatkowych Kolory A to kolory akcentujące - jaśniejsze i bardziej nasycone zachęcające interakcje. Idealnie nadają się do podświetlania przycisków akcji podstawowych, standardowych przycisków, przełączników i suwaków.
Interesujące jest to, że informacje w tym filmie wydają się być sprzeczne lub przynajmniej niekonsekwentnie objaśniają informacje podane przez Google na ich stronie palety wspomnianej powyżej ( http://www.google.com/design/spec/style/color .html # color-color-palette ).
Na stronie palety mówią „Google sugeruje użycie 500 kolorów jako podstawowych kolorów w aplikacji, a inne kolory jako kolorów akcentujących ”. W filmie mówią „Kolory A to kolory akcentujące ...”
To prawda, subtelna różnica, ale jeśli Google zamierza opracować przewodnik po stylu, powinien być spójny z użyciem słowa „ akcent ”.
źródło
Być może już znalazłeś ten zasób, ale Google przygotował niezwykle przydatny przewodnik, aby pomóc programistom i projektantom zsynchronizować się z nową atmosferą Material.
Cały przewodnik można znaleźć tutaj - http://www.google.com/design/spec/material-design/introduction.html#
W szczególności ta strona udostępnia wszystkie swoje ulubione kolory do pobrania - http://www.google.com/design/spec/style/color.html#color-color-palette
źródło
Oto odpowiedź na twoje pytanie .. sprawdź ten film
Zasadniczo więc te liczby reprezentują wstępnie zdefiniowane odcienie i odcienie kolorów podstawowych dla określonych przekrojów / części projektu.
źródło
Moim zdaniem konwencja nazewnictwa opiera się na konwencji nazewnictwa wagowej strony WWW:
Bardzo przydatny i logiczny sposób nazywania czegoś za pomocą linii bazowej i odmian.
Odnośnik: Link do strony GitHub czcionki Inter
Przykładem jest zrzut ekranu czcionki „Inter” Mozilli, która wykorzystuje takie nazewnictwo grubości czcionek, ale w ich przypadku zwykła / podstawowa grubość jest ponumerowana jako 400. Wiele czcionek faktycznie używa 400 jako „zwykłych” grubości, ale jest to inny temat.
źródło