Три правила дизайна элегантных интерфейсов

    В далёком уже 2007 году известный дизайнер Влад Головач написал статью про основные правила дизайна интерфейсов. Хорошего дизайна интерфейсов. Здесь я представляю вам полную расшифровку той статьи.

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

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

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

• ~ При разработке интерфейсной графики думают прежде всего о красоте. Однако красота редко является абсолютной (так, представления о красоте у увлечённых читателей альманаха «Товары и цены» редко соответствуют представлениям тех же дизайнеров). В результате, в погоне за выполнением призрачной программы-максимум, забывают о программе-минимум.


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


• ~ Существует устойчивое мнение, что интерфейсу вообще привлекательность не нужна, она, де, лишняя. Соответственно, о ней и не думают.

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

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

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

    Как и другие статьи здесь, данная будет регулярно обновляться, соответственно прошу не размещать её на других сайтах; достаточно установить ссылку на эту страницу. Заранее спасибо.

Из грязи в князи: три правила дизайна элегантных интерфейсов

    Этот скриншот (драйвер видеокарт ATI), по-видимому, является красивым. Во всяком случае, если бы он не был красив, заказчик бы его не принял. Несомненно, однако, что этот интерфейс не элегантен.

    Т. е. слезу гонит.

    Кошмар, короче.

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

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

    Я не ставил себе целью нарисовать один к одному. Например, я просто воспользовался нашей библиотекой интерфейсных элементов для Adobe InDesign (а она специально сделана непохожей внешне на интерфейсы Windows).

    В то же время я сохранил все пропорции исходного интерфейса.

    По-моему, получилось довольно похоже. А теперь, собственно, практика улучшения.

Правило 1. Все размеры и все пропорции должны быть взаимосвязаны

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

    Отступ от заголовка вкладки (красный) отличается от отступа рамки группировки (и справа тоже, кстати).

    Отступ между кнопками и границами вкладки/окна разный сверху и снизу.

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

    Верхний и левый отступы внутри рамок группировки не выдержаны. Имеем 4 разных отступа.

    Полоска отступает от левого края рамки сильнее, чем текст.

    Это не ошибки интерфейса. Это брак.

    Брак, потому что поштучно исправлять такие ошибки интерфейса бессмысленно. Нужно изъять саму причину появления таких мелочей, чтобы они стали вовсе невозможны.

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

    Как будет выглядеть это диалоговое окно, если перерисовать его по сетке?

    А вот как.

    Здесь все статические размеры и интервалы привязаны к ячейкам одной сетки.

    На этом кадре под увеличением показаны некоторые новые привязки.

    Даже терминальные кнопки (снизу) по ширине и высоте выровнены по сетке. Ну и название POWERPLAY™ в заголовке вкладки.

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

•    ~ Особо крупная сетка;
•    ~ Гармоничные пропорции.

Особо крупная сетка

    Назначение сетки — не только выравнивать элементы. Сетка (теоретически) помогает делать объекты пропорциональными, т. е. обладающими чёткими и заметными глазу пропорциями. Например, два к трём. Или один к одному (квадрат).

    Как правило, если пропорции выдерживаются всюду, картинка выглядит лучше, чем когда пропорции не выдерживаются. Т. е. прямоугольник с пропорцией 2х3 выглядит не сильно лучше прямоугольника пропорции 2х2,6 (хотя всё-таки немного лучше)...

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

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

    Например, здесь прямоугольники одинаковы, но изначальное расстояние между ними, равное 1/2, не выдерживается в нижнем варианте.

    А если не выдерживаются и пропорции объектов и пропорции интервалов, вообще получается ужас.

    Есть два исключения из этого правила. Глазу труднее заметить непропорциональность:

