SlideShare a Scribd company logo
Мобильная версия сайта
рекомендации по дизайну
по данным исследований ФОМ и Яндекса в 2016 году
На 2016 год
Как люди выходят в сеть
Более 50 % использует
моб.устройства наряду
с компьютерами
Как люди выходят в сеть
Более 50 % использует
моб.устройства наряду
с компьютерами
Как люди выходят в сеть
Более 20 % выходят в сеть
только с мобильных
устройств
Доля заходов с мобильных устройств
29% всех визитов на веб-сайты
совершается с мобильных устройств
Доля заходов с мобильных устройств
29% всех визитов на веб-сайты
совершается с мобильных устройств
Доля заходов с мобильных устройств
Доля визитов со смартфонов составляет
2/3 визитов с моб.устройств. Эта цифра
продолжает расти!
29% всех визитов на веб-сайты
совершается с мобильных устройств
Доля заходов с мобильных устройств
Доля визитов со смартфонов составляет
2/3 визитов с моб.устройств. Эта цифра
продолжает расти!
Доля визитов с планшетов начала
медленно падать (это подтверждается и
падением спроса на планшеты)
Распределение по ОС и устройствам
iOS 8-9 

— 90% айфонов
Android 4.2-5.0 

— 80% андроидов
95% всех визитов

с мобильных устройств
приходится на iOS и Android
Распределение по ОС и устройствам
iOS 8-9 

— 90% айфонов
Android 4.2-5.0 

— 80% андроидов
95% всех визитов

с мобильных устройств
приходится на iOS и Android
Распределение по ОС и устройствам
iOS 8-9 

— 90% айфонов
Android 4.2-5.0 

— 80% андроидов
Количество визитов без JS минимально, можно сильно не париться.

jQuery mobile используют все, включая Яндекс и других.
В 2016 году без моб.версии нельзя
юзабилити сайта на моб.устройстве напрямую связано с конверсией в этом канале
Конверсия больше, если пользователю удобно на моб.устройстве
нельзя игнорировать каждого третьего потенциального клиента
Каждый третий пользователь заходит на сайт с моб.устройства
И Яндекс и Google официально объявили о приоритете адаптированных сайтов в моб.выдаче
Mobile-friendly сайты выше в моб.выдаче, чем desktop-only
VSМоб.версия Адаптив
Отдельная дизайн сайта
под мобильные устройства
Адаптация десктопного
дизнайна под маленькие экраны
руки не связаны интерфейсом десктопа
«Сделано для моб.устройств»
Моб.версия АдаптивVS
руки не связаны интерфейсом десктопа
«Сделано для моб.устройств»
не загружается код для десктопа
Быстро работает (меньше кода)
Моб.версия АдаптивVS
руки не связаны интерфейсом десктопа
«Сделано для моб.устройств»
не загружается код для десктопа
Быстро работает (меньше кода)
масштабируемая структура, интерфейс
Удобна в расширении и развитии
Моб.версия АдаптивVS
руки не связаны интерфейсом десктопа
«Сделано для моб.устройств»
не загружается код для десктопа
Быстро работает (меньше кода)
масштабируемая структура, интерфейс
Удобна в расширении и развитии
отдельные дизайн макеты, верстка, интеграция
Больше работ по созданию
Моб.версия АдаптивVS
руки не связаны интерфейсом десктопа
«Сделано для моб.устройств»
не загружается код для десктопа
Быстро работает (меньше кода)
масштабируемая структура, интерфейс
Удобна в расширении и развитии
отдельные дизайн макеты, верстка, интеграция
Больше работ по созданию
Моб.версия Адаптив
любые изменения вносятся отдельно от десктопа
Требует отдельной поддержки
VS
макеты редко нужны, верстка одна, интеграции нет
Прост и быстр в разработке
руки не связаны интерфейсом десктопа
«Сделано для моб.устройств»
не загружается код для десктопа
Быстро работает (меньше кода)
масштабируемая структура, интерфейс
Удобна в расширении и развитии
отдельные дизайн макеты, верстка, интеграция
Больше работ по созданию
Моб.версия Адаптив
любые изменения вносятся отдельно от десктопа
Требует отдельной поддержки
VS
макеты редко нужны, верстка одна, интеграции нет
Прост и быстр в разработке
обновлением всей верстки = обновление адаптива
Легок в поддержке
руки не связаны интерфейсом десктопа
«Сделано для моб.устройств»
не загружается код для десктопа
Быстро работает (меньше кода)
масштабируемая структура, интерфейс
Удобна в расширении и развитии
отдельные дизайн макеты, верстка, интеграция
Больше работ по созданию
Моб.версия Адаптив
любые изменения вносятся отдельно от десктопа
Требует отдельной поддержки
VS
макеты редко нужны, верстка одна, интеграции нет
Прост и быстр в разработке
обновлением всей верстки = обновление адаптива
Легок в поддержке
грузится 70% кода, который вообще не нужен
Ощутимо медленнее
руки не связаны интерфейсом десктопа
«Сделано для моб.устройств»
не загружается код для десктопа
Быстро работает (меньше кода)
масштабируемая структура, интерфейс
Удобна в расширении и развитии
отдельные дизайн макеты, верстка, интеграция
Больше работ по созданию
Моб.версия Адаптив
любые изменения вносятся отдельно от десктопа
Требует отдельной поддержки
VS
макеты редко нужны, верстка одна, интеграции нет
Прост и быстр в разработке
обновлением всей верстки = обновление адаптива
Легок в поддержке
грузится 70% кода, который вообще не нужен
Ощутимо медленнее
руки не связаны интерфейсом десктопа
«Сделано для моб.устройств»
не загружается код для десктопа
Быстро работает (меньше кода)
масштабируемая структура, интерфейс
Удобна в расширении и развитии
отдельные дизайн макеты, верстка, интеграция
Больше работ по созданию
Моб.версия Адаптив
любые изменения вносятся отдельно от десктопа
Требует отдельной поддержки
по сути решение «здесь и сейчас»
Не удобно развивать
VS
макеты редко нужны, верстка одна, интеграции нет
Прост и быстр в разработке
обновлением всей верстки = обновление адаптива
Легок в поддержке
грузится 70% кода, который вообще не нужен
Ощутимо медленнее
руки не связаны интерфейсом десктопа
«Сделано для моб.устройств»
не загружается код для десктопа
Быстро работает (меньше кода)
масштабируемая структура, интерфейс
Удобна в расширении и развитии
отдельные дизайн макеты, верстка, интеграция
Больше работ по созданию
Моб.версия Адаптив
любые изменения вносятся отдельно от десктопа
Требует отдельной поддержки
по сути решение «здесь и сейчас»
Не удобно развивать
либо многое нужно менять при перестроении
Не высокое юзабилити
VS
Моб.версия АдаптивVS
Оптимальна для сложных,
больших, функциональных
сайтов
— интернет-магазины
— крупные порталы
— площадки (сервисы)
— везде, где много функционала
Моб.версия АдаптивVS
Оптимальна для сложных,
больших, функциональных
сайтов
Оптимальна для простых,
информационных, мало
меняющихся сайтов
— интернет-магазины
— крупные порталы
— площадки (сервисы)
— везде, где много функционала
— корпоративные сайты
— лэндинги
— сайты СМИ
— простые инф. сайты
VSm.site.com RESS
Выделение мобильной
версии на поддомен
Отправка нужного кода

