Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Web Design
  2. Atomic
Webdesign

Как создавать прототип в Atomic

by
Difficulty:BeginnerLength:LongLanguages:

Russian (Pусский) translation by Ellen Nelson (you can also view the original English article)

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

Наш прототип

В этом уроке мы создадим базовый прототип «посадочного талона» в Atomic, который вы можете просмотреть здесь. Прототип начинается с состояния загрузки, прежде чем вы сможете просматривать свои предстоящие рейсы и просматривать свой посадочный QR-код. Чтобы создать этот прототип, мы будем использовать интерактивные компоненты, данные, переменные и переходы страниц. Не беспокойтесь! Я помогу вам пройти каждый шаг.

Вот демонстрация того, что мы создадим:

Активы урока

Чтобы следовать вместе с нами, вам понадобится несколько вещей:

  1. Учетная запись в Atomic: начните с бесплатного тестового периода (бесплатный тариф тоже есть).
  2. Активы проекта: это файл, в котором вы найдёте элементы дизайна и создадите ваш прототип.
  3. Источник данных: файл Google Таблиц с данными, которые мы будем использовать в нашем прототипе.
  4. Приложение Atomic для iOS: загрузите приложение из App Store, чтобы протестировать прототип на вашем телефоне.
httpsatomicio
atomic.io

Если в любой момент урока у вас возникнет вопрос, не стесняйтесь обращаться ко мне (@femkesvs) или группе поддержки Atomic (@we_are_atomic) в Twitter.

Поехали!

1. Скопируйте активы в вашу учетную запись

Я создала образец файла с активами, которые вам потребуются для создания вашего прототипа. Этот образец файла заполнен активами, которые мы будем использовать, а также готовыми компонентами.

copygif

Вы можете взять активы отсюда. Чтобы использовать эти активы, вам нужно скопировать в прототип в ваш аккаунт. Вы можете сделать это нажав Copy & Edit справа внизу, а затем выберите проект, в который вы хотите это скопировать. Я рекомендую создать новый проект для этого урока.

2. Загрузка данных в Atomic

Прежде, чем начнём создавать наш прототип, сначала нам нужно добавить в Atomic источник данных. Я собрала все в Таблицах Google с кое-какими какими основными данными, которые мы будем использовать в нашем прототипе.

Вы можете забрать эти данные отсюда. Откройте источник данных, перейдите в Файл > Добавить на мой диск (для этого вам потребуется учётная запись Google).

Далее, откройте ваш проект в Atomic, выберите вкладку Data. Тут же нажмите Import Data и укажите источник данных. Когда найдёте, выберите этот источник данных. Вы увидите, что Atomic загружает данные  ваш проект. Теперь, у вас есть доступ к этому источнику данных и вы можете использовать их в любом прототипе проекта.

Мы готовы!

3. Создание экрана загрузки

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

