web-dev-qa-db-ja.com

「ズーム」機能に適したUIは何ですか?

ズームインとズームアウトが必要なWebページのコンポーネントを作成していますマウスカーソルの位置。私がこれを行うことを知っている事実上の標準的な方法は、Ctrl +マウスホイールを使用することです...しかし、私はそれを使用できません。その理由は、Firefoxはマウスホイールをまったくサポートしていないためです(ただし、スクロールにはハックがあります)。他のほとんどのブラウザーは、この特定のジェスチャーをインターセプトして、Webページ全体の独自のズームを実行します。これはオーバーライドできません。また、データ(特にズームインした場合)はビューポートよりも大きくなるため、マウスホイールを使用した単純なスクロールも必要です。

そのため、標準のマウスホイール機能を損なうことなくマウスの位置でズームを実行するために広く受け入れられているメカニズムは他にありますか?

4
Vilx-

場合によっては、ズームイン/ズームアウトしたい場所でマウスをクリックしてから、マウスを上にドラッグするとズームインし、下にドラッグするとズームアウトするメカニズムがあります。

通常、2Dビューはマウスの左ボタンをクリックしてドラッグできるため、通常、クリックしてドラッグしてズームすると、マウスの右ボタンがオフになります。一部のアプリケーションでは、ALTなどの修飾子が使用されます。これは、特定のシナリオに必要な相対的な優先度とアクセスのしやすさに依存すると思います。

良い点は、それが単一のアクションによって達成され、長さに制限のない本質的に非表示のスライダーであることです。カーソルが画面の上部に当たっても続行できます。

ビューのリアルタイムスケーリングと組み合わせると、ズームイン/ズームアウトの量を確認でき、ユーザーは直接操作のスムーズで同期した感覚を味わえます。これは、最終結果から1つのステップが削除されたように感じるスライダーを使用するよりも、直接操作に1ステップ近づきます。

また、ユーザーがズーム制限に達した場合は、視覚的なフィードバックをユーザーに提案することをお勧めします。これは、Androidアプリがスクロールまたはスワイプしすぎると光る、または跳ね返るのと同じです。

あまり良くないことは、それを実際に試さなくても明らかに直感的または簡単に発見できないため、ユーザーに教える必要があるということです。

2
Roger Attrill

グーグルマップでは、左ダブルクリックはズームインで、右ダブルクリックはズームアウトです。

1
richieaj

Googleがいくつかのアプリで使用しているものと同じmagic-yキーボードショートカットを使用できますか? https://www.google.com/reader/ui/660982038-en-keyboard-help-tearoff?hl=en

何が起こるかを確認するために、Readerで+キーを押すと、現在選択しているフィードのズームレベルが設定されます。ラベルはフィードの現在のズームサイズに調整されます。

Googleマップでは、ホイールを地図の特定の部分の上または下にスクロールすると、その領域が中央に合わせてズームインします。そのため、Webアプリでユーザーのマウスの位置を特定する方法も必要です。

可能であれば、これらの2つの方法を組み合わせて、ユーザーが+または-を押して現在のマウスの位置をズームできるようにすることができます。

1
Karen

CTRL +マウスホイールは、一般的にコンテンツの拡大率を変更するデフォルトのコントロールであり、主に視覚障害の場合にコンテンツを拡大するために使用されます。機能を変更しないでください。

FirefoxはJavaScriptによる純粋なマウスホイールズームをサポートしています。 Googleマップには、ダブルクリック、マウスホイール(デフォルトのスクロールアクションからインターセプト)、さらにはマルチタッチズームジェスチャーなど、ズームのための複数のオプションがあります。スクリプトを詳しく調べて、どのように実行されているかを確認します。

1
dnbrv

よし、Shiftキーを押すたびに専用のポップアップスライダーを使用することにしたと思います。また、手動でドラッグする必要もありません。Shiftキーを押しながらマウスを動かすだけです。おそらく、世界で最も明白なことではありませんが、習得することも難しくありません。

しかし、公平を期すために、私は自分の答えは受け入れませんが、他の答えが一番良いです。

0
Vilx-