Глава 2b: Цифровые интерфейсы
Уверен, что назначение интерфейсов из физического мира вам понятно на 100%, но мне хотелось бы продемонстрировать связь между интерфейсами физическими и цифровыми, чтобы ответить на вопрос — что такое цифровой интерфейс и в чём его отличие?
В качестве примера возьмем известный датский конструктор фирмы Lego.
Так вот, User Interface есть не что иное как кубики Lego, из которых вы на заданной ограниченной площади (в нашем случае, допустим, на экране смартфона) наводите красоту, удобство и порядок.
На примере кубиков Lego мы должны сделать один важный вывод — кубики бывают не только цветными и статичными. Взаимодействие человека с ними может активировать и другие их возможности, например, двигаться или крутиться, соединяться с другими кубиками и образовывать сложные конструкции и механизмы. Имея неограниченное количество кубиков всех форм, цветов и размеров, можно собрать поистине уникальные конструкции... ой, то есть интерфейсы.
Наши кубики мы можем условно разложить на несколько типов. Важно понимать их глубинные различия, так как не все они взаимозаменяемы и далеко не везде уместны. Для начала разберёмся в терминологии.
• Controls, их в наших широтах так и зовут — контролы. Аналог из мира физических интерфейсов. К ним относятся: кнопки, крутилки, ползунки, чек-боксы, радио-кнопки, переключатели и т.д.
• Navigation bar. Навигационные панели, обычно расположенные сверху и снизу экрана. Иногда они располагаются слева или справа. Внутри них находятся: кнопки-иконки, текстовые надписи (label или надписи по-русски)разделов приложения, а также индикация того раздела, где пользователь в данный момент находится. В терминологии UX пользователь несколько отличается от человека, но об этом позже.
• Text. За исключением гиперссылок (URL)текст по своей природе статичен. Под статичностью текста я подразумеваю, что содержание текстовых блоков может изменяться системой, но не пользователем. Текст бывает двух видов: одна строчка (text field) и много строчек (text area). С этим не должно возникнуть проблем.
• Input. Тоже контрол, но концептуально отличается от тех же аналоговых интерфейсов из физического мира. Дословно Input — ввод. В нашем случае – ввод информации. Наверняка вы хоть раз в жизни заполняли на сайте какую-нибудь форму и вводили в соответствующие поля своё имя, номер телефона, количество товаров, дату рождения, email-адрес. Так вот, всё это были инпуты.
• Bolean. Хитрый и сложный класс контролов, название которого в переводе на русский язык не даст ничего. По сути это выбор одного или нескольких значений из списка. Канонический пример: выбор пола – М / Ж / Другое (времена нынче такие). Или, например, «покажи мне машины» и далее выбор из нескольких чек-боксов: красные | чёрные | серые | белые | золотые.
• Widget. Виджет — это просто виджет. Обычно под ним подразумевают некий компонент вроде календаря, который плюс-минус везде ведёт себя одинаково. Можно объяснить его суть так: виджет – есть компактный блок, наполненный контролами и данными, отображающими какую-то информацию, либо дающий возможность этой информацией манипулировать. Звучит мудрёно, но вспомните погодные виджеты, календарь выбора даты, баланс ваших счетов в банк-клиенте, и вы составите правильное представление о виджете.
• Component. Компонент — это некий контейнер, в который можно напихать контролы, инпуты и текстовые значения. Как мешок с кубиками Lego. Нынче очень модный термин, знакомый разработчикам относительно давно. Для нас с вами это всего лишь условный контейнер, в который мы напихиваем всё, что нам нужно, и используем во всём приложении. Компонентов может быть сколь угодно много. Считайте это абстракцией, как группа слоёв, которую вы объединили в layer group.
Ух, сложно. На самом деле запоминать это не нужно, информация у вас уже отложилась, а закрепить её вы сможете только практикой.
Теперь, давайте опустимся на уровень ниже. Уделим немного внимания самым распространённым контролам и инпутами, дабы вы лучше поняли о чём было написано выше.
• Button. Кнопка. В зависимости от контекста и назначения, кнопка может иметь несколько разновидностей — быть текстовой, кнопкой-иконкой, с градиентиком или обводкой...
• Checkbox. Так и есть, чекбокс. В народе ласково именуется «галочкой». Типичный представитель bolean-контролов, благодаря которым осуществляется выбор между ДА и НЕТ.
• Radio button. Как ни странно, просто радио-кнопка. Обычно этот bolean-контрол используется для выбора ОДНОГО из двух и более вариантов. Но не стоит им злоупотреблять в случаях, когда выбор доступных значений превышает шесть единиц. Кстати, табы в навигации есть не что иное, как радио-кнопки, просто выглядят по-другому.
• Toggle. Он же переключатель, он же Switcher(в терминологии iOS). По сути это тоже bolean-контрол, но он всегда предлагает выбор между ДА и НЕТ. Служит для красоты, компактности, и однозначности, живёт, в основном, в мобильных интерфейсах, заменяя checkbox.
• Slider. Ползунок. Им можно выбрать значение в заданом диапозоне. Представьте себе ползунок управления громкостью в любом музыканом приложении. Ползунок может иметь даже две рукоятки, которыми вы ограничиваете диапозон значений. А еще на ползунке могут быть фиксированные равные шаги: 0, 10, 20, 30... (на самом деле в любом ползунке значения всегда фиксированные. Например, в ползунке с диапазоном от 0 до 1 000 000 количество фиксированных значений 1 000 001, но это сложно заметить). Главное помнить, что данный контрол не отличается большой точностью и служит исключительно для быстрого определения значения или диапозона. Для более точного ввода используйте input. Самое плохое для чего ползунок подходит - установка границ диапазона от 0 до 999 000 000. Особенно, когда этот ползунок расположен в мобильном приложении - попробуйте выставить значение «от 1 345 780 до 71 564 100», используя палец.
• Cell. Очень интересный экспонат! Это ячейка, живущая исключительно в мире мобильных интерфейсов (в таблицах Microsoft Excel ячейка имеет немного другой смысл и назначение). Так вот, ячейка - это контейнер, в котором могут жыть: кнопка; простой текст; поле ввода (input); иконка. Наверняка, вы уже все поняли. Идем дальше. В мобильных приложениях ячейка представляет собой контейнер, в котором одновременно располагаются одно или несколько текстовых значений; изображение; иконка. И вся эта ячейка есть кнопка. Либо input.
• Input. Вводить можно разные значения: символы (произвольный текст); цифры; даты и кое-что еще... вот это еще, например, может являть собой номер телефона, который может иметь супер-свойство вроде Mask (формат ввода с автокоррекцией, например, +7 (2456) 654–11–22. Еще один пример: дата в формате 12.02.1988. В этих примерах скобки, пробелы и точки подставляются автоматически). А еще инпуты могут обладать свойством Validation (проверка, валидация), чтобы не давать сохранить email вроде baron.carl.gmail.ru (валидация выявит отсутствие символа @ и неверный домен "gmail.ru"), также поле ввода цифровых символов не даст вам ввести туда буквы (только если скопировать, но валидация их сотрет, если разработчик обладает прямыми руками). Еще поиск, кстати сюда же идет — в input.
• Table. Таблица. Таблицу можно прокачать почти любыми функциями. Главное, чтобы в понимали какие из них нужны человечеству. Кстати, в мобильных интерфейсах ячейки (cells) располагаются внутри таблиц, но у таблицы всего одна колонка, потому ее и не видно как таковой.
Разумеется, дорогой читатель, это не все контролы. Их много разных, синих, красных.
— — —
Домашнее задание
Самостоятельно изучите всю палитру контролов и инпутов на примерах:
• Гайдлайнов Android — https://material.io/guidelines/components/bottom-navigation.html
• Ant.design — https://ant.design/docs/react/introduce
• Apple Human Interface Guidelines — https://developer.apple.com/ios/human-interface-guidelines/overview/themes/
Уверен, что вы найдете ответы на многие вопросы в гайдлайнах и лишний раз убедитесь в том, что UI-дизайн и конструктор LEGO имеют много общего. Но не путайте UI с UX.