Ваня Аверьянов
hi.averyanov@gmail.com
Азбука Девелопмент
Проектирование интерфейсов и UI-библиотеки для платформы недвижимости
компоненты в figma
файле
Задача
Основной задачей было спроектировать удобный сценарий поиска объектов и создать систему интерфейсов для веба, которая масштабируется на разные типы недвижимости.
Что делал
Проектировал пользовательские сценарии и развивал компонентную систему продукта: базовые UI-компоненты, предметные паттерны, адаптивные состояния и правила их использования
Часть 1
UI-Библиотека
Для ускорения работы над проектом и консистентности была собрана библиотека компонентов и шаблонов
- 15+
- базовых
компонентов - 8+
- продуктовых компонентов
- 6
- сценариев
фильтрации - 3
- Разрешения
экрана
Проработка компонента
Для сложных сценариев использовались компоненты с настраиваемыми свойствами, состояниями и вложенными инстансами
Компонент сверху использовался в сценарии сравнения квартир и поддерживал различные типы контента, состояния и варианты отображения колонок
Часть 2
Компоненты предметной области
Вместо отдельных экранов я создал переиспользуемые компоненты с разными сценариями применения
Часть 3
Система фильтрации для разных типов объектов
Фильтр был одним из ключевых составных компонентов проекта. Он должен был работать не только для каталога квартир, но и для других сценариев: коммерции, паркингов, кладовых и ипотечных программ
Вместо отдельных решений под каждый раздел я собрал единую систему фильтрации с общей логикой, но разным набором параметров под конкретный тип объекта
Квартиры
Основной фильтр каталога: проект, комнатность, цена, площадь и доп параметры
Паркинг
Подбор машиномест: проект, срок сдачи, стоимость, площадь и тип места
Часть 4
Интерфейсы
На основе UI-библиотеки были собраны адаптивные страницы для ключевых сценариев продукта. Компоненты переиспользовались на разных разрешениях и помогали сохранять консистентность интерфейсов
Поиск квартиры
Основной сценарий поиска квартиры: пользователь может просматривать объекты списком, переключаться в шахматку, выбирать проект и видеть пустое состояние при неподходящих параметрах фильтра
Страница объекта
Страница объекта собирает ключевую информацию о квартире: стоимость, планировку, характеристики, условия покупки и действия пользователя
Сравнение
Для сценария выбора между несколькими объектами был спроектирован flow избранного и сравнения квартир с возможностью закреплять объект для сопоставления параметров.
Часть 5
Аудит реализации
После передачи макетов я участвовал в проверке реализованных интерфейсов: фиксировал расхождения с макетами, проверял адаптивные состояния и помогал подсказывать разработчикам, что сломалось на этапе разработки.
Итог
Для проекта была собрана UI-библиотека, спроектированы ключевые сценарии каталога недвижимости, подготовлены адаптивные интерфейсы и проведён аудит реализации
