Размер нажатия для android

Размеры кнопок для мобильных устройств

На мобильных устройствах важен размер кнопок и расстояние между ними, чтобы обеспечить максимальную точность нажатия.

Без конкретных цифр сложно определить, оптимальный у вас размер кнопки или нет. Но благодаря исследованию появился стандарт размеров и расстояний, который обеспечивает наилучшую точность у всех групп пользователей, даже у пожилых людей.

Наибольшая точность была найдена у кнопок в пределах 42−72 пикселей.

Наиболее предпочтительный размер кнопки составлял 60 пикселей, что представляет собой примерно середину диапазона. Кнопка в 72 пикселя обеспечивала высочайшую точность и была предпочтительна для пожилых пользователей.

Расстояния между кнопками

Исследование пришло к выводу, что диапазон от 12 до 48 пикселей является оптимальным интервалом между кнопками. Этот широкий диапазон полезен, потому что вы можете применить его к разным размерам кнопок.

Например, если вы используете кнопку в 72 пикселя, то нужно брать минимальное расстояние между кнопками, так как размер сам по себе обеспечивает максимальное нажатие, а с кнопкой в 42 пикселя нужно использовать расстояние в 48 пикселей, чтобы отделить кнопки и избежать случайных нажатий на соседние.

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

15 мая 2020 • Скопировать ссылку Ссылка скопирована

Источник

Подружите мобильный дизайн с пальцами: идеальные размеры для тачскринов

Не так давно на глаза попалась занимательная статья, в которой автор размышляет о юзабилити мобильных интерфейсов. Некоторые его суждения — из разряда выводов Капитана Очевидности, однако есть там и ряд довольно полезных фактов и доводов, поэтому я решил поделиться ее переводом с хабраобщественностью. Тем более, эта тема может породить полезные дискуссии в комментариях — подозреваю, что многие дизайнеры сами неоднократно сталкивались с этим вопросом.

Играя в дартс попасть в яблочко куда сложнее, чем в любую другую часть мишени. Это естественно, потому что центр мишени является самой маленькой ее частью. Это принцип также можно применить и к мобильным устройствам.

В маленькие элементы управления намного сложнее попасть пальцем, чем в большие. Когда вы проектируете мобильный интерфейс, лучше всего сразу это предусмотреть и сделать эти элементы побольше. Таким образом вы облегчите жизнь пользователя тач-устройства. Но на сколько большими они должны быть, чтобы максимально удовлетворить основную часть пользователей? Многих разработчиков мобильных приложений интересует этот вопрос и большинство из них обращаются к официальным руководствам пользователя, предоставляемым разработчиками платформ.

Что говорят Руководства для Мобильных Платформ

Гайдлайн от Apple — iPhone Human Interface Guidelines — рекомендует такие минимальные размеры для тач-элемента: 44px в ширину и 44px в высоту. Руководство от Microsoft — Windows Phone UI Design and Interaction Guide предлагает использовать размер 34px с минимальной тач-областью 26px. В руководстве разработчика от Nokia предполагают, что этот размер должен быть не меньше 1 x 1 кв.см. или 28 x 28 px.

В то время, пока эти все гайдланы дают общие значения размеров для тач-объектов, можно заметить, что они не только не согласуются друг с другом, так они еще и не соответствуют актуальным размерам человеческого пальца. По факту, предоставленные ими рамеры намного меньше, чем размер среднестатистического пальца, что может вызвать некоторые проблемы во время пользования мобильного устройства.

Маленькие тач-области могут привести к большим проблемам

Маленькие тач-объекты вынуждают пользователей напрягаться, чтобы лишний раз аккуратно прицелиться и попасть в нужную область. Юзерам приходится менять принцип управления своими пальцами, используя то их кончики, то подушечки пальцев. Используя подушечки пальцев для клика, пользователи мобильных устройств получают большую область контакта, но скрывают тач-объект, делая свою цель невидимой. В других случаях пользователи используют кончики пальцев, в основном для нажатия на маленькие области, потому что таким образом они получают визуальный фидбек и видят, что попали в цель точно. Из-за таких частых смен поведения пальцев замедляется и усложняется работа с мобильным приложением.

