Adobe xd — нужна помощь в adobe xd


Содержание

Проектирование и прототипирование 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, который будет готов в конце 2020 года.

Я начал работу над прототипом, добавив три красных прямоугольника для обозначения архитектурных достопримечательностей в Сан-Франциско, и прямоугольника в нижней части, которая будет работать в качестве кнопок для взаимодействия с пользователем. Когда я рисую каждую кнопку, 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 еще улучшили бы ваш рабочий процесс дизайнера-разработчика?

Цукерберг рекомендует:  Вакансии ПИК Digital

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

Adobe xd — нужна помощь в adobe xd


для тех, кто ищет курсы:

Войти в аккаунт

Чтобы воспользоваться всеми функциями сайта, вам необходимо зарегистрироваться/войти в свой аккаунт на сайте. Выберите вашу соцсеть для входа:

Если вы организация, проводящая курсы, то регистрация происходит по этой ссылке.

Уроки по Adobe XD для начинающих: бесплатные видео для обучения

Все Курсы Онлайн нашли лучшие бесплатные уроки по XD для изучения программы с нуля.

Adobe xd — нужна помощь в adobe xd

Никакой «воды» – только ценная информация и работающие лайфхаки по веб-дизайну и программированию

Лайфхаки в работе с Adobe XD

«Будущее UX-дизайна» — такой слоган имеет относительно новый продукт компании Adobe Systems — Adobe Experience Design. Как заявляют разработчики продукт разработан для создания и прототипирования макетов сайтов и мобильных приложений. Главным преимуществом нового продукта, по мнению создателей, является возможность редактирования макетов из Photoshop или Sketch, которые будут автоматически преобразованы в XD файлы. Переходите от концепции к прототипу с помощью универсального UX / UI-решения легко и быстро.

Сегодня мы познакомим вас с хитростями программы, которые помогут сэкономить время на освоении программы.

Наследование текста

При работе с инструментов «Текст», по умолчанию установлен стандартный стиль текста. Просто перетащите текстовый объект в область ввода текста. Текст, который вы напечатаете далее унаследует копируемый, как шрифтом так, размером так и интервалами.

Смыкание кривой

Сомкнуть кривую в Adobe XD можно просто нажав на начальную точку, либо поставить точку в любом месте, при нажатом инструменте «Перо».

Преобразование объектов в кривую

Если вам еще сложно создавать с нуля иконки, вы можете начать с несложных фигур, которые можно преобразовать в кривую. Например прямоугольник или круг. Для преобразования просто кликните дважды по фигуре. И если никаких изменений вы не внесете, она снова приобретет первоначальный вид. Если изменений не предполагается, а объект должен стать кривой линией – используйте горячие клавиши Cmd+8 на Mac или Ctrl+8 на Windows. Если вы находитесь на границе фигуры, инструмент поменяется на «Перо», чтобы добавить точку на линии. Существует возможность разорвать фигуру. Для этого выбирайте инструмент «Перо» и нажимайте на начальную точку.

Для перемещения пользуемся «Рукой»

Чтобы поменять текущий инструмент на «Руку» просто зажмите клавишу Space. После этого, зажмите левую кнопку мыши и перетащите объект в нужное место.

Горячие клавиши для выбора цвета

