Размеры касания на телефоне, часть 2: ползунки, шапка, подвалPhone touch sizes, part 2: sliders, header, footer
· Открыть на сайтеOpen on the site
ЦельGoal
Инвестор на телефоне двигает ползунки цены и площади, открывает «Мои параметры», переходит на главную, меняет язык и сбрасывает фильтры пальцем с первого раза.An investor on a phone drags the price and area sliders, opens «My details», goes to the home page, switches the language and resets the filters with a thumb on the first try.
ЗадачаProblem
После итерации «Размеры касания на телефоне» меньше 44 px оставались: у бегунков ползунков цены и площади кружок 18 px, а нажатие ловилось лишь в полосе 18×13 px (и кружок висел под линией, а не на ней), «Мои параметры» в шапке — 34 px, название сайта — 22–23 px, ссылки подвала («English», «Метод», «Источники», «Изменения интерфейса») — 18–22 px на строку, кнопки «Сбросить» в фильтрах и «Очистить выбор» в сравнении — 34 px.After the «Phone touch sizes» change these were still under 44 px: the price and area slider thumbs had an 18 px ring caught only in an 18×13 px strip (and the ring hung below the line rather than on it), «My details» in the header — 34 px, the site name — 22–23 px, the footer links («Русский», «Method», «Sources», «Interface changes») — 18–22 px per line, the «Reset» button in the filters and «Clear selection» in the comparison — 34 px.
Как решилиHow it was solved
- Бегунок ловится в зоне 44×44 px, кружок прежний (18 px) и ходит по тем же точкам шкалы; теперь он стоит на линии, поэтому ползунок опустился на 6 px, чтобы не задевать столбики.A slider thumb is caught in a 44×44 px zone; the ring is the same 18 px and moves over the same points of the scale; it now sits on the line, so the slider moved 6 px down to stay clear of the bars.
- Строка с названием сайта и «Мои параметры» — 44 px, и вся её высота нажимается; кнопка выглядит как раньше. Шапка выше на 4 px (85 → 89).The row with the site name and «My details» is 44 px and its whole height is tappable; the button looks as before. The header is 4 px taller (85 → 89).
- Ссылки подвала, «Сбросить» и «Очистить выбор» — 44 px. Страницы на 320 px не стали шире экрана.Footer links, «Reset» and «Clear selection» — 44 px. Pages at 320 px did not get wider than the screen.
До и послеBefore and after