Кроме этого, маленькие тач-объекты могут привести к ряду ошибок. Когда они сгруппированы рядом друг с другом, пользователь может случайно нажать на соседний объект и выполнить ненужное действие. А все потому, что общая область пальца может покрывать сразу несколько соседних объектов. Так что если во время нажатия цель этого нажатия определена нечетко, то будьте готовы к неожиданным последствиям. Довольно легко наделать ошибок, пользуясь только указательным пальцем, а используя для навигации большой палец их наделать еще легче, потому что обычно область большого пальца значительно больше целей на тачскрине. Иногда пользователи поворачивают палец боком для того, чтобы пользоваться его более узкой частью, однако это требует дополнительного времени лишних манипуляций своими конечностями.

Использование большого пальца довольно популярно среди пользователей мобильных устройств. Некоторые пользователи далеко не всегда имеют две свободные руки во время работы со свои девайсом. Многие предпочитают использовать только одну руку, держа свое устройство в ладони и используя свой большой палец для взаимодействия с интерфесом. Пользователи не должны переключаться между одной рукой и двумя, или между большим и указательным пальцами, чтобы попасть в цель более точно. И что более важно, размер цели не должен приводить к возникновению ошибок, связанных с нажатиями. Маленькие тач-цели сильно усложняют жизнь пользователям, в отличии от дружественных к пальцам.

Средняя ширина указательного пальца в пикселях.

MIT Touch Lab в своей работе Пальцы человека в исследовании механики тактильных чувств (Human Fingertips to investigate the Mechanics of Tactile Sense) определили, что средняя ширина пальца равняется 1.6 — 2 см (16 – 20 мм) для большинства взрослых. В пикселах эти значения будут равняться 45 – 57 px, что шире, чем указано в большинстве гайдлайнов для разработчиков.

Таким образом, цель нажатия, имеющая ширину 45 – 57 px, позволит пользователю максимально комфортно на нее нажать. Края цели будут всегда видимы во время нажатия. Это обеспечивает ее визуальной отдачей, которая сигнализирует о успешно произведенном нажатии. Плюс к этому, благодаря большим размерам целей повышается скорость перемещения пальцев между ними. Это согласуется с Законом Фиттса (Fitt’s Law), который говорит о том, что чем меньше цель, тем больше времени затрачивается для ее достижения. Маленькие цели замедляют пользователей, потому что им приходится уделять дополнительное внимание для точного нажатия. Цели с размерами, равными ширине пальцев, позволяют им не тратить на это время и не беспокоиться об аккуратности нажатий.

Средняя ширина большого пальца в пикселях.

Существует довольно большое количество пользователей, которые используют их указательные пальцы для нажатий в мобильных устройствах. Однако любителей большого пальца существует не меньше. Главное отличие большого пальца от указательного — его ширина, которая в среднем равняется 2.5 см для взрослого человека, что можно преобразовать в 72 px.

Для тех, кто использует большой палец, 72 пикселя творят чудеса. Благодаря такой ширине, пользователям легче и быстрее нажимать на элементы интерфейса, так как при каждом нажатии большой палец всегда будет попадать в свою цель. Также, это позволяет краям цели быть видимыми под любым углом. Это означает, что пользователь не должны вертеть своим пальцем, чтобы видеть каждую тач-цель. Одного касания достаточно, чтобы достичь его цели.

A Исследование размеров цели для большого пальца одной руки на маленьких тачскрин-устройств (Target Size Study for One-Handed Thumb Use on Small Touchscreen Devices) установили, что количество ошибок сокращалось по мере увеличения размера цели. Пользователям стала доступна возможность нажимать на целевые компоненты с большей точностью быстрее без лишних телодвижений, таких как повороты пальца.

Другое исследование «Дизайнерский ключ к касаниям для выделения области на мобильном телефоне (Touch Key Design for Target Selection on a Mobile Phone)» также определил, что количество ошибок уменьшилось, как только область нажатия была увеличена.

