- 综合排序
- 最热优先
- 最新优先
- 来自专栏无原型不设计
超大触摸屏设计的7大注意事项
由于台式电脑的规模和尺寸更大，此类触摸屏的设计可能会给设计师带来一些独特的挑战。 当你习惯了用拇指大小的区域来做屏幕设计时，你如何去设计超大触摸屏？ 这里笔者整理了一个关于超大触摸屏的设计指南，为设计师们设计用户交互提供灵感。 用户在公共场所中使用大屏设备，并不意味着他们希望其他人知道自己在做什么，特别是在输入一些重要信息时。而屏幕越大，其他人就越有可能看到用户输入的内容。 7.设置明显的交互按钮 5.jpg 此类设计需要向用户展示如何与屏幕交互，并不是每个用户都能马上理解如何在屏幕上进行操作。 建议使用诸如动画和按钮之类的视觉提示来帮助引导用户完成整个过程。 结论 你是否有过对超大触摸屏设计的经验？这种触摸屏的设计已经成为一种流行的趋势。就算目前你还没有做过此类的设计，相信不久你也会接触到。
2.4K70发布于 2018-02-11 超级好用开源大屏设计器!
DataRoom 是一款基于 SpringBoot + Vue 技术栈构建的开源大屏设计器，集成了 MyBatis-Plus、ElementUI、ECharts、G2Plot 等主流前端与后端生态。 二、工具优势一站式大屏解决方案，从数据源接入->数据清洗处理->大屏设计->大屏预览->大屏发布上线支持多种数据集接入，如：原始数据集、自助数据集(支持多表关联)、存储过程、JSON(静态数据)、JS脚本 4、组件复用与二次开发设计好的“疫情热力图模块”可保存为业务组件，在其他大屏中一键复用；开发者可通过离线模式扩展系统组件，例如集成 AntV L7 实现地理空间分析。 三、功能介绍1、大屏管理支持大屏【新增】、【编辑】、【设计】、【预览】、【复制】、【删除】操作2、大屏设计器采用拖拉拽可视化设计，支持30+基础组件、40+种图表组件、15种边框组件、10多种修饰组件3 、资源库支持资源自定义上传、在大屏设计器中直接引用资源，如：3D图片、边框图片、装饰条、背景图4、数据源支持MySQL、PostgreSQL、Oracle 、ClickHouse、SqlServer等主流数据库接入
1.9K10编辑于 2025-12-31- 来自专栏京东技术
供应链大屏设计实践
数据链路的稳定性 接口服务的兜底 指标准确性的验证机制 重算机制 本文内容有限，很多设计的小细节未能体现，感兴趣的欢迎交流，希望上述内容对正在从事大屏建设的同学有一些新的启发和思考。 01 背景 在今年的敏捷团队建设中，我通过Suite执行器实现了一键自动化单元测试。Juint除了Suite执行器还有哪些执行器呢？由此我的Runner探索之旅开始了！ 供应链大屏是供应链事业部重要的看数工具，尤其在大促期间，为业务管理层掌握大促实时动态提供了支撑，为事业部的目标达成、排产提供重要的数据支持。 3）大屏结果分钟级落库，并通过Grafana,创建大屏数据监控看板，持续监控大屏数据，通过异常拐点发现问题点，避免遗漏问题。并结合不同看板分析数据趋势及变化原因。 4）结合大屏计算逻辑，通过京东动力搭建测试模型，做到自由指定时间计算大屏指标明细，验证分析大屏数据。
81010编辑于 2024-07-04 - 来自专栏计算机图形学 前端可视化 WebGL
拓扑大屏三维编辑器的设计与思考
从去年年初开始，我们团队内部就在做两个编辑器： 3d编辑器 支持搭建3d场景。 拓扑/大屏编辑器 支持搭建大屏/拓扑/组态场景。 下面是几个项目的示例图： [示例图] [示例图2] [示例图3] [示例图4] 中间是一个三维场景，使用三维编辑器编辑而成，周边是一些大屏元素，使用大屏编辑器编辑。 和一般的大屏编辑器不同，我们的大屏编辑器不仅支持大屏元素的排布，也支持分层拓扑图，架构图，交通图等，以及组态功能。 基于canvas + HTML5元素共同开发，能够支持更多丰富的功能和效果。 通过派发事件和接受事件来展示和隐藏内容，效果是可以的，问题在于易用性并不好，通过编辑器实现起来复杂，一般的实施人员用起来难度大。 总结 上面是一些设计与思考，主要是基于拓扑/大屏编辑器的思考。为了有更好的产品，我们一直在努力的架构，设计与思考。 有关三维编辑器，有很多类似的设计理念，以后又机会再说。
1.3K30发布于 2020-11-11 数据大屏交互设计案例详解 | 基于smardaten实现智慧交通监测大屏
而现代智慧交通大屏，利用可视化的方式整合多源数据，一屏即可实现全域感知和综合监测，又利用各类交互设计，提升数据大屏的联动能力，加快决策过程。 点击跳转：大屏中各组件支持点击事件，例如针对指标卡可以实现点击跳转的功能，实现从宏观指标到微观详情的快速穿透。 三、配置过程进入平台后，选择交通监测系统，进入数据大屏的配置页。在数据大屏中支持多种交互动作，其中交互组件作为与用户直接交互的核心元素，包含按钮、导航、输入框等多种类型。3.1. 回到数据大屏的配置页，将地址填入并绑定“车牌号” 作为跳转参数，确保查询结果与输入的车牌号精准匹配。完成后，我们预览测试一下。 交互能力多，支撑多维度分析：覆盖页面导航、图表联动、下钻分析、过滤筛选等能力，使大屏从静态展示升级为“宏观到微观” 的数据探索工具，助力用户深入洞察，提升决策质量与效率。
81710编辑于 2025-10-29- 来自专栏一个会写诗的程序员的博客
7 大程序设计原则
将大牛们的经验总结到一起，可以得到以下「7 大程序设计原则」 。这些设计原理源于对实际软件开发现场的分析，是提高代码质量的经验结晶。 让我们一起一探究竟吧！ 此外，设计代码时将对称性纳入考虑的范围能防止我们在思考问题时出现遗漏。如果说代码的条件分支是故障的温床，那么对称性就是思考的框架，能有效阻止条件遗漏。 硬件方面，比如取暖器，为防止倾倒起火，取暖器一般会配有倾倒自动断电装置。同样，设计软件时也需要考虑各种情况，保证软件在各种情况下都能安全地运行。 Do：编写安全的代码 选择相对安全的方法对具有不确定性的部分进行设计。列出所有可能的运行情况，确保软件在每种情况下都能安全运行。 为此，我们也要将不可能的条件视为考察对象，对其进行设计和编程。不过，为了统一标准，我们在编写代码前最好规定哪些条件需要写，哪些条件不需要写。
1.4K31发布于 2021-05-06 - 来自专栏博文视点Broadview
如何进行可视化大屏视觉设计？
由于大屏的开发基于Web 端，因此网页设计规范中使用的最小字号为12px，小于12px 的很多浏览器不会识别。 图2 02 大屏设计布局解析 大屏设计的四个流程有：需求调研、数据分析、产品设计、可行性测试。 大屏要有看点 一个铺满文字和图表的大屏，很难让人产生观赏情绪，因此大屏的设计一定要有看点。 看点可以理解为大屏的主视觉元素，一般面积占比较大，用于即刻抓住观者眼球。 在产品的视觉设计中，情绪板是一种非常科学有效的设计方法，可以帮助设计师客观、理性地定义产品视觉设计的风格，从而使产品的设计更加贴近用户心智。 图7所示是情绪板定义设计风格的流程。 图7 ▼ 以上内容节选自《写给UI设计师看的数据可视化设计（全彩）》一书，更多关于数据可视化设计的内容，请阅读本书！
1.2K00编辑于 2023-05-06 - 来自专栏趣谈前端
从零设计可视化大屏搭建引擎
相关文章: 从零开发一款可视化大屏制作平台 演示地址: V6可视化大屏编辑器 作者: 徐小夕 几个月前我写了一篇关于从零开发一款可视化大屏制作平台 的文章， 简单概述了一下可视化大屏搭建平台的一些设计思路和效果演示 ， 这篇文章我会就 如何设计可视化大屏搭建引擎 这一主题， 详细介绍一下实现原理。 按照我一向的写作风格， 我会在下面列出文章的大纲，以便大家有选择且高效率的阅读和学习: 快速了解数据可视化 如何设计通用的大屏搭建引擎 大屏搭建引擎核心功能实现 拖拽器实现 物料中心设计 动态渲染器实现 如何设计通用的大屏搭建引擎 说到 “引擎” 这个词也许有种莫名的高大上， 其实在互联网技术中， 我们经常会听到各种相关的名词，比如 “浏览器渲染引擎” ， “规则引擎” ， “图像识别引擎” 等， 我觉得 综上我们总结出了可视化大屏的必备要素: 我们只要充分的理解了可视化大屏的组成和特征， 我们才能更好的设计可视化大屏搭建引擎， 基于以上分析， 我设计了一张基础引擎的架构图: 接下来我就带大家一起来拆解并实现上面的搭建引擎
1.8K40编辑于 2022-02-09 【开源大屏】玩转开源的积木BI，从0到1设计一个大屏
让我们一起来看一下如何从0到1设计一个数据大屏。 大屏设计器支持多种数据来源配置，支持数据实时同步更新，同时大屏设计器基于 WEB 页面渲染，可灵活投屏多种屏幕终端。 精心预设多种行业模板，极致展示数据魅力。 二、积木大屏安装/集成 支持maven本地集成或在线使用 本示例以本地安装为例；本地安装完成后，进入大屏后台；就可以开始大屏制作了。 三、大屏设计步骤 1. 创建大屏 点击“新建”，弹出新建数据大屏弹框，输入大屏名称，选择文件夹，点击“保存并设计”即创建了大屏 可重新选择大屏的背景色或背景图片。 2. ，即可设计完整大屏了。
1.2K10编辑于 2024-12-13- 来自专栏供应链项目实践
洞见供应链 | 设计适配多端的自适应数据大屏（从 PC 到指挥中心大屏）
本文将深入电商供应链场景，基于React+Node.js技术栈，详解如何设计一套从PC到指挥中心大屏的自适应数据大屏方案，解决多端适配、性能优化与业务价值融合的痛点。 一、多端适配的核心挑战与设计目标1.1电商供应链大屏的典型场景终端类型典型场景核心需求PC端仓库运营台、物流调度台高密度信息展示、精准操作交互平板端移动巡检、现场决策触控友好、关键指标优先指挥中心大屏全局监控 ：避免大屏渲染卡顿、PC端资源浪费业务聚焦：不同终端突出对应场景的核心指标（如PC显示明细，大屏突出异常预警）二、响应式布局架构设计2.1整体架构图2.2关键技术实现：基于React的响应式容器2.2.1 ，允许组件自由拖拽缩放（配合后续大屏编辑器）三、组件级自适应策略3.1图表组件自适应（以Recharts为例）3.1.1动态尺寸调整import{BarChart,Bar,XAxis,YAxis,Tooltip ，平衡实时性与服务器压力六、完整业务流程图结语本文围绕供应链系统的多端自适应大屏设计，从布局架构→组件实现→大屏专项优化→后端支持→性能调优五个维度展开，详细讲解了：基于断点的三级响应式布局方案（PC/
30710编辑于 2026-05-14 - 来自专栏葡萄城控件技术团队
数据可视化大屏设计必备步骤
类似下图这种的： 还是这种的： 那好看的，令客户满意的可视化大屏究竟应该如何制作呢，下面我们就来一起了解和学习一下设计可视化大屏的几大必备步骤，保你设计无忧，工作越干越得劲。 2、确定物理大屏尺寸，明确设计稿的尺寸 看板设计好后均是要在大屏上进行展示，所以要提前确定好对应的物理大屏尺寸，这样设计出来的大屏才能获得最好的视觉体验，也会展示的更加完美。 注意：若物流大屏分辨率过高时，可以采用分辨率减半的设计方法去进行设计。 3、确定大屏展示的关键指标 确定好大屏尺寸后，就需要确定大屏展示的关键指标内容，那什么是关键指标呢？ 6、确定大屏的设计风格 大屏的设计风格需要依旧对应的行业类型、指标数据、客户需求等进行整体搭配，总体分为两种风格： 那针对大屏设计给大家推荐一个公开课，保证让你看完受益匪浅，除此之外，联系对应的小助手 ，还有免费的素材包可以领取呢~ 7、大屏颜色搭配 人们最直观的感受就是颜色，可以用主色去强调重点内容，让用户可以更快速的识别重要信息，我们也一起了解一下不同行业的色彩属性： 8、大屏的动效设置
2.4K50编辑于 2023-02-24 - 来自专栏XC's Blog 日常笔记
前端大屏方案
就像我朋友遇到的情况，16:9 的设计稿放到 32:9 的拼接屏上，两边各空一大块。你可以选择拉伸（Math.max），但内容会变形。 适用场景 固定比例的纯展示大屏，没有复杂交互，交付时间紧。 ': { rootValue: 16, propList: ['*'], minPixelValue: 2 } } } 我的看法 说实话，rem 方案在大屏场景下有点过度设计 ── 布局：vw/vh ├── 字体：clamp() ├── 图表：JS 动态计算 └── 组件：Container Queries 常见 FAQ Q：大屏一般用什么设计稿尺寸 如果是 4K 屏，设计稿按 3840×2160 出，但开发时可以按 1920×1080 写，浏览器会自动处理设备像素比。 Q：scale 方案字体模糊怎么办？ A：没有完美解决方案。 Q：大屏需要适配移动端吗？ A：一般不需要。大屏就是大屏，手机打开看的场景极少。如果甲方非要，建议做两套页面，用媒体查询切换，而不是一套代码适配所有。 总结 大屏适配没有银弹。
27110编辑于 2026-05-08 - 来自专栏PHP在线
未来Web设计的7大趋势
这一改变便引出了 Medium 曾经推广过的设计趋势——全屏图片加标题，滚动后才可见页面主体内容： 有了这长长的滚动页面，设计师们终于有机会实现梦寐以求的杂志效果：尽情使用美丽的大图片。 这一风潮在图标字体以及谷歌材料设计中就已见端倪。具此特点的网站通常都具有更快的加载速度，图标在放大后也不损失质量，是现代化浏览器的理想之选。 这些技术均已面世，只是要专业人士为更高标准的显示器来改变工作习惯，尚需时日。当用户的显示器平均标准达到 Retina 级别时（新款iMac显示器），相信设计师们定会追随这一改变。 5. 谷歌材料设计由 Polymer 提供技术支持，适用于现代化浏览器，它利用简单的标签，即可从安卓应用中提取丰富的动画和互动组件： 如果谷歌材料设计能够开花结果，相信将会有更多组件框架在2015年涌现。 7. 社交媒体的饱和度与邮件的崛起 社交媒体于用户而言固然是个巨大的成功，然而对于广大的原创博主来说，就不那么乐观了。 首要问题就是饱和度。
1.4K50发布于 2018-03-07 - 来自专栏技术客栈
Java设计模式（7）装饰器模式
前言 在软件开发的世界里，设计模式如同一本精妙的编码诗集，已经成为一种标准的编程实践。在Java编程中，设计模式很重要。 本人将制作一个关于Java设计模式的系列文章，总共23种设计模式将以一篇一篇文章讲解，代码笔记已开源：Gitee点击跳转。在上一篇《Java设计模式（6）桥接模式》文章中，我们介绍了桥接模式。 本文是这个系列的第七篇章，我们将讲解一下装饰器模式的实现方式、应用场景以及它的用途。 装饰器模式 装饰器模式是一种结构型设计模式，用于动态地为对象添加额外的行为或责任，而无需修改其原始类。 它允许将对象包装在一系列装饰器中，每个装饰器都添加一些特定的功能，从而实现对对象行为的灵活扩展。 使用装饰器模式可以避免创建大量的子类，而是通过组合不同的装饰器来实现各种功能组合。 代码实现 这里采用绘图的例子来讲解一下此模式的代码实现。
51710编辑于 2024-04-18 - 来自专栏vivo互联网技术
从0到1设计通用数据大屏搭建平台
本文将通过敏捷BI平台的通用大屏搭建能力的实现方案，来讲解一下通用可视化搭建平台整体的设计思路。 这里简单的做一下介绍：大屏和报表看板都只是BI的其中一种展现方式，大屏更多是通过不同尺寸的显示器硬件上进行投屏，而报表看板更多是在电脑端进行展示使用。 管理中心：是大屏的后台运营管理模块，包含了大屏模版管理、大屏发布下线、访问权限等管理功能。 五、效果预览六、总结本文通过可视化页面搭建、no/low code 平台、Schema 动态表单等技术思想来分析讲解了如何去设计开发一个通用的数据大屏搭建平台。 当前的设计方案基本满足了数据大屏的核心能力搭建需求。
4.5K40编辑于 2022-10-17 - 来自专栏樯橹代码
公司大屏开发心得
大屏开发心得 布局篇 因为大屏不是对外开放的，所以可以使用固定的浏览器。既然这样其实是可以使用一些相对比较新的技术的。所以在布局这块我优先选择使用flexbox技术。 因为大屏屏幕很大，设计师给出的设计图通常会有很大的尺寸。其实设计师并不知道的是大屏屏幕在再大，也不过就是一个显示屏的尺寸。其实那这块需要的就是一个等比缩放。 因为只要把量出来设计稿的实际尺寸，直接设置在flex上就可以了。 比如设计稿尺寸是3200px，对应到flex上就是flex: 3200。 大屏模糊的问题 大屏一般都是多块屏幕拼凑起来的一整块屏。 设计稿给的一个页面。开始的时候我们是按照一个页面进行开发的。但是投到一个大屏的时候问题来了，因为放的很大，锯齿很严重。 所以后来还是把大屏分开了，设计稿的每个部分拆成一个页面，每个小屏幕显示一个页面。 即便字号很小也会显示很大（chrome默认最小字号是12px，如果需要显示更小，需要修改浏览器配置）。分开就不会有这个问题了
1.8K20发布于 2019-09-02 - 来自专栏XC's Blog 日常笔记
大屏自适应方案
abbrlink: ‘0’ 引言：大屏适配的痛点与破局之道 在数据可视化大屏项目中，开发者常常面临这样的困境：同样的设计稿，在1920×1080屏幕上完美显示，到了3840×2160或1366×768的屏幕上却面目全非 今天，我将分享一种JS+CSS协同作战的大屏自适应方案，它不仅解决了适配问题，还保持了代码的优雅与可维护性。 一、方案核心思想：视窗单位+动态计算 1.1 为什么选择vw/vh？ 但在大屏场景下，这些方案各有局限： rem：依赖根字体大小，复杂场景计算繁琐 百分比：依赖父元素，多层嵌套时难以维护 媒体查询：断点固定，无法实现连续自适应 vw/vh单位基于视窗尺寸，天生适合大屏适配 在开发大屏项目时，我的建议是： 基础布局使用CSS：利用SCSS函数保持代码简洁 动态内容使用JS：利用工具类保持灵活性 关键组件混合使用：结合两者优势实现最佳效果 记住：没有最好的方案，只有最适合的方案 根据项目需求和团队习惯，灵活选择组合策略，才能打造出既美观又实用的大屏应用。
28910编辑于 2026-05-08 - 来自专栏樯橹代码
大屏数据显示优化
大屏数据显示优化 大屏数据的页面里面包含了一些3D地图和世界航班趋势图，反应上来有个问题，就是动画比较卡顿。 清晰度太高的图片，浏览器处理起来也是有很明显的卡顿，尤其是图片切换到时候。而大屏像素很低，高清的图片也显示的像素点很大，看起来非常模糊，所以并没有必要使用高清的。
5.2K20发布于 2019-09-02 - 来自专栏腾讯社交用户体验设计
简而未减-结构化消息专为大屏而设计
图中可以看出5.5英寸以上屏幕可以称Phablet，7英寸以上就是Tablet。这次案例以Tablet设备为主，Phablet设备为辅进行体验设计。 ? 在我们的社交平台上，用户消息在多个终端设备传递中，产品功能只是在原有基础上简单粗暴放大而已，那么大屏手机/平板电脑存在的价值化为乌有。 ---- ? 但因设计形态统一，导致在内容辨识度上也有所下降，内容设计上没有各自特点，用户在浏览过程中容易忽略内容本质。 ? ---- 这种以消息为主的结构化设计在iPhone7Plus设备显示，相同信息可显示约4-4.5条左右,有效提升屏幕利用率。 但如果用户快速转发了很多内容时，在兼容小屏设备时，屏幕利用率会有所下降。在iPhone7Plus设备上，同样大小的信息在一屏内展示2-2.5条。用户需要在纵向滑动多次才能抵达下一个信息类别。
1.1K40发布于 2018-06-29 实时数据可视化与数据大屏设计深度分析
在当今数字化时代，实时数据可视化和数据大屏设计已成为企业决策和运营的关键工具。 数据大屏设计 腾讯云RayData 提供了强大的数据大屏设计能力，支持自定义组件和模板，能够快速构建高度定制化的数据展示界面。 低代码可视化分析 则更侧重于通过图形化界面，让用户通过拖拽组件的方式快速构建数据大屏，减少了编码工作量，提高了开发效率。 多屏互动 在多屏互动方面，低代码可视化分析 和 数字孪生可视化 提供了跨平台和设备的展示能力，允许用户在不同设备上查看和交互数据。 综上所述，实时数据可视化和数据大屏设计在现代企业中扮演着越来越重要的角色。通过合理选择和应用这些工具和技术，企业能够更有效地管理和分析数据，从而做出更明智的决策。
25510编辑于 2025-07-28
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号