Сперва, выберите компонент загрузки со страницы Assets для копирования (CMD-C и вставки (CMD-V) его на страницу 1. Он будет большим и вместо изменения его масштаба, поместите его в исходное положение.

Затем, скопируйте элемент загрузки, который вы только что разместили на странице 1, в этот раз разместите его на странице 2. Поместите его в его начальное состояние (повернутое по часовой стрелке на 75°, чтобы самолёт располагался с правой стороны холста).

page-action-1gif

Чтобы создать переход, вернитесь на страницу 1. В свойствах на панели по правой стороне, вы увидите раздел, названый, Page Actions. Нажмите кнопку плюс и задайте следующее:

  • Make something happen: After a set time → что-то должно случиться: после заданного времени
  • Wait: 0 → подождать: 0
  • Go to: Page 2 → перейти на: страницу 2
  • Motion: Custom transition → движение: пользовательский переход
  • Easing: Ease in-out → анимация начинается и заканчивается медленно
  • Duration: 2000 → продолжительность: 2000

Давайте заценим и увидим наш переход в действии — вы должны увидеть скольжение самолёта слева направо в течение 2 секунд. Лаконично!

Чтобы пойти дальше, вы также можете скопировать и вставить логотип Fly на страницы 1 и 2 (под загружаемым компонентом на панели страниц и разместить его позади). Убедитесь, что вы используете ту же технику размещения, в его начальной и конечной позиции на каждый странице. Вам, вероятно, придется настроить порядок ваших слоев, чтобы он казался позади.

Наконец, нам нужно создать действие, которое автоматически приведет пользователя со страницы 2 на страницу 3. На странице 2 добавим ещë одно действие по времени. На этот раз мы будем использовать следующие настройки:

  • Make something happen: After a set time
  • Wait: 1000
  • Go to: Home
  • Motion: Slide up → движение: скольжение вверх
  • Easing: Ease in-out
  • Duration: 300

Совет: если вы хотите нестабильное время анимации двух элементов, вы можете сделать это, используя расширенную временную шкалу движения — Advanced Motion Timeline.

4. Понимание компонентов

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

Почти все элементы, необходимые для этой страницы, являются компонентами.

Пара слов о компонентах

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

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

Мы знаем, что у пользователя три рейса, и мы хотели бы, чтобы их можно было пролистывать. Там также есть значок QR-кода, который при взаимодействии с ним должен выдать код их посадочного талона.

Если вы посмотрите на панель слоев, вы заметите, что каждая страница представляет собой экземпляр компонента под названием «boardingCard». Теперь откройте компонент boardingCard, чтобы увидеть, как приминились данные.

5. Использование данных

Компонент boardingCard является компонентом встроенным в компонент. Это позволяет нам создать обозначение посадочной карты, которое можно будет использовать повторно, при показе различных наборов данных.

Если вы откроете компонент boardingCard, вы увидите две страницы; титульную и обратную стороны посадочного талона. Вот тут и присваиваются данные отдельным текстовым элементам.

Text Properties
Данные, унаследованные от родителя

Выберите текст ABC и взгляните на свойства Text. Вы заметите следующее:

  • Content: Set from data column → содержимое: устанавливается из столбца данных
  • Data: Inherit from parent → данные: унаследовать от родителей
  • Column: departure-code → столбец: код отправления

Впоследствии, если вы посмотрите в Таблицу Google, из которого извлекаются эти данные, вы увидите столбец под названием «код отправления»/“departure-code”. Это означает, что текстовый элемент ABC отобразит все данные, указанные в столбце «код отправления».

Все динамические тексты в этом компоненте были настроены на Inherit from parent, что значит — унаследовать от родителя. Это позволяет нам ссылаться на лист данных на В групповом уровне и, следовательно, отображать и сортировать данные по строкам. Мы скоро дойдём до этого.

6. Добавление взаимодействия переворачивания

Затем мы настроим переход страниц, для добавления анимации между посадочным талоном и QR-кодом. На первой странице компонента boardingCard нажмите H, чтобы открыть инструмент hotspot. Затем обрисуйте область вокруг QR-кода на первой странице.

Hotspot позволяет вам определять интерактивные области вашего прототипа. Выделите вашу область и на панели взаимодействия установите следующее:

  • Gesture: Click or tap → жест: нажать или прикоснуться
  • Go to: > Next page → перейти к: следующей странице
  • Motion: Flip → движение: переворот
  • Easing: Ease in-out
  • Duration: 300MS → длительность: 300 мс

Затем на обратной странице задайте ещë одну интерактивную область (H), которая вернет нас на первую страницу. На этот раз нарисуйте его над значком закрытия (close) и установите следующее:

  • Gesture: Click or tap
  • Go to: > Previous page → перейти на: предыдущую страницу
  • Motion: Flip
  • Easing: Ease in-out
  • Duration: 300MS

Время проверить взаимодействие! В правом нижнем углу нажмите кнопку Preview. Режим предварительного просмотра позволяет протестировать переходы и взаимодействовать с прототипом через интерактивные области. Попробуйте нажать на QR-код или значок закрытия; карта должна переворачиваться между двумя состояниями. Вы можете закрыть предварительный просмотр, нажав X.

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

7. Подключение данных к родителю

Чтобы вернуться, нажмите фиолетовую кнопку back в левом верхнем углу. Теперь вы должны вернуться к компоненту boardingPasses. В этом компоненте у нас есть три посадки, в настоящее время отображающих одни и те же данные. Давайте обновим их.

Помните, для компонента boardingCard были установлены данные Inherit from parent? В этом случае родитель это экземпляр компонента.

На странице полета 1 выберите экземпляр boardingCard. В свойствах компонента оставьте State как есть. В разделе Data выберите источник данных и убедитесь, что строка Row установлена на строку 1. Экземпляр теперь должен отображать данные из первой строки листа данных.

Если вы переключите строку (row), вы заметите, что данные отображаются обновлёнными. Давайте вернем это на строку 1, однако в полете 2 и 3 установите строку для отображения данных из строк 2 и 3 соответственно.

8. Добавление жеста «смахнуть»

Чтобы пользователи могли листать свои посадочные талоны, нам нужно настроить некоторую «смахивающую» интеграцию.

Создайте и обрисуйте область взаимодействия (H) в правой части страницы полета 1 (убедитесь, что вы оставили некоторое пространство наверху для доступа сверху значка закрытия на задней странице компонента boardingCard и что он не перекрывает QR-код на первой странице). Чтобы создать жест «смахивания», используйте следующие настройки:

  • Gesture: Swipe left → жест: смахнуть влево
  • Swipe distance: 200 → дистанция смахивания: 200
  • Go to: > Next page
  • Motion: Push Left → движение: сдвинуть влево
  • Easing: Ease in-out
  • Duration: 300MS

Сделайте тоже самое на странице полёта 2, добавьте вторую область с левой стороны страниц полёта 2 и 3, настройте на Push Right и Push Left соответственно. Не стесняйтесь нажимать Preview, чтобы протестировать взаимодействие с компонентом и поправить настройки «смеха» соответственно.

9. Создание переменной

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

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

Чтобы создать переменную нажмите V для открытия диалога переменных – Variables. Тут нажмите Create New Variable и наберите “flightDisplayed” в пол Name. Значение по умолчанию оставьте пустым.

Отлично, вы создали переменную! Закройте окна переменных, нажав X или escape на клавиатуре.

10. Использование переменных

Вернитесь обратно к прототипу. Если мы сейчас сделаем предпросмотр от главной страницы, у вас должно получиться листание между карточками, а также взаимодействие с QR кодом.

Пока мы можем перелистывать посадочные талоны, есть ещë несколько вещей, которые нужно настроить, чтобы повлиять на точки продвижения для обновления на основе продвижения посадочных талонов.

Для этого откройте компонент boardingPasses. На странице 1 давайте создадим следующее действие для страницы:

  • After a set time → после указанного времени
  • Wait: 0
  • Set: flightDisplay (variable) → установить: flightDisplay (переменная)
  • To: value... → в: значение…
  • Value: 1 → зачине: 1

Повторите это для страниц 2 и 3, убедитесь, что значения стоят 2 или 3 и отражают текущую страницу пользователя.

Мы эффективно сказали компоненту boardingPass обновить значение переменной flightDisplayed, в зависимости от отображаемого полета (страницы). Теперь мы можем использовать это значение для влияния на состояние точек продвижения.

Вот как: вернитесь к прототипу и откройте компонент progressDots.

Вы увидите три страницы (состояния) с именами 1, 2 и 3. Их названия соответствуют значениям, установленным в переменной FlightDisplayed. Важно, чтобы эти имена страниц соответствовали установленным значениям.

Вернитесь к прототипу, выберите компонент progressDots и:

  1. В разделе Component на панели свойств откройте раскрывающийся список State.
  2. Выберите переменную FlightDisplayed.

Теперь мы подсоединили компонент progressDots к переменной flightDisplayed. Это означает, что когда значение переменной изменяется на значение, компонент progressDots отобразит страницу, которая соответствует значению переменной.

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

Наконец, вы можете удалить или переместить страницу Assets, чтобы гарантировать то, что когда вы поделитесь с кем-то для просмотра, у них откроется на правильной начальной странице. Чтобы удалить страницу, выберите меню «гамбургер» (три горизонтальные полосы) на миниатюре страницы и нажмите delete page, чтобы удалить страницу.

Совет: посмотрите, можете ли вы понять, как заставить компонент promoCard обновить своё состояние на основе отображаемого полета. Вам нужно создать новую переменную, называемую cardDisplayed.

Та-да!

Вот оно! Ваше собственное приложение «Посадочный талон». Если вы загрузили приложение iOS, попробуйте открыть прототип и взаимодействовать с ним на вашем iPhone; оно должно быть похоже на настоящее.

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

Вопросы? Комментарии? Оставьте их ниже или свяжитесь со мной на Twitter (@femkesvs).

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.