Adobe XD — новый продукт от Adobe, предназначенный для разработки прототипов интерфейсов и проработки пользовательских сценариев. Пока для XD мало материалов и библиотек, но их число с каждым днем растет.
Предлагаем вам ознакомиться с отличными уроками по Adobe Xd, которые помогут освоить эту программу.
Как скачать и установить программу Adobe XD
10 ESSENTIAL Tips for Adobe XD
Adobe XD Обзор программы Урок 1
Adobe XD Как начинать прототипирование Обзор программы XD Урок 2
Adobe XD Обзор программы. Подготовка материала для прототипирования Урок 3
Adobe XD Финальная версия урока или как оживить ваш макет Урок 4
Обзор Adobe XD за 17 минут для верстальщиков и веб-дизайнеров
Мастер-класс по Adobe XD
Адаптивная HTML вёрстка из Adobe XD на реальном примере
Adobe XD (Preview) The Basics of Adobe Experience Design | Dansky
Learn How to Use the Repeat Grid Tool in Adobe Experience Design (Adobe XD) | Dansky
Learn How to Create Responsive Guides in Adobe Experience Design (Adobe XD) | Dansky
Learn How to Export Assets in Adobe Experience Design (Adobe XD) | Dansky
Learn How to Edit the Corner Radius of Shapes in Adobe XD | Dansky
Learn How to Quickly Add Images in Adobe XD | Dansky
Learn How to Design a Switch UI in Adobe XD | Dansky
Learn How to Design a Carousel Slider in Adobe XD | Dansky
Learn How to Use the Pen Tool in Adobe XD | Dansky
How Character Styles Adobe XD Tutorial
How to Design Banners in Adobe XD
How to Design https://infogra.ru/ui/25-urokov-po-adobe-xd-dlya-novichkov» target=»_blank»]infogra.ru[/mask_link]
Изучение основ Adobe XD за 1 час – Познайте eXperience Design для выполнения собственных дизайн проектов
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, чтобы показать его характеристики.
Нажмите кнопку Begin Tutorial. Откроется главное окно, загрузите проект из урока. Основная навигация вашей рабочей области выглядит следующим образом:
Для панорамирования : используйте ваш трекпад, или нажмите пробел+мышь, или нажмите колесико мыши.
Для увеличения : коснитесь двумя пальцами трекпада, или 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. Просто щелкните внутри окна, чтобы добавить новый пустой экран. Для разных проектов вы можете создать любой другой шаблон экрана, с точными размерами вашего целевого устройства .
Смените имя в левом верхнем углу экрана, дважды щелкнув по нему. Переименуйте проект в «Splash».
Теперь выберите инструмент Selection (Выделение) на панели инструментов (слева или горячей клавишей V) , и перетащите логотип на экран заставки. Теперь щелкните по имени («Splash») или дважды щелкните по экрану заставки. Мы можем изменить фон в параметрах Appearance (Внешний вид) в правом меню. Появится общее окно выбора цвета. Здесь можно отметить несколько возможностей:
Сохранение цветов . Мы можем сохранить любой из цветов для последующего использования, нажав клавишу +. Для того, чтобы удалить цвет из палитры проекта, просто перетащите его за пределы окна.
Использование градиентов . Кликнув по вкладке «Solid Color» (Сплошной цвет), вы откроете меню градиентов. Они пригодятся для создания фоновых градиентов.
Пипетка . Используйте пипетку, чтобы захватить любой цвет на вашем экране.
Если вы кликните по логотипу 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 (Вертикальная). Затем растяните нижнюю часть вашего артборда до нужного вам размера. Готово! Чтобы просмотреть прокрутку воспользуйтесь окном предварительного просмотра.
ФИКСИРОВАННЫЕ ОБЪЕКТЫ
У вас может возникнуть желание зафиксировать некоторые объекты во время прокрутки, например верхнюю или нижнюю панель. Просто выберите нужные вам элементы и отметьте опцию «Fix position when scrolling» (Зафиксировать положение во время прокрутки) .
Совет. Убедитесь, что фиксированные элементы находятся в верхних слоях вашего макета, так что они не перекрываются прокручиваемыми объектами. Перейдите в меню Layers (Слои) в нижнем левом углу рабочей области (или нажмите сочетание клавиш Ctrl[Cmd]+Y), чтобы проверить это.
6. СДЕЛАЙТЕ ПРОЕКТ ИНТЕРАКТИВНЫМ
Пришло время узнать о режиме прототипирования . Начните с выбора вкладки Prototype (Прототип) в верхнем левом углу рабочей области.
Прототипирование позволяет связывать экраны между собой, чтобы просмотреть, как пользователи будут взаимодействовать с вашим приложением. Используйте окно предварительного просмотра, чтобы протестировать связи прототипа.
Каждый объект может быть связан с другим экраном. Пользуясь этим, вы сможете установить соединение, перетащив синюю стрелку до нужной точки другого экрана.
После создания соединений, вам будут доступны различные параметры:
Trigger (Триггер). Он задаёт начало действия. При нажатии на объект это происходит по умолчанию. Вы можете установить задержку, чтобы экран, через некоторое время автоматически переключался в нужную точку на другом экране.
Action (Действия). По умолчанию, действие, находится в режиме Transition (Переход). Эта функция помогает приложению сменить экран назначения. Другим параметром является Overlay (Наложение), он может использоваться для доступа к меню или неполным экранам на текущем экране. Позже мы рассмотрим Overlay (Наложение) более подробно. Последним действием является Previous Artboard (Предыдущий артборд), которое заставляет экран вернуться к предыдущему, когда происходят условия триггера.
Destination (Место назначения). Это следующий экран, конец вашей синей стрелки.
Animation (Анимация). Анимация создаёт эффект перехода между экранами. Вам доступны настройки интенсивности и продолжительности эффекта.
Создание оверлея меню
Чтобы создать всплывающее меню, вы должны создать новый артборд с прозрачным фоном. Вы можете изменить непрозрачность цвета фона во вкладке Appearance (Правое меню).
На этом артборде мы можем создать своё меню. Я рекомендую вам взглянуть на мою предыдущую статью, где вы сможете найти полезную информацию и ссылки, если вы хотите загрузить бесплатные элементы для вашего дизайна, такие как шаблоны меню или иконки.
Поскольку меню, которое мы разработали, не охватывает весь экран, мы можем использовать его по принципу наложения. Для этого нам просто нужно определить соединение в рабочей области Prototype, и выбрать действие Overlay.
7. СПОСОБ ПОДЕЛИТЬСЯ ПРОТОТИПОМ ЧТОБЫ ПОЛУЧИТЬ ОБРАТНУЮ СВЯЗЬ
Это заключительная глава небольшого вводного курса. До сих пор мы проверяли наш прогресс в окне предварительного просмотра на своём компьютере. Однако функция совместного доступа позволяет создать общедоступную или закрытую ссылку, чтобы открыть макет вашего приложения в браузере.
В этом случае может пригодиться официальная документация Adobe, узнайте больше о способах публикации здесь.
Совет. Когда вы публикуете превью своего приложения, отправьте ссылку по электронной почте, чтобы открыть непосредственно со своего смартфона . Вы будете тестировать свое приложение прямо с мобильного устройства!
Это одна из самых простых и важных частей вашей работы. Если вы хотите, чтобы кто-то использовал ваш дизайн интерфейса (UI design) при их разработке, вы должны экспортировать изображения в правильные форматы .
Adobe XD поддерживает экспорт отдельных изображений и всего экрана для устройств с различными характеристиками. Просто выберите выходные ресурсы, а XD сгенерирует файлы изображений в отдельных папках в соответствии с плотностью целевого экрана.
Вам доступен экспорт сразу всех экранов проекта, а так же возможность экспортировать определенные объекты из рабочей области.
Выводы
Вы должны были изучить основы Adobe XD следуя этим шагам. Программное обеспечение постоянно развивается, и каждое обновление приносит новые возможности, поэтому будьте в курсе последних событий.
Adobe XD — это очень простой, интуитивно понятный и вместе с тем мощный инструмент для создания интерфейсов приложений, а также проектирования и создания прототипов UI.
Если у вас есть дополнительные вопросы, не стесняйтесь их задавать!
Источник: xdkit.ru
Adobe XD для Windows
Примечание! Доступен бесплатный план XD Starter Plan.
ТОП-сегодня раздела «Редакторы»
Приложение, благодаря которому создание красивых дизайнов для работы, учебы и.
Быстрая мощная CAD-система, которая предлагает функциональные возможности для.
GIMP — мощный, бесплатный графический редактор, по своим возможностям практически не.
Adobe Photoshop — художники, работающие в области компьютерного дизайна, могут бесконечно.
Небольшая бесплатная утилита, позволяющая рисовать в любом окне открытого приложения или.
XnViewMP — мощное многофункциональное приложение для работы с графическими файлами на компьютере, являющееся расширенной версией программы XnView.
Отзывы о программе Adobe XD
Отзывов о программе Adobe XD 25.3.12 пока нет, можете добавить.
Источник: www.softportal.com
Прототип мобильного приложения в Adobe 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 есть ссылки на стандартные наборы, но им не хватает примеров использования элементов по стайлгайдам. Поэтому познакомлю с другими ресурсами, на которых остановился сам после отсмотра десятка пакетов:
От дизайнеров Facebook — мой выбор в категории iOS подборок.
Приложение On Shore. Еще удобнее брать целые экраны, убирая ненужное и добавляя нужное. Увидел этот шаблон слишком поздно, с ним варфреймы получились бы ещё стильнее. Прототип под iOS.
Лучший Android-набор. С примерами расположения элементов. Выручил меня неоднократно. Создан Great Simple Studio.
Шаблоны приложений — русскоязычный сайт об XD, с подборкой классических разделов мобильных приложений.
Несколько стандартных фреймворков. Под фреймворками мы понимаем типовые экраны вашего будущего приложения, например, лицевые экраны разделов и экраны первой вложенности. Так мы выдерживаем последовательность в виде единых подходов и одинаковых решений для схожих задач. У таких экранов повторяются местонахождения иконок, текстов, схожи интерфейсные решения.
На практике, после проработки 8-9 экранов эти фреймворки дадут о себе знать, потребуют повторного использования. Придерживайте эти болванки рядом с основной рабочей областью и вставляйте как каркас очередного экрана.
Не бойтесь использовать скриншоты. По тем же соображениям, что клиент не вдается детали. Отсмотр похожих приложений дает необходимое вдохновение для собственных идей. И если планируется лента новостей, а нравится реализация в приложении Meduza и вы поузнавали у разработчиков насколько сложно будет сделать также. Советую вставлять скриншоты, а клиенту устно объяснить замысел.
Тексты Lorem ipsum не создают проблем, хоть и кажутся дурацкими, в условиях ограниченного времени подходят для наших задач. Конечно, «боевые» тексты проекта лучше, но оставьте их на этап тюнинга. Чтобы рыба текста была интереснее, идите к Джулсу из Криминального чтива.
Включаем Prototype. Одноименный режим Adobe XD. В нем мы присваиваем элементам экраны действия, которые мы от них хотим получить. Стрелка «назад» возвращает на предыдущий экран, кнопка «сохранить» сворачивает клавиатуру и отправляет данные на сервер. Взаимодействия в XD тестируются окном предварительного просмотра (Cmd-Enter), которое дает достаточную обратную связь, чтобы убедиться, что приложение работает так, как мы того хотим.
Стадия 2. Спускаемся в детали
Как показала практика, результаты первой стадии достаточно фапабельны, чтобы презентовать и успешно утверждать с клиентом (или внутри команды) принципиальные структурные и визуальные решения. Если остается время, прототип можно дотюнить, базовую структуру легко превратить в дизайн большей точности.
На этом этапе можно сделать:
реальные тексты;
реальные фото;
более точные по смыслу иконки;
калибровку размеров и расположения иконок.
Следуя этим стадиям, вы не потратите слишком много времени на создание значков разных цветов и форм в соответствии с вашими понятиями эстетики, но составите архитектуру приложения и сфокусируетесь на функциональности.
Получится примерно так, как в этом прототипе приложения теннисной лиги Amatour. В нем есть туториал, шторка с пуш-уведомлениями, ленты турниров и новостей, авторизация, регистрация, профиль, статистика, список игроков, рейтинг и центр оповещений.
6 главных фишек Xd
Микродействия, открытию которых в процессе работы я был особенно рад.
Закрывающие фигуры. Обозначены пиктограммой квадрата в левом боковом меню. Использовал для случаев, когда в другом приложении понравился фон, и поверх него хотелось поставить свой текст.
Применение цвета. На языке фотошопа — пипетка. Появляется в правом боковом меню после выбора элемента. Нужно в основном для сливания выбранного элемента с фоном экрана.
Присвоение элементу слоя. В ситуации, когда сначала напечатали текст, потом решили подложить под него фоновый блок, блок будет ложиться сверху текста. В диалоговом меню, оно вызывается правой кнопкой мыши, есть два пункта: — Send to Back и Bring to Front.
Блокировка слоя. Когда нужно было выделить, например, нижнее навигационное меню, и немного опустить его вниз, а вместе с ним неизбежно выделяется и фон. Решение — нажать на фон, выбрав его, и Cmd-L. Будет теперь стоять на месте. Блокировать можно несколько элементов одновременно.
Кнопки центрирования. Ставят элемент ровно посередине ширины или высоты одним нажатием на иконку. Находятся в правом верхнем углу.
Ввод координат. Под кнопками центрирования, есть цифровые значения X и Y. Изменяя их, выбранный элемент сдвинется в другую точку артборда. Иногда это работает быстрее чем перемещением курсором. И похоже на телепортацию машин в Убере, когда пропадал сигнал.
Мнение автора и редакции может не совпадать. Хотите написать колонку для «Нетологии»? Читайте наши условия публикации.
Средняя оценка 5 / 5. Всего проголосовало 1
Источник: netology.ru
Adobe XD против Sketch: плюсы и минусы каждого инструмента
Соберите десяток дизайнеров в одной комнате – и они начнут спорить, какой инструмент лучше. Что вы используете для создания и демонстрации своей работы?
Два самых популярных ответа на этот вопрос – Adobe XD и Sketch. Sketch существует на рынке уже почти десять лет. Инструмент от Adobe новее, но быстро завоевывает популярность среди дизайнеров. Сегодня мы рассмотрим оба инструмента, сравним Adobe XD с Sketch и рассмотрим преимущества и недостатки каждого из них.
Что такое Adobe XD?
Adobe XD называют фотошопом для прототипирования. Adobe называет его«самым быстрым и надежным решением для дизайна UX на рынке для компаний из 10 или 10 тысяч человек».
Adobe XD делает многое из того, что должен уметь инструмент диджитал-дизайна, и позволяет пользователям создавать макеты, проектировать и делиться прототипами. Он подходит для веб-разработки или разработки приложений. Кроме того, пользователей Adobe при работе с XD не покидает чувство знакомости – он сделан похожим на другие продукты. Инструмент стал ответом компании на проектирование в векторном формате для цифровых устройств, а не просто использование Photoshop (растровый инструмент).
Его популярность растет, особенно среди новичков или тех, кто использует другие продукты Adobe.
Преимущества Adobe XD
Две главные причины популярности инструмента – он работает в среде Mac или ПК и является бесплатным для пользователей Creative Cloud. Для всех остальных пользователей инструмент предлагает бесплатный план с ограниченным хранилищем и количеством активных проектов.
Что вам еще может понравиться в Adobe XD:
Видно, что инструмент сделан для дизайна. Вы можете редактировать элементы, создавать стили или повторяющуюся сетку;
В XD можно открывать файлы из других продуктов Adobe и Sketch;
Векторное редактирование с точной функциональностью дизайна;
Создавайте интерактивные прототипы с анимацией, голосовым прототипированием, поддержкой игр и предварительным просмотром на мобильных устройствах;
Возможность совместной работы с файлами или обмена в режиме «только для просмотра»;
Возможность сохранения в облаке со связанными материалами;
Работает с множеством плагинов;
Есть мобильное приложение;
Он выглядит и ощущается как другие продукты Adobe, поэтому пользователи быстрее могут усвоить инструмент;
Постоянные обновления.
Недостатки Adobe XD
У XD есть и некоторые ограничения:
Adobe XD стоит 9,99 доллара в месяц, если у вас нет подписки Creative Cloud;
Вы можете рисовать базовые фигуры, но особых нет;
Вы можете экспортировать дизайн, но вы не можете получить CSS без плагина;
Постоянные обновления. Да, это может быть и минусом: они много весят, а патчи не всегда работают безошибочно.
Что такое Sketch?
Sketch – это редактор векторной графики для Mac, который используется для диджитала. Приложение существует с 2010 года и успело обзавестись фанатами. Компания называет его «инструментарием дизайна, который поможет вам создать идеальный проект – от первых идей до окончательной работы».
Ключевые особенности Sketch: идеальная точность пикселей, возможность синхронизации с сотнями плагинов, возможность экспорта пресетов и кода, создание прототипов и инструментов для совместной работы.
Преимущества Sketch
Sketch – это инструмент на основе лицензии: пользователи платят за программное обеспечение раз в год. На платформе Sketch работают более 1 миллиона пользователей.
Идеальные по точности инструменты;
Массивная библиотека, полная плагинов и композитов для запуска проектов;
Умные макеты автоматически изменяют размеры элементов;
Способность проектировать и сотрудничать в едином рабочем пространстве;
Простой экспорт кода и пресетов;
Инструмент стоит 99 долларов – за это вы получаете год обновлений. Вы можете использовать его и после окончания срока, но больше не будете получать обновления;
Создавайте что угодно, от GIF-файлов до каркасов и прототипов;
Варианты личных и корпоративных аккаунтов.
Недостатки Sketch
Самый большой недостаток Sketch – отсутствие поддержки Windows. Инструмент создан под Mac, он не работает в браузере и не имеет мобильной версии.
Sketch – это тяжелый инструмент, который нужно запускать на настольном Mac;
Нет повторяющейся сетки;
Вам нужен плагин, чтобы получить подходящие инструменты дизайна.
Каким инструментом мне пользоваться?
У нас нет единого ответа. В конце концов, все сводится к личным предпочтениям. У Sketcha огромная база фанатов, которые любят этот инструмент. Если вы используете его и он вам нравится, нет смысла перепрыгивать. Инструмент Adobe предлагает отличную альтернативу тем, у кого не Mac, и новичкам.
Лучшим решением будет испытание обоих инструментов. Проверьте работу каждого и посмотрите, что вам нравится. Важное уточнение: порой новый релиз или обновление позволяет одному выгодно оторваться от конкурента. А затем ситуация выравнивается.
.png)
.png)
.png)
.png)
.png)
