回転

  • [アーティクル]

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

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

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

  • ユーザーが直接 UI 要素を回転できるように回転を使います。

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

回転の概要

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

入力デバイスに応じて回転操作は次のように実行されます。

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

回転を使う状況

ユーザーが直接 UI 要素を回転できるように回転を使います。 次の図は、サポートされる回転操作の指の配置をいくつか示しています。

回転がサポートされる異なる指の配置を示す図

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

1 番目の図は、最初のタッチ ポイント (親指) と 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°単位のスナップ位置のゾーンでは制約付き回転によって強制されます。 ユーザーが各 90° のゾーンの外でオブジェクトを離した場合にはオブジェクトはその位置にとどまりますが、それ以外の場合にはオブジェクトは自動的にスナップ位置まで回転します。

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

サンプル

サンプルのアーカイブ