Дизайн таблиц для чайников / Хабр
Привет, Хабр!
Меня зовут Костя, и я отвечаю за дизайн в AGIMA. Недавно, рассказывая коллеге, как надо было оформить таблицу, я словил дежавю: делал я это явно не первый раз. Поэтому я решил написать эту совсем базовую статью о том, как делать приличные таблицы, чтобы у меня всегда было куда послать следующего спрашивающего. Статья будет полезна как начинающим дизайнерам, так и просто жаждущим приподнять уровень своих документов чуть выше плинтуса. А в конце ссылки, которые помогут вам достичь табличного совершенства.
Таблица — это эргономика
Типичная таблица состоит из:
Когда вы создаете таблицу в каком-нибудь Excel или, как я в примере, в Numbers, в шаблоне уже эти области задаются сразу раскрашенными в разные цвета. Это сделано для того, чтобы глазу было легче найти и идентифицировать каждый блок.
Видите? Дизайнеры приложения уже немного о нас позаботились =)Таблица создается ради данных, и часто этих данных очень много.
Суть дизайна таблиц состоит в том, чтобы помочь глазу сориентироваться среди кучи цифр/букв/строчек/столбцов. Поэтому все приемы и принципы, описанные ниже, не касаются эстетики, а касаются только эргономики.
Есть общее правило: чем больше визуального шума, тем тяжелее глазу через него прорваться и тем труднее мозгу выделить в шуме необходимую информацию. Поэтому базовая стратегия дизайнеров — убрать весь шум:
Ничего лишнего: чистые данные!Может показаться, что стало хуже. Вам не показалось! Но это временно. Сейчас все поправим парой надежных приемов. Но сначала:
Используйте моноширинный шрифт для цифр
«Моноширинный» значит, что у символов одинаковая ширина.
Посмотрите на картинку: слева кажется, что параметр А имеет меньшее значение, чем параметр Б. Но по факту он в ~100 раз больше. Просто ширина цифр разная и, если не считать разряды, создается ложное впечатление.
Внимательно выбирайте шрифт для цифр.
Лучше использовать в таблицах моноширинные шрифты. Например, Courrier, который есть на любом компьютере (кажется). Или любой шрифт, в названии которого есть mono — например, бесплатный PT Mono от Paratype.
У таких шрифтов часто есть еще бонус: вы не перепутаете букву О и цифру 0, потому что в таких шрифтах ноль перечеркнут.
Можно, в принципе, использовать и шрифт типа Arial — у него ширина цифр хоть и не одинаковая, но разница между 1 и 0 всё же не такая кардинальная. (Но будьте бдительны всё равно.)
Числа выравниваем вправо
Числа надо выравнивать или по правому краю, или по запятой. Десятки должны стоять под десятками, тысячи под тысячами. Так вы поможете глазу быстрее считать разрядность, а значит, ваш пользователь быстрее считает разницу и получит информацию. И не будет обманут плохим дизайном. Это особенно важно, когда в таблице нужно сравнивать равные данные.
Текст выравниваем влево
Текст лучше выравнивать по левому краю. Тогда он образует ровный бортик через всю таблицу, по которому глаз легко скользит.
И можно отказаться от вертикальных линий в таблице: ровный край текста сформирует столбец, по которому глаз будет свободно перемещаться, не теряясь и не путаясь.
Строки нужны
Со строками такой фокус, как со столбцами, получается редко. Поэтому надо помочь глазу удерживать линию. Есть 2 работающих приема:
линии;
чересполосица.
Я предпочитаю линии: они менее «назойливые», но иногда чересполосица выглядит лучше чисто эстетически.
Что бы вы ни выбрали, важно подобрать такой цвет и яркость, чтобы они не мешали воспринимать данные, не «шумели». Но были достаточно заметны, чтобы помогать глазу бежать по строке:
Не растягивайте таблицу
Расстояние между данными: старайтесь сделать так, чтобы не было больших дырок ни вертикально, ни горизонтально. Дырки мешают глазу сравнивать и группировать информацию.
Поэтому если их нельзя избежать, то можно попробовать уменьшить расстояния. Например:
Надо помочь глазу однозначно отделить данные от названий. Есть несколько приемов:
Я обычно уменьшаю размер на 3–4 пункта и делаю его капсом.
Главное, что нужно помнить: в таблицу смотрят ради данных. Поэтому названия столбцов — это не заголовок текста! Обычно они должны выглядеть менее важно, чем данные. Поэтому увеличивать шрифт, делать жирным, ставить акцентные цвета нужно, только если вы уверены в том, что делаете.
И не надо вписывать поэмы в названия столбцов. Постарайтесь сделать их лаконичными. Можно попробовать использовать зауженную версию шрифта.
Можно объединить несколько столбцов под одной шапкой. Или как-то еще включить креатив — не в ущерб информативности, конечно.
Never stop learning
Если вы вошли во вкус и хотите достичь табличного совершенства (а таблица, которая у нас тут получилась, пока далека от совершенства), то вот вам информация, где прокачаться:
На фундаметнальном курсе от Игоря Штанга.
И не останавливайтесь на таблицах, Игорь давно ведет полезный блог. Там есть и про таблицы: раз два.
На «Медиум» есть крутой цикл статей про работу с интерактивными таблицами, где разобрано много частных случаев.
Илья Бирман в своем блоге периодически делает классные заметки.
А ещё, в нашем телеграм-канале AGIMA.design пробегала ссылка на перевод книги Эдварда Тафти Envisioning Information. Эта книга, которую должен прочитать каждый, кто имеет дело с данными. Один из читателей канала оставил альтернативную ссылку (но я ее не проверял). Это не совсем про таблицы, зато про совершенство.
работа, отдых, личные финансы и не только
Идеи
Для управления проектами, учета продаж, личных финансов, отдыха и здоровья
Предустановленные шаблоны Google Sheets Дополнение Template Gallery for Sheets Для здоровья Для дома Для отдыха Для планирования времени Для учёта личных финансов Для бизнес-финансов Для учёта продаж Для управления проектом
Мы в Telegram
В канале «Маркетинговые щи» только самое полезное: подборки, инструкции, кейсы.
Не всегда на серьёзных щах — шуточки тоже шутим =)
Подписаться
Станьте email-рокером 🤘
Пройдите бесплатный курс и запустите свою первую рассылку
Подробнее
Таблицы Google Sheets помогают структурировать информацию, создавать списки и графики, делать вычисления по сложным формулам, вести учёт финансов и дел. Документами можно делиться или интегрировать их со сторонними приложениями.
Но создание сложной таблицы с нуля требует времени и навыков. Чтобы делать это быстрее, можно воспользоваться шаблонами. Рассказываю, где найти примеры таблиц, и делюсь готовыми шаблонами, найденными в сети.
Чтобы использовать готовый шаблон, кликните по ссылке. Потом выберите «Файл → Создать копию», укажите название и папку для сохранения. Нажмите «Скопировать» — копия документа откроется в новом окне. Дальше вы можете редактировать таблицу по своему усмотрению.
Предустановленные шаблоны Google Sheets
В Google Sheets есть собственная галерея шаблонов.
Они поделены на несколько категорий: личное, работа, управление проектами и образование. Любую таблицу можно использовать по принципу «как есть», а можно отредактировать.
Чтобы использовать готовые таблицы Google Sheets, войдите в свой Google аккаунт и перейдите в галерею шаблонов Google Sheets. Также открыть галерею можно с главной страницы сервиса.
Дополнение Template Gallery for Sheets
Ещё одним источником шаблонов может стать дополнение Template Gallery for Sheets. Его можно установить в качестве надстройки к Таблицам из Google Workspace Marketplace. Чтобы это сделать:
- Создайте новую таблицу (можно ввести в поисковую строку браузера команду «sheet.new»).
- Перейдите в «Расширения → Дополнения → Установить дополнения».
- В поисковой строке открывшегося окна укажите Template Gallery for Sheets.
- Кликните на нужное приложение в результатах выдачи.
- После перехода на страницу приложения нажмите «Установить».
- Разрешите установку, выберите аккаунт и дождитесь завершения процесса.
Чтобы использовать дополнение, перейдите по пути «Расширения → Template Gallery for Sheets → Browse Templates». Когда откроется всплывающее окно, вы увидите перечень из категорий таблиц. Здесь есть шаблоны для большинства популярных задач: письма и резюме, бизнес, календари, дом и семья, личные финансы и т.д.
Выберите нужный шаблон, кликнув по нему. Затем нажмите «Скопировать в Гугл Диск» (Copy to Google Drive) и «Открыть файл» (Open File). Готово, можно использовать таблицу.
Любую таблицу из галереи шаблонов Google Sheets или из библиотеки Template Gallery for Sheets вы можете изменять по своему усмотрению — редактировать текст и поля, добавлять дополнительные строки. Но если не хотите тратить на это время, просто используйте готовые шаблоны. В сети можно найти самые разные таблицы, которые авторы выкладывают в общий доступ. Вот несколько таких шаблонов, отсортированных по категориям.
Для здоровья
Отслеживание веса и параметров тела
Перейти к шаблону
Таблица поможет следить за изменениями веса и параметров фигуры с течением времени. Здесь же можно указывать тип тренировки и затраченное на неё время. После внесения данных сервис автоматически посчитает уровень прогресса в весе и объёмах.
Силовые тренировки
Перейти к шаблону
С этой таблицей удобно задавать расписание тренировок, указывать вес, который используется в упражнениях, делать заметки о самочувствии и контролировать прогресс. Можно открыть доступ тренеру или другу, чтобы получать комментарии. Также эту таблицу удобно применять для группового использования. Второй лист позволяет отслеживать прогресс сразу нескольких людей.
Для дома
Работа по дому
Перейти к шаблону
Таблица помогает распределить обязанности по дому между членами семьи. Здесь можно указать, кто, что и когда делает. Удобный инструмент для родителей, которые хотят приучить детей к домашним обязанностями и используют для этого какую-то мотивацию.
В отдельном столбце можно указать размер вознаграждения за каждое дело и суммировать результаты по итогам недели.
Дежурство по дому
Перейти к шаблону
Простой способ распланировать обязанности домочадцев. Укажите дела, которые нужно сделать, и впишите имена тех, кто должен выполнить работу. Таблицу можно распечатать и повесить на видное место.
Коммунальные платежи
Перейти к шаблону
Таблица поможет рассчитать сумму оплаты за коммунальные услуги — водоснабжение, электричество, газ. Здесь нужно указать тарифы, показания счётчиков (фактические) и расход. Сумма платежа будет рассчитана автоматически. Шаблон также можно использовать для отслеживания расходов в динамике.
Для отдыха
Бюджет путешествия
Перейти к шаблону
С этой таблицей вы можете рассчитать затраты на путешествие, учесть основные расходы и сравнить их с запланированным бюджетом. Визуализация данных в виде диаграммы помогает понять, какая статья расходов лидирует.
Планирование путешествия
Перейти к шаблону
Таблица пригодится, чтобы составить расписание путешествия по нескольким местам. Можно указать города, время отправления и прибытия, отметить виды транспорта и подсчитать общие временные затраты.
Планирование вечеринок
Перейти к шаблону
Таблица поможет составить список гостей, приглашённых на мероприятие. Здесь же можно указать контакты для связи и расходы, а в отдельном столбце — проставлять отметку о подтверждении визита.
Столбик «Закупаемые продукты» и дополнительный лист «Список покупок» пригодятся, если вы планируете совместную организацию, и гости тоже участвуют в подготовке. Можно указать, кто какую сумму потратит и кто что должен купить.
Для планирования времени
Список дел
Перейти к шаблону
Альтернативой специализированным таск-менеджерам может стать эта таблица. Составьте список задач, укажите текущий статус, приоритет и дату исполнения. Дополнительно можно добавить поясняющие комментарии.
Также здесь удобно указывать исполнителя при командной работе. Выполненные задачи можно просто удалять или менять их статус.
Ежедневник
Перейти к шаблону
Удобная таблица для планирования графика. Можно расписать по времени все запланированные события, добавить заметки, напоминания, нужные контакты и планы на день. После копирования таблицы вы легко можете изменить даты и другие данные.
Для учёта личных финансов
Личный месячный бюджет
Перейти к шаблону
Рассчитывайте свой личный бюджет, указывая доходы и расходы. Сводная таблица покажет результаты в ожидаемом и реальном вариантах. Вы можете наглядно увидеть, насколько укладываетесь в бюджет или превышаете свои возможности.
Семейный бюджет
Перейти к шаблону
С помощью таблицы можно фиксировать расходы на ведение домашнего хозяйства и разные семейные траты. После внесения всех доходов и расходов вы увидите, сколько денег остаётся или какой суммы не хватает.
Калькулятор сбережений
Перейти к шаблону
Если вы инвестируете деньги и хотите узнать, какую сумму накопите к 60 годам, используйте эту таблицу.
Укажите параметры накоплений — сумму, которую откладываете, и годовую доходность. Также добавьте свой возраст и количество лет инвестирования. Таблица поможет рассчитать, какую сумму вы накопите и каким будет дополнительный доход.
Для бизнес-финансов
Счёт-фактура
Перейти к шаблону
Создайте счёт-фактуру, просто заполнив поля нужными данными. Документ можно персонализировать, изменив визуальное оформление и используя фирменные цвета компании. При необходимости счёт-фактуру легко распечатать.
Годовой бизнес-бюджет
Перейти к шаблону
Шаблон включает несколько таблиц — настройка, доходы, расходы, сводка. Для каждого листа предусмотрено несколько категорий. Вы можете указать все планируемые поступления и затраты, а затем перейти к листу «Сводка» (Summary). Сервис посчитает разницу доходов и расходов и отобразит получившийся баланс. При редактировании исходных данных подсчёты автоматически изменятся.
Финансовая отчётность
Перейти к шаблону
Ещё один объёмный шаблон, при помощи которого можно отслеживать прибыль и убытки.
Во вкладке «Прибыли и убытки» (Profit@Loss) данные автоматически обрабатываются и отображается итоговый результат. Для небольшого бизнеса такая таблица может стать альтернативой бухгалтерским программам.
Отчёт о расходах
Перейти к шаблону
Готовая форма, которую сотрудники могут использовать при подаче отчёта о расходах. При необходимости в неё можно добавить дополнительные поля для категорий затрат.
Для учёта продаж
CRM
Перейти к шаблону
Для малого бизнеса аналогом профессиональной CRM может стать такой шаблон. Он объединяет несколько вкладок для учёта клиентов и продаж. Данные сохраняются автоматически. Можно открыть доступ всем ответственным сотрудникам. Дашборды генерируются автоматически и визуализируют данные.
Панель управления продажами
Перейти к шаблону
В таблице предусмотрена возможность удобного управления продажами, доходами и клиентами. После ввода данных информация структурируется и отображается на главной странице в виде наглядных графиков и диаграмм.
Вкладка «Инструкции» (Instructions) помогает разобраться с правильным заполнением таблицы.
Для управления проектом
График проекта
Перейти к шаблону
Таблица позволяет хронологически отобразить основные этапы проекта. Можно поделить большой объём работы на мелкие части, чтобы упростить планирование и сроки выполнения конкретных задач.
Отслеживание проекта
Перейти к шаблону
Укажите задачи для выполнения, определите их статус, категорию и срок исполнения, пропишите приоритеты, отслеживайте процент готовности. Такой подход поможет ничего не упустить в процессе реализации проекта.
Дорожная карта продукта
Перейти к шаблону
При создании нового продукта важно отслеживать промежуточные результаты, чтобы понять уровень прогресса и определить следующие шаги. Эта таблица позволяет создать дорожную карту и фиксировать основные события, касающиеся разработки продукта.
График смены сотрудников
Перейти к шаблону
Когда рабочий график сотрудников не нормирован и люди получают оплату в зависимости от отработанных часов, сложно считать итоговую зарплату.
Задача этой таблицы — упростить контроль графика работы и подсчёта выплат.
Поделиться
СВЕЖИЕ СТАТЬИ
Другие материалы из этой рубрики
Не пропускайте новые статьи
Подписывайтесь на соцсети
Делимся новостями и свежими статьями, рассказываем о новинках сервиса
«Честно» — авторская рассылка от редакции Unisender
Искренние письма о работе и жизни. Свежие статьи из блога. Эксклюзивные кейсы и интервью с экспертами диджитала.
Наш юрист будет ругаться, если вы не примете 🙁
Как запустить email-маркетинг с нуля?
В бесплатном курсе «Rock-email» мы за 15 писем расскажем, как настроить email-маркетинг в компании.
*Вместе с курсом вы будете получать рассылку блога Unisender
Оставляя свой email, я принимаю Политику конфиденциальностиНаш юрист будет ругаться, если вы не примете 🙁
Искусство красивого стола
Дом Книги Искусство красивого стола
$32,95
Журнал Victoria долгое время служил сокровищницей благодатной жизни, предлагая бесконечное вдохновение для домашних животных. уютный интерьер и развлечения на любой случай . В нашем последнем томе
В наличии (возможен заказ)
Количество Искусство красивых столов
Артикул: 83PAB23 Категория: Книги Теги: Книга, Виктория
- Описание
- Отзывы (0)
Хрустальные кубки, в которых мерцают свечи, отполированное до совершенства стерлинговое серебро, расположенное рядом с изящным узорчатым английским костяным фарфором, белоснежная льняная скатерть, отороченная тончайшим брюггским кружевом, — вместе эти элементы составляют основу элегантной сервировки стола.
Журнал Victoria долгое время служил сокровищницей благодатной жизни, предлагая бесконечное вдохновение для создания уютных интерьеров и развлечений на любой случай. В нашем последнем томе «Искусство красивого стола»
Выделяя любимую тему на протяжении всей истории Victoria , «Встречи за чаепитием» демонстрирует, что этим любимым ритуалом можно наслаждаться в самых разных условиях, от весеннего сада до уютного камина. В «Праздничных празднованиях» мы путешествуем по календарю, предлагая массу вдохновения для празднования каждого особенного дня со всем изобилием, которого он заслуживает, будь то чествование дорогой матери или разделение изобилия урожая. На протяжении многих лет мы пересекались со многими женщинами, обладающими талантами и желанием создавать самые запоминающиеся декорации; мы демонстрируем фирменный стиль каждого в «Таблицах для создателей вкусов». Наконец, мы открываем двери в «Китайский кабинет», где множество предложений по хранению и демонстрации заветных семейных реликвий.
От всего персонала Victoria мы сердечно приглашаем вас просмотреть каждую увлекательную страницу, чтобы собрать вдохновляющий запас идей для создания ваших собственных незабываемых картин.
20 неповторимо красивых кофейных столиков
Нравится архитектура и дизайн интерьера? Следуйте за нами…
- Подписаться
Home Designing может получать комиссионные за покупки, сделанные по ссылкам на нашем веб-сайте. Ознакомьтесь с нашей политикой раскрытия информации.
Уникальный журнальный столик может стать эффектным фокусом любого жилого помещения. Когда вы можете выбрать хорошо сделанный предмет, он может даже вдохновить декор вокруг себя на высоком уровне. Столы, включенные в этот пост, отличаются высоким качеством и совершенно уникальны, что делает их смелым выбором для тех, кто ищет нечто большее, чем просто место для кофе.
- КУПИТЬ
- КУПИТЬ
- 3 |
- Дизайнер: Дале Хулма
- КУПИТЬ
- КУПИТЬ
- КУПИТЬ
- 7 |
- Дизайнер: Faye Toogood
- 8 |
- Источник: West Elm
- 9 |
- Через: CasaSugar
- КУПИТЬ
Любой тип комнатного растения может поместиться и процветать в этой таблице.- 11 |
- Дизайнер: Verdi Profolio
- 12 |
- Источник: DesignBoom
- 13 |
- Via: Heim Elich
- КУПИТЬ
- 15 |
- Через: DesignerHK
- КУПИТЬ
