首页

兰亭妙微案例分享 | 国土空间大数据可视化界面设计

清阳

数慧时空(全称:北京数慧时空信息技术有限公司)是以空间信息技术为核心、国内领先的国土资源行业解决方案提供商,具有业务咨询、自主软件研发、数据加工和信息服务的全业务综合服务能力,是国土资源部最重要的信息化合作单位之一。数慧时空基于多年的研发理论与实战经验,蓝蓝设计基于多年的gis地理信息/大数据可视化界面设计实战与理论,强强联合。
融合西方先进的系统设计方法与中国互联网的快速迭代方法,形成了独有的系统性与敏捷性兼具的工作方法。国土一张图软件项目是数慧时空公司从2012年开始研发的重点产品,此次在国土资源部展会上以大屏的形式展示给国家各部委领导,界面设计及研发实力获得一致好评。

深刻理解国土局需求

数慧时空公司从创立公司开始,就一直在国土资源领域做产品,公司所有的产品都是转绕着国土资源开展的,可以说在这个行业中的资深专家了,公司近年来发展的越来越好,频频接到大的单子,对各身各个产品的要求也越来越高,所以,第一次把这么重要的展览会上向各级重要领导演示的产品交给了外部的设计公司。这个项目完毕之后,基于客户的客户的认可和彼此的欣赏,又继续和蓝蓝设计签下三个项目的整体设计合作协议。
在和数慧时空研发团队的配合中,他们给我们印象最深的是通情达理,积极的推进项目,充份的理解和倾听。开始的时候,需求会不断的修改或推翻或补充,会不知道客户想要什么样的风格,以什么为美,在即有布局的原型和元素的基础上如何创新,换一种完全不同的方式去展现有的内容。工作十天左右以后,视觉工作有了新想法,推倒重来也不会怕麻烦。

快速的设计迭代 现场配合

为了共同的目标--让软件产品更卓越,在展会上赢得充份关注,过程中的需求变更、研发、设计难度工作量增加,都不是问题。前一个月完成整体设计,后二个月,我们的前端工程师基本上每天都在现场,实现前端制作的代码实现和程序工程师的对接,互通有无,互相学习,谁会的谁就做,怎样快捷 怎么来,不分彼此,晚上一起加班到十一二点,周未继续。双方工作态度和积极性都极好。最终平等的对话、充份的理解和倾听,快速的设计迭代和现场配合是项目成功的关健。
 
 

界面设计 | 大屏设计 | Shipp-Logistics 交付管理应用 / UI/UX 设计

清阳

Shipp-Logistics 交付管理应用 / UI/UX 设计

Shipp-Logistics 是一款面向中小型物流公司的交付管理应用,旨在提升配送效率、简化任务分配流程,并为司机提供清晰、可操作的任务指引。

本项目从用户研究出发,围绕“调度员-司机”双端交互流程,设计了完整的任务创建、路线规划、实时追踪与状态回报机制。UI风格采用模块化信息呈现+中性色调,兼顾操作高频与环境复杂下的可读性与点击效率。

关键设计亮点包括:

Excel和PPT已经落后了,可视化大屏强在哪?再次预览瘾

清阳

今天看到这么一个问题:

我想说,这真是一个好问题!可能会有如下答案:

●Excel的数据透视表操作麻烦,用BI拖拽一下就能有结果
●整合多源数据,很多型其他数据可以一起分析了
●视觉化快速、美观,尤其是联动的功能

作为一个从事资料行业多年的人,我觉得最后一个是比较有意义的:视觉化。

可能很多人都不懂什么叫联动,看这个:

将显示缩放图像

很好理解,就是让数据动起来,Excel和PPT必备这样,需要长久,而且效果要差显着。

说到BI,可能很多人不了解,那报表总该接触过吧,两者的视觉化都是类似的,这也是比较重的。

想要快速、简单,不用方案码,就能实现可视化吗?

首先不说会用工具,我觉得模板才是最重要的,工具学起来可能会很长久,但是模板直接,可以用,而且重要的是:财务营销、销售营销等。

FineReport做化有一套方法,而且里面的生活化模板很不错:

将显示缩放图像
将显示缩放图像
将显示缩放图像
将显示缩放图像

