diff --git a/public/cases/ai-assistant-figma.html b/public/cases/ai-assistant-figma/index.html similarity index 88% rename from public/cases/ai-assistant-figma.html rename to public/cases/ai-assistant-figma/index.html index d115bcd..b1f17fb 100644 --- a/public/cases/ai-assistant-figma.html +++ b/public/cases/ai-assistant-figma/index.html @@ -11,9 +11,9 @@ - - - - - - - - - - - + + + + + + + + + + + - + - - - - -
-
- - -
-
- -
-
- - -
- - - -
-
- -
- - -
-
-

Product Design · AI

-

Разработка интерфейса для Primo RPA AI Server

-

- Платформа интеллектуальной обработки документов
- и оркестрации ИИ-агентов -

- -
-

Обзор

-

- Внутри компании появился сервис, который заметно улучшил работу с моделями для распознавания текста на документах: загрузка датасета из документов компании, разметка полей, обучение модели и дальнейшее использование модели в других продуктах. Такой подход давал более высокое качество распознавания и соответствовал требованиям безопасности — данные оставались внутри контура компании. Уже в ходе работы в продукте появился функционал дообучения (fine-tuning) базовых нейросетей под задачи компании и работы со скилами: суммаризация, извлечение, генерация и другие сценарии. -

-

- В проект меня пригласили как UX/UI дизайнера: интерфейс до этого собирали разработчики своими силами. В результате работы у сервиса снизился порог входа — продуктом могли пользоваться существенно больше людей без специальной подготовки в области ИИ и OCR. -

- -
- -
-

Было и стало

-

- Сервис был собран на Ant Design под React с визуальной темой Hope UI для Bootstrap. У компании уже было несколько веб-продуктов с задачей унифицировать и освежить интерфейс, поэтому в разработке опирались на компоненты этих систем. -

- -

- Я погрузился в продукт и вместе с командой детально разобрал весь функционал. -

- -

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

-

- Новый подход изменил и восприятие продукта, и процесс настройки. Интерфейс ведёт по этапам настройки, при этом не ломает привычные сценарии: полностью линейный визард здесь невозможен — пользователю всё равно нужно возвращаться назад и уточнять параметры ради качества результата. -

-

Вопросы к команде по текущему состоянию

-

Ответы помогут зафиксировать эффект от внедрения в цифрах и фактах.

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

Паттерны интерфейса

-

- Ниже — ключевые зоны продукта: как они поддерживают сценарии обучения и работы с моделью и чем отличаются от прежнего подхода. -

- -

Сопоставление полей (маппинг)

-

- Маппинг связывает поля документа с целевой структурой данных. Важно было сделать связь наглядной и обратимой, чтобы пользователь не терял контекст при правках. -

-
-
- -
-
Сопоставление полей в интерфейсе
-
- -

Датасет, обучение и контроль качества

-

- Редактор датасета, запуск обучения и экраны качества образуют один ментальный путь: подготовка данных → обучение → проверка результата. -

- -
- Редактор датасета — текущая версия интерфейса -
Редактор датасета — текущая версия
-
-
- Редактор датасета — предыдущая версия для сравнения -
Предыдущая версия редактора
-
-
- Экран обучения модели по датасету -
Обучение по датасету
-
-
- Контроль качества модели после обучения -
Качество и проверка результата
-
- -

Inference в проекте

-

- Отдельный фокус — запуск и контроль модели внутри проекта: пользователь должен понимать состояние прогона и не терять связь с остальными настройками. -

-
- Интерфейс inference модели внутри проекта -
Inference в проекте
-
-
-
-
- Inference в проекте — полный экран интерфейса - -
-
- -
-
-
Полный вертикальный кадр экрана inference
-
-
- Предыдущая версия экрана inference в проекте -
Предыдущая версия inference
-
- - - -

Полноэкранный режим и импорт

-

- Речь не о «длинных задачах», а о процессах в отдельном контексте: одни до завершения блокируют работу с проектом, другие идут параллельно в отдельном окне, и при этом можно продолжать настраивать параметры проекта. Функционал вынесли в отдельное окно, потому что точек входа в такие задачи было несколько, а обычной модалки было недостаточно — нужно было пройти отдельный процесс в стороне и затем вернуться к настройкам проекта. Такой подход сократил объём разработки и тестирования. -

-

- Ниже — три варианта полноэкранного холста: импорт в отдельном окне, режим с панелями и минималистичный «zen». -

-
- Модальное окно импорта датасета на отдельном экране -
Импорт в модальном окне
-
-
- Полноэкранный режим с боковыми панелями -
Полноэкранный режим с панелями
-
-
- Полноэкранный режим без отвлекающих панелей -
Минимальный режим без лишнего chrome
-
- -

Дальнейшее развитие

-

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

-
- -
-

Процесс и передача

-

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

- -

Вопросы следующему дизайнеру

-
    -
  • Что оказалось неочевидным в первые две недели в проекте.
  • -
  • Какие артефакты и правила передачи пригодились больше всего.
  • -
  • Что пришлось пересобрать и по какой причине.
  • -
  • Как в трёх предложениях описать текущее состояние UX.
  • -
-
- -
-

Итог

-

- Интерфейс AI Server в Primo RPA перевели от «инженерного интерфейса разработчиков» к продукту с понятной логикой настройки и сопровождения пользователя. Упор на юзерфлоу и автоматизацию рутины снял часть нагрузки с внедрения и открыл дорогу к более широкому использованию внутри компании и у клиентов. -

-
-
-
- + + + + + + + AI Server в Primo RPA — кейс (черновик 2) + + + + + + + + + + + + + + + + + + + + + + +
+
+ + +
+
+ +
+
+ + +
+ + + +
+
+ +
+ + +
+
+

Product Design · AI

+

Разработка интерфейса для Primo RPA AI Server

+

+ Платформа интеллектуальной обработки документов
+ и оркестрации ИИ-агентов +

+ +
+

Обзор

+

+ Внутри компании появился сервис, который заметно улучшил работу с моделями для распознавания текста на документах: загрузка датасета из документов компании, разметка полей, обучение модели и дальнейшее использование модели в других продуктах. Такой подход давал более высокое качество распознавания и соответствовал требованиям безопасности — данные оставались внутри контура компании. Уже в ходе работы в продукте появился функционал дообучения (fine-tuning) базовых нейросетей под задачи компании и работы со скилами: суммаризация, извлечение, генерация и другие сценарии. +

+

+ В проект меня пригласили как UX/UI дизайнера: интерфейс до этого собирали разработчики своими силами. В результате работы у сервиса снизился порог входа — продуктом могли пользоваться существенно больше людей без специальной подготовки в области ИИ и OCR. +

+ +
+ +
+

Было и стало

+

+ Сервис был собран на Ant Design под React с визуальной темой Hope UI для Bootstrap. У компании уже было несколько веб-продуктов с задачей унифицировать и освежить интерфейс, поэтому в разработке опирались на компоненты этих систем. +

+ +

+ Я погрузился в продукт и вместе с командой детально разобрал весь функционал. +

+ +

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

+

+ Новый подход изменил и восприятие продукта, и процесс настройки. Интерфейс ведёт по этапам настройки, при этом не ломает привычные сценарии: полностью линейный визард здесь невозможен — пользователю всё равно нужно возвращаться назад и уточнять параметры ради качества результата. +

+

Вопросы к команде по текущему состоянию

+

Ответы помогут зафиксировать эффект от внедрения в цифрах и фактах.

+
    +
  • Сократилось ли количество обращений в поддержку.
  • +
  • Получается ли у пользователей самостоятельно пройти настройку проекта от начала до конца.
  • +
  • Позволяет ли новый интерфейс заводить новые типы проектов, опираясь на уже заложенные паттерны.
  • +
+
+ +
+

Паттерны интерфейса

+

+ Ниже — ключевые зоны продукта: как они поддерживают сценарии обучения и работы с моделью и чем отличаются от прежнего подхода. +

+ +

Сопоставление полей (маппинг)

+

+ Маппинг связывает поля документа с целевой структурой данных. Важно было сделать связь наглядной и обратимой, чтобы пользователь не терял контекст при правках. +

+
+
+ +
+
Сопоставление полей в интерфейсе
+
+ +

Датасет, обучение и контроль качества

+

+ Редактор датасета, запуск обучения и экраны качества образуют один ментальный путь: подготовка данных → обучение → проверка результата. +

+ +
+ Редактор датасета — текущая версия интерфейса +
Редактор датасета — текущая версия
+
+
+ Редактор датасета — предыдущая версия для сравнения +
Предыдущая версия редактора
+
+
+ Экран обучения модели по датасету +
Обучение по датасету
+
+
+ Контроль качества модели после обучения +
Качество и проверка результата
+
+ +

Inference в проекте

+

+ Отдельный фокус — запуск и контроль модели внутри проекта: пользователь должен понимать состояние прогона и не терять связь с остальными настройками. +

+
+ Интерфейс inference модели внутри проекта +
Inference в проекте
+
+
+
+
+ Inference в проекте — полный экран интерфейса + +
+
+ +
+
+
Полный вертикальный кадр экрана inference
+
+
+ Предыдущая версия экрана inference в проекте +
Предыдущая версия inference
+
+ + + +

Полноэкранный режим и импорт

+

+ Речь не о «длинных задачах», а о процессах в отдельном контексте: одни до завершения блокируют работу с проектом, другие идут параллельно в отдельном окне, и при этом можно продолжать настраивать параметры проекта. Функционал вынесли в отдельное окно, потому что точек входа в такие задачи было несколько, а обычной модалки было недостаточно — нужно было пройти отдельный процесс в стороне и затем вернуться к настройкам проекта. Такой подход сократил объём разработки и тестирования. +

+

+ Ниже — три варианта полноэкранного холста: импорт в отдельном окне, режим с панелями и минималистичный «zen». +

+
+ Модальное окно импорта датасета на отдельном экране +
Импорт в модальном окне
+
+
+ Полноэкранный режим с боковыми панелями +
Полноэкранный режим с панелями
+
+
+ Полноэкранный режим без отвлекающих панелей +
Минимальный режим без лишнего chrome
+
+ +

Дальнейшее развитие

+

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

+
+ +
+

Процесс и передача

+

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

+ +

Вопросы следующему дизайнеру

+
    +
  • Что оказалось неочевидным в первые две недели в проекте.
  • +
  • Какие артефакты и правила передачи пригодились больше всего.
  • +
  • Что пришлось пересобрать и по какой причине.
  • +
  • Как в трёх предложениях описать текущее состояние UX.
  • +
+
+ +
+

Итог

+

+ Интерфейс AI Server в Primo RPA перевели от «инженерного интерфейса разработчиков» к продукту с понятной логикой настройки и сопровождения пользователя. Упор на юзерфлоу и автоматизацию рутины снял часть нагрузки с внедрения и открыл дорогу к более широкому использованию внутри компании и у клиентов. +

+
+
+
+

Смотрите также

  1. - +
  2. - +
  3. - +
- - -
-
-

Контакты

- -
-
- - - - - - - - - - - - + + +
+
+

Контакты

+ +
+
+ + + + + + + + + + + + diff --git a/public/cases/ai-platform-primo-rpa-v2.html b/public/cases/ai-platform-primo-rpa-v2/index.html similarity index 90% rename from public/cases/ai-platform-primo-rpa-v2.html rename to public/cases/ai-platform-primo-rpa-v2/index.html index bd7e424..9965ab9 100644 --- a/public/cases/ai-platform-primo-rpa-v2.html +++ b/public/cases/ai-platform-primo-rpa-v2/index.html @@ -11,9 +11,9 @@ - - - - - - - - - - - + + + + + + + + + + + - + - - - - -
-
- - -
-
- -
-
- - -
- - - -
-
- -
- - -
-
-

Product Design · AI

-

Разработка интерфейса для Primo RPA AI Server

-

- Платформа интеллектуальной обработки документов
- и оркестрации ИИ-агентов -

- -
-

Обзор

-

- Продукт AI Server разворачивается на внутренних серверах клиентов. Он позволяет использовать нейросети во внутреннем контуре компании и настраивается через веб-интерфейс. -

-

- Меня пригласили на проект как UX/UI-дизайнера. Продукт был в активной стадии тестирования; по обратной связи от клиентов стало ясно, что настройка слишком сложна: с ней справляются только эксперты и команда внедрения Primo RPA. Сложная настройка снижала привлекательность продукта и тормозила масштабирование. -

-

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

- -

- Ниже — погружение в продукт, примеры выполненных задач и паттерны интерфейса. -

-
- -
-

Погружение

-

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

- -

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

-

- Прорабатывать изменения в интерфейсе нужно было с учётом используемого фреймворка. На тот момент это был - Ant Design под React со стилизацией под - Hope UI. -

-

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

-
- -
-

Выполненные задачи

-

- Фрагменты интерфейса, которые я переработал или собрал почти с нуля. Ниже — отдельные задачи из проекта, которые хотелось показать в портфолио, а не обзор всего продукта. -

- -

Главная навигация сервиса

-

- В сервисе стояла привычная для админок схема: слева боковое меню, справа контент. На скриншоте видно, что такая структура страницы неэффективно использовала доступное рабочее пространство на экране. Если открыть проект, слева окажется навигация по разделам проекта — вперемешку с главной, и это путает пользователя. Эту ситуацию нужно было исправить. -

-
- Предыдущая главная навигация сервиса AI Server -
Предыдущая навигация
-
-
- Обновлённая главная навигация сервиса AI Server -
Обновлённая навигация
-
-

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

-

Навигация внутри конкретного проекта

-

- У пользователя остаётся доступ и к навигации внутри проекта, и к главной навигации сервиса. Разные типы проекта содержат разное количество пунктов, и такое решение позволяет удачно их разместить. -

