Легенда
Старожилы Таймыра рассказывают: одной особенно долгой полярной ночью маленькая Ника вышла из чума на свет единственной яркой звезды — и у сугроба нашла котёнка, чёрного как уголь, с глазами цвета весенней травы. Она укутала его в край своего капора и принесла домой.
С тех пор звезда больше не гасла, а котёнок, которого назвали Василием Тундровичем, вырос хмурым с виду, но верным — и теперь всюду следует за Никой: где она — там и кот.
Ника
Главная героиня и лицо Суперники — любопытная, добрая и немного упрямая девочка, которая лучше всех знает дорогу: и в тундре, и в интерфейсе.
Используется как основной персонаж СуперНики: в местах, где нужно добавить бренду человечности и тепла.
Орнамент головного убора, серёг и браслетов отсылает к традиционным северным узорам — визуальная связь с названием «Тундра», без прямого копирования конкретной этнической символики.
Любопытная, открытая и чуть озорная — Ника не боится новых задач и всегда готова показать дорогу. Рядом с ней пользователь должен чувствовать себя так же спокойно, как чувствует себя сама Ника рядом с Василием Тундровичем.
Ника также выступает виртуальным помощником в мобильном приложении — отвечает на вопросы сотрудников, подсказывает статус заявок и показывает актуальную информацию по запросу.
Василий Тундрович
Чёрный кот с ярко-зелёными глазами и своим характером — спутник и верный хранитель Ники. Серьёзный и немного хмурый на вид, но именно он отвечает в паре за легкую иронию.
Используется там, где нужно разбавить тёплый, заботливый тон Ники.
Вышитая повязка и меховая накидка перекликаются с нарядом Ники — тот же орнамент, но в более сдержанной, «кошачьей» подаче.
Хмурый, невозмутимый и преданный — Василий Тундрович редко показывает эмоции, но никогда не отходит от Ники ни на шаг. Его ирония — противовес её открытости.
Цветовая палитра
Эффекты
Значения теней, скруглений и блюра появятся здесь после утверждения. Ниже — каркас раздела.
Типографика
Два семейства шрифтов: Proxima Nova — для заголовков (Heading), Roboto — для основного текста и подписей (Text, Caption). Шкала разбита на размерные ступени с явным весом начертания в названии стиля.
Badge
Небольшой визуальный индикатор статуса, категории или количества. Есть текстовый вариант с иконкой (with text) и три размера точки-индикатора без текста (big dot, dot, small dot) для компактных мест — счётчиков, статусов в списках, точек на аватарах и табах.
- Label — короткое слово или число, не более 1-2 слов, всегда в верхнем регистре
- Если бейдж используется в качестве счётчика, то при достижении счётчика более 99 отображаем значение 99+
List
Строительный блок для списков и меню: текстовый пункт с необязательным хинтом и одним из вариантов контента — чекбоксом, радио-кнопкой, свитчером или тд. Пункты title и divider делят список на смысловые группы. List используется как основа для Dropdown или BottomSheet.
Select
Поле для выбора одного значения из заранее заданного набора вариантов. По клику открывает список опций поверх интерфейса.
Нажмите на поле, чтобы открыть список, и выберите один из вариантов.
Нажмите на поле «Степень родства», выберите вариант в шторке и нажмите «Выбрать».
- Select подойдёт при проектировании различных форм, где необходим единичный выбор атрибута.
- Когда возможен выбор нескольких вариантов из списка — используйте Multiselect; если нужен компонент с поиском и возможностью своего варианта ответа — используйте Autocomplete.
- Если значений в списке более 25 — используйте Autocomplete.
- При возможности используйте существительные для заголовков полей и не используйте глаголы-инструкции (например, «Сотрудник» вместо «Выберите сотрудника»)
- Поле должно быть достаточно широким, чтобы текст выбранного значения не обрезался. Если это неизбежно — используйте многоточие в поле, но не в самом списке: там текст переносится на новую строку.
Dropdown
Раскрывающийся список вариантов, который открывается поверх интерфейса рядом с компонентом, к которому он привязан (например, Select). Список вариантов построен на основе List.
- Список вариантов открывается поверх интерфейса, не блокирует страницу и не мешает использовать другие контролы
- Скролл внутри раскрывающегося списка блокирует скролл всей страницы, пока указатель мышки находится внутри блока
- По умолчанию dropdown размещается под компонентом
- Если dropdown не помещается под компонентом, то его стоит позиционировать над ним
Charts and progress
Компоненты для визуализации данных: диаграммы (кольцевая, столбчатая, линейная) и индикаторы прогресса выполнения задач и значений.
Описание
Charts и Progress используются, когда данные нужно представить визуально — показать соотношение частей и целого, динамику изменений или степень выполнения процесса. Диаграммы подходят для сравнения значений и анализа структуры данных, индикаторы прогресса — для отображения статуса загрузки, выполнения задач или достижения цели.
Группа состоит из шести компонентов: Ring chart (кольцевая диаграмма), Bar chart (столбчатая диаграмма), Line chart (линейный график), Legend (легенда), Progress (линейный индикатор) и Progress circle (круговой индикатор).
Рекомендации по использованию
Bar chart
Столбчатая диаграмма: сравнение значений по категориям. Состоит из повторяющихся элементов bar / item. Подходит для сравнения нескольких значений между собой — например, показателей по подразделениям, месяцам или продуктам.
Do / Don't
Взаимодействие hover/tap
При тапе (на мобильном) или наведении курсора (на десктопе) на столбец над ним появляется тултип с точным значением показателя за выбранный период — остальной интерфейс экрана не меняется.
Премия по месяцам
Ring chart
Кольцевая диаграмма: визуализирует долю значения от целого. Содержит контент по центру (ringChart / content) — числовое значение и/или текстовую подпись. Подходит, когда нужно показать в формате «часть от целого».
Рекомендации
- Для числового значения в верхней строке используется content = value
- Для текстового значения в верхней строке используется content = text
- Текстовый контент может быть любого размера и задаётся дизайнером в зависимости от ситуации. В компоненте указаны базовые значения, но они могут быть изменены.
Do / Don't
Взаимодействие hover
При наведении курсора (на десктопе) или тапе (на мобильном) на сегмент диаграммы появляется тултип с названием категории и её значением. Легенда под диаграммой позволяет считать значения, не взаимодействуя с элементами.
Line chart
Линейный график: отображает динамику изменения значения. Подходит для отслеживания изменения показателя во времени и сравнения нескольких рядов данных на одном графике.
Рекомендации
Если показатель один — подходит график с точками. Если показателей несколько — подходит график без точек, чтобы визуально не перегружать экран
Do / Don't
Взаимодействие hover/tap
При тапе (на мобильном) или наведении курсора (на десктопе) на точку графика появляется тултип с точным значением, а вертикальная направляющая линия помогает соотнести значение с осью x. Легенда под графиком поясняет ряды данных.
Добавить на график
Line / Circle progress
Line progress и Progress circle — индикаторы прогресса: показывают степень выполнения процесса, загрузки или KPI в диапазоне от 0 до 100%. Line progress — линейный вариант, Progress circle — кольцевой.
Рекомендации
- Показатель может быть любым значением, не только процентом. Например, 235 из 280 сотрудников.
- Выполнение плана или KPI — например, процент выполнения годового плана по добыче
- Заполненность лимита или квоты (бюджет, ресурс, срок)
- Индикатор загрузки/обработки данных
- Прогресс многошагового процесса (мастер, онбординг, анкета)
- Виджет на дашборде, где мало места по горизонтали
- Несколько показателей рядом (ряд одинаковых колец для сравнения)
- Индикатор загрузки/обработки данных
Do / Don't
Анимация
Плавное заполнение от 0% до целевого значения при появлении на экране. Анимируется только заливка: width у Line progress и stroke-dashoffset у Progress circle — без изменения цвета, масштаба или обратного хода.
Длительность — 600–800 мс, easing — ease-out (например, cubic-bezier(.33, 1, .68, 1)): старт быстрый, к концу анимация замедляется. Анимация запускается один раз при появлении на экране. Если в компоненте есть фильтры, анимация также запускается заново при каждом изменении показателя.
Table
Компонент для табличного представления данных: списков показателей, финансовой отчётности, сравнения значений по периодам.
Описание
Table используется, когда данные логически образуют строки и столбцы, нужна фиксированная шапка и/или закреплённый первый столбец при скролле, а часть строк требует детализации по клику. Компонент собирается из трёх типов строительных блоков: Header (шапка), Cell (ячейка данных), Footer (итоговая строка).
Поведение и взаимодействие
- Раскрытие строки (drill-down) — строка с иконкой-шевроном кликабельна и ведёт к раскрытию детализации с применением ячеек типа 2 layer.
Клик по строке года с шевроном раскрывает 2 layer-детализацию — ячейки такой детализации курсивные и имеют акцентный «древовидный» коннектор слева.
Период Объявл. по курсу на дату СДмлн $ Выплач. в отчет. периодемлн $ 2024 г – 1 475 2023 г 1 500 – 2022 г н.п. 6 196 2021 г 5 577 2 198 2021 г buy-back н.п. 6 196 2020 г 3 320 4 165 2019 г 4 754 4 166 2018 г 3 739 3 369 2017 г 2 162 2 971 2016 г 2 339 1 232 2015 г 2 148 2 859 2014 г 4 798 3 281 2013 г 2 200 2 989 Итого за период АС 34 538 36 969 2012 г 2 008 1 914 2011 г 1 181 1 234 2010 г 1 220 1 208 2009 г 1 363 – - Закреплённая шапка и первый столбец — при горизонтальном скролле столбцов первый столбец (напр. с названиями показателей) остаётся на месте; при вертикальном скролле фиксируется table / header.
Столбец «Период» и шапка таблицы закреплены одновременно — попробуй прокрутить таблицу по горизонтали и по вертикали. Четвёртый столбец добавлен только для демонстрации горизонтального скролла.
Период Объявл. по курсу на дату СДмлн $ Выплач. в отчет. периодемлн $ Объявл. по курсу на дату СДмлн $ 2024 г – 1 475 – 2023 г 1 500 – 1 500 2022 г н.п. 6 196 н.п. 2021 г 5 577 2 198 5 577 2021 г buy-back н.п. 6 196 н.п. 2020 г 3 320 4 165 3 320 2019 г 4 754 4 166 4 754 2018 г 3 739 3 369 3 739 2017 г 2 162 2 971 2 162 2016 г 2 339 1 232 2 339 2015 г 2 148 2 859 2 148 2014 г 4 798 3 281 4 798 2013 г 2 200 2 989 2 200 Итого за период АС 34 538 36 969 34 538 2012 г 2 008 1 914 2 008 2011 г 1 181 1 234 1 181 2010 г 1 220 1 208 1 220 2009 г 1 363 – 1 363 - Режим выбора — long tap (долгое нажатие) на строку: строка принимает state=selected. Используется по необходимости, например для функционала сравнения.
Зажми строку на ~500 мс, дальше обычные клики по другим строкам добавляют их к выбору.
Вы можете отфильтровать показатели для сравнения
- Клик по активной иконке в ячейке может приводить к открытию Bottom Sheet в случае, если внутренний контент ячейки не представляет сложного и большого функционала.
Клик по значку у строки открывает Bottom Sheet с пояснением к значению.
Период FCF ГРКБ за годмлн $ Дивиденды, объявлен. за годмлн $ * По АС привязка дивидендов к 50% от FCF предыдущего года работает, начиная с 2024 года
2024 год
Начислено 12 млрд руб., что меньше суммы по формуле FCF*50%, поскольку данное начисление делалось по оценочным данным в 4кв. 2024 года.
- Пустые и неприменимые значения — для отсутствующих данных используется тире «–», для неприменимых периодов — сокращение «н.п.».
Do / Don't
Технические заметки
- Тап для входа в детализацию строки на мобильных устройствах в этом компоненте не заложен как основной паттерн.
- Раскрытие происходит по одиночному тапу на строку/иконку.
- Лонг тап (длительное нажатие) — выделение строки (selected state).
Рекомендации по фильтрам
- Кнопка «Поиск» — при активации растягивается, скрывая прочие фильтры.
Клик по иконке поиска раскрывает строку фильтров в поле ввода на всю ширину, скрывая остальные чипы. Кнопка «Отмена» справа возвращает исходный набор фильтров.
- Поиск — единственный фильтр — если поиск единственный фильтр, то он размещается по всей ширине.
Когда в строке нет других фильтров, поле поиска сразу занимает всю ширину — без промежуточного компактного состояния.
- Кнопка «Фильтр» — используется, если фильтров много и они не умещаются в строке. Открывает отдельный экран с набором фильтров. Если фильтры применены — на кнопке появляется бейдж-индикатор.
Клик по чипу «Фильтр» открывает отдельный экран «Настройка отображения» со списком показателей. После изменения набора и нажатия «Применить» экран закрывается, а чип меняет цвет и получает бейдж-индикатор — признак того, что фильтры применены.
9:41ПоказателиВсе - «Быстрые фильтры» — допускается для параметров, которые часто используются.
Часто используемые параметры можно выносить в строку отдельными text chip, минуя экран кнопки «Фильтр». Чипы периода работают как единственный выбор: активен только один чип, и таблица показывает данные только за 2 или 3 последних года — в зависимости от выбора.
Адаптация под Fold-устройства
- Больше пространства по горизонтали — в разложенном состоянии fold-устройства колонки таблицы получают больше воздуха и перестают быть настолько сжатыми.
Период Объявл. по курсу на дату СДмлн $ Выплач. в отчет. периодемлн $ 2024 г – 1 475 2023 г 1 500 – 2022 г н.п. 6 196 2021 г 5 577 2 198 2021 г buy-back н.п. 6 196 2020 г 3 320 4 165 2019 г 4 754 4 166 2018 г 3 739 3 369 2017 г 2 162 2 971 2016 г 2 339 1 232 2015 г 2 148 2 859 2014 г 4 798 3 281 2013 г 2 200 2 989 Итого за период АС 34 538 36 969 2012 г 2 008 1 914 2011 г 1 181 1 234 2010 г 1 220 1 208 2009 г 1 363 –
Типовые экраны
Готовые референсные композиции экранов появятся здесь по мере сборки продукта из компонентов Table и Charts.