什么?没看到瘾?直接看大屏!

将显示缩放图像
将显示缩放图像

觉得难,你也能做出来。点击FineReport免费试用,还有更多演示供你选择,总有一款适合你,别点击大屏演示等你来体验。

 

兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan

超酷的高校学术迎新数据大屏,你也能做!

清阳

先来看几张高校迎新大屏:

西北工业大学

将显示缩放图像

浙江农林大学

将显示缩放图像

资料有限,大概做到了这样一个迎新大屏:

将显示缩放图像

接下来是制作步骤

教程只是视觉讲化demo的制作过程唷,硬体部分不涉及啦

1、确定主题及展示指标

在设计可视化驾驶舱或大屏的时候,我们第一步要先确定我们大屏/驾驶舱的主题,然后列出我们想要在这张大屏上想要展示的数据指标和分析维度

主题:学校迎新大屏,通过对学校招生资料以及教职人员资料分析,向新生展示学校招生情况及学校师资力量、办学能力

主要分析维度如下:

各省份新生招生人数分析
历年各省招生情况分析
迎新资师队伍各
师资力量分析
办学规模分析
历年本科升学率趋势分析
学校初步支出结构分析
在校学生学历结构分析

2、根据资料关系选择合适的图表

关于图表的选择,看我前面两天写的图表应用指南:不知道用什么图表展示数据?看下面这份图表选择指南就够了,根据数据之间的关系选择合适的图表,可以参照这张经典的图表:

将显示缩放图像
将显示缩放图像

3、驾驶舱排版设计

根据确定好的分析指标进行排版,排版要注意主次分明,让读者瞬间看到重点资讯,提高资讯传递的效率,把核心练习指标放在中间位置、占更大面积,一般都会将动态效果丰富的地图放在主要位置,抓住读者眼球,次要指标萤幕放在几十个屏幕上。还有一些辅助分析的内容,可以通过图表联动、钻取体现。

可以参考如下几种布局方式:

将显示缩放图像

我的布局:

将显示缩放图像

4、城市化模板制作

模板的制作,我用的是FineReport,做视觉化大屏非常专业,基本上不用写什么程序码就可以开发视觉化大屏,多一个低程序码的报表开发平台吧。刚感兴趣的话可以下载一个和我一起试试看

软体激活码迭代这里,话不多说,上教程:

打开finereport,创建一张决策报表:

将显示缩放图像

新建数据集,然后用sql查询语句从数据库中提取数据,可以新增省份数据库数据,也可以直接上传档案数据集,定义地区引数,关联历年各省招生数据和各分招生数据(实现数据联动),其他的取数据报表我不用一一发货来,大家可以自己根据需求写

将显示缩放图像

决策报表采用的是易用式布局,可以拖拽便捷布局,根据之前设计的布局排版将所有图表元件按照布局设计顺序拖放到对应位置:

将显示缩放图像

这里面我用到了两个图表外挂,滚动字幕和数字时钟外挂,大家可以在一些外挂商城免费下载,点选服务器>外挂管理就可以找到这些外挂啦,当然你还可以找到其他你心仪的外挂。

将显示缩放图像

字幕滚动效果和数据时钟效果:(我录的不是很清楚抱歉><)

然后分别给图表元素类型设置其他、数据、样式、效果,以中间的地图设置为例:

将显示缩放图像

其他图表元件的数据和效果设定我这里就不赘述了

到这一步,基本上驾驶舱的雏形就做完了,我们可以对背景图、最后的细节进行美化,背景可以选择颜色或者是图片,做的匆忙我不想找背景图,直接用的颜色,点选机身>样式进行设置

将显示缩放图像

为了更好的视觉效果我们还可以给图表新增主题,增加大屏科技感,比如我们的大屏主题:

点选标题背景块>属性>样式,上传图片设置:

将显示缩放图像

最后储存模板,点选预览,效果如下(嘻嘻还是用的上面那张图):

看着?是不是还挺酷炫的!其实这样的大屏制作起来并不难,赶紧学习起来引爆你的SNS吧XDDD

 

兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan

界面设计:Web3场景下,大屏设计中的用户体验要点解析

清阳

73e3b0a4-2ff5-4175-beb1-2d4510ce87bc.png

