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

Desktop Mockup

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

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

Что такое Desktop Mockup?

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

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

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

Лендинги

Покажите лендинг целиком — так, как он прокручивается в жизни, не отправляя никого на живой адрес

Туры по продукту

Одна функция на экран, в том порядке, в котором вы хотите их показать

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

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

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

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

Портфолио веб-дизайна

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

Скриншоты приложений

Покажите, как выглядит веб-приложение, не требуя регистрации

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

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

Создание Desktop Mockup

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

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

    • Снимайте на десктопной ширине, около 1440 px, и оставляйте изображение таким же высоким, как страница
    • Или добавьте живой экран со ссылкой на страницу

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

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

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

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

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

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

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

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

Настройки

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

Общее

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

Устройство

«Цвет устройства»: белый оставляет родное алюминиевое покрытие ноутбука, а любой другой цвет тонирует корпус, но никогда не экран. «Угол экрана», от 0 до 120 (по умолчанию 90), задаёт, насколько открыта крышка: 0 — закрыта, 90 — стоит вертикально, а больше 90 — откинута назад, как у ноутбука на столе.

Экран

«Фон экрана» заполняет дисплей за вашим скриншотом, а также полосы сверху и снизу, если скриншот короткий. «Яркость экрана» (от 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 · Движения камеры для каждого типа

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

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

Советы

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