Поиск и создание образов для дизайна «Яндекс.Еды», «Такси» и других проектов

Десять лет я синтезировал из разных областей знаний методологию создания продуктов. Сначала я хотел понять, возможна ли методология в рамках хотя бы одного продукта. Когда нашёлся кандидат на роль, возник следующий вопрос: возможна ли методология, общая для разных продуктов? А следом третий: отчуждаема ли эта методология от меня? Это я сейчас и проверю.

Вторая часть текста. Материал в блоге на Medium.

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

А также о типографике, цвете, сетке и семантике, о подложке карт, тексте, об иллюстрации, о фото- и видеосъёмке, о компиляции всего этого в продукт.

Предлагаю погрузиться со мной. У меня набралось много материала из-под моих рук и рук моих коллег. Я покажу результаты и опишу цепочки решений, приведших к ним. Зачем погружаться? Кажется, мы что-то нашли.

И ещё перед погружением: материала будет много, в реальной жизни я бы рассказывал его порциями и делал перерывы; здесь после каждого логического куска я буду «выходить из аудитории» и включать музыку.

С момента прошлого рассказа со мной произошли две вещи:

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

Чем конкретно я занимался последнее время:

Пункты прилично разнесены: у каждого своя технология (Android, iOS, веб), свой контекст использования (устройство на столе, в руке, на панели автомобиля), своя аудитория (водители, курьеры, диспетчеры, аналитики, руководители компаний и голодные люди).

Я застал каждый продукт на разных стадиях развития: «Такси» уже работало на высоких оборотах, DMS пробовал запуститься, а Emex перерождался. У каждого была своя команда: это люди не из разных этажей одной организации, а из разных индустрий (читайте, планет).

Обо что сразу бьёшься лбом: ценности, процессы и технологии у вас совершенно разные. К этому я мог сколько угодно готовиться, но пока не окунулся, сложно было воспринимать себя иначе, чем «дизайнер из команды "Яндекс.Поиска"»: у тебя в голове веб-технологии с их возможностями и проблемами, n-мерное пространство экспериментов, закон больших чисел, пробирки с оттенками синего и так далее.

У других: «Учти, что на четвёрке тени не работают», «Высота строки не настраивается», «Давай раскатим и отзывы почитаем», «Что такое сетки? У нас есть лейауты — это оно?», «Вот зачем ты нагородил своих окон — смотри, какой есть jQuery-плагин».

Так возникла интересная задача: ранее я декомпозировал интерфейсы. А как декомпозировать собственный опыт? Как отделить методологические находки от технологических, образные от графических? Разные проекты нуждаются в подмножестве моих экспертиз, и мне отводится определённая роль. Кроме того, возникает риск стать вечным евангелистом единственной конфигурации (графического стиля, инфраструктуры — не важно), а это остановит и развитие, и спрос.

В своей работе я увидел три пласта.

Что я подразумеваю под этими тремя пластами на примере своих записей:

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

Читаем «Карту Птолемея» Герца Франка:

«Статьи, дневники, замыслы» документалиста Вертова:

Замечу, что тут дело не в романтике; к образу у специалиста отношение прагматичное — это клей формы и содержания. Более формально, образ — чувственно воздействующий объект.

Помимо того, что образ воздействует на зрителя, он направляет и автора. Это явление я называю системой координат для принятия решений. Как это работает — создавая продукт, ты ежечасно принимаешь микро-решения.

И не я один принимаю решения: почти всегда есть другие дизайнеры. А результат после длинной череды микрорешений должен получиться цельным и производить нужное и однозначное впечатление.

Единый набор образов продукта в голове каждого дизайнера помогает принимать неслучайные решения, калибрует мысли и действия, указывает возможные направления (когда не перебираешь, а выбираешь). Так, любое решение, принятое в рамках образной системы координат, становится объяснимым — что сокращает споры и душевные терзания:

А правда, проверьте себя и коллег, поинтересуйтесь любой мелочью в своём продукте: почему кнопка синяя? Почему заголовок капсом? Почему всё такое округлое? Почему мы с человеком на ты?