d65a7188-3597-4010-9533-c1bb1e02b796.png

在传统互联网产品中,数据看板和仪表盘是常见的管理工具。而随着 Web3 技术的发展,链上行为、资产状态、合约执行等信息变得越来越复杂,如何可视化地理解这些动态数据,成为产品设计中的新挑战。
在这一背景下,数据大屏逐渐成为 Web3 项目方、平台运营方、审计安全机构等角色的重要信息枢纽。但在实际设计过程中,许多大屏项目容易陷入“炫酷外观”而忽略了核心交互体验。
本文将从交互设计的角度,探讨 Web3 场景下的大屏设计应关注哪些用户体验要点,避免“看上去很厉害,却没人真正在用”的设计误区。

一、Web3应用为何需要大屏?

Web3 应用天然拥有强数据属性:去中心化交易、流动性池、区块链浏览器、智能合约调用……背后都对应着高频、高维度、链上链下混合的数据系统。
大屏在 Web3 中的主要使用场景包括:
链上运营监控:例如 DEX 交易量、TVL 变化、用户活跃趋势
安全审计看板:异常交易预警、地址聚集行为识别
链级数据展示:Gas 消耗趋势、区块出块速度、矿工分布等
多链资产管理:跨链桥资产流通图、跨链交易流向展示
这些场景中的共通点是:数据变化快、维度多、使用者需要“实时看清”并“快速判断”。这也是大屏发挥价值的关键。

二、Web3大屏设计的5个核心用户体验要点

  1. 可读性优先于炫酷感
Web3 的数据普遍较为抽象,如交易哈希、钱包地址、Gas 费用、TVL等,对非专业用户甚至部分运营者而言并不直观。
在这种背景下,大屏首要设计目标是让用户“看得懂”,而不是制造视觉噱头。
设计建议包括:
使用足够大的字号和清晰的字体(避免细线体在大屏上模糊)
色彩控制在 2~3 个主色 + 层级灰色,避免过多亮色干扰焦点
图表需具备必要的坐标轴、单位标注、异常标记,不应纯粹装饰化
简洁比花哨更重要,清晰比动效更关键。

  1. 实时感知与状态提示
Web3 的链上数据具有强实时性,许多核心指标在数分钟内可能出现剧烈波动。因此,大屏必须能体现“当前状态”以及“更新节奏”。
建议包括:
明确标出“数据更新时间”,让用户知道当前信息的时效性
对关键变化支持动效强调,如箭头上扬/下降、数值闪动提醒等
异常状态颜色需与正常状态明确区分(避免“全绿”或“全蓝”)
此外,设计中应尽量避免让用户怀疑数据是否卡住了,这会极大削弱其对大屏的信任度。

  1. 异常可感知,支持预警反应
大屏不只是展示,更应该帮助用户“识别风险”或“发现机会”。
在 Web3 应用中,这种“感知”尤为重要,比如:
某地址在短时间内发生大量交易 → 潜在恶意行为
某资产流动性短时间骤降 → 潜在清算风险
合约调用量瞬时异常上升 → 可能被攻击或刷单
设计中可引入以下机制:
颜色警示(如红、橙色信号)
简洁文案说明(如“交易量骤增 300%”)
可展开详情但不跳转页面,降低阅读负担
将这些机制融入 UI 组件,可以极大提升大屏的实用性。

  1. 信息层次清晰、模块布局可读
由于大屏往往信息密集,如何组织信息成为交互设计的核心难点。
推荐的分层方式:
第一层:核心概览指标(如总交易量、活跃地址、Gas趋势)
第二层:分区域信息块(如按链分类,或按用户/合约分类)
第三层:详细趋势图/交易列表等可拓展内容
使用模块化的卡片布局、留白区分信息块,可以帮助用户在几秒内抓住重点,避免“眼花缭乱”的阅读体验。

  1. 可维护、可扩展、可适配