• ~ Oчень широких и очень узких объектов. Так, 1х9 фактически выглядит неразличимо лучше, чем, к примеру, 1х8,6.
• ~ Крупных объектов. Так, красная рамка на этом слайде не является квадратом, но внешне это не очень заметно.

    Вернёмся к проблеме сетки с мелкими ячейками. Такая сетка не позволяет автоматически строить такого рода целые пропорции. Просто потому, что при мелкой сетке (как была в примере) вполне возможен объект (или пустота) высотой 12 и шириной 5 ячеек (т. е. с пропорциями 2,2х1).

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

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

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

    На этом кадре показаны все обладающие заметными пропорциями объекты этого окна и приведены эти пропорции. Само окно имеет пропорцию 1х1,15.

    Пропорции сверхшироких элементов (жёлтые) незначимы, так как их пропорции глаз всё равно не воспринимает.

    Пропорции 1х1,6 и 1х1,4 (жёлтые) не нужно трогать (дальше покажу почему). 1х6 (голубая) тоже трогать не нужно (уже хорошо получилось).

    Оставшиеся пропорции можно и нужно улучшать (кстати, пропорция самой вкладки 1 х 1,7). 1,8 х 1 должно стать 2 х 1, а 1 х 1,7 должно превратиться в 1 х 1,6 или 1 х 2.

    Вот так.

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

    Я привёл внутренности окна к внятным пропорциям, но теперь то же самое я должен сделать с пропорцией самого окна. Но ведь при этом изменятся и пропорции содержимого! Это что же, по второму разу оптимизировать?

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

Гармоничные пропорции

    Не только целые пропорции (1 х 2 и т. п.) выглядят гармонично. Существует ещё много других гармоничных пропорций, не являющихся целыми. Самыми важными, вероятно, стоит считать Золотое сечение, значения пи, e и квадратный корень из двух.

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

    В математике золотое сечение обозначают символом φ. Выраженная численно, φ составляет ~ 1 х 1,618. Геометрическое построение φ очень просто — из центра стороны квадрата строят круг, стороной касающийся противоположного угла квадрата.

    Другое удивительное число — π (пи), т. е. длина окружности, чей диаметр равен единице. Выраженная численно, π составляет ~ 1 х 3,141.

    Затем идет основа натуральных логарифмов e, составляющая пропорцию ~ 1 х 2,718.

    Наконец, крайне важный для древних землемеров квадратный корень из двух, т. е. длина диагонали квадрата со стороной, равной единице (~ 1,414). Кстати, древние вавилоняне пытались посчитать его как минимум 3500 лет назад, и их расчёты даже сохранились.

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

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

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

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

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

Правило 2. Нам нужен заголовок

    Юноша может сказать девушке (или девушка юноше) просто «Я тебя люблю». А может сказать иначе: «Ну, это, короче... Типа я тебя... Это... Ну ты понимаешь... Как бы люблю...».

    Оба сообщения несут одинаковый смысл, но, будь я адресатом, я бы предпочёл чёткий и решительный вариант. Думаю, я не один такой.

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

    Мямлить — не нужно.

    Первое же сообщение, которое интерфейс передаёт своему пользоватетелю, это «Я есть вот это». Сайт знакомств передаёт сообщение «Это я, сайт знакомств». 1С: Бухгалтерия между делом замечает, что «Это я, 1С: Бухгалтерия». Пасьянс «Косынка» восклицает «Это я, Пасьянс "Косынка"!».

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

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

    Так что же говорит этот интерфейс?

       POWERPLAY.™

    Информативность этого сообщения не особо велика.

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

    Посмотрим, как с ним обстоят дела у подопытного интерфейса.

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

    Название вкладки (Graphic Settings), тоже не может служить нормальным заголовком. Визуальная важность этого объекта (т. е. степень, с которой он бросается в глаза) совершенно мизерная. Не говоря уж о том, что использовать элементы управления в качестве оформительского средства бессмысленно — они изначально уродливы.

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

    А что же мы видим здесь? Вкладка используется фактически как заголовок. Это не то что бы некрасиво... Но красивым это тоже не назовёшь.

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

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

    Получается...

    ...например, так.

    Правило 3. На самом деле это, конечно, не правило, но меня сейчас (когда я готовлю эту презентацию) ужасно раздражают жуткие отступы в дереве слева.

    Гораздо, гораздо лучше.

Правило 3. Есть всего два цвета фона — белый и чёрный.

    Остальные цвета (включая серый) — для неудачников.

    Тому есть много причин, но главными из них следует признать:

•       ~ Недостаток контраста у интерфейсов с фоном
•       ~ Потерю выделительного цвета
•       ~ Избыточность фонового цвета вообще
•       ~ Отсутствие в природе монотонных цветов.

