Скролл лонгтапом что это

Правила скролла в мобильных приложениях. Взаимодействия и методы

Я тестировал скролл в трех разных проектах и открыл для себя его плюсы и минусы, и, возможно, несколько правил его использования. Надеюсь, это поможет вам при создании и прототипировании вашего следующего продукта.

Основы

Насколько я могу судить, при использовании такого паттерна на странице, как скролл существует одно общее правило. Правило #1

Вы можете применять скролл к объекту только по одной оси за раз.

Как правило, эта ось является вертикальной или горизонтальной. Вертикальный скролл является основой практически любого цифрового взаимодействия, с которым вы столкнетесь, а горизонтальный – это обычный способ показать встроенный контент, не жертвуя информационным пространством. Однако, когда вы применяете скролл к более, чем одной оси, вы нарушаете границы. Вы даете объекту пространство, в котором он должен занимать любую точку между этими осями. В приведенном выше примере (красный квадрат) показывает объект с возможностью прокрутки как по вертикали, так и по горизонтали. Он становится объектом свободной формы, более похожим на взаимодействие с перетаскиванием, чем как взаимодействие с прокруткой. Я уверен, что есть изобретательные способы использовать подобный вариант, но они, скорее всего, не будут восприниматься как скроллинг.

Поправка

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

Вложенный скролл

Возможно, у вас не получится нарушить правило одной оси, но вы можете обойти его. Наиболее надежным способом выхода скроллинга за пределы одной оси является добавление групп вложенного скролла. Группы вложенного скролла позволяют одновременно применять вертикальные и горизонтальные жесты скролла к одному объекту. Что на самом деле происходит – это использование скролла двух отдельных объектов и применение их к одному объекту. Это означает применение группы скролла к одному объекту, а затем применение отдельной группы скролла к объекту, который уже содержит первый объект (или является его родителем). Я взял часть иерархии из дизайна, чтобы показать это. Эта структура позволяет группе «фрукты» прокручиваться отдельно от группы «овощи» и одновременно с ней, потому что группа фруктов получает жесты от двух взаимодействий скролла. По существу, вложенный скроллинг использует переходы из двух источников для обхода правила №1. Это прекрасно работает, пока эти два источника не начнут конфликтовать. В приведенном выше примере группа «фрукты» прокручивается вертикально, а родительская группа «фрукты-овощи» прокручивается по горизонтали. Это делается по необходимости. Если обе группы будут прокручиваться в одном направлении, скажем вертикально, то оба взаимодействия будут конфликтовать. Система не сможет отделить один жест скролла от другого, и дизайн, безусловно, сломается. Одно взаимодействие блокирует другое, запрещая его использование. Это приводит меня ко второму правилу использования скролла. Правило #2

Вы не можете применять к одному объекту два взаимодействия скролла на одной оси.

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

Комбинированный скролл

Не бойтесь, есть выход. Комбинированный скроллинг (название, которое я только что придумал) и есть наше решение. Вместо того, чтобы фокусироваться на фактическом взаимодействии прокрутки, комбинированный скролл позволяет вам распространить это взаимодействие для остальной части дизайна. Суть его заключается в том, чтобы анимировать взаимодействия скролла. Вы используете прогресс группы скролла для определения контента в других частях дизайна. В примере ниже (слева) группа вложенного скролла позволяет прокручивать различную обувь, а также описание для каждой пары обуви. При этом меняются иконки обуви внизу. Они не входят в группу скролла, но кажется, что они прокручиваются вместе с ней, несмотря на то, что они очень разные по размеру и форме. На самом деле срабатывает анимация, связанная с взаимодействием скролла. Я анимировал иконки обуви, чтобы они были в определенных положениях при определенных точках положения скролла. В результате один жест управляет несколькими различными частями дизайна. Кажется, что реализация подобного приема займет много времени, но я уверяю вас – это не так. Однако, не все так хорошо. Посмотрите на другой пример (справа). Получаем такую же динамику, но наоборот. Иконки обуви находятся в группе вложенного скролла, а обувь / описание – нет. Вы можете сказать, что взаимодействие не такое плавное, как в примере слева, и для активации анимации требуются большие жесты. Могу сказать вам, что это конкретное взаимодействие часто ломалось. Бывает, что скролл не вызывает анимацию. Скажем, триггер для появления обуви – это положение скролла от 0px до 66px. Если я прокручу на 5px-66px, тогда анимация не сработает, и я получу сломанный прототип. До того, как я пришел к третьему правилу скролла, было много проб и ошибок. Правило #3

