Перейти к основному содержанию
/Документация

Mobile Mockup

Разместите скриншоты вашего приложения на экране 3D-телефона. Посетители прокручивают каждый скриншот внутри экрана и переключаются между ними через навигационный док или стрелками на клавиатуре.

Создать Mobile Mockup
Открыть интерактивную версию

Что такое Mobile Mockup?

Проект «Mobile Mockup» показывает ваши скриншоты на 3D-телефоне. Одно изображение — один экран. Высокие скриншоты не уменьшаются, чтобы поместиться: посетитель прокручивает их внутри дисплея так же, как прокручивал бы настоящее приложение. Загрузите пять скриншотов — получите пять экранов, которые посетитель проходит по одному.

  • Один высокий скриншот на экран, прокручиваемый внутри дисплея телефона
  • Колесо мыши, трекпад или вертикальное перетаскивание по устройству прокручивают текущий экран
  • Док и стрелки на клавиатуре переключают экраны
  • Перетащите фон, чтобы повернуть телефон, и включите кнопки масштабирования в доке, чтобы прочитать мелкий текст
  • Hotspots в любой точке скриншота, включая области, до которых посетителю нужно долистать
  • Живой экран: вставьте ссылку, и внутри дисплея загрузится настоящая страница
  • Счётчик экранов, который показывает и название экрана, плюс док ссылок

Для чего подходит

Демо приложений

Покажите мобильное приложение экран за экраном, не отправляя никого в магазин приложений

Онбординг

Один шаг на экран — в том порядке, в котором их встретит новый пользователь

Ревью прототипов

Отправьте клиенту экспорт дизайна и дайте пролистать каждый экран целиком

Презентации клиентам

Покажите мобильную версию внутри коммерческого предложения или кейса

Портфолио мобильного дизайна

Соберите приложения и мобильные сайты, которые вы спроектировали, по одному экрану на каждый

Адаптивные виды

Покажите телефонную версию сайта — рядом с десктопной или отдельно

Файлы и ограничения

  • Изображения или PDF. Одно изображение — один экран, и каждая страница PDF становится одним экраном.
  • В PDF может быть до 200 страниц, а весить он может до 50 МБ. Ссылки внутри него становятся hotspots на тех экранах, где они были: веб-ссылка открывает страницу, а ссылка внутри документа ведёт на соответствующий экран.
  • Скриншоты подгоняются под ширину дисплея. Очень большой снимок уменьшается пропорционально и никогда не обрезается, поэтому снимок на всю длину сохраняется целиком.
  • Загружайте несколько файлов сразу или используйте «Импортировать по URL», чтобы добавить изображение по веб-адресу.
  • Добавьте живой экран, чтобы в дисплее загружалась настоящая веб-страница, а не её картинка. Страница должна разрешать встраивание; редактор проверяет это, когда вы её добавляете.
  • Загрузки учитываются в хранилище рабочего пространства: 50 МБ на Free, 10 ГБ на Pro, 25 ГБ на Business.

Создание Mobile Mockup

  1. 1. Загрузите скриншоты

    Откройте вкладку «Содержимое» и добавьте по одному вертикальному снимку на всю длину для каждого экрана.

    • Оставляйте каждое изображение таким же высоким, каким экран является на самом деле: ширина подгоняется под дисплей, а высота — это то, что прокручивает посетитель
    • Или добавьте живой экран со ссылкой на страницу

  2. 2. Расставьте и назовите экраны

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

  3. 3. Добавьте hotspots

    На вкладке «Hotspots» разместите на скриншоте кликабельные точки, которые открывают ссылку, переходят на другой экран, показывают подсказку или открывают всплывающее окно. Hotspot привязан к изображению целиком, поэтому он прокручивается вместе с тем участком экрана, которому принадлежит.

  4. 4. Настройте устройство и экран

    В «Настройках», в разделе «Общее», выберите цвет телефона, настройте экран и прокрутку.

  5. 5. Поделитесь

    Сохраните проект, затем скопируйте ссылку или код для встраивания на вкладке «Поделиться».

Настройки

Всё, что описано ниже, находится на вкладке «Настройки» редактора и сгруппировано по подвкладкам, где это лежит: «Общее», «Сцена» или «Камера».

Общее

У любого типа вверху находится «Основная информация»: название и описание проекта. Ниже идут настройки самого объекта.

