Как работать в Adobe XD
Обновлено: 06.07.2024
Новейшее программное обеспечение Adobe для дизайна – популярный выбор для мобильных и веб-проектов. Хотя Adobe XD не вытеснил пользователей Sketch App для Mac, он существует достаточно долго, чтобы заинтересовать дизайнерское сообщество.
Если вы выполните поиск, вы найдете множество полезных ресурсов и бесплатных дизайнов для пользователей XD. Но есть также множество бесплатных руководств для всех, кто хочет освоить программное обеспечение.
Я просмотрела YouTube в поисках 25 самых лучших руководств по Adobe XD, которые мне удалось найти. Этот список представляет собой подборку моих фаворитов, охватывающих широкий спектр дизайнерских приемов.
НЕОГРАНИЧЕННАЯ ЗАГРУЗКА: более 50 миллионов дополнений и дизайнерских ресурсов
Учебники по Adobe XD
1. Начало работы с Adobe XD
Нет лучшего способа изучить Adobe XD, чем учиться у команды Adobe.
Это именно то, что вы найдете в этом часовом руководстве, охватывающем все основные функции Adobe XD. Его подготовила команда Creative Cloud, так что вы знаете, что это надежное руководство по новому программному обеспечению.
В этой 60-минутной презентации вы познакомитесь с рабочим пространством, инструментами, палитрами и общим рабочим процессом дизайнера.
Идеальное введение для тех, кто только знакомится с XD с нуля.
2. Учебное пособие по Adobe XD для начинающих
Это 12-минутное видео от Graph Desk служит хорошим обзором, если вы новичок в XD и хотите быстро понять основы.
Конечно, краткое руководство не затрагивает многих конкретных деталей, но всего за 12 минут вы получите четкое представление о том, что такое XD и что с его помощью можно создать.
3. БЫСТРОЕ руководство по Adobe XD для начинающих
Вот еще одно видео, которое является отличным вариантом, если у вас мало времени и вы хотите быстро узнать больше о XD. В нем содержится хороший обзор программного обеспечения и его возможностей.
4. Как использовать Adobe XD
Это видео продолжительностью около 30 минут, записанное дизайнером Терри Уайтом, содержит больше деталей, чем некоторые из более коротких видеороликов.
Здесь показано, как создавать прототипы в Adobe XD и разрабатывать интерфейсы с нуля. Это похоже на прагматичный подход к XD для дизайнеров, который избавляется от лишнего.
Однако это видео не такое всеобъемлющее, как презентация Creative Cloud в верхней части нашего списка, поэтому используйте его в сочетании с этим видео, чтобы получить подробное 90-минутное вводное руководство по этому невероятному программному обеспечению.
5. Курс по дизайну взаимодействия с пользователем
Это руководство выводит его на новый уровень. Это полный курс продолжительностью более 3,5 часов, который вы можете посмотреть бесплатно. Это замечательный ресурс, если вы смотрели некоторые из более коротких видео и действительно хотите погрузиться и получить некоторый опыт работы с XD. Бесплатный доступ к курсу такой длины и подробностей — это то, чем вы захотите воспользоваться, если хотите улучшить свои навыки.
Вы узнаете об основах дизайна взаимодействия с пользователем, таких как каркас, работа со шрифтами, прототипирование и многое другое.
6. Adobe XD для начинающих
Это еще один углубленный бесплатный курс, которым вы обязательно захотите воспользоваться. Приходя из Envato, вы знаете, что это качественный ресурс. Есть три главы, которые охватывают: основы, расширенные функции и прототипирование.
7. Адаптивные сетки макетов
Хотите освоить приемы адаптивного дизайна? Тогда почему бы не примерить это видео на размер.
В нем рассматривается основной рабочий процесс, которому следуют дизайнеры при создании адаптивных макетов в Adobe XD.
Не существует единственного «лучшего» способа создания макета. Но есть рекомендации, которые могут сэкономить вам много времени в долгосрочной перспективе.
Это цель этого видео, и это одна из многих причин, по которым я настоятельно рекомендую его всем веб-дизайнерам, читающим это.
8. Дизайн и прототип в XD
Веб-дизайнер Дански ведет довольно большой канал на YouTube. Он часто проводит прямые трансляции учебных пособий по программному обеспечению для проектирования и прототипирования.
Это видео является одним из таких примеров общей продолжительностью около 90 минут, размещенных на его канале YouTube для повторного просмотра.
Он был записан в прямом эфире и предназначен для того, чтобы охватить весь этап прототипирования для завершения полного макета и подготовки его к написанию кода.
9. Каркас в Adobe XD
Вот еще одно похожее видео в прямом эфире общей продолжительностью около 90 минут.
Но в этом уроке Дански научит вас создавать макеты макетов в программе Adobe XD.
Каркас обычно является самым первым шагом к любому новому дизайн-проекту. На рынке есть много отличных инструментов для создания каркасов, но XD также может обрабатывать макеты, что делает его мощной программой для всего процесса проектирования.
10. Как создать каркас в Adobe XD
Это еще одно руководство по вайрфреймингу, но оно намного короче предыдущего. Примерно через пять минут вы изучите основы процесса создания каркаса.
11. Создайте домашнюю страницу с помощью Adobe XD
Мне нравится это руководство, потому что оно показывает реальный сценарий того, как вы можете использовать программное обеспечение. Если вы веб-дизайнер, вы, вероятно, будете использовать XD для разработки веб-сайтов, так что что может быть лучше для учебника, чем создание макета и дизайна домашней страницы?
Всего за 20 минут вы шаг за шагом пройдёте процесс создания довольно простой, но приятной главной страницы. Возьмите приемы и процессы, описанные в этом видео, и примените их в своих проектах.
12. Как создать простой веб-сайт в Adobe XD для начинающих
Это еще одно практическое руководство по веб-дизайну, которое займет всего около 20 минут вашего времени. Вы узнаете, как легко и эффективно создать привлекательную главную страницу туристического веб-сайта в XD.
13. Макет дизайна веб-сайта
Чтобы узнать больше о технических областях, ознакомьтесь с этим 30-минутным учебным пособием по Adobe XD для веб-дизайна.
В этом видео вы узнаете, как с нуля создать простой веб-сайт-портфолио, используя базовые приемы работы с цветами, сетчатыми структурами и типографикой.
Сам дизайн довольно прост, поэтому это видео отлично подходит для абсолютных новичков.
Но на самом деле он предназначен для обучения программному обеспечению Adobe XD, поэтому он даже лучше для начинающих веб-дизайнеров, которые хотят создавать макеты с точностью до пикселя в XD.
14. Создайте приложение для социальных сетей
Вот еще одно практическое руководство по полному проекту от начала до конца. В этом уроке вы узнаете, как создать пользовательский интерфейс приложения для социальных сетей с нуля с помощью Adobe XD.
В этом видео преподает дизайнер Калер Эдвардс, и в течение этого 22-минутного видео он многое рассказывает.
Все экраны приложений довольно просты, поэтому не рассчитывайте использовать их в качестве отправной точки для вашего нового приложения для iOS.
Но взгляните на это и посмотрите, что вы думаете. Вероятно, это будет одно из лучших видео для дизайнеров мобильных приложений.
15. Аккаунт и интерфейс подтверждения
Экраны подтверждения учетной записи невероятно распространены почти на каждом веб-сайте. Так что это видео одновременно и практическое, и познавательное.
Это краткое руководство о том, как создать простой экран пользовательского интерфейса проверки, общей продолжительностью около 17 минут. Это не охватывает все функции Adobe XD, но затрагивает действительно важные из них.
Не говоря уже о том, что это очень подробно раскрывается с помощью монтажных областей, мощного инструмента XD для быстрого прототипирования.
16. Опыт адаптации пользователей
Дизайнер Роберт Брэдфорд записал этот замечательный 20-минутный учебник по адаптации пользователей, чтобы помочь дизайнерам освоить Adobe XD.
И я должен сказать, я думаю, что это прекрасно работает. Посмотрите видео, чтобы узнать, что вы думаете.
Он пошагово проведет вас через весь процесс создания качественной адаптации.
Но имейте в виду, что это руководство в основном ориентировано на пользователей мобильных устройств, поэтому оно лучше всего подходит для такой аудитории. Хотя я думаю, что любой может экстраполировать эти идеи и воплотить их в макет веб-сайта.
17. Разработка веб-сайта портфолио
Итак, вы хотите создать крутой макет портфолио, но не знаете, с чего начать.
Как насчет этого 50-минутного видео о дизайне макетов в Adobe XD. Это идеальный учебный ресурс для всех, кто плохо знаком с программным обеспечением, и для всех, кто хочет создать собственную страницу портфолио.
Вы можете следить за тем, как Кевин Пауэлл создает великолепный макет портфолио с нуля в XD. Очень легко отслеживать, независимо от вашего фона, однако установка с двумя мониторами, вероятно, облегчит эту задачу.
18. Передача спецификаций дизайна из XD
Если вы работаете в профессиональной команде, это короткое видео может помочь вам найти рабочий процесс передачи дизайнерских ресурсов.
Вы можете не заботиться о кодировании, но каждый пользовательский интерфейс в какой-то момент должен быть закодирован. Если вы занимаетесь только дизайном, вам нужно будет передать эту работу разработчику.
А если вы работаете в Adobe XD, это короткое видео покажет вам, как экспортировать вашу работу и подготовить ее для кодирования дизайнером.
19. Создайте рабочее меню боковой панели
Скользящие боковые панели быстро становятся нормой для мобильных приложений и адаптивных экранов. Эти меню-гамбургеры сейчас в моде, и с помощью этого бесплатного руководства вы научитесь создавать их в Adobe XD с нуля.
В ходе 15-минутного учебного курса вы сможете освоить множество практических приемов работы с анимацией, эстетикой дизайна и базовыми композициями рабочего процесса в XD.
Это будет сложное руководство, но к концу вы обретете новое чувство уверенности в своих навыках XD.
20. Пользовательский интерфейс приложения
В этом бесплатном видеоролике, посвященном разработке пользовательского интерфейса мобильного приложения, вы познакомитесь с некоторыми более сложными темами.
Он полностью построен на интерфейсе XD, поэтому вы не просто учитесь создавать собственный пользовательский интерфейс мобильного приложения. В первую очередь вы изучаете рабочий процесс простого макета дизайна Adobe XD от начала до конца.
Любой, кто никогда раньше не пользовался этим программным обеспечением, обязательно оценит это обучающее видео.
Конечно, вы, возможно, не почувствуете себя экспертом к концу, но вы, безусловно, будете намного увереннее разрабатывать свои собственные интерфейсы с нуля.
21. Разработка приложения с помощью XD
Приложения для iOS и Android имеют схожую структуру и схожие функции пользовательского интерфейса. Но эстетика дизайна сильно отличается.
В этом руководстве вы найдете советы о том, как с нуля создать потрясающее мобильное приложение, независимо от устройства. Обе экосистемы мобильных ОС могут работать с этим руководством.
Все, что вам нужно, это копия Adobe XD и немного терпения, чтобы сесть за это 30-минутное видео.
22. Дизайн приложения для еды
Вот еще одно полное руководство по дизайну мобильного приложения, которое длится около 28 минут. За это время вы создадите потрясающее приложение для еды с очень профессиональным дизайном.
Это отличный учебник, если вы хотите узнать больше о XD, а также освоить некоторые замечательные методы разработки приложений.
23. Используйте сетку размером 8 пунктов для разработки приложения для прямых трансляций
В этом 23-минутном учебном пособии показано, как создать красивое мобильное приложение для прямой трансляции с помощью сетки 8 pt. Такие уроки, наверное, мне больше всего нравятся, потому что вы можете увидеть, как дизайн создается за очень короткое время.
24. Создайте приложение для путешествий
Чтобы узнать больше о приложении для iOS, ознакомьтесь с этим руководством по приложению для путешествий.
За более чем 40 минут пошагового описания процесса вы узнаете все тонкости проектирования для платформы iOS в Adobe XD.
Вероятно, это одно из самых полных видео, которое поможет вам вложить средства в дизайн iOS с помощью Adobe XD. Всем, кому интересно узнать об этой стороне отрасли, обязательно стоит это проверить.
25. Создайте адаптационное приложение
Ранее я упоминал простое руководство по адаптации, но это немного отличается.
Это видеоруководство XD, созданное дизайнером Калером Эдвардсом для демонстрации процесса адаптации iOS. Это означает, что вы будете разрабатывать простые интерфейсы для iOS, которые помогут пользователям пройти весь этап адаптации.
Звучит довольно круто на первый взгляд и, безусловно, может быть полезно всем дизайнерам.
Но на самом деле он предназначен для всех, кто хочет работать с мобильными приложениями для iOS, поскольку многие методы предназначены для мобильных устройств.
26. Адаптивный веб-дизайн в XD
Краткое введение в адаптивный дизайн в Adobe XD представлено в этом 20-минутном видео.
Он охватывает множество фундаментальных аспектов адаптивного дизайна для мобильных устройств, таких как меню навигации, обновленная типографика и изменение размеров контейнеров контента.
Я удивлен, как много всего можно рассказать в этом коротком видео, учитывая, насколько велик на самом деле адаптивный дизайн.
Но если вы веб-дизайнер и хотите создавать адаптивные макеты в XD, это руководство обязательно вам поможет.
27. Adobe XD Прокрутка и размытие
Вот видеоролик, посвященный некоторым обновлениям программного обеспечения XD. В частности, функция прокрутки и размытия, которая может объединять монтажные области и создавать реалистичный интерфейс.
Этот метод — один из многих, которые действительно отличают XD от остальных.
Именно поэтому я думаю, что у Adobe все еще есть шкура в этой игре, несмотря на бесчисленное множество программ, которые отнимают долю рынка у монополии Adobe.
Если вы хотите изучить методы прокрутки и размытия для своих дизайнов пользовательского интерфейса, обязательно ознакомьтесь с этим.
28. Детальный дизайн продукта для электронной коммерции + прототип
Часто я считаю, что лучший способ чему-то научиться — это практический проект. Это бесплатное видео идеально подходит для изучения дизайна страницы продукта для веб-сайта электронной коммерции с помощью Adobe XD.
Вы узнаете, как быстро создать прототип страницы проекта, разработать великолепный интерфейс с возможностью прокрутки, а также освоите методы создания собственного рабочего процесса на будущее.
Но на самом деле конечный результат этого руководства феноменален, поэтому, если вы будете следовать ему, вы будете очень гордиться конечным результатом.
29. Цвета и стили символов
Adobe XD имеет несколько необычных функций для обработки пользовательских вариантов цвета и стилей символов в ваших макетах.
Из этого 5-минутного видео вы узнаете обо всех основных инструментах, необходимых для создания идеального макета с многократно используемыми цветовыми стилями, стилями символов и даже эффектами слоя.
Это одна из главных причин, по которой дизайнеры любят Adobe XD: он дает больше контроля в тех областях, где он нужен больше всего.
30. Пользовательский интерфейс страницы поддержки в Adobe XD
Прежде чем вы приступите к изучению этого руководства, позвольте мне сказать, что окончательный результат просто невероятен.
Как правило, если вы собираетесь учиться у кого-то, вы хотите видеть, что он знает свое дело. И только на основании этого 40-минутного руководства я бы сказал, что ютубер Калер Эдвардс знает свое дело.
В этом кратком уроке вы узнаете, как создать интерфейс страницы поддержки с нуля с помощью Adobe XD. Это одно из самых мощных руководств для начинающих дизайнеров, которые хотят полностью изучить рабочий процесс XD от начала до конца.
Настоятельно рекомендую это всем начинающим веб-дизайнерам (или веб-дизайнерам среднего уровня).
31. Как создавать баннеры в Adobe XD
Я не видел слишком много баннеров с уникальным дизайном, а сейчас с появлением рекламного блока это стало сложнее.
Однако, если вы разрабатываете баннеры для внутреннего использования или для собственного продукта, посмотрите это видео продолжительностью чуть менее 30 минут.
В нем рассказывается о некоторых отличных методах создания баннеров, которые каждый может применить в Adobe XD.
32. Как использовать наборы пользовательского интерфейса Adobe XD
Выполните быстрый поиск в Google, и вы найдете десятки бесплатных наборов пользовательского интерфейса для Adobe XD.
Это отличный способ сэкономить время на дизайн-проектах, но их не всегда легко освоить. Вот почему это видео может помочь новичкам подобрать наборы пользовательского интерфейса и легко работать с содержимым.
Если вы никогда ничего не проектировали с нуля, набор пользовательского интерфейса — отличная идея. И это видео поможет вам в этом.
33. Разработка приложения для iPhone X
Новый дизайн iPhone X от Apple отличается гораздо большим экраном и некоторыми совершенно новыми функциями для разработчиков iOS.
Если вы следите за экосистемой приложений для iOS, вам, вероятно, будет интересен этот учебник по приложению для iPhone X с использованием Adobe XD в качестве программного обеспечения для дизайна.
Он длится около 30 минут и показывает весь процесс от начала до конца. Отличный выбор для тех, кто серьезно относится к дизайну приложений для iPhone и хочет освоить некоторые из новейших технологий.
34. Автоматически анимируйте как профессионал
Если вы действительно хотите освоить Adobe XD, вам нужно узнать о таких функциях, как автоматическая анимация. Это руководство поможет вам освоиться менее чем за 20 минут.
35. Adobe XD: 30 советов и рекомендаций
Я не мог бы закончить этот список, не упомянув об этом невероятном видео для тех, кто изучает XD.
В нем содержится 30 уникальных советов и приемов, которые вы можете применить в рабочем процессе XD. Лучше всего то, что эти советы применимы ко всем типам работ, от веб-сайтов до мобильных приложений и даже программ для настольных компьютеров, если вы их тоже разрабатываете.
Некоторые из этих советов могут быть выше вашего текущего уровня, но сохраните их в закладках на будущее. Вы будете удивлены, насколько эти советы могут радикально повлиять на ваш рабочий процесс Adobe XD.
Adobe XD – одно из самых полных и надежных приложений для проектирования UX, которое используется для создания различных прототипов. Его можно бесплатно установить и использовать в системах Mac и Windows. Хотите изучить Adobe XD? В этом всеобъемлющем учебном пособии по Adobe XD вы узнаете, как изучить Adobe XD от новичка до продвинутого уровня.
Рассматриваемые темы включают:
- Основной состав интерфейса Adobe XD
- Учебное пособие по Adobe XD для начинающих
- Продвинутое руководство по Adobe XD
- Лучшие подключаемые модули Adobe XD
- Бесплатные пакеты Adobe XD
1. основной состав интерфейса Adobe XD
Adobe XD использует очень простой и эффективный интерфейс, стиль, который он унаследовал от сопутствующего приложения в пакете Creative Cloud. Он предоставляет инструменты для создания прототипов для различных платформ, включая веб-сайты, мобильные телефоны, планшеты и т. д.
При запуске приложения на странице приветствия представлены различные шаблоны стандартных размеров экрана и добавлен размер файла, который вы сами установили. Кроме того, страница приветствия содержит ряд ресурсов; эти ресурсы можно использовать в качестве отправной точки для изучения этого приложения, а также элементов дизайна пользовательского интерфейса, таких как мобильные устройства iOS и Android. Кроме того, доступны другие онлайн-ресурсы, например учебные пособия.
Adobe XD разделен на 2 представления; представление дизайна и представление прототипа, доступное в левом верхнем углу приложения. В представлении «Дизайн» дизайнеры могут использовать множество инструментов и функций для создания элементов макета, добавления монтажных областей для представления страниц макета и импорта ресурсов из других приложений, таких как Adobe Illustrator и Adobe Photoshop.
Совет. Дизайнеры могут копировать элементы дизайна непосредственно из этих приложений, а затем вставлять их в выбранную монтажную область в виде вектора. Это позволяет модифицировать импортированный графический объект, изменив цвет и даже изменив привязку пути.
Второе представление в Adobe XD — это представление прототипа, которое позволяет дизайнерам создавать связи между монтажными областями (страницами) и определять связи между ними посредством взаимодействия. После завершения проекта дизайнер может просмотреть его, щелкнув значок предварительного просмотра в правом верхнем углу, или поделиться им с командой через веб-ссылку. Дизайнеры также могут сохранять разные страницы в растровом или векторном формате.
2. Учебное пособие по Adobe XD для начинающих
После изучения базовой структуры интерфейса Adobe XD в следующем примере демонстрируется пошаговый процесс создания вашего первого прототипа пользовательского интерфейса в Adobe XD. Мы создадим что-то для размера экрана iPhone 6. Вы можете загрузить учебный файл, посетив репозиторий Github для этого руководства, или загрузить изображение непосредственно с сайта Pixapay.
Часть 1 этого руководства посвящена созданию макета в представлении «Дизайн» Adobe XD
1. Создайте прототип проекта
При открытии Adobe XD отображается страница приветствия и тип проекта, который вы можете выбрать. Выберите iPhone6 (375*667px). Затем щелкните значок iPhone, чтобы создать проект. Получите элементы пользовательского интерфейса iPhone от Apple iOS для использования в прототипировании. После создания монтажной области дважды щелкните имя монтажной области и измените его на «Главная».
2. Создайте фон прототипа
Нажмите на монтажную область; его свойства будут отображаться на панели свойств в правой части приложения. Затем щелкните цвет заливки, чтобы открыть диалоговое окно выбора цвета. Установите темно-серый цвет и закройте диалоговое окно.
3. Установить заголовок
Откройте «Файл» > «Импорт». В браузере файлов перейдите к изображению заголовка и нажмите «Импорт». Используйте элементы управления вокруг изображения, чтобы изменить его размер, чтобы он соответствовал заголовку страницы. Вы также можете дважды щелкнуть изображение, чтобы обрезать его.
Выберите текстовый инструмент на текстовой панели, нажмите в области заголовка и введите текст «Природа». Дважды щелкните текст и выберите «Шрифт без засечек» на панели свойств справа, установите для его ширины значение «Жирный», а размер — «32». Дважды щелкните заливку и установите для нее значение «темно-серый».
4. Создайте фон области содержимого
Выберите инструмент «Прямоугольник» на панели инструментов слева и создайте прямоугольник под заголовком. На панели свойств справа установите для заливки темно-серый цвет и снимите флажки с параметров обводки, чтобы удалить обводку.
5. Добавить контент
Импортируйте небольшой каталог каталога и добавьте текст, как на шаге 3.Установите маленькое изображение, чтобы оно соответствовало фону области каталога, и добавьте текст справа, как показано на пятом изображении ниже. Чтобы поместить маленькое изображение в специальную область, вы можете дважды щелкнуть изображение и обрезать его, используя 4 угла.
6. Создайте сетку контента
Одним из самых полезных инструментов Adobe XD является то, что вы можете создавать сетку из существующего контента, а не копировать его вручную. Удерживая клавишу Shift на клавиатуре, выберите маленькое изображение, фон содержимого и/или текст. Затем нажмите кнопку «Повторить сетку» на панели свойств. Это скопирует выбранный контент в сетку.
Перетащите нижний зеленый значок, чтобы создать вертикальную сетку контента. Затем вы можете дважды щелкнуть дубликат, чтобы изменить его. Наконец, выберите контент и нажмите «Отменить сетку», чтобы разорвать связь между ними.
7. Создайте новую страницу (артборд)
Чтобы создать новую страницу макета, щелкните инструмент Монтажная область на панели инструментов слева. Затем выберите шаблон iPhone6 справа, чтобы создать новую страницу.
8. Создайте больше страниц
Повторите описанные выше шаги, чтобы создать дополнительные страницы и добавить контент на страницу, как показано выше. Окончательный макет должен быть следующим.
После завершения макета дизайна мы перейдем к представлению прототипа, чтобы установить соединение для созданной страницы.
9. Настройка домашней страницы проекта
Перед настройкой связи между страницами нам нужно указать домашнюю страницу для проекта. Домашней страницей может быть любая из созданных страниц. В этом примере мы щелкаем значок домашней страницы, который появляется в левом верхнем углу монтажной области, чтобы выбрать первый макет в качестве домашней страницы.
10. Установить связь между страницами
Чтобы соединить страницы, выберите домашнюю страницу и нажмите размытую стрелку справа. Появится всплывающее меню объекта; выберите следующую страницу и установите тип анимации перехода (например, «стек»). Повторите этот шаг, чтобы соединиться с другими страницами.
11. Создать взаимодействие
В этом прототипе первая группа контента на главной странице должна переходить на первую канву контента, вторая группа контента должна быть подключена ко второй монтажной области и так далее. Итак, выберите первую группу контента и нажмите синюю стрелку справа, чтобы установить объект, аналогично тому, что мы сделали на шаге 10. Повторите этот шаг для второй группы контента.
После создания прототипа есть два основных способа его предварительного просмотра. Первый — через предварительный просмотр в самом Adobe XD, а второй — через ссылку на веб-страницу, которую можно отправить членам команды.
12. Предварительный просмотр прототипа
Нажмите значок предварительного просмотра в правом верхнем углу приложения. Отображается экран предварительного просмотра, который позволяет нам просматривать различные страницы и переходить к ним. Кроме того, у него есть значок записи, который позволяет нам записывать трафик между страницами и сохранять его в формате QuickTime (MOV).
13. Поделитесь прототипом
Готово! Теперь нам нужно только поделиться своими файлами с другими членами команды или теми, кому не нужно использовать XD. Нажмите кнопку «Поделиться» в правом верхнем углу приложения; появится плавающее меню с URL-адресом, который можно скопировать и передать членам команды.
3. Расширенное руководство по Adobe XD
Теперь, когда мы рассмотрели основы Adobe XC CC, мы можем перейти к изучению его расширенных функций. Следующая небольшая серия представляет собой сборник отличных руководств по XD.
1. Официальное руководство по Adobe XD
- Вводный курс XD: верстка и дизайн; создание и предварительный просмотр; совместное использование и обзор; с помощью наборов пользовательского интерфейса
- Курс по настройке проекта: запуск проектов XD; Добавляйте и редактируйте артборды; Используйте сетку для установки столбцов и полей; Выравнивание содержимого с помощью сетки; Используйте наборы инструментов пользовательского интерфейса; Создавайте прокручиваемые монтажные области
- Учебное пособие по XD и PS: Краткое руководство пользователя PS XD; Разработка целевых страниц с помощью XD и PS; Разработка мобильных приложений с помощью XD и PS
- Пример учебника для начинающих: создание сетки для веб-дизайна; создание интерактивных наложений; создание иконок для основных фигур; создание переключателей пользовательского интерфейса; создание слайдов.
- Учебное пособие высокого уровня: определение пользовательского интерфейса; роль UX-дизайнера; рабочий процесс UX; Инструментарий UX-дизайнера.
2. Изучение Adobe XD
- Обучающий контент:
- Просмотрите интерфейс XD
- Использование монтажных областей и сеток
- Добавить содержимое в слой
- Использовать функцию повторяющейся сетки.
- Добавьте интерактивность в свой проект
- Экспорт содержания
- Поделитесь своей работой
3. Разработка веб-сайтов с помощью Adobe XD
- Использовать рабочее пространство Adobe XD
- Создавать и импортировать графику
- Добавить текст и эффекты
- Создание нескольких макетов экрана
- Разработано для мобильных устройств.
- Использовать повторяющиеся элементы сетки
- Прототип одного взаимодействия
- Прототип дизайна всего веб-сайта
- Прокрутка рабочего контента
- Запишите интерактивное видео.
- Общий прототип
- Экспорт монтажных областей и ресурсов
4. Разработка мобильных приложений с помощью Adobe XD
- Создайте несколько экранов разного размера.
- Создавайте графику и текст в Adobe XD
- Импорт графики
- Создание прототипов списков и повторяющихся элементов с помощью повторяющихся сеток.
- Добавить взаимодействие к элементу
- Создать переход между экранами
- Поделиться и получить отзыв
- Экспорт монтажных областей и ресурсов
5, "Адаптивная сетка макета"
4. Лучшие плагины для Adobe XD
Adobe XD запустил API подключаемых модулей в октябре, и вскоре после этого было разработано несколько отличных подключаемых модулей, которые могут помочь вам лучше и эффективнее проектировать. Вот несколько наших рекомендаций.
<р>1. Mockplus Cloud — это мощный инструмент для совместной работы дизайнеров и инженеров по разработке продуктов. Это помогает связать весь рабочий процесс проектирования продукта. Он упрощает передачу, беря проекты из PS, Sketch, Adobe XD и экспортируя их в формат, который может создавать фрагменты кода, спецификации и ресурсы. <р>2. ProtoPie — интерактивный подключаемый модуль. Высокоточный интерактивный инструмент для создания прототипов, не требующий написания кода, который поддерживает Adobe XD и Sketch с возможностью импорта одним нажатием кнопки. <р>3. Переименуйте его — переименуйте подключаемый модуль: создайте собственный слой Adobe XD, переименуйте монтажную область в пакетном порядке по порядку. <р>4. UI Faces — плагин аватара: вы можете автоматически заполнить аватар в Adobe XD. Из богатого выбора ресурсов добавьте к своему аватару цвет, возраст, пол, прическу и т. д. <р>5. Плагин расширения Axhub Icons-icon: прямое копирование библиотеки векторных значков Alibaba одним щелчком мыши, без загрузки; векторный формат можно редактировать. <р>6. Protopie — интерактивный плагин: это высокоточный интерактивный инструмент для создания прототипов. Он поддерживает Sketch и Adobe XD с импортом в один клик. PSD также можно импортировать одним щелчком после открытия в Adobe XD.Пять частей — бесплатные наборы инструментов Adobe XD
Ниже приведены 20 лучших бесплатных наборов инструментов пользовательского интерфейса Adobe XD. С помощью этих наборов инструментов вы сможете быстро ознакомиться с приложениями Adobe, используя их бесплатные ресурсы для проектирования XD.
<р>1. Бесплатный набор инструментов пользовательского интерфейса Adobe XD от Explord: этот набор инструментов пользовательского интерфейса Explord в виде карточки включает в себя все необходимое для разработки блога или веб-сайта-портфолио. <р>2. Образовательный набор инструментов пользовательского интерфейса для Adobe XD: набор инструментов пользовательского интерфейса, подходящий для разработки образовательных и школьных веб-сайтов. Также работает с Adobe Photoshop. <р>3. Dashboard UI Toolkit for Adobe XD: этот бесплатный набор инструментов пользовательского интерфейса панели управления содержит более 100 компонентов, 15 шаблонов таблиц данных и более 10 страниц (включая домашнюю страницу, вход в систему, электронную почту, чат, календарь и счет-фактуру). . <р>4. Набор инструментов пользовательского интерфейса электронной коммерции Pawtastic для Adobe XD: набор инструментов пользовательского интерфейса для разработки веб-сайтов электронной коммерции или маркетинга. В дополнение к 35 элементам пользовательского интерфейса он поставляется с 15 бесплатными каркасными шаблонами. <р>5. Бесплатный набор инструментов веб-интерфейса Cactus: можно использовать для создания веб-сайтов любого типа, его дизайн свежий и красивый. <р>6. Бесплатное руководство по стилю Dark Adob и XD: бесплатный шаблон руководства по стилю Adobe XD, который упрощает начало работы в веб-дизайне. <р>7. Бесплатное руководство по стилю пользовательского интерфейса Adobe XD . Этот шаблон руководства по стилю доступен как в светлой, так и в темной версиях, содержит множество веб-элементов и создан с учетом Bootstrap. <р>8.Wireless Wireframe Suite for Adobe XD: эти бесплатные шаблоны каркасов Adobe XD созданы для быстрого создания прототипов веб-сайтов или мобильных приложений. Всего доступно 170 мобильных шаблонов, 90 веб-шаблонов, 240 компонентов и 178 значков. <р>9. Бесплатный набор каркасов мобильных приложений для Adobe XD. Простые наборы помогают быстро воплотить идеи мобильных приложений в реальность. <р>10. Шаблон потока Adobe XD для настольных ПК: веб-сайт электронной коммерции и панель управления. <р>11. WebKit Wareframes для Adobe XD: этот комплект позволяет легко и быстро создавать прототипы макетов веб-сайтов. <р>12. Mini Wireframe для Adobe XD: фантастический бесплатный микрошаблон для Adobe XD и Sketch. <р>13. Набор инструментов пользовательского интерфейса Adobe XD Material Design: бесплатный набор инструментов пользовательского интерфейса для мобильных устройств, который можно использовать в Adobe XD, Sketch или Photoshop. <р>14. Cooin Crypto Free UI Toolkit: создавайте веб-сайт или мобильное приложение с темой криптовалюты, включая все распространенные элементы формы, графику, диаграммы и многое другое.
Являетесь ли вы новичком или опытным дизайнером, вам будет легко использовать Adobe XD. Вы можете легко найти учебник по Adobe XD, в котором показано, как использовать его как при разработке дизайна, так и при создании прототипа. Инструмент использует эффективный и простой интерфейс. Вы также можете создавать дизайны или прототипы для мобильных телефонов, веб-сайтов, планшетов и других устройств. Adobe XD имеет представление дизайна и представление прототипа. Каждое из представлений имеет множество функций и инструментов, помогающих создавать отличные макеты. Чтобы лучше понять, как его использовать, продолжайте читать это руководство по Adobe XD.
Учебное пособие по Adobe XD: как использовать Adobe XD
Научиться пользоваться Adobe XD несложно, поскольку этот инструмент разработан с учетом простоты и удобства пользователя. Продолжайте читать это руководство по Adobe XD 2020, чтобы узнать, как его использовать.
Источник: Adobe XD
Как использовать XD Adobe — хитрости и советы
- Используйте инструмент повторяющейся сетки, который находится в инспекторе свойств, вместо того, чтобы копировать и вставлять элементы в свой дизайн.
- Дублируйте фигуру, выбрав ее, удерживая клавишу "Key" на Mac или клавишу "Alt" в Windows, а затем перетащите ее новую копию.
- Чтобы заблокировать элементы, щелкните элемент правой кнопкой мыши и выберите блокировку в контекстном меню.
- Выберите все вложенные объекты, удерживая клавишу Cmd или Ctrl.
- Быстро создайте маску, поместив изображение на фигуру, чтобы заливка фигуры стала изображением.
Текст и рисование в Adobe XD
- Отключите направляющую привязки, удерживая нажатой клавишу Cmd/Ctrl.
- Для переключения между углом и кривой дважды щелкните любую опорную точку.
- Сделайте ручку кривой независимой: нажимайте клавишу "opt/alt" при перетаскивании ручки кривой.
- Рисовать с помощью инструмента "Перо" – выбрать опорные точки.
- Дважды щелкните, чтобы вставить контекст редактирования группы
- Выберите текстовый объект, создайте новый, чтобы применить все стили из первого объекта ко второму.
Импорт контента с помощью Adobe XD
- Чтобы получить содержимое из Illustrator, выберите векторную фигуру в Illustrator, скопируйте и вставьте в Adobe XD.
- Чтобы получить растровое содержимое из Photoshop, выберите все Cmd+A или Ctrl + A в растровом или текстовом слое. Превратите векторный слой или даже группу в смарт-объект, скопируйте и вставьте в Adobe XD. Вставленный слой — это растровое изображение.
- Чтобы получить содержимое из эскиза, выберите один или несколько слоев и нажмите «Экспортировать». Выберите SVG в качестве формата, затем перетащите слои в Adobe XD. Вы получаете контент, который можете редактировать в Adobe XD.
- Чтобы импортировать ресурсы, например GIF, PNG, TIFF, JPG на Mac, вы можете применить файл>импорт, копирование и вставку или перетаскивание изображений в Adobe XD.
- В Windows коснитесь меню-гамбургера, а затем нажмите "Импорт". Вы также можете копировать и вставлять, перетаскивать изображения из проводника. Также можно скопировать и вставить из браузера в Adobe XD.
Монтажные области в Adobe XD
- Чтобы выбрать монтажную область, нажмите на заголовок монтажной области, нажмите Cmd/Ctrl + щелкните фон или дважды щелкните фон.
- Чтобы выбрать пустую монтажную область, коснитесь фона монтажной области.
- Дублируйте монтажную область и ее содержимое. Выберите монтажную область, нажмите Cmd на Mac или Alr в Windows и перетащите, чтобы создать копию.
- Переименуйте монтажную область – дважды щелкните ее заголовок.
Прототипирование и предварительный просмотр с помощью Adobe XD
- Выберите любой элемент на монтажной области или на всей монтажной области, а затем перетащите проводник, чтобы обеспечить взаимодействие между досками.
- Набор взаимодействий без связи — перетащите связь с места назначения.
- Дизайн веб-сайта: применение перехода с растворением
- Просмотрите все связи между монтажными областями. Нажмите Cmd + A на Mac или Ctrl + A в Windows в режиме прототипа.
- В окне предварительного просмотра отображается монтажная область с текущим выделением.
- В окне предварительного просмотра запишите видео из окна предварительного просмотра вашего прототипа. Коснитесь значка записи в строке заголовка, чтобы запустить видео. Чтобы остановить видеозапись, нажмите ESC.
Источник: Adobe XD
Обмен с Adobe XD
- Чтобы поделиться, войдите в свою учетную запись Adobe.
- Главная монтажная область — это то, что ваши зрители увидят в первую очередь, когда увидят ваш общий дизайн.
- Чтобы просмотреть прототип в мобильном браузере, сохраните его ярлык на главном экране устройства.
Есть много других руководств по Adobe XD для начинающих, из которых вы можете узнать, как использовать XD более подробно.
Заинтересованы ли вы в экспорте Adobe XD в XML? Нажмите и узнайте больше о том, как легко экспортировать Adobe XD в XML.
Лучшая альтернатива Adobe XD
Wondershare Mockitt — лучший альтернативный инструмент для создания прототипов. Это самый простой инструмент для использования в процессе, и это одна из причин, по которой даже новички в дизайне находят его полезным. В отличие от большинства других инструментов для создания прототипов, которые вы найдете в Интернете, Wondershare Mockitt позволяет создавать прототипы для широкого спектра платформ, а также настраивать размер устройства по вашему желанию в процессе проектирования. Когда вы создаете свой прототип, инструмент предлагает вам бесплатную и удобную среду для этого.
Wondershare Mockitt также имеет множество дизайнерских значков и виджетов, таких как библиотека дизайна материалов, текст, видео, кнопка, карта и другие, которые упрощают процесс создания прототипа. Вы также можете настроить свой виджет и повторно использовать его в самых разных проектах. Это также простой в использовании инструмент, потому что вам не нужно делать много работы при проектировании. Работа с инструментом включает в себя простое перетаскивание интерактивного прототипа. Он имеет удобные переходы и жесты. Существуют также различные анимации, переходы между страницами и жесты, которые вы можете внедрить в свой прототип. Существует также подключаемый модуль для эскизов, который поможет вам синхронизировать все файлы эскизов и быстро связать их с экранами, что позволит вам вывести прототипирование на более высокий уровень.
Вот простые шаги, которые необходимо выполнить при создании прототипа с помощью Wondershare Mockitt.
Компоненты Adobe XD предоставляют дизайнерам мощные функции. Тем не менее, они причудливы и нуждаются в особом уходе. В этом руководстве по Adobe XD дизайнеры узнают, как использовать их для оптимизации своих рабочих процессов.
Эд занимается дизайном UX для развивающегося сектора виртуальной и дополненной реальности. Он разработал отмеченные наградами проекты для Google, Sony и Electronic Arts.
Система компонентов Adobe XD предоставляет дизайнерам мощные функции для создания прототипов цифровых продуктов. Однако он не лишен особенностей и требует особого ухода. Умные ярлыки и рекомендации помогут разработчикам оптимизировать рабочие процессы XD-прототипирования.
С момента своего официального публичного выпуска в конце 2017 года Adobe XD добилась больших успехов, превратившись в высококонкурентный инструмент для создания макетов и прототипов для UX-дизайнеров. В частности, его новая система компонентов расширяет тип взаимодействия, с которым дизайнеры могут экспериментировать. Тем не менее, компоненты не лишены причуд и недостатков. При работе с компонентами XD полезно принять ряд методов рабочего процесса, чтобы избежать лишней работы и использовать весь потенциал системы.
Что такое компоненты Adobe XD?
Компоненты XD представляют собой повторно используемые группы элементов, например текст, фигуры или линии. У компонента есть «Основной компонент», который служит родителем, и «экземпляры» или дочерние элементы, которые размещаются на монтажной области. При изменении основного компонента изменения распространяются на все его экземпляры.
Компоненты, заменяющие предыдущую систему «символов» XD, которая служила той же цели, предлагают ключевое отличие. Они могут иметь несколько состояний, которые реагируют на разные входные данные, определенные в режиме прототипа XD. Например, кнопка может иметь состояние по умолчанию, но изменять свой внешний вид при наведении или нажатии. Он может воспроизводить звук при нажатии или даже изменять свой внешний вид в зависимости от входных данных распознавания речи.
Компонентная система экономит время, но требует особого внимания. Вдумчивый подход и тщательно подготовленный рабочий процесс необходимы для эффективного использования возможностей системы.
Добавление компонентов расширяет возможности Adobe XD по созданию прототипов.
Рекомендуется знание Adobe XD
Дизайнеры, хорошо знакомые с Adobe XD, получат наибольшую пользу от следующих советов и рекомендаций. Чтобы начать работу, загрузите Adobe XD Design Kit с домашней страницы Google Material Design. В комплект входит набор компонентов Adobe XD, с которым можно экспериментировать и анализировать.
При первом создании компонента с состояниями дизайнеры должны понимать, как возможные изменения в компоненте могут повлиять на другие экземпляры. Для иллюстрации рассмотрим выпадающее меню с несколькими состояниями:
При редактировании состояния по умолчанию дочернего экземпляра раскрывающегося списка эти изменения не будут распространяться на состояния наведения или щелчка. Необходимо внести изменения в состояние по умолчанию в главном компоненте, чтобы обновить состояния наведения или щелчка всех экземпляров.
Несмотря на то, что может возникнуть соблазн начать итерацию основных компонентов, иногда возникают непредвиденные проблемы из-за различий в поведении родительских и дочерних компонентов.
Хорошей практикой является рассмотрение и предвидение всего, что необходимо в состоянии основного компонента по умолчанию, прежде чем добавлять другие состояния или создавать экземпляр компонента, даже если вы размещаете различные состояния рядом друг с другом.
Дизайнеры также должны помнить, что они могут добавлять и изменять элементы в нестандартных состояниях основного компонента или дочерних экземпляров, не влияя на состояние по умолчанию, но обратное неверно.
Рекомендация для Adobe: предоставьте состояниям компонентов функцию блокировки, чтобы дизайнеры могли сохранять состояния, отличные от значений по умолчанию, нетронутыми и предотвращать распространение изменений состояния основного компонента по умолчанию.
Тщательное присвоение имен слоям жизненно важно, так как использование переходов Auto-Animate сильно зависит от этого.
Легко опробовать идеи на монтажной области и погрузиться в процесс группировки/разгруппировки компонентов и изменения свойств состояний компонентов. Может возникнуть сильное искушение свернуть левую боковую панель, чтобы получить больше рабочего пространства. Однако есть большая вероятность, что состояния компонентов и переходы не будут вести себя должным образом в потоке итераций. Это может произойти из-за того, что организация и группировка подэлементов (таких как фигуры, векторы или текст) отошли от того, что необходимо для правильной работы переходов.
Представление «Слой» обеспечивает 100-процентную прозрачность иерархии и именования элементов, а его герметичная организация имеет жизненно важное значение. Для использования мощного перехода XD Auto-Animate между состояниями требуется, чтобы элементы имели одинаковое имя и положение в иерархии слоев компонента. В противном случае переход по умолчанию будет плавным, а не привлекательной автоматической анимацией.
Иногда может потребоваться запретить интерполяцию свойства при переходах с автоматической анимацией. Для этого дизайнеры могут переименовать элемент в другом состоянии компонента или монтажной области, чтобы разорвать связь на основе имени.
В любом случае представление «Слои» можно использовать для устранения непредвиденных проблем. Это должно быть первым шагом при устранении проблем с прототипированием, будь то переход между состояниями компонентов или между монтажными областями.
- Клонировать экземпляр компонента для каждого состояния в компоненте.
- Установите для каждого экземпляра другое состояние.
- Пройдите и разгруппируйте каждый экземпляр компонента.
- Начните вносить необходимые корректировки и изменения в каждый экземпляр компонента.
- Восстановите новый главный компонент.
- Перейдите в режим прототипа и заново создайте взаимодействия и типы переходов, которые были настроены ранее.
Рекомендация для Adobe: при щелчке правой кнопкой мыши на главном компоненте на панели «Ресурсы» укажите пункт меню «Дублировать».
Прототипирование с помощью компонентов Adobe XD: секреты успеха
За последние несколько лет Adobe XD значительно улучшила функциональность и полезность. Он превратился в достойную конкурентоспособную альтернативу Sketch и другим известным инструментам прототипирования. Судя по тому, как этот инструмент развивался с момента его появления, вероятно, будет еще много улучшений.
В частности, система компонентов Adobe XD имеет отличный потенциал для улучшения и расширения типов взаимодействия, которые могут создавать дизайнеры.
Вот несколько основных выводов, о которых следует помнить:
- Понять, как изменения распространяются между основными компонентами и дочерними экземплярами.
- Знайте, как компоненты взаимодействуют с другими функциями Adobe XD, такими как Auto-Animate и Repeat Grid.
- Стремитесь использовать согласованные методы рабочего процесса, чтобы сэкономить время, такие как присвоение имен компонентам и сохранение отдельной монтажной области основного компонента в файле XD.
Помнение об особенностях работы с компонентами Adobe XD при сохранении дисциплинированного рабочего процесса позволит максимально повысить продуктивность проектирования. Это позволит избежать ненужной очистки и обслуживания и даст разработчикам XD преимущество в эффективности при создании прототипов цифровых продуктов.
Дайте нам знать, что вы думаете! Оставляйте свои мысли, комментарии и отзывы ниже.
Дополнительная информация в блоге Toptal Design:
Понимание основ
Как создать компонент в Adobe XD?
Существует три способа создания компонента Adobe XD. Выберите объект или группу объектов, затем 1) щелкните правой кнопкой мыши и во всплывающем меню выберите «Создать компонент»; 2) щелкните значок + (плюс) в разделе «Компонент» инспектора свойств; 3) Нажмите кнопку + (плюс) в разделе «Компоненты» на панели «Ресурсы».
Как сгруппировать компоненты в Adobe XD?
Несколько компонентов XD можно объединить в группу, чтобы их можно было рассматривать как единое целое. Выберите компоненты для группировки, щелкните правой кнопкой мыши и выберите «Группировать» во всплывающем меню. Чтобы отсоединить экземпляр от основного компонента, щелкните экземпляр правой кнопкой мыши и выберите «Разгруппировать» во всплывающем меню.
Что такое компоненты в Adobe XD?
Компоненты Adobe XD представляют собой повторно используемые группы элементов, например текст, изображения, фигуры или линии. Компонент имеет «Основной компонент», который служит в качестве родителя и размещенных «экземпляров» или дочерних элементов. При изменении основного компонента изменения распространяются на все его экземпляры.
Стоит ли изучать Adobe XD?
Научиться использовать XD стоит, потому что это мощный инструмент проектирования, и сегодня многие проектные группы используют его. С момента своего дебюта он добился больших успехов на пути к тому, чтобы стать высококонкурентным инструментом для создания каркасов и прототипов. Одним из его преимуществ является то, что помимо Mac, он также работает на Windows.
Читайте также: