Игорь Штанг (nobelfaik) wrote,
Игорь Штанг
nobelfaik

Переверстка №11. Тарифы «Контур-Бухгалтерии»: мой вариант

В прошлый раз был конкурс, сегодня я покажу свой вариант переверстки. Итак, вот наш пациент:




Основная проблема в том, что структура и конструкция таблицы сложнее, чем информация, которая в ней заключена. Попробуем упростить.

Первое: переворачиваю таблицу, чтобы заверстать функции списком. Перевернуть догадались 7 из 29 участников конкурса: Евгений Решетнев, Роман Гладенко, Александр Колодько, Антон Кривякин, Марина Золотухина, пользователь ЖЖ mrbug и Иван Кострюков (в одном из вариантов).


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


Третье: убираю боковик (тот, который в исходной таблице был шапкой). В словах «Функционал» и «Дополнительно» нет никакой пользы, «Отчетность» уже есть в прографке, рубли указаны в заголовке, а «за год» и «за квартал» можно написать в первой ячейке рядом с цифрами. До этого этапа дошли Евгений Решетнев, Роман Гладенко и Александр Колодько.

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


Чтобы усилить вертикальное движение («колоночность»), убираем группировку и ставим функции друг за другом. Заодно избавимся от повтора в верхней части. Было: Бухгалтерия — Бухгалтерия, Зарплата — Зарплата. Стало: Бухгалтерия — Бухучет, Зарплата — Расчет зарплаты. Окей, но цены еще больше оторвались от текста:


Попробую объединить их плашками. Выглядит страшновато, зато вертикальная связь теперь очевидна и дырка в таблице не так бросается в глаза. Запомню этот прием, он мне еще пригодится.


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


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


Есть другая прекрасная возможность справиться с неровными колонками — объединить похожие тарифы в один: «Бухгалтерию» c «Бухгалтерией+», «Зарплату» с «Зарплатой+». Обозначим эти «полутарифы» цветом:


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


Есть второй вариант, без переворачивания. Объединяю функции в список и ставлю его под названием тарифа. В этом направлении пошли Ирина Северцова, пользователь ЖЖ pheelush и Иван Кострюков, но никто не довел прием до логического завершения.


Тем же методом группирую «Бухгалтерию» и «Бухгалтерию+», «Зарплату» и «Зарплату+»:


Собираю цены в один столбец:


Было и стало:


Посчитаем, насколько новая таблица конструктивно проще исходной. В исходной было 7 колонок и 7 этажей + шапка:
7 × 7 + 8 = 57

В новой 5 колонок и 3 этажа + 2 «полутарифа»:
5
× 3 + 2 = 17

57 : 17 = 3,35… То есть новая таблица проще более чем в три раза.


Присылайте макеты на переверстку. Описание и правила рубрики
Tags: знаю как, линейка, переверстка, процесс, таблица
Subscribe

Posts from This Journal “переверстка” Tag

  • Post a new comment

    Error

    default userpic

    Your IP address will be recorded 

    When you submit the form an invisible reCAPTCHA check will be performed.
    You must follow the Privacy Policy and Google Terms of use.
  • 10 comments