Проектирование и прототипирование Windows-приложений с Adobe Design Experience CC (Beta)

Adobe Experience Design CC (Beta) или Adobe XD — это новый творческий инструмент от компании Adobe для проектирования высококачественных прототипов веб-сайтов и мобильных приложений. Вы можете попробовать новое публичное превью Adobe XD на Windows 10, выпущенный недавно.

Почему Adobe XD?
Хорошо продуманные приложения часто начинается с эскиза, грубого прототипа, всего того, что может быть показано всем заинтересованным сторонам. Но всегда была проблема в том, чтобы получить что-то пригодное для тестирования и демонстрации обязательно нужно было писать код. Вам нужны были разработчики, участвующие в создании прототипа, который возможно придётся выбросить. Но как только у вас есть разработчики, пишущие код, они не всегда заинтересованы чтобы изменить код — даже если это основывается на обратной связи для вашего прототипа. В своей книге The Inmates are Running the Asylum, Алан Купер обсуждает именно эту проблему. Вот где Adobe XD прекрасно подходит — этот инструмент специально разработан для построения быстрых прототипов, а также для высокой точности воспроизведения дизайна и пользовательского опыта. С помощью Adobe XD, любой пользователь может создать фреймы, интерактивные прототипы и высокодостоверный дизайн приложений и веб-сайтов. После того, как у вас есть свой прототип, вы можете импортировать визуальные эффекты в Visual Studio или IDE по вашему выбору, чтобы начать создавать окончательное приложение.

Ниже будет быстрый пошаговый обзор использования Adobe XD.

Проектирование пользовательского опыта
Чтобы дать вам представление о том, как использовать Adobe XD для разработки быстрых прототипов, я проведу вас через весь процесс, в котором я собираюсь перепроектировать приложение и создать быстрый прототип в Adobe XD. Я обнаружил, что наличие интерактивного прототипа с межэкранными переходами и несколькими экранами гораздо более эффективно для иллюстрации пути пользователя, чем раскадровки изображений экрана. Я разрабатываю новую версию приложения под названием Архитектура, которое изначально построено для Windows, но теперь я использую Xamarin чтобы сделать кросс-платформенную версию, которая работает на Windows, iOS и Android. Изучив архитектуру в колледже, я всегда любил чистый лист бумаги. Довольно часто я начинаю с грубого эскиза в моём блокноте, но это не то, что обычно является интерактивным или в состоянии, в котором им можно поделиться в высоком качестве, поэтому я использую XD.

Когда я начинаю работать, Adobe XD приветствует меня пустым холстом, где я хочу разместить монтажные области — по одной для каждого экрана моего приложения. Для того, чтобы разместить монтажные области на холст, я нажимаю кнопку монтажной области (последний значок на левой панели инструментов) — и я вижу варианты для различных форм-факторов устройства, включая варианты для iOS, Android, Surface и Web.

Для начала, я выбираю несколько размеров экрана, нажав на Android Mobile, iPhone и Surface Pro 4 в инспекторе свойств справа и тогда создаются пустые монтажные области для каждого формата на холсте проекта.

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

Теперь я хочу сосредоточиться на одном из кадров экрана для разных устройств, чтобы добавить некоторые подробности, в данном случае, это дизайн для Android с левой стороны. Я перемещаюсь по монтажной области с помощью сенсорной панели на моем компьютере, панорамируя двумя пальцами, увеличивая и уменьшая масштаб с помощью сенсорной панели жестами сжатия и расширения. Это такой же метод взаимодействия для XD как и на MacOS. В этом первом предварительном выпуске XD для Windows, поддержка сенсорного и пера еще не работает на холсте проекта, но они работают на панели инструментов и в инспекторе свойств. Моя команда работает в тесном контакте с командой XD для того, чтобы сделать хороший пользовательский опыт для пера и сенсорного экрана в Adobe XD, который будет готов в конце 2017 года.

Я начал работу над прототипом, добавив три красных прямоугольника для обозначения архитектурных достопримечательностей в Сан-Франциско, и прямоугольника в нижней части, которая будет работать в качестве кнопок для взаимодействия с пользователем. Когда я рисую каждую кнопку, XD направляет меня с помощью рекомендаций, чтобы помочь мне расположить кнопки по отношению друг к другу. Я игнорирую рекомендации, чтобы показать, что, выбрав все три кнопки, а затем нажав кнопку Выровнять по нижнему краю, находящуюся в верхней части инспектора свойств (панель справа), я могу быстро выровнять кнопки и установить их размеры, чтобы иметь одинаковую ширину и высоту в свойствах на панели задач. Затем я могу распределить кнопки по горизонтали с помощью горячих клавиш Ctrl-Shift-H. Вы также можете распределить объекты по горизонтали и по вертикали с помощью иконки распределения объектов в инспекторе свойств.