в зависимости от устройства
m.site.com RESS
отдельный URL — отдельная страница. Все просто
В лоб, но привычно и надежно
VS
m.site.com RESS
отдельный URL — отдельная страница. Все просто
В лоб, но привычно и надежно
при входе с мобильного без m. надо спрашивать
Надо предлагать переход
VS
m.site.com RESS
отдельный URL — отдельная страница. Все просто
В лоб, но привычно и надежно
при входе с мобильного без m. надо спрашивать
Надо предлагать переход
по сути m.site.com — отельный сайт
Разные URL
VS
m.site.com RESS
отдельный URL — отдельная страница. Все просто
В лоб, но привычно и надежно
при входе с мобильного без m. надо спрашивать
Надо предлагать переход
по сути m.site.com — отельный сайт
Разные URL
проблемы, когда part.site.com и т.д.
Сложности, когда поддомены
VS
m.site.com RESS
можно делаться, нет проблем с индексацией
Один и тот же URL
отдельный URL — отдельная страница. Все просто
В лоб, но привычно и надежно
при входе с мобильного без m. надо спрашивать
Надо предлагать переход
по сути m.site.com — отельный сайт
Разные URL
проблемы, когда part.site.com и т.д.
Сложности, когда поддомены
VS
m.site.com RESS
можно делаться, нет проблем с индексацией
Один и тот же URL
нет предложений «перейти на моб.версию» и т.п.
Открывается сразу
отдельный URL — отдельная страница. Все просто
В лоб, но привычно и надежно
при входе с мобильного без m. надо спрашивать
Надо предлагать переход
по сути m.site.com — отельный сайт
Разные URL
проблемы, когда part.site.com и т.д.
Сложности, когда поддомены
VS
m.site.com RESS
можно делаться, нет проблем с индексацией
Один и тот же URL
нет предложений «перейти на моб.версию» и т.п.
Открывается сразу
отдельный URL — отдельная страница. Все просто
В лоб, но привычно и надежно
при входе с мобильного без m. надо спрашивать
Надо предлагать переход
по сути m.site.com — отельный сайт
Разные URL
проблемы, когда part.site.com и т.д.
Сложности, когда поддомены
можно доверять и не беспокоиться
Так делают Яндекс, Гугл и другие
VS
m.site.com RESS
можно делаться, нет проблем с индексацией
Один и тот же URL
нет предложений «перейти на моб.версию» и т.п.
Открывается сразу
отдельный URL — отдельная страница. Все просто
В лоб, но привычно и надежно
при входе с мобильного без m. надо спрашивать
Надо предлагать переход
по сути m.site.com — отельный сайт
Разные URL
проблемы, когда part.site.com и т.д.
Сложности, когда поддомены
можно доверять и не беспокоиться
Так делают Яндекс, Гугл и другие
плюсы очевидны, очевидных минусов нет
Самый современный подход сейчас
VS
стандартные приемы в мобильных интерфейсах
«Люди привыкли»
Очень поможет
1 / 4
Логотип, меню, поиск — до 3-4 объектов
Аскетичная шапка
2 / 4
Логотип, меню, поиск — до 3-4 объектов
Аскетичная шапка
3 / 4
Логотип, меню, поиск — до 3-4 объектов
Аскетичная шапка
4 / 4
Логотип, меню, поиск — до 3-4 объектов
Аскетичная шапка
Связной
1 / 3
Сдвиг или переход; скролл внутри меню
Меню — это бургер
Логотип, меню, поиск — до 3-4 объектов
Аскетичная шапка
Техносила
2 / 3
Сдвиг или переход; скролл внутри меню
Меню — это бургер
Логотип, меню, поиск — до 3-4 объектов
Аскетичная шапка
Wallmart
3 / 3
Сдвиг или переход; скролл внутри меню
Меню — это бургер
Логотип, меню, поиск — до 3-4 объектов
Аскетичная шапка
Яндекс.Маркет
1 / 2
Сдвиг или переход; скролл внутри меню
Меню — это бургер
Логотип, меню, поиск — до 3-4 объектов
Аскетичная шапка
Переход на следующий экран / страницу
Полоса со стрелкой вправо — переход
iOS
2 / 2
Сдвиг или переход; скролл внутри меню
Меню — это бургер
Логотип, меню, поиск — до 3-4 объектов
Аскетичная шапка
Переход на следующий экран / страницу
Полоса со стрелкой вправо — переход
Amazon
1 / 2
Сдвиг или переход; скролл внутри меню
Меню — это бургер
Логотип, меню, поиск — до 3-4 объектов
Аскетичная шапка
Переход на следующий экран / страницу
Полоса со стрелкой вправо — переход
Раскрытие вложенного списка; без перехода
Полоса со стрелкой вниз — раскрытие
Amazon
2 / 2
Сдвиг или переход; скролл внутри меню
Меню — это бургер
Логотип, меню, поиск — до 3-4 объектов
Аскетичная шапка
Переход на следующий экран / страницу
Полоса со стрелкой вправо — переход
Раскрытие вложенного списка; без перехода
Полоса со стрелкой вниз — раскрытие
Яндекс.Маркет
1 / 2
Сдвиг или переход; скролл внутри меню
Меню — это бургер
Логотип, меню, поиск — до 3-4 объектов
Аскетичная шапка
Переход на следующий экран / страницу
Полоса со стрелкой вправо — переход
Раскрытие вложенного списка; без перехода
Полоса со стрелкой вниз — раскрытие
Открытие слоя, модального окна или действие выбора
Полоса без стрелки — слой / действие
Яндекс.Маркет
2 / 2
Сдвиг или переход; скролл внутри меню
Меню — это бургер
Логотип, меню, поиск — до 3-4 объектов
Аскетичная шапка
Переход на следующий экран / страницу
Полоса со стрелкой вправо — переход
Раскрытие вложенного списка; без перехода
Полоса со стрелкой вниз — раскрытие
Открытие слоя, модального окна или действие выбора
Полоса без стрелки — слой / действие
Сдвиг или переход; скролл внутри меню
Меню — это бургер
Логотип, меню, поиск — до 3-4 объектов
Аскетичная шапка
iOS
Переход на следующий экран / страницу
Полоса со стрелкой вправо — переход
Раскрытие вложенного списка; без перехода
Полоса со стрелкой вниз — раскрытие
Открытие слоя, модального окна или действие выбора
Полоса без стрелки — слой / действие
Однозначный выбор; видно, что выбрано
Полоса со значением — выбрано
1 / 1
Расшифровка работы функции
iOS
1 / 1
Подпись под полосой — объяснение
Расшифровка работы функции
Яндекс.Маркет
Другой цвет текста или выравнивание по центру
1 / 1
Подпись под полосой — объяснение
Полоса другого стиля — показать больше
Расшифровка работы функции
Подпись под полосой — объяснение
Яндекс.Маркет
Другой цвет текста или выравнивание по центру
Полоса другого стиля — показать больше
Объяснение логической группы строк
Заголовок над полосами — группа
1 / 1
Расшифровка работы функции
Подпись под полосой — объяснение
Яндекс.Маркет
Другой цвет текста или выравнивание по центру
Полоса другого стиля — показать больше
Объяснение логической группы строк
Заголовок над полосами — группа
Множественный выбор; видно, что выбрано
Вторая строка в полосе — выбранное
1 / 1
Расшифровка работы функции
Подпись под полосой — объяснение
iOS
Другой цвет текста или выравнивание по центру
Полоса другого стиля — показать больше
Объяснение логической группы строк
Заголовок над полосами — группа
Множественный выбор; видно, что выбрано
Вторая строка в полосе — выбранное
1 / 2
Разделение разных типов информации на группы
Зонирование фоном — понимание
Расшифровка работы функции
Подпись под полосой — объяснение
Яндекс.Маркет
Другой цвет текста или выравнивание по центру
Полоса другого стиля — показать больше
Объяснение логической группы строк
Заголовок над полосами — группа
Множественный выбор; видно, что выбрано
Вторая строка в полосе — выбранное
2 / 2
Разделение разных типов информации на группы
Зонирование фоном — понимание
Расшифровка работы функции
Подпись под полосой — объяснение
Другой цвет текста или выравнивание по центру
Полоса другого стиля — показать больше
Объяснение логической группы строк
Заголовок над полосами — группа
Множественный выбор; видно, что выбрано
Вторая строка в полосе — выбранное
1 / 1
Разделение разных типов информации на группы
Зонирование фоном — понимание
Разделение разных типов информации на группы
Привычное поведение поиска
Курсор в поле
Запрос введен
бренд–коммуникация с пользователем через интерфейс
на примере сети магазинов цифровой техники «КЕЙ»
Дизайн–язык
Шапка
Шапка
Заголовок фирменным шрифтом
Шапка
Заголовок фирменным шрифтом
Кнопки фирменным цветом
Шапка
Заголовок фирменным шрифтом
Кнопки фирменным цветом
Консистенция с полной версией: цена, баллы
Шапка
Заголовок фирменным шрифтом
Кнопки фирменным цветом
Консистенция с полной версией: цена, баллы
Кнопка акцентным фирменным цветом
Шапка
Заголовок фирменным шрифтом
Кнопки фирменным цветом
Консистенция с полной версией: цена, баллы
Кнопка акцентным фирменным цветом
Выбранное в фильтре фирменным цветом
Хорошего и не очень хорошего дизайна мобильных версий
Примеры
Дизайн мобильной версии сайта
Дизайн мобильной версии сайта
Дизайн мобильной версии сайта
Дизайн мобильной версии сайта
Дизайн мобильной версии сайта
Дизайн мобильной версии сайта
Дизайн мобильной версии сайта
Дизайн мобильной версии сайта
Дизайн мобильной версии сайта
Дизайн мобильной версии сайта
Дизайн мобильной версии сайта
Всё время держите в голове при дизайне моб.версии
Помните
Отсекайте смелее, оставляйте только главное
Мало места и это прекрасно!
Главное
Отсекайте смелее, оставляйте только главное
Мало места и это прекрасно!
Главное
минимум элементов в один ряд - надежно
Все по строкам
Отсекайте смелее, оставляйте только главное
Мало места и это прекрасно!
Главное
минимум элементов в один ряд - надежно
Все по строкам
Элементы крупные, зоны безопасности большие
Тапать будут пальцами
Отсекайте смелее, оставляйте только главное
Мало места и это прекрасно!
Главное
минимум элементов в один ряд - надежно
Все по строкам
Элементы крупные, зоны безопасности большие
Тапать будут пальцами
Лучше слои или отдельные страницы
Минимум всплывашек
Отсекайте смелее, оставляйте только главное
Мало места и это прекрасно!
Главное
минимум элементов в один ряд - надежно
Все по строкам
Элементы крупные, зоны безопасности большие
Тапать будут пальцами
Лучше слои или отдельные страницы
Минимум всплывашек
Отсекайте смелее, оставляйте только главное
Мало места и это прекрасно!
Главное
минимум элементов в один ряд - надежно
Все по строкам
Элементы крупные, зоны безопасности большие
Тапать будут пальцами
Лучше слои или отдельные страницы
Минимум всплывашек
все, что при хавере надо выносить на
Хавера нет, забудьте
Главное
все, что при хавере надо выносить на
Хавера нет, забудьте
Главное
все, что при хавере надо выносить на
Хавера нет, забудьте
Главное
по страницам или в рамках слоев по шагам
Хлебных крошек нет — навигация
все, что при хавере надо выносить на
Хавера нет, забудьте
Главное
по страницам или в рамках слоев по шагам
Хлебных крошек нет — навигация
все, что при хавере надо выносить на
Хавера нет, забудьте
Главное
по страницам или в рамках слоев по шагам
Хлебных крошек нет — навигация
Можно смело использовать, уже привычно
Горизонтальный скролл блоков
все, что при хавере надо выносить на
Хавера нет, забудьте
Главное
по страницам или в рамках слоев по шагам
Хлебных крошек нет — навигация
Можно смело использовать, уже привычно
Горизонтальный скролл блоков
случайные нажатия, использование на бегу,
один так и звонок и т.д.
Помните, что устройство в руке
все, что при хавере надо выносить на
Хавера нет, забудьте
Главное
по страницам или в рамках слоев по шагам
Хлебных крошек нет — навигация
Можно смело использовать, уже привычно
Горизонтальный скролл блоков
случайные нажатия, использование на бегу,
один так и звонок и т.д.
Помните, что устройство в руке
от 320 до 1024
320-640 разрешение 80% пользователей
Сначала под 320-640
при повороте устройства элементы будут
растягиваться + может увеличиваться
количество элементов в строке
(например, товарная сетка на 320-640 — 2
товара в строке, на 1024 — до 4)
до 1024 резина + адаптив
1024
планшет
320
смартфон
Достаточно подготовить макеты на 640 +
визуальную нотацию изменения интерфейса
при просмотре на 1024
Не забывайте про возврат
Обычно в футере ссылка «Полная версия». Можно продублировать
в меню.
На мобильной версии переключатель на полную
В футере ссылка «Мобильная версия
На полной версии переключатель на мобильную
Существуют сценарии, когда пользователю нужно переключиться
на полную или мобильную версию. Не стоит этим пренебрегать.
Можно детально изучать, разбирать на дизайн-решения и использовать
Хорошие примеры
afisha.yandex.ru
avia.yandex.ru
market.yandex.ru
etsy.com
cian.ru
nike.com
Мобильная версия
apple.com
tehnosila.ru
meduza.io
kremlin.ru
tinkoff.ru
mel.fm
Адаптив
🙌
Спасибо
slideshare.net/Aidem_ru
aidem.ru