Вы можете набрать любое шестнадцатеричное значение, чтобы оно повторялось для всех шести значений.


  • Одиночные символы (например, a) повторяются для всех значений (#aaaaaa)
  • Двойные символы (например, az) повторяются по порядку (#azazaz)
  • Тройные символы (например, 123) каждый символ повторяется по порядку (#112233)

Копировать/Вставить

Чем отличается функция «Создать дубликат», от функций «Копировать» и «Вставить». Объясняем. При дублировании объект перемещается на тот же уровень про Z-координате. В другом случае переместит его вверх.

Экспорт исходников

Это является значимой частью работы любого дизайнера, особенно при передаче на верстку. По умолчанию программа будет экспортировать с различным разрешением, в зависимости от платформы. Например, если вы экспортируете для iOS, вам понадобятся 1x, 2x, и 3x версии ресурсов. Если вы создаете иконку в разрешении 100 x 100 и установите «designed at 1x», мы будем экспортировать версии 100 x 100, 200 x 200 и 300 x 300 для полного набора. Однако, если вы создадите иконку в разрешении 90 x 90 и установите «designed at 3x,» мы будем экспортировать в 30 x 30, 60 x 60, и 90 x 90 для создания 1x, 2x, и 3x версий.

Управление контекстом

Несколько хороших советов при работе с редактированием контекста:

  • Прямое выделение встроено в инструмент выделения. Чтобы его выбрать нажмите Cmd (Mac) или Ctrl (Windows 10) чтобы выбрать объект, вне зависимости от того, как глубоко от вложен;
  • Открытие контекста возможно прямо в группе, двойным щелчком по любому объекту. Внутри редактирования контекста, можно использовать все объекты в нем (выделять и выравнивать по отношению друг к другу).
  • После редактирование, просто нажмите Escape, чтобы выйти из него.

Хотите больше секретов, лайфхаков и хитростей? Делайте репосты и пишите в комментариях какую тему вы хотите, чтобы я подробно описал в следующих статьях.

Adobe XD 2020

Представлена новая версия программы Adobe XD 2020 или Adobe XD выпуск от октября 2020 года или Adobe XD 23.
Adobe XD позволяет полностью переосмыслить дизайн-процесс в организации. Это универсальный инструмент, ускоряющий все этапы разработки, от монтажной области до каркаса и прототипа.
Наши испытания подтвердили, что Adobe XD CC почти в 10 раз повышает производительность некоторых основных рабочих процессов.
Adobe XD — это единое решение, позволяющее разрабатывать пользовательские интерфейсы, создавать интерактивные прототипы, отправлять работы редакторам, поэтапно дорабатывать проекты и просматривать обновления в режиме реального времени. Решение XD интегрировано с Creative Cloud, поэтому весь процесс разработки выполняется почти в 3 раза быстрее.
Возможность мгновенно переключаться между статичным каркасом и интерактивными прототипами ускоряет коллективную работу. Изменения проектов автоматически распространяются на прототипы, поэтому работа выполняется в 10 раз быстрее.
Adobe XD изначально поддерживает как macOS, так и Windows 10. Благодаря поддержке обеих операционных систем ваши дизайнеры могут сразу приступить к работе, не осваивая новую систему.
Adobe XD поможет вашим сотрудникам быстро приступить к работе. Adobe Admin Console упрощает развертывание лицензий и управление пользователями в масштабе всей организации.
Интеграция единого входа, защита паролем и личные приглашения позволяют видеть, кто просматривает, проверяет и комментирует общие прототипы и проектные спецификации.
Выпуск Adobe XD 2020 включает в себя некоторые захватывающие новые сочетания клавиш и изменения пользовательского интерфейса, которые несомненно, ускорят ваш рабочий процесс, а также введение столь востребованных режимов смешивания. Режимы наложения позволяют создавать более визуально привлекательные изображения и графику в XD с предопределенными настройками, такими как Lighten или Multiply, которые объединяют изображения с другими слоями в ваших проектах для создания интересных и уникальных эффектов, используя ту же функциональность, которую вы можете получить при смешивании в Adobe Photoshop CC 2020 и Adobe Illustrator CC 2020.
Также в этот выпуск включены новые функции, которые облегчают работу с покрытыми или перекрывающимися или скрытыми слоями как в спецификациях дизайна, так и прямо на холсте дизайна в приложениях xD Windows и Mac. Вы также найдете новые сочетания клавиш, которые помогут вам легко перемещать и изменять размер объектов.
Режимы наложения: создание потрясающих эффектов для изображений и графики.
Режимы наложения (Blend modes) в Adobe XD позволят вам использовать предустановленные алгоритмы, такие как облегчение (Lighten) или умножение (Multiply), чтобы смешать слой с фоном или другим слоем на холсте дизайна. Вы можете использовать режимы наложения, чтобы, например, создать эффект дуотона для изображений, которые включают цвета вашего бренда.
Чтобы использовать эту функцию, просто нажмите на объекты или объекты и фоны, которые вы хотите смешать. Вы увидите новое выпадающее меню в Инспекторе свойств (Properties Inspector), где вы сможете выбрать один из нескольких различных режимов наложения, например светлые или темные вариации.

Если вы использовали режимы наложения в других инструментах Adobe, таких как Photoshop CC 2020 или Illustrator CC 2020, вы увидите, что функциональность очень похожа. Это также означает, что вы можете легко перенести режимы наложения, определенные в этих инструментах (и эскиз), в XD, благодаря функциям импорта. Эти импортированные смеси не только преобразуются в XD, но и остаются полностью редактируемыми. Режимы смешивания остаются неразрушающими во все времена, и когда придет время передать свой дизайн в качестве спецификации дизайна для ваших разработчиков, они смогут просматривать атрибуты режима смешивания по мере разработки готового продукта.
Легко перемещать и изменять размер объектов с помощью новых сочетаний клавиш.
Сочетания клавиш значительно ускоряют ваш рабочий процесс, и если вы поклонник их, вам понравятся эти новые сочетания клавиш для регулировки размера и положения объектов на холсте дизайна.
Хотя вы всегда могли перемещать объекты с шагом в 1 пиксель с помощью клавиш со стрелками, теперь вы можете:
— Нажмите клавиши Shift + стрелки, чтобы переместить выделение с шагом 10 пикселей.
— Нажмите Command (Mac) или Alt (Windows) + клавиши со стрелками, чтобы увеличить или уменьшить размер с шагом в 1 пиксель.
— Нажмите клавиши Shift + Command (Mac) или Alt (Windows) + Arrow, чтобы увеличить или уменьшить размер с шагом в 10 пикселей.

Вы также можете использовать эти существующие и новые ярлыки, чтобы упростить привязку объектов к сеткам компоновки. Включив сетку и используя указанные выше ярлыки, можно быстро переместить объект на следующую строку сетки. Это же поведение также работает для изменения размера объектов — с включенной сеткой, вы можете изменить размер объекта до следующей строки сетки, и настроить дальше с дополнительными щелчками клавиш со стрелками.
Более глубокое сотрудничество по прототипам с использованием команд Microsoft и Slack.
Проектные группы по всему миру используют такие инструменты, как команды Microsoft и Slack, чтобы сотрудничать над проектами с другими участниками и выполнять работу. С помощью Adobe Creative Cloud integration for Microsoft Teams и Adobe Creative Cloud integration for Slack тысячи команд совместно используют файлы Creative Cloud, получают уведомления об изменениях и обновлениях и могут обновлять разрешения на файлы непосредственно из своих любимых инструментов.
Мы рады поделиться обновлением этих интеграций, чтобы помочь вам легко сотрудничать вокруг прототипов XD и проектных спецификаций непосредственно с любой коммуникационной платформы, которую использует ваша команда. Обновленные интеграции позволяют просматривать и добавлять комментарии к общим артефактам непосредственно из команд или Slack, поэтому вы можете централизовать все свои коммуникации на одной платформе, одновременно сотрудничая с другими. При публикации комментария к прототипу XD или Design Spec, вы получите уведомление в командах или Slack через приложение Creative Cloud. Теперь вы можете просто запустить поток и ответить на комментарии к вашему прототипу XD. Кроме того, если вы являетесь владельцем или сотрудником, вы будете получать уведомления, когда кто-то @упоминает вас в комментарии к вашей ссылке на прототип XD, привлекая только самые релевантные комментарии к вашему вниманию.
Интеграция Creative Cloud для Slack доступна сегодня в каталоге приложений Slack, и в ближайшее время будет обновлена интеграция Microsoft Teams.
Легко получить доступ к скрытым или перекрывающимся слоям на холсте дизайна и в спецификациях дизайна.
Часто проектировщики добавляют перекрывающиеся слои к своим конструкциям при создании наложений, используя режимы наложения или используя один из булевых операторов (Boolean operators), доступных в XD, таких как Intersect, Add или Subtract. Это означает, что слои похоронены друг под другом, что затрудняет прямой выбор слоев.
Этот последний выпуск Adobe XD позволяет вам просеивать слои и выбирать перекрывающиеся объекты, как на холсте дизайна, так и в спецификациях дизайна (Design Specs). Теперь, если слои скрывают друг друга на холсте дизайна, вы можете использовать сочетание клавиш Cmd (Mac) или Ctrl (Windows) + click для циклического просмотра стека перекрывающихся слоев.

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

Цукерберг рекомендует:  Пер кг - Как стаить разработчиков на телефоне xiaomi redmi 4A

Благодаря этому простому в доступе порядку наслоения, вы сможете увидеть все объекты в любой одной области, что должно облегчить любые разочарования вокруг доступа к объектам, которые перекрывают друг друга.
Захватывающие события на горизонте: Live Coediting и многое другое.
Хотя мы очень рады поделиться всем новым в этом выпуске Adobe XD в октябре 2020 года, на горизонте есть некоторые удивительные события. В прошлом месяце старший директор по управлению продуктами XD Эндрю Шортен поделился сообщением дорожной карты (который полон «утечек» предстоящих функций).
Одна из самых больших фишек, которая будет добавлена — это введение живого совместного редактирования, которое позволит нескольким дизайнерам иметь один и тот же документ XD, открытый в то же время, и редактировать проекты вместе, в режиме реального времени.

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

Ваш первый прототип e-commerce сайта с помощью Adobe XD

Russian (Pусский) translation by Ola Matona (you can also view the original English article)

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


Adobe XD можно использовать для создания как мобильного, так и десктопного дизайна. В его рабочем пространстве можно спроектировать дизайн, и, в то же время, добавить простую интерактивность, которую после можно отправить разработчику или презентовать клиенту.

Мы будем делать дизайн сайта для простого интернет-магазина одежды, под выдуманным брендом “Lo-Key”, который продает линейку базовой одежды в стиле Urban. Если вы хотите использовать это руководство для создания дизайна сайта своего магазина, меняйте полученные результы, экспериментируйте.

1. Изучите своих пользователей

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

Пользовательское исследование: как составить план интервью

Как лучше задавать вопросы при проведении пользовательского исследования

Если вы просто хотите попробовать работать в Adоbe XD и узнать, как создать прототип, то вы конечно тоже можете использовать это руководство. Только не считайте, что описанный здесь процесс является исчерпывающим!

Как только вы будете готовы приступить к созданию визуального и интерактивного макета, переходите к следующему шагу.

2. Выберите размер экрана

Первым делом Adobe XD предложит вам выбрать размер экрана. По умолчанию размер экрана для интернета Web 1920 (1920 X 1080 px), но вы также можете выбрать и другие варианты (Web 1280 или Web 1366) или задать свой размер.

После выбора вы увидите рабочую среду XD, по умолчанию будет выбран режим Дизайн и будет отображена монтажная область («холст») выбранного вами ранее размера.

3. Продублируйте вашу монтажную область

Мы будем делать макеты для четырех типичных страниц интернет-магазина:

  1. домашнюю страницу
  2. страницу категории («Майки«)
  3. Корзину (где будут товары, добавленные пользователем, к оплате)
  4. страница О нас (где будет информация о бренде)

Также нам нужны будут области для выпадающего меню и всплывающих окон с деталями выбранного продукта (эффект «лайтбокса»), но их мы сделаем позже.

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

Или же вы можете выделить первую монтажную область и в меню выбрать Edit > Duplicate (Редактирование > Дублировать). Переименуйте новые области, дважды кликнув на названия по умолчанию (они видны в верхнем левом углу каждой области).

4. Вставление изображений и текста

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

Совет: Вы можете подсказать Adobe XD, что текущая монтажная область является домашней страницей, выбрав эту область и нажав на серый ярлык рядом с ее левым верхним углом. Он станет синим, что указывает на то, что эта область будет начальной страницей при взаимодействии с вашим сайтом.


Определившись с фотографией, выберите File > Import (Файл > Импорт) (или нажмите Cmd + Shift + I), чтобы выбрать ее месторасположение на вашем компьютере и импортировать ее в вашу монтажную область. Если ваша фотография больше чем монтажная область, нажмите на нее и, удерживая клавишу мышки, переместите в нужное положение.

Продолжая следовать эстетике минимализма, текста тоже будет немного — только название бренда (или логотип), слоган и навигация.

Выберите инструмент Text (Текст) на панели слева, кликните в любое место на монтажной области и начните набирать текст. Текст логотипа я помещу чуть ниже середины, но вы всегда можете все подвинуть позже. И вы конечно можете вставить логотип как изображение, тем же самым способом, что мы добавляли фотографию.

Под текстом логотипа, используя инструмент Text (Текст) снова, вставляем слоган бренда.

В Adobe XD есть много возможностей для форматирования вашего текста. Вы можете выбрать любой блок с текстом и изменить его шрифт, стиль, цвет, размер и другие параметры. Снимок экрана ниже показывает возможности форматирование блока с текстом для навигации на домашней странице.

Шрифт в этом примере подобран в гармоничном соотношении 1:2, о котором вы можете больше узнать в этом руководстве по типографике в интернете:

Как построить модульную шкалу для типографики

Используя полученную выше информацию, добавьте названия страниц на оставшиеся четыре страницы и вставьте изображения и текст для страниц Корзина и О нас.

5 . Создайте символ

Обратимся к странице О нас.

Найдите иконку для навигации, которая вам нравится (например из этого набора) и разместите ее рядом с логотипом в верхнем правом углу на странице О нас (или на любой другой странице, кроме домашней)

Так как эта иконка с логотипом нужна и на других страницах, то вы можете сделать из нее Символ. Кликните правой клавишей мышки и выберите Make Symbol (Создать символ) (или нажмите Cmd + K). Вы можете просмотреть любые созданые вами сивмолы, нажав в левой панели на иконку Assets (Ресурсы). Оттуда вы можете перетащить символ на любую из монтажных областей. Так вам не придется постоянно копировать и вставлять их.

Вы можете связать/залинковать ваш символ Lo-Key с главной страницей в следующем шаге.

6. Создайте вашу первую ссылку

Переключитесь в режим Прототипа на верхней панели. Приблизьте вашу первую монтажную область (Домашнюю страницу) и выберите текст About (O нас). Около него появится синяя стрелка. Нажмите и потащите ее. Вы увидите как за ней будет тянуться линия туда, куда вы переместите курсор.

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

Повторите эту операцию, чтобы связать остальные страницы.

7 . Используйте режим наложения для выпадающих меню и лайтбокса.

Теперь добавим в навигацию выпадающее меню.

Создайте новую монтажную область с названием Nav и измените ее размеры используя контролы Width (Длина) и Height (Высота) на правой панели. Размер области Nav ниже 210 X 275 px.

Используя инструменты на левой панели Text и, по желанию, Line, нарисуйте ваше выпадающее меню. Меню появится, когда пользователь нажмет на иконку меню «гамбургер».

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


Теперь нажмите на иконку Play (Запустить) в правой верхней части окна. В окне просмотра появится ваша домашняя страница. Нажмите на About, чтобы перейти к странице About. Теперь кликните на иконку гамбургер. Откроется выпадающее меню. Кликните еще раз, и оно исчезнет.

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

8 . Используйте Repeat Grid (Повторение сетки) для создания строк и столбцов объектов.

Для нашей страницы Майки, мы будем делать несколько рядов с продуктами.

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

Используйте инструмент Rectangle (Прямоугольник) из левой панели, чтобы нарисовать прямоугольник размером 450 X 300 px. А после, используя инструмент Fill (Заполнить) на правой панели, покрасьте его в серый цвет, чтобы показать, что это заглушка для изображения.

Теперь выделите прямоугольник и нажмите на Repeat Grid (Повторение сетки) на правой панели (или выберите в меню Object > Repeat Grid (Объект > Повторение сетки). Вы увидите зеленый контур и ползунки вокруг выбранного элемента, которые можно потянуть в любом направление (по горизонтали или вертикали). В нашем случае, потяните за них так, чтобы получились два ряда с тремя колонками.

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

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

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

9 . Необязательный шаг: поделитесь!

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

Если вы работаете над приложением или сайтом для клиентов, то вы можете поделиться с ними ссылкой на ваш дизайн проект, выбрав File > Share > Publish Prototype (Файл > Поделиться > Опубиковать прототип).

Вы также можете опубликовать Дизайн Спецификацию для разработчиков (или любого другого коллеги), чтобы они могли посмотреть форматирование и другие параметры вашего прототипа в браузере. Они также могут скачать все ресурсы, например, фотографии или иллюстрации, которые вы пометите для экспортирования (используйте View > Layers (Вид > Слои). Вы можете выбрать любой элемент и нажать иконку рядом с ним, или, кликнув правой клавишей мышки на любом элементе из списка выбрать Mark for Batch Export (выбрать для группового экспорта).

Дизайн спецификация в веб браузере

Заключение

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

Adobe xd — нужна помощь в adobe xd

Новые темы необходимо создавать только в корневом разделе! В дальнейшем они будут обработаны модераторами.

Если Вы выложили новую версию программы, пожалуйста, сообщите об этом модератору нажав на вашем сообщении кнопку «Жалоба».

Последнее обновление программы в шапке: 29.11.2020


Краткое описание:
Инструмент для просмотра интерактивных прототипов от Adobe

Описание:
Переходите от концепцта к прототипу быстрее с помощью Adobe XD.
Устраните догадки, предварительно просмотрев ваши проекты Adobe XD на собственных устройствах в режиме реального времени через USB (только для macOS) или загрузив их из Creative Cloud Files.

Требуется Android: 5.0 и выше
Русский интерфейс: Нет

Введение в Adobe XD

Создаем UI с помощью Adobe Experience Design

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

Хороший дизайн

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

Цукерберг рекомендует:  Beginner - Помогите поднять Zend 2 проект

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

Жизненный цикл разработки дизайна

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

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

Техническое задание

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

Карта разделов

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

Контент

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

Прототип

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

Дизайн


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

Инструменты UI/UX дизайнера

Я бы выделил три интересных решения существующих на рынке в данный момент:

  • Sketch
  • Figma
  • Adobe Experience Design

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

Adobe Experience Design

Adobe XD — это кроссплатформенное решение от Adobe, предназначенное для создания прототипов мобильных приложений и веб-сайтов. Лично мне XD приглянулся своей простотой и возможностью создавать интерактивные прототипы проектов, которыми можно легко поделиться с членами своей команды. Пока что проект находится в бета тестировании, поэтому для того, чтобы им воспользоваться достаточно просто скачать его с сайта Adobe, по выходу из беты XD скорее всего будет доступен по подписке в 20$ за месяц.

Adobe XD в работе

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

вот такая структура у меня получилась, осталось лишь отразить ее в графике, давайте запустим XD, указав размеры экрана соответствующие iPhone 6/7:

Воспользуемся инструментом Line (L) для отрисовки navigation bar’а и площадки для пользовательской информации. В панели Appearance установим соответствующую заливку и тень для получившихся фигур:

Отлично, давайте займемся navigation bar’ом, первое что нам необходимо сделать — открыть iOS UI Kit (File > Open UI Kit > Apple iOS) скопировать черный status bar и вставить его на наш макет:

Теперь установим на наш navigation bar иконки кнопок Settings и Back, а так же с помощью инструмента Text (T) дадим нашему navBar’у заголовок:

Мы закончили с navigation bar’ом, теперь можно браться за пользовательский контент, с помощью понравившихся иконок и уже знакомого вам инструмента Text (T) отобразим социальные метрики нашего пользователя:

Отобразим аватар нашего пользователя, для этого с помощью инструмента Ellipse (E) нарисуем круг (зажимаем shift), а после этого перетащим картинку с аватаром на получившийся графический примитив. Отобразим location, description а так же пользовательское имя с помощью инструмента Text (T):

С помощью инструмента Rectangle (R) и инструмента Text (T) нарисуем кнопку для добавления пользователя:

Остался последний штрих, с помощью инструмента Rectangle (R) создадим прямоугольник на который перетащим наш Cover image и с помощью комбинации клавиш Cmd + <установим получившееся изображение за верхними слоями:

Отлично! Давайте взглянем на результат:

Вместо заключения

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


Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Теперь Adobe XD бесплатно для всех пользователей Windows 10

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

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

Несомненно, люди не хотят тратить большие деньги на продукты Adobe и используют другие приложения. Например, графический редактор GIMP является популярной альтернативой Фотошопу, а векторный редактор Inkscape – Иллюстратору. Не будем затрагивать работу с файлами PDF-формата в Acrobat Reader, для него тоже есть много достойных альтернатив.

Прежде всего, стремясь сохранить доминирующее владение на рынке графического дизайна, Эдоуби сделала правильный шаг. Теперь Adobe XD CC – программа для разработки интерфейсов, поддерживающая работу с векторной графикой и веб-верстку, стала бесплатной для всех. Это значит, что вам больше не придется отдавать свои кровные за использование программы для проектировании интерфейсов.

ADOBE XD

Посетите официальный веб-сайт по этому адресу:

где нажмите на кнопку “Get XD for free”. Загрузите в любую папку на своем компьютере файл установщика. Запустите его и следуйте инструкциям Мастера инсталляции. Во время установки необходимо будет создать свой ID-идентификатор.

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

Несомненно, это умный ход компании. Теперь, если кто-либо из пользователей когда нибудь начнет искать программное обеспечение для разработки и дизайна пользовательского интерфейса, он предпочтет работать в Adobe XD CC, чем в других продуктах. Ведь дополнительно повышается спрос и на другие сопутствующие пакеты программного обеспечения именно этой компании.

Да, стоит напомнить, что в процессе установки вы получите и облачное хранилище Creative Cloud для ПК. Удалить его, в случае неиспользования, можно при помощи официального инструмента. Подробной инструкцией можно воспользоваться после перехода по этому URL-адресу. Спасибо за внимание!

Если вы ищете библиотеку компьютерных советов, где они рассортированы по категориям, посетите нашу Карту ресурса. В ней сможете найти разные полезные пошаговые инструкции.

UI UX дизайн с помощью Adobe XD — Adobe XD уроки дизайна

Откройте для себя наши Adobe XD уроки дизайна и начните создавать качественный пользовательский интерфейс (UI) и опыт взаимодействия (UX).

Чему вы научитесь?

  • Узнайте, как использовать шрифты и цвета
  • Узнайте, как тестировать свои проекты на мобильных устройствах
  • Узнайте, как экспортировать определённые ассеты
  • Узнайте, как создавать каркасы

  • Научитесь дизайну профессиональных сайтов и приложений

Содержание

Раздел 1: UI UX дизайн с помощью Adobe XD — Adobe Experience Design

Описание

Если вы всегда хотели создать удобный и привлекательный сайт или приложение, но кажется совсем запутались в различных UX программах и дизайне — значит вы нажали на правильную ссылку. В данном курсе по Adobe XD, вы научитесь всему, что вам необходимо для успешного использования программы Adobe XD. Вам больше не придётся страдать, пытаясь улучшить ужасный дизайн или пользовательский интерфейс — как только вы освоите Adobe XD уроки дизайна, то UI UX дизайн перестанет быть для вас головной болью при создании вашего будущего проекта!

Почему именно наш курс по Adobe XD?

Я буду с вами честен — вам будет очень тяжело найти тот самый курс, который подойдёт именно вам и научит вас правильному использованию Adobe XD для вашего сайта или приложения. Но, тогда почему вы должны обратить внимание именно на этот курс, если в сети существуют сотни (если не тысячи) других уроков и статей на эту тему? Что же, позвольте мне ответить всего одним простым словом — постоянство.

Множество «профессиональных дизайнеров», которые предлагают услуги по онлайн обучению просто напросто закидывают вас информацией и оставляют вас разбираться с ней в одиночку. Не каждый обладает должным упорством, чтобы изучить весь теоретический материал. К тому же дизайн плавного и эстетически приятного пользовательского интерфейса (кроме того — предоставление отличного опыта взаимодействия с вашим сайтом) задача не из лёгких — здесь есть несколько важных вещей, которые вам нужно не просто запомнить, а понять, как они работают. Не будет никакой пользы, если вы будете обладать огромным количеством теории, но не будете знать, что с ней делать.

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

Зачем использовать Adobe XD?

Всё очень просто, правда. Люди не часто слышат про Adobe XD — поэтому я расскажу про него подробнее.

Adobe XD — это одна из лучших программ для разработки, ориентированная именно на пользовательский опыт. Главной целью для вас, в качестве дизайнера или разработчика, является приобретение знаний из нашего курса про UX дизайн и научится создавать сайты и приложения настолько привлекательными для пользователя, насколько это возможно. Adobe XD позволяет вам сосредоточится только на создании лучшего опыта взаимодействия (UX) — и наши Adobe XD уроки и лекции научат вас его использовать!

Кто может записаться на данный курс?

Опытные или начинающие, профессионалы или любители — любая категория людей может записаться на этот курс и начать изучать UX дизайн! Наш курс по Adobe XD в основном создавался для новичков в дизайне, тем не менее даже опытные дизайнеры смогут открыть для себя много интересного, вроде информации о новых каркасах, шрифтах или ассетах!

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

Итак, без лишних слов, схватите эту возможность и начните своё знакомство с Adobe XD прямо сейчас!

Мастер веб-дизайна #3. Создание дизайна сайта в Adobe XD (Experience Design)

Всем привет, дорогие друзья! Сегодня мы создадим простой и современный дизайн сайта в программе Adobe Experience Design (Adobe XD). Это наш первый урок по работе в новом инструменте от Adobe для создания дизайна и прототипирования современных веб-сайтов, мобильных версий сайтов и мобильных приложений.

Материалы урока

Превью готового результата (Result Preview): Смотреть

Исходник Adobe XD, изображения, готовый результат: Скачать

Bootstrap 1170 XD: Скачать

Бесплатный сток фотографий: https://unsplash.com

Премиум уроки от WebDesign Master

Создание контентного сайта на Jekyll от А до Я

Создание современного интернет-магазина от А до Я

Я — фрилансер! — Руководство успешного фрилансера

Понравилась статья? Поделиться с друзьями:
Все языки программирования для начинающих