Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Glossary

Словарь для веб-дизайнера: что такое "Аффорданс"?

by
Read Time:3 minsLanguages:

Russian (Pусский) translation by Alex Bogdanov (you can also view the original English article)

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

Основные определения

Иногда возникает недопонимание, что же именно значит аффорданс, так что давайте взглянем на три соответствующих термину определения:

Аффорданс

Определение, данное еще Джеймсом Джей Гибсоном в 70-х годах, утверждает, что аффорданс — это возможные взаимодействия между объектом и отдельной личностью. Дверная ручка — самый частый пример; она подразумевает собой вращательное движение. Распознает ли человек возможность этого действия или нет неважно — аффорданс все равно присутсвует.

Воспринимаемый аффорданс

Термин, как мы его используем в настоящее время, был популяризирован Дональдом Норманом в книге "Дизайн повседневных вещей" (опубликованной как "“The Psychology of Everyday Things”) и он немного противоречит таковому Гибсона. Норман взял идею аффорданса и добавил к ней интерпретацию человеком, давая нам определение того, что такое "Воспринимаемый аффорданс".

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

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

Воспринимаемый аффорданс особенно релевантен дизайну интерфейсов, на что мы сейчас и взглянем.

Означающие

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

Дизайн взаимодействий

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

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

О "плоских" вещах

Дисплей монитора плоский; он является не более чем набором пикселей. Но предлагая глубину и объем при помощи графики, мы можем привнести воспринимаемый аффорданс в наш дизайн, чтобы помочь пользователям. Возьмем, к примеру, кнопки. Какая их этих кнопок наиболее эффективно предполагает действие клика?

Глубина нижней кнопки означает, что она может быть нажата

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

Какая из трех — кнопка?

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

"Хороший дизайнер делает так, чтобы подходящие действия были легко воспринимаемы, а ненужные — спрятаны." — Дональд Норман

Не забывайте про это

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

Дальнейшее чтение

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.