Adobe Experience Design

Создание прототипов


Содержание сайта
Разное
Создание прототипов
Обзор программ л.6  /
Список программ



На рисунке - Experience Design CC (Beta) v. 0.6.32 (2017 г, июнь). Интерфейс многоязычный (русского языка нет).
Использование Beta-версии - бесплатное. В дальнейшем плата за использование программы будет, видимо, на уровне других программ Adobe, входящих в пакет Creative Cloud.
Работает в Windows 10 (64 бит), MacOS 10.10 и более новые версии, Android 4.2, Chrome on iOS 9, Safari for iOS 8.

Последняя версия Experience Design v 16,0 (2019 г).  Интерфейс на англ. языке.
Работает  в Windows 10 (64 бит, v1703 (сборка 10.0.15063) или более поздняя версия) или macOS 10.12 или более поздняя версия.
iOS - поддерживаются только 64-битные устройства
Android - поддерживаются устройства с Open GL ES 2.0; Android-устройства x86 не поддерживаются.

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

Набор функций программы, работающей или в системе Windows, или в Mac, различен. Так как версия для Windows начала разрабатываться только в последних версиях программы (с версии 0.6.8  декабрь 2016 г), то по функциональности она отстает от версии для Mac.

Adobe Experience Design имеет много общего с другими программами для прототипирования (например, с Axure RP Pro).
Преимущество программы в том, что она позволяет совместить разработку дизайна и создание прототипа на основе этого дизайна, т.е работа ведется в виде последовательных шагов.


Создание дизайна

Adobe Experience Design - не инструмент для рисования, как Adobe Photoshop, который часто применяют для создания дизайна сайта и который обладает большим количеством инструментов рисования.
Программа Experience Design оснащена инструментами намного скромнее Фотошопа (проще сказать - для рисования Experience Design мало приспособлена), и в этом она напоминает другую программу Adobe - Adobe Muse.
Но, как показывает опыт, этого небольшого набора инструментов, который имеется в программе (создание прямоугольников, эллипсов, линий, текста и пр), вполне достаточно как для разработки дизайна, так и для создания прототипов.

Очевидно, что разработчики Adobe Experience Design пошли по тому же пути, что и ранее при создании Adobe Muse - они постарались максимально упростить программу. Например, в Adobe Muse очень просто и хорошо сделана привязка конкретных страниц сайта к определенному шаблону. В Experience Design, в свою очередь, очень просто сделан механизм создания интерактивности в прототипе.

В программе возможно применение векторных объектов (элементов) и растровых изображений.

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

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

Редактирование группы. Легко создавать сложные формы путем объединения в группу объектов, используя логические операции.

Применение маски с формой - прямоугольной или в виде эллипса.

Увеличение определенной области, используя инструмент масштаба. Легко увеличить конкретную область вашей работы для более детального взгляда на ваш дизайн (функция Zoom).

Для оформления вставленных объектов используется, как основной инструмент, Инспектор свойств.

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

Использование символов и библиотеки символов. С помощью символов вы можете редактировать и повторно использовать объекты (дважды нажав на них). Символы будет автоматически обновляться при изменении дизайна. Вы также можете перетащить символы на монтажные области, или управлять ими из панели символов.
Поддержка символов, кистей, фигур и т.д. из Adobe Photoshop, Adobe Illustrator и Sketch. Скопируйте и вставьте объекты непосредственно в Experience Design.
Настройка отдельных символов и растровых изображений без внесения глобальных изменений документа.
Возможность обновления всех символов.

Хорошая скорость работы Experience Design позволяет создавать большие проекты для разных устройств.

В последних версиях программы для Windows  возможно:
  • применение и перемещение (перетасниванием) слоев,
  • применение градиентного заполнения,
  • применение стилей для текста (изменение стиля или цвета в отдельных разделах текста),
  • использование буфера обмена для копирования и вставки растровых изображений

Создание прототипа


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

Совместная работа, сотрудничество при разработке проекта. и обсуждение.

Создание  комментариев. - поделиться и получить обратную связь от ваших интерактивных прототипов путем создания веб-ссылок. отправить прототип заинтересованным лицам для комментариев. Рецензенты могут просматривать прототипы в настольных и мобильных браузерах.

Рецензенты могут прикрепить комментарии на прототип и непосредственно на конкретный элемент. При этом нет необходимости входа в систему с помощью идентификатора Adobe.

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

Интерактивные переходы с применением эффектов анимации.
Анимированные переходы имеют свои настройки. При настройке перехода анимации как “none” - простые переходы без анимации.
Вы можете просто обновить вашу последнюю ссылку при внесении изменений в прототип, вместо того чтобы создать новый.

Предприятия могут поделиться ссылкой на их прототипы, созданные в  Experience Design, с помощью услуги обмена в Интернете.


Возможность экспорта работы в виде отдельных PDF-файлов или как один файл PDF.
Импорт и экспорт PNG
Импорт SVG файлов. Помимо импортирования SVG-файлов, вы можете экспортировать свои ресурсы дизайна как SVG файлы со встроенными или связанными изображениями.

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

Авторское обучение (англ. язык)

См. также (видео):

Adobe XD Обзор программы Урок 1
Adobe XD Как начинать прототипирование Обзор программы XD Урок 2
Adobe XD Обзор программы. Подготовка материала для прототипирования Урок 3
Adobe XD Как оживить ваш макет Урок 4
Adobe Xd – обзор на Windows (виндовс) и Mac для дизайна интерфейсов UX/UI, сайтов, приложений.
Видео-обзор. Создание дизайна сайта.
Adobe XD Обзор и краткий урок. Быстро создаем интерактивный прототип.
Дизайн сайта в Adobe XD
Дизайн сайта в Adobe XD
Adobe Xd (Project Comet) полный обзор
Adobe XD. Создание сетки.


Скачать


Вернуться к обзору
Последнее обновление: июнь 2019 г.