Анимации и переходы

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

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

Microsoft Windows использует фоновую анимацию флэш-памяти для отправки отзывов о щелчке объекта.

Переходы — это анимация, используемая для поддержания пользователей, ориентированных на изменения состояния пользовательского интерфейса и манипуляций с объектами, и сделать эти изменения гладкими вместо jarring. Хорошие переходы чувствуют себя естественными, часто давая иллюзию, что пользователи взаимодействуют с реальными объектами.

Гаджеты рабочего стола Windows используют плавные переходы между их краткими и подробными состояниями.

Как правило, лучшие анимации и переходы используются для обмена данными с пользователями, невербальными, и для изменения состояния более естественными и менее заметными. В отличие от этого, наименее эффективные являются необратимы в том, что они не взаимодействуют ни с чем или обращают ненужное внимание. Анимации лучше всего использовать как вторичную форму взаимодействия. Они должны сообщать информацию, которая полезна, но не является критической, и быть доступной, пользователи должны иметь возможность определять эквивалентную информацию с помощью других средств.

Примечание. Рекомендации по фирменной символики программного обеспечения, звуковыеи специальные возможности представлены в отдельных статьях.

Это правильный пользовательский интерфейс?

Чтобы решить, рассмотрим следующие вопросы.

Анимации

Применяются ли следующие условия?

• Анимация визуально взаимодействует с полезными данными, такими как предоставление отзывов, отображение связей, причин и эффектов, а также привлечение внимания к важным изменениям.
• Просмотр анимации не является важным. Эквивалентные сведения можно получить другим способом. Пользователи могут не воспользоваться анимацией, если:
  • Они отключили анимацию.
  • Их внимание в другом месте.
  • Они являются нарушениями зрения.
  • Анимация скрыта другим окном.
  • Анимация не воспроизводится из-за недостаточной производительности системы.
• Анимация не влияет на производительность пользователя. Каждый:
  • Это происходит быстро (200 миллисекундах или меньше).
  • Это не мешает взаимодействию или может быть прервано.
  • Пользователь должен ждать в любом случае.
• Анимация не влияет на поток пользователя.
  • Это либо в центре внимания пользователя, либо он обращает внимание на что-то за пределами центра внимания, которое важно или полезно при выполнении задачи.
  • Это легко игнорировать, а не отвлекать или раздражать.
  • Это не становится утомительно. Пользователи по-прежнему находят его подходящим и приятным даже после повторного просмотра.

В этом случае рекомендуется использовать анимацию.

Переходы

Применяется ли объект или состояние изменения сцены и все указанные выше условия для использования анимаций, а также любого из следующих условий?

• Изменение состояния концептуально дезориентирует, запутает или иначе трудно понять.
• Изменение состояния визуально джаривает, не хватает непрерывности или гладкости, или мигает; или отображается ненатуральным, неопослеченным или плохим качеством, особенно если он включает в себя большую область экрана.
• При переходе состояние изменится быстрее.
• Изменение состояния заслуживает особого внимания пользователя.

Если да, попробуйте использовать переход.

Концепции проектирования

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

неправильно:

правильно:

Использование анимации взаимодействует с той же информацией, но в естественном, ненавязчивом способе. Что бы вы хотели видеть тысячу раз?

Анимации и переходы не должны требовать внимания, чтобы быть успешным. На самом деле, они часто используются, чтобы избежать привлечения внимания к механике программ, о которых пользователи не должны знать. Многие успешные анимации настолько естественны, что пользователи даже не знают о них; скорее пользователи замечают только их отсутствие. Частота возникновения увеличивает потребность в тонкости, поэтому экономия эффектов, которые требуют внимания для редких событий, которые действительно заслуживают внимания.

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

Помимо упрощения работы программы, хорошо разработанные анимации и переходы — отличный способ добавить личность, характер и стиль в программу. Они могут сделать взаимодействие пользователя более иммерсивным и привлекательным, давая ему естественное, реальное чувство.

Windows 7 выделяет кнопки панели задач на основе текущей позиции мыши и цвета значка программы. Этот подход визуально привлекательный, но тонкий, передавая скромной личности.

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

Хотя некоторые типы анимаций используются для привлечения внимания пользователя, убедитесь, что внимание хорошо заслуживает и заслуживает прерывания обучения пользователя мысли. Человеческий глаз учитывает движение, особенно периферийное движение. Пользователям может быть трудно сосредоточиться, если есть мигающая кнопка панели задач или значок области уведомлений. избегайте использования анимаций для прерывания или отвлекающих пользователей или привлечения внимания к вещам, которые не гарантируют внимание пользователя.

неправильно:

Программы не должны мигать кнопку панели задач, если пользователи не должны немедленно делать что-то важное. В этом случае единственное, что необходимо сделать пользователю, — активировать программу.

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

Атрибуты хороших анимаций и переходов

Хорошая анимация и переходы повысят правильный баланс между этими атрибутами:

• Четко целеустремленны. Хорошая анимация есть, потому что они должны быть, будь то обмен информацией, сделать взаимодействие реальным или привлечь внимание к чему-то заметному. И целеустремленная анимация является точной; Если анимация показывает, что выполняется задача, это связано с тем, что задача выполняется.

неправильно:

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

• Выглядеть гладко и непрерывно. Хорошая анимация плавно удаляет швы между изменениями состояния сцены или элемента, показывая связи и предоставляя ощущение места и контекста. Непрерывность помогает пользователям понять, откуда они находятся, и как вернуться к месту, откуда они пришли.

Предварительный просмотр окна панели задач Windows 7 для обеспечения непрерывности при переходе пользователя из одной программы в другую.

