Лучшие статьи и кейсы стартапов
Включить уведомления
Дадим сигнал, когда появится
что-то суперстоящее.
Спасибо, не надо
Вопросы Проекты Вакансии
Программа для оптимизации взаимодействия между дизайнером и разработчиком.
Рекомендуем
Продвинуть свой проект
Лучшие проекты за неделю
26
Битрикс24

Битрикс24

www.bitrix24.ru

16
Отследить-посылку

Отследить-посылку

B2B-сервис трекинга посылок

14
myPreza

myPreza

mypreza.ru

13
WebResidentTeam

WebResidentTeam

webresident.agency

12
Perezvoni.com

Perezvoni.com

perezvoni.com

11
Expresso

Expresso

www.expresso.today

10
YAGLA

YAGLA

yagla.ru

10
Reader

Reader

Интернет-журнал о современных технологиях.

Показать следующие
Рейтинг проектов
Подписывайтесь на Спарк в Facebook

Про Sketch: как сэкономить время в работе с таблицами и диаграммами

283 2 В избранное Сохранено
Авторизуйтесь
Вход с паролем
Дизайнер Ivo Mynttinen написал на днях в своем блоге отличный пост про то, как он нашел способы сэкономить нервы и время при создании графиков, таблиц и диаграмм.

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

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

Создание круговых и кольцевых диаграмм

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

-Использование плагина Segmented Circles («Сегментные круги»)

Все данные вводятся в одном текстовом поле, поэтому их легко можно скопировать и вставить, скажем, из Excel.

b_57bbcb09c58c3.jpg

- Использование Angular Gradients (Углового градиента)

Метод очень полезен, когда нужно быстро изменить значения без перерисовки всей диаграммы. Просто добавляем круг и применяем угловой градиент в качестве фона, затем добавляем 2 color-stop для каждого сегмента и выровняйте их соответствующим образом. Затем просто копируете и корректируете стиль каждого круга и настраиваете color stop.

Видео: http://ivomynttinen.com/content/3-blog/20160818-designing-data-with-sketch/radial-gradient-graph.webm

Создание линейных диаграмм

Экономьте время – используйте тот же Excel. Просто создайте там линейную диаграмму и экспортируйте ее в виде PDF. При открытии PDF с помощью Sketch Вы можете выбрать каждый элемент отдельно, так как они экспортируются в виде векторной графики и организованы в группы слоев. Если же у Вас пока нет данных для генерации диаграммы, возьмите рандомные числа, используя RANDBETWEEN функцию.

Видео: http://ivomynttinen.com/content/3-blog/20160818-de...

-Создание символов для точек и общих стилей линий

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

-Сделайте их изменяемыми!

Видео: http://ivomynttinen.com/content/3-blog/20160818-de...

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

b_57bbccdd3910a.jpg

-Распределяйте слои и векторные точки

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

Видео: http://ivomynttinen.com/content/3-blog/20160818-de...

Таблицы

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

Видео: http://ivomynttinen.com/content/3-blog/20160818-de...

-Организация ячеек и столбцов

Для того, чтобы правила изменения размера работали правильно, все элементы контента, такие как текст, кнопки, ячейки фона и границ, должны быть сгруппированы. Фон клеток, а также текст ячейки должны быть в положении «Изменение размера объекта», а элементы (например, стрелки индикатора сортировки), которые должны быть прижаты к левой или правой границе, должны быть установлены в положение "Pin to corner".

- Уменьшите количество слоев

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

b_57bbcdd1764b6.jpg

- Создание контента

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

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

Видео: http://ivomynttinen.com/content/3-blog/20160818-de...

- Заполните клетки реальными данными вашего API

При работе над дизайном, например, для веб или IOS приложения, которые уже имеют базу данных и API, который обслуживает контент с помощью JSON, Вы можете импортировать реальные данные с помощью панели данных Craft.

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

b_57bbce833e373.jpg

Оригинальный текст: http://ivomynttinen.com/blog/designing-data-with-s...

0
Первые Новые Популярные
Devicerra
Онлайн сервис подбора электроники
Valeriy C
Сибиряки, когда уже версия для win будет? :)
Ответить
Sketchode
Программа для оптимизации взаимодействия между дизайнером и разработчиком.
Гайфуллин Ринат
Начнем с веб-версии. Когда появится, тут же сделаем пост!
Ответить
Выбрать файл
Читайте далее
Загружаем…
Блог проекта
Расскажите историю о создании или развитии проекта, поиске команды, проблемах и решениях
Написать
Личный блог
Продвигайте свои услуги или личный бренд через интересные кейсы и статьи
Написать