Это очень важно, но из-за этого пользователи не чувствуют этого в обычных обстоятельствах.В мире продуктов есть поговорка, что лучший пользовательский опыт — это позволить пользователям ничего не чувствовать и получить это на кончиках своих пальцев.
Что касается приложений на ваших мобильных телефонах, большинство пользовательских интерфейсов превосходны.Команда разработчиков продукта поддерживает и исследует каждый день и постоянно отслеживает тенденции потребностей пользователей.
Итак, есть ли контрпримеры:
某网购app你好：我买了一款榨汁机，并不代表我需要更多的榨汁机。
Я полагаю, что у вас также есть этот опыт.Хотя я долгое время ходил по магазинам, чтобы купить соковыжималку, после того, как я ее купил, я все равно буду в подавляющем большинстве предлагать мне «умные» продукты, которые толкают соковыжималку.Я читал эти продукты толчка.После этого , меня это всегда смущает.
后悔买内台了，我应该买这台
Такое ощущение, что искусственный интеллект отдаляется от нас все дальше и дальше.
2. Простой и понятный интерфейс
С момента разработки внешнего интерфейса большинство клиентов приблизились к плоскому интерфейсу, и логотипы многих компаний также были разработаны плоскими, потому что они лаконичны и ясны.
С развитием экранов дисплея все больше и больше контента может отображаться в видимой области, и пользователям требуется все больше и больше времени, чтобы найти то, что им нужно, поэтому дизайн лаконичного и понятного интерфейса стал общей тенденцией.
Если вы открываете веб-сайт, смотрите на него несколько минут и чувствуете себя ослепительно, то он может быть недостаточно кратким.
3. Удобный и быстрый процесс работы
Это также является частью каждого продукта, который необходимо учитывать.Если вы можете использовать два шага для выполнения шагов, вы не должны позволять пользователям выполнять три шага, чтобы пользователи могли нажимать меньше, если вы не разрабатываете тральщик.
Основная идея заключается в упрощении операций пользователя.
2. Расчетный угол
表面上的性能问题，本质上是用户反馈的体验差
1. Ожидание загрузки данных
эффект загрузки
На мой взгляд, загрузка эффекта загрузки необходима для каждого интерфейса данных запроса, абсолютно невозможно пользователю несколько секунд молча смотреть в пустое место, по крайней мере, смотреть на хризантему и тд. Не говоря уже о пользователях, ваш продакт-менеджер тоже этого не выносит.
Предварительная загрузка
В разработке может возникнуть такая ситуация. Некоторые ресурсы не нужно использовать сразу, но вы хотите получить их как можно скорее, и вы можете использовать предзагрузку в это время. Предварительная загрузка на самом деле является декларативной выборкой, которая заставляет браузер запрашивать ресурсы и не блокирует событие onload. Вы можете использовать следующий код, чтобы включить предварительную загрузку.
<link rel="preload" href="http://example.com" />
Предварительная загрузка может в определенной степени сократить время загрузки первого экрана, потому что она может задержать загрузку некоторых важных файлов, которые не влияют на первый экран, но единственным недостатком является то, что совместимость плохая.
2. Ожидание загрузки домашней страницы
Домашняя страница отдельное обслуживание
Я когда-то делал систему размещения заказов в магазине снаряжения.Главная страница очень крутая, но система управления за ней очень большая, так что затянет время загрузки главной страницы. В настоящее время мы предложили решение о том, что домашняя страница поддерживается отдельно. Домашняя страница написана только на собственном HTML, и принята структура двухстраничного приложения, так что пользователи могут войти на домашнюю страницу за считанные секунды, когда они посетите домашнюю страницу и сотрудничайте с записью маршрутизации системы, чтобы выполнить аутентификацию перехвата.
Анимация загрузки главной страницы
Эта сцена также очень распространена.В это время вам нужно найти систему, которая, даже если система загружается медленно, позволяет пользователю смотреть анимацию загрузки в течение 3 минут, не чувствуя беспокойства. Например:
Скелетонный экран
Обычный метод Jingdong, в ответ на ситуацию, когда скорость сети слишком низкая, сначала сделал «фальшивый» интерфейс.Вероятно, так, чтобы уменьшить беспокойство пользователя
3. Переход с переключением страниц
Добавление эффекта заставки при переключении между бизнесом и бизнесом даст пользователям очень шелковистое ощущение.Необходимо отладить ощущение поедания шоколада с angelababy в дождливый день.
В проекте, поскольку времени относительно много, и это также веб-сайт для демонстрации продуктов, я сделал полный набор эффектов перехода при переключении страниц, инкапсулировал слой при переключении маршрута проекта, позволил текущему компоненту исчезнуть перед переходом и пусть после прыжка появляется следующий компонент. Конечный результат отличный и бесшовный.
4. Подходящие анимационные эффекты
Каждый элемент будет более или менее добавлен с анимационными эффектами по мере перехода операции.Очень классический случай, проблема параболы корзины покупок, подумайте, что когда корзина покупок Taobao и Tmall щелкает значок корзины покупок в правом нижнем углу товар, будет круг Мяч падает на вкладку корзины в правом нижнем углу страницы по красивой параболе. Значительно улучшенный пользовательский интерфейс.
3. AUI Перспектива
我们得知道我们能压榨UI多少资源
1. Большие картинки
减少像素点减少每个像素点能够显示的颜色
png8
Здесь я прямо рекомендую формат качества png8, и пусть пользовательский интерфейс напрямую сжимает изображение до png8 пикселей 64, а затем обращаю внимание на тот факт, что изображения, которые мы используем во время разработки, должны быть размером 200%, потому что они должны быть адаптирован к экрану высокой четкости, но пользовательский интерфейс Цель состоит в том, что чем больше, тем выше, тем лучше, тем лучше.Если размер изображения, предоставленного вам пользовательским интерфейсом, больше 200%, вам нужно задать вопрос размер картины.
Конечно, когда нет времени на пользовательский интерфейс, мы рекомендуем fireworks, который очень прост в управлении, а photoShop создан для фронтенда. Всего за несколько шагов пользовательский интерфейс влюбит вас в себя.
webp
Немудрено, когда я впервые вышел из вебпа, размер моего удара уменьшился на 60%, эффект картинки не изменился, и это было чисто алгоритмическое сжатие. Из-за недостаточной совместимости он не стал популярен.Я недавно еще раз проверил.В Интернете есть много кроссбраузерных совместимых решений, таких как webp.js. Проблема совместимости хорошо решена и может быть введена в эксплуатацию.
2. Маленькие и средние картинки
sprite
Север сказал карту эльфов, юг Карта спрайтов, запросив большую фотографию один раз, позиционируя положение маленького изображения с помощью background-position, сохраняя пропускную способность, в течение длительного времени.
iconfont
Не так много объяснений, спасибо iconfont
base64
Это очень спорно.Спор о том, насколько большой должна быть картинка для использования base64.После споров и споров никто его не использует. . . , в webpack можно настроить изображение ниже размера для кодирования в base64 и ввести его в js. Ограничение, настроенное в модуле, - это контроль размера { test: /\.(png|jpg)$/, loader: "url?limit=0" }
svg
Совет: когда вы используете gif, пользовательский интерфейс можно преобразовать в формат svg. Я говорю о линейном.
3, пользовательский интерфейс не позволяет перемещать изображения
Эта ситуация также очень распространена, например, визуализация продуктов, таких как недавно выпущенный мобильный телефон с рисовым вином, плакаты на официальном сайте.
Такая картинка, вы сжимаете ее, чтобы уменьшить пиксель, уменьшаете цвет, отображаемый каждым пикселем, пользовательский интерфейс вас не порежет, фанаты TF тоже вас порежут, верно?
На этот раз решительно: «Босс, дай денег, и я куплю CDN».
Сеть распространения контента CDN, это популярный пример, который я слышал.
以前买火车票大家都只能去火车站买，后来我们买火车票就可以在楼下的火车票代售点买了。
Каждый понимает это для себя.
Обратите внимание, используйте для зарегистрированного CDN аккаунт босса, а не свой, иначе уйти не просто (я)
4. Рендеринг изображения
ленивая загрузка
Это клише — загружать изображения только из видимого окна.
Предварительная загрузка
Первокурсник не говорил о загрузке картинки следующего видимого окна заранее, не всего, а следующего видимого окна. Кто занимался водопадами, должен знать. Если вы этого не сделали, вы можете исследовать это самостоятельно.
В-четвертых, угол развития
1. Выберите архитектуру, которая соответствует стоимости вашего проекта
Почему вы так говорите?Вообще структура проекта ПК станции тяжеловата для мобильной станции.Чем больше вспоминаешь тем больше обращаешь на это внимание,особенно в эпоху jquery. Чтобы решить эту проблему, многие фреймворки будут иметь мобильную версию и облегченную версию. Большинство современных UI-фреймворков не имеют этой проблемы, например antd, при упаковке в файл будут упакованы только компоненты, на которые вы ссылаетесь, а компоненты, на которые нет ссылок, не будут упакованы в файл. бутстрап как раз наоборот.
Я думаю, что это также причина того, что адаптивные проекты становятся все более популярными, и они не устояли перед эпохой 2G 3G.Я считаю, что если 5G популяризируется, мобильному проекту не нужно будет учитывать размер кадра.
Однако с точки зрения стоимости существует также относительно базовая концепция: в соответствии с циклом разработки мы используем некоторые сильно инкапсулированные компоненты с открытым исходным кодом для эффективного выполнения проектов с коротким циклом разработки в теории. Недостатком является то, что неудобно обновлять и выполнять итерации после ссылки на сильно инкапсулированные компоненты с открытым исходным кодом. И наоборот, более длительный цикл разработки — это то, что мы ищем.
2. Уменьшить сложность алгоритма
Большинство людей вокруг меня понимают алгоритм:
没有我两遍循环处理不了的数组！
В конце концов, когда мы обработали 1 Вт фрагментов данных, некоторые базовые компоненты отрендерились более 100 раз, что привело к периодическим сбоям браузера.
В данном случае, с точки зрения компонентов, перехват рендера сделан не очень хорошо. Подобно реакции shouldComponentUpdate.
Затем возникает проблема алгоритмической сложности. и не оптимизирован.
Так же, как и самый простой алгоритм поиска, каждый также должен понимать, какой из них лучше, исчерпывающий метод или метод дихотомии.
算法复杂度是指算法在编写成可执行程序后，运行时所需要的资源，资源包括时间资源和内存资源。
Об этом стоит упомянуть в одной статье, а пока я прямо сейчас приведу спецификацию найма многих крупных компаний, банк вопросов по алгоритму leetcode, а интерфейс Tencent требует легкой сложности leetcode. Каждый может пойти почистить вопросы, это очень полезно.
3, загрузка по требованию
注意一下：这个并不是每个项目都适合
Итак, какие проекты подходят для загрузки по требованию?
Для проектов отображения, таких как официальный сайт Xiaomi, каждый раз, когда выпускается мобильный телефон, мне нужно добавить меню и независимый бизнес отображения.
Итак, какие предметы не подходят для загрузки по требованию?
Система управления, система едина, промежуточные параметры слишком сложны для последовательного соединения, нет проблем с локальной разработкой, а после упаковки по требованию и броска в тестовую среду всякие неопределенные.
4. Предварительная загрузка данных
В разработке может возникнуть такая ситуация. Некоторые ресурсы не нужно использовать сразу, но вы хотите получить их как можно скорее, и вы можете использовать предзагрузку в это время.
Предварительная загрузка на самом деле является декларативной выборкой, которая заставляет браузер запрашивать ресурсы и не блокирует событие onload. Вы можете использовать следующий код, чтобы включить предварительную загрузку.
<link rel="preload" href="http://example.com" />
Предварительная загрузка может в определенной степени сократить время загрузки первого экрана, потому что она может задержать загрузку некоторых важных файлов, которые не влияют на первый экран, но единственным недостатком является то, что совместимость плохая.
Есть и другой вид, например, у меня две вкладки. Обычно данные получаются, когда пользователь нажимает вторую вкладку. На самом деле, когда пользователь наводит курсор мыши, данные могут быть получены.После завершения операции щелчка данные были запрошены обратно. Этот метод тоже очень хорош, но обратите внимание на троттлинг, двигайте мышкой туда-сюда, инициируйте 10 000 запросов, а фон будет думать, кто атакует сервер.
5. Кэш
Файлы ресурсов кешируются, неудивительно, это оружие, если его правильно использовать.
Мой проект унифицирован, файлы, которые не менялись тысячи лет, все закешированы, и они вручную добавляются в паблик и хэшируются автоматически под другими srcs.
Webpack можно настроить так, чтобы он контролировал, какие файлы хешируются, а какие нет, и какие файлы нужно изменять, а какие нет. Каждый может узнать.
END
В этом году еще не устраивал командировку, но есть предчувствие, что скоро будет.Кто-то спросил, а почему бы вам не написать статью о командировке?
Есть время выйти и поиграть, ха-ха.
После волны осадков к концу марта напишу 4 статьи, а именно
«Внешняя биржа оптимизации производительности»
«Коммуникация по оптимизации качества внешнего кода»
«Мониторинг внешнего кода и связь»
«Обмен вопросами внешней безопасности»
Осадить некоторые знания о процессе разработки в прошлом году.
Спасибо.