web-dev-qa-db-ja.com

iPhoneの実用的な最小ボタンサイズ

私は、かなり大きな画面上の丸い四角形のボタンを備えたiPhoneアプリを設計しています。指ベースのタッチスクリーンUIを考えると、最小の実用的なボタンサイズは何だと思いますか?使いやすさをあまり犠牲にすることなく、ビューポートにできる限り多くの要素を収める必要があります。アップルが推奨する最小サイズがあるのでしょうか?現時点では33x33で、シミュレーターでは問題ありませんでしたが、昨夜、実際の携帯電話でアプリで遊んでいたのですが、ボタンが小さすぎると感じました。

66
Seva Alekseyev

Appleは、平均指タップは44x44(WWDCから)であると言います。すべてのテーブル行は、少なくともその高さになることが推奨されます。アイコンは32x32で表示されるのが一般的ですが、タッチ可能な領域を44x44にするためのパディングがあります。もちろん、非常に注意していれば1x1をタップできますが、なぜアプリを使用するために必要以上に一生懸命努力するのでしょうか?

105
coneybeare

最近の科学研究により、次のことがわかりました。

[A]ターゲットサイズ9.2 mm 個別タスク[つまり、単一ターゲットポインティングタスク]およびターゲット9.6 mmシリアルタスクの場合、タッチスクリーンベースのハンドヘルドで片手で親指を使用する場合、パフォーマンスと好みを低下させることなく十分に大きくする必要があります。

小型タッチスクリーンデバイスでの片手親指使用のターゲットサイズ研究(Parhi、Karlson、&Bederson 2006)から引用。他の情報源は、この「0.4インチに近いルール」に同意しています(例:Designing Gestural Interfaces(Saffer 2008、p。42))。

IPhoneのピクセル密度 163 PPI (6.417px/mm)を考えると、 59px以上の対角線をターゲットに向けることをお勧めします。

(これは片手での親指の使用のみで検証されることに注意してください。)

53
jensgram

Appleはこれに一貫しておらず、厳しい規則はありません。

UIガイドラインでFingertip-Size Targetsを指定し、計算機ボタンが44x44であると言うことをお勧めします。

また、そのドキュメントでは、ツールバーとナビゲーションアイコンの画像は20x20、タブバーアイコンの画像は30x30である必要があるとしています。

アプリケーションを簡単にテストし、ボタンを押すのが簡単であることを確認する必要があると思います-かなり大きな手がある場合でも...

-t

5
Tim

実際、初期のタッチスクリーンでカスタムWebベースのデバイスUIを作成する際、ベータテスターの1人が「私の太った指」と呼んでいるものを設計することが重要であることがわかりました。そして彼は正しかった。多くのユーザーがエラーを起こしやすい、または使用できないと感じるエレガントで洗練されたコントロールを設計するのは簡単だ。そのプロジェクトでは、正確なサイズはアプリケーションに依存していましたが、テスターは40 x 40が使用可能であることを発見しました(高解像度/ Retinaディスプレイの2倍)。ボーナスとして、細い指の人は、より速く動くことができ、それほど正確である必要がないと感じたため、全体がよりスムーズになり、主観的な摩擦が少なくなり、呼吸の余地が増えました。トリックは、そのサイズのコントロールを、ぎこちない、または圧倒的なものに見えないようにすることです。上記のソリューションの1つでは、コントロールの視覚的な部分を実際の寸法よりも小さくしていますが、これは普遍的なソリューションではありません。

2
Marlin Ouverson

最小値は37ピクセルであると彼らは言っていましたが、今日は44ピクセルです。いずれにしても、33は小さいようです。

(多くの場合、画像はより大きな長方形領域の一部であるため、画像は小さくなる場合があります。)

(ピクセルサイズが大きい場合は、他のデバイスでより少ないピクセルで済む可能性があります。)

2
David Dunham