• Реалистично. Хорошая анимация имитирует реальные физические свойства и поведение объекта. Это помогает пользователям прогнозировать и понимать результаты их взаимодействия. Вам не нужно моделировать реальный мир точно, но если вы используете реалистичные анимации, вы должны сохранить их в соответствии с реальным миром. Пользователи никогда не должны быть удивлены или запутаться в результатах, особенно с анимацией, используемой для прямой манипуляции.

В этом примере анимация "выйти из пути", используемая панелью задач Windows 7, чувствует себя более реалистичной, чем статическую точку вставки.

• Являются аутентичными. Даже объекты, которые не найдены в реальном мире, могут казаться естественными, основываясь на реальном поведении другого, но связанного объекта. Эта метафора работает только в том случае, если связь четко взаимодействует с целевой целью и поведением.

В этом примере анимация окна "squeegee", используемая Windows 7, чувствует себя аутентичной, так как она согласуется с тем, как стеклянные окна могут вести себя в реальном мире.

• Используйте естественное сопоставление. Естественные сопоставления являются физическими или культурными. Например, естественное сопоставление, основанное на культуре, может начинаться с того, что в западных культурах люди читают слева направо. Следовательно, для выражения последовательности времени объектов средний объект является текущим, объекты слева от прошлого, а объекты справа находятся в будущем. Переход вперед во времени обозначается движением слева направо.

В этом примере элемент управления проигрывателя Windows Media имеет естественное сопоставление, так как воспроизведение перемещает позицию слева направо.

• У вас есть личность. Хорошо выбранные анимации — отличные способы добавления личности, символа и стиля в программу. Они могут сделать взаимодействие с пользователем более иммерсивным и привлекательным. Хотя тип анимации определяет, что он сообщает, конкретный способ, в котором выполняется анимация, показывает личность программы. Хорошая анимация проектирует правильную личность для вашей программы, будь то серьезные или прихотливые, или где-то между.

В этом примере использование анимированного текста и динамической перспективы Zune помогает сформировать свою личность.

• Выглядеть и чувствовать себя адаптивным. Хорошая анимация не вредит производительности пользователя, блокируя пользователей от других взаимодействий или заставляя пользователей смотреть. Независимо от того, насколько естественны и привлекательны анимации вашей программы, никто не хочет ждать их исключительно. Хорошие анимации также выглядят адаптивными без того, чтобы быстро начать с мягкой посадки. Адаптивные анимации также могут быстро взаимодействовать с их целью. Пользователям не нужно смотреть анимацию в течение длительного времени, чтобы выяснить, что это делает или когда это делается. Для прямой манипуляции адаптивные анимации важны для поддержания прямого и привлекательного реального мира. Чтобы чувствовать себя прямыми, контактные точки объекта должны оставаться под указателем гладко на протяжении всего манипуляции. Любая задержка, отрезок ответа или потеря контакта уничтожает восприятие прямого манипуляции.

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

• Привлечь правильный уровень внимания. Хорошие анимации обычно тонкие и привлечь только внимание, необходимое для выполнения их цели. В результате они не отвлекают, раздражают, чрезмерно сложные, слишком длинные или повторяющиеся. Они не становятся утомительными после повторяющихся просмотров.

В этом примере поиск Windows временно привлекает внимание к сопоставлению слов поиска, а затем исчезает.

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

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

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

Создание словаря анимации

Хорошая анимация заключается в эффективном визуальном взаимодействии, и согласованность имеет решающее значение для их эффективности. Если вы используете определенный переход, например отправку сцены вправо, чтобы перейти к следующей сцене, это должен быть единственный переход, используемый для этой цели, и этот переход не должен использоваться для какой-либо другой цели. Назначение различных значений для одной анимации вредит его способности взаимодействовать. Назначая определенные анимации и переходы к определенным значениям, вы создаете словарь анимации.

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

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

Хотя меню "Пуск" не является реальным объектом, его эффект наведения указателя светится, как реальный объект может быть активирован.

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

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

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

Дополнительные сведения об словаре анимации Windows см. в разделе Шаблоны использования этой статьи.

Проектирование правильной личности

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

Личность вашей программы должна отражать характер своих задач и личность своих пользователей, поэтому это не произвольный выбор. Скорее, хорошо разработанная личность должна чувствовать себя аутентичной; никогда не пытайтесь заставить его. Личность должна сделать эмоциональное соединение с пользователем. Некоторые факторы, которые следует учитывать:

• задачи: серьезно или весело; необязательный или обязательный.
• последствия: серьезные или незначительные.
• затраты: бесплатные или приобретенные; при покупке, умеренной цене или дорогой.
• фокус пользователя: относительно узкой группе целевых пользователей или широкой аудитории.
• пользовательской среде: профессиональный, случайный или домашний.
• возраст пользователя: младше или старше.
• частота использования: часто или редко.

Сочетание этих факторов помогает определить соответствующую личность для вашей программы. Ниже приведены некоторые подходящие сочетания для распространенных типов программ:

приложения для повышения производительности

Естественно, приложения для повышения производительности должны сосредоточиться на производительности. Хотя некоторые специальные возможности могут выделиться, большинство других анимаций должны иметь следующие характеристики:

• Маленький
• Естественный, реалистичный
• Тонкие, подложенные
• Быстрая, эффективная
• Расслабленный

служебных программ

Служебные программы обычно используются кратко, поэтому их использование анимации может быть более агрессивным:

• Реалистичный, иллюстрированный, самоображающий
• Безопасный
• Привлечение

Развлечения, игры

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

• Большой (возможно, становится неотъемлемой частью опыта)
• Искусственный, сюрреалистический
• Эффектный, яркий
• Эмоциональный, игривый, прихотливый
• Энергичный

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

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

Производительность анимации

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

неправильно:

Хотя эта анимация поворота страницы имеет привлекательное, реальное чувство, это снижает производительность пользователей, принимая больше времени для поворота страниц.