More Related Content

Viewers also liked

Дизайн в студии, дизайн в стартапе, дизайн процессов
Дизайн в студии, дизайн в стартапе, дизайн процессовДизайн в студии, дизайн в стартапе, дизайн процессов
Дизайн в студии, дизайн в стартапе, дизайн процессов
Aidem
 
Итоги полного редизайна KEY.ru
Итоги полного редизайна KEY.ruИтоги полного редизайна KEY.ru
Итоги полного редизайна KEY.ru
Aidem
 
Философия контента
Философия контентаФилософия контента
Философия контента
Aidem
 
Cайт фотографа: рекомендации по созданию
Cайт фотографа: рекомендации по созданиюCайт фотографа: рекомендации по созданию
Cайт фотографа: рекомендации по созданию
Sasha Kutsenko
 
A brand A Story A Channel An Audience?
A brand A Story A Channel An Audience?A brand A Story A Channel An Audience?
A brand A Story A Channel An Audience?
Tribal DDB Worldwide
 
Кейс ABBYY PDF Transformer+
Кейс ABBYY PDF Transformer+ Кейс ABBYY PDF Transformer+
Кейс ABBYY PDF Transformer+
DALEE digital agency
 
Brand boost by wildtangent
Brand boost by wildtangentBrand boost by wildtangent
Brand boost by wildtangent
WildTangent
 
техно трендмилл 2015
техно трендмилл 2015 техно трендмилл 2015
техно трендмилл 2015
DDB Russia
 
