Поделиться , , Google+, Pinterest,

Опубликовано в:

Графический интерфейс — эмоция в форме, сообщение в ясной системе

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

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

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

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

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

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

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

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

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

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

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

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

Форма

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

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

1-kunb6fFJzaxdPCvDdL4nCQ

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

1-SG-gWiaq9rK51ToEPQN6fQ
Мой интерфейс с первого места работы

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

1-DYns-3bPVCjSVGgDHtLTnA
Эксперименты с кистями фотошопа.

1-wJyCyAH3u-NWB7bZ40j08Q
Поиски стиля

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

1-8d_S6hCvvCmwiRLJg0sCzw
Тот самый интерфейс: поиск породы собак

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

1-6N5iJk8dicACqGMiI2zEdA Логотипы и иконки сервисов внутри единой экосистемы

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

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

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

1-WMVseMDKhlEHbb9F5pjZMA
Фирменные экшн-кнопки Google

1-_MHgKOoHri0DsT663IIyfQ
Иконка лайка с узнаваемым синим и характером прочих иконок Facebook

1-Vw-E9-COuAwfBerQfj-N8A
Лого Яндекс.Денег, острый и желтый, как поисковая стрелка

1-kb9PDJOfuOICxRHXU-hliw
Лого windows 8 демонстрирует вектор интерфейса ОС

1-G__j5kCIz1sNFYDtezQEFw
Все графические приемы iOS7 упакованы в одну иконку

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


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

1-e4AAtApZftYamtdKZA5S_Q

1-AAuzaO3dxe-qkywagiZYtA

1-XweyY0O9-JQrOKn5_3ZOFQ

1-hmoTNpTvM4Dbhks8Oq5EKQ

1-Jf2I2FwE4kQr1AwnzGNIMw

1-8va2qDAAJxq52MwTKoRzmQ

1-tJSowLjIcP-moI-uHAqM8Q

1-kGrDDiWH-tIYZxvt7OT6-g

1-2e6A2ugcf8u_yBwgsO_QkQ


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

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

1-TFtXvkt64XFRrYw-H0CSJA

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

1-TFtXvkt64XFRrYw-H0CSJA

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

1-xpO4PnKBo-H3o1S1paaziw

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

1-lfjqZRtmRPwsoBPo2sh5tw

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

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

1-T3_p0ddSbc8atXK7WOG79Q

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


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

Содержание

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

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

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

1-TcuDrtX8QcVddzp0tp82pw

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

1-P09dV9gJUKfeQ9thE6goEA

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

1-u_8KVPOlyCduP8_0dU6zvg

1-jpTKThWmgg3fKjbzwqAejA

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

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

1-IkrVskq3GWOPSPmmb3z94g

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

1-RtWcfP05m97a4YrDHA-pIQ

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


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

1-bXjq7gmQVdNgU_YA0PYenA

а не так:

1-th_M1iFJVwnTrMIXP1UDpg

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

1-s8k1k4cJTm9Dg4p41_rSPg

1-TA9s1vrcyBKHHFr0bUM8dA

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

1-qz3ZwMVkDC6lvNDs61tzpQ

1-RfvzAWMJUX3h1rVDFncTeQ

или нет:

1-KUPy0NUcAUQGF5QXXRyokw

1-_h40yfy02gJPrbsyv8-kUQ

Система

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

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

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

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

1-g3V7GqVo0pm8iq3QkxlzGA

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

1-SkgKu9v5vakjz2II84SZQQ

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

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

1-6_qyP2tbJrrzLywGUAsDoQ

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

1-C2HY_hyYiSFlGHmO18zBfA

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

1-1-YWL_LVHIZzqkEyuRC4Sw

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

1-um8yz1_OdpKiOabDTLAncQ

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

1-gBhotZOIxW5Mlf5Xo_JTEw

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

1-l2OigbMS457aC4ijEfIIVg

Комбо-бокс:

1-8QSp9NPXjlGuJbREGS-5_w

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

1-9oQ8KeDPIhaWMuBHWeohYA

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

1-aMpfoFUQPbbz1QH9Y-P38g

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

1-OlJV9QaWwfiR4iFKQpA9jg

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

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

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

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

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

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

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


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

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

Критика

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


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

1-E_pE2JntAgLroox_DP7D0Q

http://www.apple.com/mac-pro/

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

1-HP0qRilpHKkXQrdAjoJ9CA

http://w-o-s.ru/article/8597

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

1-sy1Ok2BkNOnVeC9GxQw3Eg

https://www.facebook.com/

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

1--ervJAOfnKBk-uw9tWuAPg

http://zvooq.ru/

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

1-PxHN2Co-uxEJhHO3Pz75nA

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

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

1--MOotBTxU597ZWyFA7aWHw

курс доллара

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

1-3uaWDcR9_VgQQ0CQ52G95Q

http://www.pinterest.com/

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

1-jxhNQ8C5GFHQYYHJdJrzsQ

http://bangbangstudio.ru/illustrations

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

1-uLzBMaI2-4w5GpEZXanU_w

http://www.zhytlobud.com/ru/buildings/kiev/

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

1-SnZTZmMkqiuDYIesB9Mazg

http://www.yandex.ru/


У меня всё

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

Источник: medium.com

 

 

comments powered by HyperComments