UXPUB 🇺🇦 Спільнота дизайнерів

Cover image for Chart - самый функциональный Sketch-плагин визуализации данных
Редакція
Редакція

Опубліковано • Оновлено

Chart - самый функциональный Sketch-плагин визуализации данных

Проблема

Визуализация данных является важной частью работы многих дизайнеров интерфейсов. Панели мониторинга, таблицы, отчеты и виджеты – все эти компоненты интерфейса содержат диаграммы. Независимо от того, какой инструмент вы используете, Sketch, Figma или Adobe XD, у вас нет встроенных функций для визуализации данных. Представьте, что вы хотите создать прототип для инструмента анализа или системы с десятками виджетов, таблиц или отчетов с использованием реальных данных из Excel. Я провел несколько недель, выполняя подобную задачу. И однажды наш специалист по обработке и анализу данных пришел ко мне и сказал, что все данные изменились! Я был вынужден внести изменения в 56 экранов моего прототипа ... Какие у меня были альтернативы? Я мог бы использовать TableauD3.js или HTML Canvas, но эти инструменты сложны и не очень гибки. Я решил, что мне нужно найти плагин Sketch, который мог бы решить мою проблему. После часа поисков я нашел три интересных плагина: Sketch Data StudioSketch Pies и Sparkliner. У каждого из этих плагинов были плюсы и минусы, и они не удовлетворяли всем моим потребностям. Поэтому я решил создать свой собственный плагин Sketch для ежедневных задач визуализации.

О плагине Chart

Chart содержит четыре типа диаграмм: линейная диаграмма, гистограмма, зональная диаграмма и спарклайн (искрографик). Плагин для Sketch Chart - 1 Каждый тип диаграммы поддерживает визуализацию реальных текстовых, табличных или случайных данных. Вы должны скопировать номера, разделенные запятыми, из любого текстового редактора, листа Google или Excel и создать диаграмму. Если вы выберете две или более строки, Chart нарисует несколько линий на артборде.

Настройки

Внутри Contents/Sketch вы найдете файл с общими параметрами, такими как тип кривой, цветовая палитра или вес линии. Плагин для Sketch Chart - настройки Chart/Contents/Sketch/parameters.js Кривые основаны на кривых Безье. Генерация случайных данных выполняется с использованием нескольких простых функций и их комбинаций: Плагин для Sketch Chart - функции Сочетание логарифмических и линейных функций

Chart в действии

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


Перевод статьи Pavel Kuligin

Топ коментарі (0)

Курси дизайну UX, UI

Вивчай UX, UI, дослідження, райтинг чи продуктовий бік дизайну, щоб створювати круті інтерфейси
Дізнатись більше