Краткие переходы (200 миллисекунд или меньше) — это особый случай (особенно если они часто работают с задержкой), так как пользователи будут знать, что им придется ждать разбиение секунды для них. Пользователи готовы ждать таких анимаций, если:

• Предполагаемое ожидание крайне кратко (200 миллисекундах или меньше).
• Переход делает взаимодействие более гладким и естественным.
• Переход повышает скорость взаимодействия.
• Любая задержка помогает пользователю контролировать взаимодействие.

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

Существует три способа, в которых анимация может отрицательно повлиять на производительность: скорость, скорость реагирования и восприятие.

Для скорости некоторые анимации являются визуальными ветвями над задачами с интенсивным ЦП, поэтому последнее, что необходимо сделать, это сделать эти задачи медленнее с анимацией с интенсивным ЦП. Наиболее интенсивные анимации ЦП ("тяжелые" анимации) обычно:

• Включает множество элементов, движущихся независимо.
• Играйте в течение длительного времени или расстояния.
• Включает большое количество места на экране.
• Являются математически интенсивными.

Анимации с меньшим воздействием на производительность:

• Включайте один объект.
• Играйте в течение короткой длительности или расстояния.
• Включайте небольшое количество места на экране.
• Не являются математически интенсивными.

Чтобы обеспечить хорошую производительность, тяжелые анимации следует использовать только для задач, которые не являются интенсивными ЦП, в то время как легкие анимации можно использовать в любом месте.

Для реагирования большинство анимаций и переходов должны быть разработаны таким образом, чтобы пользователи могли взаимодействовать во время выполнения анимации. Если анимация не является частью процесса, сделайте его независимым от основного взаимодействия пользователя и позволить пользователям прерывать его.

Анимация может не негативно повлиять на производительность задачи в действительности, но пользователи могут иметь представление о том, что это делает. Например, не используйте анимацию, которая отображается тяжелой для медленной, интенсивной ЦП задачи, даже если это не вредит производительности, так как пользователи могут заключить, что анимация является причиной медленной задачи. Если что-то выглядит медленно, это будет чувствовать себя медленно, поэтому лучше использовать анимации, которые чувствуют себя простыми, упрощенными и быстрыми. Использование анимаций с началами snappy для задач с интенсивным ЦП помогает.

рискованно:

индикатора выполнения

Хотя анимация в диалоговом окне копирования файлов Windows не вредит производительности копирования файлов, она рискует, что пользователи считают, что это делает.

Также рискованные:

В этом примере в адресной строке проводника некоторые задачи выглядят медленно.

Анимации и переходы не имеют значения, если их качество настолько плохо, что они делают опыт менее гладким и менее привлекательным. Чтобы обеспечить качество, анимации должны быть разработаны для снижения корректности при отсутствии достаточных системных ресурсов. Анимация может снизиться, имея варианты, требующие меньше ресурсов (например, более короткие длины или более низкие частоты кадров) или даже не выполняющиеся вообще. Независимо от доступных ресурсов убедитесь, что анимации имеют высокое качество и выглядят как анимации вместо ошибок программного обеспечения.

Наконец, если пользователи считают, что анимации и переходы вашей программы отнимают от своей производительности, есть хороший шанс, что некоторые пользователи хотят отключить их. Чтобы поддержать эту возможность, соблюдайте параметр Отключить все ненужные анимации, найденных в Центре управления доступом Windows.

Привлечение правильного уровня внимания

Хотя только некоторые типы анимаций и переходов специально предназначены для привлечения внимания пользователя, они должны быть разработаны для привлечения правильного уровня внимания для выполнения их цели хорошо. Каковы различные способы привлечения внимания и как выбрать правильный?

эффекты анимации

Различные эффекты анимации привлекают различные уровни внимания. В следующем списке приведены наиболее распространенные методы, начиная с наиболее важных внимания:

• Быстрое мигание. Требует немедленного внимания. Может нарушить концентрацию пользователей независимо от того, где происходит вспышка.
• Умеренное мигание. То же самое, но требует меньше внимания с более низкой частотой.
• Здоровый. Заметные в периферийном зрения и относительно требовательные к природе. Пользователи, скорее всего, заметят, но могут продолжать сосредоточиться в других местах, только если длительность коротка.
• Движение. Заметно в периферийном зрения, но не требуется. Однако сложные или 3-D движения привлекают больше внимания, чем простые или 2-D движения. Пользователи, скорее всего, заметят, но могут продолжать сосредоточиться в других местах.
• Умеренное пульсирование. Заметно, но не отвлекает на периферийное зрение. Пользователи могут продолжать сосредоточиться в других местах. Может пульсовая яркость, цвета и размеры.
• Медленное пульсирование и свечение. Заметный, но тонкий. Привлекает больше внимания, чем статический эффект, но пользователи могут не заметить анимацию, если они уже не выглядят.
• Вянуть. Еще менее заметным. Привлекает больше внимания, чем статический эффект, но пользователи могут не заметить анимацию, если они уже не выглядят.
• Статическое выделение и блеск. Заметно, если пользователи предпочитают выглядеть, но не требуют внимания, если он находится в другом месте.
• Внешний/естественный. Намеренно не заметно, имея естественный, реальный внешний вид.

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

Например, предположим, что вы разрабатываете программу мгновенного сообщения, и кто-то только что отправил пользователю сообщение. Этот сценарий требует внимания пользователя, он должен быть заметным в любом месте, и обычно пользователь хочет быстро реагировать. В этом сценарии предполагается, что средняя мигающая анимация будет хорошим выбором. Напротив, предположим, что вы хотите сообщить пользователям о завершении задания печати. Пользователи должны продолжать сосредоточиться и работать в другом месте, и это приемлемо, если пользователи не замечают. Этот сценарий предполагает, что умеренный до медленного пульсирования или свечения будет хорошим выбором.

длительность

