web-dev-qa-db-ja.com

iPadのキーボードの上に追加されたボタンの行がスクロール可能であることをどのように示すべきですか?

私のiOSアプリには、キーボードと同じスタイルのボタンを使用して、キーボードの上に表示される追加のツールバーがあります。このツールバーは水平方向にスクロールできます。

現在、すべてのデバイスと向きで、ボタンの半分が常にEdgeから外れていることを確認して、さらに表示するものがあることを示していますが、ユーザーと話し合った後、多くのユーザーはツールバーがスクロールすることを認識していません。この領域がスクロール可能であることをどのように示すことができますか?

enter image description here

(実際のアプリでは、これらのボタンにはラベルがあります)

これが私が最後に行ったことです:

enter image description here

10
fredley

ラップするEdgeをフェードアウトします(ボタンがEdgeの上にぶら下がったままにするので、目に見えないコンテンツがあることがより明確になります。画面がoffでないだけではないため、より明確になります表示されますが、画面上のの一部は表示されません。

enter image description here

または、それがコンベヤーベルトのようなものか、物理的に角を曲がったり、後ろを曲がったりするものであることを確認してください。

enter image description here

そして、中央に向かってスクロールし、両端のコンテンツがある場合は、両側でそれを行うことができます。

enter image description here

もう一方の端までスクロールしたら、もう一方の端から削除します。

enter image description here

コンベヤベルトのメタファーの適合性

このメカニズムとの主な相互作用は、左から右への矢印をタップするのではなく、左から右へのドラッグ/スワイプによるものだと想像します。ユーザーがスワイプジェスチャーを見つける前に矢印をタップする傾向があるかもしれません(ユーザーによっては明らかに異なります)。そのため、矢印を大きく(よりタップ可能)し、アイコンだけでなく、追加コンテンツの方向性。ただし、スワイプでアクセスできること。 (例 Luke Wroblewskiのタッチジェスチャーガイド

ユーザーを混乱させる設計原則と範囲の違反についてのコメントがあります。このメカニズムが本当に適切であるか混乱しているのかを判断するために、検討する場合は、リリース前にこのアイデアを実際のユーザーで確実にテストすることを強くお勧めします。

コンテンツをラッピングしますか?

あなたや他の人は、このメカニズムを常に両端に表示し、実際にコンテンツを両端から折り返すことができるようにすることを検討するかもしれませんが、これは、アイテムの数と、シナリオで意味があるかどうかに依存します。

たとえば、順序付けされたコンテンツがあり、最後までスクロールしてもう一方の端に戻るよりも、端から端まで折り返す方がはるかに簡単な場合に便利です。

そのようなことは、録画のリストをスクロールできるパーソナルビデオレコーダーのようなものにいつも腹を立てますが、トップに戻るには、ボタンを約50クリックして最後まで戻る必要がありますが、すべての状況に適しているわけではありません!

しかし...スクロールメカニズムが本当に必要かどうかを検討してください

上記のすべては、尋ねられた特定の質問に対応しています(つまり、ボタンをよりスクロール可能に見えるようにするため)。でも、メカニズムが必要なのかどうかは疑問です。

追加のキーはiOSキーボードにはないキーボードキー用であると説明しました(そのため、他のキーボードと同じデザインを使用してもまったく問題ありません)。

これはチェックアウトする価値があります iA Writer 以下に示し、いくつかの優れたレビューがありました-Eric Speikermanは 彼のiPadで最高のアプリ だと言っています。なぜ-それは手元のタスクの単純化、つまりライティングに焦点を当てているからです。

iA Writerは、非常に便利な(大きい)矢印キーを含む、ほんの一握りの追加キーで管理します。 iAがもっと多くのキーを追加できたと私は確信していますが、この美しくデザインされたアプリでは、シンプルさを保つことが明らかに最優先事項でした。

enter image description here

また、iA Writerのトップバーのキーが次の行のキーと重なっている(視覚的に整列しているのではなく)ことは、視覚的な魅力の観点からも注目に値します。これは、ビジュアルデザインのフローを継続し、組み込みキーボードから追加の行に簡単にブレンドするために推奨されます。スクロールメカニズムを使用する場合でも。重複するデザインが保持されるようにすることをお勧めします。 iA Writerには、大きな突き合わせキーのペアがあり、見苦しいギャップを残さずにデザインを左右の範囲に到達させることができます。

16
Roger Attrill

私にとって、キーボードの一部のように見えるUIアイテム(実際のアイテム)に沿ってアイコンをスクロールさせるために使用したアプローチは機能しません。現実のキーボードには回転パネルがないため、現実世界のアイテムのように見えるものを作成し、それを現実の世界では起こり得ないことを実行しようとすると、ユーザーが混乱します。

アイコンが含まれるパネルを作成し、別のセットにスクロールできることを示す矢印でアイコンの追加セットがいくつ利用できるかを示すインジケーターを作成する方がはるかに適しています。これを伝えるための非常に迅速で大まかな例を次に示します。

Scrolling UI example

あなたが考える必要がある他の考慮事項は、次のように、左端または右端のページにいるときに矢印ボタンを削除または無効にすることです(より良いWordが必要な場合)。

Extra considerations on UI

必要なアイコンを見つけるために複数のページをスクロールしなければならないのは煩わしいかもしれません。そのため、アイコンを並べ替える機能を考慮するか、少なくともユーザーと協力して最も使用されているアイテムがオンになっていることを確認する必要があります最初のページ。

7
DigiKev

ビューが最初に表示されたら、flashScrollIndicatorsを使用してツールバーのスクロールバーを点滅させます。これは、画面領域を占有することなく、領域がスクロール可能であることをユーザーに視覚的に示します。 (これは一般的なiOSの動作であり、Mail、Safariなどを含むほとんどすべてのアプリで見られます。)

3
vocaro

これについてはAppleヒューマンインターフェイスガイドラインを参照してください。ただし、ホーム画面でユーザーが使用しているのと同じプロセスを複製します。

セクション全体を裏返す小さな点。

コンテンツ全体をスワイプするのに十分なコンテンツがない場合は、次のベストApple追加のコンテンツにはUIを使用し、スクロールバーを使用します。コンテンツ。

2
James Wilkinson

IOSは、物理キーボード(または少なくとも個別のキーボードレイアウトのセット)を模倣する明確な選択を行いました。数値キーパッドに切り替えると、アニメーションも表示されないことに注意してください。

したがって、iOSキーボードの動作に従うか、キーを使用する個別の固定レイアウトを使用して、他のキーを使用する代替レイアウトに切り替えます。

または、カスタムキーの外観を大幅に変更します。あなたがスクロールを主張するなら、私は物理的なボタンを真似さえしません。

2
Kris Van Bael

どちらかの端に大きな浮動矢印を貼り付けますか?

次に、左矢印または右矢印をクリックするとスクロールします。

1
PhillipW

IOSヒューマンインターフェイスガイドラインには、長いナビゲーションバーの処理方法に関する推奨事項があります。ここでは、同じアイコン/エクスペリエンスを使用できます。

0
Shalvius