Минимальный размер кнопки на iPhone

Question

Я разрабатываю приложение для iPhone, которое имеет довольно большой набор экранных прямоугольных кнопок с закругленными углами. Учитывая сенсорный интерфейс на основе пальцев, как вы думаете, какой будет наименьший разумный размер кнопки? Мне нужно разместить как можно больше из них в окне просмотра без чрезмерного ущерба для удобства использования. Может быть, есть рекомендуемый Apple минимальный размер? Сейчас он 33х33, и на симуляторе он выглядел нормально, но вчера вечером я играл с приложением на реальном телефоне, и это было неловко - кнопки казались слишком маленькими.

Answer 1

Apple говорит, что среднее нажатие пальца - 44x44 (из WWDC). Рекомендуется, чтобы все строки таблицы были как минимум такой высоты. Обычно значки появляются 32x32, но имеют отступы, чтобы сделать сенсорную область 44x44. Конечно, люди могут нажать 1x1, если они очень осторожны, но зачем заставлять людей стараться изо всех сил, чтобы использовать ваше приложение?

Answer 2

Недавние научные исследования показали, что:

[A] целевой размер 9,2 мм для дискретных задачи [то есть задачи наведения с одной целью] и цели 9,6 мм для серийных задачи должны быть достаточно большими для использование большого пальца одной рукой на сенсорные панели без ухудшение производительности и предпочтений.

Цитируется по Исследование целевого размера при использовании большого пальца одной рукой на небольших устройствах с сенсорным экраном (Parhi, Karlson, & Bederson 2006). Другие источники согласны с этим «правилом, близким к 0,4 дюйма» (например, Проектирование интерфейсов жестов (Saffer 2008, p. 42)).

Учитывая плотность пикселей в iPhone 163 PPI (6,417px / мм), вы должны стремиться к не ниже 59px диагонали для любой цели.

(Обратите внимание, что это проверено только для использования одной рукой .)

Answer 3

Apple не согласна с этим, и нет жестких правил.

Они рекомендуют вам указать Цели кончиков пальцев в Руководстве по пользовательскому интерфейсу, а затем сказать, что кнопки калькулятора 44х44.

Также в этом документе говорится, что изображения для панели инструментов и значков навигации должны быть 20x20, а для значков панели вкладок - 30x30.

Я думаю, вам нужно просто протестировать ваше приложение и убедиться, что кнопки легко нажимать - даже если у вас довольно большие руки ...

-t

Answer 4

На практике, создавая пользовательский веб-интерфейс устройства на ранних сенсорных экранах, мы обнаружили, что важно разрабатывать то, что один из наших бета-тестеров называл «мои толстые пальцы». И он был прав: легко спроектировать элегантные, точные элементы управления, которые значительное количество пользователей сочтут подверженными ошибкам или непригодными для использования. В этом проекте точный размер зависел от приложения, но этот тестировщик обнаружил, что можно использовать 40 x 40 (вдвое больше, чем для экранов высокой четкости / Retina), что в меньшей степени увеличивало количество промахов и ошибок (и разочарований); и в качестве бонуса люди с тонкими пальцами обнаружили, что чувствуют, что могут двигаться быстрее и не должны быть такими точными, что заставляет все это чувствовать себя более плавным, менее субъективное трение, больше пространства для дыхания. Хитрость заключается в том, чтобы элементы управления такого размера не казались неуклюжими или властными; одно решение упомянуто выше, делая визуальную часть элемента управления меньше его фактических размеров, хотя это не универсальное решение.

Answer 5

Я мог бы поклясться, что они сказали, что минимум был 37 пикселей, но я нахожу 44 сегодня. В любом случае 33 кажется маленьким.

(обратите внимание, что изображения могут быть меньше, поскольку они часто являются частью большой прямоугольной области.)

(Вы можете получить меньше пикселей на других устройствах, если размер пикселя больше.)