Соответствующая длительность для анимации внимания зависит от сценария и используемого типа анимации. Чем больше внимания требует эффект анимации, тем короче длительность должна быть. Хотя очень тонкие эффекты, которые требуют небольшого внимания (как медленное пульсирование) можно играть на неопределенный срок, внимание требующее эффектов должно быть сыграно только от 1 до 3 секунд. Все больше рискует сделать анимацию подавляющей и раздражающей.

В Windows 7 панель задач мигает только на секунду. В любом случае больше раздражает.

эффект распада

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

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

В Windows 7 эффект флэш-памяти панели задач замедляется в конце.

Что насчет PowerPoint?

Переходы Microsoft PowerPoint часто намеренно нарушают эти рекомендации, поскольку они предназначены для привлечения внимания к переходам слайдов и требуют, чтобы пользователи ждали их. Кроме того, они не имеют определенного смысла, поэтому они ничего не взаимодействуют за пределами того факта, что слайд меняется.

Переходы в стиле PowerPoint при правильном использовании имеют следующие цели:

• Они разбивают длинные презентации на меньшие блоки, заставляя докладчика приостановить.
• Они привлекают внимание аудитории к изменениям в презентации, помогая людям перенаправляются, если их умы задались вопросом.
• Они дают презентацию ритм, чтобы он не чувствовал себя монотонным или подавляющим.
• Их стиль отражает личность докладчика или материала.

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

нижней строке: не используйте переходы в стиле PowerPoint в качестве модели для программы.

Если вы делаете только шесть вещей...

1. Используйте анимацию и переходы, чтобы упростить понимание программы и чувствовать себя более гладкой и более привлекательной. Они должны иметь четкое назначение. Не используйте анимации только потому, что вы можете или привлечь ненужное внимание к вашей программе.
2. Определите словарь анимации и последовательно используйте его в рамках программы. При необходимости используйте словарь анимации Windows 7.
3. Используйте характеристики анимации, чтобы дать вашей программе личность и укрепить свой бренд.
4. Сделайте большинство анимаций простыми, краткими и тонкими. Помните, что анимации не должны требовать внимания, чтобы быть успешным. Если анимация подходит и естественно, пользователи заметят только его отсутствие.
5. Сделайте анимацию быстрой и адаптивной, и дать им легкий вид. Независимо от того, насколько привлекательны ваши анимации, никто не хочет чувствовать, как они ожидают их. Создайте более тяжелые анимации, чтобы иметь грациозную деградацию.
6. Проектирование в долгосрочной перспективе. Если анимация раздражает, отвлекает или утомительно, перепроектировать ее или удалить.

Шаблоны использования

Анимации имеют несколько шаблонов использования:

Употребление	Описание
отзыв о наведении указателя мыши чтобы показать, где находится точка взаимодействия.	Указывает, что точка взаимодействия активна. Наведите указатель мыши на статический эффект, а также. словарь windows: отображение эффекта наведения указателя мыши (ограничивающий прямоугольник, выделение, расширение) с эффектом затухания и отступа для плавности. В проигрывателе цифровых мультимедиа Zune альбом охватывает выделение и добавление элементов управления воспроизведением при наведении указателя мыши.
Нажмите отзыв Чтобы показать, что объект, доступный для щелчка, реагирует и получает щелчк.	Указывает, что объект был щелкнут. словарь windows: фон флэш-объекта при нажатии события вниз. чтобы показать контакт касания, используйте эффект рябь. Сенсорный экран отображает анимацию рябли, чтобы пользователь знал, что взаимодействие было распознано.
отзывы о выборе чтобы показать, что выбран объект.	Указывает, что выбран объект. выделение можно также показать с помощью статического эффекта. словарь windows: рисование прямоугольника выбора с эффектом затухания и отступа для гладкости. В Zune альбом охватывает мигание по щелчку, а затем получение прямоугольника выбора при выборе.
отзывы о ходе выполнения чтобы показать, что выполняется задача.	Обратная связь о ходе выполнения указывает, что задача выполняется, как правило, с индикаторами активности, индикаторами хода выполнения или анимациями, которые иллюстрируют задачу. При детерминированном отзыве о ходе выполнения отображается примерно то, сколько задач выполнено и сколько остается, в то время как неопределенный ход выполнения указывает только на то, что задача выполняется. словарь windows: спиннинг индикаторов действий, индикаторов хода выполнения, фонов хода выполнения, анимаций иллюстраций. В этом примере Windows Live Messenger отображает неопределенную обратную связь о ходе выполнения при входе.
аттлектор чтобы показать, что что-то требует внимания пользователя.	Привлекайте правильный уровень внимания, когда создаются значительные объекты или требуют внимания (часто из-за изменения), или важных или срочных событий. см. привлечении правильного уровня внимания для методов проектирования. словарь окон: мигание, перемещение, пульсирование, свечение, блеск. Панель инструментов Windows Live анимирует на первом появлении, чтобы сделать его очевидным, где он находится.
связи для отображения связи между объектами или причинностью в эффектах.	Показывать отношения, особенно если отношения могут не пониматься или ожидаться, таким образом, что это не отвлекает или запутает. словарь windows: морфинг, транспорт, физическое изменение, например перевернутое, растущее с источника точки, сжатие до места назначения. В этом примере анимация показывает связь между гамма-параметром и его воздействием на дисплей.
иллюстрации и предварительной версии для визуального объяснения концепции, задачи или эффекта команды.	Анимация или видео, объясняющее концепцию или то, как что-то работает визуально, для дополнения или замены текстового объяснения. это позволяет пользователям выполнять задачи или выбирать команды эффективно и уверенно. снимок экрана В этом примере команды панели ввода планшетного компьютера "показать мне" используют иллюстрации, чтобы показать, как исправить, удалить, разделить и присоединиться.

Переходы имеют несколько шаблонов использования:

