Хабр Курсы для всех
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 90
Тормозит.
кстати, самое тяжеловесное там меню, а не индикатор. раньше его не было, но люди жаловались «и как теперь скроллить».
Ну вы хотите скроллбар вернуть, короче :-) так никакого прогресса в мире не будет!
Если у людей есть что-то очень нужное, то пока только Джобсу было дозволено объяснять им, что теперь это больше не нужно.
Для правши мышинное управление лучше располагать справа. Ну и глаза привыкли местоположение искать справа, иначе ощущается как неудобство и вызывает раздражение.
Не знаю, стоит ли говорить, но с включенным расширением chrome.google.com/webstore/detail/mega/bigefpfhnfcobdlfbedofhhaibnlghod вообще не работает интэнс. Так и не понял, с чем может быть связанно.
Скриншот
Я консерватор, мне не понравилось. Размытые края не наглядные, плюс в скроллбар можно тыкать, а ползунок хватать и двигать.
Круто! С удовольствием бы прочёл также и о матане, и о совместимости!
Поддержу. Мне тоже понравилось. На мой взгляд очень клевая идея. Дает мгновенное и интуитивное представление о позиции в скролле. Задействует периферическое зрение (не надо никуда взгляд переводить) — и это гигантское преимущество перед скроллбаром.
Но есть вам пара советов. Во первых, не пытайтесь противопоставить интенс скроллбару, и не предлагайте его как полную замену (мне кажется меню здесь избыточно, и оно к тому же тормозит, по вашим словам). Потому что вы и сами указали случаи, где простой индикации недостаточно и нужен честный скроллбар или его аналог. Во вторых, не ожидайте только положительных отзывов. Профессиональное сообщество очень жестокое. И гнобит все нововведения, введенные не ими. Поэтому просто не обращайте внимания и продолжайте развивать свою идею без оглядки. Юзеры должны стать вашими критиками, а не профессионалы — у них слишком уже замылен взгляд. А то, что вы предлагаете, довольно революционно. И должно пройти какое-то время, прежде чем эта идея проникнет вглубь мозга. Я уверен, что инерционную прокрутку тоже не все сразу приняли. Кто-то тоже еще долго ворчал, что он привык быстро скроллить экран, передвигая быстро пальцами, а теперь «потерялась точность» и «понятность». Это просто инерционность мышления.
Но есть вам пара советов. Во первых, не пытайтесь противопоставить интенс скроллбару, и не предлагайте его как полную замену (мне кажется меню здесь избыточно, и оно к тому же тормозит, по вашим словам). Потому что вы и сами указали случаи, где простой индикации недостаточно и нужен честный скроллбар или его аналог. Во вторых, не ожидайте только положительных отзывов. Профессиональное сообщество очень жестокое. И гнобит все нововведения, введенные не ими. Поэтому просто не обращайте внимания и продолжайте развивать свою идею без оглядки. Юзеры должны стать вашими критиками, а не профессионалы — у них слишком уже замылен взгляд. А то, что вы предлагаете, довольно революционно. И должно пройти какое-то время, прежде чем эта идея проникнет вглубь мозга. Я уверен, что инерционную прокрутку тоже не все сразу приняли. Кто-то тоже еще долго ворчал, что он привык быстро скроллить экран, передвигая быстро пальцами, а теперь «потерялась точность» и «понятность». Это просто инерционность мышления.
Спасибо! Я и не ожидал, что все прям воодушевятся и поддержат идею. Наоборот так даже интересней, и кроме того благодаря критике там уже много чего было улучшено.
Про тормоза — как я уже говорил, тормозит на самом деле меню, а не индикатор. Меню нужно было для того, чтобы продемонстрировать, как это должно совместно заменить скролбар (иначе жаловались «как теперь перемещаться без колёсика»).
На самом деле, я не собирался изначально убирать скроллбар, но возникало очень много сложностей, потому что он непредсказуемого размера, не очень ясно, как размещать индикатор совместно со скроллбаром, и вообще тогда непонятно зачем индикатор, если всё и так видно на скроллбаре. Зато код сильно упростился, когда скроллбара не стало.
В качестве замены скроллбару я предлагаю не сам индикатор, а индикатор совместно с навигацией. Но мне, похоже, ещё нужно поучиться, как эту мысль яснее сформулировать.
Про тормоза — как я уже говорил, тормозит на самом деле меню, а не индикатор. Меню нужно было для того, чтобы продемонстрировать, как это должно совместно заменить скролбар (иначе жаловались «как теперь перемещаться без колёсика»).
На самом деле, я не собирался изначально убирать скроллбар, но возникало очень много сложностей, потому что он непредсказуемого размера, не очень ясно, как размещать индикатор совместно со скроллбаром, и вообще тогда непонятно зачем индикатор, если всё и так видно на скроллбаре. Зато код сильно упростился, когда скроллбара не стало.
В качестве замены скроллбару я предлагаю не сам индикатор, а индикатор совместно с навигацией. Но мне, похоже, ещё нужно поучиться, как эту мысль яснее сформулировать.
Неплохо выглядит в примере со свитком, но это из области дизайна больше.
В области интерфейса соглашусь с цитатой madk.
В области интерфейса соглашусь с цитатой madk.
А вы не согласны с тем, что показывать точное местоположение — во многих случаях избыточная фича?
Кино не смотрел, но свое мнение выскажу. Да, не согласен!
Нет, не согласен. На небольших страницах(в полтора-два экрана) может это не самая полезная информация(но всё-таки полезная, заметьте), а на больших это прям нужная фича.
В некоторых случаях да, но скроллбар тем не менее решает задачу и к нему не надо заново привыкать.
Совершенно не согласен. Скроллбар мне (очень) нужен (кроме прочего), чтобы примерно оченить требуемое на чтение время. Ну и конечно, чтобы быстро пролистать и посмотреть, стоит ли читать вообще. Делать это колесиком мыши — это не только долго и неудобно но к концу рабочего дня еще и палец отвалится.
Забавно, для мобильных, где рулит кинетическая прокрутка вполне удобно, но не работает в Firefox, возможно, из-за расширений. Chromium работает.
Интенс это индикатор с очень узкой областью применения, там где надо показать, что прокручивать можно и прокручивать можно бесконечно, в таких случаях очевидно преимущество перед скроллбаром, интенс поведёт себя адекватно при добавлении нового контента, он не будет как скроллбар прыгать вверх. В остальных случаях лучше использовать скроллбар. Идея о навигации в дополнение интенса это масло масляное, поясню почему: если я вижу навигацию, то я уже знаю, что можно крутить, зачем мне дополнительный индикатор? К тому же интенс задевает дизайн делая плоские элементы объёмными, особенно больно будет с metro и material design.
Иногда нужно показать, что можно скроллить, но скроллбар убрать, тогда нужно что-то подобное, но как мне кажется, выглядеть это должно как-то иначе.
Иногда нужно показать, что можно скроллить, но скроллбар убрать, тогда нужно что-то подобное, но как мне кажется, выглядеть это должно как-то иначе.
Не согласен по двум пунктам:
1) Есть пользователи OSX, привыкшие к отсутсвию скроллибаров по умолчанию и нет в этом ничего страшного. Просто берешь и скроллишь.
2) Плоский дизайн под эту штуку нужно просто придумать.
1) Есть пользователи OSX, привыкшие к отсутсвию скроллибаров по умолчанию и нет в этом ничего страшного. Просто берешь и скроллишь.
2) Плоский дизайн под эту штуку нужно просто придумать.
Да? У меня MacOS и iOS. Просто берешь, скроллишь, и в это время справа появляется скроллбар.
Именно, а я о чем? Вам же не нужно объяснять, что нужно скролить, без ползунка? Он лишь отображает сколько осталось скроллить, и появляется только после того, как вы начали это делать. А если используется бесконечный скролл, идея проекта не так уж и плоха.
в случае бесконечного скролла она как раз бессмысленна ) подкрасить нижнюю (и верхнюю) часть экрана, чтобы просто указать, что можно скроллить? я вас умоляю. всегда видно, что сверху контент обрезан и есть что-то еще. и снизу то же самое. зачем эти тенюшки, которые добавляют еще один визуальный элемент на экране, крадут чуть-чуть места, там где его и так мало, и тем самым только ухудшают навигацию?
идея, чтобы «весом» тенюшки показать, сколько еще осталось скроллить тоже плохая. во-первых, тяжело с одного взгляда понять, надо вглядываться, какой же там вес у тенюшки. при разном освещении будет восприниматься совершенно по-разному. «кирпичик» справа, который гуляет во всю высоту экрана в этом смысле куда нагляднее.
во-вторых, истинно бесконечных прокруток не бывает. по крайней мере, у контента всегда есть начало (в случае лент, как в fb или vk), и всегда имеет смысл показывать, как далеко мы от начала. бесконечные прокрутки есть только у карт, но там подобный скролл абсолютно бесполезен )
так что думаю, в очень узком наборе задач для художественного оформления такой скролл имеет смысл, а вот как промышленное решение – нет.
идея, чтобы «весом» тенюшки показать, сколько еще осталось скроллить тоже плохая. во-первых, тяжело с одного взгляда понять, надо вглядываться, какой же там вес у тенюшки. при разном освещении будет восприниматься совершенно по-разному. «кирпичик» справа, который гуляет во всю высоту экрана в этом смысле куда нагляднее.
во-вторых, истинно бесконечных прокруток не бывает. по крайней мере, у контента всегда есть начало (в случае лент, как в fb или vk), и всегда имеет смысл показывать, как далеко мы от начала. бесконечные прокрутки есть только у карт, но там подобный скролл абсолютно бесполезен )
так что думаю, в очень узком наборе задач для художественного оформления такой скролл имеет смысл, а вот как промышленное решение – нет.
Классная идея для планшетов/смартфонов и отвратительная для настольных ПК. Почему? Разный юзер экспиринс и выполняемые задачи.
В комбинации intense + viewport.js для сайтов с автоподгрузкой данных ваше решение выглядит идеально. В иных случаях — увы нет. Тот же скроллбар мною иногда юзается как замена клавишам Home/End, когда до клавиатуры долго тянуться. Но я практически не ориентируюсь на скроллбар в браузере — и эту тему можно развивать.
Я рекомендую довести до ума идею с intense + viewport.js (демо пейджа выглядит некрасиво, к примеру), продумать как делать перемещение в начало и конец с помощью мыши.
Я рекомендую довести до ума идею с intense + viewport.js (демо пейджа выглядит некрасиво, к примеру), продумать как делать перемещение в начало и конец с помощью мыши.
Как уже написал, интенс задуман только как индикатор, потому что какая именно нужна будет навигация — зависит от приложения. Например, в вашем примере (переместиться наверх с помощью клавиши Home или скроллбара) — уместно ещё подумать на тему того, зачем вам перемещаться наверх. Там должен быть какой-то юзкейс. (например: может быть меню наверху? Может быть, в этом случае сделать чтоб меню всегда в поле зрения было?)
Меню в поле зрения — это либо сбоку как у хабра/вк (и честно говоря, не всегда это самое лучшее решение), либо прибито к верху экрана (а не к верху страницы). В любом случае будет либо не удобно, либо будет мешать своим существованием (занимая место), либо и то, и другое. Хотя по сути вы правы, прыжок вверх/вниз зачастую нужен, потому что важные контролы находятся фиг знает где.
Я такие штуки видел еще несколько лет назад. В чем новизна?
Вот именно 4 пункта, как способа быстрого перемещения по странице совсем не хватает. Более того, навигационное меню расположено слева, так что я не сразу его заприметил, а когда заприметил, стало совсем непонятно. Оно же, вроде как, для наглядности сделано. Вроде бы как.
Почти всё что вы написали на мой взгляд зависит от задачи. Где-то нужно перемещаться в любое место, где-то в определённый раздел. Поэтому все эти пункты относятся скорее к навигационному виджету, который я предлагал использовать в дополнение.
Обрыв текста и так часто затеняют при необходимости, так что ничего нового тут нет. Сложная текстура — лишний элемент. А вот принцип viewport.js интересен и нагляден.
Мне нра. Но эффекта стены Дурова не избежать.
Великолепная штука, непременно поюзаю. В мобильных приложениях будет как родное.
Первая, за достаточно долгое время, толковая статья по UX на Хабре, приятно читать, спасибо.
Неясно как переместиться быстро в нужное место (как например я делаю потянув за скроллбар).
Мечтаю о скроллбаре, на который пальцем ткнул, вызвал контекстное меню, а там «в начало/в середину/в конец» и ползунок с процентами ещё.
Заглянул в код и ужаснулся, три тысячи строк для такого простого индикатора это перебор. Вы написали свой скроллменеджер.
Всё ведь можно сделать гораздо проще:
1. скрыть нативный скролл
2. при изменении позиции скролла, перерисовать индикатор
Набросал пример в 30 строк кода: jsfiddle.net/wzttveva/3
К плюсам такого решения могу добавить:
Всё ведь можно сделать гораздо проще:
1. скрыть нативный скролл
2. при изменении позиции скролла, перерисовать индикатор
Набросал пример в 30 строк кода: jsfiddle.net/wzttveva/3
К плюсам такого решения могу добавить:
- можно выделить текст
- работает скролл по средней кнопке мыши, как и любой другой нативный способ скролла
скрыть нативный скролл
Вы не представляете, сколько телодвижений нужно предпринять для того, чтобы сделать только этот пункт. Там почти все вещи довольно простые, и почти все не имеют стандартной поддержки в броузерах. (спрятать скроллбар, наложить градиентную маску, итп). Вообще это на отдельную статью покатит.
вот в этом комменте примерно объяснено как прячется скроллбар и создаётся индикатор:
github.com/asvd/intence/blob/master/intence.js#L1800
github.com/asvd/intence/blob/master/intence.js#L1800
Рецепт, как скрыть скроллбар:
1. посчитать ширину скроллбара (это
2. обернуть контейнер, дать обёртке свойство
3. сделать контейнеру отрицательный отступ вправо, на ширину скроллбара
Не так уж и сложно. Я так сто раз делал!
Даже писал свой плагин для кастомизации скроллбара standy.github.io/custom-scroll
Более того, для большинства браузеров это можно сделать обычным css (кроме ФФ и некоторых версий ИЕ)
blogs.msdn.com/b/kurlak/archive/2013/11/03/hiding-vertical-scrollbars-with-pure-css-in-chrome-ie-6-firefox-opera-and-safari.aspx
1. посчитать ширину скроллбара (это
div.offsetWidth - div.clientWidth)2. обернуть контейнер, дать обёртке свойство
overflow: hidden3. сделать контейнеру отрицательный отступ вправо, на ширину скроллбара
Не так уж и сложно. Я так сто раз делал!
Даже писал свой плагин для кастомизации скроллбара standy.github.io/custom-scroll
Более того, для большинства браузеров это можно сделать обычным css (кроме ФФ и некоторых версий ИЕ)
blogs.msdn.com/b/kurlak/archive/2013/11/03/hiding-vertical-scrollbars-with-pure-css-in-chrome-ie-6-firefox-opera-and-safari.aspx
Я сейчас не могу вспомнить точно, но почему-то такой способ не всегда работал (то ли для горизонтального скроллбара, то ли для каких-то броузеров). У меня решение основано частично на идеях как раз из статьи по вашей ссылке. Внутренний элемент раздвигает внешний (со скроллбаром). Но у внутреннего элемента ширина задаётся в пикселях, поэтому ещё нужно уметь отлавливать ресайз элемента, что отдельный гемор.
А ваш плагин под файрфоксом на маке тоже дублируется с обычным? Как тут вот github.com/gromo/jquery.scrollbar/issues/12
30 строк кода это перебор. Можно вообще без JS подобные вещи решать. %) Об этом еще 3 года назад писал Роман Комаров (http://kizu.ru/fun/shadowscroll/) и в улучшенном варианте неподрожаемая Lea Verou (http://lea.verou.me/2012/04/background-attachment-local/). CSS решает. ;) Да и скроллбар можно на чистом CSS скрыть без оберток (как минимум в Webkit / Blink).
В chrome на планшете GT 3 8.0 на странице куча артифактов вместо ожидаемых эффектов. Предполагаю что делаются эффекты в WebGl поэтому на планшете и корячит. Их можно заменить обычной PNG картинкой с градиентом и прозрачностью которая будет выдвигаться и задвигаться за край страницы.
У полосы прокрутки есть плюс — можно взять прямоугольник мышой и подвинуть всю страницу куда надо. Или по его положению запоминать примерное нахождение информации. А у вас пока проскроллишь…
Проблема не в полосе прокрутке как таковой. Проблема в том, что в Windows ужасно громоздкая полоса прокрутки, застрявшая в восьмидесятых.
Полоса прокрутки в OS X
Как мне прокрутить страницу мышью. Скролбар я могу схватить мышью и тягать его вверх-вниз плавно переходя между разными частями страницы. Как сделать аналогичное действие вашим контролом?
это предполагается делать с помощью какого-то другого виджета для навигации
Почему бы не сделать это на карте? Сейчас там происходит нечто непонятное — выделяются какие-то блоки, возможно просто стандартная подсветка браузера. Что оно символизирует — я так и не понял.
затаите дыхание
затаите дыхание
затаите дыхание
ваш браузер не пригоден для будущего
:D
Ну и ладно, текст читабелен, и хорошо.
Видимо весна пришла…
То статьи про масштабирование в зависимости от расстояния глаз до планшета, то про новый скроллбар.
Идея эта не нова — я давно уже видел такой контрол на сайте почившей ныне библиотеки, где справа и слева отображались страницы у книжки примерно таким образом (там была дивка, пропрциональная кол-ву страниц прочитанных и оставшихся, залитая фоном с вертикальными полосками). Было круто но неудобно. Место этому дело, имхо, — на каком-нибудь сайте-визитке или PR- сайте и усе ;)
Если контент бесконечный — скроллбар не нужен вообще — т.к. вернуться НОРМАЛЬНО в какое-либо место, где Вы были, практически невозможно.
Если контент конечен, то пытаться понять по градиенту сколько чего и где осталось, а главное — быстро переместиться — это нереально.
Если есть гайд по контенту (типа миникарта) — скролл вообще нафиг не нужен — достаточно показывать где ты сейчас на миникарте.
Хороший контрол должен быть простым и понятным — тут уже в куче сообщений фигурировало, почему стандартный скроллбар крут, повторяться не буду.
И да, я тот человек, которому не нравится скролл на маке, ибо быстро попадать по нему — ад!
То статьи про масштабирование в зависимости от расстояния глаз до планшета, то про новый скроллбар.
Идея эта не нова — я давно уже видел такой контрол на сайте почившей ныне библиотеки, где справа и слева отображались страницы у книжки примерно таким образом (там была дивка, пропрциональная кол-ву страниц прочитанных и оставшихся, залитая фоном с вертикальными полосками). Было круто но неудобно. Место этому дело, имхо, — на каком-нибудь сайте-визитке или PR- сайте и усе ;)
Если контент бесконечный — скроллбар не нужен вообще — т.к. вернуться НОРМАЛЬНО в какое-либо место, где Вы были, практически невозможно.
Если контент конечен, то пытаться понять по градиенту сколько чего и где осталось, а главное — быстро переместиться — это нереально.
Если есть гайд по контенту (типа миникарта) — скролл вообще нафиг не нужен — достаточно показывать где ты сейчас на миникарте.
Хороший контрол должен быть простым и понятным — тут уже в куче сообщений фигурировало, почему стандартный скроллбар крут, повторяться не буду.
И да, я тот человек, которому не нравится скролл на маке, ибо быстро попадать по нему — ад!
У полосы прокрутки есть еще такой плюс (возможно, не на всех системах). Читаешь текст где-то в середине, нужно на несколько секунд вернуться наверх, посмотреть картинку/схему/текст, и вернуться назад на то место где читал. Тянешь скроллбар вверх, не отпуская смотришь что нужно, уводишь мышь далеко в сторону, он сам возвращается обратно.
А так идея прикольная.
А так идея прикольная.
Идея интересная, но
- слишком отличается от привычного скроллбара, не используя принцип постепенных изменений
- похожа на декоративный элемент, которые часто встречаются в программах-читалках
Уже несколько лет использую «похожее» расширение на десктопе, которое полностью прячет скроллбары. По мне так индикация положения или относительного размера страницы не нужна в 99%. А для навигации хватает колесика и клавиатуры (Home, End).
Таки ожидал увидеть опрос в статье со столь провокационным заголовком.
Не понимаю, в чём новизна? В Android подсвечивание краёв давно применяется, когда упираемся в конце списков. На десктопе затенение какой-нибудь информации, которая не влезает в экран, тоже давно используется. Но вот такая замена скролла на десктопе не нужна, не все знают про клавишы End/Home и не смогут прожить без знакомого элемента.
«Бесполезные проекты обычно никому не интересны».
Каждая книжка находит своего читателя.
Каждая книжка находит своего читателя.
Меня очень сильно раздражает одно android-приложение у которого нет скроллбара. Я хочу видеть сколько контента ещё осталось.
Мне кажется, что от скроллбара можно избавиться там, где сам контент помогает сориентироваться. Это могут быть какие-то упорядоченные списки (алфавит, календарь...).
Мне кажется, что от скроллбара можно избавиться там, где сам контент помогает сориентироваться. Это могут быть какие-то упорядоченные списки (алфавит, календарь...).
Если объеденить ваш скроллбар с меню навигации, и сделать затенение только сверху и снизу этого меню(а не всей страницы), а так же сделать маркер квадратный, который можно хватать и двигать, это будет новый интерактивный скроллбар :)
Странно, что некто не упомянул об overlay scrollbar ( help.ubuntu.com/15.04/ubuntu-help/unity-scrollbars-intro.html ).
Вроде как отличное решение.
1. Индикатор положения есть
2. Скроллбар тонкий
3. Скролл появляется при наведении
4. Помимо своей основной функции имеет кнопки для листания
Вроде как отличное решение.
1. Индикатор положения есть
2. Скроллбар тонкий
3. Скролл появляется при наведении
4. Помимо своей основной функции имеет кнопки для листания
кстати адово неудобная вещь, из-за неё я испытываю страдание, когда нужно приложение на GTK использовать
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Интенс, индикатор прокрутки (или жизнь после скроллбара)