Количество купленных устройств #цифры

Вышел Скетч 49: появилась функция переходов между экранами

Сегодня большой день. Мы ждали этого уже года два: Скетч наконец научился делать интерактивные прототипы из коробки, без внешних сервисов. Функция доступна в версии 49, которая вышла сегодня.

Как это работает
Механика полностью идентична той, что была в Invision’s Prototype, и это хорошо: делать прототипы, перетаскивая стрелочку на нужный экран — это самый интуитивный метод из возможных.

1. Выбираем слой, который будет выполнять функцию хотспота (области нажатия), нажимаем новую кнопку Link или горячую клавишу W.

2. Тянем оранжевую стрелочку на нужный артборд. Объект, выступающий в качестве хотспота, получает новый значок в списке слоёв. Также хотспоты можно вставлять как отдельные объекты. Появился новый тип Hotspot.

3. Выбираем анимацию перехода из 4 вариантов сдвигов. Всё пока очень примитивно.

4. Тестируем прототип, нажимая новую кнопку Preview. Открывается окно, похожее на браузер, в нём можно покликать или сразу перейти на нужные экраны через меню. Анимация в окне Preview мерзко моргает и движется дёргано. В плане настройки анимаций Марвел пока значительно превосходит Скетч.

5. Если жёлтые стрелочки мешают, их можно скрыть тогл-режимом Ctrl + F. Глеб Кушедов из чата предлагает называть функцию «Fucking Arrows». Тоже хороший вариант мнемоники. Я же переназначил на Alt + Cmd + P(rototyping).

6. Огонь-фича: Прототип можно шерить в виде ссылки на Скетч Клауд.

Хотспоты на Скетч Клауде работают, только если зайти на экран и нажать маленькую незаметную иконку Play в верхнем правом углу. Лишнее действие, хотспоты должны работать сразу, а Play можно превратить в полноэкранный режим.

Вот мой тестовый пример: sketch.cloud/s/dgbaL
Можно скачать исходник.

Я обновился и не наблюдаю никаких проблем.

Начали выходить апдейты для плагинов. Апдейт для Раннера уже вышел.

[обновлено] Ребята в @sketchchat жалуются, что Скетч крэшится при входе. Причиной этому некорректно работающие плагины. У кого-то крэшится Midnight, у кого-то Paddy. Оба плагина проверил, работают корректно. Paddy пока не рекомендуется использовать, потому что он плохо себя вёл даже на 48.2.

Anima Auto Layout после обновления гарантированно поломается.

Большой плюс в том, что макет загружается на Скетч Клауд значительно быстрее, чем на Марвел. Но эпоха, когда надо было расставлять хотспоты в веб-интерфейсе, закончилась. Invision-like инструменты уйдут в прошлое, если не найдут новую нишу.

Вердикт
Криво-косо, но нативные прототипы работают. Для первой версии очень даже неплохо. Шероховатости анимации и лишнюю кнопку Play в облаке наверняка скоро починят.

#новая_функция  #для_профи

Апдейт: Ранее я писал, что плагин Midnight крэшит Скетч. Это оказалось не так. Техподдержка Скетча рекомендует отключать Paddy. Если ловишь стабильный крэш, пиши @okunev и я постараюсь помочь.

Следом за Скетчем обновился Зеплин

Теперь хотспоты есть и в нём. Чтобы они были кликабельными, в Зеплине нужно зажимать Shift.

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

Марвел окончательно отходит на второй план, даже если они внедрят хотспоты у себя. Раньше разработчики получали от меня две ссылки: на сценарий в Зеплине и на Марвел-прототип. Теперь всё уместится в одну ссылку на Зеплин.

Делать прототипы в Скетч Клауде, пока он не обладает всеми  измерительными возможностями Зеплина и клёвой анимацией Марвела, я бы тоже не стал.

Это ещё не все классные новости последнего обновления. Про облачные библиотеки поговорим завтра.

#новая_функция  #Зеплин  #Марвел

Как работает Миррор в новом Скетче

Миррор — полезнейшая функция Скетча (не путать с плагином Magic Mirror).

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

Если регулярно делаешь дизайн, это приложение имеет все шансы занять место на первом экране.

А с появлением хотспотов Миррор вообще выводит создание прототипов на новый уровень эффективности. Для мобильного дизайна это гораздо удобнее и правильнее, чем открывать окно Preview в Скетче.

На первый взгляд кажется, что эта функция просто отсутствует в новом Скетче (и это упущение дизайна). Однако, кнопка Connect 'Device name' появляется в верхнем правом углу, если сделать сдедущее:

1. Подключить Айфон к той же вайфай-сети, к которой подключен Мак.

2. Запустить Миррор на мобильном и оставить его экран открытым.

3. Нажать Connect 'Device name' На экране Айфона появится текущий артборд. Если не появился, закрой и заново открой Скетч.

В предыдущих версиях Миррор у меня работал только по проводу. Теперь хорошо работает и по вайфаю. Спасибо @stiques за наводку.

Скачать Миррор: itunes.apple.com/us/app/sketch-mirror/id677296955

#первые_шаги — посты  для начинающих

26-31 марта по вечерам пройдёт серия онлайн-трансляций Design Line

Партнёрский материал

Дизайн-лайн — это интенсив с топовыми российскими дизайнерами.

