Как сделать фон в adobe xd
Обновлено: 02.07.2024
Итак, каково фактическое назначение целевой страницы? Что ж, излагая просто, это: (а) информировать ваших посетителей о преимуществах и возможностях, связанных с вашим продуктом или услугой, и, самое главное, (б) заставить их предпринять какое-то действие.
Действие, которое они предпринимают, может быть нажатием кнопки, предоставлением вам электронной почты, совершением покупки или просто переходом на другую страницу.
В любом случае существуют некоторые универсальные принципы, которые применяются ко всем целевым страницам, которые определяют их эффективность.
В этом уроке я покажу вам свой процесс разработки целевой страницы в 2018 году, который, предположительно, не полностью отличается от прошлых лет. ;)
Если вы предпочитаете смотреть видео..
Сначала макет / прототип
Никогда, повторяю, никогда не начинайте прямо с процесса HTML и CSS, когда вы создаёте целевую страницу. Сначала, вам нужно использовать графическое приложение (я буду использовать Adobe Experience Design), чтобы создать макет страницы, которую вы намереваетесь создать.
Почему? Вот несколько причин..
- Это быстро и легко.
- Он даёт вам визуальное представление того, как ваша целевая страница будет выглядеть в браузере.
- Проще вносить изменения без корректировки кода.
Создание фона для вашей целевой страницы
Как и со многими другими темами, в которые мы собираемся погрузиться, здесь также есть много субъективностей. Не существует единого решения, какой именно тип фона вы должны использовать.
Однако существуют некоторые универсальные принципы. Ваш фон должен быть:
Для этого проекта, который является моим личным криптовалютным проектом, я создал, называние Crypts, и собираюсь использовать самый светло-серый фон с водяным знаком. Водяной знак будет иметь отношение к цели моего проекта, и будет содержать в себе свечи, которые растут в зависимости от стоимости валюты по всему фону:Заголовки и подзаголовки целевой страницы
Совершенно каждая целевая страница должна иметь заголовок, который как минимум будет заметным пятном в тексте, чтобы по-настоящему захватить внимание пользователей. С точки зрения визуальной иерархии, это самое главное на, что прежде всего, вы должны обратить взгляд ваших посетителей.
Вторичным заголовком является подзаголовок, который содержит дополнительную информацию о вашем продукте или услуге.
Мой заголовок и подзаголовок:
Вот как это выглядит в моем макете:
Призыв к действию
CTA (Призыв к действию) — это именно то, как это звучит; вам нужно, чтобы ваши посетители выполнили какое-то действие. В нашем случае нужно кликнуть по кнопке, которая запустит модальное окно для присоединения или входа в систему.
Эту кнопку призыва к действию *необходимо* выделять из остальной части вашего содержания. Предпочтительно, она должна использовать цвет, который отличается высоким контрастом от фона и, возможно, уникальным для остальной части вашей цветовой темы.
Вы хотите привлечь внимание посетителей к ней. Надпись внутри кнопки также очень важна, “Нажми на меня” внушает ужас! Попробуйте использовать что-то релевантное в зависимости от действия, которое вам необходимо выполнить.
Вы хотите привлечь внимание посетителей к ней.
В нашем случае мы хотим, чтобы посетители присоединились или вошли в систему:
Вспомогательные медиа
Ваша целевая страница должна содержать некоторые типы медиа, будь то фотография, иллюстрация или видео. В моем случае я хочу интегрировать анимированную иллюстрацию. Мы не будем анимировать её в этом уроке (это будет во 2 части), но я буду разрабатывать её.
Adobe XD содержит очень простые инструменты для рисования векторной графики. Поскольку моя идея относительно уникальна, я хочу показать её самую упрощённую версию текущего пользовательского интерфейса чата, который будет выравниваться по правому краю во второй колонке.
В данный момент задача — создать простую векторную иллюстрацию пользовательского интерфейса, не содержащую слишком много фактических элементов.
Заключение
Эта целевая страница, очевидно, очень проста. В более реалистичном сценарии вы определенно захотите поэкспериментировать с длинной рекламной копией страницы в сравнении с обычной. Вы должны использовать A/B-тестирование, чтобы определить, какая из них наиболее успешна на основе установленной цели.
Другие элементы, которые вы могли бы включить на целевую страницу, в зависимости от того, что на ней продается:
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.
Научитесь задавать обводку, заливку тени и внутренние тени, а также создавать эффекты наложения для объектов в Adobe XD.
Щелкните прямоугольник рядом с инструментом Заливка . Откроется палитра цветов.
Также можно использовать инструмент «Пипетка» для заливки цветов. Клавиша [i] запускает инструмент «Пипетка» для выбора цвета заливки.
- Если нажать эту клавишу один раз, откроется инструмент «Пипетка» для выбора цвета заливки.
- Если снова нажать эту клавишу, инструмент «Пипетка» для выбора цвета заливки закроется.
- Указать HSBA, RGB или шестнадцатеричные значения, если вам известны точные цветовые значения. Вы также можете переключиться между различными цветовыми режимами.
- Настроить цвет, используя поле «Цвет» и шкалу цвета. При этом числовые значения HSBA, RGB и шестнадцатеричные значения корректируются соответствующим образом.
- Задать цвет заливки и установить непрозрачность заливки с помощью шкалы цвета или указав значение в процентах.
- Использовать инструмент «Пипетка» для выбора цвета из монтажной области.
- Применить градиентные заливки к объекту. Дополнительную информацию о градиентах см. в разделе Создание и изменение градиентов.
Вы можете просматривать изменения на монтажной области в ходе изменения параметров с использованием палитры цветов.
Вы можете сохранить цвет как цветовой образец для будущего использования. Чтобы сохранить цвет как цветовой образец, щелкните значок + в нижней части палитры цветов.
Вы можете изменить порядок расположения цветовых образцов в палитре цветов, перетащив их на новые места. Чтобы удалить цветовой образец, перетащите его за пределы палитры цветов.
Применение заливки изображением к объектам
Сначала включите заливку, если она еще не включена (как описано в разделе Применение цвета заливки к объекту). Затем перетащите изображение на объект из места его сохранения (например, Finder или Windows Explorer).
Кадрирование и размещение изображения для заливки
Теперь вы можете дважды щелкнуть изображения, размещенные в контейнерах ( Объект > Маска с помощью фигуры ), чтобы кадрировать и изменить положение изображения (при перетаскивании с компьютера) для заливки. Используйте режим кадрирования для заливки изображением, чтобы:
- Дважды щелкнуть и войти в режим кадрирования изображения для заливки
- Изменить положение изображения в режиме кадрирования или
- Переместить изображение в любое место в режиме кадрирования
Это расширенный функционал распространяется также на файлы, импортированные из Photoshop и Sketch. Импортированные файлы сохраняют изображения для заливки и кадрирование, выполненное в исходном приложении.
Вставка изображения из буфера обмена
Вы также можете скопировать изображение, которое не находится в Adobe XD, в буфер обмена своей операционной системы, а затем вставить это изображение из буфера обмена как изображение для заливки. Изображения также заполнят фигуру, если эта фигура выделена и пользователь выбирал Файл > Импорт.
Узнайте, как использовать монтажные области для создания дизайн-проектов в XD.
Познакомьтесь с Джинни — графическим дизайнером, которого выбрали руководителем проекта UX-дизайна. Она предлагает Adobe XD своей рабочей группе, участники которой имеют разный уровень опыта в дизайне и инструментах UX.
- Она ищет ресурсы, которые помогут быстро начать работу над проектом.
- Чтобы начать работу, ей нужны учебные пособия, а чтобы продолжить — примеры файлов.
Джинни изучает основы терминологии дизайна и работает с монтажными областями, чтобы создать в XD свой первый прототип. Прочтите, чтобы узнать, как мы можем помочь ей приступить к работе.
Еще не знакомы с Adobe XD?
Попробуйте сами
Ознакомьтесь с основами XD:
Что такое монтажная область? Монтажные области представляют собой экраны вашего приложения или страницы вашего веб-сайта. Это упрощает процессы проектирования и создает интерактивные проекты для экранов разных размеров в одном документе. Используйте монтажные области для создания проекта XD.
Прочтите, и вы узнаете, как настроить монтажные области.
Создать новую монтажную область
Adobe XD предоставляет монтажные области для экранов популярных размеров, например для различных версий iPhone, iPad и веб-страниц. Вы можете создать собственную монтажную область, если выбранные вами варианты не соответствуют вашим требованиям.
Главный экран
Используйте предустановленные размеры монтажной области или создайте собственную монтажную область.
Приложение XD
Используйте инструмент Монтажная область для создания дополнительных монтажных областей. Выберите и примените стили монтажных областей из инспектора свойств.
Используйте имеющуюся монтажную область из Photoshop и Illustrator
Вы можете импортировать имеющиеся монтажные области из Photoshop или Illustrator в приложении XD без их повторного создания.
Используйте Файл > Импорт в приложении XD, чтобы открыть монтажные области Photoshop или Illustrator в приложении XD с сохранением всех монтажных областей и слоев, которые можно редактировать.
Управлять монтажными областями
Передумали по поводу размера монтажной области? Измените размер. Заголовок проекта можно при необходимости изменить. Хотите создать больше монтажных областей и управлять их размещением? Выполняйте дублирование и перестановки.
Переименование
Дважды нажмите на заголовок монтажной области.
Изменение размера
Перетащите круглый маркер, который появился по краям монтажной области.
Дублировать
Выберите монтажную область и нажмите Ctrl /Cmd + D.
Выровнять и распределить
Выделите несколько монтажных областей и нажмите Выровнять и распределить в Инспекторе свойств. Для перестановки перетащите монтажную область.
Применение макета или квадратных сеток
Хотите определить базовую структуру содержимого, добавленного в монтажные области вашего проекта? Используйте сетки макета. Хотите узнать, как быстро измерить и выровнять содержимое дизайна при размещении объектов или текста на монтажных областях? Используйте квадратные сетки.
Сетки макета
Выберите одну или несколько монтажных областей, а в разделе Сетка в Инспекторе свойств выберите Макет.
Квадратные сетки
Выберите одну или несколько монтажных областей в разделе Сетка в инспекторе свойств, выберите Квадрат.
Теперь, когда вы создали свою первую монтажную область, узнайте, как добавлять визуальные и текстовые элементы, изменять фон и создавать эффекты прокрутки.
Добавление визуальных и текстовых элементов
Теперь, когда ваша базовая монтажная область создана и настроена, вы можете создавать или изменять цвет фона, добавлять графику и создавать или форматировать текстовые стили в повторно используемых ресурсах. Хотите создать редактируемую сетку повторяющихся элементов? Используйте повторяющиеся сетки.
Добавление визуальных и текстовых элементов
Используйте инструменты для рисования, чтобы создавать пользовательские элементы или выбирать Файл > Импорт для импорта существующих элементов, а именно изображений и значков из папки вашего устройства. Используйте текстовые инструменты для создания, форматирования и захвата текстовых стилей в повторно используемых ресурсах.
Чтобы изменить фоновый цвет монтажной области, в Инспекторе свойств выберите Заливку и примените цвет из палитры цветов.
Читайте также: