Image for post
Image for post

Learn how to generate prototypes from Sketch to test ideas and preview custom transitions with Framer

Iterations with Framer

We create, show, get feedback and repeat again and again to make products better. How about doing this in Framer even without a single line of code written? It’s possible with Export Prototype feature of Framer Inventory.

How to export a prototype

Make layers exportable in Sketch and get a prototype& their animations between selected artboards. By default, exported prototype is similar to a Keynote presentation with a Magic Move transition between slides but created in Sketch.


Image for post
Image for post

Learn how to semantically import your design into Framer

Choose layers you’d like to import into Framer and get the code & assets done for you. You can keep complex prototypes up-to-date with semantically imported .

How to start

Download Framer Inventory plugin for Sketch and choose Show Toolbar from plugin’s menu. You’ll be asked to select a Framer folder to let plugin know the place for assets. Match device type in both plugin & Framer and you are ready to go.


Гайдлайны Apple. Перевод.

Брендинг

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

Так как iOS предоставляет широкие возможности по настройке цветов, иконок и шрифтов, это позволит вам создать уникальное приложение, в тоже время следует помнить:

  • Каждый элемент, не являющийся базовым, должен выглядеть красиво и выполнять свои функции, а также быть уместным по отношению к другим элементам, независимо от того, являются ли они базовыми или созданными вами.
  • Чтобы приложение воспринималось пользователем действительно как приложение…


Гайдлайны Apple. Перевод.

Анимации

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

  • Показывать статус определенного действия
  • Усиливать чувство непосредственного управления приложением
  • Визуализировать ту или иную часть приложения

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

Используйте анимацию с определенной целью и в рамках определенной задачи. Анимация должна решать поставленную перед ней проблему.

Делайте непрерывную анимацию. Если пользователь проходит через несколько экранов, и они вызывают несколько анимаций…


Гайдлайны Apple. Перевод.

Интерактивность и отклик приложения

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

Использование жестов очень важно, это дает пользователю ощущение непостредственного взаимодействия с элементами интерфейса и увеличивает чувство вовлеченности при манипуляции с объектами. Есть набор системных жестов, которые пользователи ожидают увидеть во всех приложениях. Примером такого жеста является свайп (смахивание элемента) элемента таблицы справа налево, что обычно позволяет увидеть кнопку для удаления элемента.

Базовые жесты…


Гайдлайны Apple. Перевод.

Модальность

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

Image for post
Image for post

Использование модальности допускается, когда:

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

Модальные окна

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


Гайдлайны Apple. Перевод.

Навигация

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

Существует 3 основных структуры навигации:

  • Иерархичная
  • Плоскостная
  • Контентонаправленная

Иерархичная структура

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

Image for post
Image for post

Плоскостная структура

В приложении, которое использует данный вид структуры, пользователи могут…


Гайдлайны Apple. Перевод.

Компоновка

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

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

Image for post
Image for post

Помогите пользователю сфокусироваться на основной задаче, выделите основной контент и функциональность. Хорошим приемом будет являться размещение элементов по “координатным осям рассеивания внимания”. …

Timur Nurutdinov

Saving the world. Shaping the world. Creating the world.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store