Цена билета до 10 марта: 1500 р.

Тебе как читателю Скетч-дизайнера доступен промо-код, который позволит взять билет за 1275 р. (экономия 225 р.)

Промо-код: SKETCHDESIGNER

Кто выступает
Ветров, mail.rumail.ru
Шишкин, Redmadrobot
Мосякин, Выс. шк. брендинга
Башев, Dilletant
Ковальский, Creative People
Квасников, Fantasy Interactive
    ...и другие крутые спикеры.

Кто разбирает работы
Цыганков, AIC
Медвинский, CreativePeople

Ты сможешь задать им вопросы через телеграм-чат.

Заказать билет: goo.gl/vZxbTh

—
#для_профи — рубрика для прожжённых

#GIF №11 - Каркасы: быстрый способ контролировать отступы

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

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

1. Создаём символ каркаса
Его размер такой же, как у экрана. Серыми блоками на нём размечены основные объекты, такие как шапка или место для иконки.

2. Вставляем каркас на новый артборд
На нём будем делать макет. Используй Runner и назначь клавишу на вставку символов: Ctrl + Y.

3. Поверх каркаса вставляем символы-блоки
Выравниваем их по разметке каркаса.

4. Скрываем каркас
Если не нужен, скрываем его клавишей Shift + Cmd + H. Повторное нажатие показывает каркас обратно.

Если будут правки в каркасе, будет легко обновить положение всех символов, поскольку они перестанут ложиться в обновлённый каркас.

—
#первые_шаги — рубрика для начинающих
#идеология_символов

Скетч-дизайнер / Каналы

Открыл на сайте новый раздел, в котором рассказал о телеграм-каналах, которые читаю сам. В раздел попали каналы про дизайн интерфейсов и смежные с ним темы.

sketchdesigner.ru/channels

Получилось 19 каналов. Рассказал об их авторах и о том, зачем их стоит читать. Если канал не проходит мой фильтр качества, я немедленно отписываюсь и удаляю его из раздела, несмотря на хорошие отношения с автором.

Я не рекламирую каналы в ущерб своим читателям, потому что понимаю, что телеграм-каналов про дизайн стало слишком много и охватить все заслуживающие внимания невозможно. Однако, я открыт для тех авторов, которые создают свой собственный классный контент и хотят о нём рассказать.

#каналы

#дизайн_паттерны №1: Лендинг

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

sketchdesigner.ru/design/patterns/landing

1. Делать фокус на торговое предложение
Ограничить выбор и дать понятный коробочный продукт, не отягощая лендинг кучей настроек и калькуляторов.

2. Использовать полноэкранные фотографии
Использовать качественную иммерсивную (вовлекающую) графику, особенно, на первом экране.

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

4. Быть готовым к целевому действию
Ничто не убивает доверие пользователя так быстро, как безответственность и ложь. Отвечать на звонки и в чат.

5. Замерять конверсию
Это отношение количества посетителей к количеству совершённых целевых действий.


Ошибки

1. Чаты в углу экрана
Если используются неправильно, очень портят дизайн. Если в них сразу не отвечают консультанты, мгновенно злят пользователей.

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

3. Перегруз информации
Много букв не прочитают. Контента должно быть ровно столько, чтобы продать.

4. Блок «Поделиться»
Никому, кроме заказчика не придёт в голову делиться рекламным лендингом в социальных сетях. Безжалостно избавляйся от мусора.

—
#первые_шаги — рубрика для начинающих

Почему удобно делать прототипы в Скетч Клауде
Пришло время отправить Марвел на пенсию?

Полностью перевёл свои прототипы на Скетч Клауд. Марвел рискует выпасть из моего набора инструментов, потому что ребята тупят и не торопятся внедрять хотспоты из Скетча вслед за Зеплином. Расставлять же хотспоты по загруженному макету в веб-интерфейсе — прошлый век и пустая трата времени.

Плюс: хотспоты привязаны к объектам на макете
Главная сила прототипов в Скетче в том, что хотспоты привязываются к символам. Когда кнопка сдвигается, хотспот тоже сдвигается. В Марвеле же их нужно вручную двигать, когда макет обновился по ссылке.

Плюс: Единство хотспотов во всех ссылках
Хотспоты Скетча видны в Зеплине. Достаточно один раз настроить все переходы и они будут как в Скетч Клауде, так и в Зеплине. Менеджерам, любопытным и копирайтерам — ссылку на Скетч Клауд, разрабам — на секцию сценария в Зеплине.

Плюс: Ссылка на предыдущий артборд
Теперь внутри символа может быть переход на обобщённый предыдущий артборд, и это очень круто. Подсмотрел эту технику в официальной библиотеке UI-компонентов Apple. Идеальное решение для кнопки «Назад».

Мечты: ссылка «Следующий артборд»
Написал Богемцам, чтобы внедрили аналогичную кнопку «Next Artboard». Выбор следующего артборда в сценарии — пока слабое место дизайна Скетча, потому что это надо делать вручную. Если её сделают, это сэкономит время настройки переходов на 70%.

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

Если все сценарии твоего проекта спроектированы линейно и вся тяжёлая растровая графика обёрнута в символы, это не будет проблемой. Сценарий из 20 экранов весит у меня 9 мегабайт.

—
#прототипы
#для_профи — рубрика для прожжённых