гайдлайны всех видов графиков 38 ( чистовой 4.0 ! )

Гайдлайн Brand AnalyticsДиаграммы, графики, инфографика, карты.

Версия 1.0

BRAND ANALYTICS

Оглавление

23567

8910111213141516171819

ШрифтыЦвета, размеры и толщины элементовОтступы, расстоянияОтступы и расстояния в цветовом кодировании и легендахЦветовое кодирование в легендах

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

1

4 767

Пример применения нестандартных размеров цифр на круговой диаграмме ( 43%, 75%, 4767 ):

43 (PT Sans, Regular 12 pt (px)), % (PT Sans, Regular 10 pt (px))

75 (PT Sans, Bold 12 pt (px)), % (PT Sans, Regular 10 pt (px))

4767 (PF Din Text Comp Pro, Thin, 63 pt (px))

Стандартные маленькиетекстовые подписи в легендах 10 pt

Подписи цифрами в легендах 9 pt

Цвет текстов 404040

Шрифты:

Основной массив текстов, цифр: PT Sans

Акциденция PF Din Text Comp Pro (Thin)

В случае документов для выгрузкиили документов, которые могут редактироваться стороннимикомпаниями, PT Sans меняется на Calibri (начертания: лайт, регуляр, болд. см. гайд документа для аналитиков и образец документа для выгрузки из системы.) Позже опишу гайд и по шрифтамв них более детально

75%

43%

2

Негатив Негатив

цвет текста активнойподписи-кнопки

Толщина сетки 0,5 pt (px). Или 1pt(px)и 50% прозрачность от изначальных параметров(не подходит и ненужно для варианта с печатью)

Цветные линии 1pt (px)

Цветные линии для дискретного графика 2pt (px), длинна 17 px, цвет EB6B6A

Диаметр круглой точкина линии графика 4px

Цвет серой заливки в графиках F2F2F2

Толщина пробела между элементами 0,5 pt (px).Или 1pt(px) и 50% прозрачность от изначальных параметров

80px

190px

Размер крупнойкруговой диаграммы

Размер малойкруговой диаграммы

04.10.2015 Публикаций: (PT Sans, Regular, 10 pt, цвет 999999)88 (PT Sans, Bold, 10 pt, цвет 404040)

Цвет заливки рамки - белый (FFFFFF)

Толщина тонкой части линии 0,5 pt (px). Или 1pt(px)и 50% прозрачность от изначальных параметровТолщина толстой части линии 2 pt (px).Цвет толстой и тонкой линии 999999

Диаметр активной (только для WEB)круглой точки 4px

Цвет серых плашек F2F2F2Белые линии 1pt (px)

[ Только WEB ]

[ Только WEB ] [ Только WEB ][ Печать ]

(цвет текста неактивнойподписи-кнопки)

Цвета, размеры и толщины элементов

404040 999999

Диаметр круглой точкиво всех легендах 5px

04.10.2015Публикаций: 88

65px

155px

3

16px

36px

26px

6px

10px

Средний, стандартный вариант: Цвет серых плашек F2F2F2

Более заметный, цветной вариант: Цвет серых плашек FBDF78

Более заметный, темный вариант: Цвет серых плашек E5E5E5

Самый светлый вариант: Цвет серых плашек FAFAFA

Цвет серых плашек D9D9D90,5 pt (px). Или 1pt(px) и 50% прозрачностьот изначальных параметров (не подходити ненужно для варианта с печатью)

Цвет бежевых плашек FBDF78

4

Отступы, расстояния

11.11 12.11 13.11

Количество упоминаний

14.11 15.11 16.11 17.11

150

100

50

0

1,2

1,0

0,8

0,6

0,4

0,2

0

сентябрь

сентябрь

октябрь

октябрь

ноябрь

ноябрь

декабрь

декабрь

январь

январь

февраль

февраль

11 340 18 031 26 132 38 175 24 662 17 085

0,6

0,90,8

1,2 1,1

1,0

1,4

1,2

1,0

0,8

0,6

0,4

0,2

0

45 00M

40 000

35 000

30 000

25 000

20 000

15 000

10 000

5 000

0

45 000

40 000

35 000

30 000

25 000

20 000

15 000

