Проблема
Визуализация данных является важной частью работы многих дизайнеров интерфейсов. Панели мониторинга, таблицы, отчеты и виджеты — все эти компоненты интерфейса содержат диаграммы. Независимо от того, какой инструмент вы используете, Sketch, Figma или Adobe XD, у вас нет встроенных функций для визуализации данных.
Представьте, что вы хотите создать прототип для инструмента анализа или системы с десятками виджетов, таблиц или отчетов с использованием реальных данных из Excel. Я провел несколько недель, выполняя подобную задачу. И однажды наш специалист по обработке и анализу данных пришел ко мне и сказал, что все данные изменились! Я был вынужден внести изменения в 56 экранов моего прототипа …
Какие у меня были альтернативы? Я мог бы использовать Tableau, D3.js или HTML Canvas, но эти инструменты сложны и не очень гибки. Я решил, что мне нужно найти плагин Sketch, который мог бы решить мою проблему.
После часа поисков я нашел три интересных плагина: Sketch Data Studio, Sketch Pies и Sparkliner. У каждого из этих плагинов были плюсы и минусы, и они не удовлетворяли всем моим потребностям. Поэтому я решил создать свой собственный плагин Sketch для ежедневных задач визуализации.
О плагине Chart
Chart содержит четыре типа диаграмм: линейная диаграмма, гистограмма, зональная диаграмма и спарклайн (искрографик).
Каждый тип диаграммы поддерживает визуализацию реальных текстовых, табличных или случайных данных. Вы должны скопировать номера, разделенные запятыми, из любого текстового редактора, листа Google или Excel и создать диаграмму. Если вы выберете две или более строки, Chart нарисует несколько линий на артборде.
Настройки
Внутри Contents/Sketch вы найдете файл с общими параметрами, такими как тип кривой, цветовая палитра или вес линии.
Кривые основаны на кривых Безье. Генерация случайных данных выполняется с использованием нескольких простых функций и их комбинаций:
Chart в действии
Давайте создадим медицинский виджет за 13 секунд:
Чтобы попробовать Chart, скачайте и установитеSketch-плагин с Github.
Chart — это бесплатный проект с открытым исходным кодом. Если вы найдете какие-либо ошибки или у вас есть предложения, не стесняйтесь пишите создателю или переделывайте репозиторий, чтобы добавить дополнительные функции.
Нет комментариев