Adobe XD: Создание дизайна с реальными данными

Adobe XD: Создание дизайна с реальными данными

Ранее, мы представили Adobe XD (бывший Project Comet), что вызвало бурную реакцию в мире. Нас буквально засыпали положительными отзывами и запросами на доступ. Если вы еще не в курсе, Adobe XD – это совершенно новый дизайн инструмент от компании Adobe, который позволит вам создавать дизайн и прототип в одном месте!

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

Я объединил несколько наработок по этим вопросам в тестовой сборке Adobe XD и презентовал ее на Adobe MAX 2015 Sneaks

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

Создание дизайна с реальными данными

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

Профессия «Дизайнер интерактивных медиа»
Профессия «Дизайнер интерактивных медиа»
Скидка 45% по промокоду UXPUB
Узнать подробнее

Сообщество UX дизайнеров также принялось отстаивать необходимость реальных данных:

Мы видим мир и пользователей как они есть, вместо того, чтобы представить их такими, какими они должны быть. Создание дизайна с реальными данными, позволяет нам двигаться быстрее, раньше выявлять проблемы и трудности, создавая лучшее восприятие для пользователя . — Josh Puckett on Modern Design Tools: Using Real Data

Я вспоминаю обсуждения и брейнштормы с коллегами (Tom Krcha) об использовании реальных данных в дизайне и то, как подобный инструмент облегчит жизнь многим. У нас было множество идей, но их реализация стопорилась по мере создания такого продукта с нуля.

Мы уделили основное внимание на более глобальную проблему: повторяющиеся элементы в списках и таблицах при создании дизайна. Это важный элемент для мобайл и веб дизайна, но очень утомительный для создания вручную. Чтобы упростить процесс, мы создали инструмент под названием Repeat Grid. Вы можете выбрать любой элемент на холсте и продублировать его по горизонтали или вертикали. Элементы в Repeat Grid сохраняют свое расположение и стиль, но текст и изображение может изменяться. Наполнение можно регулировать.

1-ctksYvZyB4-qh2qzdBuzdA

После реализации такого инструмента, я вспомнил про разговоры о реальных данных в дизайне.

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

Repeat Grid предлагает простую структуру для вашего дизайна, а также решает ключевую проблему: выбор. Выбор одного элемента в Repeat Grid влияет на все копии этого элемента. Это означает, что  если у вас, допустим, есть список из 10ти имен, вы можете вставить их все на полотно, всего лишь выбрав один текстовый элемент при помощи Repeat Grid. Больше нет необходимости выбирать каждый элемент по отдельности.

Реальные данные в Adobe XD

В тествой сборке программы, продемонстрированной на MAX Sneaks, данные (текст или иллюстрации), могут быть внедрены в дизайн через:

  1. Встроенный шаблон
  2. Файловую систему
  3. Google таблиц
  4. Интернет

* Все, что показано ниже – находится в стадии разработки и может быть изменено.

Встроенные шаблоны контента

Каждый раз, при выборе шаблона Name (Имя), вы получаете случайный список имен.

Реальные данные

Данные из файловой системы

Перетащите текстовый документ на элемент в Repeat Grid и текст будет подтягиваться автоматически.

Drag and drop с текстового файла JSON или CSV

Вы также можете работать с JSON или CSV данными, вставляя различные элементы из свойств и таблиц.

Данные из Google таблиц

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

Данные из Google таблиц

Данные из Интернета

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

1-pqPjREIv773FXtSVSPFduw

Также, очень легко можно перенести данные фото и имен друзей с Фейсбука в дизайн. Попробуйте найти фото на Adobe Stock и всего в несколько кликов встроить массу разных картинок в ваш дизайн.

Adobe Stock

Total
1
Shares
6 комментариев
  1. Протестировал наконец вчера этот продукт. Весьма годная вещь, не смотря на то, что я не очень то люблю продукцию Adobe. На мой взгляд, очень достойный конкурент Sketch. Расстраивает только то, что теперь мы имеем два разных продукта, которые так хочет объединить в один.

    В Sketch так не хватает работы с реальными данными. И не надо говорить про Craft. Craft, конечно очень крут, но все равно сыро. Возможно с 2.0 мы получим от него что-то большее. В добавок будет Prototype, который я прождал все лето, а его все нет и нет. Уже не получится ли как с другим продуктом Invision – Invivsion Motion, который показали всем, все от него просто охренели, но он так и не вышел… Уже год прошел.

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

    Больше всего в XD меня впечатлило 2 вещи:
    1. прототипирование. Мы все знаем про invision, principle и т.д. Но мне лично так не хватало полной навигационно карты, когда видишь все приложение целиком и все переходы, между экранными формами. Это очень удобно, когда отдаешь проект удаленному программисту.
    2. Очень качественная совместимость с артбордами sketch! Вот за это отдельный респект!

    1. В XD нет слоев, пока непонятно будут или нет. Инструменты прототипирования тоже понравились, но не хватает много чего, надеюсь добавят. Что вы имеете введу под совместимостью со sketch?

      1. Когда копируешь артборд в Sketch и вставляешь его в Xd, он вставляет его идеально! Сохраняет все слои, ничего не съезжает, шрифты, тексты. Но, он вставляет его не как артборд, а просто как сгруппированные слои, но ничего не мешает в Xd создать атрборд и в него вставить.

        Да, прототипирование конечно еще тоже сыроватое и требует доработок, но то что уже есть, я считаю очень хорошо.

      2. В первом видео “знакомстве” на сайте adobe у чувака есть все функции , в том числе и слои. Я не могу, например, создать сетку в артборде, а в видео все отлично происходит. Либо сырую версию отдаю, либо я не знаю.

Добавить комментарий

Ваш адрес email не будет опубликован.

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

Почему я продолжаю делать фейковые дизайны

Я сделал редизайн популярного сайта, чтобы посмотреть, как бы я сделал по-другому, и разработал фейковые логотипы для фейковых продуктов, которые еще не существовали. Думаете это пустая трата времени?

Еженедельная рассылка

Одно письмо с лучшими записями за неделю

Total
1
Share