Площадь пальцев почти всегда идеальна, но не всегда практична.

Несмотря на все преимущества использования связанных с размерами пальцев площадей касания, такой подход будет практичным не во всех ситуациях. В мобильном устройстве вы работаете на ограниченной области. Это означает, что если вы используете размеры, подходящие для пальцев, для различных элементов интерфейса, то они могут занять куда больше места, чем может позволить экран устройства. Тем не менее, когда у вас есть несколько таких объектов, вы можете разметить их на экране без каких-либо проблем. Вам нужно будет измерить размер экрана и размер тач-элементов, чтобы узнать, на сколько большие тач-области вы можете себе позволить. Если же вы не можете позволить себе использовать размеры под пальцы в вашем интрефейсе, то руководствуйтесь официальными руководствами, которые предоставляются разработчиками мобильных платформ.

Очевидно, что идеальные для пальцев размеры намного легче применять в планшетных компьютерах, чем на мобильных устройствах, потому что у планшетов больше экраны и доступно больше свободного пространства. Вы можете без сомнений использовать это пространство и улучшать юзабилити планшета. Тем не менее, мобильные — именно те устройства, которые вызывают проблемы с нажатиями у пользователей. И поэтому именно они в первую очередь нуждаются в тач-размерах, которые удобны для пальцев. Задача, стоящая сейчас перед дизайнерами, заключается в том, чтобы выяснить, как оптимально разместить их на экране мобильного телефона. Это может потребовать использования меньшего количества тач-объектов на экране, чем обычно. Но это может стать и плюсом, поэтому что это будет принуждать дизайнеров делать навигацию проще и четче.

Размеры для пальцев в игровых приложениях

Еще одна вещь, о которой стоит задуматься, это когда неизвестно, какой именно палец будет использоваться. Сложно определить, какой вариант взаимодействия предпочтут пользователи вашего приложения — большой палец или указательный. Если ваше приложение является игрой, то скорее всего большинство пользователей будут пользоваться большим пальцем для игры вместо указательного. По этой причине размеры, равные большому пальцу, особенно полезны для игровых приложений. Устанавливая размеры для элементов управления, равные площади большого пальца, вы тем самым улучшаете управление и контроль за игрой. Пользователи таким образом получают возможность видеть элементы управления даже во время нажатия на них, что позволяет быстрее адаптироваться в игре.

Игра Gyro13 Steam Copter Arcade имеет большие тач-контролы

Нет никаких сомнений, что размеры тач-объектов, равные ширине среднего пальца, улучшают юзабилити мобильных устройств для большинства из них. Игровое ли ваше приложение, или для каких-нибудь других целей, тач-объекты предназначены для того, чтобы пользователи на них нажимали. Если пользователь должен отвлекать свое внимание от приложения для того чтобы задуматься над тем, как лучше нажать на элемент управления, это ухудшает опыт работы с вашим приложением. С пониманием нового подхода, вы можете создавать приложения, которые будут по-настоящему подружатся с пальцами пользователей. Такой дружественный к пальцам дизайн не зарезервирован за несколькими разработчиками, это новый дизайнерский стандарт для мобильных приложений, которому можно следовать всегда.

PS: Для некоторых терминов и выражений я не смог подобрать однозначный перевод, поэтому не судите строго.

Источник

Полезные советы новичкам в дизайне под Android

Этот пост послужит своеобразным началом серии публикаций на тему «как я учусь дизайну под Android». Никогда не уделял гайдлайнам достаточно внимания, считая их скучными и неинтересными, но все изменилось. Сейчас я начинаю понимать, платформа достигла своей зрелости и предлагает ряд интересных решений.

Кнопка “назад” (The Back Button)

Долгое время back была аппаратной кнопкой Android устройств, не было смысла добавлять программный аналог в пользовательский интерфейс. Сейчас модно использовать кнопку back для навигации внутри приложений. Если говорить о кнопке “назад” пользовательского интерфейса (её называют “up button”), то между хардварной back и up есть небольшая разница. Up производит переход на один экран, в рамках приложения, в то время как back к любому приложению или контенту.

