Mobile Mockup

Что такое Mobile Mockup?

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

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

Лучшие сценарии использования

Создание Mobile Mockup

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

В редакторе проекта откройте вкладку Контент и добавьте по одному изображению на экран:

• Любой формат изображения, который открывает браузер, включая JPG, PNG и WebP. PDF тоже подойдёт: каждая страница становится отдельным экраном
• Одно изображение — один экран, поэтому снимок на всю высоту загружается как есть, без обрезки
• Загружайте несколько файлов сразу или импортируйте один по URL
• У PDF есть предел — 200 страниц и 50 МБ на файл, а ссылки внутри него становятся hotspots на том экране, где они были
• Скриншоты автоматически оптимизируются для быстрой загрузки

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

Порядок во вкладке Контент — это порядок, в котором их проходят посетители:

• Перетащите экран, чтобы переместить его
• Дайте каждому экрану название — оно показывается в счётчике, так что счётчик придётся оставить включённым, иначе названия не видно
• Удалите экран, который больше не нужен, или очистите сразу все из меню «Контент»
• Добавляйте новые экраны в любое время

Шаг 3: Настройте экран и прокрутку

Во вкладке Настройки задайте, как выглядит дисплей и как он двигается:

• Цвет устройства: тонирует корпус телефона, а белый — это модель ровно такой, какой её собрали
• Фон экрана: цвет за вашим скриншотом
• Яркость, контраст и насыщенность экрана: все три начинаются с 1 — это изображение ровно таким, каким вы его загрузили
• Счётчик экранов: показывать или скрыть позицию и название
• Скорость и плавность прокрутки: насколько далеко уходит контент за одно движение колеса и как быстро он останавливается

Шаг 4: Добавьте hotspots

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

Настройки Mobile Mockup

У дисплея и прокрутки свои разделы во вкладке Настройки. Фон, док со ссылками, зум и вращение используют те же панели, что и остальные типы проектов.

Как перемещаются посетители

Здесь два независимых движения: контент двигается внутри экрана, а экраны сменяются по одному. Одно не запускает другое.

Чего он не делает

Часть этого сделана намеренно, часть ещё не построена. В любом случае лучше знать заранее, до записи демо:

• Страница PDF на телефоне почти никогда не прокручивается. Подогнанная по ширине дисплея, она не дотягивает до его высоты — и встаёт по центру с полосами сверху и снизу. Прокручиваются здесь снимки во всю длину.
• Прокрутка до низа экрана не переводит на следующий. Смена экрана — всегда осознанное действие.
• На дисплее один экран за раз. Остальные вокруг не видны.
• Раздел «Экран» подкрашивает корпус телефона, но чистый белый означает заводскую отделку, поэтому для белого корпуса берите #fefefe.
• Аппарат один, флагманский телефон. Другой модели и планшета пока нет.

Как сделать хороший Mobile Mockup

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