Пиктограми
Малки, прости графични елементи, които подобряват основните уеб компоненти и предават идеи бързо и ефективно.
Буквални, функционални и геометрични — нашите пиктограми дестилират идеите до най-чистата им форма, предавайки ясна цел и вечна простота.
Тип
Пиктограмите на Spaceship са в два типа: regular и comp. Типът comp комбинира стандартна пиктограма с икона от Spaceship’s Iconography Library, което ни позволява да предаваме по-сложни и специфични концепции.
Варианти
Всички пиктограми на Spaceship са налични в два варианта: плътен (основен) и контурен (вторичен). Контурният вариант трябва да се използва само когато пиктограмата трябва да има по-малка визуална тежест от съседните пиктограми, текст или UI компоненти. Това помага за установяване на визуална йерархия в сложни оформления.
Конструкция
Пиктограмите се базират на набор от правила — от базова мрежа до параметри за градиент и контур, за да се осигурят последователни и балансирани резултати.
Размер
Пиктограмите на Spaceship са проектирани да бъдат мащабируеми, като поддържат визуална последователност и осигуряват най-добра четливост. В нашата дизайн система има пет размера пиктограми.
Цветове
Пиктограмите обикновено използват един цвят. Единственото изключение е типът comp, който може да включва брандови или нотификационни цветове, за които ще намерите повече информация по-долу. За да се осигури последователност в UI контекстите, пиктограмите следват цветните референции на Spaceship Design System.
Стандартен цвят
Сивото е стандартният цвят за пиктограмите и трябва да се използва за представяне на съобщения, действия или функции. В изключителни случаи може да се използва и за продукти. Контурните пиктограми са налични само в стандартния цвят.
Брандови цветове
SPS Blue, SPS Dark Gray или бяло могат също да се използват вместо стандартния цвят, когато е необходим по-силен визуален ефект или за подсилване на идентичността на Spaceship. Вижте страницата с цветове за повече подробности.
Продуктови цветове
Основният продуктов цвят трябва да се използва за пиктограми в контексти, посветени на продукти (продуктови страници, продуктови карти и др.) за всички настоящи и бъдещи продукти.
Нотификационни цветове
Тези цветове трябва да се използват за подсилване на нотификационно съобщение. Версията comp трябва да се използва само в общи системни съобщения, а не в предупредителни състояния.
Насоки
Ето някои примери за това какво да избягвате при създаване и използване на пиктограми.
Не позволявайте ключови елементи на стандартната пиктограма да попадат в долния десен ъгъл.
Не използвайте сложни или многоцветни градиенти във вариантите с плътно запълване.
Не смесвайте плътни и контурни елементи в тип comp.
Не използвайте други цветове във вариантите с плътно запълване, освен посочените по-горе.
Не използвайте никакъв цвят в контурните варианти, освен стандартния цвят.
Не комбинирайте стандартния цвят с друг цвят, освен основния брандов цвят на Spaceship и нотификационните цветове.