web-dev-qa-db-ja.com

UI要素が実際のスライダーを使用せずにスライドできることをどのように示しますか?

Androidアプリのインターフェイスを設計しています。これにより、バックグラウンドで再生される音楽のピッチ、テンポ、音量などをユーザーが制御できるようになります。

これが私がこれまでにスケッチしたものです:
settings for pitch, tempo, and volume, each with +/- buttons on each side

UIをすっきりさせるためにスライダーを使用することは避けました。ただし、ユーザーがパラメーターの値を横にスライドして(+/-ボタンをクリックできることに加えて)、パラメーターの値を変更できるようにしたいと思っています。

たとえば、音量を上げるには、指を34%に置き、右にスライドします。

ユーザーがこの「隠れた」アフォーダンスについて確実に知る方法はありますか?または、既存のアプリケーション(iOSまたはAndroid)に同様のものが実装されているのを見たことがありますか?

7
Gautam

スライダーの代わりに、今度は水平に向けられたローラーはどうですか?

horizontal rollers for selecting pitch, tempo, and volume

+および-ボタンを取り除くこともでき、3つの値の微調整と粗調整の両方、小さな混乱、および操作方法が明らかな視覚的インターフェイスが得られます。

また、@ JOGが注記しているように、「ユーザーの指が邪魔になる可能性があるため、中央の値が表示されない場合があります」...ローラーの設計は、スライダーの設計よりも優れています。任意の水平位置で相互作用することで値を制御できます。

15
Erics

それは本当にクールな相互作用ですが、それは標準ではありません。行をスライドすることは、Android=通知の削除ジェスチャーです。このコントロールについてユーザーに誤ってつまずかせるか、すべてを表示する最初の使用エクスペリエンスを作成することにより、ユーザーにこのコントロールについて説明する必要があります。クールなトリック-インスピレーションについては モバイルデザインパターンギャラリーの招待セクション を参照してください。

また、このジェスチャーが機能する最も自然な方法は、開始点を指定せずに行全体をスライドできるようにすることです。言い換えると、1つの行を横切る左から右または右から左への動きは、偶発的な変更を回避するために特定の圧力と方向がある限り、それぞれ減少/増加を意味します。

5
dnbrv

私は他の人に同意します。あまり一般的でないやり取りの場合は、ユーザーを教育する必要があります。結果のリストを更新するために急速に期待されるiOSインタラクションになりつつあるものに関する、iOS向けGoogle Voiceの例を次に示します。

enter image description here

この例では、「Tip:Pull to refresh」は、ユーザーが1回実行すると消えます。 「ヒント:アイテムをドラッグして値を変更する」というテキストを使用して、このようなことを行うことができます。

ただし、このスワイプ操作で数値が非表示にならないように注意してください。

2
Matthew Moore

私はあなたに退屈な答えを与えるつもりです、そしてそれは-と+記号と数字で私はまだuiが雑然としていると思うということです。

  • 数字を表示するスライダーをツールチップとして使用してみませんか?または、より多くのスペースを節約するには、ノブを使用しますか?

    あなたが実装しようとしているのは標準ではなく、あなたがイントロスクリーンを見せても人々はそれを却下します。さらに、人々は、以前に見たりやり取りしたりしたUIが本当に好きです。なぜなら、多くのことを考えたり、デザインパターンだけを使用する方法を学ぶ必要がないからです。

1
Tony Bolero

ここにいくつかの考えがあります:

  • @dnbrvは正しいです。ユーザーを教育する必要があります。
  • スライドの精度を上げるため、指の邪魔になって真ん中の値が見えない場合があるので注意してください。
  • 中心点を開始点として選択したかどうかを選択した場合、スライドを開始する最初の場所をその中心にすることができます。
  • +/-ボタンを押している間、センターピースを少し動かすことができます。そうすることで、ユーザーはセンターピースが右に移動して+を押すのと同じことを学習します。
  • それらを教育する別の方法は、ページを開くときに、奨励された動作をアニメーション化することです。ページを開くと、ボリュームは50%から始まり、37%になるまで左に移動します。同じようにピッチはCで始まり、C#に達するまで右に移動します。アニメーション全体が1〜2秒を超える必要はありません。
0
JOG

スライドするものの一部に「大まかな」グラフィックパターンを使用します。

アフォーダンスは、実際のオブジェクトと同様に、オブジェクトをスライドさせると、指でグリップしてスライドすることです。

(Windowsは常に、ウィンドウの右下隅にこれを使用して、サイズを変更できることを示しています)

0
PhillipW