Trollhunter & FlatQueen
Trollhunter
Я тут новую систему карт маршрутов разрабатываю, всё лишнее убрал – только самое важное, понятные тропы и ключевые точки. Не поможешь придать ей какой-нибудь лаконичный, чёткий вид?
FlatQueen
Конечно. Слушай внимательно: плоские иконки, которые одновременно служат ориентирами, единая цветовая палитра для контраста, четкий шрифт без засечек и сетка, которая выстраивает каждый элемент. Убери всякую анимацию, которая кажется лишней, держи линии прямыми, и сделай карту такой, чтобы она читалась сразу, одним взглядом. Вот как добиться ясности и силы в одном лаконичном решении.
Trollhunter
Звучит здорово – минимум иконок, один цвет, прямые линии. Держи сетку плотной, без излишеств, тогда карта будет читаться быстро. Давай проверим.
FlatQueen
Сделай набросок: сетка 5 на 5, каждая ячейка 50 пикселей, по одному бирюзовому значку в центре каждой ячейки с достопримечательностью, все дороги – сплошные черные линии. Ободки вокруг всей карты – тонкие, серые, в один пиксель, чтобы края не растекались. Открой в браузере, увеличивай до 100%, потом до 200%, проверь контрастность и читаемость. Если всё выглядит чётко – отлично. Если какой-то значок выглядит не очень, упрости его до простого треугольника или точки – без теней. Всё.
Trollhunter
Получил макет – 5 на 5, ячейки 50 пикселей, иконка бирюзовая, линии черные, тонкая серая рамка. Протестирую в браузере в масштабе 1x и 2x, проверю контрастность и подкорректирую иконки, если что-то будет не так. Сообщу, если что-то нужно будет дорабатывать.
FlatQueen
Звучит как отличный план тестирования. Как только дойдешь до двухкратного увеличения, проверь, нет ли растекания пикселей или размытые иконки. Если есть, вернись к векторному файлу и уменьши толщину линий до 1 пиксель или замени сложные иконки на более простые. Расскажи, как выглядит.
Trollhunter
Проверил с двухкратным увеличением — ничего не смазывается, иконки чёткие, но эти бирюзовые иконки на диагональных ячейках немного грубоватые. Поменял на треугольник с одним штрихом, утощил штрихи до одного пикселя, и теперь всё отлично выглядит. Готов к следующему этапу.
FlatQueen
Отлично, иконки теперь просто тонюсенькие. Теперь добавь под каждой иконкой маленькую подпись – только название места, тем же шрифтом без засечек, размером 10 пунктов, тем же бирюзовым. Выравнивай текст по центру. Потом проверь скорость чтения: проведи пальцем по карте, чтобы название появлялось сразу. Если кажется слишком тесно, увеличь ширину ячейки на 10 пикселей и посмотри, как будет. Это финальная шлифовка перед запуском.
Trollhunter
Добавил этикетки цвета тиал, размером 10 пикселей, под каждой иконкой, выровнял их по центру. Проверил пальцем, в масштабе 1x и 2x – имена всплывают моментально, без задержек. Отступы между ячейками норм, расширять не нужно. Похоже, готово к запуску.
FlatQueen
Отлично поработал – карта получилась чистая, аккуратная и сразу понятная. Ты идеально поймал минималистичный стиль, ничего лишнего. Теперь можно запускать и смотреть, как пользователи оценят ясность. Замечательно придумал с иконками в один штрих, благодаря им всё выглядит гармонично. Поздравляю, запуск одобрен!