Как работать в adobe xd

Обновлено: 07.07.2024

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.

Получите оперативные ответы на вопросы и ознакомьтесь с пошаговыми инструкциями.

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

Распространенные проблемы

Как устранить проблемы с созданием, открытием, сохранением или потерей данных в облачных документах XD?

Есть несколько причин, по которым вам не удается создать, открыть или сохранить облачные документы, или происходит потеря данных. Чтобы устранить эти проблемы, см. статью Устранение проблем с облачными документами Adobe XD.

Как устранить проблемы с публикацией характеристик дизайна и ссылок на прототипы?

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

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

Настройки браузера могут повлиять на рендеринг характеристик дизайна и прототипов. Сведения по изменению настроек браузера и другие связанные с браузерами решения приведены в статье Опубликованные прототипы Adobe XD не отображаются в браузерах.

Почему не удается импортировать или экспортировать файлы в Adobe XD?

XD поддерживает различные форматы файлов, такие как PSD, Ai, Sketch, JPG и др. Если у вас возникают проблемы с импортом или экспортом этих форматов файлов, см. статью Почему не удается импортировать или экспортировать файлы в Adobe XD?

Как устранить проблемы аварийного завершения работы?

macOS:

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

Windows:

Недостаточные права доступа к папкам XD, а также устаревшие версии драйверов Windows и дисплея могут привести к аварийному завершению работы XD. Чтобы устранить эти проблемы, см. статью Аварийное завершение работы Adobe XD при запуске в Windows 10.

Облачные документы

Что такое облачные документы?

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

Как облачные документы работают в XD?

Вы можете сохранить проекты XD в виде облачных документов, чтобы обеспечить их актуальность и доступность с любого устройства, подключенного к сети. Затем вы можете предоставить к ним доступ другим пользователям Creative Cloud для совместной работы. Изменить облачные документы также можно находясь в автономном режиме. Они будут автоматически сохранены в облаке при подключении к сети.

Чем облачные документы отличаются от других служб Creative Cloud?

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

Почему не удается создать, сохранить или предоставить доступ к облачному документу?

При работе с облачными документами ваш проект синхронизируется с процессом синхронизации Creative Cloud. Проблемы с облачными документами могут возникнуть при наличии проблемы синхронизации Creative Cloud или при необходимости его обновления.Подробные сведения приведены в разделе Устранение проблем с облачными документами Adobe XD.

Внешние модули и интеграция

Как мне продемонстрировать свои проекты XD в Behance?

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

Какие версии XD поддерживают установку и разработку внешних модулей?

Установка и разработка внешних модулей поддерживаются в XD начиная с версии 13.0.

Можно ли получить внешние модули бесплатно?

Да, внешние модули доступны бесплатно.

Как создать внешний модуль?

В меню XD выберите Внешние модули > Разработка > Создать модуль , после чего вы будете перенаправлены в консоль разработчика Adobe I/O.

Для получения информации о сборке, тестировании и отправке внешних модулей для включения в список приложений см. документацию разработчика Adobe XD.

Как загрузить и установить внешние модули?

Информацию о загрузке и установке внешних модулей см. в разделе Создание внешних модулей и управление ими.

Почему не удается установить внешние модули?

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

Загрузка и установка

Какими операционными системами поддерживается XD?

Для получения дополнительной информации о поддерживаемых операционных системах см. раздел Системные требования.

Как загрузить и установить Adobe XD?

Вы можете загрузить свое приложение на веб-сайте Creative Cloud. Войдите в свою учетную запись Adobe при появлении соответствующего запроса, затем нажмите «Загрузить» или «Установить». Дополнительные сведения см. в разделе Загрузка приложений Creative Cloud.

Почему не удается установить XD?

Решения для исправления ошибки, связанной со сбоем при установке, приведены в разделе Ошибка: «Сбой установки» настольного приложения Creative Cloud. Чтобы устранить другие проблемы, связанные с загрузкой, установкой и обновлением, обратитесь к этому руководству по устранению проблем загрузки и установки.

Как восстановить идентификатор Adobe ID или пароль?

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

Управление учетной записью

Как изменить пароль?

Войдите в свою учетную запись Adobe. В разделе Пароль выберите Изменить для параметра Текущий пароль, а затем следуйте инструкциям на экране.

Забыли пароль? Узнайте, как его сбросить.

Как изменить информацию о кредитной карте?

Как обновить начальный план на платный план?

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

Чтобы модернизировать план внутри приложения XD, нажмите «Справка» > «Обновить XD». Откроется страница, на которой вы можете выбрать план, который вам подходит.

Как отменить подписку и что произойдет с моими файлами и доступом к Adobe XD?

После отмены подписки доступ к бесплатным возможностям Creative Cloud сохраняется, как и все общие ссылки, документы, файлы или экспортированные файлы, сохраненные вами на устройстве.

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

Узнайте, как создавать интерактивные прототипы, каркасы и графику с помощью XD.

Adobe XD позволяет дизайнерам UX создавать интерактивные пользовательские интерфейсы для веб-приложений и мобильных приложений.

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

Adobe XD хорошо интегрируется с Photoshop, Illustrator и After Effects.

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

Создание дизайна, прототипов и совместная работа в Adobe XD