-
- Навигация внутри NLP-проекта и главная навигация сервиса -
NLP-проект
-
-
- Навигация внутри OCR-проекта и главная навигация сервиса -
OCR-проект
-
-

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

-
- Вторичная навигация проекта со стрелочной формой пунктов -
Форма пунктов навигации
-
-

Редактор разметки датасета

-

- На этом экране проводят больше всего времени. Разметка полей на сотнях изображений — монотонная работа, но от неё зависит, насколько качественными будут данные для обучения модели. Прежний редактор сильно выбивался из общего стиля сервиса: выглядел перегруженно и местами сбивал с толку, особенно в работе с полями. -

-
- Редактор датасета — предыдущая версия для сравнения -
Предыдущая версия редактора датасета
-
-

- Я разобрал редактор на микросценарии, выстроил их по приоритету и связке между собой. С командой обсудили, как сделать поведение пользователя плавнее и понятнее. В новой структуре страницы заложил место под новый функционал и те же паттерны, что в остальном сервисе. Дизайн редактора привёл к общей стилистике. -

-
- Редактор датасета — текущая версия интерфейса -
Обновлённая версия редактора датасета
-
-

- На схематическом наброске видно, что страница стала симметричной: почти всё пространство уходит на размечаемое изображение. Действия сгруппированы по панелям — нужную функцию проще найти. -

-
- Вайрфрейм редактора датасета — режим по умолчанию -
Каркас: режим по умолчанию
-
-

- Добавил режим «Во весь экран». Продвинутые пользователи обычно прячут лишние панели и работают с разметкой через горячие клавиши и нижнюю панель. Боковые панели можно свернуть, когда нужно больше места под изображение — на небольших мониторах это особенно имеет значение. -

- - -

- Нижняя панель позволяет переключаться между изображениями и выполнять быстрые действия. -

-
- Главная панель инструментов редактора датасета -
Нижняя панель инструментов
-
- -

Карточки настройки обучения модели

-

- После разметки датасета модель можно дообучить (fine-tuning). Мы с командой, как обычно, разобрали все действия пользователя для этой задачи. Сделали несколько вариантов компоновки этой страницы; самым удачным оказался вариант с лентой из карточек. -

-
- Обзор карточек настройки обучения в проекте -
Вид раздела обучения моделей
-
-

- В начале ленты у пользователя карточка с настройкой обучения: через неё видно результат разметки активного датасета, задают параметры и запускают fine-tuning. -

-
- Карточка настройки обучения -
Карточка настройки обучения
-
-

- В карточке отдельный блок с оценкой качества разметки датасета и блок с параметрами перед запуском обучения. -

- -

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

-
- Карточка процесса обучения модели -
Карточка процесса обучения
-
-

- Внутри карточки информация и действия разнесены по логическим блокам. Мы рассматривали разные варианты компоновки и в итоге зафиксировали схему, которая оказалась удобнее остальных. -

-
- Вайрфрейм карточки процесса обучения -
Вайрфрейм карточки процесса обучения
-
-

- Карточки могут быть свёрнуты. Для удобства в шапку вынесены название и статус. -

-
- Свёрнутая карточка настройки обучения -
Свёрнутая карточка
-
-

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

- -

Настройка параметров полей

-

- На одной из страниц раздела проекта нужно было дать возможность настроить уникальные параметры полей для датасета. Редактору требовалась большая область под изображение (скан документа), могло быть десятки полей, у каждого — свои зависимые параметры и типы. -

-

- На видео — работа прототипа готового решения. -

-
-
- -
-
Сопоставление полей в интерфейсе
-
-

- Интерфейс получился компактным и лаконичным. Механика не считывается с первого взгляда, но после короткого обучения пользователю в нём комфортно. -

-

- Редактор для меня оказался интересной и сложной задачей: было много черновиков и вариантов поведения. В финале остался вариант, который закрывал все требования, которые мы с командой сформулировали. -

- -

Модальные окна на отдельном экране

-

- В сервисе часть задач нужно выполнять параллельно с остальной работой. Для таких сценариев сделали так: модальное окно открывается на отдельной странице. -

-
- Модальное окно импорта датасета на отдельном экране -
Импорт датасета в модальном окне
-
-

- На странице проекта отображается заглушка: процесс идёт, рядом кнопка перехода к нему. -

-
- Импорт датасета внутри проекта -
Импорт датасета внутри проекта
-
-

- Такие заглушки есть в нескольких разделах проекта — в зависимости от того, можно ли с ним работать, пока задача активна. -

- -

- Такой вариант оказался технически проще, чем точечно блокировать кнопки на отдельных страницах. -

- -
- -
-

Передача в разработку

-

- Раз в неделю команда собиралась на обсуждение дизайна. Созвоны были длительными, но продуктивными. На неделю формировали список задач для дизайна, приоритеты и сроки подстраивали под планы релизов. -

-

- Я делал дизайн в Figma, в разработку передавал ссылки на готовые юзерфлоу. Отдельную дизайн-систему или UI-kit не заводили: в продукте уже был готовый фреймворк. -

-

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

-
- -
-

Смена дизайнера

-

- Проект вёл параллельно с другими, нагрузку приходилось распределять. В компанию наняли нового дизайнера — моя задача была ввести её в курс дела и курировать результат по задачам. После адаптации работа над проектом полностью перешла под её ответственность. -

-
- -
-

Итог

-

- Интерфейс Primo RPA AI Server стал выглядеть консистентно. С ним могут работать пользователи, которые ещё не эксперты в области ИИ. Для будущих изменений в интерфейсе заложена возможность наращивать функционал без больших переделок. -

-
-
-
- + + + + + + + AI Server в Primo RPA — кейс + + + + + + + + + + + + + + + + + + + + + + +
+
+ + +
+
+ +
+
+ + +
+ + + +
+
+ +
+ + +
+
+

Product Design · AI

+

Разработка интерфейса для Primo RPA AI Server

+

+ Платформа интеллектуальной обработки документов
+ и оркестрации ИИ-агентов +

+ +
+

Обзор

+

+ Продукт AI Server разворачивается на внутренних серверах клиентов. Он позволяет использовать нейросети во внутреннем контуре компании и настраивается через веб-интерфейс. +

+

+ Меня пригласили на проект как UX/UI-дизайнера. Продукт был в активной стадии тестирования; по обратной связи от клиентов стало ясно, что настройка слишком сложна: с ней справляются только эксперты и команда внедрения Primo RPA. Сложная настройка снижала привлекательность продукта и тормозила масштабирование. +

+

+ Передо мной стояла задача упростить настройку и снизить порог входа, разгрузить техподдержку и отдел внедрения — чтобы клиенты могли самостоятельно настраивать сервис под свои задачи. +

+ +

+ Ниже — погружение в продукт, примеры выполненных задач и паттерны интерфейса. +

+
+ +
+

Погружение

+

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

+ +

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

+

+ Прорабатывать изменения в интерфейсе нужно было с учётом используемого фреймворка. На тот момент это был + Ant Design под React со стилизацией под + Hope UI. +

+

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

+
+ +
+

Выполненные задачи

+

+ Фрагменты интерфейса, которые я переработал или собрал почти с нуля. Ниже — отдельные задачи из проекта, которые хотелось показать в портфолио, а не обзор всего продукта. +

+ +

Главная навигация сервиса

+

+ В сервисе стояла привычная для админок схема: слева боковое меню, справа контент. На скриншоте видно, что такая структура страницы неэффективно использовала доступное рабочее пространство на экране. Если открыть проект, слева окажется навигация по разделам проекта — вперемешку с главной, и это путает пользователя. Эту ситуацию нужно было исправить. +

+
+ Предыдущая главная навигация сервиса AI Server +
Предыдущая навигация
+
+
+ Обновлённая главная навигация сервиса AI Server +
Обновлённая навигация
+
+

+ Обновлённая навигация стала компактной и всё так же привычна большинству пользователей. Для контентной части пространства стало значительно больше. Как будет видно дальше, у проектов внутри появится отдельная навигация, которая не будет перекрывать главную. При этом улучшилась эстетическая составляющая дизайна сервиса. +

+

Навигация внутри конкретного проекта

+

+ У пользователя остаётся доступ и к навигации внутри проекта, и к главной навигации сервиса. Разные типы проекта содержат разное количество пунктов, и такое решение позволяет удачно их разместить. +

+
+ Навигация внутри NLP-проекта и главная навигация сервиса +
NLP-проект
+
+
+ Навигация внутри OCR-проекта и главная навигация сервиса +
OCR-проект
+
+

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

+
+ Вторичная навигация проекта со стрелочной формой пунктов +
Форма пунктов навигации
+
+

Редактор разметки датасета

+

+ На этом экране проводят больше всего времени. Разметка полей на сотнях изображений — монотонная работа, но от неё зависит, насколько качественными будут данные для обучения модели. Прежний редактор сильно выбивался из общего стиля сервиса: выглядел перегруженно и местами сбивал с толку, особенно в работе с полями. +

+
+ Редактор датасета — предыдущая версия для сравнения +
Предыдущая версия редактора датасета
+
+

+ Я разобрал редактор на микросценарии, выстроил их по приоритету и связке между собой. С командой обсудили, как сделать поведение пользователя плавнее и понятнее. В новой структуре страницы заложил место под новый функционал и те же паттерны, что в остальном сервисе. Дизайн редактора привёл к общей стилистике. +

+
+ Редактор датасета — текущая версия интерфейса +
Обновлённая версия редактора датасета
+
+

+ На схематическом наброске видно, что страница стала симметричной: почти всё пространство уходит на размечаемое изображение. Действия сгруппированы по панелям — нужную функцию проще найти. +

+
+ Вайрфрейм редактора датасета — режим по умолчанию +
Каркас: режим по умолчанию
+
+

+ Добавил режим «Во весь экран». Продвинутые пользователи обычно прячут лишние панели и работают с разметкой через горячие клавиши и нижнюю панель. Боковые панели можно свернуть, когда нужно больше места под изображение — на небольших мониторах это особенно имеет значение. +

+ + +

+ Нижняя панель позволяет переключаться между изображениями и выполнять быстрые действия. +

+
+ Главная панель инструментов редактора датасета +
Нижняя панель инструментов
+
+ +

Карточки настройки обучения модели

+

+ После разметки датасета модель можно дообучить (fine-tuning). Мы с командой, как обычно, разобрали все действия пользователя для этой задачи. Сделали несколько вариантов компоновки этой страницы; самым удачным оказался вариант с лентой из карточек. +

+
+ Обзор карточек настройки обучения в проекте +
Вид раздела обучения моделей
+
+

+ В начале ленты у пользователя карточка с настройкой обучения: через неё видно результат разметки активного датасета, задают параметры и запускают fine-tuning. +

+
+ Карточка настройки обучения +
Карточка настройки обучения
+
+

+ В карточке отдельный блок с оценкой качества разметки датасета и блок с параметрами перед запуском обучения. +

+ +

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

+
+ Карточка процесса обучения модели +
Карточка процесса обучения
+
+

+ Внутри карточки информация и действия разнесены по логическим блокам. Мы рассматривали разные варианты компоновки и в итоге зафиксировали схему, которая оказалась удобнее остальных. +

+
+ Вайрфрейм карточки процесса обучения +
Вайрфрейм карточки процесса обучения
+
+

+ Карточки могут быть свёрнуты. Для удобства в шапку вынесены название и статус. +

+
+ Свёрнутая карточка настройки обучения +
Свёрнутая карточка
+
+

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

+ +

Настройка параметров полей

+

+ На одной из страниц раздела проекта нужно было дать возможность настроить уникальные параметры полей для датасета. Редактору требовалась большая область под изображение (скан документа), могло быть десятки полей, у каждого — свои зависимые параметры и типы. +

+

+ На видео — работа прототипа готового решения. +

+
+
+ +
+
Сопоставление полей в интерфейсе
+
+

+ Интерфейс получился компактным и лаконичным. Механика не считывается с первого взгляда, но после короткого обучения пользователю в нём комфортно. +

+

+ Редактор для меня оказался интересной и сложной задачей: было много черновиков и вариантов поведения. В финале остался вариант, который закрывал все требования, которые мы с командой сформулировали. +

+ +

Модальные окна на отдельном экране

+

+ В сервисе часть задач нужно выполнять параллельно с остальной работой. Для таких сценариев сделали так: модальное окно открывается на отдельной странице. +

+
+ Модальное окно импорта датасета на отдельном экране +
Импорт датасета в модальном окне
+
+

+ На странице проекта отображается заглушка: процесс идёт, рядом кнопка перехода к нему. +

+
+ Импорт датасета внутри проекта +
Импорт датасета внутри проекта
+
+

+ Такие заглушки есть в нескольких разделах проекта — в зависимости от того, можно ли с ним работать, пока задача активна. +

+ +

+ Такой вариант оказался технически проще, чем точечно блокировать кнопки на отдельных страницах. +

+ +
+ +
+

Передача в разработку

+

+ Раз в неделю команда собиралась на обсуждение дизайна. Созвоны были длительными, но продуктивными. На неделю формировали список задач для дизайна, приоритеты и сроки подстраивали под планы релизов. +

+

+ Я делал дизайн в Figma, в разработку передавал ссылки на готовые юзерфлоу. Отдельную дизайн-систему или UI-kit не заводили: в продукте уже был готовый фреймворк. +

+

+ Время от времени созванивался с верстальщиком тет-а-тет, если нужно уточнить детали по макетам или объяснить поведение интерфейса. После вёрстки давал фидбэк на правки, чтобы результат не отличался от задуманного поведения и вида интерфейса. +

+
+ +
+

Смена дизайнера

+

+ Проект вёл параллельно с другими, нагрузку приходилось распределять. В компанию наняли нового дизайнера — моя задача была ввести её в курс дела и курировать результат по задачам. После адаптации работа над проектом полностью перешла под её ответственность. +

+
+ +
+

Итог

+

