{ "version": "https:\/\/jsonfeed.org\/version\/1.1", "title": "Евгений Смирнов — дизайнер интерфейсов: заметки с тегом цифровые публикации", "_rss_description": "Проектирую мобильные и веб-приложения и сайты. Создаю интерактивные прототипы, чтобы протестировать идею до разработки и презентовать её заказчикам или инвесторам.", "_rss_language": "ru", "_itunes_email": "smirnov.evgeniy789@gmail.com", "_itunes_categories_xml": "", "_itunes_image": "https:\/\/yevgeniysmirnov.ru\/pictures\/userpic\/userpic-square@2x.jpg?1764698559", "_itunes_explicit": "no", "home_page_url": "https:\/\/yevgeniysmirnov.ru\/tags\/cifrovye-publikacii\/", "feed_url": "https:\/\/yevgeniysmirnov.ru\/tags\/cifrovye-publikacii\/json\/", "icon": "https:\/\/yevgeniysmirnov.ru\/pictures\/userpic\/userpic@2x.jpg?1764698559", "authors": [ { "name": "Евгений Смирнов", "url": "https:\/\/yevgeniysmirnov.ru\/", "avatar": "https:\/\/yevgeniysmirnov.ru\/pictures\/userpic\/userpic@2x.jpg?1764698559" } ], "items": [ { "id": "1", "url": "https:\/\/yevgeniysmirnov.ru\/all\/flippingbook\/", "title": "Интерфейс карманного помощника продавца: задизайнил B2B-приложение, которым пользуются 50 000 клиентов по всему миру", "content_html": "
\n\"\"\n<\/div>\n

Приложение FlippingBook позволяет менеджерам продаж брать с собой маркетинговые и коммерческие материалы для презентации товаров и услуг, делиться ими и отслеживать статистику их просмотра.<\/p>\n

На проекте<\/h2>\n
    \n
  1. Проводил ревью iOS-версии дизайна и формировал предложения по адаптации интерфейса под Android и улучшению кастомных элементов.<\/li>\n
  2. Корректировал свои предложения с учётом ограничений разработки.<\/li>\n
  3. Согласовывал результаты ревью с арт-директором, дизайнером клиента и самим клиентом.<\/li>\n
  4. Дизайнил интерфейс Android-приложения для телефона и планшета.<\/li>\n<\/ol>\n

    Клиент<\/h2>\n

    FlippingBook<\/a> предоставляет ИТ-решения для работы с флипбуками компаниям из Fortune 500. Флипбуки — электронные каталоги и презентации с эффектом перелистывания страниц и интеграцией звука, видео, ссылок и корзины покупок.<\/p>\n

    Задача<\/h2>\n

    Увеличить лояльность аудитории компании ― предпринимателей, маркетологов, продавцов и менеджеров ― за счет «карманной» доступности флипбуков.<\/p>\n

    Решение<\/h2>\n

    Приложение, которое позволяет управлять материалами без привязки к офису: делиться ссылками, отслеживать статистику взаимодействий, получать уведомления об открытиях и загружать для офлайн-просмотра.<\/p>\n

    Интерфейс адаптировал по гайдлайнам Google Material Design 2, а позднее обновил по Material You. Такой подход обеспечил современный внешний вид, привычное и предсказуемое поведение элементов, сократил бюджет на разработку и поддержку.<\/p>\n

    Как выстроил процесс<\/h2>\n
    \n\"\"\n
    Реализовал 6 спринтов дизайна мобильного и планшетного Android-приложения<\/div>\n<\/div>\n

    Работа строилась спринтами<\/b><\/p>\n

      \n
    1. Изучал техническое задание.<\/li>\n
    2. Получал от дизайнера клиента iOS-макеты. Отсматривал их и отмечал, какие элементы будут адаптированы и улучшены.<\/li>\n
    3. Сначала обсуждал предложения с арт-директором и дизайнером клиента, некоторые отсеивали или искали им замену, которая устроит обе стороны: обновились требования, недопонял макет, попал в ограничения разработки — рабочий процесс. Затем предложения аргументировал клиенту.<\/li>\n
    4. После согласования собирал макеты Android-приложения.<\/li>\n<\/ol>\n

      Сначала адаптировал навигационные элементы<\/h2>\n

      Верхняя навигационная панель<\/b><\/p>\n

        \n
      1. Увеличил высоту.<\/li>\n
      2. Поменял серую заливку на белую.<\/li>\n
      3. Убрал разделитель.<\/li>\n<\/ol>\n

        Панель перестала конкурировать с содержанием за внимание и сохранила свою изолированость:<\/p>\n

        \n\"\"\n<\/div>\n

        Когда страница прокручивается, появляется тень, отделяющая панель от содержимого:<\/p>\n

        \n\"\"\n<\/div>\n

        Нижняя навигационная панель<\/b><\/p>\n

          \n
        1. Сравнял по размеру с верхней, чтобы элементы навигации имели общий признак и проще распознавались.<\/li>\n
        2. Повысил контраст между активным и неактивным разделами.<\/li>\n
        3. Облегчил цвет заливки и вместо разделителя добавил тень для изоляции от содержания.<\/li>\n<\/ol>\n
          \n\"\"\n<\/div>\n

          Впоследствии обновил навигационные панели по гайдлайнам Material YOU:<\/p>\n

          \n\"\"\n<\/div>\n

          Переходы к вложенным страницам сделал полноэкранными<\/b>
          \nСледующая страница появляется над текущей, двигаясь справа налево. Предыдущая появляется из-под текущей, которая сдвигается слева направо:<\/p>\n