3D UX/UI mockup: сайт в ноутбуке, приложение в телефоне

Вы отправляете ссылку на файл, и клиент видит холст с сорока фреймами. Где главная страница, непонятно. Он куда-то кликает, мимо проплывает чужой курсор, и вкладка закрывается. На созвон клиент приходит, так ничего и не посмотрев, а первые десять минут уходят на объяснение инструмента, а не дизайна. Ссылка на файл вроде бы экономит время, но на деле его отнимает.

Дизайн-файл — место, где идёт работа, а не где её смотрят. Человеку, который не открывает его каждый день, нужна страница, которая ведёт себя как страница. Именно это и есть mockup сайта в i3Dify: ваши скриншоты на экране 3D-ноутбука, по одной ссылке и без всякой установки.

Скриншот всей страницы прокручивается прямо в экране ноутбука

Плоские рендеры обрезают. Лендинг высотой 6000 пикселей, вставленный в рамку устройства, либо обрывается на первом экране, либо ужимается так, что основной текст уже не прочитать. Здесь изображение подгоняется по ширине дисплея и прокручивается по вертикали, как страница в браузере, поэтому весь дизайн читается сверху вниз в полную ширину. Клиент видит сайт таким, каким его увидит посетитель.

Управление разделено намеренно. Тянете экран или крутите колесо — прокручивается страница. Тянете фон — поворачивается ноутбук. Стрелки на клавиатуре и док переключают экраны, а счётчик над доком показывает название, которое вы дали каждому из них. Когда вы ведёте клиента по страницам вживую на созвоне, «Главная», «Цены» и «Оформление заказа» оказываются там, где он их ждёт.

Hotspot привязан к скриншоту, а не висит поверх него

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

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

Хитрость есть только в одном шаге — в снятии скриншота

Загрузите по одному изображению на экран, перетащите их в том порядке, в каком будете показывать, подпишите каждый и опубликуйте. Вот и вся сборка, без кода и без плагинов. Ошибаются обычно на экспорте: просмотрщику нужна полная высота страницы, а не то, что поместилось в окне в момент нажатия клавиши.

В Chrome это команда Capture full size screenshot в командном меню DevTools. В Figma экспортируйте фрейм в его настоящую высоту. Подойдёт и PDF, каждая страница которого станет отдельным экраном. Правда, на телефоне страница, подогнанная по ширине дисплея, уже не заполняет его по высоте, поэтому она стоит по центру с полями сверху и снизу и не прокручивается.

Снимайте в 1x, а не в 2x. Просмотрщик всё равно уменьшает изображение перед тем, как положить его на 3D-экран, так что лишние пиксели ничего не дают и только заставляют ждать того, кто открыл ссылку. К тому же они съедают 50 МБ бесплатного тарифа, а набор длинных экранов дашборда добирается до лимита быстрее, чем кажется.

Ссылка переживает очередной раунд правок

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

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

Покажите следующую партию экранов на ноутбуке и телефоне.