10 000

5 000

011 340 18 031 26 132 38 175 27 543 19 536 21 643 23 742 35 844 22 378 17 532 16 987

21px

21px

5px

5px

5px

5px

5px

5px

5px

сентябрь октябрь ноябрь декабрь январь февраль

0,6

0,90,8

1,2 1,1

1,0


1,4

1,2

1,0

0,8

0,6

0,4

0,2

0

5

Микроблоги

Соцсети

Новости

Блоги

75%

14%

15%

75%

Позитив

Нейтрально

Негатив

75%

14%

15%

23%

57%

14%

16%

75%

15%

14%

Публикаций Негатив Позитив

twitter.com vk.com facebook.com livejornal.com banki.com другие

184px

184px

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

34px 10px

34px 10px

5px

15px

37px

5px

Отступы и расстояния в цветовомкодировании и легендах

6

Цветовое кодирование в легендах

40789e

eb6a6a

27c189

ed901a

878cb9

ffde00

b0ab00

f3a5c8

52d6ff

c9671a

5393c9

687032

ffb500

b14369

b6c76d

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

Последовательность, в которойможно ставить цвета друг за другомДопустимы вариации. Главное, тоновойили симультативный (сильный цветовой)контрасты должны быть.Или и тот, и другой тип контрастамогут быть одновременно

Использовать больше 4 - 5 пунктовв круговой диаграмме не рекомендуется,потому что доли будут плохо читатьсяи их невозможно сравнить. Если элементовбольше 5, то рекомендуется использоватьстолбчатые диаграммы.

1 2

3

4

5

6

7

89

10

11

12

13

14

15

Ссылка

Цвет текста ссылки

0083C6

Общее число Негатив Позитив

5B8ACF FF3F00 A7BA38


9D9D9C

...

25%

CCCCCC AABACF 82A3CF 5F8ECF

50% 75% 100%

!

Толщина пробела между элементами 1 pt (px).

7

11.11 12.11 13.11


14.11 15.11 16.11 17.11

11.11 12.11 13.11


14.11 15.11 16.11 17.11

11.11 12.11 13.11


14.11 15.11 16.11 17.11

51

70 7167

134 129

115


0,6

0,90,8

1,2 1,1

1,0


11.11 12.11 13.11 14.11 15.11 16.11 17.11

Февраль

1 020

925

сентябрь

сентябрь

октябрь

октябрь

ноябрь

ноябрь

декабрь

декабрь

январь

январь

февраль

февраль

11 340 18 031 26 132 38 175 24 662 17 085

0,6

0,90,8

1,2 1,1

1,0

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28


Дизайн графиков без сеткиИдеальный вариант без информационного шума

150

100

50

0

150

100

50

0

150

100

50

0

150

100

50

0

1,4

1,2

1,0

0,8

0,6

0,4

0,2

0

1,4

1,2

1,0

0,8

0,6

0,4

0,2

0

1 200

1 000

800

600

400

200

0

45 000

40 000

35 000

30 000

25 000

20 000

15 000

10 000

5 000

0

8

11.11 12.11 13.11


14.11 15.11 16.11 17.11

11.11 12.11 13.11


14.11 15.11 16.11 17.11

11.11 12.11 13.11


14.11 15.11 16.11 17.11

51

70 7167

134 129

115


0,6

0,90,8

1,2 1,1

1,0


11.11 12.11 13.11 14.11 15.11 16.11 17.11

Февраль

1 020

925

1,2

1,0

0,8

0,6

0,4

0,2

0

сентябрь

сентябрь

октябрь

октябрь

ноябрь

ноябрь

декабрь

декабрь

январь

январь

февраль

февраль

11 340 18 031 26 132 38 175 24 662 17 085

0,6

0,90,8

1,2 1,1

1,0

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28


Дизайн графиков с фоновой сеткойОптимальный вариант с сеткой фоновой активности.Подходит для веба

150

100

50

0

150

100

50

0

150

100

50

0

150

100

50

0

1,4

1,2

1,0

0,8

0,6

0,4

0,2

0

1,4

1,2

1,0

0,8

0,6

0,4

0,2

0

1 200

1 000

800

600

400

200

0

45 000

40 000

35 000

