Vogue Collections

Conde Nast Russia

Vogue Collections

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


Идея, дизайн — Condé Nast Russia

Разрабока — Лайв Тайпинг

Vogue Collections
Vogue Collections
Тысячи изображений с подиума
Задача
Выполнить мобильное приложение для любителей моды согласно предоставленному дизайну.
Предыстория
До того, как взяться за 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) и загрузкам (Dowloads). Меню и другие навигационные экраны с точки зрения дизайна располагаются поверх главного экрана, в каком бы состоянии он ни был. Для достижения этого эффекта в момент открытия меню приложение делает снимок экрана и плавно размывает картинку.
Новые коллекции
При появлении новой коллекции, которая еще не была просмотрена, рядом с категорией и сезоном появляется значок New, сигнализирующий о появлении новых материалов. Непосредственно в сезоне новые коллекции группируются вверху списка, облегчая доступ к контенту.
Просмотр коллекции
Внутри коллекции фотографии представлены в виде сетки — это сделано для удобного обзора всей коллекции. Если коллекция заинтересовала пользователя, то можно перейти в режим ленты, тапнув на любую фотографию. Традиционно галерейные приложения предлагают перелистывать фотографии слева направо. Однако на модных показах модели идут одна за другой, поэтому и в приложении весь показ прокручивается сверху вниз.
Внутри коллекции могут быть дополнительные разделы, например, Backstage (англ. «закулисье») или First row (англ. «первый ряд»). Для переключения между такими внутренними галереями мы использовали табы, с поддержкой жестов смахивания. В приложении также поддерживается жест «пинч» (разведение или сведение пальцев) для перехода из сетки в ленту и обратно.
Для просмотра большого количества контента очень важно внимательно относиться к скорости работы приложения и отзывчивости интерфейса. Поэтому мы внедрили жест «смахивание от края экрана» (edge swipe), который представляет собой дополнение кнопки «Назад». Не многие iOS-пользователи знают о нем, но все же он значительно ускоряет переход на предыдущий экран. Кстати, Apple в обязательном порядке требует edge swipe для перехода обратно на экран списка.
Детальный просмотр фотографии и шаринг (поделиться)
Любое изображение из ленты можно увеличить двумя способами: жестом «пинч» и простым тапом. Если тапнуть на изображение, то оно увеличится, оптимально заполнив экран устройства.
Понравившейся фотографией можно поделится. В стильном приложении стоило внедрить упрощенную панель шаринга со своим порядком соц. сетей. Как известно, Instagram поддерживает только квадратные фотографии, поэтому, вертикальные изображения с модных показов следовало дополнить полями.
Загрузки
Для пользователей с плохим интернетом или пассажиров самолета предусмотрена возможность загрузки коллекции для просмотра в оффлайн-режиме (без интернета).
Чтобы отчистить память телефона от кэшированных (сохраненных для офлайн-просмотра) изображений предусмотрена настройка в системном разделе iOS. Для массовой отчистки загрузок разработан интерфейс.
Избранное
Приложение дает возможность поместить отдельные фотографии из разных коллекций в раздел «Избранное». Таким образом, изображения из коллекций разных брендов будут агрегироваться в специальном разделе, сливаясь в единую ленту. Из каждой фотографии возможен переход в полную коллекцию.
Поиск
Поиск осуществляется по всей базе данных и реализован на серверной стороне.
Успех
Средний пользовательский рейтинг Vogue Collection по всем странам 4,5 из 5.
Отличные отзывы и фичиринг (отметка) в App Store стимулируют нас развивать приложения.