web-dev-qa-db-ja.com

スクロールタブバーモバイルアプリ

スクロール可能なタブバー...

scrolling tabs

...または'More'ボタン?

more button

どちらがよりユーザーフレンドリーですか?

私はモバイルデザインに不慣れで、自分でデバイスを持っているわけではないので、どちらを使用するかはわかりません。

Android、iOS、Windows Phoneをターゲットにしています。せいぜい8〜10個のタブがあります。前回のビルドのパフォーマンスの問題のため、サイドバーメニューを使用したくありません。

1
user3783608

追加のメニューオプションを提供するには、「詳細」ボタンを使用する必要があります。

また、ナビゲーション構造をよく見て、なぜこれほど多くのオプションが必要なのかを理解する必要があります。 8-10は過度に過剰に見えます。

AppleiOSヒューマンインターフェイスガイドライン 44x44ピクセルの最小ボタンサイズを呼び出します。これは約7mmに相当します。メニューの左/右ボタンを押すと、はるかに小さいヒットターゲットが導入され、ユーザー(特に指が大きいユーザー)を苛立たせる可能性があります。

enter image description here

iOSは Iエレメントセクション のタブバーセクションで5つのタブ制限を推奨し、具体的には[詳細]ボタンを呼び出します。

enter image description here

IPhoneで一度に表示されるタブは5つまでです(タブがさらにある場合は、タブバーに4つが表示され、[追加]タブが追加され、リストに追加のタブが表示されます)。

MicrosoftWindows Phoneのデザインライブラリ で詳細に説明しています。 。 Windows Phoneとの相互作用と使いやすさ セクションで説明したように、9mmの正方形が理想的なタッチターゲットサイズです。より小さなヒットターゲットの高さが必要な場合、最小ターゲットサイズは7mmです。要素間の最小間隔は2mmです。

enter image description here

推奨されるタッチターゲットのサイズは、9 mm四方以上です。ほとんどのタスクをサポートするコントロールにこれを使用します。

スペースが厳しく制限されている場合は、幅がはるかに広い限り、7 mmの最小タッチターゲットサイズを使用できます。

9ミリメートルは、数百時間のユーザーテストによって決定される数値であり、離散タスクとシリアルタスクの両方の最低平均エラーレート(またはタップの総数に対するフォールスタップの比率)を表します。最小9 mmのタッチターゲットサイズでは、エラー率を1.6%に制限できます。

タッチターゲットの最小サイズは7 mmです。これは、使用頻度の低いコントロールまたは十分に広い(15 mm以上)コントロールに使用します。高さが高すぎるとデザインが制限されます。

これらの目標サイズは、小さな左/右ボタンで達成するのが明らかに難しいでしょう。

Windows Phone App Bar (下部のバー)は、ボックスからのスクロールアウトを実際にサポートしています。ただし、ガイドラインでは、スクロールを回避するためにボタンを5以下に制限することを明確に規定しています。

アプリケーションバーで5つを超えるメニュー項目を使用すると、ユーザーが強制的にスクロールするため、使用しないでください。

GoogleAndroid Design のドキュメントで同様のサイズを推奨しています。 Metrics and Grids セクションで説明されているように、タッチ可能なUIコンポーネントは48 dpユニットに沿ってレイアウトすることをお勧めします。

enter image description here

繰り返しになりますが、メニューの左/右ボタンを回避するためにヒットサイズの推奨が呼び出されることは明らかです。

ボタン数に関する特定の推奨事項はありませんでしたが、「more」の優先順位は、Android ecosphere内の一般的に使用されるいくつかのアプリケーションで明確に確立されています。詳細は Actionバー そしておそらく私がしなかった推薦を見つけます。

1

左または右にスウィッシュできると仮定して、スクロールタブバーを使用します。これにより、ユーザーは右に3回押して10番目の項目に到達するよりも速くメニュー項目にアクセスできます。

0
DarrylGodden

Androidの設計ガイドラインでは、状況に応じてナビゲーションドロワーを指定しています。アクティビティの代わりにフラグメントを使用すると、パフォーマンスの問題は発生しません。ナビゲーションドロワーに対して実際に設定されていない場合は、 5つ以下のタブで構成されるiOSの標準をそのまま使用し、必要に応じて5番目のタブをより多くのタブにします(両方のプラットフォームでこのiOS標準を使用します)。

0
ChristianCuevas