30 000

25 000

20 000

15 000

10 000

5 000

0

9

11.11 12.11 13.11


14.11 15.11 16.11 17.11

11.11 12.11 13.11


14.11 15.11 16.11 17.11

11.11 12.11 13.11


14.11 15.11 16.11 17.11

51

70 7167

134 129

115


0,6

0,90,8

1,2 1,1

1,0

11.11 12.11 13.11 14.11 15.11 16.11 17.11

Февраль

1 020

925

сентябрь

сентябрь

октябрь

октябрь

ноябрь

ноябрь

декабрь

декабрь

январь

январь

февраль

февраль

11 340 18 031 26 132 38 175 24 662 17 085

0,6

0,90,8

1,2 1,1

1,0

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28


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

1 200

1 000

800

600

400

200

0

1,4

1,2

1,0

0,8

0,6

0,4

0,2

0

150

100

50

0

150

100

50

0

150

100

50

0

150

100

50

0


10

4 767

11.11 12.11 13.11


14.11 15.11 16.11 17.11

11.11 12.11 13.11


14.11 15.11 16.11 17.11

11.11 12.11 13.11


14.11 15.11 16.11 17.11

51

70 7167

134 129

115


0,60,90,8

1,2 1,1

1,0

11.11 12.11 13.11 14.11 15.11 16.11 17.11

Февраль

1 020925

сентябрь

сентябрь

октябрь

октябрь

ноябрь

ноябрь

декабрь

декабрь

январь

январь

февраль

февраль

11 340 18 031 26 132 38 175 24 662 17 085

0,6

0,90,8

1,2 1,1

1,0

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28


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

1 400

1 200

1 000

800

600

400

200

0

1,4

1,2

1,0

0,8

0,6

0,4

0,2

0

150

100

50

0

150

100

50

0

150

100

50

0

150

100

50

0


11

4 767

11.11 12.11 13.11


14.11 15.11 16.11 17.11

11.11 12.11 13.11


14.11 15.11 16.11 17.11

11.11 12.11 13.11


14.11 15.11 16.11 17.11

51

70 7167

134 129

115


0,60,90,8

1,2 1,1

1,0

11.11 12.11 13.11 14.11 15.11 16.11 17.11

Февраль

1 020925

сентябрь

сентябрь

октябрь

октябрь

ноябрь

ноябрь

декабрь

декабрь

январь

январь

февраль

февраль

11 340 18 031 26 132 38 175 24 662 17 085

0,6

0,90,8

1,2 1,1

1,0

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28


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

1 400

1 200

1 000

800

600

400

200

0

1,4

1,2

1,0

0,8

0,6

0,4

0,2

0

150

100

50

0

150

100

50

0

150

100

50

0

150

100

50

0

1,4

1,2

1,0

0,8

0,6

0,4

0,2

0

45 000

40 000

35 000

30 000

25 000

20 000

15 000

10 000

5 000

0


12

11.11 12.11 13.11

Публикаций

14.11 15.11 16.11 17.11

Негатив Позитив

11.11 12.11 13.11


14.11 15.11 16.11 17.11


11.11 12.11 13.11


14.11 15.11 16.11 17.11



11.11 12.11 13.11


14.11 15.11 16.11 17.11


11.11 12.11 13.11


14.11 15.11 16.11 17.11


11.11 12.11 13.11


14.11 15.11 16.11 17.11


11.11 12.11 13.11


14.11 15.11 16.11 17.11


11.11 12.11 13.11


14.11 15.11 16.11 17.11



Дизайн графиков с заливкой фонаПример режима с заливкой общего показателя и примерс разноцветной заливкой всех параметров

150

100

50

0

150

100

50

0

150

100

50

0

150

100

50

0

150

100

50

0

150

100

50

0

150

100

50

0

150

100

50

0

13

0 20 40 60 80 100

0 10 20 30 40 50 60 70

ПозитивНегативНейтрально

236 14 57

168 3

516 8 24

648 124 68

148 5 12

0 20 40 60 80 120100

21

Нейтрально Позитив Негатив

0 200 400 600 800 1000 1200

1274 1274

1274 1274

1274 1274

1274 1274

1274 1274

1274 1274

1274 1274