Не злоупотребляйте.

Активная манипуляция

К этому моменту, думаю, я слишком далеко отклонился от первоначальной цели скролла. То, что отличает скролл от свайпа и сдвига – это активная манипуляция. Свайп начинается и заканчивается. Скроллинг всегда активен. В предыдущих дизайнах широко используется прокрутка страниц, которая удаляет это активное качество. В следующем дизайне я попытался его выделить. Я переработал (отчасти) опыт использования Medium на мобильных устройствах, чтобы добавить секцию скролла, включающую все, что может понадобиться пользователю Medium. Вы можете открывать и закрывать секцию скролла, сохраняя информационное пространство. Более того, секция скролла довольно большая, и поскольку скролл – это активное взаимодействие, вам нужно прокручивать ровно столько, сколько требуется для нужного вам контента. Сначала отображается контент с самым высоким приоритетом. Мне нравится этот дизайн, но я признаю, он слабый. И это потому, что, как вы могли заметить, я нарушил свое правило №2. Вертикальный скролл для открытия секции скролла находится поверх вертикального скролла основного контента. Иногда, при скролле, жест разрывает границы контента, заставляя секцию скролла самопроизвольно открываться. Мне, действительно, приходилось мыслить нестандартно, чтобы этот дизайн реагировал на два отдельных вертикальных жеста скролла. Тот факт, что он вообще работает, несмотря на «правило», которое утверждает, что это невозможно, означает, что есть возможности для изменения и нарушения правил. Так что… Правило #2 дополненное

Вы не можете применять к одному объекту два взаимодействия скролла в одном направлении на одной оси. : D

Надеюсь, понятно, что я не отношусь к этим правилам слишком серьезно. Это всего лишь мои наблюдения. Надеюсь, мы сможем полностью избавиться от правил. Удачи. Перевод статьи Jose Virgil Almeda

Кроссбаузерный скроллинг

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

Библиотеки

Обертка

Если ваш выбор пал на iScroll, вам следует поместить контент внутри блоков #wrapper и #scroller

Определяем тач-устройство с помощью Modernizr и создаем для него новый экземпляр iScroll

var myScroller = Modernizr.touch ? new iScroll('scroller') : null; 

Добавляем стили

#wrapper < overflow: auto; >/* Переопределяем #wrapper для тач-устройств */ /* Класс head.touch создается Modernizer'ом в случаи если ваш браузер поддерживает тач-ивенты */ .touch #wrapper

Функция для нормализации позиции скрола

function getScroll(elem, iscroll) < var x, y; if (Modernizr.touch && iscroll) < x = iscroll.x * -1; y = iscroll.y * -1; >else < x = elem.scrollLeft; y = elem.scrollTop; >return ; > 

Финальный штрих