Употребление	Описание
объект растет и сжимается или отображается для плавного изменения размера или состояния объекта.	Изменения объектов между состояниями, возможно, при перемещении. переход сохраняет ориентацию пользователей во время изменений. словарь windows: морф, изменение размера, слайды объектов или выход. В этом примере морфы погоды гаджета из его краткого состояния для отображения диалогового окна "Параметры".
содержимое show/hide/change для отображения, скрытия или изменения содержимого, как правило, для прогрессивного раскрытия.	Внутренние окна изменяют отображение большего, меньшего или другого содержимого. переход сохраняет ориентацию пользователей во время изменений. словарь windows: слайды области в или вне. Всплывающие окна исчезают в и вне. разное содержимое исчезает или свернуто. Калькулятор Windows имеет плавный переход между режимами просмотра.
Контроль или отображение или скрытие для плавного отображения или скрытия элементов управления или их возможностей при наведении указателя мыши или перемещения мыши, чтобы упростить обычный внешний вид визуального элемента.	Отображение элементов управления при наведении указателя на область команд или отображение разрешений при наведении указателя на элемент управления. Наведите указатель мыши на эти области, указывающие, что пользователь намерен взаимодействовать. разрешения могут скрываться, если указатель становится стационарным. В этом примере элементы управления проигрывателем Windows Media исчезают при наведении указателя мыши в полноэкранном режиме.
переходы сцены чтобы сделать переход сцены гладкой и простой, чтобы избежать внимания.	Резкие изменения сцены могут быть jarring, особенно для больших областей экрана, поэтому используйте переходы сцен для создания плавности и непрерывности, а также для предоставления контекста. Переходы сцены предназначены для естественного и низкого ключа, чтобы избежать вызова внимания к процессу перехода. словарь windows: угасание и выход; крест исчезает; скольжения влево, влево, вправо, вверх, вниз; толкает и охватывает. В этом примере фон для рабочего стола Windows мягко исчезает между изображениями, чтобы сделать переход гладким и контролируемым.
Специальные переходы сцен чтобы привлечь внимание к изменению сцены, чтобы сделать его особенным или перенаправить внимание пользователя.	Хотя большинство переходов сцен не должно вызывать внимание к процессу перехода, некоторые из них предназначены для разрыва потока и привлечения внимания, чтобы подчеркнуть, что что-то другое произойдет. для привлечения внимания специальные переходы сцен предназначены для неестественности и имеют большое визуальное влияние. В этом примере PowerPoint использует переходы с вниманием для привлечения аудитории к изменению.
прямых манипуляций для отображения эффекта прямых манипуляций (например, перемещения, прокрутки или сдвига, поворота и масштабирования).	Переход показывает эффект манипуляции в режиме реального времени. Эффект должен чувствовать себя гладкой, непрерывной и согласованной с реальным миром. Перемещение и поворот могут не быть непрерывными в некоторых местах, чтобы указать ограничения или, скорее всего, предпочтительный выбор. Масштабирование делает содержимое более большим или меньшим, возможно, изменяя уровень детализации соответствующим образом. В этом примере магнификатор плавно увеличивается между уровнями.
неправильные прямые манипуляции Чтобы указать, что была предпринята прямая манипуляция (например, перемещение, прокрутка или сдвига), но не удалось выполнить.	Переход показывает попытку манипуляции, но возвращается к исходному состоянию. часто эффект выглядит так, как манипуляция не может быть выполнена из-за некоторых реальных физических ограничений. эти анимации используются вместо текстовых сообщений об ошибках, которые могут нарушить реальное ощущение манипуляции. словарь windows: отскочить В этом примере документ отскакивает, чтобы показать, что пользователь достиг конца.
Сортировка, фильтрация, переупорядочение переходов Значение , указывающее, что презентация или содержимое коллекции элементов изменилось.	Переход показывает (или для сложных изменений, предлагает) эффект изменения. в этом примере визуальный поиск bing использует переход фильтра. В этом примере Windows Media Center использует переупорядочение перехода в качестве специального интерфейса во время воспроизведения песни.
переходы производительности чтобы сделать действие, похоже, происходит быстрее.	Хотя любой переход имеет потенциал для выполнения действия, как представляется, происходит быстрее, основная цель этих переходов заключается в улучшении восприятия производительности и реагирования. Хороший способ заключается в том, чтобы показать задачу, выполняемую на преднамеренном шаге. Напротив, задержка действия, отрисовка результатов в нефакторной манере или использование индикатора действия будет чувствовать себя медленно. словарь windows: выполнение действия на этапах с плавными переходами между этапами. В этом примере список переходов на панель задач сразу же отображает стандартные элементы, а затем слайды для отображения назначений после готовности списка. Это замаскирует время, необходимое для создания списка. В отличие от этого, задержка первоначального отображения будет чувствовать себя неответственно, и отображение неполного списка или отзыв о ходе выполнения будет чувствовать себя гораздо медленнее.
Специальные возможности для привлечения и восторга пользователей во время редкого, специальные возможности, которые важны для вашей программы и имеют полное внимание пользователя.	Хотя любой переход имеет потенциал для того, чтобы быть особым опытом, эти переходы лучше всего зарезервированы для редкого опыта, которые действительно особы для вашей программы. пользовательские переходы используются для предоставления особого чувства. фирменной символики и личности часто важные элементы дизайна. в отличие от других шаблонов, специальные возможности могут требовать внимания, быть тяжелыми и требовать от пользователей ждать момент. следовательно, эти переходы быстро изнашиваются, если чрезмерно используется, потому что опыт больше не является особенным. В этом примере Windows Media Center отображает анимацию при загрузке для немедленного привлечения пользователей.

Руководящие принципы

Эффективное взаимодействие