— А вопросы уже можно задавать?

— Пожалуйста.

— Вся эта лирика ваша про образы как поможет моему продукту? Мне вот надо, чтобы заказы росли. Просто, понимаете, если продукт держит нужную планку качества, всё остальное вообще не важно. Вон мы с друзьями наугад себя назвали, логотип мне мой ребёнок нарисовал, а интерфейс на Bootstrap собран. И это не помешало нам выйти в лидеры.

— А на какой стадии ваш бизнес?

— Ну вот мы запустились и уверенно растем.

— Значит, вам пока никто не мешал. То есть вы пока беспрепятственно захватываете рынок, а не боретесь за долю. Впереди вас ждут минимум две задачи. Первая: вы поделили рынок и поравнялись с конкурентами — как продолжать расти дальше?

Вторая: когда вы все только начинали, вы имели контроль, сами принимали и сами исполняли решения; с ростом команды принятие и исполнение многих решений придется делегировать — как сохранить контроль?

— Если я объясню всем, почему кнопки синие, я сохраню контроль?

— Если вы перестанете хвалить случай и создадите образную систему координат принятия решений и погрузите в нее каждого сотрудника, принимающего решения, у вас будет шанс сохранить контроль. Такая моя гипотеза.

— А что с первой задачей?

— Ну все зависит от вас. Но, вероятно, понадобится менять технологии, калибровать образы с требованиями времени и экспериментировать с моделями. И если ваш продукт останется для вас супом из случайностей и волевых решений, я не понимаю, как вы это будете масштабировать.

Как я воспитывал в себе привычку поиска и анализа образов:

Есть точка зрения, что объяснение вредит искусству и разрушает образ. Отвечу так: формальный подход к поиску и созданию образов не помогает процессу — логика не может быть локатором чувственно воздействующих объектов по их определению. Давайте понаблюдаем за живыми поисками и созданиями образа:

Но анализ найденных образов позволяет с минимальными потерями перенести их в инженерию и построить модель.

Почему я говорю «поиск и создание образов», почему не просто поиск? Этим, на мой взгляд, отличаются документальные и художественные продукты: первые «проникают в природу за образными открытиями», вторые эти образные открытия компилируют из контекста и переживаний (кстати, compilatio с латинского — кража).

Дальше я начну показывать примеры своих работ с дотошным описанием процесса принятия решений. По разным причинам внедрено не всё или не в том виде, но для описания методологии мне важно показать цельные картины. А какие могли быть причины:

Тексты в примерах — придуманная мною рыба, без намерений кого-то оскорбить или на что-то намекнуть (я на всякий случай).

Исследуя открытый образ, примеряя его в разные контексты, можно находить новые образы, складывать образные концепции — в этом я нахожу дизайн драматургией.

Логотип или иконка продукта для меня корневой образ, от которого будут расти остальные. В сопроводительном тексте моей концепции были следующие рассуждения.

Образы коммуникации еще не сформированы, поиск общего языка с растущей аудиторией только начнется. В этой ситуации что такое хороший логотип? Я вынес для себя такие проверочные вопросы.

В общем, проникаю в природу с художественной целью (первый пункт в моих рассуждениях выше).

И вынимаю оттуда образ спирали.

Какой цвет выбрать для знака: с едой я могу связать оранжевый, зеленый и красный. Выше мы взяли курс на универсальность, а наиболее универсальным я вижу оранжевый.

Покрытие по кухням (второй пункт).

Дальше я начинаю играть со знаком, смотреть, сколько производных я смогу из него вытянуть при беглом взгляде:

Буква «е», диффузия и тарелка (далее пункты три и четыре). Продолжаю игру с образом тарелки.

Перебираю разные жанры картинок, на которых фигурирует тарелка, бросаю поверх спираль и смотрю.

Такой дешевый прием прокладывает мостик до любого кадра с тарелкой и впитывает его настроение— тоже отлично. Позже обнаруживаем, что тарелка со спиральной текстурой — частое явление; закупаемся в Zara Home, фоткаем на память.

