Vogue Collections

Мобильное приложение для просмотра последних коллекций и показов с подиумов Нью-Йорка, Лондона, Милана, Парижа и Москвы

Tilda Publishing

Посмотреть вживую

App Store

Fashion

Native

Tablets

Animations

Localization

Sharing

Instagam

iOS

Mobile

Gallery

Back-end

Предыстория

До того, как взяться за Vogue Collections, компания Live Typing уже сделала для Condé Nast Russia приложение Allure Beauty Product Finder. Поскольку данный опыт оказался положительным для обеих сторон, нас попросили оценить приложение для Vogue. Основные экраны приложения на тот момент уже были нарисованы, а то, как они взаимодействуют, требовалось додумать самим. Совместно с арт-директором из Condé Nast Russia Александром Распутиным мы выбирали наилучшие интерфейсные решения для простоты и удобства пользователя.

Работа с приложением

ИКОНКА И ЗАГРУЗОЧНЫЙ ЭКРАН

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

ГЛАВНЫЙ ЭКРАН

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

МЕНЮ

В главном меню можно перейти в коллекции, разделённые по категориям, принятым в модной индустрии: Ready-to-wear, Couture, Menswear, Bridal, Pre-fall, Resort. Также есть доступ к избранному (Favourites), поиску (Search) и загрузкам (Downloads).
Меню и другие навигационные экраны с точки зрения дизайна располагаются поверх главного экрана, в каком бы состоянии он ни был. Для достижения этого эффекта в момент открытия меню приложение делает снимок экрана и плавно размывает картинку.

Коллекциии

НОВЫЕ КОЛЛЕКЦИИ

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

ПРОСМОТР КОЛЛЕКЦИИ

Внутри коллекции фотографии представлены в виде сетки — это сделано для удобного обзора всей коллекции. Если коллекция заинтересовала пользователя, то можно перейти в режим ленты, тапнув на любую фотографию.
Традиционно галерейные приложения предлагают перелистывать фотографии слева направо. Однако на модных показах модели спускаются по подиуму одна за другой, поэтому и в приложении весь показ прокручивается сверху вниз.
Внутри коллекции могут быть дополнительные разделы, например, Backstage (англ. «закулисье») или First row (англ. «первый ряд»). Для переключения между такими внутренними галереями мы использовали табы с поддержкой жестов смахивания. В приложении также поддерживается жест pinch (разведение или сведение пальцев) для перехода из сетки в ленту и обратно.

Для просмотра большого количества контента очень важно внимательно относиться к скорости работы приложения и отзывчивости интерфейса. Поэтому мы внедрили жест edge swipe (смахивание от края экрана), который представляет собой дополнение кнопки «Назад». Не многие iOS-пользователи знают о нём, но все же он значительно ускоряет переход на предыдущий экран. Кстати, Apple в обязательном порядке требует edge swipe для перехода обратно на экран списка.

ДЕТАЛЬНЫЙ ПРОСМОТР ФОТОГРАФИИ И ШАРИНГ

Любое изображение из ленты можно увеличить двумя способами: жестом pinch и простым тапом. Если тапнуть на изображение, то оно увеличится, оптимально заполнив экран устройства.

Понравившейся фотографией можно поделится. В стильном приложении стоило внедрить упрощённую панель шаринга со своим порядком социальных сетей.

Специальные возможности

ЗАГРУЗКИ

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

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

ИЗБРАННОЕ

Приложение даёт возможность поместить отдельные фотографии из разных коллекций в раздел «Избранное». Таким образом, изображения из коллекций разных брендов будут агрегироваться в специальном разделе, сливаясь в единую ленту. Из каждой фотографии возможен переход в полную коллекцию.

ПОИСК

Чтобы найти дизайнера или коллекцию, не нужно писать её название целиком — автоподстановка предложит варианты по ходу ввода текста.

Есть три способа поиска по приложению, выбор которого зависит от опыта и потребности пользователя:

С помощью «лупы», которая ищет дизайнеров и коллекции по всему приложению;
В каталоге «Дизайнеры» в главном меню, если пользователя интересует коллекция конкретного дизайнера в один из модных сезонов;
В категориях одежды в главном меню, если пользователь хочет посмотреть только женские или только мужские коллекции в один из модных сезонов.