Изобретение кнопки

В издательстве Альпина PRO вышла книга «Путеводитель по кнопкам». В ней дизайнер, писатель и путешественник Андрей Маркелов описывает историю интерфейсов от первых компьютеров до виртуальной реальности, разбирает происхождение стандартных компонентов типа кнопок, списков и вкладок и рассказывает, как на их основе собрать собственную дизайн-систему.

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

Про появление первой электрической кнопки мы знаем так же мало, как и про изобретение колеса, хотя кнопку придумали в 19 веке в Европе, а колесо изобрели примерно в -3500 году в Месопотамии.

Рейчел Плотник в своей книге Power Button («Кнопка включения») пишет, что кнопки появились «не позднее 1880 года» и использовались для замыкания электрической цепи. И хотя люди к тому времени уже почти 50 лет пользовались азбукой Морзе, штуковину в его аппарате правильнее называть рычагом, а не кнопкой. Так что Плотник, наверное, права.

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

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

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

Давайте и мы внимательно изучим, как же работает кнопка.

Ее самая сложная часть таится вовсе не в нажатии, а в механизме возвращения в исходное состояние. Какие только конструкции не предлагались, чтобы «отжать» кнопку! Самый простой вариант — использовать пружину или посадить кнопку на упругую мембрану из резины, как предлагал в 1885 году некий мистер Госонко из города Козлова, приславший свое изобретение в журнал Scientific American. Были механизмы и гораздо сложнее, как, например, запатентованная в 1894 году американцем Маклафлином кнопка дверного звонка, состоявшая из тридцати трех деталей.

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

Удовлетворив страсть к дверным звонкам, к концу 19 века кнопки начали использовать для совершенно разных целей. Они стали массово внедрятся во всю аппаратуру, которая существовала в то время. Так, компания Kodak в 1888 году запустила знаменитую рекламу новых кнопочных фотоаппаратов, слоган которой заявлял: «Вы нажимаете кнопку — мы делаем все остальное». Другая компания, Eveready, в 1899 году получила патент и выпустила первые кнопочные фонарики, работавшие от батареек собственного производства, которые сегодня выпускаются под брендом Energizer.

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

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

Первого марта 1973 года исследовательский центр Xerox PARC представил первый в истории графический интерфейс.

Скевоморф атакует

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

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

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

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

Часто такая имитация действительно помогала человеку адаптироваться к новому миру, но иногда это доходило до абсурда. Самый известный пример — знаменитая Horsey Horseless (англ. лошадь-безлошадь). Один американский изобретатель в попытках сделать автомобиль менее пугающим для лошадей и жителей деревни додумался приделать к нему макет... лошадиной головы. Хорошо, что его изобретение не ушло дальше патента: вместо сияющих капотов автомобили Генри Форда вполне могли бы снабжаться громадной бронзовой конской головой.

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

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

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

Графический интерфейс, представленный Xerox PARC в 1973 году, стал грандиозной вехой в истории техники. Этот скачок был гораздо более невероятным, чем переход от деревянных храмов к каменным и чем переход от огненных свечей к электрическим лампочкам. Наверное, поэтому почти каждый элемент графического интерфейса является — или раньше был — скевоморфом, имитирующим какой-то объект реального мира.

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

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

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

Античные кнопки

Мы начнем с кнопок — самого простого элемента интерфейса.

Эпоха Античности для них началась в 1973 году с выходом Xerox Alto, первого персонального компьютера с графическим интерфейсом. Вместе с ним появилась и первая интерфейсная кнопка, ознаменовав конец первобытной эпохи кнопок физических. Выглядела она максимально просто: это была короткая надпись на английском языке, обведенная клетчатой рамочкой.

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

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

Взглянем на один из первых в истории файловых менеджеров, приложение Neptune для компьютера Xerox Alto. Это античный аналог проводника Windows, хотя своим двухколоночным интерфейсом он скорее напоминает Norton Commander. Работа с файлами нас сейчас не интересует; а вот что интересно — так это верхняя панель управления, на которой размещено несколько кнопок: Start, Quit, Clear и Type. Об их значении легко догадаться из названия, и даже если убрать обводку, по надписи-глаголу все равно будет понятно, что в это место можно нажать и ожидать выполнение действия.

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

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

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

Это говорит о системном непонимании незначительных, почти неуловимых логических отличий, которые лавинообразно приводят к грубым ошибкам в сложных интерфейсах. Ссылку и кнопку нельзя соединить
в один компонент хотя бы потому, что у ссылки другой набор состояний: кроме Hover (при наведении) и Pressed (при нажатии) ссылка бывает Visited (посещенной), но такие «мелочи» сегодня принято игнорировать.

