Закрыть
E-mail:
Пароль:
Забыли пароль?
В каталоге проекта: 12 533 веб-студии, 944 CMS, 226 406 сайтов.
РегистрацияCMS MagazineВход
CMS Magazine CMS Magazine

Меньше значит больше, или как красиво и наглядно оформить данные

Советы по визуализации данных с примерами и видео-инструкциями.

Работая над оформлением и визуализацией данных (таблиц, графиков, диаграмм и т.п.), главное — не перестараться. В противном случае информация будет восприниматься с трудом. Анимированные GIF-иллюстрации Джоуи Чердачака (Joey Cherdarchuk) об упрощении и преображении таблицы и столбчатой диаграммы вдохновили нас на перевод их на русский язык.

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

Меньше значит больше

Именно такой подход к оформлению данных (и не только) позволит достичь максимальной наглядности и простоты восприятия.

Чем меньше стилей и эффектов вы используете, тем большую информативную ценность получает конечный продукт.

Перейдем к примерам.

Необходим сайт, мобильное приложение, услуги по SEO или контекстной рекламе? Тендерная площадка WORKSPACE поможет выбрать оптимального исполнителя. База проекта насчитывает более 10 500 агентств. Сервис работает БЕСПЛАТНО как для заказчиков, так и для исполнителей.

Брюки превращаются...



Оригинал: https://www.darkhorseanalytics.com/portfolio/2016/1/7/data-looks-better-naked-clear-off-the-table

Что мы видим вначале? Цветную картинку: яркий фон, границы и жирный шрифт отвлекают от цифр и самой сути представленных данных. Но стоит лишь отказаться от заливки и цвета как таблица сразу же преображается. Ошибкой здесь было и использование шрифта Calibri (об этом дальше).


 

Пример верстки таблицы

See the Pen YGAWXX by olga (@olga-abanova) on CodePen.


 

Видео-инструкция по редактированию таблицы в Google Docs

 

Еще один пример с преображением данных — столбчатые диаграммы.



Оригинал: http://www.darkhorseanalytics.com/portfolio/data-looks-better-naked-bar-charts

Здесь принцип «меньше значит больше» сработал на все 100%. Отказавшись от всех эффектов, уменьшив количество цветов и подписей, мы получили простую и легко считываемую диаграмму. Жирный шрифт не придавал акцента заголовкам, а лишь увеличивал общую массу эффектов.


 

Видео-инструкция по оформлению столбчатой диаграммы в MS Excel

 

В заключение, несколько общих советов по оформлению данных:

  1. Избегайте дополнительных эффектов: теней, объема, 3D и т. п.

  2. Не используйте цвет и жирный шрифт без необходимости. Акцент следует делать на каком-то определенном элементе, который действительно имеет информативную ценность.

  3. Отдайте предпочтение зрительным отступам вместо линий границ.

  4. В таблицах следите за выравниванием: текст — по левому краю, цифры — по правому.

  5. Ширину столбцов устанавливайте по их содержимому, а не заголовкам.

  6. Используйте только безопасные шрифты, которые по умолчанию установлены на операционных системах. Например, шрифт Calibri (в примере с таблицей) является встроенным на Windows, но у пользователя на Mac возникнут проблемы при просмотре документа из-за отсутствия этого шрифта.

    Список безопасных шрифтов на Windows, Mac и большинства Unix/Linux систем:

    Arial
    Arial Black
    Comic Sans MS
    Courier New
    Georgia
    Impact
    Times New Roman
    Trebuchet MS
    Verdana

  7. Сократите количество подписей.

Удачных вам визуализаций!

Перевод GIF-иллюcтраций: Екатерина Заволокина

Автор: Ольга Абанова, CMS Magazine (Специалист по дизайну и верстке)


CMS Magazine CMS Magazine
RSS-подписка
CMS Magazine CMS Magazine
CMS Magazine