Каким должен быть дизайн таблиц

Каким должен быть дизайн таблиц

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

Таблицы в интернете

Недавно нам попалась статья Мэтью Стрёма о дизайне таблиц данных. В ней он рассуждает о том, как правильно оформлять таблицы для представления информации в интернете. Некоторые советы, на наш взгляд, обязательны к применению.

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

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

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

Начните с выравнивания

Выравнивание простого текста или данных в таблице сразу бросается в глаза. Часто рядовой пользователь ставит выравнивание по своему вкусу: кто-то всегда и все выравнивает по центру, кто-то - по левому краю, а кто-то просто по ширине. Между тем существуют четкие правила “хорошего тона”, выработанные на основе наилучшего восприятия информации:

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

Метки помогут сократить объем данных

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

Не забывайте про название

Таблица - это вполне самостоятельный элемент, который должен иметь название, причем короткое, но емкое. Пользователь не должен догадываться по контексту, какие данные вы хотите ему предоставить, это должно быть понятно из названия. Кроме того, таблица легко может быть вырвана из контекста. На нее могут ссылаться из других источников, да и вы сами еще не раз можете к ней вернуться и использовать в других материалах или презентациях. Хорошее название таблицы избавит вас от необходимости писать дополнительные пояснения.

Границы и фон

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

Не увлекайтесь раскрашиванием ячеек таблицы в разные цвета, использование фона оправдано только тогда, когда необходимо показать разницу в областях, например, отделить единичные значения от суммарных. Не используйте большую цветовую палитру. Таблицы должны быть монохромными, иначе у пользователей могут возникнуть резонные вопросы: “Что обозначает это разделение и стоит ли обращать на него внимание?” Кроме того, если вашу таблицу решат распечатать в ЧБ, вся ваша цветосемантика пропадет.

Вместо итога

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

Наша статья вам помогла? Поддержите нас лайком!

Другие записи

Разработка сервиса по печати на воздушных шарах

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

Как эффективно управлять работой фрилансеров

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

Стоит ли обращаться к фрилансерам?

Если ещё лет 5 назад штат среднего рекламного агентства состоял из нескольких десятков специалистов, то сейчас агентство вполне может состоять из 5 человек, один из которых Генеральный директор. Тем не менее, даже такое маленькое агентство может выполнять крупные заказы, если имеет обширную сеть фрилансеров.

Контакты

  • Телефон:
    +7 (812) 425-64-08
  • Наш адрес:
    Санкт-Петербург, Громова 4, оф. 371, 373
  • Email
    info@pugofka.com
  • Добавляйтесь в друзья
Скачать презентацию