• Определить и использовать словарь анимации, чтобы обеспечить согласованность анимаций и переходов и последовательно использовать его в рамках программы. Большинство словарей должны включать записи для внешнего вида сцены и исчезновения объектов, навигации, базового взаимодействия (наведения курсора, выбора, щелчка), управления объектами и взаимодействия (перемещение, удаление, изменение размера, прокрутка, масштабирование, поворот, фильтрация) и привлечение внимания. Согласованное значение имеет решающее значение для эффективного взаимодействия.

• Каждый раз, когда практически, используйте словарь анимации Windows. Хотя ваша программа может иметь другую аудиторию и разные потребности, часто преимущества согласованности и знакомства перевешивают преимущества быть разными. Если словарь программы должен отличаться, используйте те же основные типы анимации, что и Windows, но присвойте им правильную личность для вашей программы.

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

  неправильно:

  

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

• Создание записей словаря четко отличается. Связанные действия могут иметь аналогичные эффекты (например, увеличение и увеличение масштаба должны иметь обратные переходы), но несвязанные действия должны иметь четко различные эффекты (например, масштабирование никогда не должно путаться с поворотом).

• Сохраняйте реальные эффекты реалистичных и согласованных. Если вы используете реалистичную анимацию и переходы, сохраняйте взаимодействие в соответствии с реальным миром. Пользователи никогда не должны быть удивлены, смущены или неправильно результаты. И для согласованности не смешивайте метафоры.

• Присвойте обратным действиям обратные анимации. Это соответствует ожиданиям пользователей и упрощает словарь. Например, если панель появляется путем скольжения, удалите ее, скользя не с каким-то другим эффектом.

• Сделайте анимацию понятной. Пользователи должны быстро понять цель анимации. Можно сделать анимацию слишком маленькой, слишком краткой (менее 50 миллисекундах), или так тонко, что пользователи не могут понять свою цель. В таких случаях либо измените значение, чтобы сделать смысл понятным, либо удалить.

  неправильно:

  

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

Шаблоны

отзыв о наведении указателя мыши

• Чтобы отображаться адаптивным, старайтесь воспроизводить анимацию в течение 50 миллисекундах при вводе или выходе из состояния наведения указателя мыши.
• Чтобы появиться быстро, сделайте длительность анимации наведения курсора менее 50 миллисекундами.
• Используйте эффект отключения и отключения от эффекта наведения указателя мыши. Это делает эффекты наведения указателя четко отличаются от отзывов по щелчку и выбору.

Нажмите отзыв

• Чтобы показаться адаптивным, старайтесь воспроизводить анимацию в течение 50 миллисекундах события вниз. Чтобы щелкнуть события, не нужны отзывы.
• Чтобы появиться быстро, сделайте длительность анимации щелчка менее 50 миллисекундами.
• Используйте фоновую вспышку или эффект мигания. При этом эффекты щелчка четко отличаются от отзывов о наведении и выборе. Так как для нажатия кнопки требуется навести указатель мыши, сделайте отзыв плавной, чтобы навести указатель мыши на отзыв.

отзывы о выборе

• Чтобы отображаться адаптивными, старайтесь воспроизводить анимацию в течение 50 миллисекундах выделения или отмены выбора.
• Чтобы появиться быстро, сделайте длительность анимации выбора менее 50 миллисекундами.
• Используйте эффект прямоугольника выделения с затуханием или отступом. При этом выбор четко отличается от наведения указателя мыши и нажатия отзывов.

отзывы о ходе выполнения

• Используйте индикатор действия, если действие не может выполняться в течение секунды. Это означает, что команда была получена.
• Используйте индикатор хода выполнения, когда задача займет более пяти секунд. Дополнительные рекомендации см. в разделе Индикаторы хода выполнения.
• Используйте анимации отзывов о ходе выполнения, которые помогают пользователям визуализировать эффект длительных задач. Избегайте ненужных анимаций обратной связи о ходе выполнения, если анимация не сообщает ничего полезного, используйте вместо этого индикатор хода выполнения.
• Имеют четко определяемые состояния завершения и сбоя. Пользователи должны быстро определить эти конечные состояния.
• Остановите отображение хода выполнения, когда базовая задача не выполняется. Пользователям необходимо иметь возможность определить, не выполняется ли прогресс, и реагировать соответствующим образом.

привлечения

• Используйте средства привлечения с сдержанностью. Если информация не является срочной, критической или в противном случае, скорее всего, влияет на немедленное поведение пользователя, обычно лучше изменить состояние незаметно и позволить пользователям обнаруживать изменения самостоятельно. Решить отвлекающие факторы, невозможности обнаружения.

  

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

• Выберите анимацию, которая привлекает правильный уровень внимания. Анимации привлечения должны привлечь достаточно внимания к себе, чтобы выполнить свою цель, но не больше. Если пользователь должен действовать немедленно, выберите эффект, который требует внимания независимо от того, где ищет пользователь. Для других ситуаций обратитесь к привлечению правильного уровня внимания раздела, чтобы получить правильное сочетание внимания, заметности и срочности.

  неправильно:

  

  Помощники Microsoft Office привлекли к себе ненужное внимание.

• Если пользователь не отвечает, не повторяйте анимацию или не используйте непрерывную анимацию. Вместо этого предположим, что пользователь решил не действовать сейчас, но может действовать позже. Непрерывные анимации позволяют пользователям сосредоточиться на других элементах.

анимации связи связи

• использовать анимации связей, чтобы показать, откуда пришли объекты или откуда они пошли.
• Анимации связей должны начинаться или заканчиваться выбранным объектом. Не показывать связи между объектами, с которыми пользователь в настоящее время не взаимодействует. Если пользователи вообще замечают, что они заметят, это отвлекающий фактор.

иллюстрации и предварительные версии