var myScroller = Modernizr.touch ? new iScroll('scroller') : null; (function animationLoop()< window.requestAnimationFrame(animationLoop); var scroll = getScroll(window, myScroller); // Теперь мы можем использовать кроссплатформенные координаты scroll.x; scroll.y; >)(); 

Скроллинг

Скроллинг (от англ. scroll, scrolling) — это вертикальная или горизонтальная прокрутка страницы с помощью колесика мыши или «ползунка» для просмотра текста, изображения, перемещения по каталогу и т.д.

Пройдите тест из 10 вопросов и узнайте, какая дизайн-профессия подходит лично вам

Содержание

1. Виды скроллинга и их назначение
2. Бесконечный скроллинг — так ли он хорош?
3. Правила юзабилити скроллинга
4. Как создать скроллинг на сайте

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

онлайн-тест на профориентацию

Ответьте на 10 вопросов и узнайте, какая дизайн-специальность вам подходит

онлайн-тест на профориентацию

Ответьте на 10 вопросов и узнайте, какая дизайн-специальность вам подходит

Виды скроллинга и их назначение

Классический вариант скроллинга — вертикальный: пользователь свайпает по дисплею смартфона пальцем сверху вниз или крутит колесико мыши, в результате чего страница прокручивается, подобно титрам в заставке фильма. Этот стандартный способ используется на большинстве сайтов и знаком всем пользователям, а еще его можно встретить на скроллерах — рекламных щитах, в которых плакаты опускаются и поднимаются через определенный временной промежуток. Существует еще 4 варианта прокрутки, которые могут стать оригинальным и запоминающимся решением для любого интернет-ресурса.

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

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

Длинный. Такой скроллинг можно встретить на лендингах — сайтах-одностраничниках, где на нескольких экранах умещается вся необходимая пользователю информация (о товарах, способах заказа и доставки, оплате и т.д.). Человеку не приходится ходить по разным разделам — все сосредоточено в одном месте, и достаточно просто свайпнуть экран или прокрутить колесико мышки, чтобы получить нужные сведения. Длинный скроллинг удобен для брендов, которые продают люксовые товары (дорогие часы, элитный парфюм, эксклюзивную одежду и обувь) или достаточно дорогие комплексные услуги. Посетитель сайта может постепенно познакомиться сначала с миссией компании, а затем с ее ассортиментом.

Но у длинного скроллинга есть существенные минусы.

• Во-первых, страницы загружаются очень долго, и пользователям с медленным мобильным интернетом придется ждать, пока прогрузятся все изображения и разделы.
• Во-вторых, на таких сайтах сложно ориентироваться, поэтому заранее необходимо продумать способ навигации и добавить кнопку «Наверх», которая будет возвращать пользователя к самому началу страницы при помощи одного нажатия, а не прокрутки всего лендинга в обратном направлении.

профессия | 6 месяцев

У вас будет все, чтобы создавать сайты, на которых хочется задержаться: знания, навыки и реальный опыт. Решайтесь

Бесконечный. Новостные ленты в социальных сетях когда-то были конечны: они оканчивались сообщением «Все новости за сегодня просмотрены». Но сегодня вниманием пользователя хотят владеть как можно дольше, поэтому новостная лента стала бесконечной. Человек может в течение неограниченного времени пролистывать посты в своей соцсети, и они никогда не закончатся. Сначала пользователь увидит актуальные новости из своих подписок и несколько записей с рекомендуемых каналов, потом алгоритмы покажут ему более старые записи, которые он уже видел, а следом добавят контент, который ему незнаком, но может заинтересовать.

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

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

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

Бесконечный скроллинг — так ли он хорош?

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

Когда использовать? Для представления галерей, новостных лент, постов в социальных сетях и иного развлекательного контента.

Когда не использовать? В случае, если посетителю сайта нужно ориентироваться в содержимом ресурса — например, находить определенные товары, документы или важные информационные статьи. Здесь стоит продумать структуру сайта и сделать понятную навигацию.

Как работает? При загрузке страницы контент должен располагаться так, чтобы его хватило на 1 текущий и 1 дополнительный экран. При каждом свайпе новый контент подгружается вслед за предыдущим. Важно: новую порцию контента (посты, фотографии и т.д.) нужно подгружать заранее, чтобы при быстрой прокрутке пользователь не ждал долгой загрузки. Оптимально, чтобы за линией обреза помещалось столько же информации, сколько входит на один экран. Если контент не успевает прогрузиться, то следует настроить спиннер с временной шкалой, который даст понять, что информация скоро будет доступна.

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

В чем недостатки? У бесконечного скроллинга есть большое количество минусов.

• Утопленный футер. Некоторые посетители ищут на сайте именно этот элемент — там удобнее всего искать информацию о контактах, реквизиты и иные значимые страницы. Бесконечный скроллинг не дает возможности добраться до футера, и это может раздражать.
• Низкая производительность. Когда устройство бесконечно долго работает со страницами такого типа, в его оперативной памяти накапливается большой объем ненужной информации, который сказывается на скорости работы.
• Сложная навигация. Если пользователь случайно свайпнул интересный ему контент вверх, а потом решил добавить его в закладки, ему придется прокрутить страницу обратно. При этом браузер может посчитать движение курсора (если речь идет о мобильных устройствах) за жест обновления страницы, и интересующая человека статья или фотография просто исчезнет среди сотен аналогов.
• Некорректный скроллбар. Полоса прокрутки на страницах с бесконечным скроллингом часто имеет небольшой размер, и малейшее воздействие на нее приведет к тому, что страница будет прокручена слишком далеко.
• Ненужный контент. Этим часто грешат соцсети: пользователь видит слишком много информации, которая не нужна ему в данный момент, но ему приходится пролистывать ее до тех пор, пока он не увидит то, что хотел.

Правила юзабилити скроллинга

Как и все в интернете, прокрутка сайтов должна быть удобной. Рассказываем, как этого можно добиться.

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

Отказаться от «ложного дна». Не давайте пользователю надежду на то, что он увидит футер, если на вашем сайте настроен бесконечный скроллинг. Многие посетители ресурсов отмечают, что страницы, которые оказались бесконечными, при первом впечатлении выглядели вполне законченно и не предполагали какой-либо длительной прокрутки. Чтобы дать пользователям понять, что на сайте после большого объема информации можно будет найти дополнительный контент, попробуйте:

• избавиться от крупных изображений. Большие картинки, занимающие всю площадь страницы, часто вводят в заблуждение — раз фотография большая, значит, после нее точно ничего нет;
• отказаться от пустого пространства. Как и в предыдущем случае: пустота ассоциируется у пользователей с отсутствием полезной информации — если на сайте пусто, то это значит, что контент закончился;
• дозировать горизонтальную прокрутку. Не все пользователи морально готовы встретить этот элемент. Если все же необходимо его разместить, то дополните объект слайдером, чтобы намекнуть посетителям на возможность прокручивать страницу горизонтально;
• закрепить кнопку «вверх». Этот элемент должен быть четко зафиксирован на одном месте. Если он сменит свое положение, пользователи решат, что уже достигли окончания страницы;
• использовать всплывающие подсказки. Простая надпись «Читать далее» или всплывающая кнопка станут идеальным решением: и логично, и нет ничего лишнего;
• располагать изображения на линии сгиба. Если разместить изображение на линии стыка двух экранов, то посетитель сайта поймет, что его нужно проскроллить вниз, и увидит контент, который расположен далее.

Как создать скроллинг на сайте

Можно использовать простой CSS-код. Для настройки плавного скроллинга подходит свойство scroll-behavior с основным значением smooth. Еще у него существуют значения auto и instant, однако оно не обеспечивает эффект плавности. Данное свойство совместимо с большинством браузеров. Чтобы включить плавную прокрутку, нужно при помощи HTML создать пару блоков со ссылками друг на друга, а затем добавить scroll-behavior: smooth и стили наших блоков с помощью кода CSS внутрь тега .

Научитесь придумывать крутые сайты, отличающиеся от однотипных конструкторов — от стильных иконок до продуманного UX/UI. И получите опыт, который поможет начать карьеру.

UI-элементы и жесты в мобильных приложениях

Хабр, привет! Вы часто задумывались, обнаружив баг в мобильном приложении и заводя его в баг-трекер, как правильно назвать ту или иную часть интерфейса или действие, которые привели к ошибке? Или читаешь описание задачи и задумываешься, как должен выглядеть какой-то экран и что должно появиться при тапе на кнопку. А может, вы описываете продуктовые задачи и не всегда чувствуете себя на одной волне с дизайнерами и разработчиками, которые иногда начинают говорить на эльфийском? Чтобы исключить недопонимание, неясности и вопросы, мы решили создать перечень наиболее распространенных элементов и жестов и показать их на примере Юлы.

А вы знали, как называется «та самая выезжающая снизу экрана шторка» или несколько (три и более) тапов подряд? Ответы на эти вопросы и названия многих других элементов читайте в нашей статье.

Splashscreen — изображение, «заставка», которую пользователь видит во время загрузки приложения.

Заглушка — название говорит само за себя: это элемент, сигнализирующий о какой-то проблеме(отсутствует интернет-соединение, сервер временно недоступен, ведутся технические работы, по вашему запросу ничего не найдено и т.п.). Обычно заглушка отображается там, где должен быть контент, но по каким-то причинам он не был получен.

Webview — компонент, который позволяет отобразить страницы веб-сайта в приложении. Например, webview «Как получить бонусы»:

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

Action menu — кнопка, которая представляет собой три точки, и при нажатии (тапе) на которую открывается меню с несколькими action’ами.

Tab — вкладка; обычно переключение между табами осуществляется нажатием (тапом) на нужный таб или смахивание (свайпом) вправо/влево.

Toast — всплывающее уведомление, не блокирующее работоспособность приложения и плавно исчезающее спустя несколько секунд. Может сообщать о какой-то ошибке, о совершении какого-то действия (например, публикация каких-то изменений). Обычно тоаст содержит текстовую информацию, но может содержать и картинку.

Progress Bar — индикатор степени выполнения какого-либо действия (например, показывает оставшееся время работы активности «продвижение товара»).

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

AppBar (Android) / NavBar (iOS) — панель инструментов в верхней части экрана, содержащая кнопки управления текущим экраном.

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

Toggle switches/Тумблер — переключатель между двумя состояниями вкл/выкл.

Bottomsheet — информационная панель, появляющаяся снизу экрана поверх текущего состояния при совершении какого-нибудь действия. Может содержать информацию, а также какие-либо действия.

Bubble — овальный элемент выбора какого-либо параметра, чаще всего используется в фильтрах.

Строка поиска — поле ввода для поискового запроса.

Placeholder — текстовая заглушка в поле ввода, подсказывающая, что можно туда ввести (на скринах — текст «Поиск объявлений»).

Page Controls — элемент управления, который отображает текущее положение экрана в плоском списке страниц (на скринах — точки над кнопкой, отображающие текущее положение через изменение цвета).

Counter — точка или число, обозначающее количество непросмотренных уведомлений (например, количество непрочитанных сообщений).

Overlay — перекрывающий слой, который позволяет затемнить или осветлить элемент, на который он был наложен.

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

Onboarding — обучающая функциональность в приложении, появляющаяся при первом запуске для ознакомления пользователя с продуктом.

Suggest List — выпадающий список, состоящий из подсказок; появляется при вводе букв, слов или символов в поле ввода. Или список ранее совершенных поисковых запросов. Отдельный пункт из этого списка — Suggest.

Checkbox — элемент интерфейса, позволяющий выбрать любое количество опций (ни одной, одну или несколько).

Status Bar — строка состояния, содержащая общую информацию об устройстве: время, дату, сеть, уровень заряда и т.п.

Slider — горизонтальная шкала с элементом управления, по которой скольжением пальца можно управлять состоянием или значением характеристики (в нашем случае — расстоянием от указанного адреса):

Жесты

Тап — касание, нажатие на сенсорный экран. Чтобы открыть любое приложение на смартфоне — мы тапаем на его иконку.

Double tap — два коротких касания, двойной тап.

Мультитап — три и более тапов подряд по одному элементу.

Лонгтап — нажатие с удержанием на несколько секунд. Позволяет открыть дополнительные опции там, где они есть.

Скролл — вертикальное пролистывание содержимого скольжением пальца по экрану сверху вниз или снизу вверх.

Свайп — смахивание вниз, вверх, вправо или влево. Похоже на скролл, только с «легким», коротким касанием.

Pull to refresh (p2r) — дословный перевод: «потяни для обновления».

Drag&Drop — изменение положения элементов интерфейса с помощью перетягивания: как говорит нам название — «тащи и бросай»!

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

Вот и весь наш список терминов, описывающих элементы интерфейса и жесты. А чем его дополнили бы вы?

• тестирование мобильных приложений
• тестирование по
• тестирование приложений
• ui testing

• Блог компании Юла
• Разработка мобильных приложений
• Тестирование мобильных приложений
• Дизайн мобильных приложений