Одну из них снимем в ролике и заберем в интерфейс.

Про диффузию еще такой прием нашелся.

И осталась буква «е». Но тут я сделаю небольшое отступление про логотипы вообще.

Я не принимаю за логотип разваливающиеся (не склеенные образно) конструкции «знак и подпись». Да, их очень много вокруг и в будущем появится еще больше. Но они слабые: их не вписать никуда кроме как в чистый лист с «охранным полем», скука какая. Это конец истории, а не начало. И мне куда приятнее работать с монолитными, крепко сбитыми знаками.

Либо со знаками и подписями, разнесенными по опорным точкам макета.

Поэтому е-спираль я ставлю внутрь «Яндекс.Еды» вместо точки.

Конечно, это не исключает использование знака и без логотипного шрифта.

Итого получилось такое дерево ассоциаций, образная концепция, которая в будущем станет частью системы координат для принятия решений.

Я считаю, что образная концепция куда важнее и полезнее гайдлайна (особенно на первое время). Почему? А много вы видели гайдлайнов, которые указывают на следующие шаги? Да, строгие инструкции для подрядчиков тоже нужны; однако помните, что функция этих правил консервативная — сопротивление изменениям.

И если вы беретесь за рекламную кампанию, глядя на гайдлайны, они вам будут либо мешать, либо склонять к максимально беззубому варианту.

Попробуем теперь на базе образной концепции собрать рекламный ролик, серию фотографий для SMM и примерный интерфейс. Что еще прекрасного в таком подходе — пока ты работаешь с концепцией, ты в нее инвестируешь: находятся новые образы, актуализируются и уточняются старые. Отмечу, однако, что это пока не работа с моделями — разговор о них еще впереди.

Видео и фото. Тут я работал в паре с Тарасом Шаровым (далее просто Тарас) — он у нас большой любитель поснимать. Говорю ему: «Собралась у меня такая вот концепция, давай попробуем поснимать?» И сразу полезли вопросы: что, как и для каких контекстов? Это просто еда, еда и руки, еда и люди, просто довольные сытые люди? Образная концепция требовала развития, и я пошел искать референсы.

Из замученной спирали ответов на эти вопросы не вытянешь, но я запомнил раскиданные кадры с тарелкой и людьми:

Тут сработал чистый случай, однако иллюстрирующий, насколько полезно оставлять все артефакты поиска образов. Мне понравилось, что кадр нагло завален, что схвачен момент, что живая коробка лежит на стерильном столе в переговорной.

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

Покопался в Pinterest, там нашелся король жанра — Юрген Теллер. Это помогло лучше понять правила игры: пленка, вспышка, нарочито неправильные углы съемки, псевдослучайное кадрирование и смакование деталей.

Но мы не стремились в точности воспроизвести референсы — они скорее давали вектор, показывали, как ещё бывает. От вспышки в процессе отказались, от пережаренных контрастов тоже. Тарас мне ещё рассказал про color grading — Instagram-фильтры для богатых; с помощью них (и не только) режиссеры добиваются узнаваемости фильма в каждом кадре.

Со этим багажом новых знаний и отсылок мы начали искать почерк фотографий «Яндекс.Еды».

Стало понятно, что надо следить, как ведут себя в кадре мясо и хлеб — на некоторых пленках котлета принимала трупный оттенок, а булка покрывалась пылью, несмотря на то, что остальные предметы в кадре смотрелись очень даже художественно.

Холодные краски, которые так классно и глубоко смотрятся в кино, убивали съедобность наших фотографий — поэтому остановились на теплых и ярких тонах. И первая серия антиглянцевых фотографий для SMM получилась такой.

Теперь интерфейс. Основное открытие: как только главным героем в кадре или в интерфейсе становится еда, мозг иначе воспринимает привычные вещи — я, например, вижу здесь сковородку.