+ Интерфейс Primo RPA AI Server стал выглядеть консистентно. С ним могут работать пользователи, которые ещё не эксперты в области ИИ. Для будущих изменений в интерфейсе заложена возможность наращивать функционал без больших переделок. +

+
+
+
+

Смотрите также

  1. - +
  2. - +
  3. - +
- - -
-
-

Контакты

- -
-
- - - - - - - - - - - - - + + +
+
+

Контакты

+ +
+
+ + + + + + + + + + + + + diff --git a/public/cases/card-columns-obsidian.html b/public/cases/card-columns-obsidian/index.html similarity index 88% rename from public/cases/card-columns-obsidian.html rename to public/cases/card-columns-obsidian/index.html index 94f3230..a44caba 100644 --- a/public/cases/card-columns-obsidian.html +++ b/public/cases/card-columns-obsidian/index.html @@ -11,9 +11,9 @@ - - - - - - - - - - - + + + + + + + + + + + - + - - - - - -
-
- - -
-
- -
-
- - -
- - - -
-
- -
- - -
-
-

Документация · UI

-

Design System

-

Токены, типографика, сетка, компоненты и блоки лонгрида кейса

-

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

- - - -

Цвета

-

- Акцент и «холод/тепло» всего UI задаются тремя числами в модели HSL (Hue — оттенок, - Saturation — насыщенность, Lightness — светлота) на <html>. Из них собирается - --accent и производные токены; нейтральные фоны слегка подмешивают тот же оттенок - (--neutral-accent-tint). Светлая/тёмная тема — data-theme, mesh — - data-mesh-bg. Меняется в FAB справа. -

-

Что такое --theme-h, --theme-s, --theme-l

- -

- В CSS это выглядит так: - --accent: hsl(var(--theme-h) calc(var(--theme-s) * 1%) calc(var(--theme-l) * 1%)). - Значения пишутся в localStorage (siteThemeV1) и подставляются inline-скриптом в - head, чтобы не было вспышки «чужого» цвета при загрузке. -

-
-
-
- --bg -
-
-
- --bg-elevated -
-
-
- --surface -
-
-
- --text -
-
-
- --text-muted -
-
-
- --line -
-
-
- --accent -
-
-
- --accent-text -
-
-
- --accent-soft -
-
-

- Дополнительно: квадратичные оттенки mesh — --accent-square-2 … 4; они зависят от hue. -

- -

Шрифты

-

- Пара шрифтов — data-font на <html> (FAB «Типографика»): задаёт - --font-accent (заголовки) и --font (проза). Шкала в таблицах: класс, пример, назначение. -

-

Семейства

-
- - - - - - - - - - - - - - - - - - - - - - - - - -
data-fontСтекГде
merriweatherMerriweather + AliceПара по умолчанию; Alice — основной текст, Merriweather — акцентные заголовки
monoSource Code Pro + PT MonoМоноширинная пара
geologicaGeologica + PT SansГротеск + нейтральная проза
-
- -

Типографическая шкала

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
КлассПримерНазначение
.hero__eyebrow

Подпись секции

Hero, ввод кейса
.hero__title -

- Display заголовок -

-
H1 главной; на DS уменьшен для колонки
.section__title

Секция

«Навыки», «Портфолио», контакты; основной шрифт, без капса
.case-page__h1

Заголовок страницы

H1 кейса / Design System
.case-page__sub

Лид под заголовком

Подзаголовок под H1
.section__prose

Основной текст абзаца.

Проза, списки, ссылки в статье
h2 в .case-article

Подсекция H2

Разделы лонгрида (как «Цвета»)
h3 в .case-article

Подсекция H3

Подразделы внутри H2; отступы в main.css: сверху 3.25rem, снизу 1.5rem, после figure 4rem, h3+h3 3.5rem
-
- -

Ритм и код

-

Пример ритма:

- -
    -
  1. нумерованный пункт;
  2. -
-

Инлайн code и блок:

-
--font: "Alice", system-ui, serif;
---font-accent: "Merriweather", var(--font);
-

- Заголовки используют clamp() — масштаб от вьюпорта; подробнее в разделе «Сетка». -

- -

Сетка и адаптив

-

- Отдельной 12-колоночной сетки нет: full-bleed layout с боковыми полями - --space и локальными CSS Grid внутри секций. Контентная колонка DS и кейсов — - .case-article (max-width 48rem). -

- -

Базовый каркас

- - -

Брейкпоинты

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ОтЧто меняется
860px.hero__grid → 2 колонки 1.15fr 0.85fr
760px / 1180px.projects-carousel: --projects-visible 1 → 2 → 3 карточки
720px.skills-category__grid → 2 колонки
1024pxНавыки: 6-колоночная мозаика (grid-column: span …)
560px / 1024px.contact-grid → 2 → 4 колонки
48rem / 28remГалерея кейса: ≤2 col → 1 col
640pxcase-media-gallery--wide схлопывается в ширину колонки
-
- -

Hero: одна → две колонки

-

Схема .hero__grid (сжато до 860px):

- - -

Контакты: 1 → 2 → 4

-

Демо .contact-grid (плейсхолдеры, без переходов):

- -

- Навыки: мозаика на широком экране — см. - главную, #skills. Портфолио: карусель на - 100vw с --projects-card-width и JS-прокруткой — на главной - #projects. -

- -

Wide в кейсах

-

- .case-media--wide, .case-media-gallery--wide и .case-callout шире - колонки статьи: min(100vw − 2×padding, content + 8rem), с полями --space. На узком - экране (до 640px) wide схлопывается в ширину колонки. Кадры с data-image-viewer — обводка и hover - как у .case-video-shell (живые примеры — демо элементов кейса). Подпись под видео — - figcaption по центру колонки. -

- -

Типографика и motion

-

- Fluid type: clamp() на .hero__title, .section__title, - .case-page__h1. Скругления (data-radius) сетку не меняют. Для длинных скринов и - анимаций учитывается prefers-reduced-motion: reduce. -

- -

Компоненты

-

Живые примеры; оболочка (шапка, FAB, футер, cookie) уже подключена на этой странице.

- -

Кнопки

- -

.btn .btn--primary | secondary | ghost · .btn--flat | raised · .btn__icon

- -

FAB-кнопки

-

- Плавающие кнопки в правом нижнем углу (.fab-stack). Иконка-only и с текстовой подписью. -

-
- - - -
-

.fab .fab--primary | secondary · .fab--label (с текстом) · .fab-primary__ico · .fab__label

- -

Теги

- -

.hero__tags / .hero__tag

- -

.portfolio-card__tags / .portfolio-card__tag

- -

Карточка портфолио

- -

.portfolio-card и дочерние BEM-классы

- -

Заглушка при загрузке изображений

-

- Пока img ещё не загрузился, initImageLoadPlaceholder вешает - .is-img-loading на картинку и .has-img-loading на обёртку. Слой фона — - ::before, один блеск слева направо — ::after (img-ph-shine-sweep). - Иконки, SVG и мелкие картинки до 40px пропускаются; - отключить точечно: data-no-img-placeholder. Ниже — зафиксированное демо (на сайте классы снимаются - после load). -

- -

.has-img-loading · .is-img-loading · .img-ph-demo (демо заглушки)

- -

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

-
-

skill-task-card__task — формулировка задачи от бизнеса.

-
-

skill-task-card__solution — первый подход к решению.

-

Второй пункт в зоне решений.

-
-
-

.skill-task-card__task · __solutions · __solution

- -

Callout

-

- Акцентный блок лонгрида: шире колонки (как wide-медиа), текст в .case-callout__content чуть - крупнее основного абзаца. -

- -

.case-callout · .case-callout__emoji · .case-callout__emoji--pulse · .case-callout__content

- -

Контактные карточки

-

- На главной в сетке четыре карточки (1→2→4 колонки). Здесь два примера — сетка принудительно в две колонки. -

- -

.contact-card--link · --action · --brand-*

- -

Секция с фоном

-

- На главной полоса .section--surface визуально читается через mesh; в кейсах фон страницы - ровный — ниже компактное демо с background: var(--surface). -

-
-
-

section__title

-

Фрагмент .section.section--surface + .section__inner

-
-
-

.section · .section--surface · .section--tight · .section__inner

- -

Блоки

-
-

- Разметка лонгрида кейса: медиа и галереи, карточки ссылок, видео, callout, wide-блоки и прочие partials. - Живой эталон со всеми вариантами — на отдельной странице; оттуда копируют куски при сборке нового кейса. -

-

- Демо элементов кейса -

-
- -

Активность

-
-

- На главной в секции #mini-projects карточки mp-card в masonry-сетке. Типы, клетки и живая - раскладка вынесены на отдельную страницу. -

-

- Каталог карточек активности -

-
-
-
- - - - - - - - - - - - + + + + + + + Design System — портфолио + + + + + + + + + + + + + + + + + + + + + +
+
+ + +
+
+ +
+
+ + +
+ + + +
+
+ +
+ + +
+
+

Документация · UI

+

Design System

+

Токены, типографика, сетка, компоненты и блоки лонгрида кейса

+

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

+ + + +

Цвета

+

+ Акцент и «холод/тепло» всего UI задаются тремя числами в модели HSL (Hue — оттенок, + Saturation — насыщенность, Lightness — светлота) на <html>. Из них собирается + --accent и производные токены; нейтральные фоны слегка подмешивают тот же оттенок + (--neutral-accent-tint). Светлая/тёмная тема — data-theme, mesh — + data-mesh-bg. Меняется в FAB справа. +

+

Что такое --theme-h, --theme-s, --theme-l

+ +

+ В CSS это выглядит так: + --accent: hsl(var(--theme-h) calc(var(--theme-s) * 1%) calc(var(--theme-l) * 1%)). + Значения пишутся в localStorage (siteThemeV1) и подставляются inline-скриптом в + head, чтобы не было вспышки «чужого» цвета при загрузке. +

+
+
+
+ --bg +
+
+
+ --bg-elevated +
+
+
+ --surface +
+
+
+ --text +
+
+
+ --text-muted +
+
+
+ --line +
+
+
+ --accent +
+
+
+ --accent-text +
+
+
+ --accent-soft +
+
+

+ Дополнительно: квадратичные оттенки mesh — --accent-square-2 … 4; они зависят от hue. +

+ +

Шрифты

+

+ Пара шрифтов — data-font на <html> (FAB «Типографика»): задаёт + --font-accent (заголовки) и --font (проза). Шкала в таблицах: класс, пример, назначение. +

+

Семейства

+
+ + + + + + + + + + + + + + + + + + + + + + + + + +
data-fontСтекГде
merriweatherMerriweather + AliceПара по умолчанию; Alice — основной текст, Merriweather — акцентные заголовки
monoSource Code Pro + PT MonoМоноширинная пара
geologicaGeologica + PT SansГротеск + нейтральная проза
+
+ +

Типографическая шкала

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
КлассПримерНазначение
.hero__eyebrow

Подпись секции

Hero, ввод кейса
.hero__title +

+ Display заголовок +

+
H1 главной; на DS уменьшен для колонки
.section__title

Секция

«Навыки», «Портфолио», контакты; основной шрифт, без капса
.case-page__h1

Заголовок страницы

H1 кейса / Design System
.case-page__sub

Лид под заголовком

Подзаголовок под H1
.section__prose

Основной текст абзаца.

Проза, списки, ссылки в статье
h2 в .case-article

Подсекция H2

Разделы лонгрида (как «Цвета»)
h3 в .case-article

Подсекция H3

Подразделы внутри H2; отступы в main.css: сверху 3.25rem, снизу 1.5rem, после figure 4rem, h3+h3 3.5rem
+
+ +

Ритм и код

+

Пример ритма:

+ +
    +
  1. нумерованный пункт;
  2. +
+

Инлайн code и блок:

+
--font: "Alice", system-ui, serif;
+--font-accent: "Merriweather", var(--font);
+

+ Заголовки используют clamp() — масштаб от вьюпорта; подробнее в разделе «Сетка». +

+ +

Сетка и адаптив

+

+ Отдельной 12-колоночной сетки нет: full-bleed layout с боковыми полями + --space и локальными CSS Grid внутри секций. Контентная колонка DS и кейсов — + .case-article (max-width 48rem). +

+ +

Базовый каркас

+ + +

Брейкпоинты

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ОтЧто меняется
860px.hero__grid → 2 колонки 1.15fr 0.85fr
760px / 1180px.projects-carousel: --projects-visible 1 → 2 → 3 карточки
720px.skills-category__grid → 2 колонки
1024pxНавыки: 6-колоночная мозаика (grid-column: span …)
560px / 1024px.contact-grid → 2 → 4 колонки
48rem / 28remГалерея кейса: ≤2 col → 1 col
640pxcase-media-gallery--wide схлопывается в ширину колонки
+
+ +

Hero: одна → две колонки

+

Схема .hero__grid (сжато до 860px):

+ + +

Контакты: 1 → 2 → 4

+

Демо .contact-grid (плейсхолдеры, без переходов):

+ +

+ Навыки: мозаика на широком экране — см. + главную, #skills. Портфолио: карусель на + 100vw с --projects-card-width и JS-прокруткой — на главной + #projects. +

+ +

Wide в кейсах

+

+ .case-media--wide, .case-media-gallery--wide и .case-callout шире + колонки статьи: min(100vw − 2×padding, content + 8rem), с полями --space. На узком + экране (до 640px) wide схлопывается в ширину колонки. Кадры с data-image-viewer — обводка и hover + как у .case-video-shell (живые примеры — демо элементов кейса). Подпись под видео — + figcaption по центру колонки. +

+ +

Типографика и motion

+

+ Fluid type: clamp() на .hero__title, .section__title, + .case-page__h1. Скругления (data-radius) сетку не меняют. Для длинных скринов и + анимаций учитывается prefers-reduced-motion: reduce. +

+ +

Компоненты

+

