web-dev-qa-db-ja.com

オブジェクトを回転させるより良い方法はどれですか?

私はデザインを学ぶ長い道のりを歩んでいる開発者なので、私がデザインの専門用語に興味がない場合は許してください????。

2Dオブジェクトを回転させるインターフェースを設計する必要があります。回転は固定ステップによって離散的です。オブジェクトは0°、45°、90°、...、180°回転できます(この例ではステップは45°ですが、構成によってパラメーター化できます)。

アイデアが少ないので、どれが一番いいのか話し合いたいです。

標準スライダー:

enter image description here

標準スライダーはどこにでもあり、簡単に実装でき、使いやすいです。オブジェクトの上にスライダーがあり、それを動かすことで、ユーザーはオブジェクトの回転を制御できます。

円弧スライダーハンドル

enter image description here

ユーザーがドラッグして回転できるハンドル付きの円弧スライダーで囲まれたオブジェクトがあります。

スライダーの円形はスライダーの目的(回転)を助言するために機能的であると思いますが、固定ステップで移動することは、実装と使用の両方でそれほど直感的ではないように思います。

最高のものは何ですか?考慮事項/アイデア/アドバイスはありますか?それを行う他の方法はありますか?多分もっと簡単な方法?

2
nkint

弧はクールに見えますが、実装するのは地獄です。ユーザーは弧に追従しようとしますが、マウスや特にトラックパッドを使用するのは非常に複雑な動きです。 1つの次元を制御するため、1つの軸に沿った動きを提案する方が良いと思います。なぜ二次元を無駄にするのですか?

または、オブジェクトの横に回転アイコンを配置し、任意の軸に沿ってマウスの移動を許可することで回転が可能であることを単に示唆します。回転ポイントはオブジェクトの中心にあり(または特に指示がない場合)、回転は図のように回転線に沿って行われますイラスト(マウスポインタはマゼンタラインの反対側にあります)

enter image description here

5
Jurijs Kovzels

回転する位置が少ないため、これは単純なボタンで制御する必要があります。

シンプルなボタンは、ボタンの機能を理解するための認知的負荷をすべて取り除くことができます。彼らは発見するために押すことをユーザーに奨励します。

シンプルなボタンコントロールを備えたツールを次に示します。 enter image description here

回転しているときは、オブジェクトの上に回転情報を表示できます。 enter image description here

2
moot

'円弧'を表示することは、オブジェクトの下で選択するためのラジオボタン(または好みを考慮した他のオプション)オプションと組み合わせる方が良いと思います。

enter image description here

mockup

download bmml sourceBalsamiq Mockups で作成されたワイヤーフレーム

固定度として与えられたステップがあるので、より実行可能であり、この方法で、その円形スライダーへの追加のアニメーションを処理する労力の必要性を打ち負かすことができます。

注:手の動きをアクション可能なアイテムとして表示するのではなく、元の写真を編集する必要はありませんでした。

1
Erhan Yaşar

rotation

スクリーンショットを見ると、通常Adobeのようなデザインソフトウェアで、カーソルをオブジェクトのエッジに移動すると、回転カーソルに変わります。

これはプロトタイピングソフトウェアfigmaの例です。右側には、回転設定を正確に定義できるパネルがあります。他のオブジェクトプロパティをここで操作できるように、このようなグローバルパネルを用意することをお勧めします。 回転するオブジェクト までスクロールします

0
mastablasta