回転

このトピックでは、新しい Windows UI の回転について説明し、Windows アプリでこの新しい対話式操作のメカニズムを使うときに考慮する必要があるユーザー エクスペリエンスのガイドラインを示します。

重要な API: Windows.UI.InputWindows.UI.Xaml.Input

すべきこととやってはいけないこと

  • ユーザーが UI 要素を直接回転するのに役立つ回転を使用します。

その他の使い方のガイダンス

ローテーションの概要

回転は Windows アプリで使われるタッチ操作に最適な手法であり、ユーザーがオブジェクトを回転 (時計回りまたは反時計回り) できるようにします。

入力デバイスに応じて、回転操作は次を使用して実行されます。

  • 選択したオブジェクトの回転グリッパーを移動するマウスまたはアクティブなペン/スタイラス。
  • 回転ジェスチャを使用して目的の方向にオブジェクトを回転させるタッチまたはパッシブ ペン/スタイラス。

回転を使用するタイミング

ユーザーが UI 要素を直接回転するのに役立つ回転を使用します。 次の図は、回転操作でサポートされている指の位置の一部を示しています。

回転によってサポートされるさまざまな指の姿勢を示す図。

ユーザーが接触点とは無関係に回転の中心点を指定できる場合を除いて (例: 描画やレイアウト アプリケーション)、直観に従い多くの場合、回転の中心点は 2 つのタッチした点のどちらかになります。 次の図は、この方法で回転ポイントが制限されていない場合にユーザー エクスペリエンスがどのように低下するかを示しています。

この最初の図は、最初の (親指) とセカンダリ (人差し指) のタッチ ポイントを示しています。人差し指が木に触れ、親指がログに触れている。

回転ジェスチャの 2 つの初期タッチ ポイントを示す画像。 この 2 番目の図では、最初の (親指) タッチ ポイントを中心に回転が実行されます。 回転後も、人差し指は木の幹に触れ、親指は引き続きログ (回転ポイント) に触れます。

2 つの最初のタッチ ポイントのいずれかに制限された回転ポイントを持つ回転画像を示す画像。 この 3 番目の図では、回転の中心がアプリケーションによって定義され (またはユーザーによって設定されます)、図の中心点になります。 回転後、画像が指の 1 つを中心に回転しなかったため、(ユーザーがこの設定を選択していない限り) 直接操作の錯覚が壊れます。

2 つの最初のタッチ ポイントではなく、図の中心に拘束された回転ポイントを持つ回転画像を示す画像。 この最後の図では、回転の中心がアプリケーションによって定義され (またはユーザーによって設定されます)、図の左端の中央の点になります。 ここでも、ユーザーがこの設定を選択していない限り、この場合は直接操作の錯覚が壊れます。

2 つの最初のタッチ ポイントではなく、図の左端の中心に拘束された回転ポイントを持つ回転画像を示す画像。

 

Windows 10 では、自由、制約付き、複合の 3 種類の回転をサポートします。

説明
自由回転

自由回転を使用すると、ユーザーは 360 度の円弧内の任意の場所でコンテンツを自由に回転できます。ユーザーがオブジェクトを解放すると、オブジェクトは選択した位置に残ります。 自由回転は、Microsoft PowerPoint、Word、Visio、ペイントなどの描画およびレイアウト アプリケーションに役立ちます。Adobe Photoshop、Illustrator、Flash を使用できます。

制約付き回転

拘束された回転は、操作中に自由回転をサポートしますが、リリース時に 90 度増分 (0、90、180、270) でスナップポイントを適用します。 ユーザーがオブジェクトを離すと、オブジェクトは自動的に最も近いスナップポイントに回転します。

制約付き回転は最も一般的な回転方法であり、コンテンツのスクロールと同様の方法で機能します。 スナップ ポイントを使用すると、ユーザーは不正確になり、目標を達成できます。 制限付き回転は、Web ブラウザーやフォト アルバムなどのアプリケーションに役立ちます。

結合された回転

結合された回転では、制約付き回転によって適用される 90 度のスナップポイントのそれぞれで、ゾーン ( Guidelines のレールと同様に) による自由回転がサポートされます。 ユーザーがオブジェクトを 90 度ゾーンの外側に離した場合、オブジェクトはその位置に残ります。それ以外の場合、オブジェクトは自動的にスナップポイントに回転します。

ユーザー インターフェイスのレールは、ターゲットの周辺の領域において、特定の値または位置に向けて動きが制約され選択に影響を与える機能です。
 

サンプル

サンプルのアーカイブ