Живые примеры; оболочка (шапка, FAB, футер, cookie) уже подключена на этой странице.

+ +

Кнопки

+ +

.btn .btn--primary | secondary | ghost · .btn--flat | raised · .btn__icon

+ +

FAB-кнопки

+

+ Плавающие кнопки в правом нижнем углу (.fab-stack). Иконка-only и с текстовой подписью. +

+
+ + + +
+

.fab .fab--primary | secondary · .fab--label (с текстом) · .fab-primary__ico · .fab__label

+ +

Теги

+ +

.hero__tags / .hero__tag

+ +

.portfolio-card__tags / .portfolio-card__tag

+ +

Карточка портфолио

+ +

.portfolio-card и дочерние BEM-классы

+ +

Заглушка при загрузке изображений

+

+ Пока img ещё не загрузился, initImageLoadPlaceholder вешает + .is-img-loading на картинку и .has-img-loading на обёртку. Слой фона — + ::before, один блеск слева направо — ::after (img-ph-shine-sweep). + Иконки, SVG и мелкие картинки до 40px пропускаются; + отключить точечно: data-no-img-placeholder. Ниже — зафиксированное демо (на сайте классы снимаются + после load). +

+ +

.has-img-loading · .is-img-loading · .img-ph-demo (демо заглушки)

+ +

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

+
+

skill-task-card__task — формулировка задачи от бизнеса.

+
+

skill-task-card__solution — первый подход к решению.

+

Второй пункт в зоне решений.

+
+
+

.skill-task-card__task · __solutions · __solution

+ +

Callout

+

+ Акцентный блок лонгрида: шире колонки (как wide-медиа), текст в .case-callout__content чуть + крупнее основного абзаца. +

+ +

.case-callout · .case-callout__emoji · .case-callout__emoji--pulse · .case-callout__content

+ +

Контактные карточки

+

+ На главной в сетке четыре карточки (1→2→4 колонки). Здесь два примера — сетка принудительно в две колонки. +

+ +

.contact-card--link · --action · --brand-*

+ +

Секция с фоном

+

+ На главной полоса .section--surface визуально читается через mesh; в кейсах фон страницы + ровный — ниже компактное демо с background: var(--surface). +

+
+
+

section__title

+

Фрагмент .section.section--surface + .section__inner

+
+
+

.section · .section--surface · .section--tight · .section__inner

+ +

Блоки

+
+

+ Разметка лонгрида кейса: медиа и галереи, карточки ссылок, видео, callout, wide-блоки и прочие partials. + Живой эталон со всеми вариантами — на отдельной странице; оттуда копируют куски при сборке нового кейса. +

+

+ Демо элементов кейса +

+
+ +

Активность

+
+

+ На главной в секции #mini-projects карточки mp-card в masonry-сетке. Типы, клетки и живая + раскладка вынесены на отдельную страницу. +

+

+ Каталог карточек активности +

+
+
+
+ + + + + + + + + + + + diff --git a/public/cases/lunacy.html b/public/cases/lunacy/index.html similarity index 84% rename from public/cases/lunacy.html rename to public/cases/lunacy/index.html index 6a5d557..8441b07 100644 --- a/public/cases/lunacy.html +++ b/public/cases/lunacy/index.html @@ -1,567 +1,567 @@ - - - - - - - Lunacy — кейс - - - - - - - - - - - - - - - - - - - - -
-
- - -
-
- -
-
- - -
- - - -
-
- -
- - -
-
-

Icons8 · desktop

-

Графический редактор Lunacy

-

- Работа над интерфейсом Lunacy в команде Icons8: user flow, прототипы сложных сценариев, доработка функциональности и - визуальной логики. Ниже — фрагменты экранов из процесса (порядок кадров ориентирован на имена файлов). -

-

- Продукт: icons8.com/lunacy -

- -

Обзор

-

Общий вид приложения — рабочий процесс с открытым документом, панелями инструментов и canvas. Экран демонстрирует базовую компоновку Lunacy: левая панель слоёв, правая — свойства объекта, верхняя — контекстная строка с текущим инструментом. Отправная точка для остальных материалов на странице.

-
- Обзор приложения Lunacy -
Обзор окна Lunacy.
-
-

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

- -

Blob: настройки на холсте

-

Работа с blob в контексте холста — отдельный сценарий до разборов панели по версиям.

-
- Настройки blob на холсте -
blob_settings_on_canvas
-
-

Панель настроек для тех же задач развивалась серией макетов v1–v9 — они собраны в сетку ниже.

- -

Компоненты и сравнение

-

Сравнение компонентов и индикатор обновлений в панели.

-
- Модальное окно сравнения компонентов -
compare_components_modal_window
-
-
- Индикатор обновления компонентов в панели -
components_update_indicator_location_panel
-
-

Два связанных экрана: поиск расхождений и отображение статуса обновлений рядом с навигацией по панели.

- -

Прототип в панели

-

Создание прототипа на холсте и состояния панели для режима прототипа.

-
- Модальное окно: создать прототип на холсте -
modal_window_for_prototype_create_on_canvas
-
-
- Модальное окно: состояния панели прототипа -
modal_window_for_prototype_panel_states
-
-

Оба кадра — про увязку прототипа с холстом и с набором состояний панели.

- -

Shadow Pro: настройки

-

Блок Shadow Pro: панель, идеи, модалки с авто-включением и выключением.

-
- Shadow Pro: панель настроек -
shadow_pro_settings_panel
-
-
- Shadow Pro: идеи -
shadow_pro_settings_ideas
-
-
- Shadow Pro: модалка, авто включено -
shadow_pro_settings_modal_auto_on
-
-
- Shadow Pro: модалка, авто выключено -
shadow_pro_settings_modal_auto-off
-
-

Четыре кадра подряд показывают развитие одного подпроекта: от панели и набросков к уточнению поведения в модалках.

- -

Панель настроек blob: версии v1–v9

-

- Итерации панели по именам файлов blob_settings_panel_v1 … v9. Сетка на ширине текста, три колонки на - широком экране; при сужении окна число колонок уменьшается автоматически. -

- -

Сетка удобна для сравнения шага к шагу; для деталей клик по ячейке открывает полноэкранный просмотр.

- -

Слайдер: версии v1–v18 и кадр 14

-

- Порядок по именам: slider_v1 … slider_v13, затем slider_14 (в ассете без суффикса v), - затем slider_v15 … slider_v18. -

- -

Такой ряд полезен при разборе эволюции контрола: от ранних раскладок до финальных состояний.

- -

Слайдеры: общий кадр

-

Сводный экран по слайдерам — после ряда по версиям.

-
- Все слайдеры: общий вид -
sliders_all_set
-
-

Завершает блок про слайдеры: контекст, как несколько контролов сосуществуют на одном экране.

-
-
- + + + + + + + Lunacy — кейс + + + + + + + + + + + + + + + + + + + + +
+
+ + +
+
+ +
+
+ + +
+ + + +
+
+ +
+ + +
+
+

Icons8 · desktop

+

Графический редактор Lunacy

+

+ Работа над интерфейсом Lunacy в команде Icons8: user flow, прототипы сложных сценариев, доработка функциональности и + визуальной логики. Ниже — фрагменты экранов из процесса (порядок кадров ориентирован на имена файлов). +

+

+ Продукт: icons8.com/lunacy +

+ +

Обзор

+

Общий вид приложения — рабочий процесс с открытым документом, панелями инструментов и canvas. Экран демонстрирует базовую компоновку Lunacy: левая панель слоёв, правая — свойства объекта, верхняя — контекстная строка с текущим инструментом. Отправная точка для остальных материалов на странице.

+
+ Обзор приложения Lunacy +
Обзор окна Lunacy.
+
+

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

+ +

Blob: настройки на холсте

+

Работа с blob в контексте холста — отдельный сценарий до разборов панели по версиям.

+
+ Настройки blob на холсте +
blob_settings_on_canvas
+
+

Панель настроек для тех же задач развивалась серией макетов v1–v9 — они собраны в сетку ниже.

+ +

Компоненты и сравнение

+

Сравнение компонентов и индикатор обновлений в панели.

+
+ Модальное окно сравнения компонентов +
compare_components_modal_window
+
+
+ Индикатор обновления компонентов в панели +
components_update_indicator_location_panel
+
+

Два связанных экрана: поиск расхождений и отображение статуса обновлений рядом с навигацией по панели.

+ +

Прототип в панели

+

Создание прототипа на холсте и состояния панели для режима прототипа.

+
+ Модальное окно: создать прототип на холсте +
modal_window_for_prototype_create_on_canvas
+
+
+ Модальное окно: состояния панели прототипа +
modal_window_for_prototype_panel_states
+
+

Оба кадра — про увязку прототипа с холстом и с набором состояний панели.

+ +

Shadow Pro: настройки

+

Блок Shadow Pro: панель, идеи, модалки с авто-включением и выключением.

+
+ Shadow Pro: панель настроек +
shadow_pro_settings_panel
+
+
+ Shadow Pro: идеи +
shadow_pro_settings_ideas
+
+
+ Shadow Pro: модалка, авто включено +
shadow_pro_settings_modal_auto_on
+
+
+ Shadow Pro: модалка, авто выключено +
shadow_pro_settings_modal_auto-off
+
+

Четыре кадра подряд показывают развитие одного подпроекта: от панели и набросков к уточнению поведения в модалках.

+ +

Панель настроек blob: версии v1–v9

+

+ Итерации панели по именам файлов blob_settings_panel_v1 … v9. Сетка на ширине текста, три колонки на + широком экране; при сужении окна число колонок уменьшается автоматически. +

+ +

Сетка удобна для сравнения шага к шагу; для деталей клик по ячейке открывает полноэкранный просмотр.

+ +

Слайдер: версии v1–v18 и кадр 14

+

+ Порядок по именам: slider_v1 … slider_v13, затем slider_14 (в ассете без суффикса v), + затем slider_v15 … slider_v18. +

+ +

Такой ряд полезен при разборе эволюции контрола: от ранних раскладок до финальных состояний.

+ +

Слайдеры: общий кадр

+

Сводный экран по слайдерам — после ряда по версиям.

+
+ Все слайдеры: общий вид +
sliders_all_set
+
+

Завершает блок про слайдеры: контекст, как несколько контролов сосуществуют на одном экране.

+
+
+

Смотрите также

  1. - +
  2. - +
  3. - +
- - -
-
-

Контакты

- -
-
- - - - - - - - - - - - - + + +
+
+

Контакты

+ +
+
+ + + + + + + + + + + + + diff --git a/public/cases/manu-game-maker.html b/public/cases/manu-game-maker/index.html similarity index 85% rename from public/cases/manu-game-maker.html rename to public/cases/manu-game-maker/index.html index a13cd83..0e984ef 100644 --- a/public/cases/manu-game-maker.html +++ b/public/cases/manu-game-maker/index.html @@ -1,309 +1,309 @@ - - - - - - - Игровой движок MANU — кейс - - - - - - - - - - - - - - - - - - - - -
-
- - -
-
- -
-
- - -
- - - -
-
- -
- - -
-
-

Product Design · Desktop App

-

Игровой движок MANU

-

- Редизайн и развитие интерфейса: новая концепция работы, обновлённая визуальная система и сотни проработанных пользовательских сценариев. -

-

- Работа велась вокруг десктопного редактора и связанных панелей: нужно было удержать целостность визуального языка при росте функциональности и не потерять опытные сценарии силовых пользователей. -

-

- Развёрнутый лонгрид кейса появится на этой странице позже; ниже — обложка для навигации из портфолио. -

-

Обложка

-
- Интерфейс игрового движка MANU — обложка кейса -
Текущее превью для карточки портфолио
-
-
-
- + + + + + + + Игровой движок MANU — кейс + + + + + + + + + + + + + + + + + + + + +
+
+ + +
+
+ +
+
+ + +
+ + + +
+
+ +
+ + +
+
+

Product Design · Desktop App

+

Игровой движок MANU

+

+ Редизайн и развитие интерфейса: новая концепция работы, обновлённая визуальная система и сотни проработанных пользовательских сценариев. +

+

+ Работа велась вокруг десктопного редактора и связанных панелей: нужно было удержать целостность визуального языка при росте функциональности и не потерять опытные сценарии силовых пользователей. +

+

+ Развёрнутый лонгрид кейса появится на этой странице позже; ниже — обложка для навигации из портфолио. +

+

Обложка

+
+ Интерфейс игрового движка MANU — обложка кейса +
Текущее превью для карточки портфолио
+
+
+
+

Смотрите также

  1. - +
  2. - +
  3. - +
- - -
-
-

Контакты

- -
-
- - - - - - - - - - - - - + + +
+
+

Контакты

+ +
+
+ + + + + + + + + + + + + diff --git a/public/cases/mini-projects-showcase.html b/public/cases/mini-projects-showcase/index.html similarity index 94% rename from public/cases/mini-projects-showcase.html rename to public/cases/mini-projects-showcase/index.html index 1f9318f..99c97b8 100644 --- a/public/cases/mini-projects-showcase.html +++ b/public/cases/mini-projects-showcase/index.html @@ -1,1262 +1,1262 @@ - - - - - - - Активность — каталог карточек - - - - - - - - - - - - - - - - - - - - - -
-
- - -
-
- -
-
- - -
- - - -
-
- -
- - -
-
-
-
-

Design System · Активность

-

Карточки активности

-

Все типы карточек и живая сетка для подбора раскладки на главной

-

- Страница для верстки и контента: здесь те же классы и скрипты, что в секции на главной. Меняйте шрифт и тему в панели - справа, сужайте окно — сетка пересчитается. Подписи в заголовках карточек — подсказки, в проде их убрать. -

- - - -

Как пользоваться

-

- Сначала выберите тип (stack, horizontal, compact, decor), затем data-mp-cells (1–4) и - порядок li в списке. Карточки с data-mp-extra не влияют на высоту списка до кнопки «Показать все». - Подробности — в docs/mini-projects-cards.md. -