Затем я использую текстовый инструмент для добавления заполнения значков кнопок, я пользуясь набором шрифтов Segoe MDL2 (стандартный, поставляется с Windows) для оформления кнопок Buildings, Locate Me, Add. Через несколько минут у меня есть идеи насчёт приложения и создал первую страницу моего приложения Architecture. Теперь я хочу добавить еще одну страницу, которая будет использоваться для просмотра списка зданий, при нажатии на первую кнопку на первой странице. Я добавил еще одну мобильную страниц для Android, нажав на кнопку монтажной области и выбрав новую страницу для мобильных устройств Android. Новая монтажная область страницы теперь находится на моем холсте проектирования прямо под страницей, над которой я работаю. Так как эта страница предназначена для просмотра списка зданий, я начинаю в дизайне с того, как каждое здание в списке будет выглядеть. Я перетащил изображение здания с моего рабочего стола на квадрат, и автоматически изменяется размер и обрезается изображение до квадратного.

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

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

Последнее, что я хочу сделать на этой странице — это использовать различные изображения и текст для каждого здания в списке. У меня также есть текстовый файл с именами зданий, который я перетащу на текстовое поле «Building Name». Я мгновенно получаю список элементов с уникальными изображениями и текстом — идеальный дизайн для элемента Xamarin ImageCell, когда я буду готов написать для него код.

Теперь, когда у меня есть две связанные страницы, я хочу соединить их так, чтобы у меня был полноценный прототип, который начинается со страницы карты, а затем показывает страницу со зданиями, когда пользователь нажимает на кнопку Buildings. Я делаю это в интерфейсе Adobe XD для прототипирования, нажав на кнопку Prototype в верхней части окна. Я начинаю, нажав на кнопку Buildings на странице карты и кнопка подсвечивается синим цветом, а справа от кнопки появляется синяя стрелка. Все, что я делаю, это перетаскиваю, чтобы стрелка соединилась со страницей Buildings — тогда я могу установить тип и продолжительность визуального перехода — это очень легко.

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

В качестве последнего шага, я экспортировал монтажные области в изображения формата PNG и открыл их в Visual Studio, чтобы начать процесс вёрстки Xaml для моего приложения:

“Дизайн со скоростью мысли”
Adobe посмотрел в сторону того, чтобы XD позволял делать «дизайн со скоростью мысли» и с помощью этих простых последовательных шагов, я надеюсь, что наличие вашей идее и добавление этого приложения в ваш инструментарий поможет вам разработать прототип, тестировать и отлаживать ваши конструкции быстро и гибко.

Технологии, которые стоят за Adobe XD
Работа с компанией Adobe по переносу приложения такой сложности и качества поможет другим разработчикам подготовиться к разработке для Windows 10. Благодаря тесному сотрудничеству в этом приложении, мы взяли большую часть обратной связи от разработчиков Adobe, чтобы сделать универсальную платформу Windows еще лучше.
Adobe XD на Windows является UWP приложением на основе XAML, C++, JavaScript и стремится быть лучшим в классе представителей использования пользовательского опыта Windows UWP при совместном использовании, насколько это возможно, из их Mac версии. Adobe имеет очень высокую планку для разработки приложений, приложения тестируются с помощью автоматизированных тестов. Adobe выпустив первый релиз Adobe XD ранее в этом году для Mac как публичное превью и через это публичное превью для Windows, Adobe получила лучшее приложение для проектирования пользовательского опыта. Обратная связь получаемая для обеих версий, как для Mac, так и для Windows, делает XD еще лучше. Интересно отметить, что Adobe использует преимущества некоторых новых функциональных возможностей в ОС Windows Anniversary Edition, чтобы они могли выпустить Adobe XD через приложение Creative Cloud (через которое вы получите Photoshop, Illustrator Lightroom и другие творческие приложения сегодня) вместо Windows Store.

Формы поддержки проекта Adobe XD на платформе Windows
Теперь, когда вы можете начать использовать Adobe XD на Windows, пожалуйста, попробуйте его и отправьте отзыв в Adobe через их сайт UserVoice и помогите сформировать будущее Adobe XD на Windows, 10. Это только начало.
— Прочитайте в блоге компании Adobe об этом выпуске Adobe XD на Windows 10.
— Попробуйте публичное превью Adobe XD (всё, что вам нужно — это компьютер с Windows 10 Anniversary Edition и бесплатная учётная запись Adobe ID или Creative Cloud).
Отправьте свою обратную связь в Adobe на любую тему, но мы особенно заинтересованы в понимании того, как вы хотели бы использовать перо и сенсорные возможности в Adobe XD и как вы хотели бы использовать новый Surface Dial? Как бы вы использовали перо и сенсорные возможности одновременно с Adobe XD? Какие другие приложения и сервисы вы хотите, чтобы взаимодействовали с Adobe XD? Какие бы расширения Adobe XD еще улучшили бы ваш рабочий процесс дизайнера-разработчика?

Начните работать сегодня с Adobe XD на Windows 10 с помощью публичного превью сегодня.

Перевод оригинальной статьи Designing and Prototyping Apps with Adobe Experience Design CC (Beta)
Автор: Michael S. Scherotter
Перевод: Сергей Урусов

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *