SMITT

Сделать дизайн сервиса по продаже и управлению контрактами виртуального мобильного оператора

На главном экране выведены полезные метрики и крупно, кнопка создания контракта

Центральное место занимает список контрактов в табличном виде. Таблица с бесконечным скроллом, ограничена шириной 1280, есть быстрый доступ по ховеру (добавление в избранное, превью для быстрого сравнения карточек и меню с действиями удалить/изменить) Добавленные в избранное контракты фиксируются в верхней части, по аналогии с Google Contacts.

Два ключевых статуса (запуск и эксплуатация) в таблице дублируются индикаторами в начале строчки, так они лучше выделяются из массы продажных контрактов, также я использовал разную форму (заполненный и пустой круг) для лучшего контраста.

Аватарки без фотографий, чтобы не отвлекать от статусов, выполняют больше декоративную функцию, но и немного улучшают фокус.

Функции таблицы сведены к минимому, колонки сортируются по клику. Закрытые контракты автоматически скрываются и доступны по свитчу Архив. Если нужна более сложная фильтрация есть кнопка Фильтры.

Карточка контракта

Карточка выполнение с фиксированной шириной 1160px. Разбита на три функциональных блока. Шапка, контент и парящий блок.

Любой контракт создается в статусе Продажа, что равно черновику. Далее можно приложить документ и передвинуть контракт в Запуск и далее в Эксплуатацию.

Редактирование контракта

Редактирование проходит в отельном окне. Вместо шагов я решил сделать все на одной странице, но так как контент расположен в одной колонке, страница получилась высокой, поэтому для удобства навигации добавил парящий блок с оглавлением. Блок с итоговой ценой и действиями прижат к нижнему краю.

UI kit

Почти для всех проектов я делаю юай-кит, это помогает видеть и дорабатывать визульную стилистику целиком, также обеспечивает быстрый доступ к компонентам ну и помогает врестальщикам при разработке компонентов. Я стараюсь компоновать юай кит только основными элементами, например инпуты, кнопки могут иметь разную размерность в макетах в зависимости от контекста, также прототип содержит много уникальных форм, например оглавление, футеры с кнопками итп.