Разрешение

Параметры разрешений под Android немного путают — xhdpi (2x), hdpi (1.5x) и mdpi (1x).

Звучит крайне технически. Когда год назад я начинал работать, никто толком не мог мне объяснить какое соотношение сторон межу ними. После многих расспросов и поисков, оно составило 720×1280, 540×960 и 360×640. Проектируя дизайн макет, не забывайте учитывать хардварные кнопки и статус бар.

От переводчика: На самом деле то, что описано в этом абзаце, не совсем верно. По ссылке и в таблице вы найдете более точное описание.

Начальный набор (Starter Kit)

Джереми Салли, дизайнер из Telly, графически наглядно показал соотношение этих трех разрешений. Вам пригодится Android Action Bar Style Generator для работы с темами по умолчанию. Он позволит задать базовые параметры цвета, стиля и сохранить настройки в Zip файл для всех всех трех разрешений. Лучший способ наглядно поэкспериментировать.

9-slice Scaling

В Android есть своеобразный способ масштабирования графических ресурсов, который не похож на CSS. 9-slicing позволяет вам указать, какую именно часть картинки вы хотите масштабировать. Остальная часть, такая как закругленные углы, остается фиксированного размера даже при масштабировании всего ресурса. Для этого в файле картинки необходимо нарисовать черные линии шириной в 1px в следующих областях:

• Top: область, которая может быть растянута по горизонтали.
• Left: аналогично по вертикали
• Right: Область по вертикали, в которой будет расположено содержимое. Этот параметр может использоваться для задания отступов.
• Bottom: аналогично по вертикали

The Action Bar

В отличие от iPhone, где название обычно находится в середине заголовка, на Android название в левом верхнем углу, рядом с логотипом приложения. Нажатие на логотип обычно вызывает боковое меню или возвращает вас “назад”, к предыдущему экрану.

Под названием приложения порой можно заметить треугольную стрелочку, благодаря ей возможна навигации внутри приложения. Прямо как в сети интернет, очень частый способ отображения выпадающего меню на Android.

Наконец, если вы серьезно относитесь к гайдлайнам, все элементы управления должны быть в правом верхнем углу. Это относится и к функции обновить (потянуть, чтоб обновить как на iPhone, очень редко используются в Android), поиск, и печально известные кнопки “действия” которые в идеале дожны быть в виде трех точек. Точки используются для тех действий, которые не смог вместить Action Bar.

Шрифты

Шрифты, к сожалению, зависят от специфики устройства, так что будьте готовы к казусам. Не расстраивайтесь если вам придется протестировать дизайн на старом устройстве. Были и куда худшие дни — вспомните IE6. Самый популярный шрифт на данный момент Droid Sans. Впрочем Roboto набирает популярность, так как присутствует на новых устройствах.

Размеры

Начиная с Android 2.x, минимальный размер элемента должен быть: 28px для текста, 96px для меню и заголовка, 116px для нижнего колонтитула. Это немногим больше чем в iOS (24px, 88px и 100px). Если говорить о соотношении 116% Android к iOS.

Просматривайте проектируемый дизайн на Android устройстве

Роман Нурик из Google разработал очень полезный инструмент Android Design Preview. Инструмент поможет дизайнеру посмотреть, как нарисованный в графическом редакторе на компьютере макет приложения будет выглядеть на реальном устройстве.

Программу Android Design Preview можно установить на Windows, Mac OS X или практически любую из операционных систем семейства *nix. Приложение написано на Java и представляет собой обычный JAR-файл. Работает Android Design Preview следующим образом: разработчик подключает смартфон к компьютеру по USB (На ПК должны быть установлены ADT), запускает Design Preview, нажимает «Select Mirror Region» в этой программе и видит перед собой рамку. Эту рамку он устанавливает на макет и видит его на экране смартфона.

Источник