フォームの選択ボックスに使用するのに最適なモバイルパターンはどれですか。
多くのウィジェットとフォームを備えたレスポンシブなWebサイトを設計する必要があります。私はモバイルユーザーがフォームを操作するときにも最高のUXを提供したいと考えています。これは、多くの場合モバイルでは悪夢です。
取り扱っているフォームを添付しております。入力テキストでは問題はありませんが、選択ボックスをよりモバイルフレンドリーなものに置き換えることができます。何か案は？
デフォルトのドロップダウンメニューUIが組み込まれたOSのままにすることを強くお勧めします。
理由がない限り、標準を破らないでください
これは重要。なぜ不要なものを作り直すのですか？すべてのサイトで一貫性のあるUIを変更したが、突然、アプリケーションに到達したときにまったく別のUIになると、混乱が生じます。
普遍的に変わらないものに近づきます。
Giults私はこのようなソリューションを提案します（iPadのKBCホームプロジェクトアプリに触発されました-スクリーンショットを表示しますが、iPadを持っていません:)）。
1。スライダーバー
代わりに、おそらく固定周波数ポイントごとに固定ポイントを使用して、スライダーバーを使用することができます。一部のアプリでは、用語の選択にスライダーが使用されていることを知っていますが、この場合にも使用できる場合があります。
2。ピッカー
もう1つの方法は、（私の考えでは）非常にユーザーフレンドリーな「ピッカー」を使用することです。これにより、アプリ内にスクロールバーが導入される可能性があります。
download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム
すべてのドロップダウンのレンダリングは単に面倒です。ドロップダウンが悪いと言っているわけではありませんが、それは非常に誤用されたUI要素であり、常に最高のUXを提供するとは限りません。
それでは、「依存している」から始めましょう。あなたのデータはどのように見えますか、そこから選択できるオプションはいくつありますか？
セグメント化されたコントロール
カップル（4人まで）の場合は、セグメント化されたコントロールを使用します。ラジオボタンリストと同じように機能しますが、占有するスペースが少なくなります。
スライダー
増分値がある場合は、スライダーを使用します。値にラベルを使用して、ユーザーが何をドラッグしているかを説明できます。
スクローラーコントロール
複数のアイテムがある場合は、スクローラーコントロールを使用します。リストが長すぎる場合は、オプションをグループ化できます。
特定のデバイスで奇妙に見えるいくつかの事柄についてのコメントにも気付きました。プラットフォームとの一貫性を保つことが重要ですが、プラットフォームに依存しない方法でアプローチする必要があります。次に、どこでも見栄えをよくすることができます。少し異なる見た目で処理することもできますが、コアパターンは通常同じままにすることができます。
IPatterns.io でインタラクティブな例を試し、単一値選択パターンの詳細を読むことができます
使いすぎているドロップダウンリストコントロールに関する回答の1つに同意します。オプションが5個以下のリストの場合は、すべてのオプションをリストにして、ラジオボタンで選択できるようにします。
さらに多くのオプションがある場合は、すべてのオプションを表示する専用のモーダル画面を使用し、ユーザーが選択UIをクリックすると表示されるようにします。また、ユーザーが何も選択しないことを決定した場合に備えて、キャンセルボタンが表示されます。オプションまたはキャンセルボタンをクリックすると、モーダル画面が閉じます。もちろん、このメカニズムは、画面の幅が特定のサイズの場合にのみアクティブにする必要があります。
これが実際にAndroid=がHTML選択UIを扱う方法です。
この処理の主な利点は、ユーザーを緊張させたり混乱させたりする可能性がある他の代替手段のようにファンキーではないということです。
トーマスは私をそれに打ち負かしました。ピッカーホイールを使用することをお勧めします。それはwebkitの一部です。
