Всё, из чего состоит вид программы: знак, цвет, шрифт, сфера помощника и то, как бот разговаривает с клиентом. Одни и те же числа в приложении на Android, в панели на компьютере и здесь.
Три купола под тюндюком и линия земли. Рисуется кодом, а не картинкой: одни и те же числа в иконке приложения, в шапке панели и на экране входа — иначе знак выглядит слегка разным на каждом экране, и это замечают, даже не понимая чем.
Скругление плашки — 0.235 от стороны: столько же
у иконок приложений на телефоне, и знак не выбивается из ряда
на домашнем экране.
В плашке линии толще (2.6 против 2),
а тюндюк залит, а не обведён: контурный кружок радиусом
в пиксель на иконке просто исчезает.
Знак занимает три четверти плашки. Остальное — поля, и они не для красоты: без них знак упирается в скруглённые углы и выглядит тесным.
Горная ломаная ак-калпака. Один графический мотив на всю программу: он делает её узнаваемой и не спорит с содержимым.
Зубец — 22 px, линия — 1.1 px,
высота полосы — 10 px. Узор строится
от центра: на любой ширине он остаётся симметричным
и не обрывается половинкой зубца у края.
Ставится под шапкой и над названием. Больше нигде: мотив, повторённый на каждом блоке, перестаёт быть мотивом и становится фоном.
Три цветных пятна перетекают друг сквозь друга, сверху светлое ядро собирает их в шар. Ровная заливка читалась бы как выключенная лампочка — движение показывает, что помощник слушает. Восточный мотив здесь не орнаментом, а цветом: бирюза с золотом, как в ферганской керамике.
Каждое состояние отвечает на свой вопрос человека. Покой — «программа тут?». Слушает — «меня слышно?». Думает — «оно зависло?». Говорит — «это она мне отвечает?». Состояние, которое не отвечает ни на один вопрос, не нужно.
Ореол в покое замедляется у края — как круг по воде. Равномерное движение выглядит как радар и тревожит; здесь нужно обратное: я тут, торопиться некуда.
Полоски двигаются от настоящей громкости микрофона. Это не украшение: в шумном месте человек не слышит себя и по ним понимает, что запись идёт.
Размер задаётся только шириной и высотой — остальное
считается в процентах. Поэтому сфера одинаково выглядит
кнопкой в 62 px и во весь экран.
Одиннадцать значений, и у каждого своя работа. Цвет всегда что-то значит: красный — потеря, охра — ждёт решения, бирюза — наше. Раскрашивать им ради оживления нельзя, иначе значение размывается и предупреждение перестают замечать.
Inter, четыре размера. Больше не нужно: каждый лишний размер — это ещё одно решение, которое кто-нибудь примет по-своему, и через месяц заголовки на двух экранах отличаются на пиксель.
Скругление 10 px у всего, что нажимают
и заполняют, 12–14 px у карточек. Высота кнопки
и поля — 46 px: палец на ходу, а риэлтор
работает стоя в подъезде.
Главное действие на экране одно, и оно закрашено. Всё остальное — контуром: два одинаково ярких действия рядом заставляют выбирать, а выбирать тут нечего.
Кнопка называет то, что произойдёт: «Взять заявку», а не «ОК». После нажатия — короткое подтверждение теми же словами: «Заявка ваша».
Кнопки, которая ругается после нажатия, быть не должно: если действие сейчас невозможно, она погашена. Погашенная злит меньше, чем обманувшая.
Шесть состояний квартиры — от «нашли» до «сдана». Цвет и слово вместе: цветом читается на бегу, словом — без ошибки.
Заливка — 12%
от цвета, текст — сам цвет. Сплошная плашка кричала бы:
в списке из тридцати квартир тридцать ярких пятен превращаются
в шум, и ни одно уже ничего не сообщает.
Станция цветом своей ветки. В списке из тридцати квартир ветка ловится глазом раньше, чем прочитано название — так люди и держат Москву в голове. Точка того же цвета, что кружок на схеме; 276 станций, 15 линий, из того же справочника, по которому сервер считает расстояния.
У жёлтой и серой веток на белом фоне точка сливается с бумагой — поэтому у неё тонкий ободок. А название станции пишется не самим цветом ветки, а его затемнённым вариантом: жёлтая надпись на белом нечитаема, и «красиво по схеме» здесь проигрывает «видно».
Семь строк, и ни одной лишней. Раньше сюда падала вся переписка — риэлтор открывал заявку, видел простыню и закрывал. Заявка — это то, с чем звонят, а не архив разговора.
Порядок строк — порядок разговора. Первое, что нужно звонящему: как зовут и куда набирать. Последнее — чего мы не знаем, чтобы он спросил сам, а не выяснял заново уже выясненное.
Строка «Назвали» обязательна, если бот показывал цифры: менеджер должен звонить с теми же числами, какие клиент уже прочитал. Разойтись здесь — значит начать разговор с обмана.
Без номера заявка не создаётся вовсе. Очередь, набитая заявками, по которым некуда звонить, кончается тем, что риэлтор перестаёт открывать их вообще — и пропускает настоящую.
Оформление кончается там, где начинаются слова, — но клиент видит именно слова. Правила короткие и все про одно: не обещать того, чего не будет.
Цвета, шрифт, скругления и знак — одни и те же. Меняется только плотность.
На телефоне — карточки в столбик. Риэлтор смотрит одну заявку за раз, стоя, одной рукой. Таблица здесь превращается в горизонтальную прокрутку, и в ней теряются.
Отступ по краю — 16 px, между карточками —
8–10 px, внутри карточки — 12–14 px.
За компьютером — таблицы. Админ сравнивает: кто взял, кто просрочил, сколько объектов у каждого. Ради этого сюда и приходят с телефона, и карточки в столбик такую работу не поддерживают.
Числа в столбцах — моноширинными цифрами, чтобы разряды стояли друг под другом и суммы можно было сравнивать глазом.
Значения взяты из mobile/lib/core/theme.dart,
panel/style.css и data/metro_moscow.json —
из тех самых файлов, по которым программа и рисуется. Меняя цвет
или размер, правьте там, а эту страницу пересоберите: документ,
разошедшийся с кодом, хуже отсутствующего.