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