У Sketch есть масса сопутствующих приложений для реализации разных задач. Так что недостатка в приложениях для прототипирования тоже нет. Одним из моих любимчиков из этого меню является Flinto (для Mac). За последнее время это приложение очень выросло. Предлагаю протестировать союз Sketch и Flinto для дизайна и прототипирования приложения под iOS…
С возвращением. Надеюсь, у вас сохранились те потрясающие 6 экранов приложения, которые мы ранее создали в Sketch? Настало время прототипирования, которое мы реализуем в приложении Flinto (для Mac), вдохнув в наши экраны немного жизни.
Примечание: Мы будем придерживаться относительной простоты. В этом уроке не все будет кликабельно. Даже один раз попробовав поработать с Flinto и поняв, насколько удобен этот инструмент, вы сможете сделать приложение интерактивным во всех возможных смыслах. Начнем!
Установка и настройка Flinto
Если вы еще не скачали приложение, загрузите бесплатную триал-версию Flinto (для Mac) отсюда https://www.flinto.com/mac
И не забудьте скачать плагин для Sketch https://www.flinto.com/mac_sketch_plugin
Установите Flinto, плагин для Sketch, и можно будет творить нашу магию.
Запуск Flinto
После открытия приложения появится начальный экран, где нужно будет кликнуть на опцию New Document. Это, в свою очередь откроет окно с новым документом (Да, я знаю, что это все очевидно, просто решил описать каждый шаг).
Далее выберите тип устройства (Device Type) - iPhone 6 и кликните Create.
Как только отобразится новый экран (New Screen), можете использовать те же горячие клавиши для зума, что и в Sketch:
- Увеличить Cmd + (+)
- Уменьшить Cmd + (-)
Масштаб поможет адаптироваться под размер вашего экрана.
Примечание: опять же, как и в Sketch, вы можете двигаться по канвасу, удерживая Space, кликая и перетаскивая.
Нам, конечно же, не понадобится экран, который только что был создан, поскольку нужные экраны будут импортированы из Sketch. Так что удалите этот скрин, нажав Delete или кликнув правой кнопкой по экрану и выбрав опцию Delete.
Обязательно сохраните новый документ и назовите его, скоро нам понадобится обратиться к нему в Sketch-плагине.
Вернитесь в Sketch, выделите все артборды (экраны) и перейдите в меню Plugins и Send to Flinto, либо же воспользуйтесь горячими клавишами Shift + Ctrl + Cmd + F.
Во всплывающем окне плагин выберет разрешение для экрана iPhone 6 Retina (2x), так что можете оставить все параметры без изменения, и кликните Send. В следующем окне выберите ранее сохраненный файл Flinto, и нажмите Merge.
Вернитесь назад в Flinto, и вы увидите, что все экраны импортированы в приложение. Из панели слоев вы увидите, что все слои и группы также импортированы в том же виде, как они были в Sketch, и что все векторы конвертированы в растр (Bitmap) для увеличения скорости прототипирования. Супер!
Примечание: если (в панели слоев) имена экранов расположены не в той же последовательности, как они были в Sketch, можете перетащить их в нужном порядке вручную.
Вы найдете много общих со Sketch возможностей, горячих клавиш. Flinto очень удобен для работы, так как оба приложения выглядят и работают очень схоже, что ускоряет процесс освоения.
Экран приветствия
Экран приветствия, конечно же, выступает в роли домашнего экрана, и надо бы сказать об этом Flinto. Выделите этот экран, кликните на опцию Home Screen из раздела Screen Properties в панели инспектора.
Теперь вы увидите маленькую иконку домика и на экране, и на панели слоев. Теперь мы добавим временной переход из экрана приветствия в экран видоискателя. Выделите временную ссылку (Timer Link) в инспекторе и укажите следующие параметры (или другие на ваш выбор):
- Timeout: 1000ms
- Target: Viewfinder
- Transition: Fade In
Теперь можно запустить окошко превью (Preview). Я знаю, что пока что смотреть почти не на что, но теперь вы можете просматривать собственные изменения по мере их появления. Кликните на иконку Preview на панели инструментов или используйте горячие клавиши Cmd + P.
Примечание: Можете скачать полноценную версию Flinto из iOS App Store. Мой девиз - всегда по возможности тестируйте на реальном устройстве.
Окно видоискателя
Для этого экрана мы выполним простой переход (через иконку папки) к экрану фотогалереи. Мы остановимся на стандартных переходах, но вы можете экспериментировать, кликнуть на опции New Transition и добавить тот переход, который вам хочется.
Кликните на иконку папки, нажмите F для создания новой ссылки. Потяните оранжевую нить к экрану фотогалереи и кликните для появления окна настройки жестов и переходов (Gesture/Transition)
Выберите нужный вам жест. Тэпинг подойдет для этого типа ссылки. Затем выберите переход (Transition) - я остановился на варианте Slide Up (слайд вверх). Затем кликните Done. Переход настроен, протестируйте его в окошке Preview или на вашем iOS-устройстве!
Если выбранный переход не совсем подходит под ваши задачи, просто измените его в панели инспектора на вариант получше.
Фотогалерея
Вверху экрана есть панель навигации с кнопкой Back (Назад), которую мы создали в Sketch, через нее должен выполняться переход обратно на экран видоискателя.
Нажмите D для прорисовки кликабельной области вокруг кнопки Back, затем просто перетяните нить ссылки (Link Thread) обратно на экран видоискателя, выберите жест и переход.
Примечание: Переход на экран видоискателя по кнопке Back выбран только для этой сущности. Далее я покажу, как настраивать ссылку Назад так, чтобы учитывалось, на каком экране она нажата (разные переходы в зависимости от точки доступа).
Помните, в первой части урока я упомянул о миниатюрах изображения, расположенных за пределами артборда? Это было необходимо для тестирования функционала Scroll Group во Flinto. Сейчас мы его и настроим…
Сначала выделите слой с миниатюрами изображений (который сконвертировался в простой растровый слой внутри Flinto).
Как только он выделен, покажется наложение за пределами артборда, через которое легко перейти на следующий шаг.
Выберите Scroll Group из панели инструментов, или воспользуйтесь горячими клавишами Alt + Cmd + G для превращения этого слоя в прокручиваемую область. Если посмотрите на панель слоев, увидите, что теперь слой с миниатюрами расположен внутри папки scroll group.
Протестируйте это в превью или на своем устройстве, и увидите, как работает скролл миниатюр на экране под панелью навигации.
Оставим для группы скролла настройки по умолчанию, но вы можете и поэкспериментировать с доступными опциями в панели инспектора.
Первая миниатюра фото должна ссылаться на следующий экран (выбор фильтра), так что снова нарисуйте кликабельную область (D) вокруг миниатюры и настройте ссылку на следующий экран.
Экраны выбора фильтра и примененного фильтра
Первое, что вы заметите на экране выбора фильтра - у нас нет кнопки Назад!!
Ужас! Но как же перейти на предыдущий экран, если нужно?
Давайте я вам покажу…
Кликните D и нарисуйте кликабельную область на всю высоту экрана и около 220 в ширину, поместите ее с левой стороны экрана. Затем просто прилинкуйте ее к предыдущему экрану и в качестве жеста выберите Right Swipe, а переход - Pop Right.
Теперь можно запросто легко вернуться на предыдущий экран с помощью свайп-жеста. Проблема решена! Проделайте то же самое для экрана Filter Applied.
Transition Designer
Одной из лучших возможностей (среди всех прочих) явлется Transition Designer. До теперь я показывал доступные стандартные переходы. Но если вы попытаетесь создать собственный переход, вам понадобитсяTransition Designer.
Между экраном выбора фильтра и экраном примененного фильтра нужен переход, который бы при выборе одного фильтра внизу экрана возвращал обработанное большое изображение (якобы фильтр применен).
Мы пойдем простым путем. Дальняя правая миниатюра кликается для изменения большого фото на фото с градиентом (как показано на экране примененного фильтра), а затем переключается на изображение по умолчанию, когда нажимается крайняя левая миниатюра. Давайте проработаем этот тип взаимодействия с помощью дизайнера переходов.
На экране выбора фильтров нарисуйте кликабельную область (D) поверх последней миниатюры внизу, и прилинкуйте ее к экрану примененного фильтра. Затем кликните New Transition…
И вуаля! Мы вTransition Designer...
Вы увидите два экрана, между которыми нужно простроить переход, они также будут отмечены на панели слоев (Start Screen и End Screen)
Чтобы достичь желаемого эффекта, перетащите End Screen (экран примененного фильтра) поверх Start Screen (экран выбора фильтра).
Примечание: можете выделить весь экран, кликнув на красной границе экрана, и перетянув ее поверх другого экрана. С помощью красных гайд-линий выровняйте элементы.
Конечно, вы подумаете "Но подождите, я не хочу показывать примененный фильтр в начале перехода". Конечно, нет. Так что выделите слой с градиентом (на конечном экране) в панели слоев...
И затем из панели инспектора уменьшите непрозрачность слоя до 0%. Вот и все.
Можете кликнуть на Play вверху области канваса, чтобы увидеть переход в действии, а затем, когда вам все понравится, нажмите Save и Exit, чтобы вернуться в главное окно.
Также нам нужна возможность вернуться к изображению без примененного градиента. Так что, как и раньше, нарисуйте хотспот (D) на крайней левой миниатюре экрана с примененным фильтром, прилинкуйте ее к экрану выбора фильтра и выберите New Transition из появившегося окошка.
Вернитесь в Transition Designer, перетяните начальный экран (экран примененного фильтра) поверх конечного экрана (выбор фильтра). В начале перехода нужно отображать градиент, так что выберите слой фонового изображения конечного экрана (выбор фильтра) и сократите непрозрачность до 0%.
Нажмите Save and Exit, и протестируйте через превью Cmd + P.
В этой части урока я только поверхностно осветил опции дизайнера переходов. Это мощный инструмент, в котором масса опций для экспериментов. Так что для последнего экрана мы немного углубимся в настройках.
Экран информации
К этому экрану есть 2 точки доступа (через ссылку затвора), одна из экрана выбора фильтра, а другая из экрана примененного фильтра.
Давайте сначала расправимся с экраном выбора фильтра.
Нарисуйте ссылочную область (D) на экране выбора скрина, выберите New Transition (новый переход), который перенаправит вас назад в дизайнер переходов (Transition Designer).
На следующем скриншоте вы видите, что я вставил лого и кнопки на конечном экране (экран информации) в ступенчатом порядке, так что при использовании этого перехода элементы будут сворачиваться в один. Это очень удобная вещь во Flinto. Вы можете попробовать столько разных переходов, и Flinto позаботится об их анимации (все с помощью временной шкалы).
Я также настроил параметры Timing (временные параметры) для этих слоев (лого и кнопки). Изменил на Classic и увеличил длительность (Duration) до 700 мс.
Задайте имя вашему переходу. Я назвал его Stagger Slide. Затем нажмите Save и Exit.
Теперь вы можете создать еще одну кликабельную область (D) на экране примененного фильтра и из доступных опций выбрать переход, который вы только что создали.
В завершении работы нам нужно, чтобы ссылка back на экране информации учитывала, что мы приходим на этот экран с разных точек доступа. Так что нарисуйте кликабельную область (D) и перетяните нить ссылки на оранжевую стрелочку вверху экрана информации. Это поможет создать кнопку Back без привязки к конкретному экрану.
Пожалуй, мы закончили!
Я осветил только маленькую часть того, что возможно проделать в дизайнере переходов, но я надеюсь, что вы откроете гораздо больше.
Целью этой части было показать, насколько удобен Flinto в качестве приложения-компаньона для Sketch. Такой симбиоз продуктов однозначно заслуживает внимания!
Перевод статьи Marc Andrew
Топ коментарі (0)