Carrie Bradshaw is Back: Sarah Jessica Parker + Cosmopolitan #CannesLions 201...
Carrie Bradshaw is Back: Sarah Jessica Parker + Cosmopolitan #CannesLions 201...Carrie Bradshaw is Back: Sarah Jessica Parker + Cosmopolitan #CannesLions 201...
Carrie Bradshaw is Back: Sarah Jessica Parker + Cosmopolitan #CannesLions 201...
Ogilvy
 
Adn@it'summer - Как ленивые фронтенды себе жизнь упрощают
Adn@it'summer - Как ленивые фронтенды себе жизнь упрощают Adn@it'summer - Как ленивые фронтенды себе жизнь упрощают
Adn@it'summer - Как ленивые фронтенды себе жизнь упрощают
ADN Digital Studio
 
Москва, которой нет
Москва, которой нетМосква, которой нет
Москва, которой нет
Notamedia
 
Бизнес-завтрак "Недвижимость: возможности digital-маркетинга, которые больше ...
Бизнес-завтрак "Недвижимость: возможности digital-маркетинга, которые больше ...Бизнес-завтрак "Недвижимость: возможности digital-маркетинга, которые больше ...
Бизнес-завтрак "Недвижимость: возможности digital-маркетинга, которые больше ...
Artics Internet Solutions
 
myTarget: Mobile 2016
myTarget: Mobile 2016myTarget: Mobile 2016
myTarget: Mobile 2016
Artics Internet Solutions
 
SxSW 2015: Key Insights
SxSW 2015: Key InsightsSxSW 2015: Key Insights
SxSW 2015: Key Insights
Digitas Health LifeBrands
 
CV (Curriculum Vitae) - Ulrike Schulz
CV (Curriculum Vitae) - Ulrike SchulzCV (Curriculum Vitae) - Ulrike Schulz
CV (Curriculum Vitae) - Ulrike Schulz
Publicis Groupe
 
Adn@it'summer - Изоморфные приложения с React и Redux
Adn@it'summer - Изоморфные приложения с React и ReduxAdn@it'summer - Изоморфные приложения с React и Redux
Adn@it'summer - Изоморфные приложения с React и Redux
ADN Digital Studio
 
Newsletter №116
Newsletter №116Newsletter №116
Newsletter №116
IWILL
 
Notamedia_about us
Notamedia_about usNotamedia_about us
Notamedia_about us
Notamedia
 
What's Next in Social... — Social Data & Insight
What's Next in Social... — Social Data & InsightWhat's Next in Social... — Social Data & Insight
What's Next in Social... — Social Data & Insight
DigitasLBi
 
Dalee Pharma
Dalee PharmaDalee Pharma
Dalee Pharma
DALEE digital agency
 

Viewers also liked (20)

Дизайн в студии, дизайн в стартапе, дизайн процессов
Дизайн в студии, дизайн в стартапе, дизайн процессовДизайн в студии, дизайн в стартапе, дизайн процессов
Дизайн в студии, дизайн в стартапе, дизайн процессов
 
Итоги полного редизайна KEY.ru
Итоги полного редизайна KEY.ruИтоги полного редизайна KEY.ru
Итоги полного редизайна KEY.ru
 
Философия контента
Философия контентаФилософия контента
Философия контента
 
Cайт фотографа: рекомендации по созданию
Cайт фотографа: рекомендации по созданиюCайт фотографа: рекомендации по созданию
Cайт фотографа: рекомендации по созданию
 
A brand A Story A Channel An Audience?
A brand A Story A Channel An Audience?A brand A Story A Channel An Audience?
A brand A Story A Channel An Audience?
 
Кейс ABBYY PDF Transformer+
Кейс ABBYY PDF Transformer+ Кейс ABBYY PDF Transformer+
Кейс ABBYY PDF Transformer+
 
Brand boost by wildtangent
Brand boost by wildtangentBrand boost by wildtangent
Brand boost by wildtangent
 
техно трендмилл 2015
техно трендмилл 2015 техно трендмилл 2015
техно трендмилл 2015
 
Carrie Bradshaw is Back: Sarah Jessica Parker + Cosmopolitan #CannesLions 201...
Carrie Bradshaw is Back: Sarah Jessica Parker + Cosmopolitan #CannesLions 201...Carrie Bradshaw is Back: Sarah Jessica Parker + Cosmopolitan #CannesLions 201...
Carrie Bradshaw is Back: Sarah Jessica Parker + Cosmopolitan #CannesLions 201...
 
Adn@it'summer - Как ленивые фронтенды себе жизнь упрощают
Adn@it'summer - Как ленивые фронтенды себе жизнь упрощают Adn@it'summer - Как ленивые фронтенды себе жизнь упрощают
Adn@it'summer - Как ленивые фронтенды себе жизнь упрощают
 
Москва, которой нет
Москва, которой нетМосква, которой нет
Москва, которой нет
 
Бизнес-завтрак "Недвижимость: возможности digital-маркетинга, которые больше ...
Бизнес-завтрак "Недвижимость: возможности digital-маркетинга, которые больше ...Бизнес-завтрак "Недвижимость: возможности digital-маркетинга, которые больше ...
Бизнес-завтрак "Недвижимость: возможности digital-маркетинга, которые больше ...
 
myTarget: Mobile 2016
myTarget: Mobile 2016myTarget: Mobile 2016
myTarget: Mobile 2016
 
SxSW 2015: Key Insights
SxSW 2015: Key InsightsSxSW 2015: Key Insights
SxSW 2015: Key Insights
 
CV (Curriculum Vitae) - Ulrike Schulz
CV (Curriculum Vitae) - Ulrike SchulzCV (Curriculum Vitae) - Ulrike Schulz
CV (Curriculum Vitae) - Ulrike Schulz
 
Adn@it'summer - Изоморфные приложения с React и Redux
Adn@it'summer - Изоморфные приложения с React и ReduxAdn@it'summer - Изоморфные приложения с React и Redux
Adn@it'summer - Изоморфные приложения с React и Redux
 
Newsletter №116
Newsletter №116Newsletter №116
Newsletter №116
 
Notamedia_about us
Notamedia_about usNotamedia_about us
Notamedia_about us
 
What's Next in Social... — Social Data & Insight
What's Next in Social... — Social Data & InsightWhat's Next in Social... — Social Data & Insight
What's Next in Social... — Social Data & Insight
 
Dalee Pharma
Dalee PharmaDalee Pharma
Dalee Pharma
 

Similar to Дизайн мобильной версии сайта

Запуск мобильной версии сайта: разбор полетов (Надежда Маринчева, CoMagic)
Запуск мобильной версии сайта: разбор полетов (Надежда Маринчева, CoMagic)Запуск мобильной версии сайта: разбор полетов (Надежда Маринчева, CoMagic)
Запуск мобильной версии сайта: разбор полетов (Надежда Маринчева, CoMagic)
NetCampus
 
Я.Голуб Как перестать терять мобильный трафик
Я.Голуб Как перестать терять мобильный трафикЯ.Голуб Как перестать терять мобильный трафик
Я.Голуб Как перестать терять мобильный трафик
Виталий Дудка
 
RIW 2015 / Русский e-commerce и мобильная аудитория
RIW 2015 / Русский e-commerce и мобильная аудиторияRIW 2015 / Русский e-commerce и мобильная аудитория
RIW 2015 / Русский e-commerce и мобильная аудитория
Artiom Tsympov
 
Мастер-класс: Особенности создания продукта для мобильного веб
Мастер-класс: Особенности создания продукта для мобильного вебМастер-класс: Особенности создания продукта для мобильного веб
Мастер-класс: Особенности создания продукта для мобильного веб
Technosphere1
 
