光学式ズームとサイズ変更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.InputInput (XAML)Important APIs: Windows.UI.Input, Input (XAML)

光学式ズームを使うと、ユーザーはコンテンツの表示を拡大できます (コンテンツ領域自体に対して実行されます)。一方、サイズ変更を使うと、コンテンツ領域の表示は変更せずに、1 つまたは複数のオブジェクトの相対的なサイズをユーザーが変更できます (コンテンツ領域内のオブジェクトに対して実行されます)。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.

    スナップ位置には次の 2 種類があります。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:

    • 減速: ユーザーが 2 本の指を互いに近づけたり、遠ざけたりしたときに発生します。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.

  • UI の操作またはアプリ内の追加コントロールの公開用にはズームを使わず、パン領域を使います。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.
    • 地図などの埋め込みオブジェクトがある Web ページ。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