Понаблюдав за подобными особенностями восприятия, я сформулировал принцип: не рисовать еду и не рисовать на еде. На практике это значит, что фильтры по кухням я сделаю не иконками, а миниатюрными фотографиями; а названия блюд и ресторанов напишу под фотками, а не поверх (добавил пункт в образную концепцию).

Тут мы приходим к жанрам снимков. Когда я делал основные экраны, стало ясно, что нужно еще два типа фотографий: обложка ресторанов и, собственно, блюда в меню.

Обложка — это такой натюрморт, который говорит о типе кухни, некотором флере вокруг заведения. Я нашел идеальный референс, объясняющий идею.

Снимки блюд — статичные, симметричные композиции, немного над тарелкой. Но чтобы сохранить вкус именно «Яндекс.Еды», мы продолжаем класть наши светофильтры.

На этом моменте у вас должны возникнуть вопросы:

По ходу работы я просил Тараса все свои мысли записывать. Получилось два документа, которые отвечают на поднятые вопросы.

Пару слов о цвете (подробнее будет в моделях):

Форм-фактор: спираль круглая, тарелка круглая, так что и кнопки с фотками туда же. Еще не мог обойти стороной бумагу, в которую заворачивают еду, а после на ней печатают меню и чиркают счет — я искал ненавязчивую отсылку и, кажется, нашел:

Отдельно расскажу о языке. Экран оживает в тот момент, когда начинает разговаривать. Вес слова не меньше, чем вся проделанная работа выше — то есть кривыми фразами можно как уничтожить впечатление, так и возвести его в квадрат. Характер продукта, его забота, его образы — во многом они там же, в языке.

Посмотрите на «Яндекс.Драйв». Даже если вы не водите, все равно рекомендую скачать приложение, чтобы ощутить языковой контакт с продуктом. Это забытое чувство. И на всякий случай: я к «Драйву» отношения не имею, делает его мой друг Рома.

Чаще всего про силу языка вспоминают в промоэкранах с новой функциональностью и спецпроектах к новому году. А ведь можно и в более бытовых ситуациях выходить на контакт с человеком.

Образная концепция, как я и обещал, получила развитие:

И вот теперь спектакль целиком. Это и была моя финальная презентация — телефон с прототипом на столе.

— У меня вопрос!

— Самое время.

— Вы всё это показали «Яндекс.Еде», и что она?

— Она взяла знак, чему я очень рад. А по поводу всего остального: я предупреждал о своем фетише в самом начале. Так вот это случай, когда меня никто об этом не просил — это важно помнить.

Второе: у ребят уже есть летящее приложение, которое было Foodfox. Когда им на голову падает другое приложение поперек всех планов — наивно полагать, что его так просто возьмут в работу. Возможно, когда-нибудь что-нибудь. Я не знаю, как бы я поступил на их месте.

— А в чем вы делали прототипы?

— Flinto.

— А блок-схемы?

— MindNode

Сначала давайте разберемся с желтым. Откуда этот мем про желтое такси? Из США, точнее, из Нью-Йорка. В Европе желтого такси не больше, чем черного или белого; а то желтое, что есть, выглядит невыразительно: оно то лимонное, то грязное, то с зеленоватым отливом.

Статистика подтверждает эти ощущения: существует корпорация PPG, один из мировых лидеров по производству красок и эмалей для всех видов транспорта; у ребят есть открытые данные, кто, когда и какую краску заказывает.

Откуда я все это знаю? Это не я, это снова Тарас — у этого человека много неожиданной информации в голове вроде той, как грамотно себя вести, если начнется зомби-апокалипсис.

Американцы годов с 1970-х полюбили стандартизацию всего на свете. Думаю, из-за бума урбанистики и социологии как способов борьбы с накопившимися проблемами мегаполисов; и я, кстати, рад наблюдать подобный процесс сегодня в Москве.

Насколько я понял, в 1967 году ребята выбрали для такси bold yellow (или цвет очень на него похожий) и красят им до сих пор.

Этот цвет в лучах солнца можно поразглядывать на фотках все той же статьи. Безумно сложный и красивый.