• Используйте предварительные версии, чтобы показать эффект команды без необходимости выполнить ее первым. Используя полезные предварительные версии, вы можете повысить эффективность и удобство обучения вашей программы, а также снизить потребность в пробной версии и ошибках.
• Используйте иллюстрации и предварительные версии с четкой интерпретацией. Они имеют мало значения, если запутать.
• воспроизвести только одну иллюстрацию за раз, чтобы избежать подавляющего большинства пользователей. Если возможно несколько одновременных иллюстраций, используйте указатель мыши или кнопку воспроизведения, чтобы пользователи указывали на свой интерес.
• Автоматически воспроизводим иллюстрацию, если она является главной целью окна или страницы. В противном случае, если это необязательно, позвольте пользователям воспроизводить его, когда они готовы.
• анимации воспроизведения на оптимальной скорости: не так быстро они трудно понять, но не так медленно они мучаются смотреть.

увеличение и сжатие объектов

• Не закрепите содержимое во время изменения размера. Разверните контейнеры перед добавлением содержимого. Удалите содержимое перед сокращением контейнеров.

  неправильно:

  

  В этом примере содержимое обрезается во время изменения размера.

содержимое show/hide/change

• Отображение важных сведений статически. Пользователям не нужно получать доступ к важной информации путем постепенного раскрытия информации.

Контроль или отображение или скрытие

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

  

  В этом примере Windows Media Center отображает его элементы управления всякий раз, когда указатель находится над окном.

• Отображение дополнительных элементов управления или возможностей управления при расположении указателя указателя на команды или рядом с ним. Для удобства обнаружения сделайте расположение очевидным и целевым.

  

  В этом примере Windows Live Messenger отображает вторичную команду, когда указатель находится в правом верхнем углу.

переходы сцены

• Сделайте физические переходы сцены согласованными с естественным сопоставлением. Люди считывают слева направо в западных языках и иерархических схемах поток от верхнего до нижнего. Следовательно, переход вперед во времени обозначается движением слева направо. Следующие переходы физической сцены имеют естественное сопоставление:

  Переход	Значение
  Слева	Перемещение обратно в поток задач
  Справа	Перемещение вперед в потоке задач
  Сверху	Перемещение вверх по иерархии задач
  Снизу	Перемещение вниз иерархии задач

• Если программа воспроизводит звук, переходы сцены конструктора и звуковые переходы вместе. Например, если сцена исчезает постепенно, любой звук должен постепенно исчезать. Не разрушайте удобные визуальные переходы путем резких переходов звука. Дополнительные звуковые рекомендации см. в разделе Звук.

прямых манипуляций

• При использовании физических жестов в взаимодействии (например, tossing), создайте анимацию, чтобы чувствовать себя как естественный ответ на жест. Связать причину взаимодействия с эффектом перехода. Предоставьте анимации реальные физические характеристики, такие как ускорение, замедление, импульс, сопротивление, вес, отскоки и поворот.
• Чтобы обеспечить прямое чувство, сохраняйте точки контакта объекта под указателем плавно во время взаимодействия. Любая задержка, отрезок ответа или потеря контакта уничтожает восприятие прямого манипуляции. Объекты никогда не должны исчезать во время обработки.

Сортировка, фильтрация или переупорядочение переходов

• Для простых изменений показано весь переход. Пользователи смогут легко следовать всему переходу. Простые изменения включают четыре элемента или меньше.
• Для сложных изменений подчеркнуть конец движения, как он замедляется, и пусть глаз заполняет остальные. Это делает движение гораздо более адаптивным и упорядоченным.

переходы производительности

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

При прокрутке в представлении "Глаз" карты Bing отображают временный фон сетки. Это позволяет пользователям продолжать прокрутку сразу же, а также перед отображением окончательного содержимого.

анимации специальных возможностей

• Пересмотреть анимированные экраны-заставки (а также статические экраны-заставки). Часто экраны-заставки просто обращают внимание на то, как долго программа занимает нагрузку, и они изнашивают их приветствие быстро. Хотя экраны-заставки приемлемы, если они отображаются только в том случае, если взаимодействие с пользователем невозможно, каждый раз, когда практически лучше использовать альтернативу для разработки программы, чтобы пользователи могли взаимодействовать с ней немедленно, даже если она все еще загружается.
• Предоставьте команду "Пропустить введение", если анимированный экран-заставка занимает более трех секунд. Щелкнув в любом месте экрана-заставки, также следует закрыть его. Кроме того, используйте короткую версию анимации после начального периода.

Производительность

• Не заставляйте пользователей ждать анимации и переходов вашей программы. Используйте краткие анимации и переходы (менее 200 миллисекунд) всякий раз практически. Используйте более быстрые анимации (100 миллисекундах) для более частых операций. Разработка более длинных анимаций (более одной секунды обычно отзыв о ходе выполнения, иллюстрация и специальные шаблоны взаимодействия), чтобы пользователи могли продолжать работать во время работы.

• Спроектируйте длительные анимации, чтобы сделать его понятным пользователям, которые они могут взаимодействовать во время выполнения анимации. Пользователи не будут пытаться продолжать работать, если визуальные подсказки предполагают, что они не могут.

  

  В этом примере из Windows Internet Explorer панель хода выполнения с низким ключом в строке состояния предполагает, что пользователям не нужно ждать завершения, прежде чем они смогут взаимодействовать.

• Используйте упрощенную анимацию для задач с большим объемом ЦП. Это обеспечивает полную мощность обработки задачи. Кроме того, пользователи не будут воспринимать, что упрощенная анимация является причиной, по которой задача является интенсивной загрузкой ЦП.

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

• Анимации разработки для снижения производительности при нехватке системных ресурсов. Анимация может снизиться, имея варианты, требующие меньше ресурсов (например, более короткие длины или более низкие частоты кадров) или даже не выполняющиеся вообще. Независимо от доступных ресурсов убедитесь, что анимации имеют высокое качество и выглядят как анимации вместо ошибок программного обеспечения.

  неправильно:

  

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