Недостаток контраста у цветного фона

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

    Изобразительный эффект «Мао» Энди Уорхола обеспечивается сильнейшим контрастом между объектом и фоном.

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

    Картина художника Пластова «Фашист пролетел» просто безобразна. Единственное, что в ней эстетически хоть сколько-нибудь хорошо...

    ...так это контраст.

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

    Стоит убрать цвет, как пролетевший фашист превращается в практически равномерное, крайне уродливое пятно.

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

    Соответственно, всё, чем может располагать дизайнер интерфейса, это цвет фона, основной цвет (например, цвет текста), и один выделительный цвет.

    И чем сильнее будут различаться цвет фона и основной цвет (точнее, не цвета, а значения яркости), тем больше контраста будет в интерфейсе. Именно поэтому по степени контрастности нет альтернатив произвольному тёмному цвету на белом фоне или произвольному светлому цвету на чёрном фоне.

    Важное уточнение: мониторы сами испускают цвет, так что контраст может оказаться избыточным, особенно при длительной работе с интерфейсом. Допустимо снижать контраст, делая цвет фона более нейтральным (например, для ЖК-мониторов это примерно 5% чёрного). Выглядит хуже, работается лучше.

Потеря выделительного цвета

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

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

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

Избыточность фонового цвета вообще

    Крупные предметы однородного цвета окрашивают окружающее их пространство.

    Например, возле зелёного дерева всё становится немного зелёным, а возле кирпичной стены всё становится розоватым.

    Можем воспользоваться этим принципом и мы. Достаточно активно использовать выделительный цвет на нейтральном (белом или чёрном) фоне, и этот цвет зрительно окрасит окружающее пространство.

    Видали? Маленький объект зрительно окрашивает весь кадр.

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

Отсутствие в природе монотонных цветов

    Наконец, в пользу белого и чёрного цветов фона говорит и тот факт, что это единственные чистые цвета в природе.

    В мире всё имеет какую-никакую, а текстуру (как минимум, налипшую грязь).

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

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

    В таких условиях ровный цветной фон кажется чем-то совершенно ненатуральным.

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

    Разумеется, можно использовать фоны с текстурами. Например, это давно и с успехом делает Apple.

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

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

    Так что же нам делать с этим интерфейсом?

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

    ... чёрным.

    Или белым.

    Мне больше нравится белый вариант, но это вкусовое (чёрный вариант выглядит драматичнее, что, пожалуй, лучше для программы такого типа).

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

    Как видите, всего три простых правила:

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

    Могут заметно улучшить качество интерфейсной графики.

    Конечно, дизайн интерфейсов, даже ограничиваясь только работой над картинкой, гораздо сложнее. Но дальше уже чётких, лёгких в применении, правил нет.

    Я не берусь утверждать, что наш окончательный вариант интерфейса идеальный (в нём можно ещё много сделать, например, переделать ужасный переключатель сверху и кошмарную плашку со словом POWERPLAY™), но выглядит он явно лучше оригинала.

    Конец.

    Спасибо за внимание.

Комментарии:

• Кирилл Сорокин:
  Спасибо большое за такие презентации. хоть и учил в институте “золотое сечение” и другие пропорции, но в голову не приходило их воплотить в реальность )
  так что могу только выразить благодарность за то, что открыли новый взгляд на старые вещи.
  единственное - не очень понравился заголовок Graphis Settings (уж ОООчень огромный + красный…глаза режет) - но это мое субъективное мнение, а так интерфейс стал куда приятнее
• Кирилл Сорокин:
  повторно перечитал презентацию и у меня возник вопрос: в пропорциях вы говорите, что пропорции кнопок (1 х 3,4) гармоничны, но число П = 3,14 при округлении 1 х 3,1…но никак не 1 х 3,4..откуда такая пропорция тогда?
• Влад Головач:
  Неправильно выразился. Для маленьких объектов гармоничные пропорции не так важны, как совместимость с сеткой. Почти гармоничны и ладно.
• Алексей Шмелёв:
  Влад, это статья и презентация на все времена. :) Уже несколько раз ей пользовался как примером для объяснения. Спасибо!
• Василий:
  С какой же жадностью я читал вашу презентацию! Спасибо
• Ринат:
  Спасибо! Было познавательно. Понравилось, что все свои мысли вы подкрепляли крепкими доводами.