Воспроизвести это в интерфейсе не так-то просто: реальный цвет нестабилен, и наша память хранит богатый собирательный образ, а не #FFB000.

Если усреднить все найденные на фотках градиенты, получаем два дополняющих цвета.

Мы назвали их Amber и Yellow и из каждого достроили цветовой ряд.

О цветовых рядах в палитре я подробно расскажу в разделе про модели, но вообще, это явление обычное для дизайн-фреймворков: те же Material design colors (они, кстати, тоже отличают yellow, amber и orange).

Вот как этот сложный желтый прорастает в интерфейсе «Таксометра»:

У Amber есть особое свойство — держать форму на мелком масштабе, тогда как обычный желтый не выдерживает никакой критики.

На больших площадях (кнопки, плашки) цвета меняются местами: Amber становится слишком тяжелым, и на помощь приходит Yellow.

Эта цветовая пара может смело применяться и дальше, например, в значке «Такси».

Это инструмент для водителей такси. Инструмент со сложной судьбой:

Если вы когда-нибудь сталкивались с b2b-продуктами или внутренними инструментами, то должны были привыкнуть к такой подаче. А мы решили все-таки начать меняться. Но зачем трогать работающий механизм:

Предстояло найти эстетику современного дружелюбного рабочего инструмента. А я, как и все люди на планете, отдал GTA V Online минимум год своей жизни — и пока слушал просьбы ребят, в голове мелькали все эти картинки.

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

Мне можно возразить, мол, а как же мобильные платформы.

Тут надо помнить, что для водителя это не только игра или не игра вовсе, это прежде всего работа со всеми ее атрибутами. Ну и представьте себя пассажиром на заднем сидении, который видит на приборной панели это:

Я пошел искать предметы, балансирующие между игрой и занятием профессионала, — штуки, которые бы своим видом вызывали интерес к своей функции.

Что можно рассмотреть на этих примерах: всё как будто просто служит функции, обосновано исключительно функцией, но отовсюду сочится эмоция. Как? Тут я хочу, чтобы у вас появилась своя версия, и с ней вы продолжили чтение.

Куда привел анализ меня. Сначала основной функции инструмента подыскивается притягательный образ:

А когда есть образ и функция, их соединяют и убирают все лишнее — получается предмет-иллюстрация химической реакции образа и функции.

Так это начало прорастать в интерфейсе «Таксометра».

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

Я сказал про жирный кусок, потому что на все сил и времени не хватает — и, например, интерфейсные значки я часто беру готовые. Хотя, само собой, и они могут быть частью образной концепции.

С иллюстрациями вообще странная история: многие заказчики никак не вырастут из почерка Пикассо.

И не потому что иллюстраторы больше ничего не могут предложить. Их об этом редко просят. А просят «интерфейсную иллюстрацию» — универсальную, правильную и высушенную до безобразия.

Иллюстратор — это же такая сила, такой уникальный скилл, которого у остальных нет. И я испытываю наслаждение, когда вижу графику и не понимаю, как она сделана.

И для интерфейса, и для фотографии, и для иллюстрации нужна история, нужны отсылки и образы — только так получится сформулировать исполнителю внятный заказ. Так, с Олей Барановой мы начали рисовать первые картинки для «Таксометра». С чего начать? Я рассуждал так:

Пока что вырисовывались такие вот скетчи из учебника по ОБЖ:

Требованиям соответствует и с темой обучения и инструкции прекрасно рифмуется. Но жизни пока нет. Я вспомнил про своего друга детства, а Оля докинула примеров.

Захотелось живого персонажа с неровной прической, эмоцией на лице и чуть менее формальным подходом к цвету. Так у нас нарисовался свой vault guy.

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

А чуть позже эстафету принял иллюстратор Женя Семиряков.

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

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

В стерильных инструментах для бизнеса сразу хочется перейти к моделям, но отмечу, что это самый трудоемкий процесс (для дизайнера), а чтобы создать образную концепцию (которая упростит работу над моделями), нужно просто посидеть и подумать — такая простая и бесплатная работа в начале может стать дорогой или невозможной потом.

