web-dev-qa-db-ja.com

iOSのドロップダウンリストのデザインパターンはありますか?

私はこれをかなり検索しましたが、驚くべきことに、包括的な答えを見つけることができませんでした。 XCodeは、iOSインターフェイスにドロップダウンリストを追加する簡単な方法を提供していません。 Stackoverflowは、単純なドロップダウンリストを取得するための回避策と長いコードを示しました。これにより、設計パターンは実際にはドロップダウンリストを使用しないことになっています。これは本当ですか?もしそうなら、推奨される代替策は何ですか?

36
sabziwalla

iOSでは、「ピッカー」をはるかに使いやすくしています。これらは、「ドロップダウン」で何をする必要があるかによって異なります。新しいリンクを参照 https://developer.Apple.com/ios/human-interface-guidelines/controls/pickers/

9
Paul

Appleが推奨されている(そして驚くほど今でも推奨されている)ドロップダウンのピッカーであるにもかかわらず、もはや使用していません。

enter image description here

enter image description here

これらのどちらの場合でも、「ロジック」はドロップダウン+ピッカーの使用を指示します。 Appleは、自分のアプリに対してはるかに優れたソリューションを選択しました。

それでも、「女性」または「男性」の間で選択する画面全体(バイナリの例を許す)は誇張されているようです。個人的には、最良のオプションは、タップするとアクションシートを開くドロップダウン要素のように見えるものをデザインすることです。

enter image description here

その理由は、アクションシートはピッカーよりも優れているからです。

1)アクションシートでは、強調表示されていないオプションを読んだり選択したりするためにスクロールする必要はありません。

2)アクションシートは背景を薄暗くし、明確なアフォーダンスを提供します。アクションシートの外側をクリックすると、他の要素はアクティブになりません(ピッカーがユーザーに不明確にするのに対し)誤って何かをタップせずにピッカーを閉じるためにタップする場所の);

3)アクションシートには[キャンセル]ボタンがあります。

4)アクションシートの項目は44ポイントの高さで、ボタンの間にマージンがあり、画面上のより多くのスペースを使用してより多くのオプションをリストできます。

アクションシートは、ユーザーを別の画面に移動させないため、前に示したフルスクリーンよりも優れているため、フローがより流動的になります。 およびそれらはネイティブであり、その結果「より将来性のある」ものであるため、カスタムビルドの代替よりも優れています。ブラッドフロストは、実際には「将来にやさしい」と言って、おそらく私を正してくれるでしょう。

ちなみに、Luke Wroblewskiは ドロップダウンが最後の手段のUIである理由 に関する優れた記事を持っています。これらの4つの非常に優れたビデオでは、ある要素が他の要素よりもうまく機能する時期と理由について詳しく説明しています(そしてそれをバックアップするための研究と一緒に):

Luke Wroblewskiパート1-Conversions @ Google 2014

Luke Wroblewskiパート2-Conversions @ Google 2014

Luke Wroblewski-Mobile Design Essentials Part 1-Conversions @ Google 2015

Luke Wroblewski-Mobile Design Essentials Part 2-Conversions @ Google 2015

あなたのヘッドフォンを入れて飛び込みます。ビデオはそれだけの価値があります。

34
Lucas Cerro

IOSでドロップダウンが必要なのはなぜですか?ドロップダウンは、モバイル(iOSまたはAndroid)では操作が非常に困難です。 picker のような別のパターンを提案するか、Paulが述べたように、ドリルダウンリスト(複数選択用の一連のテーブルビュー)

2
Adam Thompson