Переверстка №11. Тарифы «Контур-Бухгалтерии»: мой вариант
В прошлый раз был конкурс, сегодня я покажу свой вариант переверстки. Итак, вот наш пациент:
Основная проблема в том, что структура и конструкция таблицы сложнее, чем информация, которая в ней заключена. Попробуем упростить.
Первое: переворачиваю таблицу, чтобы заверстать функции списком. Перевернуть догадались 7 из 29 участников конкурса: Евгений Решетнев, Роман Гладенко, Александр Колодько, Антон Кривякин, Марина Золотухина, пользователь ЖЖ mrbug и Иван Кострюков (в одном из вариантов).
Второе: избавляюсь от галочек. Галочки сами по себе ни о чем не говорят, также как плюсики, крестики и точечки, которыми изобиловали конкурсные работы. Чтобы не заставлять читателя искать расшифровку, напишу текст прямо в ячейках:
Третье: убираю боковик (тот, который в исходной таблице был шапкой). В словах «Функционал» и «Дополнительно» нет никакой пользы, «Отчетность» уже есть в прографке, рубли указаны в заголовке, а «за год» и «за квартал» можно написать в первой ячейке рядом с цифрами. До этого этапа дошли Евгений Решетнев, Роман Гладенко и Александр Колодько.
Сейчас данные сгруппированы в четыре этажа: базовый функционал, отчетность, дополнительный функционал и цены. Можно было бы подчеркнуть этажность линейками, но они будут работать против смысла. Эту таблицу правильно читать колонками, а не строками. Добавляя линейки, мы усиливаем горизонтальное движение, а нужно усилить вертикальное. То есть такой вариант не подходит:
Чтобы усилить вертикальное движение («колоночность»), убираем группировку и ставим функции друг за другом. Заодно избавимся от повтора в верхней части. Было: Бухгалтерия - Бухгалтерия, Зарплата - Зарплата. Стало: Бухгалтерия - Бухучет, Зарплата - Расчет зарплаты. Окей, но цены еще больше оторвались от текста:
Попробую объединить их плашками. Выглядит страшновато, зато вертикальная связь теперь очевидна и дырка в таблице не так бросается в глаза. Запомню этот прием, он мне еще пригодится.
Хорошо бы поставить цену рядом с названием тарифа, но тогда низ получается рваным. Во-первых, это выглядит неаккуратно. Во-вторых, такую таблицу сложнее заверстать на макете: неровный край плохо стыкуется с другими блоками.
Чтобы выровнить низ, можно показать те функции, которых в тарифе нет. Идея неплохая, но для нашей таблицы не подходит. Дополнительные данные ее перегружают:
Есть другая прекрасная возможность справиться с неровными колонками - объединить похожие тарифы в один: «Бухгалтерию» c «Бухгалтерией+», «Зарплату» с «Зарплатой+». Обозначим эти «полутарифы» цветом:
Со структурой и конструкцией разобрались. Добавлю немного «контурного» стиля, в том числе с помощью их фирменного шрифта. Рубли поставлю рядом с ценами, чтобы было сразу понятно, что это за цифры:
Есть второй вариант, без переворачивания. Объединяю функции в список и ставлю его под названием тарифа. В этом направлении пошли Ирина Северцова, пользователь ЖЖ pheelush и Иван Кострюков, но никто не довел прием до логического завершения.
Тем же методом группирую «Бухгалтерию» и «Бухгалтерию+», «Зарплату» и «Зарплату+»:
Собираю цены в один столбец:
Было и стало:
Посчитаем, насколько новая таблица конструктивно проще исходной. В исходной было 7 колонок и 7 этажей + шапка:
7 × 7 + 8 = 57
В новой 5 колонок и 3 этажа + 2 «полутарифа»:
5 × 3 + 2 = 17
57 : 17 = 3,35… То есть новая таблица проще более чем в три раза.
-
Подробнее о работе с таблицами читайте в большом онлайн-курсе «Таблицы и прочие радости»
Присылайте макеты на переверстку. Описание и правила рубрики
Основная проблема в том, что структура и конструкция таблицы сложнее, чем информация, которая в ней заключена. Попробуем упростить.
Первое: переворачиваю таблицу, чтобы заверстать функции списком. Перевернуть догадались 7 из 29 участников конкурса: Евгений Решетнев, Роман Гладенко, Александр Колодько, Антон Кривякин, Марина Золотухина, пользователь ЖЖ mrbug и Иван Кострюков (в одном из вариантов).
Второе: избавляюсь от галочек. Галочки сами по себе ни о чем не говорят, также как плюсики, крестики и точечки, которыми изобиловали конкурсные работы. Чтобы не заставлять читателя искать расшифровку, напишу текст прямо в ячейках:
Третье: убираю боковик (тот, который в исходной таблице был шапкой). В словах «Функционал» и «Дополнительно» нет никакой пользы, «Отчетность» уже есть в прографке, рубли указаны в заголовке, а «за год» и «за квартал» можно написать в первой ячейке рядом с цифрами. До этого этапа дошли Евгений Решетнев, Роман Гладенко и Александр Колодько.
Сейчас данные сгруппированы в четыре этажа: базовый функционал, отчетность, дополнительный функционал и цены. Можно было бы подчеркнуть этажность линейками, но они будут работать против смысла. Эту таблицу правильно читать колонками, а не строками. Добавляя линейки, мы усиливаем горизонтальное движение, а нужно усилить вертикальное. То есть такой вариант не подходит:
Чтобы усилить вертикальное движение («колоночность»), убираем группировку и ставим функции друг за другом. Заодно избавимся от повтора в верхней части. Было: Бухгалтерия - Бухгалтерия, Зарплата - Зарплата. Стало: Бухгалтерия - Бухучет, Зарплата - Расчет зарплаты. Окей, но цены еще больше оторвались от текста:
Попробую объединить их плашками. Выглядит страшновато, зато вертикальная связь теперь очевидна и дырка в таблице не так бросается в глаза. Запомню этот прием, он мне еще пригодится.
Хорошо бы поставить цену рядом с названием тарифа, но тогда низ получается рваным. Во-первых, это выглядит неаккуратно. Во-вторых, такую таблицу сложнее заверстать на макете: неровный край плохо стыкуется с другими блоками.
Чтобы выровнить низ, можно показать те функции, которых в тарифе нет. Идея неплохая, но для нашей таблицы не подходит. Дополнительные данные ее перегружают:
Есть другая прекрасная возможность справиться с неровными колонками - объединить похожие тарифы в один: «Бухгалтерию» c «Бухгалтерией+», «Зарплату» с «Зарплатой+». Обозначим эти «полутарифы» цветом:
Со структурой и конструкцией разобрались. Добавлю немного «контурного» стиля, в том числе с помощью их фирменного шрифта. Рубли поставлю рядом с ценами, чтобы было сразу понятно, что это за цифры:
Есть второй вариант, без переворачивания. Объединяю функции в список и ставлю его под названием тарифа. В этом направлении пошли Ирина Северцова, пользователь ЖЖ pheelush и Иван Кострюков, но никто не довел прием до логического завершения.
Тем же методом группирую «Бухгалтерию» и «Бухгалтерию+», «Зарплату» и «Зарплату+»:
Собираю цены в один столбец:
Было и стало:
Посчитаем, насколько новая таблица конструктивно проще исходной. В исходной было 7 колонок и 7 этажей + шапка:
7 × 7 + 8 = 57
В новой 5 колонок и 3 этажа + 2 «полутарифа»:
5 × 3 + 2 = 17
57 : 17 = 3,35… То есть новая таблица проще более чем в три раза.
-
Подробнее о работе с таблицами читайте в большом онлайн-курсе «Таблицы и прочие радости»
Присылайте макеты на переверстку. Описание и правила рубрики