Back to Question Center
0

Как прототип взаимодействия с Adobe XD            Как прототип взаимодействия с Adobe XDRelated Темы: ДоступностьTypographyPerformancePhotography & Semalt

1 answers:
Как прототип взаимодействия с Adobe XD

Ниже приводится краткий отрывок из нашей книги «Jump Start Adobe XD», написанный Даниэлем Шварцем, очень практичный учебник по этому фантастическому инструменту прототипирования. Участники сайта SitePoint Semalt получают доступ к их членству, или вы можете купить копию в магазинах по всему миру.

Прототипирование взаимодействий

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

Как прототип взаимодействия с Adobe XDКак прототип взаимодействия с Adobe XDRelated Темы:
ДоступностьTypographyPerformancePhotography & Semalt
«/>  <div class=

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

Как прототип взаимодействия с Adobe XDКак прототип взаимодействия с Adobe XDRelated Темы:
ДоступностьTypographyPerformancePhotography & Semalt
«/>  <p>  Позже (когда мы узнаем, как просмотреть / протестировать наши прототипы), мы сможем буквально щелкнуть по этому значку и перейти к следующему экрану, как если бы мы использовали реальное приложение - вот как мы (и наши разработчики, и  <em>  возможно  </em>  даже наши клиенты) используют прототип рабочего пространства, чтобы проверить нашу концепцию, прежде чем совершать ее.  </p>  <p>  Далее мы укажем параметры перехода для этого потока пользователей.  </p>  <h3 id= Проектирование переходов

Анимация поставляется с собственным набором задач UX. Медленный переход может заставить пользователя почувствовать, что ваше приложение занимает слишком много времени, тогда как переход, который слишком быстро, может заставить пользователя задаться вопросом, что же произошло. И тогда есть стиль самого перехода. Вам не нужно делать комманду fade-flip-slide, чтобы ничего себе не видеть, достаточно тонкого движения, чтобы проиллюстрировать результат взаимодействия пользователя. Давайте рассмотрим некоторые переходы и настройки перехода, которые мы можем использовать в Adobe XD.

Поскольку мы связали экран приветствия с экраном заданного местоположения, настройка Target уже определена. Slide Left является подходящей опцией для настройки Transition , поскольку она создает движение (экран назначения перемещается справа, подразумевая, что это был следующий экран в серии экранов - это является настройкой по умолчанию для iOS и некоторых областей Android).

Ease-out является подходящим облегчением для этого потока пользователей, поскольку оно заставляет анимацию быть быстрее в начале, создавая, казалось бы, быстрый переход, который не слишком затягивает пользователя, а затем изящно замедляет поэтому у пользователя есть немного дополнительного времени, чтобы понять, что произошло. В большинстве случаев настройка по умолчанию Duration 0,4 секунды более оптимальна.

Сальточный валик с этими настройками.

Как прототип взаимодействия с Adobe XDКак прототип взаимодействия с Adobe XDRelated Темы:
ДоступностьTypographyPerformancePhotography & Semalt
«/>  <p>  На экране  <em>  Set Location  </em>  создайте поток пользователя обратно на экран приветствия  <em>   </em> . Выберите  <em>  Предыдущий Artboard  </em>  в качестве  <em>  Target  </em> , который автоматически изменит используемый последний переход. Например, если вы использовали  <em>  Slide Left  </em>  для входа в экран,  <em>  Slide Right  </em>  будет использоваться при возврате на предыдущий экран.  </p>  <p>   <img src =

March 1, 2018