Craft Prototype: новая эра прототипов
Современные дизайнеры имеют огромный набор инструментов для тестирования “работоспособности” своего дизайна. Речь, конечно, об инструментах для создания прототипов.
Если раньше мы тратили дни на разработку объемных прототипов с нетривиальной логикой при помощи Axure, сегодня в InVision нам требуются минуты, чтобы собрать прототип, который будет выглядеть и ощущаться как настоящий готовый продукт.
Что нас ждет завтра? Мы подготовили перевод статьи дизайнера Джо Тоскано с обзором плагина Craft Prototype. Читайте и вдохновляйтесь, а мы уже тестируем бету 🙂
InVision готовится предоставить возможность создавать в Sketch прототипы, которые будут неотличимы от прототипов на основе кода. Эта статья позволит вам подсмотреть грядущие нововведения. Вам уже не захочется возвращаться к тому, что было раньше.
На грани будущего
За время своей карьеры я использовал множество инструментов для прототипирования, но даже бета-версия плагина Craft Prototype для Sketch от Invision – лучшее сочетание богатых возможностей и интуитивного интерфейса из всех, что мне доводилось использовать.
Переходы между страницами
Переходы между страницами – одна из основных возможностей, которая есть в большинстве инструментов для прототипирования.
Craft Prototype позволяет использовать любые виды переходов, которые только придут вам в голову, например:
- по тапу
- по тапу с задержкой (т.е. 3D Touch)
- по свайпу влево
- по свайпу вправо
- по свайпу вверх
- по свайпу вниз.
Кроме того, можно использовать связанные с этими переходами анимации:
- мгновенное появление
- растворение
- появление справа
- появление слева
- появление сверху
- появление снизу
Слои также можно конвертировать в overlay и управлять ими при помощи индивидуальных дополнительных настроек. С этим вы разберетесь сами : Р
Фиксирование хедера и футера
Зафиксированные хедер и футер – ещё одна довольно стандартная возможность, но Craft Prototype делает их использование необыкновенно простым: нужно всего лишь выбрать группу слоёв и зафиксировать их.
Редактируемые текстовые поля
Редактируемые текстовые поля — ещё один шаг в сторону будущего. Большая часть инструментов прототипирования для этого потребует от вас знания инструментов визуального программирования. С помощью Craft Prototype вы можете просто создать строку текста, нажать ‘с’ для активации Prototype и превратить строку в живой текст.
Создавая текстовое поле, вы можете указать, какой тип клавиатуры использовать (например, стандартный, ввод телефонного номера, ввод электронной почты и т.д.), какой текст-подсказку отображать, использовать ли кнопку “удалить весь текст”, а также многое другое.
Инструмент предлагает различные типы ввода с заданным поведением:
- ввод в одну строку
- ввод в несколько строк
- ввод с защитой пароля
- email адрес.
Поля с защитой пароля
Технически это должно было попасть в предыдущую секцию, я просто хочу выразить свое восхищение тем, насколько это круто: вы можете создавать поля с защитой пароля!
Фотосъёмка
Фотосъёмка – ещё одна невероятная фича, обычно доступная только с помощью инструментов визуального программирования или реализуемая при помощи кода.
Всего за пару кликов вы получаете доступ к камере телефона и можете сделать фото внутри своего прототипа. Если вы назовёте свой слой “_photo”, то прототип будет использовать этот слой как маску для вашей фотографии.
Доступ к галерее телефона
Можно не только сделать фото, но и выбрать снимок из галереи вашего телефона. Как и при фотосъёмке, добавьте в название слоя “_photo”, чтобы ваша фотография отображалась на странице должным образом.
Телефонный звонок
Я не знаю, как часто эта возможность будет использоваться в прототипах, но то, что из статичного слоя можно сделать кнопку, по нажатию на которую будет совершаться настоящий звонок — это круто!
Отправка iMessage
Помимо звонков вы можете отправлять iMessage. Вы даже можете предзаполнить текст сообщения. Или оставьте его пустым, используйте возможности интерактивного интерфейса iMessage!
Доступ к Safari
Нужно использовать внешнюю ссылку внутри вашего приложения? Всего за пару кликов вы можете создавать в своём прототипе нативные ссылки, чтобы отправлять пользователей, куда только захотите.
Вам нужно всего лишь выбрать слой, нажать ‘c’, чтобы запустить Prototype, перетащить элемент интерфейса на иконку Safari и ввести адрес сайта, на который будет происходить редирект.
Встроенный Web View
Что может быть круче, чем ссылки в вашем прототипе? Возможность встроить внутрь прототипа сайт или данные!
Казалось бы, это не так уж и много, но задумайтесь: случалось ли вам видеть прототип со встроенными картами Google Maps?
Если вы не боитесь кода и хотите взломать систему, вставив несколько отличных микро-взаимодействий, ознакомьтесь со статьёй Николаса Кляйна (Nicolas Klein), рассказывающей о том, как вставить код в ваш прототип.
Попробуйте Craft Prototype уже сегодня
В первую очередь вам понадобится код бета-версии. Получить его можно у друзей, которые уже используют бета-версию, или написав вежливое письмо с просьбой отправить код для доступа к Prototype на [email protected].
После того, как вы получите код, начинается самая сложная часть – установка Craft Prototype.
К счастью, ребята из InVision написали инструкцию, которая немного упрощает задачу.
https://support.invisionapp.com/hc/en-us/articles/…
После того, как вы установили Prototype в Sketch, вам нужно будет скачать InVision Viewer app, чтобы создать зеркало прототипа на вашем телефоне.
Скачайте Demo
Я создал demo-прототип, который проведёт вас через использование Prototype шаг за шагом. Или вы можете просто оставить эту статью открытой и смотреть на gif-ки во время создания вашего прототипа.
Но на вашем месте я бы всё же скачал demo!
http://www.sketchappsources.com/free-source/2173-c…
Установите его и посмотрите, как он работает, прежде, чем начнёте создавать что-то новое. Я создал прототип, чтобы научить вас создавать прототипы.
Я получал довольно хорошие отзывы от людей, которые им воспользовались, включая моих коллег по R/GA из Сан-Франциско, Портленда и Нью-Йорка, а также некоторых ребят из Nike. Надеюсь, он будет полезен и вам!
Хотите больше?
Более подробную документацию о возможностях, которые предоставляет Prototype, вы можете найти в этой статье от InVision:
https://support.
invisionapp.com/hc/en-us/articles/…
Если у вас возникли сложности на любом этапе, не стесняйтесь и пишите! Я уже помог нескольким людям, смогу помочь и вам настроить Craft Prototype без лишних усилий!
Будущее прототипирования
Craft Prototype – самый простой и мощный инструмент, который я только использовал для создания прототипов. И это только бета-версия!
Представьте, что произойдёт, когда Craft Prototype расширит свои возможности до нескольких платформ, начнёт интегрироваться с адаптивными артбордами Sketch и будет регулярно обновляться, чтобы соответствовать ожиданиям пользователей. Мы будем всего лишь в паре шагов от того, чтобы начать создавать приложения, не написав ни строчки кода!
Эта мечта становится всё ближе с каждым обновлением, и нет сомнений, что Sketch и InVision лидируют на пути к ней!
Оригинал статьи: https://medium.com/re-write/craft-prototype-invisi…
Перевод: https://blog.noveogroup.ru/2016/10/craft-prototype.
..
Craft Manager
Craft Manager доступен в виде приложения для macOS, которое находится в строке меню Mac и помогает поддерживать инструменты Craft в актуальном состоянии. Craft Manager, используемый в сочетании с Craft Sync на вашем Mac, позволяет публиковать прототипы и рисунки от руки прямо из Sketch, а также обеспечивает быстрый доступ к прототипам и изображениям от руки прямо с рабочего стола.
Установка Craft
Чтобы начать использовать Craft на вашем Mac:
- Загрузите бесплатный подключаемый модуль Craft.
- Дважды щелкните загруженный файл CraftManager.zip.
- В папке Downloads дважды щелкните значок Craft Manager ().
- Появится новое окно с вопросом, хотите ли вы переместить Craft Manager в папку «Приложения». Сделайте свой выбор, и Craft Manager будет установлен в соответствующую папку.
- В строке меню Mac щелкните значок Craft ().
- В правом верхнем углу модального окна Craft Manager щелкните значок настроек (), а затем нажмите Инструменты .
- Справа от Craft Tools for Sketch нажмите Установить.
Обновление Craft
Когда для Craft будет доступно обновление, на значке Craft () в строке меню Mac появится синяя точка. Щелкните значок Craft, и в правом верхнем углу модального окна вы увидите синюю кнопку Update . Чтобы обновить Крафт, нажмите на кнопку.
Затем вас спросят, хотите ли вы Включить автообновление . Если это так, установите флажок, прежде чем нажимать Обновить . Если Sketch запущен, Craft потребует от вас перезапуска Sketch.
Включение автоматического обновления
У вас есть возможность автоматически обновлять все инструменты Craft в фоновом режиме каждый раз при выпуске новой версии. Чтобы включить или выключить этот параметр настроек:
- В строке меню Mac щелкните значок Craft Manager ().
- В правом верхнем углу модального окна Craft Manager щелкните значок настроек (), а затем нажмите Настройки .
- Под заголовком Настройки установите или снимите флажок Автоматически обновлять Craft .
Проверка обновлений и номеров версий
Чтобы проверить номер версии Craft Manager, а также проверить наличие обновлений в macOS:
- В строке меню Mac щелкните значок Craft Manager ().
Примечание. Если его нет в строке меню, откройте Finder, перейдите в папку «Приложения» и откройте Craft Manager. - В правом верхнем углу модального окна Craft Manager щелкните значок настроек (), а затем щелкните Настройки .
- В нижней части модального окна нажмите Проверить наличие обновлений .
Чтобы узнать больше о проверке версий Craft Manager и связанных инструментов, ознакомьтесь с этой статьей: Проверка обновлений Craft и номеров версий.
Использование Craft
Craft от InVision работает с двумя последними основными небета-версиями Sketch. Для получения наилучших результатов мы рекомендуем загрузить новейшую небета-версию Sketch.
Мы рекомендуем использовать Craft Manager с двумя самыми последними основными версиями macOS.
Дополнительные сведения о поддерживаемых операционных системах и средствах проектирования см. в этой статье: Какие браузеры и средства проектирования требуются для служб InVision?
Аутентификация через Craft Manager
Craft Manager использует аутентификацию InVision, которая используется для просмотра и публикации документов выбранной вами группе.
Шаги входа в систему немного различаются в зависимости от того, используете ли вы только свой адрес электронной почты и пароль, используете ли вы субдомен InVision вашей команды (например, ваш домен .invisionapp.com), или вы принадлежите к предприятию, которое использует SSO (единый вход).
Подробные инструкции о том, как войти в Craft Manager, см. в этой статье: Вход в InVision через Craft Manager
Была ли эта статья полезной?
Проектирование с использованием реальных данных — Smashing Magazine
- Чтение за 20 минут
- Графика, Учебники, Sketch
- Поделиться в Twitter, LinkedIn
Об авторе
Кристиан когда-то был очень активен в сообществе Sketch и даже написал книгу о приложении для дизайна. В настоящее время он работает евангелистом Gravit …
Подробнее о Кристиан ↬
Самый простой способ работать с реальными данными в Sketch — это плагин with Craft от InVision. Он предоставляет множество предварительно определенного контента, такого как имена, даты и адреса, позволяет просматривать веб-сайт в поисках необходимой информации, а также позволяет вводить файл JSON и работать с предоставленными данными. Помимо потребностей пользователя, какой еще важный аспект приложения? Вашей первой мыслью может быть его дизайн.
Данные должны быть краеугольным камнем всего, что вы создаете. Это не только помогает вам принимать более обоснованные решения, но также упрощает учет пограничных случаев или вещей, о которых вы, возможно, не подумали бы иначе.
Если вы хотите получить еще больше от Sketch, не стесняйтесь ознакомиться с нашей новой модной книгой «The Sketch Handbook» с практическими примерами, которым вы можете следовать шаг за шагом, чтобы освоить даже самые сложные, продвинутые грани и станьте настоящим мастером Sketch.
Самый простой способ работы с реальными данными в Sketch — это плагин with Craft от InVision. Он предоставляет множество предварительно определенного контента, такого как имена, даты и адреса, позволяет просматривать веб-сайт в поисках необходимой информации, а также позволяет вводить файл JSON и работать с предоставленными данными. Это именно то, что мы будем делать с нашим придуманным приложением Movie Finder.
Вы можете использовать его для поиска фильмов по различным критериям, таким как название, режиссер и год выпуска. Эти данные будут предоставлены файлом JSON, форматом открытого стандарта, который позволяет хранить данные с парами ключ-значение, такими как
Больше после прыжка! Продолжить чтение ниже ↓
Heads Up
Прежде чем мы сможем начать извлекать некоторые данные, нам нужно позаботиться о макете приложения. Если вас интересует только часть «контента» (то есть, как заполнить дизайн реальными данными), вы можете загрузить файл эскиза шаблона и продолжить чтение с раздела «От одного ко многим» и далее. В противном случае, следуйте инструкциям и позвольте мне показать вам, как создать все приложение от А до Я. Я не буду подробно объяснять все детали; вам понадобятся некоторые базовые знания Sketch.
Готовый дизайн, заполненный данными фильма, можно найти в Dropbox. В любом случае вам понадобится бесплатный шрифт Clear Sans от Intel.
Я хотел сделать приложение максимально универсальным, не привязывая его к определенной платформе, поэтому выбрал размер монтажной области 360 × 640 пикселей и переименовал его в «Movie Finder». Это обычный размер Android, но вы можете легко перейти оттуда к размерам iPhone. Установите флажок «Цвет фона» на панели «Инспектор», чтобы задать белый фон. Теперь нажмите R (чтобы выбрать инструмент «Прямоугольник») и создайте прямоугольник вверху для заголовка; он должен быть на всю ширину артборда. Обязательно удалите границу по умолчанию, нажав B на клавиатуре и сохраните этот стиль для будущих форм с помощью «Редактировать» → «Установить стиль по умолчанию» в строке меню. Высота прямоугольника в данный момент не имеет значения, но имеет значение имя слоя, поэтому установите для него значение «BG». Чтобы упростить процесс компоновки элементов и определения их размеров, настройте 8-пиксельную сетку из «Вид» → «Холст» → «Настройки сетки» в строке меню.
Для «Размер блока сетки» введите «8px»; для «Толстые линии каждые» используйте «0». Все остальное можно оставить в покое.
В первый раз мы будем использовать эту сетку для высоты заголовка. Перетащите прямоугольник, который мы только что создали, на высоту 32 пикселя. Выберите цвет по своему вкусу, который достаточно контрастен с белым текстом; Я выбрал #D06002 , который я также сохранил в «Цвета документа» в диалоговом окне цвета, нажав кнопку «+», для дальнейшего использования. Для заголовка «Movie Finder» создайте новый текстовый слой (нажмите T ) размером 16 пикселей и белого цвета и отцентрируйте его в обоих измерениях по фону. Я предпочитаю шрифт Clear Sans от Intel из-за его чистого вида, а также из-за хорошего выбора жирности. Выберите «Обычный» вес для названия. Завершите заголовок, переместив все текущие элементы в группу «Заголовок».
(Большое превью)Search And Find
Следующей задачей является поле поиска. Добавьте еще один прямоугольник размером 344 × 32 пикселя и назначьте ему закругленные углы «3», белый фон и серую рамку ( #B4B4B4 ). Переименуйте его в «Поле». Переместите его на 1 единицу сетки от заголовка и отцентрируйте на монтажной области (используя четвертый значок в верхней части Инспектора или щелкнув правой кнопкой мыши, а затем «Выровнять по горизонтали»). Заполнитель состоит из значка и некоторого текста. В первом случае я использовал плагин Icon Font, который позволяет легко добавлять различные значки. Это требует от вас установки комплекта шрифтов, пакета самых популярных шрифтов. Если вам нужна помощь в этом многоэтапном процессе, посмотрите скринкаст. Теперь перейдите в «Плагины» → «Шрифт значка» → «Вставка сетки» → «Ionicons» в строке меню и введите «поиск». Нажмите на первый значок, чтобы добавить его на монтажную область, но измените размер шрифта на 16 пикселей. Перетащите его в поле поиска.
Для текста-заполнителя добавьте новый текстовый слой с T , установите тот же размер шрифта, «Обычный» вес и содержимое «Название фильма, режиссер, год». Также убедитесь, что используется шрифт «Clear Sans». Переместите его на 3 пикселя от значка, выберите оба элемента и отцентрируйте их по вертикали, щелкнув правой кнопкой мыши и выбрав «Выровнять по вертикали». Установите цвет обоих на #4A4A4A . Поскольку с этого момента это будет наш цвет текста по умолчанию, добавьте его в «Цвета документа». Создайте новую группу из этих элементов (назовите «Заполнитель»), которую вы можете уменьшить до 50% непрозрачности с помощью 5 на клавиатуре. Затем переместите его немного вверх с помощью клавиши со стрелкой для правильного оптического выравнивания. Выберите эту новую группу вместе с самим полем и отцентрируйте их в обоих измерениях (щелчок правой кнопкой мыши → «Выровнять по горизонтали» и «Выровнять по вертикали») и создайте группу «Поле поиска».
В списке слоев он должен быть ниже группы заголовков; переместите его туда с помощью Cmd + Alt + Ctrl + ↓ .
Теперь продублируйте текст-заполнитель для поискового запроса ниже с помощью Cmd + D , но переместите его вниз, пока его текстовое поле не будет отстоять примерно на 3 пикселя от границы поля ввода. Этот новый слой не должен располагаться на линии сетки (вы можете нарушить это правило — не все должно быть идеально выровнено). Используйте «Вы искали «Ридли Скотт»» в качестве контента. Кроме того, перетащите его из групп в списке слоев под группу «Поле поиска» и отцентрируйте на монтажной области.
Прямо под текстовым слоем добавьте линию, чтобы четко различать результаты поиска. Его можно создать с помощью тонкого прямоугольника (высотой 1 пиксель) или линии (толщиной 1 пиксель). Я предпочитаю первое, потому что оно немного проще в обращении.
Создайте его с той же шириной и интервалом, что и поле поиска, и назовите его «Линия». Установите заливку на #D4D4D4 и выровняйте ее поверх линии сетки (что должно дать интервал около 7 пикселей от текстового слоя выше). Переместите его в конец списка слоев вместе с текстовым слоем.
Покажите мне результаты
Теперь мы наконец можем перейти к результатам поиска. Каждый результат состоит из афиши фильма, названия, режиссера, краткого описания, года выпуска и продолжительности показа. Он также показывает пользовательский рейтинг с первого взгляда. Но вместо того, чтобы добавлять всю информацию вручную, мы просто создадим заполнители, которые позже будут заполнены фактическим содержанием!
Готовый шаблон результатов поиска мы создадим и наполним реальным контентом позже. (большой превью) Начнем с постера. Добавьте прямоугольник 72 × 104 пикселя у левого края с интервалом в 2 единицы сетки от края монтажной области и линии выше.
Назовите его «Плакат». Черная тень со свойствами «0/4/6/0» (X/Y/размытие/распространение) и непрозрачностью 30% придаст ей слегка приподнятый вид.
Прямо рядом с ним, с другим горизонтальным интервалом в 2 единицы сетки, добавьте текстовый слой для «Заголовка» (используйте именно его в качестве содержимого). Размер шрифта уже должен быть 16 пикселей. Для цвета выберите тот же, что и для фона заголовка (получите его из «Цвета документа» в диалоговом окне цвета). Сделайте это жирным с Cmd + B и переместите его так, чтобы верхняя часть текста (не текстовое поле) находилась на той же высоте, что и плакат. Используйте клавиши со стрелками для точной настройки этого положения. Дублируйте его для «Режиссер» (как указано выше, используйте его в качестве содержимого), переместите его вниз и выровняйте его базовую линию по линии сетки. Как только вы уменьшите размер шрифта до 14 пикселей, это должно дать ему расстояние примерно в 2 пикселя от предыдущего текстового слоя.
Для веса снова используйте «Обычный», а для цвета — черный цвет, который мы ранее сохранили в «Цвета документа».
Больше текста
Продолжите описание таким же образом: Дублируйте предыдущий текстовый слой с помощью Cmd + D и переместите его вниз так, чтобы между ними был интервал около 2 единиц сетки, после того как вы выровняли его. базовой линии к сетке. Вам просто нужно убедиться, что текст-заполнитель состоит из двух строк: используйте известный заполнитель «Lorem ipsum dolor sit amet, consectetuer adipiscing elit» в качестве содержимого на данный момент, но установите ширину текстового слоя на 230 пикселей в Панель инспектора. Это создаст фиксированный текстовый слой, который автоматически разрывается справа, создавая две строки текста. Уменьшите межстрочный интервал до 16 пикселей на панели «Инспектор», что выровняет обе линии по сетке.
Для описания добавьте текстовый слой и вручную установите его ширину на 230 пикселей в панели Инспектора.
Это создаст фиксированный текстовый слой, который разбивается на две строки. (Большой предварительный просмотр) Поскольку это будут только первые две строки описания, мы добавим так называемый «треугольник раскрытия», указывающий на дополнительный текст. Создайте треугольник (из «Вставка» → «Форма» → «Треугольник» на панели инструментов) с размерами 8 × 6 пикселей и отразите его по вертикали, щелкнув правой кнопкой мыши и «Трансформировать» → «Отразить по вертикали». Если у вас возникли трудности с получением этих измерений, временно отключите сетку с помощью Ctrl + G и немного увеличьте масштаб с помощью Cmd + + . Назначьте этому треугольнику тот же цвет, что и текст, и отцентрируйте его на второй строке описания (теперь вы можете снова включить сетку). Чтобы сделать его независимым от длины текста, переместите его к правому краю монтажной области с интервалом в 2 единицы сетки. Наконец, переименуйте его в «Disclosure» и убедитесь, что он находится над соседним текстовым слоем в списке слоев.
Снова и снова
Для оставшихся двух текстовых слоев — год и время работы — снова можем взять за основу текстовый слой «Режиссер». Дублируйте его, переместите вниз, чтобы был еще один интервал примерно в 2 единицы сетки от описания, но измените содержимое на что-то вроде «2000» (чтобы у нас было хорошее представление о том, как долго будет типичный год). Как и прежде, его базовая линия должна быть выровнена по сетке. Удерживая Alt , перетащите его вправо с помощью мыши, чтобы создать еще одну копию, и измените эту на «|» чтобы отделить его от года. Вы также можете нажать Сдвиньте при перетаскивании, чтобы оставить его на той же линии. Таким же образом добавьте последний слой с «Время работы» в качестве содержимого. Эти текстовые слои должны иметь горизонтальное расстояние около 4 пикселей друг от друга.
Удерживая клавишу Alt (⌥), перетащите текстовый слой года («2000») вправо, чтобы сделать копию для линии разделения. Повторите, чтобы создать текстовый слой на время работы.
Единственное, что нам нужно сделать, прежде чем мы сможем начать добавлять реальный контент, — это рейтинг. Во-первых, он содержит круг диаметром 28 пикселей (снова выключите сетку) и такого же цвета заливки, что и название фильма. Второй элемент — это белый текстовый слой («9.9», например), с размером шрифта 14 пикселей, полужирным шрифтом и выравниванием по центру (нажмите Cmd + | ). Изменение межсимвольного интервала на «–0,8» сделает его более плотным. Совместите эти два слоя друг с другом, но верьте своим глазам в оптическом выравнивании, а не функциональности Sketch, потому что это даст лучший результат.
После того, как вы объединили их в группу «Рейтинг», переместите ее в правый нижний угол плаката так, чтобы он выступал примерно на 10 пикселей по горизонтали и на 4 пикселя по вертикали. Убедитесь, что он находится выше постера в иерархии слоев. Последний шаг: продублируйте строку сверху, чтобы она действовала как разделитель между другими результатами поиска, которые мы собираемся создать.
Переместите его вниз, пока он не окажется на расстоянии 2 единиц сетки от постера и не окажется над линией сетки.
От одного ко многим
Дизайн готов. Есть множество способов наполнить его реальным контентом (с помощью некоторых плагинов), но лучший и самый простой — это Craft. Помимо извлечения данных, он также позволяет нам дублировать элементы и автоматически изменять их содержимое. После того, как вы установили плагин, рядом с панелью Inspector появится удобная панель (если нет, откройте ее с помощью «Craft» → «Toggle Panel» в строке меню), которая обеспечит больше функциональности в Sketch. Для нас наибольший интерес представляет раздел «данные» (третья иконка сверху) и, в частности, вкладка «JSON».
После установки плагина Craft вам будет представлена удобная панель. Раздел «данные» (третий значок сверху) представляет особый интерес; из него перейдите на вкладку «JSON».
(Большой предварительный просмотр) Мы возьмем наши данные с веб-сайта Netflix Roulette, который предоставляет интерфейс прикладного программирования (или API, который представляет собой способ доступа к различным частям службы) для всех шоу на Netflix. Поскольку мы хотели бы получить все фильмы режиссера Ридли Скотта, мы будем использовать ключевое слово «режиссер» с его именем, которое ведет к URL-адресу 9.0102 https://netflixroulette.net/api/api.php?director=Ridley%20Scott . Нажмите на него, чтобы увидеть файл JSON. Поначалу файл может показаться беспорядочным, но это просто неупорядоченная коллекция пар ключ-значение — то есть свойств — фильмов, таких как show_title , категория и среда выполнения . Вскоре мы наведем порядок в этом списке.
Возьмите этот точный URL-адрес и вставьте его в поле ввода на вкладке «JSON» на панели Craft с надписью «Введите URL-адрес…». При нажатии на «Импорт» появится список из (в настоящее время) семи записей, который вы можете расширить с помощью стрелки слева.
Примечание: Если файл JSON из рулетки Netflix не может быть обработан, вам нужно использовать другой подход: откройте URL-адрес в своем браузере, но вместо того, чтобы вставлять его в Craft, сохраните файл JSON с правами. нажмите и «Сохранить как…» на ваш жесткий диск. Теперь перетащите этот файл из Finder на панель JSON в Craft, где написано «Перетащите файл JSON». Теперь вы сможете использовать данные JSON, как описано.
Вставка URL-адреса из файла JSON в поле ввода отобразит список (на данный момент) семи фильмов. Разверните один из них, чтобы увидеть его свойства, пары ключ-значение. (большой превью) Начните с 0 , который должен быть для фильма «Гладиатор»; взгляд на show_title подтверждает это. Простым нажатием на клавишу вы можете присвоить ее значение (или любое другое из JSON-файла) слоям на монтажной области (например, после выбора текстового слоя «Заголовок»). Сделайте то же самое для текстового слоя «Директор» и ключа директора , а также «Описание» и резюме .
К сожалению, контент из Netflix Roulette намного длиннее того, что мы устроили для текстового слоя. Исправьте это, снова перетащив высоту текстового слоя обратно на 34 пикселя (использование панели «Инспектор» здесь не сработает).
0 ) и назначьте значения слоям на монтажной области. Теперь продолжайте с оставшимися текстовыми слоями. Выберите «2000» на артборде и присвойте значение из release_year , а также «Время выполнения» на холсте и время выполнения из Craft. Для рейтинга в оранжевом кружке используйте (как вы уже догадались!) поле рейтинга . Вместо использования URL-адреса для файла JSON вы можете использовать свои собственные данные: удалите текущий источник с помощью значка «x» рядом с полем ввода и перетащите данные JSON в соответствующее поле ниже (или просто щелкните там и выберите это с компьютера).
Примечание: Список многочисленных файлов JSON, с которыми вы можете поиграть, можно найти на GitHub.
Картинка рисует тысячу слов
Вы можете использовать Craft для заливки не только текстовых слоев, но и слоев изображений. К сожалению, выбор слоя «Плакат» и нажатие на поле постер в Craft не даст нам желаемого результата: кажется, что путь к изображению недействителен, поэтому ничего, кроме трех точек (которые обычно действуют как индикатор загрузки). К счастью, Craft может даже больше: вы можете использовать вкладку «Веб», которая по сути является просто браузером, чтобы перейти на веб-сайт и получить постер, скажем, из IMBd. На странице «Гладиатор» прокрутите вниз и щелкните постер фильма, который назначит правильное изображение заполнителю на монтажной области (убедитесь, что оно выбрано первым). Если вы хотите перейти по ссылке, вам нужно удерживать Cmd перед щелчком.
Теперь у нас есть результат поиска, полностью заполненный контентом о фильме «Гладиатор», без ввода вручную ни одного значения.
Магия!
Но это еще не все. Чтобы перейти к другим результатам поиска, основанным на одном и том же файле JSON, достаточно нескольких щелчков мышью. В качестве подготовки объедините все слои результата поиска в группу «Элемент» (включая строку) и переместите его в конец списка слоев (можно использовать Ctrl + Alt + Cmd + ↓ ). Теперь нажмите «Дублировать контент» на панели «Создание», и вы попадете в раздел «Дублирование». Это позволит вам размещать элемент в обоих направлениях с определенным количеством и расстоянием между ними. Всего нам нужно «4» элемента с отступом «10», выровненных по вертикали. Нажмите «Дублировать содержимое» и наблюдайте, как разворачивается волшебство.
Чтобы перейти к другим результатам поиска, достаточно нескольких щелчков мышью: используйте раздел «Дублирование» с количеством «4» и отступом «10». Это даст вам еще три записи, основанные на одном и том же файле JSON. Мы получили три новых результата поиска, каждый из которых содержит дополнительные данные о фильмах.
Craft поступил умно, использовав здесь другие записи из файла JSON. Наряду с этими дополнительными записями в списке слоев был создан еще один новый слой: «Дублирующий контроль». Это действительно мощно: если новые записи не выровнены по сетке, вы можете использовать его для изменения интервала на лету. Просто выберите слой «Duplicate control» в списке слоев и перетащите ползунок под полем «Gutter» на панели Craft.
Но даже больше. Если позже вам понадобится больше (или меньше) записей, вы можете изменить размер слоя «Дублировать элемент управления» на холсте, и плагин автоматически адаптирует количество результатов поиска! Просто помните, что плагины иногда ломаются с каждой новой версией Sketch, поэтому, если что-то не работает должным образом, возможно, исправление уже готово.
Единственное, что не работает идеально, это постеры. Кажется, они вообще сломаны, поэтому нам нужно снова использовать вкладку «Интернет». Перейдите на соответствующие страницы с подробностями на IMDb и выберите соответствующие постеры.
Но это небольшая цена.
За пенни, за фунт
В общем, мы закончили, но я хочу показать вам последний трюк. Хотя у нас есть четыре похожих элемента, они никак не связаны друг с другом. Изменение одной из записей не повлияет на остальные. Здесь поможет символ.
Начните с удаления всех групп элементов, кроме первой; удалите внешнюю «Группу», созданную Craft с помощью Shift + Cmd + G , а также слой «Duplicate control» и выберите оставшийся элемент. Теперь нажмите «Создать символ» на панели инструментов, но не отправляйте его на страницу «Символы». Это поместит символ рядом с монтажной областью, что облегчит внесение изменений позже, потому что вы сразу увидите, как это повлияет на все экземпляры.
Напротив, если выбрать «Отправить символ на страницу «Символы», символ будет создан на отдельной странице. Хотя это лучше для организации, становится намного сложнее увидеть прямую корреляцию между основным символом и его экземплярами при его изменении.
Для остальных предметов вы можете действовать так же, как и раньше. Выберите первый элемент, экземпляр символа, который мы только что изменили (не главный символ рядом с монтажной областью), перейдите на панель «Дублировать» в Craft (последний значок), введите «4» для количества и «10» для желоба, и все готово. Поскольку теперь все записи привязаны к одному и тому же символу, вы можете попробовать, например, изменить размер заголовка и посмотреть, как он адаптируется к каждому результату поиска.
Создайте символ из первой записи с соответствующим значком на панели инструментов, и он будет действовать как модель для других результатов поиска. (Большое превью) Однако задача с плакатом требует немного другого подхода. Выбор плаката каждого результата поиска больше невозможен при использовании символа. Вместо этого щелкните маленькую миниатюру рядом с кнопкой «Выбрать изображение» в разделе «Переопределения» панели «Инспектор». Снова перейдите на соответствующую страницу IMDb с вкладки «Интернет» на панели «Ремесло» и перетащите постер на эту миниатюру.
Это применит его к соответствующему экземпляру символа. Цель достигнута!
Заключение
Надеюсь, вам понравился этот урок, в котором я показал, как можно перестать беспокоиться о фиктивном контенте и начать использовать реальные данные с помощью плагина Craft. Это может не только ускорить процесс проектирования, но и заставить вас больше думать о пограничных случаях или о том, как определенные части дизайна могут взаимодействовать друг с другом.
Пожалуйста, не стесняйтесь оставлять свои вопросы или указывать на другой подход к определенной части учебника. Вы также можете связаться со мной в Твиттере (@SketchTips) или посетить мой небольшой сторонний проект (SketchTips), где я даю больше советов по Sketch. Чтобы получить полный пакет, посмотрите The Sketch Handbook от Smashing Magazine, в котором вы узнаете все, что вы когда-либо хотели знать о проектировании в Sketch.