Может показаться, что образная концепция инструментам не нужна, как не нужны и эмоции: будет много графиков, таблиц, полотен текста и вложенных меню — это не потребительский сервис, там не работает маркетинг. Но представьте, каким скучным был бы Github или Mapbox, или ваша собственная админка без маскота и локальных мемов (если хоть какой-то культурный слой у вас уже накоплен).

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

С родительским брендом все линейно, обычно там играют на противопоставлении: обратная сторона, вывернутая цветовая палитра (было черное на белом, стало белое на черном) или основной образ в виде миниатюры или карикатуры.

Куда приводит терминология: мы с Тарасом работали над логистическим продуктом DMS (delivery management system) — бренда-родителя у него не было, культурного слоя тоже; полезли искать зацепки в самом бизнесе. Этот случай еще был удобен тем, что заказчик намеревался распространять решение — поэтому какой-то характер был нужен. Я делал интерфейсную часть, Тарас возился с брендом и графикой.

Выяснили, что ребята делят карту на геотарифные зоны и организуют передачу груза через них. Упрощенно Тарас обозначил их кругами.

У ребят был еще один внутренний термин — матрица тарификации 3×3 (три типа грузов, три типа сроков). Их тоже вытаскиваем на холст.

Если соединить геотарифные зоны и матрицу, можно получить такой набор форм:

— Кажется, вы замешиваете все подряд до появления ощущения смысла.

— Когда предпосылок нет вообще никаких, их надо создавать.

— Почему бы тогда не взять что-то с потолка?

— Потому что без легенды оно не будет иметь должного веса, не даст потомства. Вы наверняка интересовались происхождением флага какой-нибудь страны, там куда более запутанные истории.

Следом под микроскоп попало название. Вообще так себе название на первый взгляд: три буквы, которые могут значить все что угодно. Обсуждали даже его замену, ничего внятного не родили, потом вспомнили про MTC, SMS, IBM — и как-то успокоились.

Осталось сложить первое, второе и третье.

Теперь в арсенале образной концепции у нас есть круги, пересечение плоскостей и засечки — от этого можно рисовать остальную графику и подбирать шрифты.

Теперь попробуем вырастить образы из внутренних ценностей бизнеса. Есть такие ребята — Emex. Ничего особенного на первый взгляд, однако это одна из основных торговых площадок автозапчастями в России. И дело не в этом:

А в этом:

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

Уверен, внутри многих взрослых компаний ценностей хватит на документальный фильм. И это очень плодородная почва для образов.

Так мы увидели, что магазин Emex собран из металлоконструкций, коробок, желтых лент и дотошного учета.

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

Попробуем представить кнопку для таких прагматичных ребят. Она какая? Теплая или холодная? Круглая или прямоугольная? Высокая или приплюснутая?

Не думаю, что ребята готовы разбрасываться квадратными сантиметрами — выберут кнопку приземистую, по классике. Уверен, их лезвие Оккама соскоблило бы налет теней, округлостей и модной капители — и сошел бы с конвейера Emex такой экземпляр.

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

Ход со свитчами показывает, что Emex живет не в мире черно-белых коробок, а в мире необходимого и достаточного. И разумеется, я не собирал с ребят мнения о кнопках — им некогда думать о подобной ерунде.

— А в каком виде вы храните все эти рассуждения? Как о них узнают ваши коллеги?

— Пересказываем друг другу за вином. Многое рождается в наших диалогах. Еще полезная привычка — иногда вечером скинуть в общий чат несколько макетов с описанием находок; только важно скидывать не все подряд и не делать из этого отчет о проделанной работе.

— Информация при пересказах не искажается? Не теряются ли объяснения в чатах?

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

По-моему, полезно проговаривать её снова и снова, каждый раз чуть иначе, с новыми подробностями, слышать от собеседника неожиданные вопросы и глубже понимать сами образы. Кстати, недавно чистил диск и нашел видео, где этот процесс запечатлен (2016 год, золотой состав команды «Яндекс.Поиска», ах).

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

