Компановка экранов
КОМПОЗИЦИЯ
Что это?
В UX-дизайне важно чтобы пользователь легко узнавал интерфейс, поэтому не бойтесь банальных решений.
С помощью композиции мы можем управлять взглядом и эмоциями пользователя: у нее всегда есть иерархия важности.
Что это?
В UX-дизайне важно чтобы пользователь легко узнавал интерфейс, поэтому не бойтесь банальных решений.
С помощью композиции мы можем управлять взглядом и эмоциями пользователя: у нее всегда есть иерархия важности.
Нужно опираться на 3 составляющие: пятно, воздух и границу.
- Пятно - это все элементы композиции, в том числе объекты и тексты
- Воздух - это пространство, которое не занято пятно, такое как фоновый цвет и неяркие цвета
- Граница холста - это границы заданного экрана устройства
Сейчас в UX дизайне есть тренд на "прозрачный" интерфейс. Это такой интерфейс, в котором его элементы являются частью фона и не перетягивают на себя внимание пользователя. Таким образом, медиа-контент, за которым приходят пользователи, становится для них более контрастным.
ЗАДАНИЕ 1
Попробуйте сходу и интуитивно, не обращаясь к материалам ниже по основам композиции
Раскрыть текст задания
Попробуйте сходу и интуитивно, не обращаясь к материалам ниже по основам композиции
Раскрыть текст задания
СВОЙСТВА КОМПОЗИЦИИ
Композиция всегда стремится к завершенности.
Наша задача состоит в том, чтобы меньшее количество элементов выбирало в себя большое количество смыслов, поэтому если из композиии можно что-то убрать и она не потеряет смысл - убираем это
Композиция всегда стремится к завершенности.
Наша задача состоит в том, чтобы меньшее количество элементов выбирало в себя большое количество смыслов, поэтому если из композиии можно что-то убрать и она не потеряет смысл - убираем это
- Равновесие физическое не равно равновесие визуальное
Что влияет на чувство гармонии?
- Природа
- Культура: например, что считается симметричным, а что ассиметричным отличается в разных культурах
- Элитарность вкуса и сословная обусловленность (подробнее в видео)
Хаотично организованные композиции вызывают дискомфорт из-за нарушения гармонии
Мы умеем выделять "главное" и "второстепенное в картинке".
На уровне композии мы сообщаем юзеру какие объекты главные, какие второстепенные и какие отношения между главными объектами и второстепенными.
На уровне композии мы сообщаем юзеру какие объекты главные, какие второстепенные и какие отношения между главными объектами и второстепенными.
ОСНОВНЫЕ ПРИНЦИПЫ КОМПОЗИЦИИ
С помощью них мы можем управлять вниманием пользователя
С помощью них мы можем управлять вниманием пользователя
Мы склонны преувеличивать все горизонтальное и преуменьшать все вертикальное.
- Геометрически верный круг кажется вытянутым в ширину
- Низ линии кажется более толстым чем верх
- Круг воспринимается больше чем квадрат и притягивает больше внимания (поэтому круглые иконки обычно делают слегка меньше чем такие же, но квадратные иконки)
1 треугольник кажется более устойчивым, чем 2 треугольник, правда?
Мы отталкиваемся от границы при восприятии. Eсли у вас продукт где нет четких границ, за которые можно цепляться взглядом, юзер это будет делать за счет других объектов.
Виды композиции
Виды композиции
- объект в центре - самая простая гармония, не вызывает у нас особых эмоций
- объект около границе - создает притягивание (например, объект внизу ощущается как падение; к левому краю - как объект в движении)
- объект в углу - ощущение тесного пространства
Когда объектов несколько, мы оцениваем их отношение друг ко другу:
- если далеко, кажется, будто не относятся друг ко другу
- если близко, значит, связаны
Наш мозг группирует маленькие объекты друг с другом в одну форму
- Закон Миллер (7-+ 2) - когда на холсте очень много всего, мы совместим похожие объекты и сначала обратим внимание на эти группы, а потом будем изучать то, что находится в группах более подробно
- От больших групп к малым
- Закон близости объектов - чем ближе, тем больше напряжение и лучше считывается единство группы
Можно показать иерархию через:
- разницу в размере (самый простой способ)
- расстояние
- цвет (контрастность, интенсивность цвета)
ЗАДАНИЕ 2
На лекции его разобрать не успели, но можете сделать его для себя :)
Раскрыть текст задания
На лекции его разобрать не успели, но можете сделать его для себя :)
Раскрыть текст задания
- "Искусство и визуальное восприятие" Рудольф Арнхейм
- "Новая типографика. Руководство для современного дизайнера" Ян Чихольд
- "Framed Ink" Mateumestre Marcos
- "Нарисуй как работают иллюстрации" Молли Бэнг
КАК ТЕБЕ КОНСПЕКТ?
Расскажи, чего не хватило. От похлавы мы тоже не откажемся))
ПРЕДЫДУЩАЯ
4 ЛЕКЦИЯ. Основы Фигмы
