Піктограми
Малі, прості графічні елементи, які підсилюють ключові веб-компоненти, швидко й ефективно передаючи ідеї.
Буквальні, функціональні та геометричні — наші піктограми зводять ідеї до їхньої найчистішої форми, передаючи чітке призначення та позачасову простоту.
Тип
Піктограми Spaceship бувають двох типів: regular і comp. Тип comp поєднує звичайну піктограму з іконкою з бібліотеки іконографії Spaceship, що дає нам змогу передавати складніші й більш специфічні концепції.
Версії
Усі піктограми Spaceship доступні у двох версіях: filled (основна) і outlined (додаткова). Контурну версію слід використовувати лише тоді, коли піктограмі потрібна менша візуальна вага, ніж у сусідніх піктограм, тексту або компонентів UI. Це допомагає вибудувати візуальну ієрархію в складних макетах.
Побудова
Піктограми ґрунтуються на наборі правил — від базової сітки до параметрів градієнта й обведення — щоб забезпечити послідовні та збалансовані результати.
Розмір
Піктограми Spaceship розроблені так, щоб масштабуватися, зберігаючи візуальну узгодженість і забезпечуючи найкращу читабельність. У нашій дизайн-системі є п’ять розмірів піктограм.
Кольори
Піктограми зазвичай використовують один відтінок. Єдиний виняток — тип comp, який може включати фірмові кольори або кольори сповіщень; докладнішу інформацію про це наведено нижче. Щоб забезпечити узгодженість у контекстах UI, піктограми дотримуються колірних референсів Spaceship Design System.
Колір за замовчуванням
Сірий — це колір піктограм за замовчуванням, і його слід використовувати для позначення повідомлень, дій або функцій. У виняткових випадках його також можна використовувати для продуктів. Контурні піктограми доступні лише в кольорі за замовчуванням.
Фірмові кольори
SPS Blue, SPS Dark Gray або білий також можна використовувати замість кольору за замовчуванням, коли потрібен сильніший візуальний ефект або щоб підкреслити ідентичність Spaceship. Докладніше дивіться на сторінці кольорів.
Кольори продуктів
Основний колір продукту слід використовувати для піктограм у контекстах, присвячених продукту (сторінки продукту, картки продукту тощо), для всіх поточних і майбутніх продуктів.
Кольори сповіщень
Ці кольори слід використовувати, щоб підсилити повідомлення сповіщення. Версію comp слід використовувати лише в загальних системних повідомленнях, а не в станах попередження.
Рекомендації
Ось кілька прикладів того, чого слід уникати під час створення та використання піктограм.
Не допускайте, щоб ключові елементи звичайної піктограми потрапляли в нижній правий кут.
Не використовуйте складні або багатоколірні градієнти в залитих версіях.
Не змішуйте залиті та контурні елементи в типі comp.
Не використовуйте в залитих версіях інші кольори, окрім зазначених вище.
Не використовуйте в контурних версіях жодного кольору, окрім кольору за замовчуванням.
Не поєднуйте колір за замовчуванням із будь-яким іншим кольором, окрім основного фірмового кольору Spaceship і кольорів сповіщень.