Свой рассказ я пишу на естественном языке. Естественный — значит органичный разуму: и насколько сложно удерживать в уме сложноподчиненную систему, настолько же сложно фиксировать ее на этом языке (смотри любой юридический договор).

Формальные языки — искусственные языки, характеризуются точными правилами построения выражений и их понимания. Они антагонисты естественных, имплантаты для нашего разума, позволяющие преодолеть его ограниченность в конструировании систем. Примеры таких языков: математика, программный код, чертежи и схемы. Далее переносим мышление в формальную плоскость.

Конечный продукт дизайна — модель, которая передается технологии для реализации. Качество дизайна — это качество модели. Что определяет качество модели:

— Ой, ну нет. Извините, но качество дизайна определяется только тем, решает ли он задачу. Остальное вторично.

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

— В этих диалогах последнее слово всегда за вами. А я вот не согласен.

Отсюда следуют две основные причины плохого дизайна (весь рассказ я борюсь именно с ними): дизайн выдает за конечный результат бессвязные формальные конструкции или противоречивые смыслы естественного языка (пускай и в обертке спецификаций).

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

На самом же деле, разум не работает вне образных ассоциаций — но без утвержденной образной концепции то и дело липнут случайные образы из детства, из утренней ленты Instagram, из любимых приложений и так далее. Культурный контекст у каждого свой, поэтому не будет конца спорам о скруглениях, цветах и тенях.

К чему приводят модели, созданные на естественном языке. Я отмечал, что естественный язык не годится для фиксирования сложноподчиненных систем; продукт — это сложноподчиненная система. Создание и поддержка продукта в пространстве естественного языка — это затратная и изматывающая процедура с неприлично низким КПД.

После воодушевляющей стадии быстрой и хаотичной отрисовки первой партии макетов работоспособность дизайнера падает до одного экрана в неделю, нанимают по одному дизайнеру на экран, между участниками команды возникает лавина перекрестных встреч и споров. Легко представить, что уходит в разработку, — поэтому рассматривать ее решения уже не имеет смысла.

Будем разбираться, как подступиться к формальному описанию дизайн-моделей. Новый термин:

Скорее всего, определение показалось вам странным. Пускай это пока будет не определением, а загадкой — ниже я буду ее распутывать.

Сегодня говорят о компонентах интерфейса, о компонентных фреймворках. А раньше говорили «элементы интерфейса» — так в чем разница? Понятие компонента включает понятие элемента (графического воплощения) и дополняет его.

Например, посмотрите, сколько всего неугомонные материалисты написали про кнопку. Или вот еще штука — Storybook, в которой кнопку можно описать с разных сторон: перечислить состояния, входные параметры, исходящие события, отличия на разных платформах и так далее. В чем воплощается компонент кнопки с точки зрения дизайна (модели):

Технология добавляет свои ветки.

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

И вот оно, сложноподчиненное воплощение компонента кнопки.

Я не собираюсь затрагивать в своем рассказе ветки технологии, но мне хотелось показать исчерпывающий пример интерфейсного компонента. Теперь определение перестало быть загадкой, но давайте еще разберем слово «изолированные». Важно и в голове, и в макетах, и в организации кода держать такую иерархию интерфейсной библиотеки, чтобы в корне были имена компонентов — и только за ними темы, платформы, типы и так далее.

Если вам сегодня кажется такая организация очевидной — прекрасно. Но ещё недавно в корне библиотеки могли лежать платформы, темы или технологии (CSS, JavaScript), что размазывало знания о компоненте и не позволяло ему сохранять целостность — он фиксировался лишь в уме, в пространстве естественного языка.

От теории к практике я начну переходить через простые и знакомые вам примеры. Мне важно показать, что одни и те же приемы стоят за кнопкой, за сложной формой и за целым экраном.

Итак, компонент характеризуется абстрактным описанием и доопределением бренда. Последнее задает компоненту стартовую визуальную конфигурацию (внешний вид состояний), а дальше он живет согласно поведению. Поведение описывает правила переключения состояний.