- -

Типы карточек

-

- Слева пример карточки с текстом, справа название типа и пояснение по классам. -

-
-
- -
-

- Stack со ссылкой. Превью на всю ширину, текст снизу. Для внешней ссылки: - mp-card--link и mp-card__ext в заголовке (как в блоке опыта). -

-
-
- -
-
-

mp-card--stack без ссылки

-
- -
-

Stack без ссылки

-
    -
  • заметка
  • -
-

- Связка баз и rollup для недельного обзора, только для личного пользования. -

-
-
-
-
-

- Stack без ссылки. Тот же вид. Обёртка div или article, без - mp-card--link. -

-
-
- -
- -
-

- Horizontal со ссылкой. Миниатюра слева, текст справа. На узком экране карточка - складывается в столбик. -

-
-
- -
-
-

mp-card--horizontal без ссылки

-
- -
-

Horizontal без ссылки

-
    -
  • шаблон
  • -
-

- Статический сайт с расписанием и формой заявки на отдельном сервисе. -

-
-
-
-
-

- Horizontal без ссылки. Тот же расклад, карточка не ведёт на внешний URL. -

-
-
- -
- -
-

- Compact со ссылкой. Только текст, без mp-card__media. В сетке часто с - data-mp-cells="1". -

-
-
- -
-
-

mp-card--compact без ссылки

-
-
-

Compact без ссылки

-
    -
  • документ
  • -
-

- Markdown-список проверок перед релизом мелких правок в интерфейсе. -

-
-
-
-
-

- Compact без ссылки. Короткая заметка или чеклист без внешней ссылки. -

-
-
- -
-
-

mp-card--decor

- -
-
-

- Декоративная ячейка. Заглушка в сетке, без проекта и ссылки. Внутри - span.mp-card__decor-pattern. -

-
-
-
- - -

Ширина в клетках

-

- Атрибут data-mp-cells на li.mini-projects-grid__item задаёт желаемую ширину от 1 до 4 клеток. - Скрипт не даст карточке быть шире текущего ряда. -

-

- Для адаптивной ширины используйте data-mp-cells-sm (при 4 клетках в ряду, ≥ 880 px) и - data-mp-cells-xs (при 2 клетках, ≥ 520 px). Скрипт выбирает значение по текущему числу клеток в ряду. -

-
- - - - - - - - - - - - - - - - - - - - - - - - - -
АтрибутКогда применяетсяПример
data-mp-cellsШирокий экран (6 клеток, ≥ 1180 px)data-mp-cells="3"
data-mp-cells-smСредний экран (4 клетки, ≥ 880 px)data-mp-cells-sm="2"
data-mp-cells-xsУзкий экран (2 клетки, ≥ 520 px)data-mp-cells-xs="1"
-
-

- Пример: data-mp-cells="3" data-mp-cells-sm="2" — карточка занимает 3 клетки на широком экране, 2 на среднем, 1 на узком. -

-
-
- -

≥ 1180 px — 6 клеток

-
-
3
-
3
-
2
-
2
-
2
-
1
-
2
-
3
-
4
-
2
-
-
-
- -

≥ 880 px — 4 клетки

-
-
3
-
1
-
2
-
2
-
1
-
2
-
2
-
4
-
-
-
- -

≥ 520 px — 2 клетки

-
-
1
-
1
-
2
-
2
-
1
-
1
-
-
-
- Цифра в блоке = значение data-mp-cells. Карточка занимает столько клеток подряд. При узком экране клеток меньше — карточки с шириной > число клеток переносятся на следующий ряд. С data-mp-cells-sm / data-mp-cells-xs карточка меняет ширину при сужении. -
-
- - - - - - - - - - - - - - - - - - - - - - - - - -
Ширина спискаКлеток в ряду
≥ 1180px6
≥ 880px4
≥ 520px2
уже1 (вся строка)
-

- На шести клетках пара 3 + 3 или тройка 2 + 2 + 2 обычно смотрится ровнее случайного набора. - Декор (mp-card--decor) заполняет пустоты в сетке. -

-
-
-
- -
-
-

Живая сетка masonry

-

- Демо блока «Активность» с главной: здесь все типы карточек в одной живой сетке. В подписях у каждой — тип - раскладки и data-mp-cells. Меняйте ширину окна и шрифт в панели темы, смотрите, как сетка - перестраивается, и переносите удачный порядок на главную. -

-
    -
  1. - - -
    -

    - [2] stack · ссылка - -

    -
      -
    • веб-сайт
    • -
    -

    Базовая пара в ряду из шести клеток.

    -
    -
    -
  2. -
  3. -
    - -
    -

    [2] stack

    -
      -
    • заметка
    • -
    -

    Stack без внешней ссылки.

    -
    -
    -
  4. -
  5. -
    - -
    -

    [2] horizontal

    -
      -
    • утилита
    • -
    -

    Horizontal на две клетки, без ссылки.

    -
    -
    -
  6. -
  7. -
    -
    -

    [2] compact

    -
      -
    • шаблон
    • -
    -

    Текстовая карточка на две клетки.

    -
    -
    -
  8. -
  9. - -
    -

    - [1] compact · ссылка - -

    -
      -
    • cli
    • -
    -

    Узкая колонка со ссылкой.

    -
    -
    -
  10. -
  11. -
    -
    -

    [1] compact

    -
      -
    • документ
    • -
    -

    Compact на одну клетку.

    -
    -
    -
  12. -
  13. - -
  14. -
  15. - - -
    -

    - [3] stack · ссылка - -

    -
      -
    • приложение
    • -
    -

    - Половина шестиклеточной строки. Длиннее описание, чтобы проверить перенос и высоту после смены шрифта. -

    -
    -
    -
  16. -
  17. - - -
    -

    - [3] horizontal · ссылка - -

    -
      -
    • плагин
    • -
    -

    Широкий horizontal: превью и текст в одной полосе.

    -
    -
    -
  18. -
  19. -
    - -
    -

    [3] horizontal

    -
      -
    • виджет
    • -
    -

    Horizontal на три клетки, без ссылки.

    -
    -
    -
  20. -
- -
-
- -
- -
-
- - - - - - - - - - - + + + + + + + Активность — каталог карточек + + + + + + + + + + + + + + + + + + + + + +
+
+ + +
+
+ +
+
+ + +
+ + + +
+
+ +
+ + +
+
+
+
+

Design System · Активность

+

Карточки активности

+

Все типы карточек и живая сетка для подбора раскладки на главной

+

+ Страница для верстки и контента: здесь те же классы и скрипты, что в секции на главной. Меняйте шрифт и тему в панели + справа, сужайте окно — сетка пересчитается. Подписи в заголовках карточек — подсказки, в проде их убрать. +

+ + + +

Как пользоваться

+

+ Сначала выберите тип (stack, horizontal, compact, decor), затем data-mp-cells (1–4) и + порядок li в списке. Карточки с data-mp-extra не влияют на высоту списка до кнопки «Показать все». + Подробности — в docs/mini-projects-cards.md. +

+ +

Типы карточек

+

+ Слева пример карточки с текстом, справа название типа и пояснение по классам. +

+
+
+ +
+

+ Stack со ссылкой. Превью на всю ширину, текст снизу. Для внешней ссылки: + mp-card--link и mp-card__ext в заголовке (как в блоке опыта). +

+
+
+ +
+
+

mp-card--stack без ссылки

+
+ +
+

Stack без ссылки

+
    +
  • заметка
  • +
+

+ Связка баз и rollup для недельного обзора, только для личного пользования. +

+
+
+
+
+

+ Stack без ссылки. Тот же вид. Обёртка div или article, без + mp-card--link. +

+
+
+ +
+ +
+

+ Horizontal со ссылкой. Миниатюра слева, текст справа. На узком экране карточка + складывается в столбик. +

+
+
+ +
+
+

mp-card--horizontal без ссылки

+
+ +
+

Horizontal без ссылки

+
    +
  • шаблон
  • +
+

+ Статический сайт с расписанием и формой заявки на отдельном сервисе. +

+
+
+
+
+

+ Horizontal без ссылки. Тот же расклад, карточка не ведёт на внешний URL. +

+
+
+ +
+ +
+

+ Compact со ссылкой. Только текст, без mp-card__media. В сетке часто с + data-mp-cells="1". +

+
+
+ +
+
+

mp-card--compact без ссылки

+
+
+

Compact без ссылки

+
    +
  • документ
  • +
+

+ Markdown-список проверок перед релизом мелких правок в интерфейсе. +

+
+
+
+
+

+ Compact без ссылки. Короткая заметка или чеклист без внешней ссылки. +

+
+
+ +
+
+

mp-card--decor

+ +
+
+

+ Декоративная ячейка. Заглушка в сетке, без проекта и ссылки. Внутри + span.mp-card__decor-pattern. +

+
+
+
+ + +

Ширина в клетках

+

+ Атрибут data-mp-cells на li.mini-projects-grid__item задаёт желаемую ширину от 1 до 4 клеток. + Скрипт не даст карточке быть шире текущего ряда. +

+

+ Для адаптивной ширины используйте data-mp-cells-sm (при 4 клетках в ряду, ≥ 880 px) и + data-mp-cells-xs (при 2 клетках, ≥ 520 px). Скрипт выбирает значение по текущему числу клеток в ряду. +

+
+ + + + + + + + + + + + + + + + + + + + + + + + + +
АтрибутКогда применяетсяПример
data-mp-cellsШирокий экран (6 клеток, ≥ 1180 px)data-mp-cells="3"
data-mp-cells-smСредний экран (4 клетки, ≥ 880 px)data-mp-cells-sm="2"
data-mp-cells-xsУзкий экран (2 клетки, ≥ 520 px)data-mp-cells-xs="1"
+
+

+ Пример: data-mp-cells="3" data-mp-cells-sm="2" — карточка занимает 3 клетки на широком экране, 2 на среднем, 1 на узком. +

+
+
+ +

≥ 1180 px — 6 клеток

+
+
3
+
3
+
2
+
2
+
2
+
1
+
2
+
3
+
4
+
2
+
+
+
+ +

≥ 880 px — 4 клетки

+
+
3
+
1
+
2
+
2
+
1
+
2
+
2
+
4
+
+
+
+ +

≥ 520 px — 2 клетки

+
+
1
+
1
+
2
+
2
+
1
+
1
+
+
+
+ Цифра в блоке = значение data-mp-cells. Карточка занимает столько клеток подряд. При узком экране клеток меньше — карточки с шириной > число клеток переносятся на следующий ряд. С data-mp-cells-sm / data-mp-cells-xs карточка меняет ширину при сужении. +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + +
Ширина спискаКлеток в ряду
≥ 1180px6
≥ 880px4
≥ 520px2
уже1 (вся строка)
+

+ На шести клетках пара 3 + 3 или тройка 2 + 2 + 2 обычно смотрится ровнее случайного набора. + Декор (mp-card--decor) заполняет пустоты в сетке. +

+
+
+
+ +
+
+

Живая сетка masonry

+

+ Демо блока «Активность» с главной: здесь все типы карточек в одной живой сетке. В подписях у каждой — тип + раскладки и data-mp-cells. Меняйте ширину окна и шрифт в панели темы, смотрите, как сетка + перестраивается, и переносите удачный порядок на главную. +

+
    +
  1. + + +
    +

    + [2] stack · ссылка + +

    +
      +
    • веб-сайт
    • +
    +

    Базовая пара в ряду из шести клеток.

    +
    +
    +
  2. +
  3. +
    + +
    +

    [2] stack

    +
      +
    • заметка
    • +
    +

    Stack без внешней ссылки.

    +
    +
    +
  4. +
  5. +
    + +
    +

    [2] horizontal

    +
      +
    • утилита
    • +
    +

    Horizontal на две клетки, без ссылки.

    +
    +
    +
  6. +
  7. +
    +
    +

    [2] compact

    +
      +
    • шаблон
    • +
    +

    Текстовая карточка на две клетки.

    +
    +
    +
  8. +
  9. + +
    +

    + [1] compact · ссылка + +

    +
      +
    • cli
    • +
    +

    Узкая колонка со ссылкой.

    +
    +
    +
  10. +
  11. +
    +
    +

    [1] compact

    +
      +
    • документ
    • +
    +

    Compact на одну клетку.

    +
    +
    +
  12. +
  13. + +
  14. +
  15. + + +
    +

    + [3] stack · ссылка + +

    +
      +
    • приложение
    • +
    +

    + Половина шестиклеточной строки. Длиннее описание, чтобы проверить перенос и высоту после смены шрифта. +

    +
    +
    +
  16. +
  17. + + +
    +

    + [3] horizontal · ссылка + +

    +
      +
    • плагин
    • +
    +

    Широкий horizontal: превью и текст в одной полосе.

    +
    +
    +
  18. +
  19. +
    + +
    +

    [3] horizontal

    +
      +
    • виджет
    • +
    +

    Horizontal на три клетки, без ссылки.

    +
    +
    +
  20. +
+ +
+
+ +
+ +
+
+ + + + + + + + + + + diff --git a/public/cases/mobile-clinic-app.html b/public/cases/mobile-clinic-app/index.html similarity index 85% rename from public/cases/mobile-clinic-app.html rename to public/cases/mobile-clinic-app/index.html index c2fff17..9ea5e1d 100644 --- a/public/cases/mobile-clinic-app.html +++ b/public/cases/mobile-clinic-app/index.html @@ -1,309 +1,309 @@ - - - - - - - Мобильное приложение для сети клиник — кейс - - - - - - - - - - - - - - - - - - - - -
-
- - -
-
- -
-
- - -
- - - -
-
- -
- - -
-
-

UX/UI · Mobile App

-

Мобильное приложение для сети клиник

-

- Запись к врачам и работа с медицинскими услугами: простой путь пользователя, понятная навигация и быстрый доступ к действиям. -