Состояния кнопок

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

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

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

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

Подобную имитацию нажатия неправильно называть положением, поэтому используется другой термин: состояние кнопки. Таким образом, мы можем говорить, что кнопка в интерфейсе Xerox Alto имела два состояния: исходное и нажатое, которые в современных дизайн-системах называются Default и Pressed.

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

Эпоха Античности была в самом расцвете, когда 1 апреля 1976 года родилась компания Apple, ознаменовав начало нашей эры. Вопреки стереотипу, ранние компьютеры компании не умели работать с графикой и использовали текстовый интерфейс. Первым компьютером Apple с графическим интерфейсом стал Lisa, который появился только в 1983 году — всего за год до выпуска Macintosh, дальнейшего распада Империи и заката эпохи Античности.

Однако пришедшие затем Средние века не были такими темными, как иногда рассказывают историки. Хотя интерфейсы Средневековья выглядят устаревшими, они были хорошо проработаны для своего времени. Например, дизайнеры Mac OS и Windows научились придавать объем кнопкам двумя простыми приемами: нижней и правой границе они добавляли темную обводку, а верхней и левой — светлую. Таким образом дизайнеры хотели показать, что кнопка немного выступает на зрителя относительно плоскости, а из верхнего левого угла на нее падает свет. При нажатии на кнопку светлая обводка становилась темной, а на Mac OS — дополнительно затемнялся фон.

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

Главные и вторичные кнопки

Эпоха Средневековья подарила нам множество изобретений, хотя ни одно из них нельзя назвать революционным. В период с 1984 по 2001 год ком- пьютерная индустрия словно накапливала потенциал, чтобы реализовать его на полную мощность в эпоху Возрождения, которая началась с выходом десятой версии Mac OS.

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

«Одной из задач дизайна было вызвать желание лизнуть его», — Стив Джобс на презентации OS X 5 января 2000 года

Был и еще один момент, который мало кто заметил. В той же презентации Джобс обратил внимание на новый вид кнопок. На одном из экранов справа от привычной серой кнопки Сбросить находилась синяя кнопка Применить, которая плавно меняла цвет, как будто имитируя неоновую подсветку. Стив объяснил, что синяя кнопка — это основная кнопка, которую можно нажать при помощи клавиши Enter.

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

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

Одновременно с Apple решила заняться своим интерфейсом компания Microsoft и в том же 2001 году выпустила Windows XP. В этой системе также появилось деление кнопок на основные и вторичные. Оба типа кнопок имели белый фон, но основная кнопка получала дополнительную синюю обводку. Кроме того, система привнесла в дизайн собственную инновацию, добавив кнопкам третье состояние. Теперь кнопка не только затемнялась при нажатии, но и подсвечивалась оранжевой обводкой при наведении мыши.

Интересно, что третье состояние, которое сегодня называется Hover, так и не появилось в Mac OS. Эта система до сих пор использует только два состояния кнопок: обычное и нажатое. Возможно, дизайнеры Apple правы: в конце концов, никакого «наведения» в физическом мире не существует, так зачем же добавлять его виртуальным кнопкам?

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

Этот эффект настолько важен, что может даже компенсировать недостатки логической части. Например, интерфейс Facebook*, являясь весьма неудобным, выглядит довольно привлекательным и дружелюбным. Это называется эффектом «эстетика-юзабилити». Экспериментально показано, что из двух эквивалентных интерфейсов более удобным кажется тот, который выглядит более привлекательно.

* Деятельность Meta Platforms, Inc. (в т.ч. по реализации соцсетей Facebook и Instagram) запрещена в РФ как экстремистская.

Так что же такое состояние при наведении? В поисках аналогии в реальном мире автор вышел на две интересные метафоры.

Представьте, что вы ищете нужную кнопку на панели управления в комнате с плохим освещением. Вы используете маленький фонарик с узким лучом, который наводите на кнопки по очереди. Кнопка, на которую направлен фонарик, становится светлее. Возможно, именно такой эффект имитировали дизайнеры Windows XP.

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

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

Входит Фотошоп

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

Верхом изящества считались контурные тени, которые были секретной фишкой Photoshop. Вместо обычной линейной тени можно было сделать тень, убывающую по кривой Безье. Контурная тень считалась таким же признаком внимания к деталям, каким сегодня считается скругление углов при помощи суперэллипсов, принятое в iOS. И точно так же не поддерживалось ни одним браузером. Впрочем, это не было проблемой: в то время кнопки делали при помощи картинок.

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

Любопытно, что все это время дизайнеры рисовали интерфейсы в Photoshop — графическом редакторе для обработки фотографий, который был для этого совершенно непригоден.

