Даниель Розенберг в своей книге «Magic UX» очень чётко разграничил элементы дизайна по ролям.
Вкратце, элементы дизайна отображают действия объекты и атрибуты. Ну, к примеру, открываете вы карты на телефоне, сама карта на экране — это объект, кнопка «Проложить маршрут» — это действие, а пункты А и Б, между которыми лежит маршрут — атрибуты. Более подробно можно ознакомиться с сопоставлением грамматики и компонентов в таблице 1, для лучшего понимания я дополнил таблицу изображениями.
В таблице 1 перечислены общие компоненты пользовательского интерфейса и их возможное отображение для визуализации атрибутов, объектов или действий. Практикующие дизайнеры и большинство цифровых аборигенов должны узнать их по названиям. В таблице большой X указывает на то, что в теории лучше всего подходит для отображения элементов управления в грамматике. На практике это первичное отображение обычно является наиболее часто используемым, которое формирует у пользователя передачу ожиданий от обучения. Вторичные отображения (маленький x) могут работать, но распознаются не так быстро. Они реже встречаются в продуктах и услугах, с которыми регулярно сталкивается широкая аудитория пользователей.
Далее компоненты выстраиваются в виджеты.
Виджеты пользовательского интерфейса варьируются от небольших и простых до крупных, специфичных для конкретной области. Некоторые из них столь же сложны, как и одноэкранные приложения.
Виджеты очень разнообразны но в то же время все они узнаваемы. В таблице 2 перечислены стандартные виджеты, доступные в большинстве наборов инструментов графического интерфейса, с ними пользователь очень хорошо знаком.
Этот список не является исчерпывающим. Периодически появляются новые изобретения. Для популярных наборов инструментов существуют библиотеки с открытым исходным кодом как для общих, так и для специфических виджетов. Для каждого виджета в таблице предложены первичные и вторичные отображения грамматики. Как и в случае с таблицей отображений компонентов, не стоит воспринимать ее как закон. Суть в том, чтобы быть внимательным при выборе виджета, который вы развернете последовательно с семантической точки зрения на всех ваших экранах.
Этот список я также дополнил изображениями для большего понимания. визуализация не детальная, а показывающая общую концепцию, черты, по которым легко узнать виджет:
Виджеты часто взаимодействуют друг с другом на одном экране. Когда элемент управления списком используется для выбора содержимого, отображаемого в виджете формы или таблицы, это называется "отношениями мастер-деталь". Вы, несомненно, узнаете эту схему в используемой вами системе электронной почты. Пример показан на рисунке ниже. На вашем телефоне связь "мастер-деталь" будет разделена на два экрана
Хотя можно сохранить тот же визуальный паттерн взаимодействия, как и на десктопе, если расположить смартфон в альбомной ориентации. На примере приложения Telegram я показал как это можно реализовать:
Да, в стандартной (вертикальной) ориентации смартфона места для горизонтального размещения мастер-деталей недостаточно, поэтому совершенно логично, что связь "мастер-деталь" будет разделена на два экрана. Но такая логика не подходит для горизонтально ориентированного экрана. Раньше, когда экраны телефонов были не такими большими и имели не самые точные сенсоры (некоторые даже распознавали максимум два касания), такое решение было оправдано, сейчас же экраны даже самого дешевого смартфона имеют мультитач дисплеи, а многие распознают силу нажатия пера, под экраны смартфона прячут камеры и датчики сканирования отпечатка пальца. Но развивая железо, иногда забывают о развитии интерфейса, модернизируя лишь визуальную его часть.
