Изучение основ Adobe XD за 1 час – Познайте eXperience Design для выполнения собственных дизайн проектов
Предварительный просмотр будет нашим основным экраном прототипа в Adobe XD. Здесь мы имеем возможность протестировать приложение, понажимать кнопки, проверить различные экраны и переходы.
Совет: При изменении чего-либо в рабочей области, экран предварительного просмотра будет автоматически обновляться. Попробуйте открыть проект на втором экране, чтобы увидеть изменения в реальном времени!
Конечно, предварительный просмотр не является функциональным приложением. Он отображает только пользовательский интерфейс (UI), который мы задаем в нашей рабочей области, перемещаясь между различными экранами в соответствии со связями прототипа. Тем не менее, это хороший пример того, как будет выглядеть дизайн в конечном варианте, и насколько успешно происходит взаимодействие пользователя с приложением.
Совет. Сделать скриншот или записать экран, чтобы поделиться своим проектом в процессе разработки (Cmd+Shift+5 для Mac или Windows+G для Windows 10).
Лучший способ поделиться прототипом приложения, мы узнаем в последней главе.
Лучший способ поделиться прототипом приложения, мы узнаем в последней главе.2. СОЗДАНИЕ ЭКРАНА ЗАСТАВКИ (splash screen)
Обратите внимание, что в верхнем левом углу рабочей области есть две вкладки: Design и Prototype (Дизайн и Прототип). По умолчанию проект открывается на вкладке Design, которая используется для создания и изменения визуальных свойств пользовательского интерфейса (UI).
Выберите инструмент Artboard (Монтажная область) на панели инструментов слева (или горячей клавишей A), и вы увидите, что панель параметров справа, изменится, отобразив различные шаблоны оформления, соответствующие наиболее часто используемым устройствам.
В нашем случае, проект создаётся для монтажных областей iPhone 6/7/8. Просто щелкните внутри окна, чтобы добавить новый пустой экран. Для разных проектов вы можете создать любой другой шаблон экрана, с точными размерами вашего целевого устройства.
Sketch? Figma? Adobe XD? Что выбрать UI-дизайнеру в 2020 — Дизайн на vc. ru
ru {«id»:140065,»url»:»https:\/\/vc.ru\/design\/140065-sketch-figma-adobe-xd-chto-vybrat-ui-dizayneru-v-2020″,»title»:»Sketch? Figma? Adobe XD? \u0427\u0442\u043e \u0432\u044b\u0431\u0440\u0430\u0442\u044c UI-\u0434\u0438\u0437\u0430\u0439\u043d\u0435\u0440\u0443 \u0432 2020″,»services»:{«facebook»:{«url»:»https:\/\/www.facebook.com\/sharer\/sharer.php?u=https:\/\/vc.ru\/design\/140065-sketch-figma-adobe-xd-chto-vybrat-ui-dizayneru-v-2020″,»short_name»:»FB»,»title»:»Facebook»,»width»:600,»height»:450},»vkontakte»:{«url»:»https:\/\/vk.com\/share.php?url=https:\/\/vc.ru\/design\/140065-sketch-figma-adobe-xd-chto-vybrat-ui-dizayneru-v-2020&title=Sketch? Figma? Adobe XD? \u0427\u0442\u043e \u0432\u044b\u0431\u0440\u0430\u0442\u044c UI-\u0434\u0438\u0437\u0430\u0439\u043d\u0435\u0440\u0443 \u0432 2020″,»short_name»:»VK»,»title»:»\u0412\u041a\u043e\u043d\u0442\u0430\u043a\u0442\u0435″,»width»:600,»height»:450},»twitter»:{«url»:»https:\/\/twitter.com\/intent\/tweet?url=https:\/\/vc.
ru\/design\/140065-sketch-figma-adobe-xd-chto-vybrat-ui-dizayneru-v-2020″,»short_name»:»Email»,»title»:»\u041e\u0442\u043f\u0440\u0430\u0432\u0438\u0442\u044c \u043d\u0430 \u043f\u043e\u0447\u0442\u0443″,»width»:600,»height»:450}},»isFavorited»:false}6631 просмотров
Adobe XD обзор, урок
Всем привет друзья! Сегодня в уроке полный обзор новой, замечательной программы для создания дизайна интерфейсов и дизайна сайтов Adobe Experience Design или сокращенно Adobe XD, а также ее крутых фишек. Программа бесплатная (пока) и доступна для операционных систем Windows и Mac. И так, поехали!
Вкратце о программе и ее преимуществах:
Изначально программа была выпущена в свет под кодовым названием Project Comet, затем разработчики переименовали ее в Adobe XD (Experience Design). Программа позиционируется как инструмент для UX дизайна и прототипирования. На Mac программа стала доступна в начале 2016 года, но уже к концу года разработчики выпустили Adobe XD для Windows 10 (Программа недоступна под Windows 8, Windows 7 и ниже, так как разработчики программы используют новые возможности операционной системы Windows 10).
Программа бесплатна и находится пока в стадии бета тестирования. Если брать во внимание недавнюю существенную разницу между Mac и Windows версиями программы, то сейчас, с последним обновлением 13.06.2017 – разницы больше нет, и пользователи виндовс могут наслаждаться полной версией Adobe Experience Design.
Стоит отметить, что на Mac есть замечательная и всем известная программа для создания дизайна интерфейсов и сайтов – это Sketch, который завоевал бешенную популярность во всем мире. Но у Sketch при всех его плюсах есть один существенный минус – программа работает только на Mac OX. Чего не скажешь об Adobe XD, который уже сейчас в БЕТА версии создал весомую конкуренцию Sketch, даже скажу больше – у Adobe XD есть одна ключевая ФИШКА, которой нет у Sketch и вообще не в одной другой подобной программе — это функция Repeat Grid, которая существенно облегчает и ускоряет процесс создания дизайна и о которой мы поговорим ниже.Преимущества Adobe XD в том, что она работает с векторной графикой, это существенно увеличивает скорость работы, да и еще делает малым размер создаваемых проектов (этот плюс будет особенно очевидным для тех пользователей, кто создавал свои дизайны в Adobe Photoshop, в котором создаваемый проект весит несколько сотен Мб), а также открывает возможность трансформирования и изменения размера объектов, без потери качества.
Adobe XD обзор программы
Функционал и Фишки
Окно запуска программы
При начальном запуске программы открывается окно, в котором можно выбрать заготовленный размер артборда (холст для рисования) из популярных разрешений экранов телефонов, планшетов и пк. Так же разработчики заготовили элементы дизайна интерфейсов компаний Apple, Google, Microsoft – так называемые UI kits.
Так же в этом окне находятся последние открываемые проекты. И начальный обучающий проект, который показывается возможности, но далеко не все (их в программе очень много!)
Интерфейс программы и ее разделы
После открытия самой программы, перед нами открывается ее интерфейс, который разделен на следующие разделы:Меню – находится в левом верхнем углу программы. В этом меню мы можем открывать/сохранять/экспортировать проекты, импортировать файлы, расшаривать (открывать совместный доступ для просмотра) проекты.
Панель инструментов – здесь находятся все инструменты для рисования.
Стандартные инструменты — прямоугольник, эллипс, линия и перо для рисования произвольных фигур, «текст» для написания текста, а также инструмент «артборд» для рисования артбордоб (холстов/экранов рисования). Инструмент «лупа», который увеличивает выделенную область, но этот инструмент лично я редко использую в работе, так как разработчики настолько продумали навигацию в Adobe XD, что если вы выучите горячие клавиши «навигации» по проекту, то можно просто с феноменальной скоростью перемещаться по проекту.
Панель слоев и символов – Находятся они в левом нижнем углу интерфейса программы. О панели «символов» ниже, а пока разберем панель «слоев».
Слои – в панели слоев отображаются все артборды проекта, и если кликнуть по артборду, то мы попадем в панель слоев артборда, где мы увидим список всех элементов, расположенных на данном артборде. Что мы можем делать со слоями в панели слоев? Мы можем их перемещать выше ниже относительно друг друга (соответственно те слои, которые в панели слоев выше – будут перекрывать слои, которые расположены ниже, что визуально видно на холсте).
Так же мы можем выделить несколько слоев и группировать их (положив их в папку), нажав правой кнопкой мыши вызвать контекстное меню и выбрать пункт меню «Group». Группировка позволит перемещать сразу всю группу на холсте. Это очень удобно, когда нужно переместить блок элементов, при этом не сбивая расстояния между элементами блока.
Дополнительно мы можем скрыть или показать слои, или группу, кликнув на иконку глазика, а также заблокировать или заблокировать слои, или группу.
Любой из слоев, будь то артборд, группа, отдельный слой или еще какая-либо группа слоев (поговорим о других типах групп – ниже) можно переименовывать.
Разделы дизайна и прототипирования – расположены вверху, немного правее меню программы.
Правая часть интерфейса программы:
Preview – кнопка пред просмотра созданного прототипа проекта.
Share Online – Совместный доступ к просмотру онлайн прототипа проекта с комментированием и прикреплением иконок комментария (в соответствующем разделе данной статьи ниже).
Панель настройки выделенного объекта – эта панель занимает практически всю правую часть интерфейса программы. В ней расположены все настройки выделенного объекта.
Стандартные функции Experience Design
Цвет – в блоке выбора цвета мы можем выбрать цвет заливки фона, бордюра, тени. Так же мы можем сохранять цвет в библиотеку цветов, и выбирать цвета из нее (так же мы можем сортировать цвета в библиотеке и удалять цвета). Библиотека цвета полезна, когда в создаваемом дизайне проекта один и тот же цвет используется неодин раз.
Градиент – при выборе цвета фона выбранного объекта, ему можно задать градиент цвета, выбрав его в выпадающем списке (один цвет/градиент). В градиенте можно задать любое количество цветовых точек перехода. Задание угла/ширины градиента разработчики сделали очень удобным и их можно задавать, перемещая конечные точки линии градиента на самом объекте. Это очень удобно, так как можно сразу наблюдать результат.
Выравнивание – с помощью настроек выравнивания мы можем выровнять элемент относительно артборда или относительно других элементов (при выделении нескольких объектов). Более продвинутые возможности выравнивания рассматриваются ниже, в разделах «Подсказки расстояний» и «Сетка» в данной статье.
Также выделенному объекту можно добавить тень, прозрачность, размытие и изменить размер, повернуть, переместить.
Булевы операции – вычитание/сложение объектов и их пересечений
С помощью этих функций можно объединять объекты визуально в одну сплошную фигуру или вырезать часть одного объекта частью другого, тоже самое проделывать и с пересечениями объектов друг с другом.
Опять же разработчики не остановились только на этом – объекты, которые мы объединили или вырезали, как таковые не пропадают, а как бы маскируются и формируются в группу, которая в панели слоев отображается иконкой булевой операции (вместо стандартной иконки папочки группы) и по сути остаются не тронутыми, мы свободно можем зайти в такую группу и редактировать объекты (двойным щелчком по объекту, к которому применена булева операция, либо выбрав один из объектов группы булевой операции в панели слоев).
Если все же хочется объединить объекты в один сплошной векторный объект, то это можно сделать из контекстного меню, после применения к объекту булевой операции, кликнув правой кнопкой мыши и выбрав пункт меню Path > Convert to Path. Либо нажав сочетание клавиш Ctrl + 8. И затем трансформировать объект, как произвольную фигуру.
Текст
Используя инструмент текст, мы можем писать текст. Текст является по сути блоком, который мы можем редактировать, поворачивать, производить стандартные операции редактирования текста: выбор шрифта, толщина шрифта, размер, расстояние между буквами, межстрочное расстояние, выравнивание текста. А также изменять цвет, задавать тень, обводку, прозрачность, размытие.
Стоит отметить, что в блоке текста можно редактировать отдельно выделенные участи текста.
Маски
В программе удобно реализована функция маскировки объектов. Объекты маскируются также, как и булевы операции в своеобразную группу маски, которая отображается соответствующей иконкой в панели слоев. Маскировать можно несколько объектов.
Для того чтобы применить маскировку, объекты должны пересекаться друг с другом, затем их нужно выделить и нажав правую кнопку мыши вызвав контекстное меню, выбрать соответствующий пункт меню Mask with Shape. Либо нажав сочетание клавиш Shift + Ctrl + M.
Фишки Adobe XD
Подсказки расстояний
Первая фишка значительно ускоряющая процесс дизайна, это подсказки расстояний между объектами. Если выделить объект, зажать клавишу Alt, то мы увидим расстояние краев объекта относительно артборда (холста), а если при этом навести мышь на любой другой объект или группу, то расстояния будут показаны до этого объекта.
Если мы перемещаем выделенный объект, то при пересечении линии центра (горизонтальной/вертикальной) другого объекта, группы или самого артборда, то нам будут показаны эти линии и объект будет как бы липнуть к этим линиям при перемещении мышью. Это очень удобно, когда нужно выровнять объект относительно другого точно, а не на глаз . Еще такой лайф хак – если зажать клавишу Shift и при этом перемещать мышью объект, то он будет перемещаться либо по вертикали, либо по горизонтали, в зависимости от начального направления движения.
Если вы перемещаете объект и при этом расстояние между соседними объектами совпадает с расстоянием от вашего объекта, то программа покажет это расстояние розовыми прямоугольниками и размером самого расстояния в пикселях.
Сетка
Если выделить артборд, то мы увидим в его настройках пункт GRID (сетка), где мы можем включить/отключить сетку выделенного артборда, настроить величину ячеек сетки, цвет ее линий и прозрачность.
После включения сетки артборда, она отобразиться на самом артборде и если начать перемещать элементы на артборде, то они будут липнуть к линиям сетки. Это еще один очень полезный инструмент выравнивания, когда вы выстраиваете свой дизайн по определенным расстояниям, например, по 8 пиксельной сетке.
Артборды
Артборд – это холст, на котором мы рисуем. Adobe XD позволяет создавать любое количество артбордов. Это можно сделать, выбрав инструмент «Артборд» из панели инструментов, затем нарисовать артборд с произвольным размером ширины, высоты, либо выбрав уже заготовленные в программе часто используемые разрешения экранов. А также можно просто выделить уже нарисованный артборд или несколько артбордов, скопировать его и вставить, так артборд продублируется со всеми элементами, которые прорисованы на нем.
В настройках артборда мы можем включить и настроить область просмотра по вертикали. Если мы допустим рисуем лендинг и у нас длинная страница, которая ну уж никак не помещается на экране, то вот как раз при включении области просмотра артборда, вся остальная часть, которая выходит за рамки этой области в превью проекта будет отображаться при скроле страницы.
Чтобы включить данную опцию, нужно в настройках артборда в разделе «SCROLLING» в выпадающем списке выбрать «Vertical». А в поле «Viewport Height» задать высоту области просмотра, которая будет отображаться на экране без скрола страницы, при просмотре превью проекта, при этом на самом артборде появиться голубая пунктирная линия, которая наглядно показывает границу области видимости.
Символы
Символ — это сохраненный в библиотеку объект или группа объектов, которые могут использоваться сколь угодно раз в проекте. Символ по сути является самостоятельным объектом и при редактировании символа, все изменения будут автоматически применяться ко всем его копиям в режиме реального времени. Это очень удобно, когда в дизайне проекта используются одинаковые элементы, например, кнопка. Если мы сохраним кнопку в символ, продублируем ее и поменяем допустим ее фоновый цвет, то этот цвет будет меняться на всех копиях этого символа.
В Adobe Experience Design символ можно создать несколькими способами: выделив объект или группу объектов, перейдя в панель символов нажать на кнопку +, либо щелкнув правой кнопкой мыши выбрать из контекстного меню пункт Make Simbol, либо нажав сочетание клавиш Ctrl + K.
Прототипирование
В разделе Prototype (прототип) мы можем создавать прототип нашего сайта или интерфейса с переходами. Например, у нас есть кнопка в меню навигации, которая ведет на страницу «О нас», мы можем выбрать эту кнопку и привязать к ней переход по клику на страницу артборда «О нас».
Можно выбрать любой элемент и повешать на него переход по клику на любой артборд проекта. После выбора элемента он подсвечивается голубоватой обводкой, и справа у него появляется стрелочка, которую нужно взять и перетянуть на тот артборд, на который мы хотим осуществлять переход при клике на выбранный элемент.
При этом параметры эффекта перехода можно настраивать в окошке, которое появляется при определении перехода.
Посмотреть созданный прототип мы можем, нажав на кнопку Preview (превью).
Так же разработчики сделали такую классную вещь, как Live Preview на мобильных (Предпросмотр проекта на мобильном устройстве). Для этого на мобильное устройство нужно скачать и установить соответствующее приложение Adobe Experience Design и подключить мобильное устройство к компьютеру по USB кабелю.
Так можно в режиме реально времени наблюдать все изменения, которые вы производите в проекте и оценивать, как это будет смотреться на мобильном устройстве.
Repeat Grid – МЕГА БОМБОВАЯ ВЕЩЬ!
Может компания Adobe и затянула с выпуском Experience Design для создания дизайна интерфейсов и сайтов и Sketch выбился в лидеры в данной сфере наряду с другими подобными программами, но Adobe XD с наикрутейшей функцией Repeat Grid, просто убивает всех конкурентов на повал!
Что такое Repeat Grid в Adobe XD?
Repeat Grid – это функция дублирования элементов или блока элементов. Эта функция сократит вам время создания дизайна в разы!
Для того, чтобы воспользоваться данной функцией, нужно выделить элемент или группу элементов и в меню настроек нажать заветную кнопочку – Repeat Grid. Вокруг выбранных элементов появится зеленая пунктирная обводка с ползунками, потянув за которые, объекты будут дублироваться по вертикали/горизонтали.
Но это далеко не все! Если навести курсор мыши на расстояние между продублированными элементами и зажать мышь, появится розовое выделение расстояний между объектами, потянув за которое, можно изменять это расстояние у всех объектов одновременно, при этом программа не только подсвечивает расстояние между объектами, а еще и показывает его в пикселях. Расстояние можно менять как по горизонтали, так и по вертикали.
Согласитесь, это очень круто! НО даже это еще далеко не все!
Если изменять любой элемент внутри одной из продублированных групп, то все эти изменения автоматически будут происходить с этими же элементами внутри всех дублей.
Ну а теперь-то все? А нет, не все :)! Если мы допустим создаем каталог товаров и дублируем блок товара, затем хотим вставить картинки товара в каждый блок свою, то нам нужно вставлять каждую картинку отдельно в каждый блок, но в сетке Repeat Grid разработчики реализовали мульти вставку картинок.
Чтобы это сделать, достаточно подготовить нужные картинки, выделить их в папке и перетащить в первый блок и отпустить на том элементе, в который хотим вставить картинку, все остальные картинки встанут в тот же элемент в дублях сетки Repeat Grid — последовательно.
Ну а теперь все? Почти :). Разработчики Adobe Experience Design постарались на славу и также реализовали мульти вставку для текста. Чтобы вставить текст также, как и картинки, нужно просто в текстовом документе прописать нужные фразы, каждую на новой строчке, затем сохранить текстовый документ (при сохранении выбрать кодировку UTF8, по умолчанию стоит ANSI, эта кодировка будет отображать русские буквы значками вопроса). И затем так же перетянуть документ на нужный текстовый элемент в первом блоке сетки Repeat Grid. На этом разбор функции Repeat Grid закончен.
Совместный доступ к просмотру онлайн прототипа
Так же разработчики учли тот момент, что зачастую заказчик и дизайнер не понимаю друг друга сразу и часто возникают ситуации, когда заказчик представляет себе готовый дизайн по-своему, а дизайнер нарисовал по-своему. В итоге, когда дизайн проекта уже готов, вдруг вы понимаете, что это не то, что хотел ваш заказчик, но потрачено время и соответственно упущена прибыль, так как нужно переделывать дизайн. Вот именно для таких моментов разработчики сделали возможность совместного доступа к онлайн прототипу с комментированием и переходами.
Для того, чтобы открыть доступ к онлайн прототипу, нам нужно его расшарить, что делается через кнопку Share Online.
После нажатия на кнопку открывается меню настройки онлайн прототипа, где можно задать название прототипа, установить картинку и разрешить/запретить комментирование прототипа. После настроек жмем кнопку Create Link.
Программа закинет наш проект в бесплатное онлайн хранилище компании Adobe и выдаст ссылку на онлайн прототип (чтобы закинуть прототип в хранилище вы должны быть авторизованы в своем аккаунте adobe). Мы можем скопировать ссылку и дать заказчику для просмотра прототипа в браузере, либо перейти на вкладку Embed и скопировать код для вставки на свой сайт. Если мы изменим что-то в нашем проекте, то мы можем в меню расшаривания проекта обновить прототип по полученной ссылке, либо создать новую.
Что можно делать с онлайн прототипом? Можно просматривать все страницы (артборды) проекта, а также переходить на определенные страницы при клике на те или иные элементы дизайна. Переходы при клике по элементу назначаются в разделе прототипирования проекта в самой программе.
Так же разработчики добавили возможность комментирования онлайн прототипа с установкой иконки комментария в любое место и на любую страницу прототипа. Таким образом можно не только обсуждать проект, но и указать к какому элементу дизайна относится тот или иной комментарий. Пример использования данной возможности вы можете увидеть в конце видео урока данной статьи, там я показываю, как мы с заказчиком обсуждали дизайн реального проекта, который я недавно разрабатывал.
Плюсы и минусы Adobe XD
Вот, пожалуй, и все, что хотелось рассказать в данном обзоре об Adobe Experience Design. Осталось только обозначить плюсы и пару несущественных, но все же минусов.
Плюсы:
Программа бесплатная (пока находится в бета версии).
Программа доступна как под Mac, так и под Windows 10.
Обновления выходят каждый месяц.
Бесплатное онлайн хранилище прототипов.
Минусы:
Не работают некоторые горячие клавиши в русской раскладке клавиатуры (я заметил только одно – это перемещение слоев выше/ниже в панели слоев Ctrl+[ и Ctrl+] ).
При мулти вставке текста в сетку Repeat Grid, текст сохраненный в кодировке ANSI отображается вопросиками, так что сохранять текстовый документ нужно в кодировке UTF8.
Горячие клавиши Adobe XD для Windows
Scroll – Перемещение по проекту по вертикали
Shift + Scroll – Перемещение по проекту по горизонтали
Ctrl + Scroll – Отдаление/Приближение к центру места на которое наведен курсор мыши
Ctrl + 0 – Увеличение/Уменьшение экрана к размещению всех артбордов в область видимости проекта.
Ctrl + 1 – Увеличение/Уменьшение до 100% размера экрана.
Ctrl + 3 – Увеличение выделенного объекта.
Ctrl + Enter – Открыть превью проекта.
Ctrl + R – Включить Repeat Grid.
Ctrl + G – Группировать объекты.
Shift + Ctrl + G – Группировать объекты.
Shift + Ctrl + M – Создать маску.
Ctrl + K – Создать символ.
Ctrl + ` – Показать/Скрыть сетку артборда.
Ctrl + L – Заблокировать/Разблокировать объект.
Ctrl + ; – Скрыть/Показать объект.
Ctrl + 8 – Преобразовать в контур.
Ctrl + Y – Скрыть/Показать панель слоев.
Shift + Ctrl + Y – Скрыть/Показать панель символов.
Ctrl + E – Экспорт.
Shift + Ctrl + E – Расшаривание проекта (совместный доступ онлайн).
Shift + Ctrl + I – Импорт.
Ctrl + [ – Сдвинуть на слой назад (не работает в русской раскладке клавиатуры)
Ctrl + ] – Сдвинуть на слой вперед (не работает в русской раскладке клавиатуры)
Shift + Ctrl + [ – Сдвинуть назад (не работает в русской раскладке клавиатуры)
Shift + Ctrl + ] – Сдвинуть вперед (не работает в русской раскладке клавиатуры)
На этом у меня все. Спасибо друзья за просмотр данного урока, надеюсь он был вам полезен. Я постарался полностью раскрыть все основные возможности программы Adobe Experience Design. Поделитесь уроком с друзьями.
Всем творческих успехов и крупных заказов от души! Жду ваших комментариев ниже и до встречи в следующих уроках! Пока друзья!
Уроки Adobe XD. Начало работы с Adobe Experience Design
Если вы взгляните на Adobe Experience Design (Adobe XD), приложение от Adobe Creative Cloud, вы быстро осознаете, что это радуга, которая выходит из единорога для веб дизайнеров. Но вы ошибаетесь… Это даже лучше!
Я вам немного расскажу о тех возможностях, которые вы получите от использования Adobe XD. Небольшое замечание: программа пока находится в режиме превью и в ней еще появится много нового. Поехали!
…
Создайте ваш первый дизайн проект в Adobe XD
Сразу после открытия Adobe XD, вы увидите большой набор опций для создания дизайна под мобильные, десктоп устройства, планшеты и возможность создания проектов для кастомных размеров. Или вы можете кликнуть на “начать с файла-примера” (эти виды файлов мы будем использовать во второй части статьи, когда я расскажу про режим прототипирования). Давайте начнем с создания рабочей области для iPhone 6. первое, что вы должны сделать – это назвать рабочую область. Например, “Home”. Двойной клик на имени рабочей области для изменения имени.
Управление пользовательским опытомВы научитесь анализировать и улучшать клиентский опыт, создавать продукты и предоставлять сервисы, нужные клиентам, внедрять сервисные инновации
Забронировать место Создание нового проекта в Adobe XDИзменение фона рабочей области
После выбора рабочей области, вы увидите панель свойств в правой части окна. Нажмите “Fill” под “Appearance” и изменяйте цвет фона вашей рабочей области.
Изменение цвета фона рабочей областиСоздание шапки экрана
Для шапки мы будем использовать изображение и текст. Перейдите по File > Import для импорта изображения или перетяните его на рабочую область. Далее, мы используем инструмент “Текст” (горячая клавиша T) и вводим текст. Вы можете изменять свойства текста (размер шрифта, начертание, кернинг) в свойствах на панеле справа.
Создание шапки с изображением и текстомСовет: Вы можете использовать UI kits Apple iOS, Google Material and Microsoft Windows при помощи File > Open UI Kit и выбирать все, что вам нравится. Я буду использовать Apple UI kit для вставки строк статуса в дизайн.
Добавление области контента
Добавьте область контента под шапку выбрав инструмент “прямоугольник” (горячая клавиша R). Как обычно, вы можете изменять свойства на панеле справа. Вы можете изменять область контента и вставить изображение и текст, как показано в предыдущем шаге.
Создание области контентаДублирование сетки (один из моих любимых инструментов!)
Для дублирование области контента, используйте инструмент Repeat Grid. Выберите необходимые для копирования элементы зажав Shift. Выберите область контента, изображение и текстовые элементы. Затем нажмите кнопку Repeat Grid на панеле свойств. Теперь, ваша область имеет зеленую границу и два маркера, которые вы можете использовать для дублирование контента по-горизонтали или по-вертикали.
Использование дублирование сетки в Adobe XDСовет: Вы можете выбрать разные изображения и перетянуть их на дублированное изображение. Прежнее изображение будет заменено на выбранное вами. Теперь вы можете изменить текст для каждой области индивидуально, но помните, что при изменении стиля элемента, он будет применен ко всем остальным областям!
Создавайте больше рабочих областей для вашего проекта
После создания дизайна “Home”, вы можете добавить рабочие области в ваш проект (другие шаги, например). Горячая клавиша “A”, откроет инструмент Artboard, в котором вы сможете выбрать размер вашей новой области справа в приложении. Кликните рядом с вашей первой работой и появится новая рабочая область.
Создание рабочих областей в Adobe XDИзучение в процессе
Теперь вы можете попробовать то, что я описал выше и создать больше крутых рабочих областей для вашего дизайна!
Проект в Adobe XD…
Прототипирование: Мы разберем прототипирование во второй части нашего гайда.
Просмотрите вторую часть статьи и вы поймете, как можно без особого труда создать прототип, записать его в действии и поделиться им с разработчиками, учредителями и кем угодно!
…
Жду ваших отзывов об этой статье по работе с Adobe XD. Задавайте вопросы. Подписывайтесь на меня в Twitter.
Все изображения взяты с моего проекта на сайте www.unsplash.com.
25 уроков по Adobe XD для новичков
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
Адаптивная 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 & Why to Prototype Adobe XD Tutorial
Create Grids for Responsive Design Adobe XD Tutorial
Create Floating Shadows Adobe XD Tutorial
Color & Character Styles Adobe XD Tutorial
How to Design Banners in Adobe XD
How to Design & Prototype Adobe XD Tutorial
How to Design a Chat UI in Adobe XD
Scrollable Artboards in Adobe XD
Введение в Adobe XD — Создаем UI с помощью Adobe Experience Design
В этой статье мы поговорим о разработке и проектировании пользовательского интерфейса для вашего приложения.
Хороший дизайн
Каждый начинающий разработчик рано или поздно начинает задумываться о дизайне своего приложения. Хорошо, когда есть знакомый дизайнер интерфейсов, готовый вам помогать безвозмездно или за символическую плату, но современные реалии таковы, что даже если вам посчастливилось встретить представителя этой редкой и высоко востребованной профессии, скорее всего он уже и без того будет завален работой. Как правило независимые разработчики на начальных этапах не могут позволить себе отдать дизайн на аутсорс какой-нибудь крупной студии, а работа фрилансеров в СНГ практически всегда оставляет желать лучшего.
Вот и выходит, что начинающему, независимому разработчику практически жизненно необходимо понимание азов UI дизайна, для создания хоть сколько-нибудь конкурентоспособного коммерческого продукта, предназначенного для b2c рынка. Обычно, дизайн разработанный программистами, не сулит пользователю ничего хорошего, однако анализируя опыт предыдущих проектов и соблюдая базовые правила работы с UI можно достичь вполне достойных результатов.
Жизненный цикл разработки дизайна
Понимая, как построен рабочий процесс у дизайнеров, можно быстро прийти к структурированному и четкому пониманию действий, которые должны привести вас к чистому и логичному дизайну, а так же позволить избежать типичных ошибок.
Бриф
Это небольшой документ, который содержит базовые положения проекта. Этот документ особенно важен если вы работаете в команде, так как он позволяет еще «на берегу» договориться о критичных аспектах проекта. По содержанию бриф можно охарактеризовать, как документ аккумулирующий ожидания от будущего дизайна.
Техническое задание
Это подробнейший документ, определяющий сроки проекта, используемые технологии, технические аспекты и многие другие вещи. Все, что можно хоть как-то детализировать на столь раннем этапе, как правило находит свое отражение в ТЗ.
Карта разделов
Обычно это mind map связывающая экраны и функционал проекта между собой. Мы не будем сейчас останавливаться на этом пункте, так как мы подробно рассмотрим его позже в статье.
Контент
Контент не определяет дизайн, однако является важной его частью. Перед тем как приступать к созданию прототипа необходимо заранее заготовить подходящий контент.
Прототип
Под прототипом понимается связанный набор wireframe’ов(структурных схем страниц), эти страницы регламентируют положение той или иной информации, а так же необходимые для ее обработки элементы управления.
Дизайн
И вот только теперь, пройдя все круги этого дизайнерского ада, можно наконец-то поиграться со шрифтами приступить отрисовке UI элементов. В текущий момент на рынке представлено несколько популярных решений, которые позволяют упростить эту задачу, о них мы сейчас и поговорим.
Инструменты UI/UX дизайнера
Я бы выделил три интересных решения существующих на рынке в данный момент:
- Sketch
- Figma
- Adobe Experience Design
Мы не будем сейчас подробно останавливаться на особенностях каждого инструмента, это тема отдельной статьи, сейчас вам достаточно просто знать, какие существуют альтернативы с примерно похожим функционалом. А поговорим мы сегодня про Adobe XD.
Adobe Experience Design
Adobe XD — это кроссплатформенное решение от Adobe, предназначенное для создания прототипов мобильных приложений и веб-сайтов. Лично мне XD приглянулся своей простотой и возможностью создавать интерактивные прототипы проектов, которыми можно легко поделиться с членами своей команды. Пока что проект находится в бета тестировании, поэтому для того, чтобы им воспользоваться достаточно просто скачать его с сайта Adobe, по выходу из беты XD скорее всего будет доступен по подписке в 20$ за месяц.
Adobe XD в работе
Давайте рассмотрим работу с данным пакетом на примере отрисовки экрана пользовательского профиля. Повторять весь жизненный цикл разработки дизайна мы не будем, однако построим карту разделов для определения возможных переходов и функционала нашего экрана:
вот такая структура у меня получилась, осталось лишь отразить ее в графике, давайте запустим XD, указав размеры экрана соответствующие iPhone 6/7:
Воспользуемся инструментом Line (L) для отрисовки navigation bar’а и площадки для пользовательской информации. В панели Appearance установим соответствующую заливку и тень для получившихся фигур:
Отлично, давайте займемся navigation bar’ом, первое что нам необходимо сделать — открыть iOS UI Kit (File > Open UI Kit > Apple iOS) скопировать черный status bar и вставить его на наш макет:
Теперь установим на наш navigation bar иконки кнопок Settings и Back, а так же с помощью инструмента Text (T) дадим нашему navBar’у заголовок:
Мы закончили с navigation bar’ом, теперь можно браться за пользовательский контент, с помощью понравившихся иконок и уже знакомого вам инструмента Text (T) отобразим социальные метрики нашего пользователя:
Отобразим аватар нашего пользователя, для этого с помощью инструмента Ellipse (E) нарисуем круг (зажимаем shift), а после этого перетащим картинку с аватаром на получившийся графический примитив. Отобразим location, description а так же пользовательское имя с помощью инструмента Text (T):
С помощью инструмента Rectangle (R) и инструмента Text (T) нарисуем кнопку для добавления пользователя:
Остался последний штрих, с помощью инструмента Rectangle (R) создадим прямоугольник на который перетащим наш Cover image и с помощью комбинации клавиш Cmd + { установим получившееся изображение за верхними слоями:
Отлично! Давайте взглянем на результат:
Вместо заключения
Сегодня мы познакомились с чудесным инструментом для проектирования и разработки пользовательских интерфейсов и даже отрисовали один экран приложения. Мне безумно интересна тема дизайна и UX в частности, поэтому вы не раз еще увидите статьи посвященные дизайну на страницах нашего ресурса.
Автор снимка: @alesnesetril
Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.
UI / UX дизайн и инструмент для совместной работы
.dexter-FlexContainer-Items> *: nth-child (1) { ширина: 83,333333%; max-width: 83,333333%; гибкость: 1 1 авто; мин-высота: авто; } # root_content_flex_1764335216> .dexter-FlexContainer-Items> *: nth-child (2) { ширина: 83.333333%; max-width: 83,333333%; гибкость: 1 1 авто; мин-высота: авто; } # root_content_flex_1764335216> .dexter-FlexContainer-Items> *: nth-child (3) { ширина: 83,333333%; max-width: 83,333333%; гибкость: 1 1 авто; мин-высота: авто; } # root_content_flex_1764335216> .dexter-FlexContainer-Items> *: nth-child (4) { ширина: 83,333333%; max-width: 83,333333%; гибкость: 1 1 авто; мин-высота: авто; } # root_content_flex_1764335216>.dexter-FlexContainer-Items> *: nth-child (5) { ширина: 83,333333%; max-width: 83,333333%; гибкость: 1 1 авто; мин-высота: авто; } # root_content_flex_1764335216> .dexter-FlexContainer-Items> *: nth-child (6) { ширина: 83,333333%; max-width: 83,333333%; гибкость: 1 1 авто; мин-высота: авто; } # root_content_flex_1764335216> .dexter-FlexContainer-Items> *: nth-child (7) { ширина: 91,666667%; максимальная ширина: 91,666667%; гибкость: 1 1 авто; мин-высота: авто; } # root_content_flex_1764335216>.dexter-FlexContainer-Items> *: nth-child (8) { ширина: 83,333333%; max-width: 83,333333%; гибкость: 1 1 авто; мин-высота: авто; } # root_content_flex_1764335216> .dexter-FlexContainer-Items> *: nth-child (9) { ширина: 83,333333%; max-width: 83,333333%; гибкость: 1 1 авто; мин-высота: авто; } # root_content_flex_1764335216> .dexter-FlexContainer-Items> *: nth-child (10) { ширина: 91,666667%; максимальная ширина: 91,666667%; гибкость: 1 1 авто; мин-высота: авто; } # root_content_flex_1764335216>.dexter-FlexContainer-Items> *: nth-child (11) { ширина: 83,333333%; max-width: 83,333333%; гибкость: 1 1 авто; мин-высота: авто; } # root_content_flex_1764335216> .dexter-FlexContainer-Items> *: nth-child (12) { ширина: 83,333333%; max-width: 83,333333%; гибкость: 1 1 авто; мин-высота: авто; } # root_content_flex_1764335216> .dexter-FlexContainer-Items> *: nth-child (13) { ширина: 91,666667%; максимальная ширина: 91,666667%; гибкость: 1 1 авто; мин-высота: авто; } # root_content_flex_1764335216 { цвет фона: # 333A45; } # root_content_flex_1764335216 { цвет: #FFFFFF; } @media screen и (min-width: 600px) { # root_content_flex_1764335216>.dexter-FlexContainer-Items { } # root_content_flex_1764335216> .dexter-FlexContainer-Items> *: nth-child (1) { ширина: 83,333333%; max-width: 83,333333%; гибкость: 1 1 авто; мин-высота: авто; } # root_content_flex_1764335216> .dexter-FlexContainer-Items> *: nth-child (2) { ширина: 83,333333%; max-width: 83,333333%; гибкость: 1 1 авто; мин-высота: авто; } # root_content_flex_1764335216>.dexter-FlexContainer-Items> *: nth-child (3) { ширина: 83,333333%; max-width: 83,333333%; гибкость: 1 1 авто; мин-высота: авто; } # root_content_flex_1764335216> .dexter-FlexContainer-Items> *: nth-child (4) { ширина: 83,333333%; max-width: 83,333333%; гибкость: 1 1 авто; мин-высота: авто; } # root_content_flex_1764335216> .dexter-FlexContainer-Items> *: nth-child (5) { ширина: 83.333333%; max-width: 83,333333%; гибкость: 1 1 авто; мин-высота: авто; } # root_content_flex_1764335216> .dexter-FlexContainer-Items> *: nth-child (6) { ширина: 83,333333%; max-width: 83,333333%; гибкость: 1 1 авто; мин-высота: авто; } # root_content_flex_1764335216> .dexter-FlexContainer-Items> *: nth-child (7) { ширина: 83,333333%; max-width: 83,333333%; гибкость: 1 1 авто; мин-высота: авто; } # root_content_flex_1764335216>.dexter-FlexContainer-Items> *: nth-child (8) { ширина: 83,333333%; max-width: 83,333333%; гибкость: 1 1 авто; мин-высота: авто; } # root_content_flex_1764335216> .dexter-FlexContainer-Items> *: nth-child (9) { ширина: 83,333333%; max-width: 83,333333%; гибкость: 1 1 авто; мин-высота: авто; } # root_content_flex_1764335216> .dexter-FlexContainer-Items> *: nth-child (10) { ширина: 83.333333%; max-width: 83,333333%; гибкость: 1 1 авто; мин-высота: авто; } # root_content_flex_1764335216> .dexter-FlexContainer-Items> *: nth-child (11) { ширина: 83,333333%; max-width: 83,333333%; гибкость: 1 1 авто; мин-высота: авто; } # root_content_flex_1764335216> .dexter-FlexContainer-Items> *: nth-child (12) { ширина: 83,333333%; max-width: 83,333333%; гибкость: 1 1 авто; мин-высота: авто; } # root_content_flex_1764335216>.dexter-FlexContainer-Items> *: nth-child (13) { ширина: 83,333333%; max-width: 83,333333%; гибкость: 1 1 авто; мин-высота: авто; } } ]]>Быстрый, мощный и всего в нужном количестве
Превратите свои идеи в потрясающую реальность быстрее. В XD есть множество инструментов, которые помогут вам без труда создавать веб-сайты, приложения, голосовую связь и многое другое.
Дизайн. Быстрые наброски каркасов и мокапов. Создавайте высококачественные дизайны для любого экрана. Работайте вместе в режиме реального времени.
Добавить анимацию. Наполните его взаимодействиями. Тестируйте на разных устройствах. Превратите статический дизайн в интерактивные прототипы.
Дизайн передачи обслуживания. Собирайте отзывы. Действуйте быстро. Соберите всех на одной странице с помощью встроенных инструментов обмена.
Инструмент UI / UX для проектирования и совместной работы
.dexter-FlexContainer-Items> *: nth-child (1) { ширина: 83,333333%; max-width: 83,333333%; гибкость: 1 1 авто; мин-высота: авто; } # root_content_flex_1764335216> .dexter-FlexContainer-Items> *: nth-child (2) { ширина: 83,333333%; max-width: 83,333333%; гибкость: 1 1 авто; мин-высота: авто; } # root_content_flex_1764335216> .dexter-FlexContainer-Items> *: nth-child (3) { ширина: 83,333333%; max-width: 83,333333%; гибкость: 1 1 авто; мин-высота: авто; } # root_content_flex_1764335216>.dexter-FlexContainer-Items> *: nth-child (4) { ширина: 83,333333%; max-width: 83,333333%; гибкость: 1 1 авто; мин-высота: авто; } # root_content_flex_1764335216> .dexter-FlexContainer-Items> *: nth-child (5) { ширина: 83,333333%; max-width: 83,333333%; гибкость: 1 1 авто; мин-высота: авто; } # root_content_flex_1764335216> .dexter-FlexContainer-Items> *: nth-child (6) { ширина: 83,333333%; max-width: 83,333333%; гибкость: 1 1 авто; мин-высота: авто; } # root_content_flex_1764335216>.dexter-FlexContainer-Items> *: nth-child (7) { ширина: 91,666667%; максимальная ширина: 91,666667%; гибкость: 1 1 авто; мин-высота: авто; } # root_content_flex_1764335216> .dexter-FlexContainer-Items> *: nth-child (8) { ширина: 83,333333%; max-width: 83,333333%; гибкость: 1 1 авто; мин-высота: авто; } # root_content_flex_1764335216> .dexter-FlexContainer-Items> *: nth-child (9) { ширина: 83,333333%; max-width: 83,333333%; гибкость: 1 1 авто; мин-высота: авто; } # root_content_flex_1764335216>.dexter-FlexContainer-Items> *: nth-child (10) { ширина: 91,666667%; максимальная ширина: 91,666667%; гибкость: 1 1 авто; мин-высота: авто; } # root_content_flex_1764335216> .dexter-FlexContainer-Items> *: nth-child (11) { ширина: 83,333333%; max-width: 83,333333%; гибкость: 1 1 авто; мин-высота: авто; } # root_content_flex_1764335216> .dexter-FlexContainer-Items> *: nth-child (12) { ширина: 83,333333%; max-width: 83,333333%; гибкость: 1 1 авто; мин-высота: авто; } # root_content_flex_1764335216>.dexter-FlexContainer-Items> *: nth-child (13) { ширина: 91,666667%; максимальная ширина: 91,666667%; гибкость: 1 1 авто; мин-высота: авто; } # root_content_flex_1764335216 { цвет фона: # 333A45; } # root_content_flex_1764335216 { цвет: #FFFFFF; } @media screen и (min-width: 600px) { # root_content_flex_1764335216>.dexter-FlexContainer-Items { } # root_content_flex_1764335216> .dexter-FlexContainer-Items> *: nth-child (1) { ширина: 83,333333%; max-width: 83,333333%; гибкость: 1 1 авто; мин-высота: авто; } # root_content_flex_1764335216> .dexter-FlexContainer-Items> *: nth-child (2) { ширина: 83,333333%; max-width: 83,333333%; гибкость: 1 1 авто; мин-высота: авто; } # root_content_flex_1764335216>.dexter-FlexContainer-Items> *: nth-child (3) { ширина: 83,333333%; max-width: 83,333333%; гибкость: 1 1 авто; мин-высота: авто; } # root_content_flex_1764335216> .dexter-FlexContainer-Items> *: nth-child (4) { ширина: 83,333333%; max-width: 83,333333%; гибкость: 1 1 авто; мин-высота: авто; } # root_content_flex_1764335216> .dexter-FlexContainer-Items> *: nth-child (5) { ширина: 83.333333%; max-width: 83,333333%; гибкость: 1 1 авто; мин-высота: авто; } # root_content_flex_1764335216> .dexter-FlexContainer-Items> *: nth-child (6) { ширина: 83,333333%; max-width: 83,333333%; гибкость: 1 1 авто; мин-высота: авто; } # root_content_flex_1764335216> .dexter-FlexContainer-Items> *: nth-child (7) { ширина: 83,333333%; max-width: 83,333333%; гибкость: 1 1 авто; мин-высота: авто; } # root_content_flex_1764335216>.dexter-FlexContainer-Items> *: nth-child (8) { ширина: 83,333333%; max-width: 83,333333%; гибкость: 1 1 авто; мин-высота: авто; } # root_content_flex_1764335216> .dexter-FlexContainer-Items> *: nth-child (9) { ширина: 83,333333%; max-width: 83,333333%; гибкость: 1 1 авто; мин-высота: авто; } # root_content_flex_1764335216> .dexter-FlexContainer-Items> *: nth-child (10) { ширина: 83.333333%; max-width: 83,333333%; гибкость: 1 1 авто; мин-высота: авто; } # root_content_flex_1764335216> .dexter-FlexContainer-Items> *: nth-child (11) { ширина: 83,333333%; max-width: 83,333333%; гибкость: 1 1 авто; мин-высота: авто; } # root_content_flex_1764335216> .dexter-FlexContainer-Items> *: nth-child (12) { ширина: 83,333333%; max-width: 83,333333%; гибкость: 1 1 авто; мин-высота: авто; } # root_content_flex_1764335216>.dexter-FlexContainer-Items> *: nth-child (13) { ширина: 83,333333%; max-width: 83,333333%; гибкость: 1 1 авто; мин-высота: авто; } } ]]>Быстрый, мощный и всего в нужном количестве
Превратите свои идеи в потрясающую реальность быстрее. В XD есть множество инструментов, которые помогут вам без труда создавать веб-сайты, приложения, голосовую связь и многое другое.
Дизайн. Быстрые наброски каркасов и мокапов. Создавайте высококачественные дизайны для любого экрана. Работайте вместе в режиме реального времени.
Да, это правда: Adobe XD (New Experience Design Tool) теперь бесплатен!
Сегодня утром появились невероятные новости: Adobe объявила о том, что они делают свой новый популярный инструмент для дизайна — Adobe XD, основную часть Creative Cloud — совершенно бесплатно (!) Для всех, кто хочет загрузить и использовать его. , forever:
Сегодня мы объявляем о стартовом плане Adobe XD CC — бесплатном предложении универсальной платформы для проектирования UX / UI.План XD CC Starter Plan включает настольную версию XD для Mac и Windows, мобильные приложения для iOS и Android, а также услуги, позволяющие пользователям разрабатывать, создавать прототипы и делиться пользовательским опытом с коллегами. Благодаря этому объявлению и выпуску новых функций и улучшений, Adobe XD стала единственной кроссплатформенной платформой для проектирования, сочетающей дизайн и прототипирование с производительностью промышленного уровня. А как часть Adobe Creative Cloud, Adobe XD тесно интегрируется с существующими рабочими процессами дизайнеров и лучшими инструментами, такими как Photoshop CC и Illustrator CC.
Подождите, что? Adobe XD теперь бесплатно? Как и когда?
Да. Стартовый план для Adobe XD бесплатен и сразу же доступен для всех во всем мире. Бесплатный план дополняет существующие планы Adobe XD, в том числе для частных лиц, групп и предприятий. Получите бесплатно Starter Plan для Adobe XD здесь.
Что умеет Adobe XD?
XD означает «Дизайн впечатлений» и представляет собой успешное новое универсальное UX / UI-решение Adobe, позволяющее быстро перейти от концепции к прототипу при разработке веб-сайтов, мобильных приложений и т. Д.Легко переключайтесь с каркаса, визуального дизайна, интерактивного дизайна, прототипирования, предварительного просмотра и совместного использования — все в одном мощном инструменте. Скотт Бельски, главный директор по продукту и исполнительный вице-президент Creative Cloud, говорит: «Adobe XD теперь предоставляет всем все необходимое для разработки и предоставления исключительного цифрового опыта и изучения быстро расширяющейся области дизайна UX без каких-либо финансовых обязательств»… и он считает, что Со временем XD станет для компании большим продуктом, чем даже Photoshop!
Так чем же бесплатный XD отличается от платных планов? Есть ли ограничения?
Бесплатный начальный план для Adobe XD дает вам все возможности дизайна и прототипирования, и вы можете создавать неограниченное количество документов XD, экспортировать ресурсы для производства и создавать видео, чтобы делиться своим опытом.Вы получаете 100% функций и возможностей обычного платного приложения XD, за одним исключением. Со стартовым планом вы получаете один активный общий прототип и одну активную общую спецификацию дизайна с возможностью обновления, если вам потребуется неограниченное совместное использование. Платные версии XD (план для одного приложения за 9,99 долл. США в месяц и план для всех приложений Creative Cloud) предоставляют неограниченное количество общих прототипов и технических характеристик.
См. Сравнительную таблицу различий здесь.
Ограничен ли бесплатный Adobe XD по времени? Это пробная версия или срок ее действия истекает?
Нет, после того, как вы загрузите и установите XD на свой настольный компьютер, срок действия или ограничение по времени исчезнут.Это твое. Это не эксперимент и не испытание; это постоянная полная версия Adobe XD для настольных ПК. Adobe намерена и дальше предлагать этот новый бесплатный план.
Как получить бесплатный тарифный план XD?
Отсутствуют финансовые обязательства и кредитная карта. Все, что вам нужно, это стандартный Adobe ID, который представляет собой всего несколько полей для заполнения и бесплатную регистрацию. Тогда скачайте XD бесплатно и сразу приступайте к работе.
Вам понадобится компьютер, отвечающий минимальным системным требованиям Adobe для XD… Это означает macOS 10.11 («El Capitan») или более поздней версии или 64-разрядной версии Creators Update для Windows 10 или более поздней версии (обратите внимание, что Windows 7 не поддерживается). Для активации программного обеспечения и доступа к онлайн-сервисам необходимо подключение к Интернету. XD в настоящее время доступен на английском, французском, немецком, японском и корейском языках.
Есть ли что-нибудь еще в составе бесплатного уровня Adobe XD?
Да. Вы также получаете пять бесплатных ресурсов пользовательского интерфейса для Adobe XD, включая комплекты пользовательского интерфейса и наборы значков, которые вы можете загрузить бесплатно. Более того, уровень XD Starter теперь является частью бесплатного уровня членства в Creative Cloud, который также включает в себя 2 ГБ онлайн-облачного хранилища, Typekit Free для шрифтов (более 280 на выбор), интеграцию с библиотеками Creative Cloud и еще десяток других льготы.
Как мне начать и изучить XD?
Для начала ознакомьтесь с отличным бесплатным обучающим материалом на Creative Cloud Learn. В программу также встроены учебные пособия (охватывающие дизайн и экспорт, создание прототипов и совместное использование), которые помогут вам ускорить процесс.
Кроме того, Adobe только что опубликовала новое руководство по знакомству с XD, включающее 27 МБ примеров проектов и видео, которое служит полезным пособием для начинающих. И не пропустите бесплатные комплекты пользовательского интерфейса, которые помогут начать разработку вашего дизайна.
Что ждет XD в будущем?
В ближайшие месяцы вы можете ожидать значительного прогресса в расширенных возможностях прототипирования и анимации, новых функциях совместной работы в команде и поддержке расширения XD с помощью подключаемых модулей, поскольку Adobe продолжает свой путь, чтобы предоставить вам конечный продукт промышленного уровня. Комплексная платформа для UI и UX дизайна.
Сюда входит новый плагин с открытым исходным кодом XD to Flutter , который автоматически преобразует проекты Adobe XD в рабочий код для создания реальных приложений с Flutter.Flutter — это набор инструментов пользовательского интерфейса Google для разработчиков, позволяющий создавать собственные приложения для мобильных устройств, Интернета и компьютеров на основе единой базы кода. Дизайнеры и разработчики смогут разблокировать оптимизированный рабочий процесс, чтобы быстрее переходить от дизайна к готовому продукту на нескольких платформах. С XD на Flutter вы и ваша команда можете перейти от дизайна к живому функциональному продукту всего за несколько минут и ускорить принятие любых решений в реальном времени.
Adobe подводит итоги
Бесплатный план для начинающих для Adobe XD включает XD для Mac и Windows 10, мобильные приложения для iOS и Android, а также услуги, позволяющие пользователям разрабатывать, создавать прототипы и делиться пользовательским опытом с коллегами.Благодаря этому объявлению и выпуску новых функций и улучшений, Adobe XD стала единственной кроссплатформенной платформой для проектирования, сочетающей дизайн и прототипирование с производительностью промышленного уровня.
Являясь важной вехой для мирового сообщества дизайнеров, план XD CC Starter Plan позволяет профессиональным и начинающим дизайнерам, командам и студентам учиться, развивать и применять свои дизайнерские навыки с помощью бесплатного доступа к Adobe XD и совместного использования до одного активного прототипа и спецификации дизайна. вовремя.А как часть Adobe Creative Cloud, Adobe XD тесно интегрируется с существующими рабочими процессами дизайнеров и лучшими инструментами, такими как Photoshop CC и Illustrator CC. Начальный план также включает Typekit Free и интеграцию с библиотеками Creative Cloud, что упрощает совместное использование ресурсов и управление ими на разных устройствах.
См. Также
У вас есть вопросы по CC? Просто спросите ниже, и мы быстро ответим вам!Будьте в курсе последних новостей о программном обеспечении Adobe — подпишитесь на нас в Facebook или Twitter или подпишитесь на нашу RSS-ленту… Вы также можете ввести свой адрес электронной почты и получать новые статьи прямо в ваш почтовый ящик.Мы поддерживаем читателей; когда вы совершаете покупки по ссылкам на нашем сайте, мы можем получать партнерскую комиссию.
Обзор: Adobe Experience Design CC
Adobe XD мог бы стать ответом на молитвы UX-дизайнеров — но так ли это?Помните Чарли Чаплина в сцене Нового времени, где конвейерная лента становится все быстрее и быстрее? Многие из нас, кто работает в быстроразвивающихся креативных магазинах, могут понять. К счастью, Adobe потратила годы на то, чтобы сделать нас более эффективными. А с введением XD, сокращенно от Experience Design, они заняли новую нишу в своей и без того широкой линейке инструментов.
Нацелен на дизайнера пользовательского интерфейса, XD пытается определить себя, находя золотую середину между InDesign, Illustrator и, возможно, Photoshop. Добавьте несколько новых возможностей создания каркасов.
Если вас путают с XD, UI, UXD, UED и другими, вы не одиноки. Короткий ответ: все они — разные стороны одной медали, связанные с пользовательским интерфейсом. Как мы это концептуализируем, проектируем и реализуем. (Более подробный ответ можно найти здесь: Википедия: дизайн пользовательского опыта; Википедия: пользовательский интерфейс.)
Введите 1.0
Если вы какое-то время занимались UI / UX / XD, вы знакомы с некоторыми инструментами, которые есть на рынке. Вы также будете знать, что в отличие от многих других инструментов графического дизайна, инструменты проектирования интерфейсов сравнительно очень просты. Adobe XD, будучи первым выпуском, заметно проще, чем некоторые другие рыночные варианты.
Стартовая страница XDXD открывается с измененной стартовой страницей (см. Выше). Предлагаются на выбор пустые рабочие места предварительно заданного размера для iPhone, iPad, веб-сайта HD, нестандартные варианты или ряд уже заполненных вариантов.
Возможность узнать, как все инструменты работают вместе, предоставляется путем предоставления готового файла примера с инструкциями (см. Выше).
Эти быстрые и грязные наглядные руководства оказались весьма кстати. Как в этом примере, где я научился делать шаг и повторять через несколько секунд (см. Выше).
На стартовой странице также предлагаются «наборы пользовательского интерфейса» для проектов iOS, Mac и Windows, которые содержат довольно сложный и подробный контент.
После открытия вы обнаружите, что сам интерфейс необычно занижен (см. Выше).Специально для современного приложения Adobe.
Левая панель инструментов содержит всего семь инструментов: инструмент выделения, прямоугольник, эллипс, линия, перо, текст и инструменты монтажной области (вверху).
Над рабочей областью вы найдете небольшие разделы пунктов меню (ниже).
Чуть ниже меню находится опция выбора между двумя рабочими режимами: ДИЗАЙН или ПРОТОТИП. В режиме «Дизайн» доступны инструменты макета и параметры для импорта элементов. Это ваш дизайн-интерфейс. В определенный момент вы перейдете к интерфейсу Prototype, где вы настроите поток интерфейса с помощью инструментов каркасного моделирования.
В правой части экрана находится инспектор свойств, параметры которого различаются в зависимости от того, какие инструменты и объекты выбраны в данный момент.
У модулей Design и Prototype есть много доработок, которые скрыты под капотом, и они не очевидны, если вы не знаете, что они существуют. Например, инструмент «Коробка» позволяет закруглять углы, просто перетаскивая их. Все инструменты формы можно изменить с помощью логических инструментов в Инспекторе свойств.
В режиме прототипа все зависит от взаимодействия с пользователем и перехода от одного экрана интерфейса к другому с помощью каркасов.Щелчком и перетаскиванием из одного элемента экрана (обычно кнопки) на целевой экран.
После перехода от одного экрана к другому вы можете уточнить эффекты перехода с помощью множества опций.
Последняя часть работы — это экспорт проекта. Дизайн интерфейса во многом основан на проверке ваших концепций. Таким образом, XD предлагает вывод в файлы фильмов или в интерактивный формат, который можно воспроизводить в браузере. Вы также можете экспортировать ресурсы для фактической разработки в Muse, Dreamweaver и других программах.
Что еще нужно?
Чувствую, что многих вещей не хватает. Я нигде не мог найти окно «Слои», поэтому в 1995 году мне пришлось использовать инструменты «Упорядочить». Так что, безусловно, есть куда расти. Тем не менее, имейте в виду, что большая часть программного обеспечения, доступного в этой категории, не предназначена для компьютерных фанатов, привыкших к сложным программам. Большая часть работы с интерфейсом всегда выполнялась карандашом и бумагой, а не компьютером. И большая часть работы с пользовательским интерфейсом — это больше рук людей, тестирующих в реальном мире, чем руки на компьютере.
Например, сложные проекты часто включают в себя полноценные лаборатории тестирования и фокус-группы, которые работают, чтобы увидеть, как люди реагируют на проекты и перемещаться по ним. Небольшие проекты могут просто отправить прототипы друзьям и родственникам по электронной почте с запиской: «Что ты думаешь?»
Таким образом, специалисту по XD может не понадобиться такое мощное и сложное программное обеспечение, к которому многие из нас привыкли. Тем не менее, как часть экосистемы Adobe, она должна как вписываться, так и превосходить то, что предлагают аналогичные программы.
Где же тогда нужно расти XD? По желанию в нескольких областях.Во-первых, сделать тестирование в реальном мире еще проще. Текущие варианты интерактивных фильмов или веб-сайтов хороши, но нам нужно иметь возможность экспортировать для тестирования более реалистичные продукты, которые работают на целевых платформах, таких как приложения, а не фильмы или в браузере.
Кроме того, в этой области используются другие наборы инструментов, которые можно развернуть. A / B-тестирование позволяет отслеживать несколько вариантов интерфейса, чтобы увидеть, какие решения работают лучше. Затем они собирают данные для анализа и улучшения.(Популярным решением для этого были инструменты Google Content Experiment). Некоторые из этих возможностей могут быть очень полезны в XD либо внутри приложения, либо как часть экспортированного приложения для тестирования.
Еще одно направление, в котором можно было бы пойти XD, — это повышение готовности к производству. Хотя в его инструментах есть новаторские дополнения к стандартной коробке, кругу и ручке, можно многое добавить. Но, конечно, и Adobe, и пользователи должны спросить, где провести черту? В какой момент XD должен принудительно переключиться на настоящий производственный инструмент, такой как Animate CC (ранее Flash), Muse или Dreamweaver?
XD предположительно будет доступен подписчикам Creative Cloud, что сделает его (вроде) бесплатным.Если вы не являетесь подписчиком или вам нужно больше опыта, безусловно, доступны другие программы. Sketch, который является гораздо более развитым инструментом для пользовательского интерфейса, стоит 99 долларов (только для Mac). JustinMind Prototyper — еще один хорошо развитый инструмент (Mac и Windows), доступный по подписке, покупке или бесплатной версии!
Adobe Experience Design CC
Использование Creative Cloud для создания прототипов
У интерактивных дизайнеров и дизайнеров пользовательского интерфейса всегда возникал вопрос: почему в Adobe Creative Cloud нет инструмента для создания прототипов? С момента выпуска Adobe Creative Cloud она была известна как интегрированная платформа для дизайнеров, разработчиков, фотографов и медиа-экспертов, позволяющая создавать свои проекты с помощью пакета приложений и услуг, доступных для подписчиков Creative Cloud.Однако не хватало одного элемента — быстрого инструмента для создания прототипов приложений и пользовательских интерфейсов (UI). С выпуском Adobe Experience Design CC (Adobe XD) эта часть процесса проектирования завершена, и теперь дизайнеры и эксперты по пользовательскому опыту могут создавать прототипы интерфейсов и создавать интерактивные превью, используя настоящий удобный инструмент.
Когда меня пригласили в предварительную программу Adobe Experience Design CC, я обнаружил, что команда XD, стоящая за этим новым приложением, имеет четкую цель, которую можно легко заметить после установки приложения на свой компьютер (в настоящее время бета-версия Adobe XD доступен для пользователей Mac с обещанием быть доступным для пользователей Windows к концу 2016 г.).На первый взгляд, что мне очень понравилось в приложении, так это его понятный вид, простой интерфейс и быстрая загрузка. Приложение было представлено общественности в прошлом году во время Adobe MAX 2015 под бета-версией Adobe Comet. Adobe Experience Design CC теперь доступен в виде общедоступной бета-версии, которую можно бесплатно загрузить с помощью Adobe ID со страницы Adobe XD.
Что есть в Adobe Experience Design CC
Прототипирование — важный этап как в дизайне пользовательского интерфейса, так и в процессе дизайнерского мышления.Поэтому все функции Adobe XD ориентированы на создание прототипов приложений и пользовательских интерфейсов для веб-устройств, мобильных устройств и планшетов с возможностью создания интерактивной связи между интерфейсами, предварительного просмотра и обмена презентациями прототипов с командами и клиентами. Экран приветствия предоставляет множество вариантов для создания интерфейса с разными размерами с возможностью изменения этих размеров или создания новых страниц (Artboard) во время разработки проекта. Главный экран состоит из двух разделов: Дизайн и Прототип.Раздел «Дизайн» включает ряд инструментов и функций для создания элементов, форм и шрифтов для интерфейса. Кроме того, он включает инструменты для изменения монтажной области, создания монтажных областей на основе существующих стандартных размеров для Интернета, мобильных устройств или планшетов, а также для создания нестандартных размеров.
Интерфейс Adobe Experience Design. (Источник: Adobe)Второй раздел Прототипа включает методы для создания связи между страницами и организации рабочего процесса приложения или дизайна веб-сайта. Щелчок по любой части приложения предоставляет параметры, позволяющие пользователю щелкнуть этот элемент, чтобы перейти к определенному экрану и создать анимацию перехода для выбранного элемента в дизайне пользовательского интерфейса.В разделе «Прототип» представлен обзор проекта, взаимосвязи между страницами и подстраницами, а также того, как взаимодействие с пользователем перетекает от одного интерфейса к другому посредством отображения визуальных синих линий, которые выделяют связанные экраны.
В правом верхнем углу интерфейса приложения значок предварительного просмотра позволяет дизайнерам непосредственно просматривать прототип, записывать комментарии и сохранять как фильм QuickTime. Второй значок создаст веб-ссылку, которой можно поделиться с командой. Справочная документация Adobe Experience Design содержит полное руководство по использованию и изучению приложения.
Стадия прототипа Adobe XD. (Источник: Adobe)Интеграция с Adobe Creative Cloud
Adobe Design Experience позволяет пользователям импортировать ресурсы в различных форматах, таких как JPG, PNG и SVG. Кроме того, пользователи могут напрямую перетаскивать ресурсы со своего компьютера в приложение для вставки в дизайн пользовательского интерфейса. Пользователи Adobe Creative Cloud могут легко копировать ресурсы из различных приложений, таких как Adobe Photoshop и Illustrator, и вставлять в проект Adobe XD либо с помощью инструмента выделения в Photoshop, либо путем выбора векторных элементов в Illustrator.
Что дальше?
В блоге Adobe Эндрю Шортен указал, что текущая версия все еще находится в разработке, и ожидается, что в следующую версию будет добавлено больше инструментов и функций, в том числе следующие:
- Улучшение работы с цветами
- Добавление слоев и поддержка при работе с ними
- Улучшение функции совместного использования прототипов
- Добавление функции прокрутки и поддержка прокрутки контента
- Добавление дополнительных взаимодействий для прототипов
- Доступность для Microsoft Windows 10
В дополнение к вышеуказанным функциям, я считаю, что должны быть дополнительные функции быть добавленными для улучшения взаимодействия путем добавления таких элементов, как флажки, переключатели, элементы форм и аналогичные предустановки, которые дизайнеры могут развернуть непосредственно в макете без необходимости создавать их с нуля.Кроме того, я хотел бы видеть улучшение функции экспорта, чтобы включить больше форматов, таких как PDF, который обычно используется для обмена прототипами для экспорта монтажных областей.
Adobe Experience Design добавляет недостающий камень к семейству Adobe Creative Cloud, особенно для интерактивных дизайнеров и дизайнеров пользовательского интерфейса. Хотя этот инструмент является многообещающим решением для дизайнеров, он все еще находится на стадии бета-тестирования, и мы надеемся увидеть больше улучшений в следующей версии, которая может предоставить полное решение для создания прототипов и легко интегрироваться с другими приложениями Adobe.
Краткий обзор функций универсального инструмента Adobe для UX-дизайна, Adobe Experience Design (XD) CC
Все мы знаем, насколько велико имя Adobe в области онлайн-графики и дизайна. Пусть это будет Photoshop и Illustrator или Brackets , инструменты Adobe — лучший выбор каждого сумасшедшего, увлеченного веб-дизайнера и разработчика. В прошлом году, еще в ноябре, в Сан-Диего, Adobe провела трехдневную мега-творческую конференцию под названием Adobe Max 2016 , на которую собрались веб-фанаты со всего мира и те, кто не смог присоединиться. Adobe позаботилась о том, чтобы некоторые сессии из событие остается доступным для них онлайн.Когда что-то или какое-то мероприятие проводит Adobe, очевидно, что цель будет заключаться в том, чтобы влить и унести много веселья, творчества, проанализировать прошлые успехи и сделать некоторые предстоящие объявления о продукте / функции. Говоря об анонсах, это был первый раз, когда Adobe представила свой новый инструмент проектирования без кода, получивший название . Проект Comet был ориентирован в первую очередь на сообщество UX-дизайнеров и на то, как они в настоящее время работают.
Основная идея Adobe по созданию Project Comet заключалась и остается в том, чтобы помочь UX-дизайнерам избавиться от множества инструментов, которые они используют в настоящее время для проектирования, от многоэкранного интерфейса до тестирования, проводимого на разных этапах.С новым программным обеспечением Adobe заявляет, что предоставляет стабильное и унифицированное программное приложение, которое оставляет дизайнерам возможность использовать несколько инструментов для разработки и прототипа наряду с существующим доверием бренда. Вы можете сначала спроектировать каркас , а затем свой фактический визуальный и интерактивный дизайн для разных размеров экрана, используя одно и то же приложение, а также можете дополнительно выполнить живое тестирование на прототипе , чтобы увидеть, как он на самом деле выглядит и работает, и, следовательно, позволяя вам итеративно улучшить ваш дизайн.Мало того, вы можете использовать функцию Share Prototype , чтобы поделиться своей работой с разработчиками или вашими клиентами в виде короткой ссылки, все, что им нужно сделать, это ввести ссылку в своем веб-браузере, чтобы увидеть ваш действующий прототип. В дополнение к преимуществам дизайна это новое приложение также поддерживает Creative Cloud (облачная платформа Adobe для различных инструментов и ресурсов), что означает, что вы можете перетаскивать свои любимые ресурсы, которые уже используете с Photoshop и иллюстратором.
После объявления Adobe все еще работает над проектом итеративно на основе полученных отзывов.Вот что говорит Эндрю Шортен , директор Adobe по управлению продуктами для UX-дизайна:
Представление миру нового продукта — непростое занятие, но после этого объявления мы были взволнованы уровнем интереса к Project Comet! Я думаю, что мы читали все твиты, комментарии, сообщения или статьи о Project Comet, и непреодолимое желание Adobe создать инструмент, специально созданный для UX-дизайнеров, невероятно мотивирует нас. Спасибо, что поделились своими мыслями о Project Comet — мы очень ценим это.
Разбивка приложения:
Прежде чем я перейду к дальнейшему обсуждению с вами некоторых основных функций, доступных в настоящее время, пора назвать настоящее имя. Ну да, Project Comet — это не настоящее имя, как было раньше, но в начале этого года (где-то в марте) с публичным выпуском Adobe переименовала приложение в Experience Design Preview CC , также известное как , Adobe XD .
Как только вы запустите приложение, вам будет предоставлен экран, полный четко понятных опций. Вы можете выбрать один из трех вариантов, например, , запуск нового дизайна, , проект с предопределенными монтажными областями или файлы примеров по умолчанию или платформа специальные комплекты пользовательского интерфейса .
При выборе одного из вариантов открывается интерфейс желаемого приложения, и вы можете видеть, что заголовок приложения XD разделен на две части: design и prototype .
Внутри обоих разделов собраны некоторые важные функции, которые делают приложение верным своему названию и назначению.
Дизайн:
Каждый раз, когда мы работаем над дизайном, мы стараемся, чтобы все элементы были правильно масштабированы и размещены одинаково. Эта цель достигается в Photoshop с помощью сетки, которая накладывает плавающие линии сетки на рабочее пространство или монтажную область.
Эта функция отсутствовала в первоначальном предварительном просмотре, но на основе непрерывного запроса функции Adobe добавила ее в свой недавний предварительный просмотр XD. Можно легко построить сетку, щелкнув галочку над квадратом в области инспектора свойств справа, а затем введите желаемый размер квадратов, образующих сетку.
Не только это, но и новое дополнение, называемое Repeat Grid. Раньше каждый раз, когда нам приходилось делать несколько копий одного элемента, мы использовали функцию копирования и вставки и вносили некоторые ручные корректировки здесь и там, но теперь, используя однократное использование опции Repeat Grid, мы можем повторять столько раз, сколько захотим, и это тоже с теми же предустановленными настройками, что и исходный элемент.
Допустим, нам нужно повторить выбранный элемент на изображении выше. Все, что нам нужно сделать, это просто щелкнуть опцию «Повторять сетку», доступную в инспекторе свойств справа. Это дает нам вертикальные и горизонтальные ручки для нашего элемента.
Теперь, растягивая эти ручки курсором мыши, мы можем дублировать элемент как по горизонтали, так и по вертикали, в зависимости от растягиваемой ручки. Мы также можем настроить отступы между элементами, поместив курсор в пустое пространство между двумя элементами, а затем растягивая и растягиваясь в соответствии с требуемым промежутком.
Это что-то новое, и мне очень нравится идея, что Adobe делает это, потому что эта функция сэкономит чертовски много времени. Мы любим вносить изменения в то, что уже доступно, а затем переписывать или воссоздавать просто ради времени и усилий. Точно так же в XD есть функция перетаскивания ресурсов, которая позволяет вам перетаскивать любой актив, будь то текст или изображение, прямо с вашего компьютера и перетаскивать его на свой артборд XD, над которым вы работаете.
Если элемент, который вы хотите перетащить, является текстовым файлом, вам не нужно открывать файл и копировать текст на монтажную область.Просто щелкните имя файла и перетащите его, все содержимое этого текстового файла автоматически будет помещено в вашу рабочую область. Как только текст будет размещен, вы можете в дальнейшем использовать доступные параметры для соответствующего форматирования текста.
Режим прототипа:
После того, как вы закончите проектировать каждый элемент вашего дизайна, самое время переключиться в режим прототипа. В этом режиме вы можете фактически создать интерфейс вашего дизайна и установить порядок страниц, а также установить целевую страницу или домашнюю страницу вашего проекта.
В XD вы можете связать действия в реальном времени с тем, что будет делать конкретная опция. Вы можете связать два разных объекта с помощью линий, как показано на рисунке.
Итак, в реальном интерфейсе, который вы только что создали, если вы нажмете на вторую сетку в «Последние приключения», то попадете на страницу под названием «Скалистые горы». В этом прелесть XD — отсутствие кода или сложной структуры. Вы можете делать что угодно, не имея опыта проектирования или вообще ничего.
Adobe XD также позволяет вам наблюдать за реальным дизайном в действии во время сборки, а также позволяет вам делиться им со своим клиентом в виде живой ссылки, размещенной в облаке Adobe.
Эту ссылку можно открыть в веб-браузере точно так же, как мы открываем веб-сайт, и поэтому браузер позволяет клиенту просматривать дизайн.
Наличие:
На данный момент Adobe XD Preview CC доступен только для Mac, но мы можем ожидать версию для Windows в ближайшее время, возможно, этой осенью. Когда я говорю предварительный просмотр, это напоминает мне о Microsoft, когда они представили Windows 8. Я связал Windows 8 с Adobe XD, потому что Microsoft с Windows 8 сделала то же самое, они представили что-то новое и хотели, чтобы все начали использовать его с первый день, но не были уверены, примут ли люди это или нет.