-

- Фокус проекта — снять тревожность и лишние шаги у пациента: ясные статусы записи, предсказуемые формы и опора на привычные паттерны мобильных приложений. -

-

- Полный разбор кейса будет опубликован здесь; пока страница служит точкой входа из блока портфолио на главной. -

-

Обложка

-
- Мобильное приложение для сети клиник — обложка кейса -
Текущее превью для карточки портфолио
-
-
-
- + + + + + + + Мобильное приложение для сети клиник — кейс + + + + + + + + + + + + + + + + + + + + +
+
+ + +
+
+ +
+
+ + +
+ + + +
+
+ +
+ + +
+
+

UX/UI · Mobile App

+

Мобильное приложение для сети клиник

+

+ Запись к врачам и работа с медицинскими услугами: простой путь пользователя, понятная навигация и быстрый доступ к действиям. +

+

+ Фокус проекта — снять тревожность и лишние шаги у пациента: ясные статусы записи, предсказуемые формы и опора на привычные паттерны мобильных приложений. +

+

+ Полный разбор кейса будет опубликован здесь; пока страница служит точкой входа из блока портфолио на главной. +

+

Обложка

+
+ Мобильное приложение для сети клиник — обложка кейса +
Текущее превью для карточки портфолио
+
+
+
+

Смотрите также

  1. - +
  2. - +
  3. - +
- - -
-
-

Контакты

- -
-
- - - - - - - - - - - - - + + +
+
+

Контакты

+ +
+
+ + + + + + + + + + + + + diff --git a/public/cases/obsidian-plugin-columns-view.html b/public/cases/obsidian-plugin-columns-view/index.html similarity index 84% rename from public/cases/obsidian-plugin-columns-view.html rename to public/cases/obsidian-plugin-columns-view/index.html index 75e5fc4..5ad142d 100644 --- a/public/cases/obsidian-plugin-columns-view.html +++ b/public/cases/obsidian-plugin-columns-view/index.html @@ -1,343 +1,343 @@ - - - - - - - Колоночный вид для Obsidian — кейс - - - - - - - - - - - - - - - - - - - - - - -
-
- - -
-
- -
-
- - -
- - - -
-
- -
- - -
-
-

Obsidian · Plugin

-

Колоночный вид — плагин для Obsidian

-

Дизайн и разработка интерфейса для многоколоночной работы с заметками

- -

- -

- -

Контекст

-

- -

- -

Задача

-

- -

- -

Решение

-

- -

- -

Фильтр использования

-
-
- -
-
Фильтрация заметок в колоночном виде.
-
- -

Конфигурация отображения

-
-
- -
-
Настройка колонок и отображения.
-
- -

Результат

-

- -

-
-
- + + + + + + + Колоночный вид для Obsidian — кейс + + + + + + + + + + + + + + + + + + + + + + +
+
+ + +
+
+ +
+
+ + +
+ + + +
+
+ +
+ + +
+
+

Obsidian · Plugin

+

Колоночный вид — плагин для Obsidian

+

Дизайн и разработка интерфейса для многоколоночной работы с заметками

+ +

+ +

+ +

Контекст

+

+ +

+ +

Задача

+

+ +

+ +

Решение

+

+ +

+ +

Фильтр использования

+
+
+ +
+
Фильтрация заметок в колоночном виде.
+
+ +

Конфигурация отображения

+
+
+ +
+
Настройка колонок и отображения.
+
+ +

Результат

+

+ +

+
+
+

Смотрите также

  1. - +
  2. - +
  3. - +
- - -
-
-

Контакты

- -
-
- - - - - - - - - - - - + + +
+
+

Контакты

+ +
+
+ + + + + + + + + + + + diff --git a/public/cases/orc-automation-panel.html b/public/cases/orc-automation-panel/index.html similarity index 89% rename from public/cases/orc-automation-panel.html rename to public/cases/orc-automation-panel/index.html index fdb1fa1..98f7138 100644 --- a/public/cases/orc-automation-panel.html +++ b/public/cases/orc-automation-panel/index.html @@ -1,448 +1,448 @@ - - - - - - - Веб-панель для оркестрации автоматизаций — кейс - - - - - - - - - - - - - - - - - - - - -
-
- - -
-
- -
-
- - -
- - - -
-
- -
- - -
-
-

Primo RPA · UX/UI · Web App

-

Веб-панель для оркестрации автоматизаций

-

- Оркестратор Primo RPA: запуск роботов, проекты и контроль процессов в веб-кабинете для админов и разработчиков автоматизаций. -

- -
-

Контекст

-

- В стеке Primo RPA оркестратор отвечает за расписание, очередь и статусы RPA-роботов на инфраструктуре клиента. С ним работают не только из студии разработки, но и из браузера: смотрят проекты, перезапускают задания, разбирают сбои. -

-

- К тому моменту продукт уже был в эксплуатации, но интерфейс заметно устарел: пользователи сталкивались с неудобствами в навигации, визуальным шумом в таблицах и неочевидными сценариями в некоторых разделах. Задача стояла освежить вид интерфейса, сделать его современным и исправить накопившиеся UX-проблемы. -

-
- -
-

Роль и подход

-

- Моя роль в этом проекте была скорее кураторской — я не делал дизайн самостоятельно, а выстраивал процесс так, чтобы команда дизайна и разработки работала слаженно. -

- -

- Параллельно я искал дизайнера, который взял бы на себя основную визуальную работу. Отбор прошла Елизавета — среди более чем 150 заявок она лучше всего подходила под предстоящий фронт работ. -

-

- В течение трёх месяцев я погружал новую сотрудницу в детали проекта: ставил задачи, давал обратную связь по создаваемым макетам, делился контекстом по пользовательским сценариям. Вместе с командой разработки мы планировали порядок обновления дизайна сервиса — меняли экраны по приоритету, вкладывая изменения в текущие релизы, без «остановить всё и перерисовать». -

-
- -
-

Технический стек и инструменты

-

- В качестве фреймворка для интерфейса был выбран Ant Design последней версии. Он уже использовался в проекте, и его свежий релиз предлагал Theme Editor — возможность настраивать внешний вид компонентов через дизайн-токены без переопределения стилей вручную. Это давало и дизайнерам, и разработчикам единый язык описания интерфейса. -

-

- Единым источником правды и мостом между дизайном и разработкой стал Storybook. В нём компоненты были не просто задокументированы, а реально работали в изолированной среде — это позволяло дизайнерам видеть реализацию элементов вживую, а разработчикам — быстрее интегрировать компоненты в панель. -

-
- -
-

Дизайн-система и синхронизация

-

- Для удобства работы мы синхронизировали токены из Ant Design с токенами в Figma — цвета, отступы, типографика и радиусы скругления были приведены к единым значениям. Работало это так: если в Figma токены обновлялись, их можно было выгрузить в JSON и без проблем сразу загрузить в код — вместо того, чтобы разработчик вручную искал изменения и правил каждый токен индивидуально. Такой подход также позволил смотреть на дизайн более системно. -

- -

- Компоненты в Figma создавались с нуля — по референсам Ant Design, но без использования готовых библиотек. Отказ от готовых решений был осознанным: нам нужна была полная настройка под наш стиль работы и возможность использовать новые функции Figma, которые не поддерживались в библиотеках из сообщества Figma. -

-

- Для Storybook мы отобрали и настроили плагины, которые были уместны для наших задач — контроль доступности, просмотр состояний компонентов, переключение тем и локалей. Это сделало Storybook не просто витриной компонентов, а полноценным инструментом дизайн-ревью. -

-
- -
-

Рабочая среда дизайнера

-

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

-

- Обсуждался также шаг ускорить поддержку Storybook тем, чтобы дизайнер сам мог описывать JSX для реализованного компонента — это сокращало путь от макета до документированного компонента в сторибуке. -

-

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

-

- Увидеть обновлённую иконку сразу в браузере позволяло лучше её оптимизировать и убрать косяки отображения при использовании булевых операций. -

-

- Для Figma также был разработан подход и правила, которые не только ограничивали дизайнера, но и позволяли гарантированно делать консистентные и рабочие иконки. -

-
- -
-

UX-улучшения

-

- За время обновления интерфейса Елизавета предложила ещё и ряд улучшений пользовательского опыта. Часть из них была успешно внедрена — например, более понятная группировка элементов в сложных формах и переработанные состояния загрузки. Но в приоритете было не ломать старый UX, к которому привыкли пользователи, поэтому многие идеи сохранились в бэклог для следующей итерации. -

-
- -
-

Список проектов

-

- Таблица проектов — один из самых частых экранов. На старой версии много колонок, плотная сетка и мелкий текст: статус и имя проекта читаются с трудом, особенно на ноутбуке. -

-

В новой версии:

-
    -
  • колонки свели к тому, что нужно для ежедневной работы;
  • -
  • статусы и действия вынесли в предсказуемые зоны строки;
  • -
  • отступы и типографику подтянули под остальную панель на Ant Design.
  • -
- -

Было

-
- Список проектов в оркестраторе — предыдущая версия таблицы -
- -

Стало

-
- Список проектов в оркестраторе — обновлённая таблица -
-
- -
-

Результаты и рефлексия

-

- Экран проектов стал проще сканировать: меньше визуального шума, быстрее находить нужный проект и его состояние. После раскатывания нового дизайна среди нескольких клиентов мы получили положительные отзывы и множество идей для дальнейших улучшений. -

-

- Я оставил проект, когда Елизавета уже уверенно чувствовала себя в нём и могла самостоятельно вести дизайнерские задачи. Периодически я отвечал на точечные вопросы, но в целом передача прошла гладко. -

-

- Спустя год с небольшим процессы в команде заметно изменились. По словам ребят, в создании и передаче дизайна теперь активное участие принимают инструменты с нейросетями — такие как Claude Design. То, что мы начинали выстраивать вручную через токены, Storybook и синхронизацию сред, сейчас в какой-то мере автоматизируется. -

-

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

-
-
-
- + + + + + + + Веб-панель для оркестрации автоматизаций — кейс + + + + + + + + + + + + + + + + + + + + +
+
+ + +
+
+ +
+
+ + +
+ + + +
+
+ +
+ + +
+
+

Primo RPA · UX/UI · Web App

+

Веб-панель для оркестрации автоматизаций

+

+ Оркестратор Primo RPA: запуск роботов, проекты и контроль процессов в веб-кабинете для админов и разработчиков автоматизаций. +

+ +
+

Контекст

+

+ В стеке Primo RPA оркестратор отвечает за расписание, очередь и статусы RPA-роботов на инфраструктуре клиента. С ним работают не только из студии разработки, но и из браузера: смотрят проекты, перезапускают задания, разбирают сбои. +

+

+ К тому моменту продукт уже был в эксплуатации, но интерфейс заметно устарел: пользователи сталкивались с неудобствами в навигации, визуальным шумом в таблицах и неочевидными сценариями в некоторых разделах. Задача стояла освежить вид интерфейса, сделать его современным и исправить накопившиеся UX-проблемы. +

+
+ +
+

Роль и подход

+

+ Моя роль в этом проекте была скорее кураторской — я не делал дизайн самостоятельно, а выстраивал процесс так, чтобы команда дизайна и разработки работала слаженно. +

+ +

+ Параллельно я искал дизайнера, который взял бы на себя основную визуальную работу. Отбор прошла Елизавета — среди более чем 150 заявок она лучше всего подходила под предстоящий фронт работ. +

+

+ В течение трёх месяцев я погружал новую сотрудницу в детали проекта: ставил задачи, давал обратную связь по создаваемым макетам, делился контекстом по пользовательским сценариям. Вместе с командой разработки мы планировали порядок обновления дизайна сервиса — меняли экраны по приоритету, вкладывая изменения в текущие релизы, без «остановить всё и перерисовать». +

+
+ +
+

Технический стек и инструменты

+

+ В качестве фреймворка для интерфейса был выбран Ant Design последней версии. Он уже использовался в проекте, и его свежий релиз предлагал Theme Editor — возможность настраивать внешний вид компонентов через дизайн-токены без переопределения стилей вручную. Это давало и дизайнерам, и разработчикам единый язык описания интерфейса. +

+

+ Единым источником правды и мостом между дизайном и разработкой стал Storybook. В нём компоненты были не просто задокументированы, а реально работали в изолированной среде — это позволяло дизайнерам видеть реализацию элементов вживую, а разработчикам — быстрее интегрировать компоненты в панель. +

+
+ +
+

Дизайн-система и синхронизация

+

+ Для удобства работы мы синхронизировали токены из Ant Design с токенами в Figma — цвета, отступы, типографика и радиусы скругления были приведены к единым значениям. Работало это так: если в Figma токены обновлялись, их можно было выгрузить в JSON и без проблем сразу загрузить в код — вместо того, чтобы разработчик вручную искал изменения и правил каждый токен индивидуально. Такой подход также позволил смотреть на дизайн более системно. +

+ +

+ Компоненты в Figma создавались с нуля — по референсам Ant Design, но без использования готовых библиотек. Отказ от готовых решений был осознанным: нам нужна была полная настройка под наш стиль работы и возможность использовать новые функции Figma, которые не поддерживались в библиотеках из сообщества Figma. +

+

+ Для Storybook мы отобрали и настроили плагины, которые были уместны для наших задач — контроль доступности, просмотр состояний компонентов, переключение тем и локалей. Это сделало Storybook не просто витриной компонентов, а полноценным инструментом дизайн-ревью. +

+
+ +
+

Рабочая среда дизайнера

+

+ Мы настроили среду так, чтобы дизайнер мог видеть реализацию компонентов вживую у себя на компьютере, используя локальный Storybook и Git. Это позволяло точнее контролировать, как задуманный дизайн воплощается в коде, и оперативно замечать расхождения на ранних этапах. +

+