Устройство

«Цвет устройства»: белый оставляет родную отделку телефона, а любой другой цвет заменяет цвет корпуса, но никогда не экрана.

Экран

«Фон экрана» заполняет дисплей за вашим скриншотом, а также полосы сверху и снизу, если скриншот короткий. «Яркость экрана» (от 0,2 до 1,6), «Контраст экрана» (от 0,5 до 2) и «Насыщенность экрана» (от 0 до 2) начинаются с 1 — это изображение ровно таким, каким вы его загрузили; при насыщенности 0 оно становится чёрно-белым. «Показывать счётчик экранов», включённый по умолчанию, показывает название и позицию, например Цены · 2 / 5.

Прокрутка

«Скорость прокрутки» (от 0,25 до 3, по умолчанию 1) — насколько далеко один поворот колеса сдвигает скриншот. «Плавность прокрутки» (от 0,02 до 0,5, по умолчанию 0,12) — как быстро он догоняет: чем выше значение, тем точнее он следует за колесом, чем ниже — тем плавнее скользит до остановки.

Сцена

То, что окружает объект, и эффект «Реализм» поверх всего кадра.

Фон

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

Реализм

Плёночное зерно поверх кадра (от 0 до 100, по умолчанию 15) и сколько его ложится на экран, статичное или анимированное зерно, виньетка, тень, которую телефон отбрасывает на поверхность (с её плотностью и мягкостью), и «Отражение экрана» — насколько стекло отражает (0 — матовое, по умолчанию 40).

Камера

Откуда начинается обзор и насколько зрители могут его менять.

Камера

«Начальный масштаб» — от 0,5 до 2, но вид никогда не открывается так близко, чтобы устройство вышло из кадра. «Мин. масштаб» (от 0,3 до 1) и «Макс. масштаб» (от 1 до 3) ограничивают кнопки масштабирования в доке, поэтому они появляются, только пока эти кнопки включены. «Горизонтальное вращение» (до 75 градусов в каждую сторону) и «Вертикальный наклон» (до 40) направляют камеру. «Вращение перетаскиванием», включённое по умолчанию, позволяет зрителям поворачивать телефон, перетаскивая фон. «Сбросить настройки» возвращает масштаб, его пределы и оба угла к значениям по умолчанию, а «Вращение перетаскиванием» оставляет как есть.

Hotspots, меню и звуки

Рядом с «Файлами» на вкладке «Содержимое» есть ещё три подвкладки: «Hotspots», «Меню» и «Sounds».

Hotspots

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

Hotspot может вести на другую страницу, открывать ссылку, показывать подсказку или открывать всплывающее окно. Как работают hotspots

Sounds

К любому типу проекта можно добавить фоновую музыку. Загружайте треки в форматах MP3, M4A, WAV, OGG или FLAC длительностью до 20 минут каждый. Они сжимаются примерно до 1 МБ на минуту и учитываются в хранилище рабочего пространства. Плейлист можно зациклить, задать громкость и показать рядом с доком небольшой плеер. Автовоспроизведение начинается с первого касания или нажатия клавиши зрителем, потому что до этого браузеры блокируют звук.

Снимите видео в Studio

Любой тип проекта можно снять в Studio. Откройте вкладку «Studio» проекта, выберите движения камеры, подготовленные для этого типа, и превратите проект в видео, GIF, статичное изображение или отдельную страницу, которой можно поделиться. Studio берёт файлы и настройки этого проекта, поэтому всё, что вы задали здесь, переносится туда. Документация по Studio · Движения камеры для каждого типа

Текущие ограничения

  • Страница PDF на телефоне почти никогда не прокручивается: подогнанная по ширине этого дисплея, она всё равно короче его и встаёт по центру с полосами сверху и снизу. Прокручиваются здесь снимки на всю длину.
  • Прокрутка до низа экрана не переводит на следующий. Смена экрана — всегда осознанное действие.
  • Модель телефона одна. Для ноутбука создайте Desktop Mockup. Планшета нет.
  • На живом экране посетители прокручивают настоящую страницу внутри дисплея, а hotspots остаются там, где вы их поставили, и не прокручиваются вместе со страницей.
  • В Studio живой экран выглядит как пустой фон экрана, потому что настоящую страницу записать нельзя.

Советы

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