Технологический процесс можно кратко описать с помощью следующих шагов.

Создание дизайна. Создавайте элементы макета дизайна, добавляйте монтажные области и импортируйте ресурсы из других приложений, таких как Adobe Illustrator, Adobe Photoshop и Adobe After Effects. Воспользуйтесь плагинами, чтобы автоматизировать повторяющиеся операции или части технологических процессов дизайнера, которые являются утомительными, сложными или рутинными.
Создание прототипа. Выберите объекты или монтажные области в своем дизайне и создайте взаимосвязи между монтажными областями.
Предоставление доступа. Как только ваш проект будет готов к рассмотрению, вы можете поделиться прототипами или спецификациями дизайна или экспортировать проект либо ресурсы для заинтересованных сторон.

Далее мы расскажем подробнее о разработке дизайнов, создании прототипов и совместной работе в XD.

Дизайн

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

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

Первые варфреймы, схемы переходов, для мобильного приложения из 64 экранов заняли 16 часов моей жизни, 6 подходов по 2–3 часа. Раза три хотелось бросить уже это всё. Проработка интерфейса — занятие сколь интересное, столь и утомительное.

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

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

Стадия 0. Черновик

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

Выбрать операционную систему, в контексте которой будете рисовать.
Распределить функции по разделам.

Когда определитесь, iOs или Android (выбор не всегда очевидный), не поленитесь узнать стандарты реализации функциональности выбранной платформы. Как хорошо, что разработчики ОС собрали эту информацию за нас. Ссылки на стайлгайды Apple и Google. В примере этой статьи был выбран Android-интерфейс.

Настало время мозгового штурма для расстановки разделов. Не вымещайте идеи сразу в XD — это ошибка. Лучшее начало — набросать экраны ручкой на бумаге. Это помогает быстро составить список функций и сориентироваться какие в проекте есть вложенности экранов. Отличное упражнение — в буквальном смысле расставляет по местам 90 процентов проекта.

Черновик. Боковое меню заменила нижняя навигация.

Стадия 1. Начинаем рисовать

К этой фазе мы подходим с общим знанием о вложенности функций и примерным представлением о переходах между экранами. Можно собирать прототип.

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

От lo-fi к hi-fi. Речь о степени детализации и стилизации экранов прототипа. В самом начале проработки, как бы вам ни хотелось, постарайтесь не застревать на одном экране, доводя его до «идеала».

Я застревал, поэтому делал прототип столько, сколько получилось. А клиент, на согласованиях уровня идей (прототип именно их и отражает), не вдается в детали, ему важно увидеть что вы уловили смысл (проверено на нескольких заказчиках).

В режиме низкой детализации проще сосредоточиться на структуре приложения и том, как пользователи должны взаимодействовать с ним. Это важный шаг разработки, который заставляет тебя как проектировщика работать с определенным набором проблем, прежде чем вникать в вопросы цвета, стиля, вместо того, чтобы решать, была ли кнопка на правильном расстоянии от текста над ней (это ведь очень важно! Некрасиво же будет).

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

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

Приложение On Shore. Еще удобнее брать целые экраны, убирая ненужное и добавляя нужное. Увидел этот шаблон слишком поздно, с ним варфреймы получились бы ещё стильнее. Прототип под iOS. . С примерами расположения элементов. Выручил меня неоднократно. Создан Great Simple Studio. — русскоязычный сайт об XD, с подборкой классических разделов мобильных приложений.

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

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

Тексты Lorem ipsum не создают проблем, хоть и кажутся дурацкими, в условиях ограниченного времени подходят для наших задач. Конечно, «боевые» тексты проекта лучше, но оставьте их на этап тюнинга. Чтобы рыба текста была интереснее, идите к Джулсу из Криминального чтива.

Включаем Prototype. Одноименный режим Adobe XD. В нем мы присваиваем элементам экраны действия, которые мы от них хотим получить. Стрелка «назад» возвращает на предыдущий экран, кнопка «сохранить» сворачивает клавиатуру и отправляет данные на сервер. Взаимодействия в XD тестируются окном предварительного просмотра (Cmd-Enter), которое дает достаточную обратную связь, чтобы убедиться, что приложение работает так, как мы того хотим.

Стадия 2. Спускаемся в детали

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

На этом этапе можно сделать:

реальные тексты;
реальные фото;
более точные по смыслу иконки;
калибровку размеров и расположения иконок.

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

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

6 главных фишек Xd

Микродействия, открытию которых в процессе работы я был особенно рад.

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

Применение цвета. На языке фотошопа — пипетка. Появляется в правом боковом меню после выбора элемента. Нужно в основном для сливания выбранного элемента с фоном экрана.

Блокировка слоя. Когда нужно было выделить, например, нижнее навигационное меню, и немного опустить его вниз, а вместе с ним неизбежно выделяется и фон. Решение — нажать на фон, выбрав его, и Cmd-L. Будет теперь стоять на месте. Блокировать можно несколько элементов одновременно.

Кнопки центрирования. Ставят элемент ровно посередине ширины или высоты одним нажатием на иконку. Находятся в правом верхнем углу.

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

Мнение автора и редакции может не совпадать. Хотите написать колонку для «Нетологии»? Читайте наши условия публикации.

Читайте также: