Абстракция и декомпозиция
Как рассматривать интерфейс на разных уровнях, разбирать его на части и находить общие правила. Теория к Figma-02.
На этой странице
Когда смотришь на готовый интерфейс, видишь сразу всё: тексты, изображения, кнопки, отступы и цвета. Чтобы разобраться в нём, полезно сначала понять назначение целого, затем рассмотреть его устройство.
В этой статье к занятию Figma-02 разберём три приёма: выбирать нужные подробности, делить целое на части и находить общие правила. Они помогают объяснять свои решения и собирать интерфейс осмысленно.
Абстракция: какие подробности сейчас важны
Абстракция – это представление объекта через свойства, важные для выбранной задачи. Остальные подробности мы пока оставляем за рамками рассмотрения.
Например, выбирая квартиру по плану, Вы смотрите на комнаты, двери и окна. Толщина электрических проводов на таком плане не показана: для выбора расположения комнат она не нужна. Электрику понадобится другой план той же квартиры, с проводами и розетками.
Оба плана описывают одну квартиру, но показывают разные подробности для разных задач.
Так же можно рассматривать интерфейс. Сначала понять, что человек должен сделать на странице. Затем решить, какие элементы ему помогут. После этого подробно проработать каждый элемент.
Одна кнопка на разных уровнях
Представьте кнопку «Сохранить» в редакторе документа. Посмотрим на неё, постепенно переходя от результата к устройству.
Переключайте уровни: объект остаётся тем же, но вопросы и подробности меняются.
Я нажал «Сохранить». Мои изменения сохранились?
Есть несохранённые изменения.
Как программа выполняет сохранение и выводит кнопку на экран.
Когда говорят об уровне «выше», обычно имеют в виду описание, близкое к назначению: «сохранить документ». Уровень «ниже» раскрывает, как это обеспечивается. «Выше» и «ниже» здесь не означают «лучше» и «хуже».
Это не закреплённые роли людей. Один дизайнер может сначала рассматривать страницу целиком, а затем перейти к устройству кнопки. Один разработчик может сначала обсуждать результат для пользователя, а затем разбираться в том, как его обеспечить.
Декомпозиция: из чего состоит целое
Декомпозиция – это разбор целого на части, у каждой из которых есть своё назначение.
Выберите часть карточки. Подсветка покажет её границы, а пояснение – зачем она нужна.
Целая карточка
Помогает узнать товар, оценить предложение и перейти к покупке.
На уровне каталога можно работать с карточкой как с одним готовым элементом.
При этом части должны работать вместе. Например, длинное название не должно перекрывать цену, а кнопка должна оставаться заметной рядом с остальной информацией.
Чем это отличается от абстракции
Эти приёмы часто применяются вместе, но отвечают на разные вопросы:
- Абстракция: «Какие подробности карточки сейчас рассматриваем?» Например, на этапе обсуждения каталога считаем карточку готовым элементом с товаром и ценой.
- Декомпозиция: «На какие части разберём карточку?» Когда начинаем её проектировать, выделяем изображение, название, цену и кнопку.
Насколько подробно разбирать
Глубина разбора зависит от того, что Вы делаете.
Если размещаете карточки в каталоге, удобно работать с каждой карточкой как с целым. Если настраиваете её содержимое, нужно рассмотреть части. Если исправляете кнопку, потребуется ещё более подробный разбор: надпись, иконка и отступы между ними.
В Figma не нужно превращать каждую выделенную часть в отдельный компонент. Название может остаться текстовым слоем. Компонент полезен там, где Вы хотите повторно использовать элемент и поддерживать его экземпляры по общим правилам.
Обобщение: что у разных элементов общего
Обобщение – это поиск общих свойств у нескольких конкретных случаев. На их основе можно создать общую модель – описание того, как устроены эти случаи.
Меняйте надпись и состояние. Посмотрите, что у разных кнопок остаётся общим.
Форма, место для иконки и надписи, отступы и состояния.
Покупка товара: перед оплатой человеку нужно видеть цену и условия покупки.
В Figma такое общее устройство можно выразить компонентом. Его экземпляры будут конкретными кнопками на макете: одна – «Купить», другая – «Сохранить».
Такой же приём работает с карточками товаров. Фотографии, названия и цены различаются, а правила расположения частей остаются общими.
Хорошее обобщение сохраняет нужные различия. Например, опасное действие «Удалить» стоит отличить от обычного «Сохранить», даже если обе кнопки используют общий компонент. Одинаковая форма ещё не означает одинаковое назначение: поле ввода и кнопка могут быть похожи внешне, но пользоваться ими нужно по-разному.
Примитив: что считаем готовым элементом
Примитив – базовый элемент, внутреннее устройство которого мы в текущей работе дальше не разбираем.
При сборке карточки готовую кнопку можно считать таким элементом: Вы берёте её из набора компонентов и размещаете на макете.
Но если задача – спроектировать саму кнопку, Вы уже разбираете её на надпись, иконку и фон. А готовую иконку пока используете как целое. Если понадобится изменить её форму, перейдёте к контурам и точкам.
Поэтому один и тот же элемент в одной задаче может быть готовой частью, а в другой – предметом подробного разбора.
Как применять это в Figma
Допустим, нужно спроектировать каталог товаров.
- Начните с назначения. Что человек должен узнать и сделать? Например, сравнить товары, увидеть цену и добавить подходящий товар в корзину.
- Разберите интерфейс на части. Сначала каталог на карточки, затем карточку на изображение, название, цену и кнопку. У каждой части должно быть понятное назначение.
- Найдите общие правила. Сравните несколько карточек и кнопок. Решите, что в них повторяется, а что должно меняться.
- Соберите макет и проверьте разные случаи. Подставьте длинное название, товар без фотографии и цену со скидкой. Если что-то ломается, уточните устройство нужной части.
Во время работы Вы будете переходить от целого к деталям и обратно. Например, увеличив кнопку, снова посмотрите на карточку целиком: хватает ли места названию и цене, удобно ли воспринимать всё вместе.
Небольшая практика
Возьмите карточку мероприятия, например лекции или концерта.
- Опишите, что человек должен понять по карточке и какое действие выполнить.
- Выделите части карточки и объясните, зачем нужна каждая.
- Выберите одну часть и рассмотрите её подробнее. Например, что входит в блок с датой?
- Сравните карточки двух мероприятий. Что у них общее и что обязательно должно различаться?
Смысл этих приёмов – научиться объяснять устройство интерфейса: зачем нужно целое, из каких частей оно состоит и какие правила связывают их между собой.