Прокрутка экрана в adobe xd
Adobe Experience Design — отличное приложение для UI / UX дизайнеров, среди всех прочих функций, оно предоставляет вам возможности как для разработки дизайна, так и для создания взаимодействия прототипа с переходами между монтажными областями. Вот список моих любимых советов и трюков, которые позволят вам использовать потенциал XD.
Вот 40-минутное видео, которое я сделал, а ниже вы найдете резюме:
Вы можете создавать простые макеты и вайрфреймы с помощью мобильного приложения Adobe Comp для iOS и Android. Преимущественно быстрое и интуитивное прототипирование с применением пальца или стилуса с множеством предопределенных жестов. Также легко создать вайрфрейм на встрече с вашим клиентом. Несмотря на то, что Adobe Comp не поддерживает экспорт в Adobe XD, вы можете экспортировать в Illustrator, а затем скопировать и вставить в Adobe XD для редактирования векторных фигур.
Если вы хотите передать растровые изображения между Photoshop и Adobe XD, просто сделайте выделение в Photoshop, а затем нажмите Cmd + Shift + c (скопировать все объединенные копии, которые отображаются при выделении), а затем нажмите Cmd + v в Adobe XD. Однако, вы также можете экспортировать векторные слои из Photoshop, щелкнув правой кнопкой мыши на слой и выбрав “Копировать SVG” и вставить в XD.
В Adobe XD вы можете включить сетку для монтажных областей с помощью горячих клавиш Cmd + ‘. По умолчанию сетка имеет значение 8 px, поэтому сдвиг Shift + стрелка влево / вправо не помещается в сетку. Нажмите на название монтажной области, чтобы выбрать её, и измените значение по умолчанию 8px на 10 пиксельную сетку, чтобы соответствовать значению сдвига. Сделайте это по умолчанию для дальнейших проектов.
Сейчас в Adobe XD, нет таких направляющих, как в Photoshop, тем не менее умные направляющие появляются при перетаскивании и обеспечивают более удобное позиционирование элементов. Однако иногда такое поведение по умолчанию может привести к нежелательной привязке. Просто нажмите Cmd, а затем перетащите, чтобы временно отключить умные направляющие.
Лучше всего создать отдельную монтажную область для руководства по стилю, в которую вы поместите все атрибуты айдентики, а также цвета бренда, типографику, общие стили и элементы управления, такие как кнопки, ввод данных и общие иконки.
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 придерживается своего слова, обеспечивая столь необходимыми обновлениями Adobe XD для Windows.
В февральском обновлении они выпустили новые обновления, которые включают в себя, прежде всего, 4 новые функции. Ниже, мы приведем краткий обзор и видео урок, на случай необходимости, этих новых функций.
Если вы предпочитаете смотреть видео.
Прокрутка рабочей области
Само собой разумеется, что наши сайты и приложения иногда прокручиваются! До этого обновления было невозможно имитировать прокрутку в Adobe XD.
К счастью, сделать экран или рабочую область с прокруткой, очень просто.
Предположим, у вас есть следующая рабочая область (кстати, мы скопировали ее из UI набора Google Material Design в Adobe XD), и вы хотите имитировать прокрутку списка имен.
Обратите внимание на выделенную красным настройку Viewport Height. Это видимая область по умолчанию.
Если вы хотите, чтобы эта рабочая область прокручивалась выше этой высоты, просто потяните вниз, нижнюю часть рабочей области:
Обратите внимание на пунктирную горизонтальную линию, это высота видимой части экрана. Все, что ниже этого, станет прокручиваемым контентом.
Давайте растянем группу Name до конца рабочей области:
Теперь нажмите на значок воспроизведения в правом верхнем углу и вуаля! Мы можем прокручивать её вниз!
Визуальные наложения и фоновые размытия
Всякий раз, когда вы хотите привлечь внимание к определённой области макета, вы можете размыть область, которая не важна. Теперь, Adobe XD позволяет вам сделать это очень легко.
Используя пример выше, продублируйте рабочую область:
Теперь выберите инструмент Rectangle и нарисуйте прямоугольник, который закрывает все, кроме синей навигационной панели с заголовком (также отключите обводку прямоугольника):
Затем поставьте галочку Background Blur справа, чтобы размыть фон и измените значение Amount на 6.
Вы также можете изменять яркость и непрозрачность.
Для имитации модального / всплывающего окна, чтобы наполнить некоторым контекстом для эффекта, вставьте модальный шаблон из UI набора Google Material Design:
Теперь вы можете переключиться на вкладку Prototype, если хотите создать базовое взаимодействие прототипа. Запустите его и посмотрите, как это работает!
Раньше маленький значок на правой верхней панели инструментов не работал; Теперь он работает!
Экспорт в SVG
Раньше вы могли экспортировать только в PNG. Теперь вы также можете экспортировать в SVG. И это круто, потому что теперь вы можете использовать Adobe XD для создания настоящей векторной графики.
As designers, we all love to show maximum content to our viewers and users. With the next-generation device form factors becoming smaller and smaller, scrolling has become an integral part of any website or app. Without the scrolling feature, one cannot read or see the details and images further listed in the app or website. Adobe XD is a great tool for designers and developers for creating wireframes, prototypes, and designs for digital products. Adobe XD scrolling is a new feature added by Adobe XD in the form of "Scroll Groups".
How to Create Horizontal Scrolling Animation in Adobe XD
Sometimes when you create an Adobe XD design, it is not possible to fit your long content on the artboard. With the help of Scroll Groups, you can create various scrollable groups within a single artboard. Before Scroll Groups was introduced scrolling in Adobe XD was limited to the vertical scroll in the artboard. Now there are more options available through which the designers can introduce scroll vertical, horizontal, or vertical & horizontal (also known as Pan). Here is a complete guide on how you can create an Adobe XD horizontal scroll.
- To create a Scrollable group, you need to first enable the layers that are going to be scrolled. You need to choose the Content group for creating a scrollable group. Then, click on the "Horizontal scroll button"
- The next step is to design or select an Adobe XD scrollable area.
- Next, go to the design mode, and select the objects you want to turn to scroll group.
- Then select the options in the Property Inspector menu - for scrolling (select horizontal), fix the position while scrolling, and then specify the width of the artboard.
- After that you can wireframe the artboard using the prototype mode. There are various options in the Prototype mode like fixing position while scrolling or preserve the previous position.
- Once everything is set up, its now time to preview all the prototype comprising Adobe XD horizontal scroll. To preview the artboard, click on Desktop Preview. You can even drag the preview window to view the horizontal scroll.
Scroll groups are very handy to use in Adobe XD because of its unique UI elements. Now that you have an idea of creating a horizontal XD scrolling, you can create a vertical or both (horizontal and vertical) in the same way.
Would you interested in responsive design in Adobe XD? Click and learn more about How to Use Adobe XD Responsive Design: A Beginner-friendly Guide.
How to Create Horizontal Scrolling Animation with Adobe XD Alternative
Let us face it – Adobe XD scrolling is quite complicated. Further, more and more designers now prefer zero installation, cloud-based tools. Designers prefer tools that can just be accessed via a web browser anytime and on any device.
One of the most highly recommended, cloud-based, and completely online tools is Wondershare Mockitt. Mockitt helps to animate and prototype much faster. And you can design prototypes easily without any coding knowledge. There is no need to install, download or update the software version. You can log in and use it directly through a browser. It helps in multiplying efficiency and ensures data security and recovery. You can also demo your designs online/offline and get instant feedback. Wondershare Mockitt comes with a wide variety of templates that enable you to easily create smooth horizontal or vertical scrolling.
The obvious next question is - how to create Horizontal Scrolling with this Adobe XD Alternative. Here's how -
Step 1. Create a new project
Once you log in to Mockitt, you can get started by creating a new project by clicking the "Create > Prototype" button and choosing the device type.
Step 2. Design Your Prototype
Now you can drag-and-drop the built-in widgets in the "Basic" libraries. You can also search for more assets, like the icons, components, screens, etc. on the "Explore" tab.
Step 3. Select the Components
Drag your mouse and select the components you want to scroll. In this tutorial, we will take image scrolling for example. Now you select the two images.
Step 4. Create a Widget State
Then you will find there is an "Add Widget State" button that appears on the right properties panel. Click on that and then you can set different states for the dynamic widgets.
Step 5. Create State 2
Now you can click the "New" to create a new state, or you can simply copy State 1 and adjust the image position to make it different from State 1.
Step 6. Connect State 2 and State 1
Click the widget and then drag the lightning bulb to State 1. This will connect State 2 to State 1. And you should also connect State 1 to State 2.
Step 7. Set Event Gesture
Click the gesture icon and change the event gesture on the right panel. If you want to scroll horizontally, then you can choose "Swipe Left" for State 2 and "Swipe Right" for State 1.
Step 8. Exit Editing the Dynamic Widget
After you finish setting the dynamic widget, you can click the Exit Editing icon.
Step 9. Preview the Horizontal Scroll
Click the blue preview icon and then enter into the preview mode.
The preview mode give you the real device frame and you can also choose to preview in the PRD mode. Now you can scroll the images you just set. Simply swipe left and swipe right.
Читайте также: