Введение в статью Wulin.com (www.vevb.com): Есть меньше статей, которые используют интерфейсную технологию для управления пользовательским опытом. Я надеюсь, что эта статья принесет вам новые перспективы и мышление. Конечная цель - надеяться, что пользователи могут иметь лучший опыт.
Хуа: Недавно я сделал некоторые оптимизации на сайте Carousel. Хотя это кажется простым, мышление с точки зрения пользователя может дать вам интересный опыт.
Картинки Carousel необходимы для многих веб -сайтов. Они отображают больше контента в ограниченном пространстве и могут использовать ослепительные эффекты переключения для привлечения пользователей. Вот скриншоты некоторых известных веб-сайтов:
Не сложно использовать фронтальную технологию JavaScript для создания изображений каруселей. Во -первых, нам нужно реализовать 3 основные функции:
1. Картинка воспроизводится циклически в определенном интервале времени;
2. Цифровая навигационная петля с изображением;
3. Дисплей изображений цифровой навигации управления;
Вы чувствуете себя несчастным после опыта? Например, когда мышь перемещается в картинку и просто хочет ясно видеть детали, вы прыгаете на следующую картинку. Да, это очень вредно для чувств пользователя. Как это решить, принцип очень прост. Переместите мышь в картину и остановите карусель, и мышь из мыши, чтобы возобновить карусель.
Хотя многие веб -сайты уже реализовали эту функцию, существует проблема без исключения - когда мышь выходит из изображения, ей все равно нужно ждать несколько секунд, прежде чем перейти к следующей картине. Этот опыт разумный? С точки зрения пользователя, когда пользователь заканчивает просмотр, мышь выводит изображение, и разумная логика должна заключаться в том, чтобы немедленно перейти к следующей картине; С точки зрения продукта или эксплуатации, они также надеются, что пользователь сможет увидеть больше рекламных картин.
Размер изображения каруселей некоторых веб-сайтов часто относительно большой, особенно веб-сайты электронной коммерции. Чтобы привлечь внимание пользователей и создать счастливую атмосферу, они разумны. Тем не менее, изображение карусели становится больше, и пространство, занятое первым экраном, станет больше. Когда пользователь работает на странице, он может случайно скользить по картинке, а затем выдвинуть изображение. Этот процесс чрезвычайно короткий. Если соответствующий метод немедленно реагирует на соответствующий метод, приводит к возникновению страницы или не изменяется, это приведет к путанице или даже неудобствам для пользователя. Например, если пользователь случайно скользит в изображении карусели много раз в течение определенного периода времени, ответ изображения карусели приостанавливается и остается на фиксированном изображении, что заставит пользователь чувствовать, что карусель недействительна.
Следовательно, для этой ситуации необходим механизм устойчивости к неисправности, то есть отсроченный ответ. Если вы обнаружите, что пользователь только мгновенно перемещался, он не ответит, точно так же, как мышь никогда не проходит через картинку; Когда мышь остается на картинке в течение определенного периода времени, считается, что пользователю действительно нужно посмотреть на картинку, и соответствующий метод будет отвечать. Это время задержки, как правило, считается не менее 200 мс.
Подводя итог, есть две точки для реализации функции улучшенного опыта:
4. переместите изображение и сделайте паузу. После перемещения изображения немедленно перейдите к следующей картинке и продолжайте в карусели;
5. Мышь реагирует после задержки;
После того, как так сильно жаловались, давайте посмотрим на код. Студенты без последних, могут подумать, что реализация двух вышеупомянутых функций требует большого количества кода, но на самом деле это всего лишь несколько строк:
Хотя кода не так много, есть некоторые основные методы, такие как логическое управление в красной коробке, является ключом к функции задержки.
Написав это, пользовательский опыт кажется довольно хорошим, так что есть ли место для оптимизации? !
Скорость интернета в Китае занимает второе место в мире, и даже во многих местах скорость интернета составляет около 1 млн., Поэтому важно улучшить пользовательский опыт низкоскоростной скорости в Интернете. Загрузка картинок каруселей по требованию является одним из методов. Когда вы прыгаете на соответствующую картинку, вы можете скачать необходимые картинки. Это единственный способ ускорить отображение изображения и сохранить трафик. Но у всего есть две стороны, с преимуществами и недостатками, см. Картину:
Это должна быть картина, которую вы видите часто. Процесс загрузки изображения подвергается воздействию пользователей, что особенно очевидно при низких скоростях сети. Метод компенсации этого дефекта также очень прост - изображение предварительно загружено, а при загрузке дается приглашение на значок ожидания, и продолжайте смотреть на картинку:
Предварительная загрузка может позволить изображению полностью отображаться за один раз без разоблачения процесса загрузки, что дает пользователям разумные ожидания.
Два улучшенных опыта, которые были наконец реализованы, следующие:
6. картинки загружаются по мере необходимости;
7. Изображение предварительно загружено, и в процессе загрузки приведена подсказка значка ожидания.
Студенты могут нажать здесь, чтобы испытать усиленный эффект изображения каруселей.
Есть несколько статей, которые используют технологии фронтальной работы для управления пользовательским опытом. Я надеюсь, что эта статья принесет вам новые перспективы и мышление. Конечная цель - надеяться, что пользователи могут иметь лучший опыт.