Adobe xd как загрузить сайт
Эти проекты имеют большое значение, помогая разработчикам понять, как вы хотите, чтобы ваш веб-сайт выглядела, и упрощают процесс разработки с их стороны. Однако существует лишь ограниченное количество способов экспортировать дизайны из программного обеспечения.
Вы можете либо сохранить их как файл XD и надеяться, что разработчик уже установил программное обеспечение в своей системе, либо экспортировать каждую монтажную область как отдельный файл PNG, что может быть немного неудобно в использовании.
К счастью, есть удобный сторонний плагин, который позволяет экспортировать монтажные области в виде файлов HTML, и именно об этом я расскажу в этой статье. Но прежде чем мы перейдем к этому, вам нужно кое-что узнать.
Экспорт файлов Adobe XD в HTML с помощью плагинов
Теперь, когда у нас это есть, просто выполните следующие простые шаги, чтобы загрузить необходимый плагин, а затем экспортировать файлы Adobe XD в HTML:
Шаг 1: Щелкните кнопку меню гамбургера в верхнем левом углу программы.
Шаг 2: Прокрутите до конца и нажмите на опцию Plugins. Это откроет новую панель плагинов справа от главного меню.
Шаг 3: Выберите опцию Discover Plugins на панели Plugins.
Шаг 4: На следующей странице найдите HTML и нажмите кнопку «Установить» рядом с подключаемым модулем Web Export.
После того, как вы установили требуемый плагин, откройте проект, который хотите экспортировать в HTML, и продолжите следующие шаги. В этой статье я буду использовать бесплатную монтажную область Adobe XD, которую я нашел в Интернете.
Шаг 5: Выберите монтажную область, которую хотите экспортировать, щелкнув по ней.
Шаг 6: Теперь нажмите кнопку меню, перейдите на панель Plugins и затем выберите опцию Export Artboard в новых настройках плагина Web Export.
В том же окне вы также можете выбрать экспорт нескольких монтажных областей или последней монтажной области, которую вы редактировали.
Шаг 7: Во всплывающем окне «Экспорт монтажной области» добавьте имя файла, а затем выберите папку, в которой вы хотите сохранить файл, щелкнув крошечный значок папки рядом с параметром «Экспорт папки».
Шаг 8: Теперь, если вы хотите добавить внешний скрипт, таблицу стилей или альтернативные шрифты в экспортируемый файл, вы можете добавить их в том же окне.
Шаг 9: Затем вы можете выбрать размеры выходного HTML-файла, введя значения в пустое пространство рядом с параметром «Размер».
Шаг 10: Чтобы обеспечить правильное масштабирование проекта, вы также можете выбрать различные параметры масштабирования в том же окне, установив флажок рядом с каждым параметром.
Шаг 11: Кроме того, вы можете выбрать любые дополнительные настройки, такие как навигация с помощью клавиатуры, автоматическое обновление и т. Д., Установив флажки рядом с параметрами.
Шаг 12: После того, как вы завершили все настройки, просто нажмите синюю кнопку «Экспорт», и все готово. Монтажная область появится в виде HTML-файла в папке назначения, которую вы ранее выбрали.
Из того же окна вы также сможете скопировать CSS и разметку своей монтажной области, если вы также хотите поделиться этой информацией со своим разработчиком.
Еще раз отметим, что экспортированный HTML ни в коем случае нельзя использовать для разработки полнофункционального веб-сайта. На данный момент у вас нет возможности напрямую опубликовать проект Adobe XD в Интернете, и, согласно нескольким обсуждения на форумах Adobe, в ближайшее время его не будет.
Последнее обновление 5 июл, 2019
Вышеупомянутая статья может содержать партнерские ссылки, которые помогают поддерживать Guiding Tech. Однако это не влияет на нашу редакционную честность. Содержание остается объективным и достоверным.
Получите ответы на часто задаваемые вопросы по загрузке, установке, настройке и обновлению Adobe XD для macOS и Windows.
Adobe XD — это инструмент для проектирования пользовательских интерфейсов, обеспечивающий возможности совместной работы и позволяющий создавать и публиковать проекты для веб-сайтов, мобильных приложений и других пользовательских интерфейсов.
Легко переключайтесь между каркасами, дизайном пользовательских интерфейсов, интерактивным дизайном, созданием прототипов, анимацией интерфейсов и обменом материалами — все это объединено в едином мощном инструменте.
Adobe XD — это инструмент для проектирования пользовательских интерфейсов, обеспечивающий возможности совместной работы и позволяющий создавать и публиковать проекты для веб-сайтов, мобильных приложений и других пользовательских интерфейсов.
Adobe XD предназначается для профессиональных дизайнеров пользовательских интерфейсов, создающих проекты и прототипы, а также для всех, кто впервые изучает дизайн интерфейсов. XD — мощный, но простой в использовании инструмент, что делает его подходящим для дизайнеров с любым уровнем подготовки и опыта.
Adobe XD предлагает различные варианты платных планов в зависимости от ваших потребностей. XD включен в любую подписку Creative Cloud — Все приложения без дополнительной платы. Вы также можете подписаться на тарифный план с одним приложением XD.
Бесплатный начальный план позволяет всем загружать и применять XD для личного пользования, включая все функции дизайна и макетирования. Платные планы предназначены для профессионального использования там, где требуется неограниченные возможности публикации для совместной работы, поэтому в них входит полный доступ к таким премиум-функциям для совместной работы.
Если вы являетесь подписчиком Creative Cloud для рабочих групп или Creative Cloud для организаций и у вас нет доступа к приложению Creative Cloud для настольных ПК, обратитесь к своему ИТ-администратору, чтобы получить доступ к XD через Creative Cloud Packager.
Частично информация о начале работы было включена прямо в приложение Adobe XD — на главном экране продукта вы можете выбрать один из следующих вариантов.
-
с пошаговыми инструкциями.
- Ссылки на наборы пользовательского интерфейса, ускоряющие разработку платформ Apple iOS, Google и Microsoft Windows.
- Руководства, включающие вопросы разработки и экспорта, создания прототипов и обмена материалами, а также подсказки и советы по использованию Adobe XD.
Вы можете связаться с другими разработчиками через Adobe XD на наших форумах, чтобы поделиться своим опытом и получить дополнительные советы и подсказки.
С помощью мобильного приложения Adobe XD, вы также можете предварительно просматривать свои проекты и прототипы на устройствах iOS и Android. К компьютеру с Adobe XD через порты USB можно подключить несколько устройств. Вы можете менять свои проекты и прототипы и предварительно просматривать их в реальном времени на всех подключенных устройствах. Детальные шаги см. в разделе Часто задаваемые вопросы по Adobe XD для мобильных устройств.
Наша команда прислушивается к вашим комментариям и активно отвечает на них. Можно просматривать существующие запросы функций, голосовать по ним или добавлять свои собственные на сайте UserVoice. По вопросам, связанным с продуктом, обратитесь к нашим специалистам из Сообщества получения поддержки XD.
Вы можете связаться с другими разработчиками через Adobe XD на наших форумах, чтобы поделиться своим опытом и получить ответы на вопросы. Для получения дополнительных возможностей поддержки откройте нашу страницу службы поддержки.Adobe XD поддерживается в следующих операционных системах:
- macOS 10.13 и следующих версий
- Windows 10 Creators Update (64-разрядная) и следующих версиях
В Adobe XD доступны следующие языки: английский, французский, немецкий, японский, китайский, корейский, бразильский португальский и испанский.
Вы можете использовать в своих проектах материалы из Adobe Photoshop и Adobe Illustrator. Чтобы продолжить работу с содержимым в векторном формате, скопируйте его из Illustrator и вставьте в XD. Скопируйте содержимое из Photoshop и вставьте его в XD как растровое изображение. Вы также можете экспортировать файлы XD в After Effects через раздел Файл > Экспорт > After Effects .
Кроме того, вы также копировать содержимое из любого другого инструмента, который может помещать содержимое SVG в буфер обмена, и вставлять его в XD, а также использовать импорт файлов JPG, PNG, GIF, TIFF и SVG через меню Файл > Импорт .
В Adobe XD и службах публикации поддерживаются все типы удостоверений (Adobe ID, Enterprise ID и Federated ID). Возможно, корпоративный пользователь будет иметь Adobe ID и Enterprise ID или Adobe ID и Federated ID, связанные с одним и тем же адресом электронной почты.
В XD на Mac нажмите XD > Информация о XD . В ОС Windows выберите Справка > Информация о XD . Рядом с версией вы увидите текст Для начинающих .
Откройте эту страницу для перехода на другой план XD.
- либо отменить свой план, либо если вы являетесь подписчиком в составе группы или организации.
При отмене вас автоматически переведут на план для начинающих. Вы по-прежнему будете иметь доступ к Adobe XD, вашим опубликованным ссылкам и документам.
Для получения дополнительной информации о том, что включено в план для начинающих, см. раздел Сравнение планов.
Если вы являетесь конечным пользователем Creative Cloud для рабочих групп или Creative Cloud для организаций и у вас нет доступа к приложению Creative Cloud для настольных ПК, обратитесь к своему ИТ-администратору, чтобы получить доступ к XD через Creative Cloud Packager.
Если у вас, вашей рабочей группы или организации нет платного плана, в который входит Adobe XD, вы все равно можете загрузить XD бесплатно в составе плана для начинающих через Creative Cloud Packager.
План для начинающих доступен корпоративным клиентам в коммерческих, государственных и образовательных учреждениях. Для загрузки Adobe XD клиенты должны использовать развертывание именованного лицензирования. Adobe XD поддерживает все три типа идентификаторов (Adobe ID, Enterprise ID и Federated ID). Вы можете загрузить приложение Adobe XD из приложения Creative Cloud для настольных ПК. Если у вас нет доступа к приложению Creative Cloud для настольных ПК, обратитесь к своему ИТ-администратору, чтобы получить доступ к Adobe XD.
Windows 10 Creators Update (64-разрядная версия) представляет будущее платформы Windows, потому что позволяет Adobe XD использовать новейшее сенсорное оборудование, обеспечивать максимально возможную производительность и быть доступным для следующего поколения устройств на базе Windows.
Подробная информация приведена в разделе Системные требования.
На текущий момент функции пера и сенсорного ввода поддерживаются в инспекторе свойств, левом меню панели инструментов и в кадре приложения. Центральный холст не может быть обработан через сенсорный ввод; для создания проектов и прототипов соединений на холсте вам понадобятся мышь и клавиатура.
На текущий момент ИТ-администраторы не могут установить приложение Adobe XD для Windows и развертывать регулярные обновления с помощью инструмента Creative Cloud Packager.
Да, вы можете обмениваться документами на разных платформах.
Да, вы можете сохранить свои документы в облаке и открывать эти проекты с помощью мобильной версии Adobe XD.
Собственные приложения Windows 10, а именно XD, автоматически сохраняют ваши файлы в фоновом режиме. Если вы закрыли документ, не сохранив его, вы всегда можете возобновить работу, открыв Файл > Открыть недавние и выбрав файл из списка.
Adobe XD требует использования современных графических процессоров с последними установленными драйверами. Если вы видите на своих монтажных областях крупные участки сдвинутых пикселей, вам следует обновить драйверы до последних версий, чтобы обеспечить возможность эффективной работы с XD. Многие производители оборудования не обновляют свои драйверы для старых графических процессоров. Для получения дополнительной информации о том, совместимы ли ваши драйверы, см. Системные требования.
Существуют определенные проблемы визуализации с двумя более старыми драйверами, для которых нет доступных обновлений от поставщика — Intel 8.15.10.2697 и Intel 8.15.10.2702.
При одновременном использовании в вашей системе большого числа ресурсоемких приложений ОС Windows 10 может закрыть некоторые собственные приложения, работающие в фоновом режиме, с целью оптимизации производительности. В таких ситуациях Adobe XD автоматически сохраняет ваш файл, и вы можете возобновить работу, перейдя по меню Файл > Открыть недавние и выбрав файл из списка.
Да, вы можете поделиться своими прототипами.
Файлы сохраняются локально с расширением .xd. Облачные документы не сохраняются в локальной файловой системе и используют формат .xdc.
Вы можете экспортировать любой объект как PNG или SVG и импортировать его в Photoshop и Illustrator. Illustrator добавляет содержимое SVG как изменяемые объекты в векторном формате. Содержимое Photoshop копируется в виде плоского растрового изображения.
В настоящее время Adobe XD поддерживает следующие форматы для импорта: текстовый, JPG, GIF, PNG, TIFF, SVG, BMP, PSD, AI, SKETCH. Если вы попытаетесь перетащить на холст файл неподдерживаемого формата, такой файл будет проигнорирован.
Adobe XD должен импортировать SVG из любого источника. Если вам не удается импортировать файл SVG, у файла может быть чересчур большой размер или свойства, которые не поддерживаются Adobe XD. Дополнительные сведения см. в этой статье.
Ошибка в ходе экспорта может произойти по нескольким причинам.
- Ваш ресурс был слишком большой по объему. Adobe XD имеет ограничение на экспорт ресурса, которое составляет 16000 x 16000 пикселей.
- Возможно, вы экспортируете материалы в каталог, который доступен только для чтения или заблокирован.
Если произошла какая-либо другая ошибка экспорта, сообщите об этой проблеме на наших форумах.
Вы можете установить и использовать сторонние подключаемые модули для экспорта или извлечения проекта XD в виде файла HTML, CSS или JavaScript. Смотрите инструкции по использованию доступных сторонних плагинов в этой статье.
Это безопасная функция, которая требует входа в систему под тем же Adobe ID, который используется для отправки личной ссылки. Ссылка не может быть доступна, если у получателя нет вашего Adobe ID и пароля.
В XD вы можете опубликовать прототип или спецификацию дизайна, чтобы поделиться с другими для сбора отзывов или передачи файлов разработчикам. При публикации прототипа или спецификации дизайна создается ссылка. Если вы пользуетесь планом для начинающих, вы можете создать только одну активную ссылку. Вы всегда можете изменить такую ссылку. Чтобы опубликовать больше ссылок, перейдите на платную версию плана или реорганизуйте свои ссылки.
Для работы служб публикации в XD требуется войти в Creative Cloud. Такой вход гарантирует, что ваша учетная запись позволяет использовать хранилище и службы. Если вы успешно вошли в систему и все еще видите ошибку, возможно, вы столкнулись с одним из сценариев, описанных в этой статье.
Повторно подтвердите, что ссылки удалены. Если ссылки удалены, попробуйте закрыть и снова открыть Adobe XD.
Попробуйте закрыть и снова открыть Adobe XD.
После предоставления общего доступа к прототипу в первый раз при любом последующем обновлении вам будет предложено два варианта: Изменить ссылку или же Создать ссылку. Выберите Создать ссылку, чтобы создать новую ссылку на прототип, которым вы хотите поделиться. Чтобы изменить прототип в существующей ссылке, выберите Изменить ссылку.
В некоторых случаях существующая ссылка не изменяется, но вместо этого создается новая ссылка. Это может произойти в следующих ситуациях.
- Существующая ссылка была удалена.
- Вы изменили свои учетные данные между сеансами обмена.
- Служба Adobe обнаружила ошибку, и мы не смогли изменить ссылку на предыдущий прототип.
Совместное использование прототипов и спецификаций дизайна в Adobe XD зависит от доступа к сервисам Creative Cloud. Для совместного использования прототипов и спецификаций дизайна ИТ-администраторы должны включить службы публикации XD внутри Admin Console. Подробнее см. в разделе Включение и отключение сервисов для профиля продукта.
Adobe XD не поддерживает автономное развертывание с помощью серийного номера Creative Cloud для организаций. Для доступа к Adobe XD клиенты должны использовать развертывание именных лицензий. Поддерживаются все три типа идентификаторов (Adobe ID, Enterprise ID и Federated ID).
Adobe XD теперь позволяет разработчикам обмениваться прототипами и спецификациями дизайна посредством закрытой ссылки, доступной только по приглашению. Чтобы ваши пользователи могли совместно использовать и просматривать эти ресурсы, рекомендуется настроить удостоверения пользователя через систему управления пользователями Adobe, чтобы рецензентам не приходилось создавать новую учетную запись Creative Cloud при получении приглашения (если они этого еще не сделали). Привяжите корпоративную систему каталогов вашей организации, используя инструмент синхронизации пользователей Adobe или иной инструмент управления пользователями.
Посмотрите, как перевести свои дизайн и прототипы Adobe XD в живые, полностью функциональные веб-сайты.
Мне нравится способность Webflow преобразовывать мои веб-проекты во что-то особенное — не требуя от меня кодирования. Но прежде чем произойдёт какое-либо из этих преобразований, большинство дизайнеров работают в своём дизайнерском инструменте. Для меня — это Adobe XD. Давайте рассмотрим, как я перехожу от слоёв к divs.
Проектирование с опытом
Прежде чем приступить к проектированию следующего веб-сайта технологичной компании “единорога”, я хочу продумать компоненты, страницы и сценарии, которые мне нужно будет спроектировать. Каждый шаг из XD легко смоделировать в Webflow.
Я разбиваю дизайн своего веб-сайта на пять разделов:
1. Система
Здесь я создаю свою систему дизайна, всё в одной монтажной области, включая элементы брендинга, такие как:
Также, я включаю больше веб-ориентированных элементов:
- CTAs (кнопки и/или текстовые ссылки)
- Компоненты (карточки, основные разделы, формы, и т.д.)
- Символы (повторяющиеся элементы, такие как глобальная навигация и футер)
Это позволяет мне подумать о том, на чём я хочу создать свой сайт. Как только я спроектировал всё это, я сохраняю их в панели Assets (Ресурсы), XD.
ПАНЕЛЬ ASSETS — ВАШ ДРУГ
Когда я запускаю какой-либо проект, я делаю мудборд в качестве основы для моей системы дизайна. Я добавляю свой логотип, цвета, иконки и заголовки, уровней от h1 до h6.
Затем выберите цвета или стиль знаков (или, любую монтажную область, целиком), откройте панель Assets и щелкните иконку плюс, рядом с соответствующим типом ресурсов. Это добавит все ваши цвета и/или стили текста в панель ресурсов, что значительно упростит их применение к вашему дизайну.
Не верите мне? Вот GIF:
В Webflow я выполняю те же действия. Добавляю семейство шрифтов и глобальные цвета, а также загружаю изображения в панели ресурсов, прежде чем я сделаю что-нибудь ещё. Этот раунд выполнен на высоте. Вот как выбирать и добавить шрифты Google.
После добавления, я настрою свой h1-h6, текст body и paragraph.
Вот как я создаю глобальные цвета:
GIF показывающая действия по добавлению глобальных цветов.
- Создайте div (не задавайте ему название класса)
- Задайте цвет фона
- Сохранить цвет как глобальный образец
Повторите это для каждого цвета бренда. Я предлагаю загружать все сразу, прежде чем вы начнете свой проект. У Adobe, есть удобная классификация о том, как экспортировать ресурсы дизайна или монтажных областей.
2. Карта сайта
Здесь я создаю карту сайта, отображающую все необходимые страницы и иерархические взаимоотношения между ними. Это помогает мне увидеть, сколько монтажных областей мне понадобится в последующих трёх разделах.
3. Варфрейм (wireframe)
Вайфрейминг (wireframing), помогает мне настроить контент и определить изменяемый пользовательский опыт сайта, пока я всё ещё работаю в XD. Здесь я создаю каждый контейнер (container), строку (row) и div, а затем группирую их, чтобы облегчить переход в Webflow.
Другими словами: Я стараюсь всегда думать с точки зрения модели коробки в Интернете, поэтому стараюсь соотносить макет и веб-сайт, один в один, насколько это возможно.
МАКЕТ МОНТАЖНОЙ ОБЛАСТИ
Затем я хочу настроить макет на своих монтажных областях. Я использую параметры, которые мне нужны для данного проекта веб-сайта, впрочем мои по умолчанию — 1200px с 15 колонками. Для этого выделите монтажную область и выберите необходимый макет на панели свойств.
Повторить это в Webflow довольно легко. Проверьте этот шаблон Webflow — клонировать его будет отличным способом узнать, как настроить свой сайт.
4. Высокая точность (Hifi)
Вот где я начинаю применять элементы моей системы к своему вайрфрейму, формируя визуализацию скелета на уровне производства.
Затем я прервусь, чтобы выполнить некоторое волшебство. Нет, я не сделаю вас невидимым — видел, что это делают с людьми.
525,600 минут в год. В каких единицах измерения, вы измеряете год?
С повтором сетки. Вы сэкономите много времени.
Дизайн — это повторение. Вот почему так здорово брать что-то вроде слоёв изображений, повторяющихся сеток и просто дублировать их — снова и снова. Ох, и снова. Что на самом деле не так долго.
Большая часть? Она поможет вам моделировать проекты, которые вы создадите в Webflow, используя Collection Lists (Списки коллекций).
5. Прототип
На этом заключительном этапе я начинаю применять набор инструментов для создания прототипов XD, чтобы связывать страницы, добавить переходы и состояния, а также отполировать предварительный просмотр, прежде чем я воплощу его в жизнь с помощью Webflow. Этот последний шаг является необязательным, но помогает поддерживать соотношение “один в один” между макетами и сайтом, о которых я упоминал ранее, и он отлично подходит, чтобы проиллюстрировать ценности клиентам, если это необходимо.
Возвращаемся обратно к Webflow
Завершающим этапом данного процесса является, конечно же, перенос всей своей работы из XD в Webflow. Следуя описанным здесь шагам, вы убедитесь, что вы идёте к успеху — даже на этапе быстрой разработки — в Webflow.
Adobe XD является одним из самых используемых бесплатных инструментов для UI / UX дизайна, а также прототипирования в сфере мобильного дизайна. Как часть Adobe Creative Cloud, eXperience Design предлагает интуитивно понятный интерфейс и множество опций. Вы сможете создавать и тестировать свои проекты когда полностью ознакомитесь с интерфейсом приложения.
Эта статья поможет вам понять потенциал Adobe XD и начать собственный дизайн-проект для Android и iOS. Это займет у вас не больше часа ! Adobe XD доступен как для Windows, так и для Mac OS.
Мы будем следовать официальному руководству Adobe XD, добавляя некоторые комментарии, советы и дополнительные шаги, чтобы прояснить применяемость данного инструмента. В конце концов, мы применим почти все аспекты данного программного обеспечения. Конечно, достаточно просто прочесть эту статью, чтобы что-то понять, но будет ещё лучше, если вы будете следовать учебному курсу, одновременно используя программу.
Начиная с Adobe XD
Загрузить бесплатную версию XD можно с официального сайта Adobe. После того как вы откроете программу, вы найдете различные шаблоны дизайна для новых проектов.
В следующей статье я создам новый проект с нуля . В этом случае я буду использовать учебник XD, чтобы показать его характеристики.
- Для панорамирования : используйте ваш трекпад, или нажмите пробел+мышь, или нажмите колесико мыши.
- Для увеличения : коснитесь двумя пальцами трекпада, или Ctrl(Cmd)+колесо мыши, или Ctrl(Cmd)+(+/-). Приблизить выбранный элемент, нажмите Ctrl(Cmd)+3.
- Для выбор : используйте клик левой кнопкой мыши. Выбор группы внутри прямоугольной области: щелкните и перетащите.
Используйте эти простые параметры навигации, чтобы увеличить масштаб экрана проекта, и вы увидите что-то вроде этого:
Данное учебное руководство создано таким образом, чтобы вы могли закончить приложение Campvives от Talin Wadsworth. С этого момента вы можете приступать к обучению. Я всё объясню и добавлю некоторые упражнения, чтобы охватить основные свойства XD.
1. ПРЕДВАРИТЕЛЬНЫЙ ПРОСМОТР ТЕКУЩЕГО ПРОЕКТА
Предварительный просмотр будет нашим основным экраном прототипа в Adobe XD. Здесь мы имеем возможность протестировать приложение, понажимать кнопки, проверить различные экраны и переходы.
Совет: При изменении чего-либо в рабочей области, экран предварительного просмотра будет автоматически обновляться . Попробуйте открыть проект на втором экране, чтобы увидеть изменения в реальном времени!
Конечно, предварительный просмотр не является функциональным приложением . Он отображает только пользовательский интерфейс (UI), который мы задаем в нашей рабочей области, перемещаясь между различными экранами в соответствии со связями прототипа. Тем не менее, это хороший пример того, как будет выглядеть дизайн в конечном варианте , и насколько успешно происходит взаимодействие пользователя с приложением.
Совет. Сделать скриншот или записать экран, чтобы поделиться своим проектом в процессе разработки (Cmd+Shift+5 для Mac или Windows+G для Windows 10). Лучший способ поделиться прототипом приложения, мы узнаем в последней главе .
2. СОЗДАНИЕ ЭКРАНА ЗАСТАВКИ (splash screen)
Обратите внимание, что в верхнем левом углу рабочей области есть две вкладки: Design и Prototype (Дизайн и Прототип) . По умолчанию проект открывается на вкладке Design, которая используется для создания и изменения визуальных свойств пользовательского интерфейса (UI).
Выберите инструмент Artboard (Монтажная область) на панели инструментов слева (или горячей клавишей A) , и вы увидите, что панель параметров справа, изменится, отобразив различные шаблоны оформления, соответствующие наиболее часто используемым устройствам.
В нашем случае, проект создаётся для монтажных областей iPhone 6/7/8. Просто щелкните внутри окна, чтобы добавить новый пустой экран. Для разных проектов вы можете создать любой другой шаблон экрана, с точными размерами вашего целевого устройства .
Если вы кликните по логотипу Campvives, то увидите дополнительные опции Appearance. Здесь можно выбирать не только заливку, но и рамки любого изображения. В случае с фигурами, созданными в Adobe XD, доступно редактирование деталей границы. Это поможет вам изменить стиль брендинга вашего приложения, а также протестировать различные закруглённые или резкие формы.
ИЗМЕНЯЕМЫЙ РАЗМЕР И ПОЗИЦИОНИРОВАНИЕ
Возможно, вы могли заметить опцию Responsive Resize (Свободное изменение размера) , над вкладкой Appearance. Эта функция появились с обновления сентября 2018 года. Она позволяет объектам группы сохранять их размещение и масштаб при изменении размера группы .
Для более глубокого понимания того, как использовать Responsive Resize, я рекомендую вам потратить 4 минуты на просмотр официального видео от Adobe CC на Youtube.
В верхней части правого меню вы найдете несколько кнопок, для простого изменения размера и перемещения объектов. Они часто экономят время, когда определяют точные размеры или позиции на вашем макете. Другим вспомогательным инструментом является Grid (Сетка), которую вы найдете в нижней части правого меню при выборе имени артборда. Отобразите макет экрана или квадратную сетку, это поможет вам с пропорциями и позиционированием.
3. РАБОТА С ИЗОБРАЖЕНИЕМ ПРОФИЛЯ
В этом разделе мы покажем, как подгонять изображения под форму и как создавать собственные формы.
Вы можете перетащить в выбранную форму любое изображение, напрямую с вашего компьютера или из рабочего пространства Adobe XD. Изображение автоматически заполняет область соответствующую выбранной форме, просто дважды щелкнете по изображению, чтобы изменить его размер. На макете отобразится только часть изображения, которая расположена внутри формы.
Попробуем заменить наш прямоугольник на новый. Для того, чтобы удалить предыдущий прямоугольник, нажмите Del, либо щелкните правой кнопкой мыши + Del. Для того, чтобы создать новый, выберите инструмент Rectangle (Прямоугольник) в панели инструментов слева (или нажмите R) .
Выберите начальную точку для фигуры и перетащите мышь в противоположный угол. Для нового прямоугольника доступны следующие параметры, такие как: Fill (Заливка), Border (Рамка) или Shadow (Тень). Также, мы можем перетащить любую картинку, как мы это делали используя круглую форму.
Совет. Если вы выберете прямоугольник, вы заметите небольшие круглые точки вблизи его углов. Потяните за одну из круглых точек, расположенных рядом с углами вашего изображения, чтобы создать скругления формы . Делать кнопки, таким образом, очень просто!
Помимо инструмента Rectangle, вы также можете использовать инструменты Ellipse (Овал) (клавиша E), Line (Линия) (клавиша L) и Pen (Перо) (клавиша P) для создания свободных форм.
4. РАСТЯГИВАНИЕ СПИСКА ПОСТОВ БЛОГА
В этом разделе вы научитесь размножать сгруппированные сетки. Эта функция обычно используется для создания копий одной и той же структуры, например, при создании меню, записей в блогах или списков.
Просто выберите всю сетку и нажмите кнопку Repeat Grid (Повторить сетку) в правом меню. Сетка будет выделена пунктирными линиями зеленого цвета. Выберете и перетащить любую из точек границы сетки, чтобы расширить ее, повторяя все содержимое.
Пользуясь профессиональным советом этого урока, вы сможете быстро обновлять все изображения. Если вы пожелаете изменить какой-либо отдельный элемент сетки, Воспользуйтесь кнопкой Ungroup Grid (Разгруппировать сетку) .
5. ПОЗВОЛЬТЕ ПРОКРУТИТЬ ЭТО
Что делать, если мы хотим создать экраны прокрутки? На данный момент мы можем это сделать, но только для вертикальных направлений . Горизонтальная прокрутка пока ещё находится в разработке.
Просто выберите ваш артборд и измените параметр Scrolling (Прокрутка) на Vertical (Вертикальная). Затем растяните нижнюю часть вашего артборда до нужного вам размера. Готово! Чтобы просмотреть прокрутку воспользуйтесь окном предварительного просмотра.
ФИКСИРОВАННЫЕ ОБЪЕКТЫ
Совет. Убедитесь, что фиксированные элементы находятся в верхних слоях вашего макета, так что они не перекрываются прокручиваемыми объектами. Перейдите в меню Layers (Слои) в нижнем левом углу рабочей области (или нажмите сочетание клавиш Ctrl[Cmd]+Y), чтобы проверить это.
6. СДЕЛАЙТЕ ПРОЕКТ ИНТЕРАКТИВНЫМ
Пришло время узнать о режиме прототипирования . Начните с выбора вкладки Prototype (Прототип) в верхнем левом углу рабочей области.
Прототипирование позволяет связывать экраны между собой, чтобы просмотреть, как пользователи будут взаимодействовать с вашим приложением. Используйте окно предварительного просмотра, чтобы протестировать связи прототипа.
Каждый объект может быть связан с другим экраном. Пользуясь этим, вы сможете установить соединение, перетащив синюю стрелку до нужной точки другого экрана.
После создания соединений, вам будут доступны различные параметры:
- Trigger (Триггер). Он задаёт начало действия. При нажатии на объект это происходит по умолчанию. Вы можете установить задержку, чтобы экран, через некоторое время автоматически переключался в нужную точку на другом экране.
- Action (Действия). По умолчанию, действие, находится в режиме Transition (Переход). Эта функция помогает приложению сменить экран назначения. Другим параметром является Overlay (Наложение), он может использоваться для доступа к меню или неполным экранам на текущем экране. Позже мы рассмотрим Overlay (Наложение) более подробно. Последним действием является Previous Artboard (Предыдущий артборд), которое заставляет экран вернуться к предыдущему, когда происходят условия триггера.
- Destination (Место назначения). Это следующий экран, конец вашей синей стрелки.
- Animation (Анимация). Анимация создаёт эффект перехода между экранами. Вам доступны настройки интенсивности и продолжительности эффекта.
Создание оверлея меню
Чтобы создать всплывающее меню, вы должны создать новый артборд с прозрачным фоном. Вы можете изменить непрозрачность цвета фона во вкладке Appearance (Правое меню).
На этом артборде мы можем создать своё меню. Я рекомендую вам взглянуть на мою предыдущую статью, где вы сможете найти полезную информацию и ссылки, если вы хотите загрузить бесплатные элементы для вашего дизайна, такие как шаблоны меню или иконки.
Поскольку меню, которое мы разработали, не охватывает весь экран, мы можем использовать его по принципу наложения. Для этого нам просто нужно определить соединение в рабочей области Prototype, и выбрать действие Overlay.
7. СПОСОБ ПОДЕЛИТЬСЯ ПРОТОТИПОМ ЧТОБЫ ПОЛУЧИТЬ ОБРАТНУЮ СВЯЗЬ
Это заключительная глава небольшого вводного курса. До сих пор мы проверяли наш прогресс в окне предварительного просмотра на своём компьютере. Однако функция совместного доступа позволяет создать общедоступную или закрытую ссылку, чтобы открыть макет вашего приложения в браузере.
В этом случае может пригодиться официальная документация Adobe, узнайте больше о способах публикации здесь.
Совет. Когда вы публикуете превью своего приложения, отправьте ссылку по электронной почте, чтобы открыть непосредственно со своего смартфона . Вы будете тестировать свое приложение прямо с мобильного устройства!
8. ДОПОЛНИТЕЛЬНАЯ ГЛАВА: ЭКСПОРТ ВАШИХ ИЗОБРАЖЕНИЙ
Это одна из самых простых и важных частей вашей работы. Если вы хотите, чтобы кто-то использовал ваш дизайн интерфейса (UI design) при их разработке, вы должны экспортировать изображения в правильные форматы .
Adobe XD поддерживает экспорт отдельных изображений и всего экрана для устройств с различными характеристиками. Просто выберите выходные ресурсы, а XD сгенерирует файлы изображений в отдельных папках в соответствии с плотностью целевого экрана.
Вам доступен экспорт сразу всех экранов проекта, а так же возможность экспортировать определенные объекты из рабочей области.
Выводы
Вы должны были изучить основы Adobe XD следуя этим шагам. Программное обеспечение постоянно развивается, и каждое обновление приносит новые возможности, поэтому будьте в курсе последних событий.
Adobe XD — это очень простой, интуитивно понятный и вместе с тем мощный инструмент для создания интерфейсов приложений, а также проектирования и создания прототипов UI.
Читайте также: