Визуальное масштабирование и изменение размераOptical zoom and resizing

В этой статье описаны элементы Windows для масштабирования и изменения размеров, а также представлены рекомендации по использованию в приложениях этих механизмов взаимодействия с пользователем.This article describes Windows zooming and resizing elements and provides user experience guidelines for using these interaction mechanisms in your apps.

Важные API-интерфейсы: Windows.UI.Input, Input (XAML)Important APIs: Windows.UI.Input, Input (XAML)

Визуальное масштабирование позволяет увеличить представление содержимого в рамках соответствующей области (оно применяется к самой области содержимого), тогда как изменение размера позволяет изменить относительный размер одного или нескольких объектов, не изменяя представление самой области (оно применяется к объектам в рамках области содержимого).Optical zoom lets users magnify their view of the content within a content area (it is performed on the content area itself), whereas resizing enables users to change the relative size of one or more objects without changing the view of the content area (it is performed on the objects within the content area).

И визуальное масштабирование, и изменение размера осуществляются при помощи жестов сжатия и растяжения (разводя пальцы, пользователь увеличивает изображение, сводя — уменьшает) или удерживанием клавиши CTRL при одновременном прокручивании колесика мыши либо удерживанием клавиши CTRL (если нет цифровой клавиатуры — одновременно с клавишей SHIFT) и нажатием клавиши "плюс"(+) или "минус"(–).Both optical zoom and resizing interactions are performed through the pinch and stretch gestures (moving fingers farther apart zooms in and moving them closer together zooms out), or by holding the Ctrl key down while scrolling the mouse scroll wheel, or by holding the Ctrl key down (with the Shift key, if no numeric keypad is available) and pressing the plus (+) or minus (-) key.

На следующих схемах показана разница между изменением размера и визуальным масштабированием.The following diagrams demonstrate the differences between resizing and optical zooming.

Визуальное масштабирование: пользователь выбирает область и масштабирует ее всю.Optical zoom: User selects an area, and then zooms into the entire area.

При сближении пальцев область сжимается, при разведении — растягивается.

Изменение размера: пользователь выбирает объект в пределах области и изменяет его размер.Resize: User selects an object within an area, and resizes that object.

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

Примечание    . Оптический масштаб не следует путать с семантическим масштабом.Note   Optical zoom shouldn't be confused with Semantic Zoom. Хотя для этих двух взаимодействий используются одинаковые жесты, контекстное масштабирование относится к представлению и навигации по упорядоченному содержимому в рамках единого представления (например, по структуре папок компьютера, библиотеке документов или фотоальбому).Although the same gestures are used for both interactions, semantic zoom refers to the presentation and navigation of content organized within a single view (such as the folder structure of a computer, a library of documents, or a photo album).

 

РекомендацииDos and don'ts

Используйте следующие руководства для приложений, которые поддерживают изменение размеров или визуальное масштабирование.Use the following guidelines for apps that support either resizing or optical zooming:

  • Если указаны максимальный и минимальный размер или границы, с помощью визуальной обратной связи необходимо показать, когда пользователь достигает этих границ или превышает их.If maximum and minimum size constraints or boundaries are defined, use visual feedback to demonstrate when the user reaches or exceeds those boundaries.

  • Точки прикрепления предназначены для управления масштабированием и изменением размера. Они предоставляют логические точки прекращения движения и позволяют отображать в окне просмотра определенную часть содержимого.Use snap points to influence zooming and resizing behavior by providing logical points at which to stop the manipulation and ensure a specific subset of content is displayed in the viewport. Предоставив точки прикрепления для общих уровней масштабирования или логических представлений, вы облегчите пользователю выбор этих уровней.Provide snap points for common zoom levels or logical views to make it easier for a user to select those levels. Например, приложения для просмотра фотографий могут предоставлять точку прикрепления для изменения размера фотографии 100 %, а в приложениях для работы с картами точки прикрепления могут быть полезны при просмотре на уровне города, региона или страны.For example, photo apps might provide a resizing snap point at 100% or, in the case of mapping apps, snap points might be useful at city, state, and country views.

    Благодаря точкам прикрепления пользователи могут переходить к требуемому содержимому, не имея четкого представления о месте его расположения.Snap points enable users to be imprecise and still achieve their goals. Для XAML см. свойства точек прикрепления ScrollViewer.If you're using XAML, see the snap points properties of ScrollViewer. Для JavaScript и HTML используйте -ms-content-zoom-snap-points.For JavaScript and HTML, use -ms-content-zoom-snap-points.

    Существует два типа точек прикрепления.There are two types of snap-points:

    • Приблизительные: точка прикрепления выбирается после завершения контакта, если инерция прекращается в пределах порогового значения расстояния точки прикрепления.Proximity - After the contact is lifted, a snap point is selected if inertia stops within a distance threshold of the snap point. "Приблизительные" точки прикрепления допускают завершение масштабирования или изменения размера между точками прикрепления.Proximity snap points still allow a zoom or resize to end between snap points.
    • Принудительные. Выделенная точка прикрепления располагается непосредственно до или после последней точки прикрепления, пересеченной перед завершением контакта (в зависимости от направления и скорости жеста).Mandatory - The snap point selected is the one that immediately precedes or succeeds the last snap point crossed before the contact was lifted (depending on the direction and velocity of the gesture). На принудительной точке прикрепления движение должно прекратиться.A manipulation must end on a mandatory snap point.
  • Используйте физические свойства инерции,Use inertia physics. В их числе можно назвать следующие:These include the following:

    • замедление (происходит, когда пользователь прекращает сжатие или растяжение —Deceleration: Occurs when the user stops pinching or stretching. напоминает торможение на скользкой поверхности);This is similar to sliding to a stop on a slippery surface.
    • отскакивание (возникает при пересечении границы или ограничения размера).Bounce: A slight bounce-back effect occurs when a size constraint or boundary is passed.
  • Располагайте элементы управления в соответствии с "Руководством по нацеливанию".Space controls according to the Guidelines for targeting.

  • Предоставьте дескрипторы масштабирования, чтобы ограничить изменение размера.Provide scaling handles for constrained resizing. Если дескрипторы не определены, по умолчанию установлено изометрическое (или пропорциональное) изменение размера.Isometric, or proportional, resizing is the default if the handles are not specified.

  • Не используйте изменение размеров для навигации по пользовательскому интерфейсу или для отображения дополнительных элементов управления в вашем приложении. Вместо этого используйте область сдвига.Don't use zooming to navigate the UI or expose additional controls within your app, use a panning region instead. Дополнительные сведения о сдвиге см. в разделе Руководство по функции сдвига.For more info on panning, see Guidelines for panning.

  • Не размещайте объекты фиксированного размера в областях с содержимым, размер которого можно изменять.Don't put resizable objects within a resizable content area. Но есть следующие исключения:Exceptions to this include:

    • Приложения для рисования, в которых элементы, способные изменять размер, могут отображаться на полотне с изменяемым размером.Drawing applications where resizable items can appear on a resizable canvas or art board.
    • Веб-страницы со встроенными объектами, например картами.Webpages with an embedded object such as a map.

    Примечание    . Во всех случаях размер области содержимого изменяется, если все точки касания не находятся в пределах изменяемого объекта.Note   In all cases, the content area is resized unless all touch points are within the resizable object.

ПримерыSamples

Примеры архиваArchive samples