Mobile First & Responsive Design
Mobile First & Responsive DesignMobile First & Responsive Design
Mobile First & Responsive Design
Ivo Dimitrov
 
[Russian] Прогрессивные веб-приложения: по-настоящему кросс-платформенный опыт
[Russian] Прогрессивные веб-приложения: по-настоящему кросс-платформенный опыт[Russian] Прогрессивные веб-приложения: по-настоящему кросс-платформенный опыт
[Russian] Прогрессивные веб-приложения: по-настоящему кросс-платформенный опыт
Maxim Salnikov
 
Конференция сайт 2012: Мобильное приложение или мобильный сайт? Опыт крупных ...
Конференция сайт 2012: Мобильное приложение или мобильный сайт? Опыт крупных ...Конференция сайт 2012: Мобильное приложение или мобильный сайт? Опыт крупных ...
Конференция сайт 2012: Мобильное приложение или мобильный сайт? Опыт крупных ...
InfoShell
 
Artsofte Разработка мобильных приложений
Artsofte Разработка мобильных приложенийArtsofte Разработка мобильных приложений
Artsofte Разработка мобильных приложений
Artsofte IT company
 
Адаптивная верстка в веб-дизайне
Адаптивная верстка в веб-дизайнеАдаптивная верстка в веб-дизайне
Адаптивная верстка в веб-дизайне
CIT TROYA
 
Современные технологии создания сайтов: адаптивный дизайн, сайты-одностраничн...
Современные технологии создания сайтов: адаптивный дизайн, сайты-одностраничн...Современные технологии создания сайтов: адаптивный дизайн, сайты-одностраничн...
Современные технологии создания сайтов: адаптивный дизайн, сайты-одностраничн...
borovoystudio
 
Как перестать терять мобильный трафик?
Как перестать терять мобильный трафик? Как перестать терять мобильный трафик?
Как перестать терять мобильный трафик?
Виталий Дудка
 
Адаптивный дизайн
Адаптивный дизайнАдаптивный дизайн
Адаптивный дизайн
borovoystudio
 
Адаптивные сайты от Promo-S group
Адаптивные сайты от Promo-S groupАдаптивные сайты от Promo-S group
Адаптивные сайты от Promo-S group
Rasim Nasibullin
 
Зачем компаниям нужны новые мобильные приложения?
Зачем компаниям нужны новые мобильные приложения?Зачем компаниям нужны новые мобильные приложения?
Зачем компаниям нужны новые мобильные приложения?
Michael Kozloff
 
Как создать эффективный интегрированный корпоративный сайт
Как создать эффективный интегрированный корпоративный сайтКак создать эффективный интегрированный корпоративный сайт
Как создать эффективный интегрированный корпоративный сайт
Ruslan Bordak
 
Сайты на мобильных устройствах, Олег Ножичкин, лекция в Школе вебмастеров Янд...
Сайты на мобильных устройствах, Олег Ножичкин, лекция в Школе вебмастеров Янд...Сайты на мобильных устройствах, Олег Ножичкин, лекция в Школе вебмастеров Янд...
Сайты на мобильных устройствах, Олег Ножичкин, лекция в Школе вебмастеров Янд...
Yandex
 
разработка мобильных приложений веб конф 3 для фестиваля ф
разработка мобильных приложений веб конф 3 для фестиваля фразработка мобильных приложений веб конф 3 для фестиваля ф
разработка мобильных приложений веб конф 3 для фестиваля ф
CIT TROYA
 
Андрей Чипиленко - "Разработка мобильного приложения для интернет‐мага...
Андрей Чипиленко - "Разработка мобильного	   приложения	    для интернет‐мага...Андрей Чипиленко - "Разработка мобильного	   приложения	    для интернет‐мага...
Андрей Чипиленко - "Разработка мобильного приложения для интернет‐мага...
ITGinGer
 
Андрій Чипиленко "Розробка мобільного додатку для Comp-online.com.ua"
Андрій Чипиленко  "Розробка мобільного додатку для Comp-online.com.ua"Андрій Чипиленко  "Розробка мобільного додатку для Comp-online.com.ua"
Андрій Чипиленко "Розробка мобільного додатку для Comp-online.com.ua"
Lviv Startup Club
 
Введение в проектирование мобильных пользовательских интерфейсов (для ГУ-ВШЭ)
Введение в проектирование мобильных пользовательских интерфейсов (для ГУ-ВШЭ)Введение в проектирование мобильных пользовательских интерфейсов (для ГУ-ВШЭ)
Введение в проектирование мобильных пользовательских интерфейсов (для ГУ-ВШЭ)
Alexey Ivanov
 

Similar to Дизайн мобильной версии сайта (20)

Запуск мобильной версии сайта: разбор полетов (Надежда Маринчева, CoMagic)
Запуск мобильной версии сайта: разбор полетов (Надежда Маринчева, CoMagic)Запуск мобильной версии сайта: разбор полетов (Надежда Маринчева, CoMagic)
Запуск мобильной версии сайта: разбор полетов (Надежда Маринчева, CoMagic)
 
Я.Голуб Как перестать терять мобильный трафик
Я.Голуб Как перестать терять мобильный трафикЯ.Голуб Как перестать терять мобильный трафик
Я.Голуб Как перестать терять мобильный трафик
 
RIW 2015 / Русский e-commerce и мобильная аудитория
RIW 2015 / Русский e-commerce и мобильная аудиторияRIW 2015 / Русский e-commerce и мобильная аудитория
RIW 2015 / Русский e-commerce и мобильная аудитория
 
Мастер-класс: Особенности создания продукта для мобильного веб
Мастер-класс: Особенности создания продукта для мобильного вебМастер-класс: Особенности создания продукта для мобильного веб
Мастер-класс: Особенности создания продукта для мобильного веб
 
Mobile First & Responsive Design
Mobile First & Responsive DesignMobile First & Responsive Design
Mobile First & Responsive Design
 
[Russian] Прогрессивные веб-приложения: по-настоящему кросс-платформенный опыт
[Russian] Прогрессивные веб-приложения: по-настоящему кросс-платформенный опыт[Russian] Прогрессивные веб-приложения: по-настоящему кросс-платформенный опыт
[Russian] Прогрессивные веб-приложения: по-настоящему кросс-платформенный опыт
 
Конференция сайт 2012: Мобильное приложение или мобильный сайт? Опыт крупных ...
Конференция сайт 2012: Мобильное приложение или мобильный сайт? Опыт крупных ...Конференция сайт 2012: Мобильное приложение или мобильный сайт? Опыт крупных ...
Конференция сайт 2012: Мобильное приложение или мобильный сайт? Опыт крупных ...
 
Artsofte Разработка мобильных приложений
Artsofte Разработка мобильных приложенийArtsofte Разработка мобильных приложений
Artsofte Разработка мобильных приложений
 
Адаптивная верстка в веб-дизайне
Адаптивная верстка в веб-дизайнеАдаптивная верстка в веб-дизайне
Адаптивная верстка в веб-дизайне
 
Современные технологии создания сайтов: адаптивный дизайн, сайты-одностраничн...
Современные технологии создания сайтов: адаптивный дизайн, сайты-одностраничн...Современные технологии создания сайтов: адаптивный дизайн, сайты-одностраничн...
Современные технологии создания сайтов: адаптивный дизайн, сайты-одностраничн...
 
Как перестать терять мобильный трафик?
Как перестать терять мобильный трафик? Как перестать терять мобильный трафик?
Как перестать терять мобильный трафик?
 
