Графический интерфейс

Эмоция в форме, сообщение в ясной системе.

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

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

  • Нужно ли дизайнеру интерфейсов уметь рисовать и разбираться в шрифтах?
  • Работа с текстом — отдельная профессия?
  • Нужно ли уметь писать программы и верстать?
  • Как оценивать интерфейс?

Перед погружением пара освежающих память слов о часто используемых терминах:

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

Дизайнер — тот, кто определяет тип и содержание интерфейса.

Примеры типов интерфейса:

  • графический
  • программный
  • командная строка
  • речевой

Очевидно, речь пойдет о графическом типе.

Другими словами, в моем понимании интерфейс — это не кнопки, а дизайнер — не антипод разработчика.

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

Форма

Ценность формы я уловил сразу, а вот более внимательное отношение к цвету пришло ко мне гораздо позже. Когда школьниками мы рисовали Flash-мультики, друг меня ругал за примитивный набор цветов, вроде: #F00 для красного и #00F для синего. Сейчас мне сложно это представить, но в то время я совершенно спокойно смотрел на кислотные оттенки, которые были для меня просто сигналами цвета: «это синий», «а это красный». Я считаю, что виной всему убогий дефолтный набор цветов на пантоне Flash-редактора, который не располагал к поиску новых интересных сочетаний.

Image for post
Image for post

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

Image for post
Image for post
Мой интерфейс с первого места работы

Одно время я даже собирался стать иллюстратором. Скачал все выпуски журнала 2D-artist, повторял по шагам уроки рисования всякой фантастики, анимэ-персонажей, животных с густой шерстью, снега на ветках и прочего. Это оказалось не так сложно, если ты рисуешь десятого волка и двадцатое дерево. Рисовать что-то своё гораздо сложнее, конечно же. Нужна практика, как и во всём.

Image for post
Image for post
Эксперименты с кистями фотошопа
Image for post
Image for post
Поиски стиля

Но первую зарплату мне дали не за картинки, а за работу над веб-интерфейсом научно-популярного ресурса Whoyougle — такая вот ирония судьбы. С той поры я быстро поменял фокус на то, чем занимаюсь по сей день.

Image for post
Image for post
Тот самый интерфейс: поиск породы собак

Графику я не бросил, но вместо сюжетной она стала понятийной: иконки, схемы и конструкции из блоков разной формы.

Image for post
Image for post
Логотипы и иконки сервисов внутри единой экосистемы
Image for post
Image for post
Фантазии на тему браузера в Mac OS

Эмоция в форме. Сообщение в ясной системе.

Так нужно ли дизайнеру интерфейсов уметь рисовать? Себе я отвечаю так: нужно чувствовать форму, чтобы подбирать подходящие контексту выразительные средства и распространять заданную систему на все случаи. А рисовать я так и не научился. Но могу поймать нужную форму после пары десятков cmd+Z.

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

Image for post
Image for post
Фирменные экшн-кнопки Google
Image for post
Image for post
Иконка лайка с узнаваемым синим и характером прочих иконок Facebook
Image for post
Image for post
Лого Яндекс.Денег, острый и желтый, как поисковая стрелка
Image for post
Image for post
Лого windows 8 демонстрирует вектор интерфейса ОС
Image for post
Image for post
Все графические приемы iOS7 упакованы в одну иконку

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

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

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post

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

Так в своё время ВКонтакте выбрали системный, но редко используемый в вебе, шрифт Tahoma и получили узнаваемые мелкие буковки.

Image for post
Image for post

C каким-нибудь Arial набор уникальных черт был бы скромнее:

Image for post
Image for post

Интерфейсы MacOS безошибочно узнаются во многом благодаря округлым строчным и контрастным заглавным шрифта Lucida Grande:

Image for post
Image for post

Уверен, благодаря Roboto, каждый узнает платформу:

Image for post
Image for post
Первая буква — «А»

Однажды мой коллега пошутил: «У нас в рекламе вместо голых девушек голый текст». Букварный Textbook надежно закрепился за Яндексом.

Image for post
Image for post

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

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

Содержание

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

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

Image for post
Image for post

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

Image for post
Image for post

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

Image for post
Image for post
Image for post
Image for post

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

Возможно, из-за слишком простого примера последнее утверждение звучит неубедительно. Вот кое-что похитрее. Я упоминал, что работал в научно-популярном ресурсе программистом и, в последствии, дизайнером. Так вот чтобы создать такой калькулятор калорий, мне пришлось прочитать кучу статей о правильном питании и собрать нужные данные о 360 популярных продуктах:

Image for post
Image for post

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

Image for post
Image for post

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

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

Image for post
Image for post

а не так:

Image for post
Image for post

Ведь весь интернет завален одной той же конструкцией «картинка + текст»:

Image for post
Image for post
Image for post
Image for post

И во-многом от дизайнера зависит, станет ли эта конструкция чем-то большим:

Image for post
Image for post
Image for post
Image for post
http://w-o-s.ru/article/8541
Image for post
Image for post

или нет:

Image for post
Image for post
Image for post
Image for post

Система

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

Мне всегда нравилось разглядывать детальки Lego, пытаться соединить разными частями друг с другом. Иногда казалось, что их создатели сами не знают всех комбинаций, но следуют ряду каких-то строгих правил, и в результате любой выступ на куске пластика можно соединить с любой выемкой. Так из ограниченного числа простейших элементов можно собирать бесконечное количество объектов любой сложности.