Графический интерфейс — это иерархия компонентов с переключающимися состояниями. Поэтому спроектировать интерфейс — значит разложить его на компоненты, описать состояния каждого, описать правила перехода между состояниями, описать анимации переходов.

Давайте назовем компонент без доопределений бренда — абстрактным. Интерфейсы разных продуктов на 90% состоят из одних и тех же абстрактных компонентов. Это сложно не увидеть, когда ведешь несколько проектов параллельно. И это позволяет качественно ускориться:

Например, вот матрица состояний, описывающая кнопку для Emex.

А вот ее производная матрица, кнопка для DMS.

Я не могу вам показать сам абстрактный компонент, потому что его представления без бренда не существует — он между брендами.

Кстати, крайне рекомендую сразу раскладывать новый компонент на состояния, пытаться угадать, какие комбинации состояний понадобятся в будущем. Это вынесет на поверхность крайние случаи, разрешение которых повлияет на ваш дизайн и сделает его крепче. То есть вы первыми должны пытаться сломать свой дизайн, потому что следом его будут ломать другие дизайнеры и разработчики.

Поговорим о тех 90%, которые сквозят между всеми моими проектами. Я снова буду вынужден показывать не абстрактную, а конкретную графику — давайте DMS. А начнем с самых базовых компонентов, с контролов.

С каждым элементом формы точно так же, как с кнопкой, — собираю матрицу состояний. А еще такое представление наиболее наглядное для разработки (по их же отзывам).

Кстати, помимо всех состояний, я сразу продумываю обе платформы.

И обе темы, если они предусмотрены в продукте (например, в «Таксометре»).

Еще раз: почему важно делать эти вещи сразу, а не задним числом — потому что это обязательно повлияет на дизайн. А если в разработку уже уйдет одна из платформ или одна из тем, а вы продолжите доделывать остальное, вы будете очень скованны в возможностях.

— А не получится ли в итоге так, что все продукты будут слишком похожи друг на друга? Я уже сейчас, глядя на контролы, вижу много общего.

— Отчасти я этого и добивался, чтобы все увидели, как много общего между разными продуктами. Но не думаю, что это убивает их индивидуальность — характер формируют и цветовые пятна, и уникальная композиция элементов на экране, и характерные для индустрии вещи: много карты, много графиков, много таблиц. Давайте посмотрим:

— А вы пробовали ходить совсем в другую сторону? Крупная типографика, менее строгие шрифты, неправильные формы и так далее.

— Пробовали, ходим и будем ходить. Однако кое-что приходится учитывать. Масштаб типографики и активных элементов определяется количеством информации и сценариев, которые нужно на экране разместить. Поэтому в бизнес-инструментах все довольно мелко и плотно, а в «Таксометре» всё плотно, потому что крупно. Потом шрифты, выбранные брендами, с которыми я работаю, похожи друг на друга.

Это явление времени объяснял Кристиан Шварц — расплата за удобство и универсальность. Но, конечно, это можно ломать. Например, поиск графики для Emex начинался с более радиальных шрифтовых решений.

Но эти вещи не бесплатны: не каждое слово и не каждое состояние элемента или их комбинация будут хорошо смотреться.

Так придется делать много ручной доводки и исключений. Не думаю, что утилитарным интерфейсам все это нужно — повторюсь, там и так задач хватает (и неправильных форм, кстати, тоже).

— И куда же девать все эти модные ходы?

— Я думаю, что это другой жанр. Скажем, вот Тарасу нужно было зрелищно представить бизнес-статистику.

На мой взгляд, получилось шикарно. Однако смотрите, какие вылезли проблемы, когда попросили добавить утилитарщины (формы, уточняющие таблицы, неконтролируемой длины и содержания списки и так далее).

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

С этим столкнулись не одни мы. Вот другие ребята тоже работают в зрелищном жанре.

Приемы которого ломаются в тех же местах.

Мы сильно отвлеклись, давайте продолжим позже.