ユーザーは、アフォーダンスをシェーディングせずにこのデジタルスピナーを理解できますか？
私が設計しているWebページに Mobiscroll jQueryプラグイン を使用しています。
ただし、使用するテンプレートとうまく調和しないため、大きな変更を加える必要がありました。
持っていた背景色をすべて削除しましたが、これには欠点がありました。すべてのオプションが同じ透明性を持っているという事実。ただし、境界線を使用することで、どこに配置するかをまだ理解していると思います。 （真ん中、国境の間！）これは私にとって適切な妥協案ですか？
このデザインが多くの場合、ユーザーのバージョンのコントロールを把握するためのユーザーからの「試行錯誤」アプローチにつながるのではないかと心配しています。
上記の2つを比較すると、どちらの場合も選択されたのは中央のオプションであるという結論を導くのは簡単です。しかし、それは、ソリューションの元のプラグインにあるものと同じアフォーダンスパターンを無意識に投影しているためだと思います。そして、それによってあなたはあなたの解決策と相互作用する方法を理解するのを助けられます。
私はあなたの解決策だけでは多くのユーザーが現在の設定が実際に何であるかを知らないままにしてしまうと思います。視覚的な表示は、特定の値ではなく範囲を指定していることを意味する場合もあります。これに加えて、表示された範囲の外側にさらに多くの値があることは明らかではありません。これは、元のプラグインが外側の値の段階的な透明度で伝えるものです。
コントロールで選択されているオプションと、現在表示されている範囲外に非表示になっている値があることをユーザーに伝える追加の方法を探す必要があります。そしてこれは、私の経験では、選択された値の隣にある値をフェードインすることによって最もよく伝えられます。
CSSテキストグラデーション効果 を使用して、数値に対して「スロットマシン」スタイルの3D効果を維持します。これにより、デジタルスピナーは、iOSスピナーのスキューモーフィックシャドウイングと同様のアフォーダンスを維持できます。テキストにグラデーションを適用するということは、背景が何であっても効果が残ることを意味します。 IE6互換ではありませんが、プログレッシブエンハンスメントなどです。
グラデーション効果を捨てる必要はないと思います。選択した背景でグラデーションが読みやすく/ばかげていないことを確認してください。
選択されていない上部と下部の値の透明度の一部を復元します。これにより、丸みを帯びたスクローラー効果が復元され、どのオプションが選択されているかがわかりやすくなります。
透明にできない場合は、選択範囲の色を変更してください。
または、上下の線ではなく、枠で囲んで、他の線とは異なることを明確にします。
中間の項目が異なるため、選択されていることを明確に識別する必要があります。