+ Обсуждался также шаг ускорить поддержку Storybook тем, чтобы дизайнер сам мог описывать JSX для реализованного компонента — это сокращало путь от макета до документированного компонента в сторибуке. +

+

+ Мы отладили рабочий процесс по передаче иконок в библиотеку. Особенность заключалась в том, чтобы иконки можно было отобразить в Storybook с фильтрацией и сортировкой. При этом дизайнер мог обновлять иконки без привлечения разработчика — просто пушил новые файлы в репозиторий. +

+

+ Увидеть обновлённую иконку сразу в браузере позволяло лучше её оптимизировать и убрать косяки отображения при использовании булевых операций. +

+

+ Для Figma также был разработан подход и правила, которые не только ограничивали дизайнера, но и позволяли гарантированно делать консистентные и рабочие иконки. +

+
+ +
+

UX-улучшения

+

+ За время обновления интерфейса Елизавета предложила ещё и ряд улучшений пользовательского опыта. Часть из них была успешно внедрена — например, более понятная группировка элементов в сложных формах и переработанные состояния загрузки. Но в приоритете было не ломать старый UX, к которому привыкли пользователи, поэтому многие идеи сохранились в бэклог для следующей итерации. +

+
+ +
+

Список проектов

+

+ Таблица проектов — один из самых частых экранов. На старой версии много колонок, плотная сетка и мелкий текст: статус и имя проекта читаются с трудом, особенно на ноутбуке. +

+

В новой версии:

+
    +
  • колонки свели к тому, что нужно для ежедневной работы;
  • +
  • статусы и действия вынесли в предсказуемые зоны строки;
  • +
  • отступы и типографику подтянули под остальную панель на Ant Design.
  • +
+ +

Было

+
+ Список проектов в оркестраторе — предыдущая версия таблицы +
+ +

Стало

+
+ Список проектов в оркестраторе — обновлённая таблица +
+
+ +
+

Результаты и рефлексия

+

+ Экран проектов стал проще сканировать: меньше визуального шума, быстрее находить нужный проект и его состояние. После раскатывания нового дизайна среди нескольких клиентов мы получили положительные отзывы и множество идей для дальнейших улучшений. +

+

+ Я оставил проект, когда Елизавета уже уверенно чувствовала себя в нём и могла самостоятельно вести дизайнерские задачи. Периодически я отвечал на точечные вопросы, но в целом передача прошла гладко. +

+

+ Спустя год с небольшим процессы в команде заметно изменились. По словам ребят, в создании и передаче дизайна теперь активное участие принимают инструменты с нейросетями — такие как Claude Design. То, что мы начинали выстраивать вручную через токены, Storybook и синхронизацию сред, сейчас в какой-то мере автоматизируется. +

+

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

+
+
+
+

Смотрите также

  1. - +
  2. - +
  3. - +
- - -
-
-

Контакты

- -
-
- - - - - - - - - - - - + + +
+
+

Контакты

+ +
+
+ + + + + + + + + + + + diff --git a/public/cases/site-with-ai-ide.html b/public/cases/site-with-ai-ide/index.html similarity index 88% rename from public/cases/site-with-ai-ide.html rename to public/cases/site-with-ai-ide/index.html index afa10ac..4b23d72 100644 --- a/public/cases/site-with-ai-ide.html +++ b/public/cases/site-with-ai-ide/index.html @@ -11,9 +11,9 @@ - - - - - - - - - - - + + + + + + + + + + + - + - - - - -
-
- - -
-
- -
-
- - -
- - - -
-
- -
- - -
-
-

UX/UI · Analytics

-

Концепт сервиса распределения задач

-

- Продуктовый концепт: постановка, распределение и отслеживание задач с акцентом на прозрачность процессов и удобство командной работы. -

-

- Задача концепта — показать, как команда видит поток работ без «чёрных ящиков»: кто что взял, где узкие места и какие статусы критичны для следующего шага. -

-

- Детальный кейс появится здесь позже; страница уже связана с карточкой в портфолио на сайте. -

-

Обложка

-
- Концепт сервиса распределения задач — обложка кейса -
Текущее превью для карточки портфолио
-
-
-
- + + + + + + + Концепт сервиса распределения задач — кейс + + + + + + + + + + + + + + + + + + + + +
+
+ + +
+
+ +
+
+ + +
+ + + +
+
+ +
+ + +
+
+

UX/UI · Analytics

+

Концепт сервиса распределения задач

+

+ Продуктовый концепт: постановка, распределение и отслеживание задач с акцентом на прозрачность процессов и удобство командной работы. +

+

+ Задача концепта — показать, как команда видит поток работ без «чёрных ящиков»: кто что взял, где узкие места и какие статусы критичны для следующего шага. +

+

+ Детальный кейс появится здесь позже; страница уже связана с карточкой в портфолио на сайте. +

+

Обложка

+
+ Концепт сервиса распределения задач — обложка кейса +
Текущее превью для карточки портфолио
+
+
+
+

Смотрите также

  1. - +
  2. - +
  3. - +
- - -
-
-

Контакты

- -
-
- - - - - - - - - - - - - + + +
+
+

Контакты

+ +
+
+ + + + + + + + + + + + + diff --git a/public/cases/task-tracker.html b/public/cases/task-tracker/index.html similarity index 86% rename from public/cases/task-tracker.html rename to public/cases/task-tracker/index.html index 2fa18b3..28f1443 100644 --- a/public/cases/task-tracker.html +++ b/public/cases/task-tracker/index.html @@ -1,737 +1,737 @@ - - - - - - - Таск-трекер для бек-офис системы — кейс - - - - - - - - - - - - - - - - - - - - - - -
-
- - -
-
- -
-
- - -
- - - -
-
- -
- - -
-
-

Тестовое задание · back-office

-

Таск-трекер для внутренней бек-офис системы

-

Задание

-

- Реализовать интерфейс для планирования и распределения задач между сотрудниками операционного отдела, работающими в некой бек-офис системе. Существует большое количество разноплановых задач, которые можно сгруппировать: Тип-1, Тип-2, Тип-3, Тип-4, Тип-5, Тип-6, Тип-7. У каждой задачи есть свой, выставляемый автоматически, приоритет. Пользователю доступны только задачи из определенных категорий. -

-

Нужно реализовать:

- - -

Введение

-

- Так как у меня лично есть обширный опыт работы с таск-трекерами, то я опираюсь на свой опыт и опыт моих коллег с учётом требований задания. -

- -

Референсы

-
- Референсы -
- - -

Решение

- -

Скринкаст

-
-
- -
-
- - - -

Вкладки (Tabs)

-

На вкладке All tasks сотрудник может ознакомиться со всеми доступными задачами.

-
- Untitled -
-

- На вкладке My tasks отображаются только те задачи, что закреплены за текущим сотрудником. Группировка идёт по статусам задач (статус в карточке задачи скрыт). -

-
- Untitled -
-

На вкладке Task by assign отображены все задачи c разбивкой по исполнителю.

-
- Untitled -
-

В правой части имеются опции для текущей вкладки.

-
- Untitled -
-

- Все изменения сохраняются после ухода с вкладки и после закрытия всей страницы Tasks. Эти настройки индивидуальны и каждый сотрудник может настроить страницу как ему удобно. -

- -

- На странице работает постепенная подгрузка задач. По мере скрола вниз, будут подгружаться новые задачи. Кол-во задач указывается в заголовках, это может быть полезно, чтобы оценить как далеко надо скролить, чтобы все посмотреть. Задач может быть очень много и тогда возможно имеет смысл добавить ещё и переход по страницам. -

- -

Варианты отображения (Views)

-

- Разные виды отображения одних и тех же задач могут быть полезны для разных контекстов использования страницы Tasks и также в угоду личным предпочтениям сотрудника, что повышает его эффективность. Сотрудник, которого не раздражает интерфейс работает продуктивнее и приносит больше пользы. -

-
- Untitled -
- -

- Вид Board позволяет удобнее работать с функцией Drag&Drop (см. ниже). Также визуально легче определить кол-во задач в категории, подразумеваю что это может быть полезно. В случае использования группировки задач по статусам выполнения, перемещение карточек слева направо создаёт естественное горизонтальное течение задач из точки А в точку Б. -

-
- Untitled -
-

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

-
- Untitled -
-

- Вид Table позволяет сразу же работать со всеми полями задачи, без раскрытия её в модальном окне или отдельной странице. Таблица подразумевает пользовательскую настройку ширины и порядка столбцов, что может быть удобно в некоторых кейсах использования. -

-
- Untitled -
- -
-
- -
-
- - -

Drag&Drop

-

- Во всех видах можно перетаскивать элементы (карточки/элементы списка/строки и столбцы таблицы). Это способствует более продуктивной работе и выглядит естественным для пользователя. Например, если требуется раскидать задачи между сотрудниками (для админа или менеджера), поменять статус для нескольких задач разом или в короткий отрезок времени. -

-

Board view

-
-
- -
-
- -

List view

-
-
- -
-
- -

Продвинутый интерактивный прототип в ProtoPie

-

- Схематичное представление того как работает Drag&Drop. Такой прототип помогает дизайнеру лучше понять какие нюансы нужно учесть в юзерфлоу, а также и при подготовке спецификации для разработчика. Также попробовав данный прототип можно прийти к тому, что функционал должен работать совсем иначе и переделать его сразу. Это экономит общее время разработки. -

-
-
- -
-
- -

- В прототипе можно перемещать только голубую карточку и не все положения работают корректно. Можно посмотреть запись, которая доступна на той же странице прототипа. -

- -

Стиль

-

- Визуальный стиль может быть любым, не меняя самого каркаса. Например, чуть более красочным и с более выразительными шрифтами. -

-

Светлая цветная тема

-
- Светлая цветная тема -
- -

Нейтральная тёмная тема

-
- Нейтральная тёмная тема -
- - -

Исследования

-

- На этапе прототипов Figma можно провести интервью с несколькими сотрудниками, например 5 человек. Предварительно в прототип нужно добавить реальные задачи из текущей системы, порядка 20 должно хватить. Далее можно созвониться по видеосвязи с шэрингом экрана респондента или встретиться лично и задать несколько заданий и вопросов. Во время сессии респондент может тыкать в прототип, но если что-то не сработает интервьюер может зафиксировать попытку и объяснить, что этот функционал пока не работает, а также поинтересоваться что респондент ожидает увидеть дальше. -

-

Задания

-
    -
  1. Найти свои актуальные задачи со страницы Tasks вкладки All tasks
  2. -
  3. Назначить себе задачи, чтобы взять в работу
  4. -
  5. Найти задачу про что-то конкретное (интервьюер приводит пример), которую он уже выполнил ранее
  6. -
  7. Показать задачи, которые относятся только к определённой категории и должны быть сделаны до конца недели
  8. -
  9. Попросить поменять приоритет у нескольких задач одновременно
  10. -
  11. Оценить визуальную привлекательность интерфейса по шкале от 1 до 10
  12. -
  13. Оценить общее впечатление от предложенного концепта по шкале от 1 до 10
  14. -
  15. Предложить ещё функции, которые были бы полезны
  16. -
-

Аналитика

-

Для оценки актуальности реализованного функционала необходимо собирать следующие показатели.

- -

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

- -

Дополнительные детали

-

- При создании мокапов в Figma были использованы: возможности автолэаутов; интерактивные компоненты, плагины (Iconify, Fitter, Protofly, Shadow Maker, Dark Side и др.), файл Community (+40 Types of Cursor). Слои названы и организованы для более удобной работы где-то на 60%. Используется сетка 8pt + есть размеры 2pt, 4pt. Имеются цветовые стили для светлой и тёмной темы. Присутствует адаптивность под изменяющиеся размеры окна (мобильной версии нет). -

- -
-
- + + + + + + + Таск-трекер для бек-офис системы — кейс + + + + + + + + + + + + + + + + + + + + + + +
+
+ + +
+
+ +
+
+ + +
+ + + +
+
+ +
+ + +
+
+

Тестовое задание · back-office

+

Таск-трекер для внутренней бек-офис системы

+

Задание

+

+ Реализовать интерфейс для планирования и распределения задач между сотрудниками операционного отдела, работающими в некой бек-офис системе. Существует большое количество разноплановых задач, которые можно сгруппировать: Тип-1, Тип-2, Тип-3, Тип-4, Тип-5, Тип-6, Тип-7. У каждой задачи есть свой, выставляемый автоматически, приоритет. Пользователю доступны только задачи из определенных категорий. +

+

Нужно реализовать:

+ + +

Введение

+

+ Так как у меня лично есть обширный опыт работы с таск-трекерами, то я опираюсь на свой опыт и опыт моих коллег с учётом требований задания. +

+ +

Референсы

+
+ Референсы +
+ + +

Решение

+ +

Скринкаст

+
+
+ +
+
+ + + +

Вкладки (Tabs)

+

На вкладке All tasks сотрудник может ознакомиться со всеми доступными задачами.

+
+ Untitled +
+

+ На вкладке My tasks отображаются только те задачи, что закреплены за текущим сотрудником. Группировка идёт по статусам задач (статус в карточке задачи скрыт). +

+
+ Untitled +
+

На вкладке Task by assign отображены все задачи c разбивкой по исполнителю.

+
+ Untitled +
+

В правой части имеются опции для текущей вкладки.

+
+ Untitled +
+

+ Все изменения сохраняются после ухода с вкладки и после закрытия всей страницы Tasks. Эти настройки индивидуальны и каждый сотрудник может настроить страницу как ему удобно. +

+ +

+ На странице работает постепенная подгрузка задач. По мере скрола вниз, будут подгружаться новые задачи. Кол-во задач указывается в заголовках, это может быть полезно, чтобы оценить как далеко надо скролить, чтобы все посмотреть. Задач может быть очень много и тогда возможно имеет смысл добавить ещё и переход по страницам. +

+ +

Варианты отображения (Views)

+

