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