Первым нормальным инструментом для дизайна интерфейсов стало приложение Sketch, которое появилось в 2010 году и набрало некоторую популярность к концу декады, но так и не покорило сердца дизайнеров. Скорее всего, Sketch появился слишком рано. В то время скевоморфизм был еще популярен, но Sketch работал только с векторной графикой. Кроме того, программа поддерживала только Mac OS.

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

Спасение пришло откуда не ждали: скевоморфизм убила сама же Apple.

UI-киты и дизайн-системы

Ко временам скевоморфизма относится появление UI-китов — наборов элементов интерфейса, выполненных в одном стиле (англ. kit — набор).

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

Эта часть всегда была самой сложной. Среди творческих людей не просто так существует понятие «страх белого листа». Выглядело это так: дизайнер открывал Photoshop, смотрел на белый лист и не мог понять, с чего начать работу. Ведь чтобы нарисовать даже простейшую кнопку, нужно знать хотя бы какого она будет цвета и каким шрифтом делать надпись. Но чтобы это понять, нужно сначала увидеть весь интерфейс целиком, а затем спуститься на уровень кнопки. Для решения этой проблемы и были придуманы UI-киты. Дизайнер шел на Dribbble или Envato и скачивал готовый набор кнопок, например в стиле дерева (ведь книги стоят на деревянных полках), после чего находил рядом подходящую текстуру, шрифт, дорисовывал недостающие элементы и таким образом постепенно собирал все экраны приложения.

Хотя UI-киты были полезным источником вдохновения, они слабо помогали в проектировании сложных интерфейсов, в которых помимо внешней стороны интерфейса (UI, англ. user interface — пользовательский интерфейс) требовалась глубокая проработка его внутренней логики (UX, англ. user experience — пользовательский опыт). UI-киты были слишком примитивны для больших задач. Обычно они включали пару простых кнопок, радиокнопку, галочку, переключатель и ползунок. Этого было достаточно, чтобы нарисовать приложение для книг, но явно не хватало для большого приложения вроде Microsoft Excel.

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

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

Даже простейшую кнопку крайне сложно нарисовать во всех этих стилях, видах и состояниях, работая в жанре скевоморфизма. Что уж говорить о десятках других компонентов! Именно поэтому в 2013 году Apple убила скевоморфизм. Принеся в жертву красоту, компания открыла дорогу дизайн-системам, которые стали следующим шагом в развитии дизайна.

Дизайн-система — это серьезно продвинутая версия UI-кита, которая включает десятки компонентов с множеством состояний, стилей и типов. Компоненты бывают элементарными: кнопка, чекбокс, поле ввода; или составными: календарь, форма, панель управления. При этом составные элементы строятся из элементарных: так, панель управления — это не более чем набор кнопок и выпадающих списков, объединенных в горизонтальный ряд. Такой принцип называется атомарным дизайном. Он был предложен в том же 2013 году дизайнером Брэдом Фростом. Наконец, хорошая дизайн-система кроме компонентов всегда предлагает библиотеку цветов (для дневной и ночной темы) и типографские стили для заголовков и надписей.

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

Фотошоп уходит. Входит Фигма

Эпоха скевоморфизма подошла к концу в 2013 году, когда Джони Айв, директор по дизайну Apple, представил плоскую iOS 7, а через год и плоскую Mac OS Yosemite. Называть дизайн этих систем плоским стали за полное отсутствие теней, градиентов и текстур: Айв ликвидировал даже отдаленные намеки на скевоморфизм.

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

Несмотря на все ошибки и шквал критики, в целом мистер Айв оказался прав и весьма дальновиден. Немаловажно, что именно конец скевоморфизма дал дорогу великолепной программе Figma, пришедшей
на замену Sketch, от которой сегодня без ума все дизайнеры. Но еще важнее, что плоский дизайн открыл дорогу дизайн-системам, которые до сих пор были практически неприменимы за пределами больших корпораций. Как следствие, в середине 2010-х годов в дизайне произошел свой «кембрийский взрыв», породивший целый веер новых кнопочек, чекбоксиков и выпадашечек.

Одной из первых новых кнопок, которая появилась в плоской Mac OS, стала опасная кнопка (англ. Danger button). На самом деле она появилась еще в первых версиях iOS, но до настольных интерфейсов дошла лишь спустя десятилетие. Опасная кнопка выделяется красным цветом и обычно выполняет опасное действие, например удаление файла. Вслед за опасной кнопкой появились самые разные варианты этого компонента: с обводкой; без обводки, но с подсветкой при наведении; без обводки и без подсветки; а также в виде простого текста. Все эти стили мы изучим и включим в нашу дизайн-систему.

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

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

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