редакции
Олег Михалевич
Средоточие дизайна: кнопка. Обзор книги Андрея Маркелова «Путеводитель по кнопкам. История интерфейсов от первых компьютеров до виртуальной реальности»
Коллеги из издательской группы «Альпина» посоветовали нам обратить внимание на это издание. Учитывая, что рынок, в настоящее время, находится явно на границе очередного витка дизайна, смены пользовательских предпочтений, да и экономики в целом, мы не могли пройти мимо.
Итак, как ведётся в исследованиях, да и в любых начинаниях, разбор темы автором начинается с «древних времён» появления кнопок. От стадии «дверной звонок» и «кнопки автомобильной панели» до «новейшего времени», Андрей Маркелов своей книгой доносит до читателей не только исторический экскурс о том, когда и какие кнопки и интерфейсы были, но и то, почему они таковыми были. Причём с примерами, иллюстрациями, отсылками и даже qr-кодами для перехода к статьям, видеоурокам и дополнительным материалам.
Так мы знакомимся с термином скевоморфизм, т.е. ситуация, когда виртуальный элемент копирует визуальный, а порой и аудиальный, формат поведения.
Пик развития скевоморфизма пришелся на конец нулевых и начался в 2007 году с выпуска iPhone — первого телефона с управлением пальцами. Многие дизайнеры до сих пор с теплотой вспоминают интерфейсы первых версий системы iOS, в которых каждое приложение имело уникальный дизайн, проработанный до мелочей. Записки были выполнены в стиле блокнота, камера при съемке показывала анимацию диафрагмы, а книги в приложении-читалке стояли в шкафу на деревянных полках,
Скевоморфизм использовало большинство компаний XX века, а разрушителем направления стала, как и во многих других направлениях, Apple, которая столкнувшись с ограниченностью UI-китов по отношению к сложным дизайнов пришла к дизайн-системам и атомарному дизайну. Что, в свою очередь, дало дорогу проектам типа Figma.
Дизайн-система — это серьезно продвинутая версия UI-кита, которая включает десятки компонентов с множеством состояний, стилей и типов. Компоненты бывают элементарными: кнопка, чекбокс, поле ввода; или составными: календарь, форма, панель управления. При этом составные элементы строятся из элементарных: так, панель управления — это не более чем набор кнопок и выпадающих списков, объединенных в горизонтальный ряд. Такой принцип называется атомарным дизайном. Он был предложен в том же 2013 году дизайнером Брэдом Фростом. Наконец, хорошая дизайн-система кроме компонентов всегда предлагает библиотеку цветов (для дневной и ночной темы) и типографские стили для заголовков и надписей,
В дальнейшем в книгу нас ждёт подробный разбор всех элементов дизайна со следующей обязательной разбивкой:
- история/стили/варианты;
- анатомия;
- матрица компонента (подробное представление с учётом стилей, вариантов и форматов) с учётом состояния.
Препарирование
Разобрав историю, автор перешёл к препарирования, для начала, кнопок для пояснения чем же является кнопка и какой она должна быть. Вынося главное из развития истории: формат кнопки определяется от её состояния. Состояние и влияет на то, как в тот или иной момент кнопка должна выглядеть.
Какого цвета, какие закругления, в каких случаях, на каких местах, для какой аудитории, ВСЁ, что можно только рассказать о формате кнопки. Зная эту информация перед началом разработки пользовательского интерфейса, наверное, можно уже назвать себя дизайнером (на самом деле — нет).
Не будем надолго задерживаться на этом разделе, потому что кратко о нём не расскажешь, а подробно — придётся копировать для вас всю книгу. Проще — читать исходник.
Потому что:
Важно понять следующее. Весь этот набор типов, стилей, размеров и состояний порождает огромное число комбинаций. Если быть точным, то 144 варианта одной и той же кнопки. Такое количество вариантов невозможно представить в виде списка, поэтому в дизайн-системах компоненты хранятся в виде таблиц. По вертикали откладываются стили и состояния, а по горизонтали — размеры и типы,
Можно только сказать, что автор настолько подробно всё расписал, что в главе про «западающие кнопки» он указал все её состояния с подробным рассказом о том, когда и как лучше кнопку отобразить. Не обошёл вниманием автор и вариативность кнопок как таковых. Напримёр, подробно разобрав чекбоксы, галочки и крестики. Например: Автор потратил много времени в поисках универсального подхода к стилям чекбокса. В отличие от кнопки, у него как будто нет тела. Почти всегда чекбокс изображается в виде квадрата с обводкой, справа от которого находится надпись. Получается, что у чекбокса не может быть заливки или стиля Ghost, а размер может быть только один. Автор не оставил ни одну из частей строения пользовательских десктоп интерфейсов, описав всё: западающие кнопки, радиокнопки, списки, выпадающие списки, выпадающие меню, текстовое поле, вкладки и другие компоненты. Большим разделом прошёл и мобильные интерфейсы, также разобрав на примерах и иллюстрациях многообразие дизайна, включая интерфейс «Бенто». Дойдя в описании до «новейшего времени», Андрей Маркелов описал интерфейсы и смешанной реальности, которая, в свою очередь, состоит из «виртуальной/дополненной» и «смешанной реальности». Использовав, как обычно, историческое вступление, автор подробно рассказал и о том, с чего рынок «другой» реальности начинался и, конечно же, о программном обеспечении, которое её поддерживал. Началось всё с инициатив полезных для военных и медиков. Например, благодаря исследованиям использования дополненной реальности, была разработана так называемая технология «виртуальных ограничителей». Суть, которых сводится к тому, что решается проблема хирургов при операциях, чтобы не давать руке хирурга выйти за пределы точно определенной области, которая, скажем, ограничивает опухоль на внутреннем органе. Большинство людей способны нарисовать только небольшой отрезок, после чего руку обязательно поведет в сторону. Однако эта задача легко решается, если приложить к бумаге линейку. В этом случае линейка выступает ограничителем, за который не может выйти ручка при движении по бумаге. Подобную «линейку» для хирургов сделали виртуальной с помощью очков дополненной реальности. Но, наибольшее использование дизайна и интерфейсов появилось в «смешанной реальности». К примеру, возможности HoloLens позволяли взять в руки трехмерную модель, например автомобиля, и поставить ее на стол. Модель можно было вращать и рассматривать со всех сторон, и она даже отбрасывала реалистичную тень. Новые возможности потребовали новых дизайн-решений, хоть они и не сильно отличались от стандартных настольных интерфейсов. Изменились только принципы взаимодействия с виртуальным интерфейсом, так как смешанная реальность управляется при помощи глаз, рук и головы. Таким образом большинство дизайн-решений остались знакомыми пользователям, в зависимости от производителя решений программное обеспечение и его интерфейс осталось практически тем же, что, в какой-то степени, тоже можно назвать скевоморфизм. Конечно же есть и новые оригинальные решения, которые приведены в книге иллюстрациями и с подробным разбором, но это мы оставим уже для вашего чтения издания. Что можно сказать об книге? Учитывая мой профиль и любовь к чтению, за прошедший год это один из немногих материалов, который подан не просто подробно и структурно, но и с добавлением истории, художественного подхода и отсутствием лишних авторских эмоций или восхвалений. Информация предоставлена интересно, что даёт возможность изучить тему, что называется, «на одном дыхании». Читателям читать рекомендуем, а коллегам из «Альпины» большое спасибо за рекомендацию.
Сложные галочки
Удивительно, но даже о таком простом и универсальном символе, как галочка, можно рассказать много интересного. К примеру, читатель наверняка знает, что некоторые люди вместо галочки ставят Х крестик, хотя этот символ скорее перечеркивает пункт, а не отмечает. Однако мало кто слышал, что в некоторых странах именно галочка означает «неправильно», а крестик используется для правильной отметки.
Самый популярный пример — Финляндия. В финском языке слово «неправильно» пишется как väärin. Первая буква v похожа на галочку, поэтому галочкой в финских школах принято отмечать неверный вариант ответа, а для правильного используют странный знак — ⁒ коммерческий минус...
...На самом деле, галочка — это довольно новый символ. Не стоит искать его истоки в Древнем Риме. Да, скорее всего , галочка происходит от первой буквы v латинского слова veritas — «истина». Однако мировую известность она получила только после массового распространения компьютеров, а предыдущие поколения при заполнении анкет в основном рисовали крестик...,Как прекрасен этот мир, посмотри...
Так, в 1986 году в стенах IBM был описан концепт магического окна (англ. magic window), предполагавший наложение виртуальных элементов на окружающий мир при взгляде на него через специальный дисплей. Именно этот концепт сегодня используется в любом AR-приложении, а в роли магического окна выступает телефон,
Интерфейс смешанной реальности мог бы состоять из отдельных компонентов, разбросанных по всему пространству вокруг человека, однако дизайн пошел по другому пути. Оказалось, что привычные окна решают задачи гораздо лучше. Они позволяют упорядочить интерфейс, привычно выглядят, а главное — позволяют легко адаптировать десктопное приложение для шлема смешанной реальности,
Послесловие