Статьи

Создание хитрых интерфейсов с помощью Sketch и Photoshop

Мальчик, разве команда Invision не была занята началом 2016 года?

Хотя они больше всего известны своим флагманским приложением для создания прототипов , они сделали два больших объявления с нового года.

Ара

Ара

Во-первых, в конце января они объявили, что приобрели Macaw и стоящих за ним ребят. Macaw получил много шума как один из новых инструментов визуального кода / дизайна.

Хотя Macaw по сути является веб-редактором WYSIWYG, он поставляется со встроенным веб-сервером и пишет относительно аккуратный современный код. У него прекрасный интерфейс, но я никогда не знал, что с ним делать.

На данный момент неясно, намеревается ли Invision продолжать разработку Macaw или просто приобрела талант разработчика Macaw, но вы можете по крайней мере взять текущую версию Macaw, если вам интересно.

Становится хитрым

Второй большой выпуск Invision, названный « Craft », объявлен как «набор расширений для пользователей Photoshop и Sketch».

Так что именно это значит?

Три кнопки Craft

Craft — это набор вспомогательных панелей для дизайнеров пользовательского интерфейса. Я собираюсь показать версию Sketch здесь, но версия Photoshop имеет схожую функциональность.

После установки вы увидите новую и несколько неприметную панель справа от экрана (см. Рисунок). Он имеет только три кнопки, но каждая предлагает полезный инструмент.

Кнопка 1 — дублирующиеся компоненты

Дублирование компонентов страницы легко

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

  • статьи размытия
  • миниатюры галереи
  • списки каталогов
  • арматура
  • отображение продукта и т. д.

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

Кнопка 2 — Добавить фотографии

Меню фото - Unsplash

Большинству макетов нужны какие-то изображения, поэтому вторая панель Craft позволяет без труда добавлять изображения-заполнители в ваши первоначальные дизайнерские идеи.

Панель «Фотографии» может работать в качестве канала для ваших собственных изображений либо локально, либо в Dropbox, но интерфейс с высококачественными изображениями Unsplash может быть настоящей убойной функцией. Craft позволяет фильтровать изображения UnSplash по цвету или предмету, поэтому легко найти и вставить изображения-заполнители, соответствующие вашему предмету и тону.

Кнопка 3 — Добавить тип компонентов

Тип компонента меню

Большинство интерфейсов, которые мы создаем, построены на основе объединения компонентов из пула с одинаковыми необработанными элементами. Биты как:

  • Заголовки статей
  • Тексты тела
  • Списки имен
  • Списки стран / городов
  • Даты

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

Лично я веду отдельный документ о таких единицах для этой же цели, но это более элегантное решение.

Это охватывает самые удобные части. Если вы разрабатываете пользовательский интерфейс в Photoshop или Sketch, я думаю, вы получите много пользы от Craft.

И я упоминал, что это бесплатно? Проверьте это.

Первоначально опубликовано в бюллетене SitePoint Design .