Характеристики анимации

Хорошо разработанные анимации и переходы обычно имеют следующие характеристики:

• Краткая длительность. Большинство анимаций должно составлять от 100 до 300 миллисекунд, предпочтительно либо 1/6 секунд (167 миллисекунд) или 1/4 секунды (250 миллисекунд). (Специальные возможности и отзывы о ходе выполнения могут быть более длинными.) Используйте более быстрое время анимации для более частых операций. Как правило, анимация занимает больше времени, занимает больше времени, чтобы понять и чувствовать себя медленно.

• Оперативность. Анимации должны начинаться в 50 миллисекундах инициирующего события или действия пользователя. Продолжительное время начала не отвечает.

• Ускорение и замедление. Чтобы выглядеть естественно, большинство эффектов анимации необходимо ускорить при запуске и замедлении при остановке. Чтобы выглядеть адаптивно, анимации проектирования должны иметь быстрые запуски. Чтобы появиться контролируемым, анимации проектирования должны иметь мягкие посадки в конце. Хотя это относится к эффектам движения, он также применяется к любому эффекту, который предлагает движение, например масштабирование и даже исчезает.

  

  Большинство анимаций должны иметь быстрые запуски и мягкие окончания, чтобы иметь адаптивный, но контролируемый чувство.

• Движение. Анимация, изображающая движение, в частности, требуется ускорить и отсоединить, поэтому не используйте линейное движение, если длительность анимации не очень коротка. Движения должны занять короткий путь от начала до конца, без перезахвата. Полный путь движения не всегда требуется. При необходимости подчеркнуть конец движения, как он замедляется, и пусть глаз заполняет остальные. Это делает движение гораздо более адаптивным и упорядоченным. При одновременном анимации движения нескольких объектов присвойте им немного разные пути с немного разными сроками, чтобы чувствовать себя более естественным.

• Частота кадров. Большинство анимаций должны использовать частоту кадров в 20 кадров в секунду. Если анимация предназначена для специального опыта или связана с основной целью программы, рассмотрите возможность использования более высокой скорости 24 30 кадров в секунду для повышения плавности и реалистичности.

• Шкала. Анимации проектирования, которые хорошо работают во всем их диапазоне предполагаемого использования. Например, переходы страниц должны работать для всех размеров страниц.

• Личность. Анимации проектирования, чтобы чувствовать себя естественным, поддавленным и эффективным, а не искусственным, прихотливым или медленным.

Анимированный текст

• Хотя вы можете отобразить текст с помощью перехода, не постоянно анимировать текст. анимированный текст часто отвлекает и сложнее читать, чем статический текст. Исключения :
  • Вы можете анимировать текст в ситуациях, когда он традиционно анимирован, и вы предоставляете доступную альтернативу.
  • Вы можете анимировать текст, если назначение текста является главным образом декоративным.

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

Сокращение потребления электроэнергии

• Создайте анимацию для снижения потребления энергии. При правильной настройке анимации не должны значительно увеличивать потребление энергии. Чтобы уменьшить потребление электроэнергии, выполните приведенные действия.
  • Остановите анимацию при отключении дисплея. Отображение может быть отключено для экономии энергии.
  • Не используйте длительные анимации, которые не инициируются пользователем. Анимации, использующие периодические таймеры с высоким разрешением, снижают эффективность управления питанием процессора. Кроме того, не забудьте отключить любые периодические таймеры с высоким разрешением при завершении анимации.
  • Приостанавливать все анимации, когда система становится бездействуемой. Период бездействия пользователя, который будет неактивен, определяется параметрами Power в панели управления.

Доступность

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

• Убедитесь, что эквивалентная информация доступна с помощью других средств, таких как:

  • По проверке. Пользователи могут определить эквивалентную информацию, глядя на экран или объекты, участвующие в анимации.
  • Простое взаимодействие. Пользователи могут определить эквивалентную информацию, наведите указатель мыши, щелкнув или дважды щелкнув.

  

  Домашняя страница Bing имеет начальную анимацию, которая показывает несколько горячих точек. Пользователи также могут отображать горячие точки, перемещая курсор рядом с ними.

  Обратите внимание, что "эквивалентная информация" не означает идентичные сведения. Информация может находиться в другом формате или требовать простого вычета.

• При необходимости задайте фокус ввода на объект, измененный во время перехода. Это позволяет вспомогательным технологиям обнаруживать, где произошло изменение. Но не изменяйте фокус ввода, если пользователь использует клавиатуру.

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

• Разрешить пользователям отключить анимацию и переходы программы. Чтобы обеспечить эту возможность, соблюдайте параметр "Отключить все ненужные анимации" в Центре простого доступа в Windows.

  разработчиков: можно определить, включены ли анимации с помощью API SystemParametersInfo.

• При проектировании задач предполагается, что пользователи отключают анимации вашей программы. Убедитесь, что это не нарушает поток задач значительно.

Дополнительные рекомендации по специальным возможностям см. в специальных возможностей.

Документация

• Избегайте ссылки на анимации всякий раз, когда это возможно. Вместо этого обратитесь к объекту, анимированному и при необходимости типу анимации.
• Не ссылайтесь на переходы, кроме технической документации. Вместо этого обратитесь к объекту в его окончательном или начальном состоянии.
• Если пользователь явно инициирует анимацию, используйте воспроизведение команды; в противном случае используйте команду, используемую для технической документации.

Примеры:

• Вы узнаете, что элемент нуждается в вашем внимания, когда его значок начинает отскочить.
• Сначала выберите фотографии, которые вы хотите распечатать (обратите внимание, что фотографии увеличены при выборе).
• Используйте перекрестный переход, чтобы легко изменить состояние объекта.