Как я перенес основную идею Lego в интерфейсы. Вот простейшая кнопка:

Image for post
Image for post

У кнопки есть состояния. Много состояний:

Image for post
Image for post

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

Теперь из нескольких слипшихся кнопок можно собрать радиогруппу:

Image for post
Image for post

Выпадающий список — тоже кнопка типа «dropdown»:

Image for post
Image for post

Всё из той же кнопки собирается слайдер:

Image for post
Image for post

Тумблер — это белая кнопка внутри checked-кнопки:

Image for post
Image for post

Чекбокс — это checked-кнопка с галочкой:

Image for post
Image for post

От элементарных элементов можно переходить к составным (ещё один простейший элемент — поле ввода). Поисковая форма:

Image for post
Image for post

Комбо-бокс:

Image for post
Image for post

Форма оплаты:

Image for post
Image for post

Часто возникает задача подсветить какой-нибудь элемент формы, указать на ошибку ввода, например. Для этого можно использовать контрастный popup:

Image for post
Image for post

До этого была заявлена линейка размеров: 24, 28 и 32 px. Теперь все контролы от кнопки до слайдера имеют именно такую высоту, и всплывающим подсказкам логично встать в эту же линейку. Так в форме всплывающие подсказки даже напротив каждого поля не будут мешать друг другу, и все элементы встанут по вертикальным и горизонтальным направляющим.

Image for post
Image for post

Отступы между элементами тоже можно зафиксировать в линейке. У меня это 6, 10, 16 и 20 px — чтобы каждый делился на два.

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

Ещё раз объясню, почему все так непросто устроено. Представьте себе интерфейс поиска, который должен что-то отвечать на любой запрос. Отвечать не просто ссылками с текстом, а объектами, музыкальным плеером, видео, картинками, картой, телефонами и адресами, товарами с ценой и кнопкой купить, рекламными объявлениями, формами, калькуляторами и конвертерами, графиками и счетчиками. Теперь представьте, что каждый ответ интерактивный: его можно трогать, тот разъедется или покажет новый блок рядом. Это только интерфейс основного поиска. А еще есть поиски по типам данных: видео, картинки, музыка, карты, товары, люди, новости, словари, автомобили и так далее — эти поиски должны быть выглядеть и работать, как основной, но каждый из них обязательно привносит что-то своё. Кроме поисков есть просто сервисы, которые тоже должны выглядеть и работать, как… Думаю, теперь вы понимаете.

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

Я вижу, как коллеги постоянно ищут серебряную пулю с графическим интерфейсом. В inDesign есть классы стилей для текста, в Axure из переключающихся экранов можно собирать прототипы, в Sketch можно создавать библиотеки объектов и собирать экраны из их копий. Рано или поздно каждый из инструментов упрется в потолок: в редакторе нельзя определять поведение элементов, а в среде прототипирования, скажем, нельзя иметь библиотеку объектов и нельзя определять другую динамику, кроме переходов между экранами.

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

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

Уверены ли вы, что вас такая сложность не коснется? А стоит ли такой сложности избегать, или это новый уровень? Уверены, что ваш проект через пару месяцев не обрастет парой десятков новых экранов? Если вы работаете с потоком однородных заказов, вроде банковской сферы, неужели, вам никогда не хотелось вынести общие знаменатели за скобку? А другому дизайнеру из команды доверяли когда-нибудь соседние экраны делать?

Я не стану здесь показывать примеры кода, которые экономят часы и дни ручного труда; глупо в наш век давать ссылки на книги или ресурсы про CSS и JavaScript. Здесь мне очень хотелось показать перспективы такого развития своих навыков. Освоить инструменты разработки не ради того, чтобы что-то доказать окружающим, не ради того, чтобы уметь всего по чуть-чуть, не ради того, чтобы понимать, о чем шутят разработчики, а ради того, чтобы пробить тот единственный потолок, за которым космос.

Критика

Это штука с другой планеты, она может всё:

Image for post
Image for post
http://www.apple.com/mac-pro/

Немного сбить с толку и обезоружить критические фильтры читателя перед началом статьи:

Image for post
Image for post
http://w-o-s.ru/article/8597

Раз человек сюда зашел, нам нужно его чем-то задеть — стреляем шрапнелью:

Image for post
Image for post
https://www.facebook.com/

У нас для тебя очень много музыки, не стесняйся, заходи:

Image for post
Image for post
http://zvooq.ru/

Сейчас ты этот досмотришь, а у нас тут ещё куча похожего, тоже в этом году выходит:

Image for post
Image for post
http://www.youtube.com/watch?v=VCTen3-B8GU

Наш кругозор шире, чем ты думал — просто спроси:

Image for post
Image for post
курс доллара

Давай смотреть картинки; поверь, тебе не надоест:

Image for post
Image for post
http://www.pinterest.com/

Просто ткните пальцем, какой стиль вы хотите:

Image for post
Image for post
http://bangbangstudio.ru/illustrations

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

Image for post
Image for post
http://www.zhytlobud.com/ru/buildings/kiev/

Вы только что сэкономили час своего времени:

Image for post
Image for post
http://www.yandex.ru/

У меня всё.

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

Written by

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store