Адаптивный дизайн
Адаптивный дизайнАдаптивный дизайн
Адаптивный дизайн
 
Адаптивные сайты от Promo-S group
Адаптивные сайты от Promo-S groupАдаптивные сайты от Promo-S group
Адаптивные сайты от Promo-S group
 
Зачем компаниям нужны новые мобильные приложения?
Зачем компаниям нужны новые мобильные приложения?Зачем компаниям нужны новые мобильные приложения?
Зачем компаниям нужны новые мобильные приложения?
 
Как создать эффективный интегрированный корпоративный сайт
Как создать эффективный интегрированный корпоративный сайтКак создать эффективный интегрированный корпоративный сайт
Как создать эффективный интегрированный корпоративный сайт
 
Сайты на мобильных устройствах, Олег Ножичкин, лекция в Школе вебмастеров Янд...
Сайты на мобильных устройствах, Олег Ножичкин, лекция в Школе вебмастеров Янд...Сайты на мобильных устройствах, Олег Ножичкин, лекция в Школе вебмастеров Янд...
Сайты на мобильных устройствах, Олег Ножичкин, лекция в Школе вебмастеров Янд...
 
разработка мобильных приложений веб конф 3 для фестиваля ф
разработка мобильных приложений веб конф 3 для фестиваля фразработка мобильных приложений веб конф 3 для фестиваля ф
разработка мобильных приложений веб конф 3 для фестиваля ф
 
Андрей Чипиленко - "Разработка мобильного приложения для интернет‐мага...
Андрей Чипиленко - "Разработка мобильного	   приложения	    для интернет‐мага...Андрей Чипиленко - "Разработка мобильного	   приложения	    для интернет‐мага...
Андрей Чипиленко - "Разработка мобильного приложения для интернет‐мага...
 
Андрій Чипиленко "Розробка мобільного додатку для Comp-online.com.ua"
Андрій Чипиленко  "Розробка мобільного додатку для Comp-online.com.ua"Андрій Чипиленко  "Розробка мобільного додатку для Comp-online.com.ua"
Андрій Чипиленко "Розробка мобільного додатку для Comp-online.com.ua"
 
Введение в проектирование мобильных пользовательских интерфейсов (для ГУ-ВШЭ)
Введение в проектирование мобильных пользовательских интерфейсов (для ГУ-ВШЭ)Введение в проектирование мобильных пользовательских интерфейсов (для ГУ-ВШЭ)
Введение в проектирование мобильных пользовательских интерфейсов (для ГУ-ВШЭ)
 

