Визуальный режим разработки на большом экране, который вы должны освоить

Когда числа невидимы, интуиция редка, а когда форм бесчисленное множество, трудно проникнуть в тонкости. —— Хуа Луогенг

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

Знание фреймворка визуальной разработки

цель визуализации

Источники данных

1. Долгосрочные накопленные данные системы заказчика;
2. Оборудование клиентской системы формирует данные в режиме реального времени;
3. импортировать данные из внешнего мира;
4. Соответствующие данные для презентации проекта

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

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

Мы можем понять, что визуализация — это прикладной верхний уровень обработки данных. Что касается обработки данных, нижний уровень на самом деле очень сложен.От __сбора данных__ до __хранения данных__ до __обработки данных__ становятся активами данных, а затем используют активы данных для расширения приложений верхнего уровня, визуализация является одним из них.

Цель

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

Ценность для разных пользователей

1. Пользователь: больше возможностей, лучшее взаимодействие
2. Инспекционное лидерство: практичнее, надежнее
3. Посетители: красивее и интереснее

философия дизайна

шрифт

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

разрешение	html font-size
1366*768	12px
1920*1080(1080p)	16px
2560*1440(2k)	22px
3840*2160(4k)

подбор цвета

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

метод компоновки

1. Общий смысл: Насколько это возможно, компоненты находятся на одной высоте и в одном столбце, и компоненты не выглядят навязчивыми или независимыми. Соответствующие данные разумно организованы и визуально интегрированы;
2. Расстояние между компонентами и взаимосвязи: различать первичные и вторичные компоненты информации и пытаться расположить компоненты с похожей формой выражения, целью выражения и характером данных вместе, чтобы пользователи могли лучше получать информацию о данных;
3. первичный и вторичный: Обычно основная информация размещается в средней и большой области, а второстепенная информация может располагаться вокруг

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

Анимация и взаимодействие

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

выбор графика

Техническая реализация

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

1. CSS3
2. SVG
3. Canvas
4. WebGL

Мы также можем использовать полуфабрикаты для настройки, связанные с SVG:SVG.js,snap, Canvas 2D имеет:zrender,ocanvas,EaselJSЖдать.

связанные с ГИС

Основание

• карта
• Плитки Sange/Векторные плитки
• Проекции и системы координат
• GeoJSON

Компонент библиотеки карт

• OpenLayers
• Leaflet
• Sinomap
• mapbox
• ArcGIS For JavaScript
• QGIS

Карта открытой платформы

• Карта Гаоде
• Карта Байду
• Карта Тенсент
• дневная карта
• Google Map

Пространственная база данных

• PostGIS
• PostgreSQL
• Oracle Spatial

географическая визуализация

• supercluster
• turf
• geojs
• cesiumjs
• geohey

Библиотека инструментов

Библиотека диаграмм	Библиотека чертежей	Библиотека анимации
ECharts	three	anime
HightCharts	D3	mo
Chart	SVG	Popmotion
Chartist	Snap	Bounce
Серия AntV	Raphaël	Твин (твин-анимация)

Метод развертывания

Метод развертывания	Функции	Преимущество	недостаток
Частное развертывание	Проект полностью развернут на клиентском сервере	Данные более безопасны, а структура легко настраивается	Сложность расширения мощностей и высокая начальная стоимость строительства
Облачное развертывание	Проект полностью развернут в облаке	Гибкое использование и оплата по мере использования	данные под угрозой
Гибридное развертывание	Важный контент находится на клиентском сервере, частично в облаке	более гибкое использование	Увеличить сложность программы

Веб-среда

• Нет подключения к сети: все ресурсы и данные хранятся локально, а обновления данных зависят от ручного импорта;
• Доступ только к интрасети: большинство ресурсов и данных хранятся локально, а данные можно получить с других серверов в интрасети;
• Доступность через Интернет. Нечувствительные ресурсы можно хранить на CDN или облачных серверах, что снижает размер локальных проектов и затраты на обслуживание.

Параметры устройства

• Технология отображения экрана:LED, LCD, OLED, AMOLED(Существуют различия в эффектах отображения на большом экране различных технологий отображения, но влияние невелико)
• Разрешение экрана: см.Адаптация разрешения
• Соотношение сторон экрана: 4:3, 16:9 (обычное), 15:9, 16:10, 21:9 (обратите внимание на адаптацию экрана специальной формы, которую можно использовать)
• Производительность оборудования клиента: память, ЦП, ГП, графическая карта (сложные большие экраны предъявляют более высокие требования к конфигурации клиента, большой объем данных карты потребляет ЦП и память, webgl будет вызывать рендеринг ГП, как правило, не webgl, и есть много анимаций большой экран, легко съедаемый процессор, видеокарта тоже очень важна, но ее нелегко измерить)
• Браузер клиента: рекомендуется современный браузер, такой как более новая версия Chrome или FireFox.