+ Разные виды отображения одних и тех же задач могут быть полезны для разных контекстов использования страницы Tasks и также в угоду личным предпочтениям сотрудника, что повышает его эффективность. Сотрудник, которого не раздражает интерфейс работает продуктивнее и приносит больше пользы. +

+
+ Untitled +
+ +

+ Вид Board позволяет удобнее работать с функцией Drag&Drop (см. ниже). Также визуально легче определить кол-во задач в категории, подразумеваю что это может быть полезно. В случае использования группировки задач по статусам выполнения, перемещение карточек слева направо создаёт естественное горизонтальное течение задач из точки А в точку Б. +

+
+ Untitled +
+

+ Вид List позволяет увидеть больше информации на меньшей площади экрана. При этом этот вид визуально и функционально легче табличного вида, а значит меньше когнитивной нагрузки на пользователя. Также здесь все заголовки задач начинаются в крайнем левом положении, поэтому становится легко пробежаться глазами по списку. +

+
+ Untitled +
+

+ Вид Table позволяет сразу же работать со всеми полями задачи, без раскрытия её в модальном окне или отдельной странице. Таблица подразумевает пользовательскую настройку ширины и порядка столбцов, что может быть удобно в некоторых кейсах использования. +

+
+ Untitled +
+ +
+
+ +
+
+ + +

Drag&Drop

+

+ Во всех видах можно перетаскивать элементы (карточки/элементы списка/строки и столбцы таблицы). Это способствует более продуктивной работе и выглядит естественным для пользователя. Например, если требуется раскидать задачи между сотрудниками (для админа или менеджера), поменять статус для нескольких задач разом или в короткий отрезок времени. +

+

Board view

+
+
+ +
+
+ +

List view

+
+
+ +
+
+ +

Продвинутый интерактивный прототип в ProtoPie

+

+ Схематичное представление того как работает Drag&Drop. Такой прототип помогает дизайнеру лучше понять какие нюансы нужно учесть в юзерфлоу, а также и при подготовке спецификации для разработчика. Также попробовав данный прототип можно прийти к тому, что функционал должен работать совсем иначе и переделать его сразу. Это экономит общее время разработки. +

+
+
+ +
+
+ +

+ В прототипе можно перемещать только голубую карточку и не все положения работают корректно. Можно посмотреть запись, которая доступна на той же странице прототипа. +

+ +

Стиль

+

+ Визуальный стиль может быть любым, не меняя самого каркаса. Например, чуть более красочным и с более выразительными шрифтами. +

+

Светлая цветная тема

+
+ Светлая цветная тема +
+ +

Нейтральная тёмная тема

+
+ Нейтральная тёмная тема +
+ + +

Исследования

+

+ На этапе прототипов Figma можно провести интервью с несколькими сотрудниками, например 5 человек. Предварительно в прототип нужно добавить реальные задачи из текущей системы, порядка 20 должно хватить. Далее можно созвониться по видеосвязи с шэрингом экрана респондента или встретиться лично и задать несколько заданий и вопросов. Во время сессии респондент может тыкать в прототип, но если что-то не сработает интервьюер может зафиксировать попытку и объяснить, что этот функционал пока не работает, а также поинтересоваться что респондент ожидает увидеть дальше. +

+

Задания

+
    +
  1. Найти свои актуальные задачи со страницы Tasks вкладки All tasks
  2. +
  3. Назначить себе задачи, чтобы взять в работу
  4. +
  5. Найти задачу про что-то конкретное (интервьюер приводит пример), которую он уже выполнил ранее
  6. +
  7. Показать задачи, которые относятся только к определённой категории и должны быть сделаны до конца недели
  8. +
  9. Попросить поменять приоритет у нескольких задач одновременно
  10. +
  11. Оценить визуальную привлекательность интерфейса по шкале от 1 до 10
  12. +
  13. Оценить общее впечатление от предложенного концепта по шкале от 1 до 10
  14. +
  15. Предложить ещё функции, которые были бы полезны
  16. +
+

Аналитика

+

Для оценки актуальности реализованного функционала необходимо собирать следующие показатели.

+ +

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

+ +

Дополнительные детали

+

+ При создании мокапов в Figma были использованы: возможности автолэаутов; интерактивные компоненты, плагины (Iconify, Fitter, Protofly, Shadow Maker, Dark Side и др.), файл Community (+40 Types of Cursor). Слои названы и организованы для более удобной работы где-то на 60%. Используется сетка 8pt + есть размеры 2pt, 4pt. Имеются цветовые стили для светлой и тёмной темы. Присутствует адаптивность под изменяющиеся размеры окна (мобильной версии нет). +

+ +
+
+

Смотрите также

  1. - +
  2. - +
  3. - +
- - -
-
-

Контакты

- -
-
- - - - - - - - - - - - - - - - + + +
+
+

Контакты

+ +
+
+ + + + + + + + + + + + + + + + diff --git a/public/cases/template-elements-demo.html b/public/cases/template-elements-demo/index.html similarity index 84% rename from public/cases/template-elements-demo.html rename to public/cases/template-elements-demo/index.html index 1063e52..8e073ab 100644 --- a/public/cases/template-elements-demo.html +++ b/public/cases/template-elements-demo/index.html @@ -1,914 +1,914 @@ - - - - - - - Демо элементов кейса — template - - - - - - - - - - - - - - - - - - - - - - - -
-
- - -
-
- -
-
- - -
- - - -
-
- -
- - -
-
-

Демо · template

-

Пример кейса: демо элементов

-

Рыба-текст и блоки для быстрой сборки лонгрида

-

Медиа для демо лежат в public/assets/ (сборка страниц их не копирует). См. public/assets/README.md.

- -

Контекст

-

- Этот раздел показывает пример рыбы для вступления. Здесь можно коротко описать продукт, аудиторию и ограничения проекта. - Текст нейтральный: цель — быстро набросать структуру и проверить визуальный ритм страницы. -

- -

Задача

-

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

- -

Решение

-

Ниже собраны готовые примеры, которые можно копировать в реальные кейсы.

- -

Карточки ссылок

- - -

Картинка: 50% от оригинала (без превью)

-
- Демо GIF в натуральном размере -
Изображение в уменьшенном натуральном размере, по центру.
-
- -

Картинка: по ширине контента (с превью)

-
- Демо изображения по ширине контента -
Изображение по ширине контента. Клик открывает viewer.
-
- -

Картинка: чуть шире контента (с превью)

-
- Демо изображения шире контента -
Изображение немного выходит за пределы контентной колонки.
-
- -

Длинный скрин: свёрнутая высота и кнопка внутри превью

-

- Блок data-case-tall-media: ширина задаётся атрибутом data-case-tall-width="wide" (как «широкая» картинка) или content (по колонке). В свёрнутом виде видна верхняя часть кадра, внизу превью — плотный «туман». Кнопка «Развернуть» / «Свернуть» с иконкой-шевроном поверх нижней части кадра, внутри рамки; после раскрытия туман скрывается, после сворачивания страница прокручивается к превью. Высоту превью — на .case-media-tall__clip через --case-tall-max (по умолчанию min(70vh, 32rem)). -

-
-
-
- Демо: длинный вертикальный скрин интерфейса - -
-
- -
-
-
Длинное изображение img-long.webp (исходник PNG рядом в public/assets/template-elements-demo/).
-
- -

Галерея: сетка по ширине контента

-

- Колонок на широком экране задаётся на figure: атрибут style="--case-gallery-cols: 3". Ниже порогов сетка схлопывается до двух и одной колонки. Клик по миниатюре открывает общий viewer кейса. -

- - -

Галерея: сетка на ширину страницы с боковыми отступами

-

- Класс case-media-gallery--wide — та же логика выхода за колонку, что у одиночного case-media--wide. Здесь две колонки на широком экране (--case-gallery-cols: 2). -

- - -

Callout: важный абзац с эмоджи

- - -

Видео: карточка с тенью и фиксированными малыми углами

-
-
- -
-
Пример видео-карточки в стиле кейса.
-
- -

Результат

-

- Шаблон готов для копирования в новый кейс: остаётся заменить рыбу на фактический текст, подставить реальные ссылки и медиа проекта. -

-
-
- -
-
-

Портфолио

-
    -
  1. - - -
    -

    Primo AI Server

    -
      -
    • UX/UI
    • -
    • Web App
    • -
    -

    Интерфейс для обучения и использования AI‑моделей в бизнес‑процессах: работа с данными, сценариями автоматизации и Smart OCR.

    -
    -
    -
  2. -
  3. - - -
    -

    Lunacy

    -
      -
    • UX/UI
    • -
    • Desktop App
    • -
    -

    Работа над интерфейсом Lunacy в команде Icons8: user flow, сложные прототипы, улучшение функциональности и интерфейсной логики.

    + + + + + + + Демо элементов кейса — template + + + + + + + + + + + + + + + + + + + + + +
    + +
    +
    + + +
    +
    + +
    +
    + +
  4. - - -
  5. - - -
    -

    Primo Orc

    -
      -
    • Менторство и наставничество
    • -
    -

    Веб-кабинет оркестратора Primo RPA: проекты, запуск и контроль RPA-роботов. Редизайн ключевых экранов под продакшен без остановки релизов.

    -
    -
    -
  6. - - -
-
-
- -
-
-

Контакты

- -
-
- - - - - - - - - - - - - - - +
+ + +
+ + +
+

Тема

+
+ + + +
+
+
+

Скругление углов

+
+ + + +
+
+
+

Типографика

+
+ + + +
+
+
+

Фон страницы

+
+ + +
+
+ + + + + + + +
+ +
+ + +
+
+

Демо · template

+

Пример кейса: демо элементов

+

Рыба-текст и блоки для быстрой сборки лонгрида

+

Медиа для демо лежат в public/assets/ (сборка страниц их не копирует). См. public/assets/README.md.

+ +

Контекст

+

+ Этот раздел показывает пример рыбы для вступления. Здесь можно коротко описать продукт, аудиторию и ограничения проекта. + Текст нейтральный: цель — быстро набросать структуру и проверить визуальный ритм страницы. +

+ +

Задача

+

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

+ +

Решение

+

Ниже собраны готовые примеры, которые можно копировать в реальные кейсы.

+ +

Карточки ссылок

+ + +

Картинка: 50% от оригинала (без превью)

+
+ Демо GIF в натуральном размере +
Изображение в уменьшенном натуральном размере, по центру.
+
+ +

Картинка: по ширине контента (с превью)

+
+ Демо изображения по ширине контента +
Изображение по ширине контента. Клик открывает viewer.
+
+ +

Картинка: чуть шире контента (с превью)

+
+ Демо изображения шире контента +
Изображение немного выходит за пределы контентной колонки.
+
+ +

Длинный скрин: свёрнутая высота и кнопка внутри превью

+

+ Блок data-case-tall-media: ширина задаётся атрибутом data-case-tall-width="wide" (как «широкая» картинка) или content (по колонке). В свёрнутом виде видна верхняя часть кадра, внизу превью — плотный «туман». Кнопка «Развернуть» / «Свернуть» с иконкой-шевроном поверх нижней части кадра, внутри рамки; после раскрытия туман скрывается, после сворачивания страница прокручивается к превью. Высоту превью — на .case-media-tall__clip через --case-tall-max (по умолчанию min(70vh, 32rem)). +

+
+
+
+ Демо: длинный вертикальный скрин интерфейса + +
+
+ +
+
+
Длинное изображение img-long.webp (исходник PNG рядом в public/assets/template-elements-demo/).
+
+ +

Галерея: сетка по ширине контента

+

+ Колонок на широком экране задаётся на figure: атрибут style="--case-gallery-cols: 3". Ниже порогов сетка схлопывается до двух и одной колонки. Клик по миниатюре открывает общий viewer кейса. +

+ + +

Галерея: сетка на ширину страницы с боковыми отступами

+

+ Класс case-media-gallery--wide — та же логика выхода за колонку, что у одиночного case-media--wide. Здесь две колонки на широком экране (--case-gallery-cols: 2). +

+ + +

Callout: важный абзац с эмоджи

+ + +

Видео: карточка с тенью и фиксированными малыми углами

+
+
+ +
+
Пример видео-карточки в стиле кейса.
+
+ +

Результат

+

+ Шаблон готов для копирования в новый кейс: остаётся заменить рыбу на фактический текст, подставить реальные ссылки и медиа проекта. +

+
+
+ +
+
+

Портфолио

+
    +
  1. + + +
    +

    Primo AI Server

    +
      +
    • UX/UI
    • +
    • Web App
    • +
    +

    Интерфейс для обучения и использования AI‑моделей в бизнес‑процессах: работа с данными, сценариями автоматизации и Smart OCR.

    +
    +
    +
  2. +
  3. + + +
    +

    Lunacy

    +
      +
    • UX/UI
    • +
    • Desktop App
    • +
    +

    Работа над интерфейсом Lunacy в команде Icons8: user flow, сложные прототипы, улучшение функциональности и интерфейсной логики.

    +
    +
    +
  4. + + +
  5. + + +
    +

    Primo Orc

    +
      +
    • Менторство и наставничество
    • +
    +

    Веб-кабинет оркестратора Primo RPA: проекты, запуск и контроль RPA-роботов. Редизайн ключевых экранов под продакшен без остановки релизов.

    +
    +
    +
  6. + + +
+
+
+ +
+
+

Контакты

+ +
+
+ + + + + + + + + + + + + + + diff --git a/public/cookie-policy.html b/public/cookie-policy.html index 0fe9fe7..025c071 100644 --- a/public/cookie-policy.html +++ b/public/cookie-policy.html @@ -321,7 +321,7 @@ diff --git a/public/index.html b/public/index.html index fca97e8..c35c738 100644 --- a/public/index.html +++ b/public/index.html @@ -303,7 +303,7 @@

Портфолио

  1. - +
  2. - +
  3. - +