1274 1274

1274 1274

1274 1274

Позитив Негатив


11 340 18 031 26 132 38 175 24 662 17 085

45 000

40 000

35 000

30 000

25 000

20 000

15 000

10 000

5 000

0

1

2

3

4

5

6

7

8

9

10

Москва

Санкт-Петербург

Екатеринбург

Ростов-на-дону

Омск

Новосибирск

Краснодар

Самара

Казань

Другие

twitter.com

vk.com

facebook.com

livejornal.com

banki.com

Жалобы на обслуживание

Жалобы на Телебанк

Рост тарифов на SMS-оповещения

45 000

40 000

35 000

30 000

25 000

20 000

15 000

10 000

5 000

011 340 18 031 26 132 38 175 27 543 19 536 21 643 23 742 35 844 22 378 17 532 16 987

57

26

18

0 20 40 60 80 120100

twitter.com

vk.com

facebook.com

livejornal.com

banki.com

236 14 57

168 3

516 8 24

648 12468

148 5 12

0 20 40 60 80 120100

21


twitter.com

vk.com

facebook.com

livejornal.com

banki.com

Тридцать символов, это вот

Тридцать символов, это...

Тридцать символов

Тридцать символо...

0 20 40 60 80 120100


twitter.com

vk.com

facebook.com

livejornal.com

banki.com

31 18 19

10 5 36

21 7 17

62 20 25

23614

57

3

5168

24

648124

68

512

21

168

148

236

168

516

648

148

Дизайн гистограмм без сеткиИдеальный вариант без информационного шума

14

0 20 40 60 80 100

0 10 20 30 40 50 60 70


236 14 57

168 3

516 8 24

648 124 68

148 5 12

0 20 40 60 80 120100

21


0 200 400 600 800 1000 1200

1274 1274

1274 1274

1274 1274

1274 1274

1274 1274

1274 1274

1274 1274

1274 1274

1274 1274

1274 1274



11 340 18 031 26 132 38 175 24 662 17 085

45 000

40 000

35 000

30 000

25 000

20 000

15 000

10 000

5 000

0

1

2

3

4

5

6

7

8

9

10

Москва




Омск


Краснодар

Самара

Казань

Другие

twitter.com

vk.com

facebook.com

livejornal.com

banki.com




45 000

40 000

35 000

30 000

25 000

20 000

15 000

10 000

5 000

011 340 18 031 26 132 38 175 27 543 19 536 21 643 23 742 35 844 22 378 17 532 16 987

57

26

18

0 20 40 60 80 120100

twitter.com

vk.com

facebook.com

livejornal.com

banki.com

236 14 57

168 3

516 8 24

648 12468

148 5 12

0 20 40 60 80 120100

21


twitter.com

vk.com

facebook.com

livejornal.com

banki.com





0 20 40 60 80 120100


twitter.com

vk.com

facebook.com

livejornal.com

banki.com

31 18 19

10 5 36

21 7 17

62 20 25

23614

57

3

5168

24

648124

68

512

21

168

148

236

168

516

648

148

Дизайн гистограмм с фоновой сеткойОптимальный вариант с сеткой фоновой активности.Подходит для веба

15


236 14 57

168 3

516 8 24

648 124 68

148 5 12

0 20 40 60 80 120100

21


0 200 400 600 800 1000 1200

1274 1274

1274 1274

1274 1274

1274 1274

1274 1274

1274 1274

1274 1274

1274 1274

1274 1274

1274 1274



11 340 18 031 26 132 38 175 24 662 17 085

45 000

40 000

35 000

30 000

25 000

20 000

15 000

10 000

5 000

0

1

2

3

4

5

6

7

8

9

10

Москва




Омск


Краснодар

Самара

Казань

Другие

twitter.com

vk.com

facebook.com

livejornal.com

banki.com




45 000

40 000

35 000

30 000

25 000

20 000

15 000

10 000

5 000

011 340 18 031 26 132 38 175 27 543 19 536 21 643 23 742 35 844 22 378 17 532 16 987

57

26

18

0 20 40 60 80 120100

twitter.com

vk.com

facebook.com

livejornal.com

banki.com

236 14 57

168 3

516 8 24

648 12468

