Сегодня я выбрал, как будет выглядеть ESVA. Я не просто «утвердил макет», а выбрал один из трёх полноценных визуальных языков. Это решение определит вид следующих ~232 изображений.
Стоит рассказать, как был устроен выбор, потому что структура здесь важнее вкуса.
Три направления, одно содержимое
Каждое направление представлено одним планшетом, и на всех трёх показан один и тот же набор: аватар (силуэт 32px и вид спереди 128px), шесть значков шкалы, окно с полным обрамлением, карточка особи, фрагмент HUD с числами, участок земли с полевым объектом и фраза, объясняющая замысел.
Это не мелочь — именно это позволяет сравнивать все три варианта. Если бы на каждом планшете были разные элементы, выбирать пришлось бы вслепую: мне мог понравиться аватар из одного, значок из другого, и я не смог бы сказать, какой именно визуальный язык выбираю. Одно содержимое, три прочтения. Тогда различается только направление.
Что НЕ менялось
Бренд. На всех трёх планшетах неизменны и не обсуждаются: палитра (Ink #0B1114 · Paper #F2F0E8 · Verdigris #35C7A4 · Amber #E58A2A · Slate #77858B), шрифты (IBM Plex Sans для интерфейса, JetBrains Mono для чисел), логотип, проекция сверху под углом 3/4, высота 128px и шкала из 24 поз.
Это важнее, чем кажется. Если понимать «три разных направления» буквально, получились бы три разных бренда. Два из них родились бы нежизнеспособными, потому что нарушали бы уже утверждённое мной руководство. Я выбирал бы из одного варианта и называл бы это решением.
Меняться могло другое: вес пикселя, плотность интерфейса, соотношение бюрократа и экспедиционера в облике персонажа, институциональная строгость и оформление окон.
Три варианта
A — Клинический архив. Светлый фон. Линейные значки в скруглённых рамках с одинаковой толщиной штриха. Ненавязчивое окно. Аватар — исследователь в рубашке цвета хаки с перевязью для колб сдерживания. *«Сначала поле кажется точным архивом и лишь затем — приключением».*
B — Полевой журнал. Оливковая, более сдержанная гамма. В окне уже заполнены поля: субъект, место, координаты, время UT. В углу стоит геодезический штатив. На аватаре больше снаряжения, форма выглядит строже. Формулировка была такой: *«Организация сопровождает посвящённого в поле, не превращаясь в военную форму».*
C — Действующий пост. Самый тёмный и плотный вариант. Тяжёлая парка. В интерфейсе есть боковая панель из шести разделов и индикатор синхронизации 97%. Палатка, ящики. *«Архив уже существует в поле: надёжный, потёртый и сразу готовый к работе».*
Почему A
Потому что лишь этот вариант выполняет требование, которое я записал несколько месяцев назад и почти забыл.
Оно находится в §26 дизайн-документа и записано как требование к переработке меню: «уйти от тяжёлого чёрного внутри игры — чёрный на сайте хорош — всё остальное сделать чище». Я записал это, пометил как нерешённую задачу и не возвращался к ней так долго, что забыл о ней, когда рассматривал три планшета.
B и C — тёмные. Оба варианта красивы и последовательны, но делают ровно то, от чего §26 требовал отказаться. Только у A фон Paper, и только в нём интерфейсу хватает воздуха.
Есть и вторая причина, связанная с жанром игры.ESVA — игра с пассивным прогрессом: за окнами она продолжает работать. Вариант C самый плотный: боковая панель с шестью пунктами, индикатор синхронизации, несколько панелей друг над другом. Для игры с пассивным прогрессом плотность особенно дорога, потому что каждый пиксель интерфейса закрывает пиксель мира. C прекрасен в статике, но в движении заслоняет игру.
Самым интересным оказывается вариант B: его формулировка сама признаёт риск. *«Не превращаясь в военную форму»* — защитная формулировка. Она появилась, потому что автор почувствовал приближение к границе. И действительно приблизился. Орден измеряет, изолирует и публикует; он не вторгается. Игроку достаточно трёх секунд, чтобы увидеть в B техническое ополчение. ESVA не об этом.
Моя любимая деталь
В A активное окно обведено цветом Verdigris, а неактивное — серым, но разница не только в цвете. Меняется толщина рамки и оформление заголовка.
Это утверждённое правило: ни одно состояние не обозначается только цветом. Оно важно и для людей с нарушением цветового восприятия, и для принципа, согласно которому информация должна иметь форму. Увидеть этот принцип применённым без отдельной просьбы в крошечной детали обрамления окна, на которую почти никто не посмотрит, было для меня самым убедительным признаком понимания игры — убедительнее даже аватара, который первым бросается в глаза.
Цена этого решения
Светлый фон сложнее. Пиксельный спрайт на фоне Paper лишается бесплатного контура, который даёт тёмный фон: каждый силуэт должен держаться сам, без помощи чёрного. Станут видны недостатки, которые направление C скрыло бы.
Я принимаю это. Решение соответствует правилу всего проекта: присутствие передаёт информацию, отсутствие — нет. Игра, которой нужна темнота, чтобы всё выглядело хорошо, использует отсутствие света как подпорку.
Что остаётся открытым
Я ещё не решил, как окна будут вести себя на телефоне. На компьютере они перетаскиваются и перекрывают друг друга — это уже утверждено. Но перетаскиваемое окно не помещается на экране телефона, а минимальная сенсорная цель составляет 44 пикселя. Возможные решения: полноэкранный стек, нижняя панель или перетаскивание только на планшете. Ни один вариант не выбран, поэтому адаптация сенсорного управления приостановлена. Задача записана как нерешённая, а не забытая.
Два других планшета сохранены. Не потому, что я намерен передумать, а потому, что через шесть месяцев, когда кто-нибудь спросит, почему ESVA светлая, ответом будет не «просто потому». Я покажу все три варианта, формулировку каждого и пункт §26, который определил выбор.