Эскиз Учебники

Автоматизация проектирования диаграмм

Трюки и советы по визуализации данных для приложения Sketch

Эй, как дела? Вы слышали о графиках? Диаграммы, диаграммы и круговые диаграммы являются важными элементами дизайна, позволяющими любому визуализировать данные в удобной для глаз форме, а также использоваться в тысячах снимков на приборной панели вокруг Dribbble. Дизайнеры и другие люди производят много из них, иногда с нуля, автоматически генерируя их на основе определенных значений.

Каждый раз, когда вы говорите «большие данные» публично - где-то, рождается график.

В последнем обновлении Frames for Sketch v.1.6 мы добавили компоненты Charts в основной файл, поэтому обязательно ознакомьтесь с ними. И в этом эпизоде ​​мы рассмотрим функции и расширения визуализации данных, которые могут быть полезны в вашей повседневной работе с этой графикой.

Творчество

У инструмента Vector (V) есть некоторые хитрости для определенных случаев использования дизайна диаграммы. Вот некоторые примеры:

  • Вы можете быстро распределить точки вектора и данных равномерно, выбрав определенные элементы и распределив их по горизонтали [⌃⌘H] или по вертикали [⌃⌘V] в соответствии с координатами X или Y.
  • Чтобы создать гладкие волнообразные диаграммы стиля, установите тип точек «mirror» и удерживайте оба обработчика с помощью кнопки Shift [⌃] при настройке расстояния.
  • Закройте ваши векторные контуры и используйте маски для быстрого переключения между линейными и областными диаграммами.
  • Поместите новую точку на полпути между двумя существующими точками, нажав Shift.

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

Итак, вот некоторые расширения, которые могут пригодиться:

  • Плагин «Сегментированные круги» - удобен для создания радиальных диаграмм, таких как круговая диаграмма, пончик и калибровка.
  • Sketch Data Studio - Может генерировать диаграммы и таблицы на основе числовых данных, но не поддерживает изменение размеров вообще.
  • Создание или создание контента - Популярные инструменты благодаря возможности быстро генерировать фиктивные данные другого типа.
  • Numbers и Excel - оба могут экспортировать хорошо выглядящие PDF-файлы, которые можно перетащить в Sketch, и иметь слои, доступные для диаграмм и ячеек таблицы.

Вы можете использовать набор инструментов Frames (или любую другую коллекцию общих стилей), чтобы быстро назначить цвет вашего бренда и свойства обводки для векторных контуров и фигур из только что импортированного PDF-файла - иногда это экономит время.

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

настройка

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

Чтобы добиться более автоматической настройки, мы используем отдельный артборд для создания панели управления для хранения общих стилей, которые могут быть легко перезаписаны с помощью [[+ LM], что, вероятно, является одной из самых основных / популярных комбинаций клавиш.

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

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

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

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

Нажмите на изображение для загрузки

Папка линейного графика делится на три группы: Диаграмма (линии и точки данных), Числа (значения Y) и Сетка (Значения X), чтобы все работало хорошо и растягивалось, установите:

  • Прикрепите значения осей X и Y к нижней и левой / правой сторонам группы слоев и установите для них фиксированный размер, чтобы сделать магистрали независимо гибкими.
  • Разместите точки данных в отдельные группы и выровняйте их по значениям координат X / Y.
  • Используйте одну маску одновременно для линейных координат, чтобы растянуть все графики одновременно.

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

Надеюсь, что это пригодится, и если вы заинтересованы в более продвинутом подходе к созданию эскизов - получите себе копию Frames Design System и вместо того, чтобы тратить время на выравнивание фигур и игру с группами слоев, используйте нашу готовую коллекцию диаграмм.

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

Прежде чем ты уйдешь

  • Загрузите демонстрационный файл здесь.
  • Больше бесплатных ресурсов, связанных с графиком, здесь → sketchappsources.com/charts
  • Найдите причину и следуйте за мной в Twitter и Dribbble