大屏显示的一些特点：
1.面积巨大——用户站远才能看全内容（所以字也不能设计很小）
2.深色背景——紧张感强，让视觉更好的聚焦，省电
3.不可 *** 作——大屏主要用来给来用户看的。用户一般不会直接 *** 作大屏
4.空间局限——大屏不像网页有滚动条，它的长宽都是固定的
5.单独主题——每块大屏都有具体想给用户表达某个主题
第一步、调查研究
需要调研的点：
1.大屏的主题——这个屏用户要看什么信息（要规避哪些信息）
2.数据的权威和准确性——对具体要展示的信息进行数据的核对正常数据是多少，历史上极限数据是多少?
3.用户的其他需求点——用户说要用TOP10，但有时候只是用户只知道TOP能表达，还有很多形式也能表示TOP的信息
第二步、视觉效果定位（脑暴穷举、分类去重、投票确定）
紧张：数据的实时，动效的变化
科技：新颖的图表，新颖的动效
丰富：数据丰富，丰富层次感，图表类型多，强烈的空间感
权威：安全元素
第四步、数据表现元素
常规数据表现元素：地图，top10，饼图，列表，数字，趋势等。
如果在多个屏上都只放这些元素，展现上会缺乏很多心意，业务差别性也不好体现。所以需要对每个需求再剖析。
第五步、需求分析，数据挖掘
1.拆分维度——将需求拆分到最小维度
2.确定优先——选择最佳数据来说明观点
3.合并维度——对维度元素进行归类，化繁为简
4.最佳表现——确定用哪种表现形式来体现数据
举个栗子：
在做这一系列的具体某一个屏时，某业务需要大屏展示的内容：我们的业务针对特定区域的保护，正在实时防御着世界各地多类型的攻击。能看到每个攻击类型的当天累加值和趋势。
对于这个内容，我们先进行拆分维度。你们能看到多少维度呢？（一定要拆到最小维度）
接着，确定这些维度的主次优先级。
对这些信息进行相似度归类，化繁为简。关联性最多的维度用同一种颜色表示，画出所有的关系。
上图表示，所有的维度互相关系。我们可以发现时间维度和所有的内容都有联系。
但是时间又是个隐形的内容，大屏上的数据为了表示紧张性，时间如果是实时展现的。那么这个维度在设计的时候不必要用某个具体的视觉元素来表现，是通过在时间节点上的动效变化来表现的。所以我们把这时间线去掉，并对交错关系的维度进行位置的调整。
理清逻辑关系，我们最常用的一个方法就是借助于思维导图，这样我们能更加清晰知道业务需求以及数据关联性。
关系理清楚后，我们接下来可以就行规划设计了。
第六步、规划设计
在这块主要是细节和感受的设计。
1.模块设计——考虑的模块纵横栅格布局设计
2.维度表现——具体维度用什么表现的确定
3.动效设计——时间的把握和情感的控制
4.数量控制——对实施数据的不可控性进行展现上的控制。考虑数据极端情况效果太密或太疏，如何规避
大屏和其他显示屏一样，本身都是有固定分辨率的。
拼接大屏 ：大屏几乎都是拼接屏，UI设计时不用考虑屏幕缝隙影响 内容 的呈现，内容不会丢失，但有可能影响 视觉 的表现，例如一个很大的人物图像被缝隙正中“劈成”两半，或者“劈中”了眼睛，看起来很不舒服，所以设计时可以建立缝隙位置的参考线避免类似情况发生。（现在企业常用的有无缝隙、1.7mm缝隙、3.5mm缝隙、三种拼接大屏，缝隙越小越贵）
设计尺寸： 拼接的每块小屏一般是16:9的高清屏，设计尺寸可以把上下高度设定为1080px，长度按照拼接屏的数量比例得出长度的设计尺寸。例如3乘5的一块大屏幕，高度3块屏设为1080，每块高就是360，360除9乘16等640，640就是一块屏幕的长度，640乘5块屏＝3200最后得出设计稿尺寸就是：高1080px乘宽3200px。
第七步、检查测试
1.重视需求——过一遍需求是不是能够满足。
2.实地测试——将效果放上大屏，看是否方便阅读，动效是否达到预期，色差是否能接受。
3.可信性测试——当自己的讲解员，给用户讲解大屏。能否一句话描述大屏，同时用户能够理解。
设计大屏一定是一个长期跟进的过程。有很多问题会在真正数据进来了，放在大屏上显示才能发现。
整个项目的流程
那让大屏怎么看起来更炫酷，简单的总结几个方法：
1）布局排版
大屏首先是要服务于业务，让业务指标和数据合理的展现。由于往往展现的是一个企业全局的业务，一般分为主要指标和次要指标两个层次，主要指标反映核心业务，次要指标用于进一步阐述。所以在制作时给予不一样的侧重。
2）色彩
背景色又分为整体背景以及单个元素的背景，无论是哪一个，都遵从两点基本原则：深色调&一致性。
整体背景深色系，可选的余地还是很多的，但是配起来能让多数人都觉得好看的还是以深蓝色系为主，如下所示是几个推荐的配色方案。根据实际项目经验，这里极其推荐大家为单个的组件元素搭配一些透明色，透明度设置在10%上下为宜，具体以实际效果微调。
3）点缀效果
细节影响感官体验，在大屏展现上，细节也会极大的影响整体效果。通过适当给元素、标题、数字等添加一些诸如边框、图画等在内的点缀效果，能帮助提升整体美观度。顶部的标题通过左右两个对称线条进行点缀，各个组件的细分标题通过不规则渐变色图片进行点缀，另外每个组件都搭配使用了简洁的边框以提升层次感。
4）动效
动效的增加能让大屏看上去是活的，增加观感体验。
以下举几个案例：
阿里在数据可视化方面已经做的相当超前了，早在2015年的双11销售数据就使用DataV数据可视化引擎搭建数据大屏。
以上大屏利用了DataV数据可视化引擎，以日常图表组件库d.chart以及地理相关组件库d.map为基础，专业数据可视化模板设计为视觉框架，依托cube前端框架搭建起来的web服务。通过该引擎可以利用已有组件低成本还原设计师产出的原型图，快速完成多种数据源的绑定，并通过最终的可视化配置调整系统完成所见即所得的视觉调试，最终产出数据大屏。
工作模式：由之前的“设计->开发”变为“设计->开发->设计->开发”，做到高度还原设计效果。
市场上很多可视化的工具，像帆软和Tableau都是都是数据处理分析软件，两个各有特点。
可以根据业务需求，选择工具，来展示自己的大屏。
以下打开finereport设计器中，按照布局样式，从组件栏拖入对应的图表元素到指定区域并绑定数据。
点击预览按钮，浏览器端的效果如下图所示。
接下来就是配色、点缀和动效了，可根据需求调整界面效果。
还有很多值得推荐的可视化工具，以下列出几个，供大家学习：
Raw 、 Infogram 、 ChartBlocks 、 Visualize Free 、 Visual.ly 、 iCharts
Chart.js 、 D3.js 、 FusionCharts 、 JavaScript InfoVis Toolkit 、 jQuery Visualize 、 ZingChart 、 Flot 、 Gephi
地图数据可视化工具
CartoDB 、 InstantAtlas 、 Polymaps 、 OpenLayers 、 Leaflet
纯可视化图表生成/图表插件——适合开发，工程师
Echarts（ echarts.baidu.com ）、AntV ( antv.alipay.com )、HighCharts ( www.hcharts.cn )
可视化报表类——适合报表开发、BI工程师
FineReport ( www.finereport.com )
商业智能分析——适合BI工程师、数据分析师
Tableau ( www.tableau.com )
FineBI ( www.finebi.com )
Power BI ( powerbi.microsoft.com/zh-cn/ )
可视化大屏类
阿里DataV ( data.aliyun.com/visual/datav )
数字冰雹 ( www.digihail.com )
这是最近几天对数据大屏的一些学习，在这里进行分享。
如果感觉有帮助，请点赞啦，谢谢~~
这个你要在左边添加树<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="mypage.aspx.cs" Inherits="EmptyProjectNet20_FineUI.mypage" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<f:PageManager ID="PageManager1" runat="server" AutoSizePanelID="RegionPanel1" />
<f:RegionPanel ID="RegionPanel1" ShowBorder="false" runat="server">
<Regions>
<f:Region ID="Region1" ShowBorder="false" Height="50px" ShowHeader="false"
Position="Top" Layout="Fit" runat="server">
<Items>
<f:ContentPanel ShowBorder="false" ShowHeader="false" ID="ContentPanel1" CssClass="header"
runat="server">
<div class="title">
<a href="mypage.aspx" style="color: #fff">链接1</a>
</div>
</f:ContentPanel>
</Items>
</f:Region>
<f:Region ID="Region2" Split="true" Width="200px" ShowHeader="false" title="菜单"
EnableCollapse="true" Layout="Fit" Position="Left" runat="server">
<Items>
<f:Tree ID="Tree1" runat="server" title="区域选择" AutoScroll="true" Width="300px" OnNodeCommand="treenodecommand">
</f:Tree>
</Items>
</f:Region>
<f:Region ID="mainRegion" ShowHeader="false" Layout="Fit" Position="Center"
runat="server">
<Items>
<f:TabStrip ID="TabStrip1" runat="server" ActiveTabIndex="0" ShowBorder="True" Width="850px" Height="450px">
<Tabs>
<f:Tab ID="Tab1" runat="server" BodyPadding="5px" title="Tab1">
<Items>
<f:Label Text="区域信息："></f:Label>
<f:Label Text="地区ID:"></f:Label>
<f:Label runat="server" ID="MyLabel1">
</f:Label>
<f:Label ID="Label1" runat="server">
</f:Label>
<f:Label Text="地区数据："></f:Label>
<f:TextBox ID="MyTextBox1" runat="server">
</f:TextBox>
<f:Label Text="地区描述："></f:Label>
<f:TextBox ID="MyTextBox2" runat="server">
</f:TextBox>
<f:Label Text="如需修改，输入数据后，点击修改按钮"></f:Label>
<f:Button ID="MyButton1" runat="server" Text="修改" OnClick="btnMyButton1Click">
</f:Button>
</Items>
</f:Tab>
<f:Tab ID="Tab2" runat="server" BodyPadding="5px" title="Tab2" EnableAjax="true">
<Items>
<f:Grid ID="MyGrid1" runat="server" title="动态创建表格" Width="650px" EnableCheckBoxSelect="true">
</f:Grid>
</Items>
</f:Tab>
</Tabs>
</f:TabStrip>
</Items>
</f:Region>
</Regions>
</f:RegionPanel>
<f:Window ID="Window1" runat="server" BodyPadding="5px" Height="350px"
IsModal="true" title="Window" Width="500px" Hidden="true">
</f:Window>
</form>
</body>
</html>
1. 购买FineUI.Design，2. 购买后在论坛回复，管理员会尽快（一般一个工作日内回复）给你发邮件。
3. 按照邮件中的说明，下载包含 FineUI.Design.dll 和 FineUI.Design.lic 文件的ZIP压缩包。
如果下载下来的文件后缀不是 .zip，请修改文件后缀为 .zip 后再解压。
4. 将 FineUI.Design.dll 和 FineUI.Design.lic 放到与 FineUI.dll 相同的目录下（也就是网站的bin目录）。
5. 重启项目即可（现在即可以在VS的设计视图中编辑ASPX页面了）。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）