На этой неделе я разрабатывал микровзаимодействия для функции календаря. Хотя часть «визуального дизайна» была доработана давно, движение было сложнее сделать правильно в коде.
«Это как … первый бит на мгновение, потом как-то складывается …»
Я поймал себя на том, что разработчики Стю «качают руками» в воздухе, чтобы описать, как я хотел, чтобы два компонента пользовательского интерфейса двигались.
Это тоже сработало! Но это заставило меня задуматься, как бы мы жили, если бы не были в одной комнате. Трудно «бодить рок» из-за Slack или по электронной почте.
Множество приложений обслуживают простые переходы экрана, затухания и состояния кнопок (Invision, Marvel, Adobe XD), но полных «инструментов разработки пользовательского интерфейса» меньше. Atomic.io выглядит как наша следующая остановка.
Действительно ли это важно, как движется ваш пользовательский интерфейс?
Или не простое «легкое занятие»?
Иногда так и будет, но часто нет. Мы знаем, что когда мы делаем выбор цвета, это влияет на содержание. Движение имеет значение.
Ниже приводится короткая анимация 1944 года. Ее создали экспериментальные психологи Фриц Хайдер и Марианна Зиммель . Они попросили 34 своих студентов увидеть его, а затем описать увиденное.
Это весело. Смотрите сами и скажите, что вы видите.
Анимация Хайдера и Зиммеля (1944)
Что вы сделали из анимации?
- Вы видели персонажей?
- Была ли история?
- Вы видели отношения между формами?
Если вы не видели ничего из вышеперечисленного, вы были бы необычны. Большинство из нас не могут не видеть что-то вроде следующего:
Большой треугольник — авторитетная фигура, возможно, мужчина старше.
Две меньшие формы обычно рассматриваются как молодая пара. Мы наблюдаем, как большой треугольник упрекает их, и пытается запугать меньший треугольник, чтобы он держался подальше от маленького круга. Однако, не заштрихованный, меньший треугольник возвращается, чтобы воссоединиться с кругом, и в конечном счете они убегают вместе. Большой треугольник отвечает разрушительной яростью .
Из магистрантов попросили описать, что произошло в анимации:
- 32 называют геометрические фигуры людьми
- 1 называют геометрические фигуры птицами
- Я упоминал геометрические фигуры как … ну, фигуры.
Большинство из них смогли наделить тонкими и сложными человеческими чертами такие формы, как ревность, ненависть, смелость и любовь.
Конечно, это все, несмотря на тот факт, что эти «персонажи» не имеют почти ни одной из нормальных черт, которые мы ожидаем от персонажей истории. У них нет лица, глаз, рта или конечностей. Они не могут говорить или издавать звук, и нет никаких субтитров, заполняющих когнитивные пробелы.
Аниматоры используют «Сквош и Стретч»
Формы даже не растягиваются, не сжимаются и не деформируются — традиционный и любимый инструмент аниматоров, рассказывающий истории. С чисто технической точки зрения это делает South Park похожим на 3D-захват.
Тем не менее, каким-то образом мы можем сыграть маленького Ромео и Джульетту в движении простых черных фигур. Короче говоря, мы читаем много смысла в том, как что-то движется.
Итак, теперь каждое скользящее меню становится Кевином Спейси?
Конечно, нет.
Но если элементы пользовательского интерфейса должны двигаться — уменьшаться, расширяться, скользить, подпрыгивать, вращаться и качаться — иногда то, как они перемещаются , так же важно для UX, как и то, что происходит, когда он туда попадает.