Web3 数据结构在不断演变:新增协议、新增链、新增地址标签……这就要求大屏具备良好的可维护性。
设计策略包括:
所有数据组件可复用,如“标准图表组件”、“警示模块”、“K线区块”
UI 布局具备适应不同分辨率的弹性(如1080p/4K/LED拼接屏)
尽量使用“数据结构驱动的渲染逻辑”,而非固定死图布局
在设计前期明确这些要求,可以大幅降低后期重构成本。

 
Web3的大屏设计,不是为了炫技、也不是为了迎合形式,而是为了帮助人们在复杂数据中看清趋势、发现问题、做出反应。
它的真正价值在于:
降低理解门槛
提升监控效率
提供可视化决策支持
 
 
在这个数据密集、变化迅速的领域,交互设计师的任务,就是为用户建立起这座“可感知的桥梁”。
 
如果你正在设计或评估一块 Web3 场景下的大屏,不妨从以上几点出发,重新审视它是否真正服务了使用者的体验,而不仅仅是满足了展示的需求。
如果你有正在推进的 Web3 数据大屏项目,欢迎留言交流你的设计思路与挑战,我也会持续更新关于 Web 应用与交互设计的专业观察。
 
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan

交互视觉具佳的数据可视化地图制作指南

涛涛

本文是 B 端设计师必看的数据可视化地图制作指南,介绍了 GIS 地图在数据可视化大屏中的重要应用,因其能直观表达数据空间关系,被广泛用于政务、商业等场景。文中提出数据地图需满足功能强大、数据准确、效果震撼的要求,还阐述了选择数据地图的方法,包括确定数据与地理位置相关性、地域范围及与其他元素整合方式,同时分享了通过百度地图等第三方平台获取地图及利用 3D Map Generator 插件制作 3D 地图的方法,最后推荐了 Mapbox、Snazzy Maps 等国内外地图平台。

UI大屏设计如何做到实用与颜值并存?

鹤鹤

在数字化时代,UI 大屏设计广泛应用于企业监控中心、展厅、会议等场景。它不仅要精准传递信息,助力决策,还要凭借高颜值吸引目光,提升用户体验。那么,如何让 UI 大屏设计做到实用与颜值并存呢?
深入了解业务需求
在设计前,深入了解业务需求是基础。与业务部门、决策者和潜在用户充分沟通,明确他们期望通过大屏解决的问题及获取的关键信息。以电商运营监控大屏为例,运营人员关注实时订单量、销售额、客单价等核心数据,而市场人员可能更在意流量来源、转化率等信息。只有精准把握这些需求,设计时才能突出重点,确保实用性。
95.jpg
构建合理布局
合理布局是关键。根据信息重要程度、关联性及用户使用习惯进行分区、分层。利用网格系统规范布局,让模块排列整齐、间距均匀,提升美观度与信息定位效率。如企业数据展示大屏,可将关键绩效指标置于中心显著位置,辅助数据和分析图表环绕四周,形成清晰的信息层级,既突出重点,又保持整体协调。
选择直观的信息呈现方式
直观的信息呈现方式有助于用户快速理解。对于数据,可选用柱状图、折线图、饼图等常见图表展示对比、趋势和构成关系。复杂数据关系可考虑桑基图、树状图,但要确保可读性。非数据类信息,如文本和图片,也应简洁明了,避免冗余,让用户能迅速抓住关键。
97.jpg
巧妙运用视觉元素
视觉元素运用需恰到好处。适度的色彩、图形和动画能提升美观度,又不影响功能。为数据图表添加柔和的渐变色背景,或用简洁图形分割信息模块,都能在增强吸引力的同时保证信息清晰。动画效果运用得当可提升可读性与引导性,数据更新时的渐显动画,或复杂流程的分步骤演示,都能发挥积极作用,但要控制好时长、速度和频率。
简化交互流程
在交互设计上,简化流程至关重要。从用户角度出发,减少操作步骤与复杂性。数据查询功能采用智能搜索框,多屏联动设置便捷的手势或按钮操作,让用户操作更流畅,体验更佳。
提供交互反馈
提供良好的交互反馈,可提升用户体验与大屏美观度。按钮点击时的震动、颜色变化反馈,以及元素拖动时的平滑轨迹和释放提示,都能让用户感受到设计的用心,使操作过程更加愉悦。
UI 大屏设计要做到实用与颜值并存,需在理解业务需求、合理布局、优化信息呈现、运用视觉元素、简化交互流程及提供交互反馈等方面下功夫。只有将这些方面有机结合,才能打造出既实用又美观的 UI 大屏,为用户带来优质体验。

兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计B端界面设计桌面端界面设计APP界面设计图标定制用户体验设计、交互设计、UI咨询高端网站设计平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan

大屏 UI 设计的风格有哪些?

鹤鹤

在数字化飞速发展的当下,大屏设备在各类场景中愈发常见,从数据监控中心到企业展厅,从指挥调度平台到商业展示大屏 ,大屏凭借其广阔的展示区域,能承载海量信息,给予用户沉浸式体验。而大屏 UI 设计风格的选择,直接关乎展示效果与用户体验。接下来,让我们一同探究大屏 UI 设计的常见风格。

一、简约风格

简约风格堪称大屏 UI 设计的经典选择,它秉持 “少即是多” 的理念,极力去除繁杂冗余元素。通过简洁利落的布局,让关键信息一目了然;搭配清晰易懂的图标与醒目的大字体,方便用户快速获取所需内容,无需在复杂界面中寻找。这种风格适用于对信息传达效率要求极高的场景,像数据监控中心,工作人员需迅速捕捉关键数据;会议室展示时,也能让参会者快速理解展示内容。

二、科技风格

科技风格充满未来感与现代气息,在设计时大量运用富有科技感的元素,如流动的线条、炫酷的光影效果、灵动的动态元素等。色彩方面,常选用蓝色、紫色等冷色调,象征着科技的深邃与神秘,再搭配简洁的几何图形和具有金属质感的材质,营造出高端、先进的视觉感受。科技公司展厅利用这种风格展示前沿技术成果,智能设备界面采用该风格也能彰显产品的科技属性。

三、扁平风格

扁平风格以简洁的平面图形和单纯的色块构建界面,摒弃立体效果和复杂纹理。它突出信息的直观性,使界面呈现出清爽、简洁的观感,让用户能够快速浏览和理解信息。因其简洁高效的特性,在各类大屏 UI 设计中都有广泛应用,尤其是信息繁多、需要快速获取信息的界面,扁平风格能有效避免用户产生视觉疲劳。

四、拟物化风格

拟物化风格模拟现实世界物体的形态、质感和操作方式,通过高度还原现实元素,让用户凭借直观联想就能轻松理解和操作界面。在工业控制界面中,模拟真实的仪表盘、操作按钮等,方便操作人员快速上手;医疗设备界面采用拟物化设计,也有助于医护人员准确操作设备,减少操作失误。

五、新中式风格

新中式风格巧妙融合传统中式元素与现代设计理念,运用中式经典色彩,如中国红、黛青等;引入传统图案,像回形纹、如意纹等;搭配具有中式韵味的字体,营造出既具深厚文化底蕴又不失现代感的界面氛围。在文化展览、博物馆展示等场景中,新中式风格能很好地展现中国传统文化魅力,增强文化感染力。

六、插画风格

插画风格为大屏 UI 设计注入独特的艺术魅力,通过写实、抽象或卡通等不同风格的插画,为界面增添丰富的情感和个性。艺术展览的展示界面运用插画风格,能与展览主题相呼应,吸引观众目光;文化活动展示中,插画风格也能生动传达活动特色,增强宣传效果。
大屏 UI 设计风格丰富多样,每种风格都有其独特的特点和适用场景。设计师在进行大屏 UI 设计时,需依据项目需求、展示内容以及目标用户等多方面因素,综合考量,选择最契合的设计风格,从而打造出视觉效果与用户体验俱佳的大屏界面。
 

如何做好 UI 大屏设计

蓝蓝设计的小编

做好 UI 大屏设计需要综合考虑多个方面的因素,从明确设计目标和用户需求,到合理的布局规划、色彩搭配、数据可视化设计,再到适配性与性能优化以及细节处理和用户反馈等。只有在每一个环节都做到精益求精,才能打造出优秀的 UI 大屏设计作品,为用户带来卓越的视觉体验和高效的信息传递。

UI设计公司教你如何好大屏设计

蓝蓝设计的小编

大屏设计在UI设计领域中占据着越来越重要的地位,它不仅能够展示海量的信息,还能通过直观的视觉效果吸引用户的注意力。然而,大屏设计并非简单的放大版小屏设计,它需要考虑更多的因素和细节。

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档