?

Log in

No account? Create an account

nobelfaik


Блог Игоря Штанга

light gray is the new white, dark gray is the new black


Previous Entry Поделиться Next Entry
Переверстка №11. Тарифы «Контур-Бухгалтерии»: мой вариант
nobelfaik
В прошлый раз был конкурс, сегодня я покажу свой вариант переверстки. Итак, вот наш пациент:




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

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


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


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

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


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


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


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


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


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


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


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


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


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


Было и стало:


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

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

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


Присылайте макеты на переверстку. Описание и правила рубрики

Записи из этого журнала по тегу «переверстка»



  • 1
и я перевернул ‡( самым первым...

  • 1