Дизайн мобильной версии сайта

  • 2. по данным исследований ФОМ и Яндекса в 2016 году На 2016 год
  • 4. Более 50 % использует моб.устройства наряду с компьютерами Как люди выходят в сеть
  • 5. Более 50 % использует моб.устройства наряду с компьютерами Как люди выходят в сеть Более 20 % выходят в сеть только с мобильных устройств
  • 6. Доля заходов с мобильных устройств
  • 7. 29% всех визитов на веб-сайты совершается с мобильных устройств Доля заходов с мобильных устройств
  • 8. 29% всех визитов на веб-сайты совершается с мобильных устройств Доля заходов с мобильных устройств Доля визитов со смартфонов составляет 2/3 визитов с моб.устройств. Эта цифра продолжает расти!
  • 9. 29% всех визитов на веб-сайты совершается с мобильных устройств Доля заходов с мобильных устройств Доля визитов со смартфонов составляет 2/3 визитов с моб.устройств. Эта цифра продолжает расти! Доля визитов с планшетов начала медленно падать (это подтверждается и падением спроса на планшеты)
  • 10. Распределение по ОС и устройствам iOS 8-9 
 — 90% айфонов Android 4.2-5.0 
 — 80% андроидов
  • 11. 95% всех визитов
 с мобильных устройств приходится на iOS и Android Распределение по ОС и устройствам iOS 8-9 
 — 90% айфонов Android 4.2-5.0 
 — 80% андроидов
  • 12. 95% всех визитов
 с мобильных устройств приходится на iOS и Android Распределение по ОС и устройствам iOS 8-9 
 — 90% айфонов Android 4.2-5.0 
 — 80% андроидов Количество визитов без JS минимально, можно сильно не париться.
 jQuery mobile используют все, включая Яндекс и других.
  • 13. В 2016 году без моб.версии нельзя юзабилити сайта на моб.устройстве напрямую связано с конверсией в этом канале Конверсия больше, если пользователю удобно на моб.устройстве нельзя игнорировать каждого третьего потенциального клиента Каждый третий пользователь заходит на сайт с моб.устройства И Яндекс и Google официально объявили о приоритете адаптированных сайтов в моб.выдаче Mobile-friendly сайты выше в моб.выдаче, чем desktop-only
  • 14. VSМоб.версия Адаптив Отдельная дизайн сайта под мобильные устройства Адаптация десктопного дизнайна под маленькие экраны
  • 15. руки не связаны интерфейсом десктопа «Сделано для моб.устройств» Моб.версия АдаптивVS
  • 16. руки не связаны интерфейсом десктопа «Сделано для моб.устройств» не загружается код для десктопа Быстро работает (меньше кода) Моб.версия АдаптивVS
  • 17. руки не связаны интерфейсом десктопа «Сделано для моб.устройств» не загружается код для десктопа Быстро работает (меньше кода) масштабируемая структура, интерфейс Удобна в расширении и развитии Моб.версия АдаптивVS
  • 18. руки не связаны интерфейсом десктопа «Сделано для моб.устройств» не загружается код для десктопа Быстро работает (меньше кода) масштабируемая структура, интерфейс Удобна в расширении и развитии отдельные дизайн макеты, верстка, интеграция Больше работ по созданию Моб.версия АдаптивVS
  • 19. руки не связаны интерфейсом десктопа «Сделано для моб.устройств» не загружается код для десктопа Быстро работает (меньше кода) масштабируемая структура, интерфейс Удобна в расширении и развитии отдельные дизайн макеты, верстка, интеграция Больше работ по созданию Моб.версия Адаптив любые изменения вносятся отдельно от десктопа Требует отдельной поддержки VS
  • 20. макеты редко нужны, верстка одна, интеграции нет Прост и быстр в разработке руки не связаны интерфейсом десктопа «Сделано для моб.устройств» не загружается код для десктопа Быстро работает (меньше кода) масштабируемая структура, интерфейс Удобна в расширении и развитии отдельные дизайн макеты, верстка, интеграция Больше работ по созданию Моб.версия Адаптив любые изменения вносятся отдельно от десктопа Требует отдельной поддержки VS
  • 21. макеты редко нужны, верстка одна, интеграции нет Прост и быстр в разработке обновлением всей верстки = обновление адаптива Легок в поддержке руки не связаны интерфейсом десктопа «Сделано для моб.устройств» не загружается код для десктопа Быстро работает (меньше кода) масштабируемая структура, интерфейс Удобна в расширении и развитии отдельные дизайн макеты, верстка, интеграция Больше работ по созданию Моб.версия Адаптив любые изменения вносятся отдельно от десктопа Требует отдельной поддержки VS
  • 22. макеты редко нужны, верстка одна, интеграции нет Прост и быстр в разработке обновлением всей верстки = обновление адаптива Легок в поддержке грузится 70% кода, который вообще не нужен Ощутимо медленнее руки не связаны интерфейсом десктопа «Сделано для моб.устройств» не загружается код для десктопа Быстро работает (меньше кода) масштабируемая структура, интерфейс Удобна в расширении и развитии отдельные дизайн макеты, верстка, интеграция Больше работ по созданию Моб.версия Адаптив любые изменения вносятся отдельно от десктопа Требует отдельной поддержки VS
  • 23. макеты редко нужны, верстка одна, интеграции нет Прост и быстр в разработке обновлением всей верстки = обновление адаптива Легок в поддержке грузится 70% кода, который вообще не нужен Ощутимо медленнее руки не связаны интерфейсом десктопа «Сделано для моб.устройств» не загружается код для десктопа Быстро работает (меньше кода) масштабируемая структура, интерфейс Удобна в расширении и развитии отдельные дизайн макеты, верстка, интеграция Больше работ по созданию Моб.версия Адаптив любые изменения вносятся отдельно от десктопа Требует отдельной поддержки по сути решение «здесь и сейчас» Не удобно развивать VS
  • 24. макеты редко нужны, верстка одна, интеграции нет Прост и быстр в разработке обновлением всей верстки = обновление адаптива Легок в поддержке грузится 70% кода, который вообще не нужен Ощутимо медленнее руки не связаны интерфейсом десктопа «Сделано для моб.устройств» не загружается код для десктопа Быстро работает (меньше кода) масштабируемая структура, интерфейс Удобна в расширении и развитии отдельные дизайн макеты, верстка, интеграция Больше работ по созданию Моб.версия Адаптив любые изменения вносятся отдельно от десктопа Требует отдельной поддержки по сути решение «здесь и сейчас» Не удобно развивать либо многое нужно менять при перестроении Не высокое юзабилити VS
  • 25. Моб.версия АдаптивVS Оптимальна для сложных, больших, функциональных сайтов — интернет-магазины — крупные порталы — площадки (сервисы) — везде, где много функционала
  • 26. Моб.версия АдаптивVS Оптимальна для сложных, больших, функциональных сайтов Оптимальна для простых, информационных, мало меняющихся сайтов — интернет-магазины — крупные порталы — площадки (сервисы) — везде, где много функционала — корпоративные сайты — лэндинги — сайты СМИ — простые инф. сайты
  • 27. VSm.site.com RESS Выделение мобильной версии на поддомен Отправка нужного кода
 в зависимости от устройства
  • 28. m.site.com RESS отдельный URL — отдельная страница. Все просто В лоб, но привычно и надежно VS
  • 29. m.site.com RESS отдельный URL — отдельная страница. Все просто В лоб, но привычно и надежно при входе с мобильного без m. надо спрашивать Надо предлагать переход VS
  • 30. m.site.com RESS отдельный URL — отдельная страница. Все просто В лоб, но привычно и надежно при входе с мобильного без m. надо спрашивать Надо предлагать переход по сути m.site.com — отельный сайт Разные URL VS
  • 31. m.site.com RESS отдельный URL — отдельная страница. Все просто В лоб, но привычно и надежно при входе с мобильного без m. надо спрашивать Надо предлагать переход по сути m.site.com — отельный сайт Разные URL проблемы, когда part.site.com и т.д. Сложности, когда поддомены VS
  • 32. m.site.com RESS можно делаться, нет проблем с индексацией Один и тот же URL отдельный URL — отдельная страница. Все просто В лоб, но привычно и надежно при входе с мобильного без m. надо спрашивать Надо предлагать переход по сути m.site.com — отельный сайт Разные URL проблемы, когда part.site.com и т.д. Сложности, когда поддомены VS
  • 33. m.site.com RESS можно делаться, нет проблем с индексацией Один и тот же URL нет предложений «перейти на моб.версию» и т.п. Открывается сразу отдельный URL — отдельная страница. Все просто В лоб, но привычно и надежно при входе с мобильного без m. надо спрашивать Надо предлагать переход по сути m.site.com — отельный сайт Разные URL проблемы, когда part.site.com и т.д. Сложности, когда поддомены VS
  • 34. m.site.com RESS можно делаться, нет проблем с индексацией Один и тот же URL нет предложений «перейти на моб.версию» и т.п. Открывается сразу отдельный URL — отдельная страница. Все просто В лоб, но привычно и надежно при входе с мобильного без m. надо спрашивать Надо предлагать переход по сути m.site.com — отельный сайт Разные URL проблемы, когда part.site.com и т.д. Сложности, когда поддомены можно доверять и не беспокоиться Так делают Яндекс, Гугл и другие VS
  • 35. m.site.com RESS можно делаться, нет проблем с индексацией Один и тот же URL нет предложений «перейти на моб.версию» и т.п. Открывается сразу отдельный URL — отдельная страница. Все просто В лоб, но привычно и надежно при входе с мобильного без m. надо спрашивать Надо предлагать переход по сути m.site.com — отельный сайт Разные URL проблемы, когда part.site.com и т.д. Сложности, когда поддомены можно доверять и не беспокоиться Так делают Яндекс, Гугл и другие плюсы очевидны, очевидных минусов нет Самый современный подход сейчас VS
  • 36. стандартные приемы в мобильных интерфейсах «Люди привыкли» Очень поможет
  • 37. 1 / 4 Логотип, меню, поиск — до 3-4 объектов Аскетичная шапка
  • 38. 2 / 4 Логотип, меню, поиск — до 3-4 объектов Аскетичная шапка
  • 39. 3 / 4 Логотип, меню, поиск — до 3-4 объектов Аскетичная шапка
  • 40. 4 / 4 Логотип, меню, поиск — до 3-4 объектов Аскетичная шапка
  • 41. Связной 1 / 3 Сдвиг или переход; скролл внутри меню Меню — это бургер Логотип, меню, поиск — до 3-4 объектов Аскетичная шапка
  • 42. Техносила 2 / 3 Сдвиг или переход; скролл внутри меню Меню — это бургер Логотип, меню, поиск — до 3-4 объектов Аскетичная шапка
  • 43. Wallmart 3 / 3 Сдвиг или переход; скролл внутри меню Меню — это бургер Логотип, меню, поиск — до 3-4 объектов Аскетичная шапка
  • 44. Яндекс.Маркет 1 / 2 Сдвиг или переход; скролл внутри меню Меню — это бургер Логотип, меню, поиск — до 3-4 объектов Аскетичная шапка Переход на следующий экран / страницу Полоса со стрелкой вправо — переход
  • 45. iOS 2 / 2 Сдвиг или переход; скролл внутри меню Меню — это бургер Логотип, меню, поиск — до 3-4 объектов Аскетичная шапка Переход на следующий экран / страницу Полоса со стрелкой вправо — переход
  • 46. Amazon 1 / 2 Сдвиг или переход; скролл внутри меню Меню — это бургер Логотип, меню, поиск — до 3-4 объектов Аскетичная шапка Переход на следующий экран / страницу Полоса со стрелкой вправо — переход Раскрытие вложенного списка; без перехода Полоса со стрелкой вниз — раскрытие
  • 47. Amazon 2 / 2 Сдвиг или переход; скролл внутри меню Меню — это бургер Логотип, меню, поиск — до 3-4 объектов Аскетичная шапка Переход на следующий экран / страницу Полоса со стрелкой вправо — переход Раскрытие вложенного списка; без перехода Полоса со стрелкой вниз — раскрытие
  • 48. Яндекс.Маркет 1 / 2 Сдвиг или переход; скролл внутри меню Меню — это бургер Логотип, меню, поиск — до 3-4 объектов Аскетичная шапка Переход на следующий экран / страницу Полоса со стрелкой вправо — переход Раскрытие вложенного списка; без перехода Полоса со стрелкой вниз — раскрытие Открытие слоя, модального окна или действие выбора Полоса без стрелки — слой / действие
  • 49. Яндекс.Маркет 2 / 2 Сдвиг или переход; скролл внутри меню Меню — это бургер Логотип, меню, поиск — до 3-4 объектов Аскетичная шапка Переход на следующий экран / страницу Полоса со стрелкой вправо — переход Раскрытие вложенного списка; без перехода Полоса со стрелкой вниз — раскрытие Открытие слоя, модального окна или действие выбора Полоса без стрелки — слой / действие
  • 50. Сдвиг или переход; скролл внутри меню Меню — это бургер Логотип, меню, поиск — до 3-4 объектов Аскетичная шапка iOS Переход на следующий экран / страницу Полоса со стрелкой вправо — переход Раскрытие вложенного списка; без перехода Полоса со стрелкой вниз — раскрытие Открытие слоя, модального окна или действие выбора Полоса без стрелки — слой / действие Однозначный выбор; видно, что выбрано Полоса со значением — выбрано 1 / 1
  • 51. Расшифровка работы функции iOS 1 / 1 Подпись под полосой — объяснение
  • 52. Расшифровка работы функции Яндекс.Маркет Другой цвет текста или выравнивание по центру 1 / 1 Подпись под полосой — объяснение Полоса другого стиля — показать больше
  • 53. Расшифровка работы функции Подпись под полосой — объяснение Яндекс.Маркет Другой цвет текста или выравнивание по центру Полоса другого стиля — показать больше Объяснение логической группы строк Заголовок над полосами — группа 1 / 1
  • 54. Расшифровка работы функции Подпись под полосой — объяснение Яндекс.Маркет Другой цвет текста или выравнивание по центру Полоса другого стиля — показать больше Объяснение логической группы строк Заголовок над полосами — группа Множественный выбор; видно, что выбрано Вторая строка в полосе — выбранное 1 / 1
  • 55. Расшифровка работы функции Подпись под полосой — объяснение iOS Другой цвет текста или выравнивание по центру Полоса другого стиля — показать больше Объяснение логической группы строк Заголовок над полосами — группа Множественный выбор; видно, что выбрано Вторая строка в полосе — выбранное 1 / 2 Разделение разных типов информации на группы Зонирование фоном — понимание
  • 56. Расшифровка работы функции Подпись под полосой — объяснение Яндекс.Маркет Другой цвет текста или выравнивание по центру Полоса другого стиля — показать больше Объяснение логической группы строк Заголовок над полосами — группа Множественный выбор; видно, что выбрано Вторая строка в полосе — выбранное 2 / 2 Разделение разных типов информации на группы Зонирование фоном — понимание
  • 57. Расшифровка работы функции Подпись под полосой — объяснение Другой цвет текста или выравнивание по центру Полоса другого стиля — показать больше Объяснение логической группы строк Заголовок над полосами — группа Множественный выбор; видно, что выбрано Вторая строка в полосе — выбранное 1 / 1 Разделение разных типов информации на группы Зонирование фоном — понимание Разделение разных типов информации на группы Привычное поведение поиска Курсор в поле Запрос введен
  • 58. бренд–коммуникация с пользователем через интерфейс на примере сети магазинов цифровой техники «КЕЙ» Дизайн–язык
  • 62. Шапка Заголовок фирменным шрифтом Кнопки фирменным цветом Консистенция с полной версией: цена, баллы
  • 63. Шапка Заголовок фирменным шрифтом Кнопки фирменным цветом Консистенция с полной версией: цена, баллы Кнопка акцентным фирменным цветом
  • 64. Шапка Заголовок фирменным шрифтом Кнопки фирменным цветом Консистенция с полной версией: цена, баллы Кнопка акцентным фирменным цветом Выбранное в фильтре фирменным цветом
  • 65. Хорошего и не очень хорошего дизайна мобильных версий Примеры
  • 77. Всё время держите в голове при дизайне моб.версии Помните
  • 78. Отсекайте смелее, оставляйте только главное Мало места и это прекрасно! Главное
  • 79. Отсекайте смелее, оставляйте только главное Мало места и это прекрасно! Главное минимум элементов в один ряд - надежно Все по строкам
  • 80. Отсекайте смелее, оставляйте только главное Мало места и это прекрасно! Главное минимум элементов в один ряд - надежно Все по строкам Элементы крупные, зоны безопасности большие Тапать будут пальцами
  • 81. Отсекайте смелее, оставляйте только главное Мало места и это прекрасно! Главное минимум элементов в один ряд - надежно Все по строкам Элементы крупные, зоны безопасности большие Тапать будут пальцами Лучше слои или отдельные страницы Минимум всплывашек
  • 82. Отсекайте смелее, оставляйте только главное Мало места и это прекрасно! Главное минимум элементов в один ряд - надежно Все по строкам Элементы крупные, зоны безопасности большие Тапать будут пальцами Лучше слои или отдельные страницы Минимум всплывашек
  • 83. Отсекайте смелее, оставляйте только главное Мало места и это прекрасно! Главное минимум элементов в один ряд - надежно Все по строкам Элементы крупные, зоны безопасности большие Тапать будут пальцами Лучше слои или отдельные страницы Минимум всплывашек
  • 84. все, что при хавере надо выносить на Хавера нет, забудьте Главное
  • 85. все, что при хавере надо выносить на Хавера нет, забудьте Главное
  • 86. все, что при хавере надо выносить на Хавера нет, забудьте Главное по страницам или в рамках слоев по шагам Хлебных крошек нет — навигация
  • 87. все, что при хавере надо выносить на Хавера нет, забудьте Главное по страницам или в рамках слоев по шагам Хлебных крошек нет — навигация
  • 88. все, что при хавере надо выносить на Хавера нет, забудьте Главное по страницам или в рамках слоев по шагам Хлебных крошек нет — навигация Можно смело использовать, уже привычно Горизонтальный скролл блоков
  • 89. все, что при хавере надо выносить на Хавера нет, забудьте Главное по страницам или в рамках слоев по шагам Хлебных крошек нет — навигация Можно смело использовать, уже привычно Горизонтальный скролл блоков случайные нажатия, использование на бегу, один так и звонок и т.д. Помните, что устройство в руке
  • 90. все, что при хавере надо выносить на Хавера нет, забудьте Главное по страницам или в рамках слоев по шагам Хлебных крошек нет — навигация Можно смело использовать, уже привычно Горизонтальный скролл блоков случайные нажатия, использование на бегу, один так и звонок и т.д. Помните, что устройство в руке
  • 91. от 320 до 1024 320-640 разрешение 80% пользователей Сначала под 320-640 при повороте устройства элементы будут растягиваться + может увеличиваться количество элементов в строке (например, товарная сетка на 320-640 — 2 товара в строке, на 1024 — до 4) до 1024 резина + адаптив 1024 планшет 320 смартфон Достаточно подготовить макеты на 640 + визуальную нотацию изменения интерфейса при просмотре на 1024
  • 92. Не забывайте про возврат Обычно в футере ссылка «Полная версия». Можно продублировать в меню. На мобильной версии переключатель на полную В футере ссылка «Мобильная версия На полной версии переключатель на мобильную Существуют сценарии, когда пользователю нужно переключиться на полную или мобильную версию. Не стоит этим пренебрегать.
  • 93. Можно детально изучать, разбирать на дизайн-решения и использовать Хорошие примеры afisha.yandex.ru avia.yandex.ru market.yandex.ru etsy.com cian.ru nike.com Мобильная версия apple.com tehnosila.ru meduza.io kremlin.ru tinkoff.ru mel.fm Адаптив