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

10 советов по эскизам для красивых и удобных графиков (предупреждение GIF!)

Смотреть все эти графики на изображении выше? Получить их здесь или прочитать о них здесь:

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

Но я отвлекся.

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

Сегодня мы говорим о разработке диаграмм так, чтобы на них было приятно смотреть, а главное, легко обслуживать. Грязные диаграммы - это всеобщее обозрение, и никто не хочет, чтобы визуализации выглядели так, как будто они были сделаны в PowerPoint примерно в 1995 году ... или, как я это называю, «в старые добрые времена».

Отныне есть некоторые ProTips ™, которые я придумал после разработки тысячи графиков.

1. Используйте стили для осей диаграммы и линий сетки

Если вы работаете над продуктом с кучей графиков, вы пойдете сами, если клиент решит, что ему нужны пунктирные линии сетки вместо сплошных. D'о. Теперь я должен найти все это.

Нет, если они стили! Проверьте это:

Это просто показывает основную ось. Стили также отлично подходят для линий сетки (они слишком блеклые, чтобы их можно было увидеть в GIF).

Я должен отметить, что в GIF есть небольшое отставание, потому что он меняет стиль основной оси для 60+ различных диаграмм одним махом. Стили лучшие

2. Символизировать точки данных

Следуя нашей теме обновления большого количества графиков одновременно, символизация точек данных сэкономит вам примерно девятнадцать с половиной лет, потраченных на ⌘-щелчок маленьких кружочков на ваших художественных досках. Установите символ и используйте его всякий раз, когда вам нужна точка данных. Если в будущем вы решите, что хотите, чтобы он был сплошным, а не пустым, просто измените базовый символ. Это так легко, даже бабушка могла это сделать!

Tiny ProTip: не делайте ваши точки данных кругами. Сделайте их квадраты со 100% закругленными углами (радиус). Это просто делает это намного проще, если вы решите вернуться на круги своя!

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

Если у вас есть 10 точек данных на линейном графике, используйте плагин, такой как RenameIt, чтобы изменить имя слоя для всех из них на «Точка данных». Я даже не могу сказать вам, сколько времени это спасет вас.

Вот посмотрите на одну из моих групп слоев диаграммы, чтобы вы могли увидеть названия слоев:

Если мне когда-либо понадобится изменить длину или положение всех «горизонтальных линий сетки», я просто выполню поиск слоя для… вы поймете… «горизонтальную линию сетки»! Затем я могу Shift + клик вверху и внизу списка, чтобы выбрать все линии сетки на моих артбордах и изменить их длину / позицию. Эти мелочи складываются, я обещаю.

4. Группируйте точки данных по меткам их осей.

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

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

5. Группируйте линии и точки данных для удобного перемещения

Говоря о группировке (нет, не нащупывая), если вы делаете линейные графики с точками данных, группируйте их вместе, чтобы вы могли быстро перемещать и обновлять их вместе. Кажется тривиальным, но я видел десятки бесплатных загрузок чартов с линиями и точками данных, которые просто волей-неволей сидели на артборде, как потерянные щенки в парке без поводков.

6. Используйте горизонтальное / вертикальное распределение для равномерно распределенных точек данных.

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

Выберите линию, для которой вы хотите равномерно расположенные вершины, нажмите «Изменить» на панели инструментов (или нажмите «Ввод» на клавиатуре), выберите все точки с помощью ⌘ + A, затем щелкните горизонтальное действие распределения в верхней части правой панели. Тада! Все ваши вершины теперь идеально разнесены и выровнены по соответствующим меткам оси X (убедитесь, что они распределены по горизонтали, используя один и тот же метод).

на

7. Назначьте каждому объекту правило изменения размера

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

По умолчанию Sketch устанавливает для каждого объекта значение Stretch, но это приведет к некоторым неприятным последствиям для вашей диаграммы, если вы попытаетесь изменить размеры прямо из ворот.

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

  • Крайние объекты должны быть прикреплены к краю. Это включает в себя всю ось Y, самую левую и правую метки оси X, а также две самые левые и правые точки данных, если вы строите линейный график. Это гарантирует, что края остаются фиксированными, в то время как все остальное внутри изменяет размеры и плавает.
  • Любые данные в средней части графика, скорее всего, должны быть перемещены на место. Это обеспечит сохранение относительных расстояний до окружающих точек данных и защитит их от растяжения / искажения.
  • Линии сетки должны быть установлены на Resize Object или Stretch. Я не могу сформулировать почему, но лично я предпочитаю Resize Object.
Смотри, мама! Никаких искажений! Вставьте Chart Wizard ™ в свой профиль Tinder.

8. Масштабируйте диаграммы, используя ⌘K, чтобы поддерживать пропорции

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

В случае, если вы просто хотите уменьшить диаграмму, лучше использовать ⌘ + K, чтобы изменить ее размер, вместо того, чтобы выбирать диаграмму и изменять ее размер из угла, чтобы превратить захватывающие вещи (как бы они ни назывались ...). Это обеспечит масштабирование всего, включая текст. Смотри ниже:

9. Установите точки данных в «зеркало» для кривых гладких линий

Как они делают такие гладкие, ровные изгибы ?! - Я, три месяца назад

Вместо того, чтобы бороться с инструментом пера, чтобы нарисовать гладкую, равномерно распределенную кривую, я считаю, что проще всего рисовать мои вершины с помощью зеркальных ручек. Посмотрите GIF ниже и обратите внимание, что я нажимаю и удерживаю Shift, а перетаскиваю ручку вершины. Сохранение ручки в горизонтальном положении сделает переходы между вершинами красивыми и маслянистыми. После размещения вершины и открытия маркеров отпустите Shift, затем перетащите вашу следующую вершину, удерживая Shift снова.

10. Используйте метод «каракули», чтобы быстро создать точечный график

Это мой самый любимый, и я только что открыл этот метод неделю назад.

Примечание. Если вы пытаетесь визуализировать реальные данные в макетах, этот метод вам не поможет.

Я работал над созданием графика рассеяния и очень устал от дублирования точек данных и их перетаскивания, чтобы сформировать «разброс». Однако, если вы просто хотите создать диаграмму, которая выглядит как точечная диаграмма, чтобы дать dev что-то для ссылки, этот метод был создан для вас.

Хорошо, иди, возьми Pencil Tool в Sketch. Просто нажмите букву «P» на клавиатуре.

Что, черт возьми, Pencil Tool ?! Я даже не знал, что это существует. Я понятия не имею, когда или почему я бы использовал что-то подобное. - Я, на прошлой неделе

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

Хорошо, вот гениальная часть: дайте вашей линии границу, а затем установите суперширок в настройках границы. Boom. Мгновенный разброс сюжета. Вы похожи на диаграммы Майкла Фелпса, если он занялся наукой о данных вместо плавания. Своевременная олимпийская справка. Хотдог!

Убирайся отсюда, Клиппи! Нет, мне не нужна ваша помощь в создании точечных графиков!

Если этот маленький трюк с Скетчем - это все, что мне запомнилось, когда я пыль на ветру, я умру счастливым человеком.

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

Люблю тебя, люди. Счастливого зарисовки!