148 5 12

0 20 40 60 80 120100

21


twitter.com

vk.com

facebook.com

livejornal.com

banki.com





0 20 40 60 80 120100


twitter.com

vk.com

facebook.com

livejornal.com

banki.com

31 18 19

10 5 36

21 7 17

62 20 25

23614

57

3

5168

24

648124

68

512

21

168

148

236

168

516

648

148

0 20 40 60 80 100

0 10 20 30 40 50 60 70

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

16

0 20 40 60 80 100


236 14 57

168 3

516 8 24

648 124 68

148 5 12

21


0 10 20 30 40 50 60 70

0 200 400 600 800 1000 1200 1400

1274 1274

1274 1274

1274 1274

1274 1274

1274 1274

1274 1274

1274 1274

1274 1274

1274 1274

1274 1274



11 340 18 031 26 132 38 175 24 662 17 085

45 000

40 000

35 000

30 000

25 000

20 000

15 000

10 000

5 000

0

1

2

3

4

5

6

7

8

9

10

Москва




Омск


Краснодар

Самара

Казань

Другие

twitter.com

vk.com

facebook.com

livejornal.com

banki.com




45 000

40 000

35 000

30 000

25 000

20 000

15 000

10 000

5 000

011 340 18 031 26 132 38 175 27 543 19 536 21 643 23 742 35 844 22 378 17 532 16 987

57

26

18

0 20 40 60 80 140120100

0 20 40 60 80 140120100

0 20 40 60 80 140120100

0 20 40 60 80 140120100

twitter.com

vk.com

facebook.com

livejornal.com

banki.com

236 14 57

168 3

516 8 24

648 12468

148 5 12

21


twitter.com

vk.com

facebook.com

livejornal.com

banki.com






twitter.com

vk.com

facebook.com

livejornal.com

banki.com

31 18 19

10 5 36

21 7 17

62 20 25

23614

57

3

5168

24

648124

68

512

21

168

148

236

168

516

648

148

Дизайн гистограммс чередующимися серыми плашками.Такой вариант использовать нельзя!

17

43%

43%

16%

43%


13,8 % 11,7 %

13,8 % 11,7 %

13,8 % 11,7 %

13,8 % 11,7 %


13,8 % 11,7 %

13,8 % 11,7 %


13,8 % 11,7 % 13,8 % 11,7 %

13,8 % 11,7 %


19%

37%

43%

23%

57%

14%

16%

75%

15%

14%



Тридцать символов, эт


Микроблоги

Соцсети

Новости

Блоги

75%

14%

15%

75%

Позитив


Негатив

75%

14%

15%

Позитив


Негатив

Дизайн круговых диаграмм

Круговые диаграммы с легендой стоит использовать в крайних случаях.Допустимо использование круговой диаграммы с 2 - 4 значениями.

Такой вариант спидометра использовать нельзя

!

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

43%

43%

43%16%

7% 5%

43%

Twitter.com

Facebook.com

Vk.com

Livejournal.com

Instagram.com

Plus.google

Nsn.fm

Другие

Такой вариантиспользоватьнельзя

!

Использовать больше 4 - 5 пунктовв круговой диаграмме нельзя,потому что доли будут плохо читатьсяи их невозможно сравнить. Если элементовбольше 5, то рекомендуется использоватьстолбчатые диаграммы.

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

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

Итоговый вывод: визуализация полностьютеряет смысл и функциональное назначение. Визуализация не выполняет свою функциюи только усложняет задачу пользователю.

Использовать больше 4 - 5 пунктовв круговой диаграмме нельзя,потому что доли будут плохо читатьсяи их невозможно сравнить.Меньше 4 - 5 использоватьможно, но нежелательно.Лучше использовать толбчатуюдиаграмму без цветовогокодирования

!

18

25% 50% 75% 100%






39

49

47

50

56






39

49

47

50

56






39

49

47

50

56






39

49

47

50

56






39

49

47

50

56






39

49

47

50

56

Дизайн «невидимых» гистограмм

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

Пример визуализации на карте,на уровне стран / регионов

Так же показано легенда к карте под ней

19

гайдлайны всех видов графиков 38 ( чистовой 4.0 ! )

Data & Analytics