mirror of
https://gitee.com/AiShiYuShiJiePingXing/bigscreen.git
synced 2026-01-21 05:40:35 +08:00
大屏设计
This commit is contained in:
zhangxiaohui
185
大屏设计/⾏业孪⽣可视化设计探索 .md
Normal file
185
大屏设计/⾏业孪⽣可视化设计探索 .md
Normal file
@@ -0,0 +1,185 @@
|
||||
- [⾏业孪⽣可视化设计探索 ](https://mp.weixin.qq.com/s/eZP9gGOf3aLTigQkMv__jQ)
|
||||
|
||||
|
||||
|
||||
# **城市⼤脑与⾏业智能**
|
||||
|
||||
在2016 杭州 · 云栖⼤会上，阿⾥云率先提出“城市⼤脑”并落地杭州，“城市⼤脑”是以数据为核⼼，以云计算为基础，把数据当成⼀个城市重要的⽣产资料，尝试通过数据的⽅式去解决城市遇到的⼀些问题。
|
||||
|
||||
在过去将近4年的时间⾥，城市⼤脑最早是从交通领域开始⼊⼿的，逐渐拓展到城市更多的领域，包括⼯业、交通、医疗、公共卫⽣等等个⾏业，延展出了今天“⾏业智能”遍地开花的局⾯。
|
||||
|
||||
# **服务于城市⼤脑的阿⾥云“数据智能设计系统”**
|
||||
|
||||
阿⾥云“数据智能设计系统”有别于单类产品设计体系，是以⾏业智能解决⽅案整体输出为⽬的，集成了“数据产品设计体系”、“⾏业智能产品设计体系”、“⾏业孪⽣可视化设计体系”等的复合性设计系统。
|
||||
|
||||
迄今为⽌，阿⾥云“数据智能设计系统”中包含的设计内容还在持续延展，今天要聊的就是其中有代表性 3类体系：
|
||||
|
||||
**「根基」数据产品矩阵设计体系**。传承阿⾥云设计语⾔，利⽤ XConsole 设计中台，对阿⾥云 200+ 款数据产品进⾏物理、⾏为层⼀体化的设计。
|
||||
|
||||
**「筋⻣」⾏业智能产品矩阵设计体系**。打造具有领域特⾊的⾏业智能产品，引⼊⾏业孪⽣可视化经验，充分开发数据融合价值的同时，利⽤设计降低认知成本。
|
||||
|
||||
**「灵⾁」⾏业孪⽣可视化设计体系**。经过多年的经验沉淀，建⽴了⾏业孪⽣可视化设计标准。利⽤⾏业可视化解决⽅案与其成熟度度量，持续打造有⽣命⼒的可视化资产库。借助智能化的⼟壤，封装设计逻辑，孵化多类降低⻔槛、提⾼效率的设计⼯具。
|
||||
|
||||
|
||||
|
||||
# **「根基」数据产品矩阵设计体系**
|
||||
|
||||
数据智能设计系统与阿⾥云设计语⾔和云智能数据产品设计解决⽅案 XConsole ⼀脉相承，并在此基础上根据⾏业特点进⾏了⼀定的具体化与延展。
|
||||
|
||||
## 01 绵延进化的语⾔——阿⾥云设计语⾔
|
||||
|
||||
Evolving Design Language 是⼀套深⼊云计算领域，集视觉规范与设计元素于⼀体的、⾃我进化的设计语⾔。它帮助我们更加⾼效地提升设计规范和质量，同时打破虚拟与现实的壁垒，去搭建阿⾥云智能感与逻辑秩序的世界。
|
||||
|
||||
在阿⾥云设计语⾔的指导下，数据智能产品设计⼒争做到清晰⾼效、体验⼀致，并体现⾏业领域的专业与严谨。在虚拟与现实、抽象与具象的关系中，我们继承着阿⾥云设计语⾔，探索着数据智能⾏业的设计观点，不仅通过参数化设计延展抽象之美，更在虚拟空间中通过数字孪⽣驱动现实变得更美好、更智慧。我们的设计体系不断⽣⻓，不断进化，遵循逻辑⾃洽与秩序严谨，同时注重以⼈为本的体验与设计价值的普惠。
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## 02 传承的保障——云智能数据产品设计解决⽅案 XConsole
|
||||
|
||||
XConsole 诞⽣于阿⾥云，将数据产品的设计解决⽅案与开发框架更紧密地结合，旨在让设计可以美⽽简单。XConsole 所提供的设计⼒包括设计规范、组件库、场景库、最佳实践库、⼀致性度量及⽆障碍设计。从时间、空间、感官三个维度来看，XConsole 涵盖了⽤户流程中各节点的⾏为与体验、信息架构中的布局、层次与切变，以及感官体验中的美感与细节打磨。最佳实践、场景、规则与⽤法是其核⼼资产，帮助产品场景化构建完整的体验链路。
|
||||
|
||||
|
||||
|
||||
通过 XConsole，我们希望形成更具公信⼒的企业级设计解决⽅案。《控制台⼀致性评估⽅法》作为标准化⼯具推动了云产品⼀致体验提升，并发表了学术论⽂，被 ACM Digital Library 收录，阿⾥云设计师们也将这⼀成果带到了 2019 CSCW ⼤会 (ACM Conference on Computer-Supported Cooperative Work and Social Computing) 现场。基于 XConsole 撰写的团体标准《云计算管控平台界⾯设计指南》已被中国标准化研究院审核并公示。
|
||||
|
||||
|
||||
|
||||
数据智能设计遵循阿⾥云设计语⾔与 XConsole，在数据产品与⾏业智能产品中对其进⾏巩固、应⽤并发扬，从⽽保持了阿⾥云⼀致的语⾔表达与⻛格基调，并根据差异化场景进⾏了适当的延展。
|
||||
|
||||
|
||||
|
||||
## 03 不破不⽴——数的物化
|
||||
|
||||
在⾏业智能产品的使⽤场景中，对⽆形物的可视化映射尤为重要。抽象的数据流转和繁琐的操作链路往往是⽤户体验的瓶颈，但也可以成为体验提升的突破⼝和数据可视化的创新舞台。
|
||||
|
||||
|
||||
|
||||
⾏业智能产品为城市⼤脑提供着全量、标准、⼲净、智能的数据资源。⾯对繁复的数据依赖关系和操作链路，设计师尝试化“数”为“物”，将抽象概念翻译为具象实体，将流转关系表达为动态路径，将层级架构⽤三维⽴体的效果搭建出来，数据关系变得更为清晰、直观，提升了多维信息的触达性和使⽤的亲切感与智能感。
|
||||
|
||||
|
||||
|
||||
# **「筋⻣」⾏业智能产品矩阵设计体系**
|
||||
|
||||
## 01 尊重传统——保有⾏业特⾊
|
||||
|
||||
在交通、⼯业等领域，业务与开发⼈员利⽤产品完成⾏业场景中的核⼼业务流程与数据配置，从⽽保障基础功能的实现和上层应⽤的搭建。在⾏业智能中台的设计中，我们也沉淀了⼤量具有⾏业属性的设计资产包，便于设计师与合作伙伴进⾏⾼效复⽤。
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## 02 落地⽣花——⾏业孪⽣低代码搭建
|
||||
|
||||
数字孪⽣是指通过数字化⼿段将现实中的物体在虚拟的数字世界中构建相同的实体，从⽽进⾏全⽣命周期的分析、预测和优化。如果说数据可视的关键词是数据的“映射”，那么数字孪⽣的关键词则是实体的“重建”。
|
||||
|
||||
|
||||
|
||||
来源：数字孪⽣体技术⽩⽪书（2019），由数字孪⽣体实验室与安世亚太联合发布
|
||||
|
||||
|
||||
|
||||
在阿⾥云多年的⾏业孪⽣可视化设计积累下，这⼀能⼒也被更⼴泛的应⽤于⾏业智能产品中。那么，如何搭建⼀个全⽣命周期在线可运算的平⾏世界？通过对这样⼀个镜像世界的观察、推演和测试，现实中的⽣产与决策将会是怎么样的呢？
|
||||
|
||||
|
||||
|
||||
在⼯业⼤脑中，数字孪⽣将有形事物进⾏数字化重建与实时仿真。我们制作和沉淀了⼤量⼯业精模和组件，重建了⼀个实时在线的虚拟⼯⼚。为了满⾜不同⻆⾊⽤户的需要、尽可能还原⼯⼚的实际操作流。我们不仅为⼯作⼈员提供产线配置的 PC 端应⽤，同时也搭建了智能⼯业⼤屏，在展示层⾯联动配合，为管理者提供准确的决策依据与预判。
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
**为什么我们不断追求极致的 3D 仿真效果，并且沉淀到设计系统之中？**
|
||||
|
||||
|
||||
|
||||
对⽐⼯业产品早期的2D的数据映射、物理仿真与数字孪⽣效果，我们意识到真实场景的重建可以将产品的清晰性和可操作性⼤⼤提升，免去⼈们对抽象数据和图形的解码过程，使得与产品界⾯的交互越来越接近⼈类⾃然认知与⾏为，从⽽让操作、决策与预判更加精准。
|
||||
|
||||
|
||||
|
||||
为⽀持孪⽣能⼒在不同⾏业与产品中的⾼效落地，我们在设计资产库中沉淀了⼤量模型，同时也在不断打磨与更换⽀持的软件，形成⼯作流的最佳实践。⽬前我们利⽤ Blender /C4D + Substance Painter 以及DataV 的 3D 引擎进⾏线上⾼度还原。完善的 GLTF/PBR 节点⼯作流可以为设计师和开发提供⼀个对⻬的三维产品创作与搭建环境。
|
||||
|
||||
|
||||
|
||||
设计标准的制定、技术路径的打通为数字孪⽣在不同⾏业的应⽤提质提效，使不同设计师与业务和技术团队的合作更加顺畅。今天，数字孪⽣可视化已在交通、医疗、零售等⾏业不断延展落地⽣花。
|
||||
|
||||
|
||||
|
||||
# **「灵⾁」⾏业孪⽣可视化设计体系**
|
||||
|
||||
|
||||
|
||||
## 01 经验之谈——⾏业孪⽣可视化设计标准
|
||||
|
||||
可视化能⼒为各⾏业的客户提供了展示、分析、监控等重要能⼒。利⽤ 3D 模型的精准仿真与光影镜头的流畅描绘，使认知与决策更加⾃然准确，使现实得到理性驱动。在满⾜客户个性化需求的同时，设计体系与规范流程让⼀块块⼤屏获得⽣命⼒与⼀致的调性，并驱动了设计与技术的合作。
|
||||
|
||||
|
||||
|
||||
随着技术路径的成熟，设计经验的丰富，作为设计师，同理⼼驱动我们从各个⾏业终极⽤户⻆度出发，把这⼀能⼒引⼊产品，让更多客户享受到数字孪⽣的助益。同时，我们也在持续对设计标准化流程进规范与改良，⼒求以更⾼的质量更低的成本服务⾏业。
|
||||
|
||||
|
||||
|
||||
由于⾏业孪⽣可视化中的硬件尺⼨与应⽤场景的特殊性，想要实现业务需求、达成最优视觉效果，都离不开对⼈体⼯程学的遵守和对软硬件设备的考量。对所采⽤的字号、观看距离、分辨率、硬件设备选择，我们通过详细的计算与应⽤，沉淀出⼀套最佳实践与设计原则，保证⼤屏设计以符合⼈因⼯程与设备条件为前提，带给⼈们舒适⾃然的体验。
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## 02 普惠之路——⾏业孪⽣可视化解决⽅案
|
||||
|
||||
做了⾜够多标杆案例后，我们开始思考怎样从满⾜定制化需求到满⾜⼤部分市场需求，将独⽴的案例沉淀为不受⾏业与载体限制的⽅案，最终形成解决⾏业⼤屏交付链路中的效率及体验问题的通⽤化能⼒。我们也进⼀步探索⾏业孪⽣的可视化解决⽅案，不但沉淀了⾏业资产，更注重能⼒的扩充与转化。
|
||||
|
||||
|
||||
|
||||
以智慧园区为例，我们针对综合安防、能耗管理、设备管理、综合运营和资产管理五⼤典型场景进⾏需求分析、功能梳理与数据解构，从全球层⾯到楼层的颗粒度，沉淀出可复⽤的多终端组件库、⼯具体系与设计指南，并进⾏前端视觉模版封装和后台技术逻辑封装。这⼀思路与设计规范也可以横向迁移到其他⾏业。
|
||||
|
||||
|
||||
|
||||
那么，怎样去衡量⾏业解决⽅案是否有效成熟呢？我们可以从⾏业匹配度与效率提升两⽅⾯进⾏量化评估。⾏业匹配度的计算⽅式，是将解决⽅案对⾏业的业务场景、业务功能与数据字段的覆盖⽐例进⾏加权平均：
|
||||
|
||||
|
||||
|
||||
（U 为解决⽅案提供的业务场景数、F 为提供的业务功能数、D 为提供的业务数据字段数；n 为实际项⽬中缺失指标数）
|
||||
|
||||
|
||||
|
||||
⽽效率提升则是对⽐该解决⽅案与传统⽅式对关键环节的时间节省程度。具体来说，是在⼤屏设计、⼤屏建模、地图搭建、撰写地图数据、⾯板搭建、撰写镜头脚本这六个主要步骤中，对新⽅案与传统⽅式相⽐的时间节省程度或效率提升的百分⽐进⾏加权平均：
|
||||
|
||||
|
||||
|
||||
（a 为⼤屏设计时⻓、b 为⼤屏建模时⻓、c 为地图搭建时⻓、d 为撰写地图数据时⻓、e 为⾯板搭建时⻓、f 为撰写镜头
|
||||
|
||||
脚本时⻓、g为撰写交互场景时⻓；p 为过去传统某项指标消耗时⻓，c 为当前解决⽅案下某项指标消耗时⻓）
|
||||
|
||||
|
||||
|
||||
度量成熟度可以帮助我们理性评估解决⽅案产品化化为客户带来的效果与价值和对团队带来的降本提效，从⽽更有针对性地优化⽅案，以最⼤限度地匹配⾏业数字化转型的需要。
|
||||
|
||||
|
||||
|
||||
## 03 奇思妙想——智能化提效⼯具
|
||||
|
||||
提效赋能的下⼀阶段，则是通过海量数据、算法和算⼒的结合，为设计过程赋予智能化的能⼒，再通过产品化封装，赋予任何⼈以设计的⼯具与资源。从⽽更多⼈能够快速⽣成⾼质量的可视化展示与洞察分析，将价值更多地发挥在其专业领域和未知领域的开拓上。
|
||||
|
||||
|
||||
|
||||
图表绘制往往耗时耗⼒，配⾊和布局需要⼀定的设计专业知识和经验。如果 AI 可以学习和解构设计经验与案例，将专家能⼒转化为⼈⼈可以快速应⽤的⼯具，我们的⼯作流会是怎样的？不妨⼿绘⼀张图表草图，或选⼀张图表⻚⾯截图，交给 DataV 的智能识图设计功能“⻢良”。基于对⼤量数据的深度学习，“⻢良”可以快速识别你的草图，⾃动⽣成可配置的可视化界⾯。接下来的完善⼯作则可以交 DataV 的美化⼯具箱了。专家系统可以根据你⼤致摆放的组件推测设计意图，⾃动优化布局。智能拾⾊功能可以通过⾊彩量化算法从你上传的⼀张图⽚中吸取⾊彩系列，并给出更多专业配⾊优化⽅案。
|
||||
|
||||
**DataV 马良**
|
||||
|
||||
|
||||
|
||||
**DataV 美化工具箱**
|
||||
|
||||
|
||||
|
||||
# **不破不⽴的未来**
|
||||
|
||||
我们突破设计的边界，终将回归解决⾏业的痛点。
|
||||
|
||||
我们拓展体系的外延，也将沉淀设计助⼒业务转型的经验。
|
||||
|
||||
智慧城市、数字孪⽣、⾏业引擎、可视化解决⽅案、智能化设计...... 这些绝不仅仅是⾼屋建瓴的未来技术，⽽是落地⽣根在社会⽣产⽣活中的价值。很多领域都在探索、起步或发⼒阶段，⾯对诸多变化与不确定性，我们在设计上更是需要不断学习和改进。希望这些设计实践能够为⾏业的体系化数字转型起到推动作⽤，也能为作为设计师的⼤家带来⼀些启发。
|
||||
|
||||
从设计图表到设计规则，从打磨单⼀作品到创造可迁移复⽤的规范体系与解决⽅案，从专攻视觉体验到理解并应⽤智能算法与开发技能......为数据智能⾏业做设计，设计师需要不断挑战⾃我，挑战固化模式。只有不断转变⻆⾊，延展技能树，才能加深设计⽆法替代的价值。
|
||||
291
大屏设计/大屏数据可视化设计指南 .md
Normal file
291
大屏设计/大屏数据可视化设计指南 .md
Normal file
@@ -0,0 +1,291 @@
|
||||
- 微信公众号：BYMD：[大屏数据可视化设计指南](https://mp.weixin.qq.com/s/qwTwBYcHzqvzufSRIQyI_g)
|
||||
|
||||
|
||||
|
||||
# 一、基础概念
|
||||
|
||||
## 1、什么是数据可视化
|
||||
|
||||
把相对复杂、抽象的数据通过可视的方式以人们更易理解的形式展示出来的一系列手段叫做数据可视化，数据可视化是为了更形象地表达数据内在的信息和规律，促进数据信息的传播和应用。
|
||||
|
||||
|
||||
|
||||
在当前新技术支持下，数据可视化除了“可视”，还可有可交流、可互动的特点。<font color='orange'>**数据可视化的本质是数据空间到图形空间的映射，是抽象数据的具象表达。**</font>
|
||||
|
||||
|
||||
|
||||
数据可视化作品《launchit》
|
||||
|
||||
> 作者：Shane Mielke
|
||||
|
||||
> 作者写了本书，地图上显示了世界各地读者的分布情况及对应人数
|
||||
|
||||
|
||||
|
||||
数据可视化作品《world-drawn-by-travelers》
|
||||
|
||||
> 作者：TripHappy
|
||||
|
||||
> 国家之间相互连通的旅游路线，颜色越相近的国家，表明两国家的人们互动越频繁
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## 2、什么是大屏数据可视化
|
||||
|
||||
大屏数据可视化是以大屏为主要展示载体的数据可视化设计。
|
||||
|
||||
“大面积、炫酷动效、丰富色彩”，大屏易在观感上给人留下震撼印象，便于营造某些独特氛围、打造仪式感。电商双11类大屏利用此特点打造了热烈、狂欢的节日氛围，原本看不见的数据可视化后，便能调动人的情绪、引发人的共鸣，传递企业文化和价值。
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
利用面积大、可展示信息多的特点，通过关键信息大屏共享的方式可方便团队讨论、决策，故大屏也常用来做数据分析监测使用。大屏数据可视化目前主要有信息展示、数据分析及监控预警三大类。
|
||||
|
||||
|
||||
|
||||
数据分析类
|
||||
|
||||
> 图片来源：必应；图片作者：帆软软件有限公司
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
# 二、大屏数据可视化设计原则：设计服务需求、先总览后细节
|
||||
|
||||
## 设计服务需求
|
||||
|
||||
大屏设计要避免为了展示而展示，排版布局、图表选用等应服务于业务，所以大屏设计是在充分了解业务需求的基础上进行的。那什么是业务需求呢？业务需求就是要解决的问题或达成的目标。设计师通过设计的手段帮助相关人员达成这个目标，是大屏数据可视化的价值所在。
|
||||
|
||||
|
||||
|
||||
## 先总览后细节
|
||||
|
||||
大屏因为大，承载数据多，为了避免观者迷失，大屏信息呈现要有焦点、有主次。可以通过对比，先把核心数据抛给用户，待用户理解大屏主要内容与展示逻辑后，再逐级浏览二三级内容。部分细节数据可暂时隐藏，用户需要时可通过鼠标点击等交互方式唤起。
|
||||
|
||||
|
||||
|
||||
# 三、大屏可视化设计流程
|
||||
|
||||
规范的流程是好结果的保证。找到一个可参考的流程，然后步步为营，就能避免很多不必要的返工，保证设计质量和项目进度。
|
||||
|
||||
|
||||
|
||||
## 1、根据业务场景抽取关键指标
|
||||
|
||||
关键指标是一些概括性词语，是对一组或者一系列数据的统称。一般情况下，一个指标在大屏上独占一块区域，所以通过关键指标定义，我们就知道大屏上大概会显示哪些内容以及大屏会被分为几块。以共享单车电子围栏监控系统为例，这里的关键指标有：企业停车时长、企业违停量、热点违停区域、车辆入栏率等。
|
||||
|
||||
|
||||
|
||||
确定关键指标后，根据业务需求拟定各个指标展示的优先级（主、次、辅）。
|
||||
|
||||
|
||||
|
||||
## 2、确立指标分析维度
|
||||
|
||||
“横看成岭侧成峰”。同一个指标的数据，从不同维度分析就有不同结果。很多小伙伴做完可视化设计，发现可视化图形并没有准确表达自己的意图，也没能向观者传达出应有的信息，可视化图形让人困惑或看不懂。出现这种情况很大程度就是因为分析的维度没有找准或定义的比较混乱。
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
上图向大家展示了数据分析常用的4个维度，我们在选定指标后，就需要跟项目组其他小伙伴讨论：我们的各个指标主要想给大家展示什么，更进一步的讲，是我们想通过可视化表达什么样的规律和信息。而上图，可以引导我们从“联系、分布、比较、构成”四个维度更有逻辑的思考这个问题。
|
||||
|
||||
**联系**：数据之间的相关性
|
||||
|
||||
**分布**：指标里的数据主要集中在什么范围、表现出怎样的规律
|
||||
|
||||
**比较**：数据之间存在何种差异、差异主要体现在哪些方面
|
||||
|
||||
**构成**：指标里的数据都由哪几部分组成、每部分占比如何
|
||||
|
||||
|
||||
|
||||
## 3、选定可视化图表类型
|
||||
|
||||
当确定好分析维度后，事实上我们所能选用的图表类型也就基本确定了。接下来我们只需要从少数几个图表里筛选出最能体现我们设计意图的那个就好了。
|
||||
|
||||
选定图表注意事项：易理解、可实现；
|
||||
|
||||
### 易理解
|
||||
|
||||
可视化设计要考虑大屏最终用户，可视化结果应该是一看就懂，不需要思考和过度理解，因而选定图表时要理性，避免为了视觉上的效果而选择一些对用户不太友好的图形。
|
||||
|
||||
|
||||
|
||||
### 可实现
|
||||
|
||||
1、我们需要了解现有数据的信息、规模、特征、联系等，然后评估数据是否能够支撑相应的可视化表现
|
||||
|
||||
2、我们设计的图形图表，要开发能够实现。实际工作中，一些可视化效果开发用代码写很容易实现，效果也不错，但这些效果设计师用Ps/Ai/Ae这些工具模拟时会发现比较困难；同样的，某些效果设计师用设计工具可以轻易实现，但开发要用代码落地却非常困难，所以大屏设计中跟开发常沟通非常重要，我们需要明确哪些地方设计师可以尽情发挥，哪些地方需要谨慎设计！一个项目总有周期与预算限制，不会无限期的修改迭代，所以设计师在这里需要抓住重点，有取舍，不钻牛角尖、死磕不放。
|
||||
|
||||
|
||||
|
||||
## 4、了解物理大屏，确定设计稿尺寸
|
||||
|
||||
**多数情况下设计稿分辨率即被投大屏的信号源电脑屏幕的分辨率。**有多个信号源时，就会有多个设计稿，此时每个设计稿的尺寸即对应信号源电脑屏幕的分辨率
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
一般情况下设计稿的分辨率就是电脑的分辨率，**当有多个信号源时，有时会通过显卡自定义电脑屏幕分辨率，从而使电脑显示分辨率不等于其物理分辨率，此时，对应设计稿的分辨率也就变成了设置后的分辨率；**此外，当被投电脑分辨率长宽比与大屏物理长宽比不一致时（单信号源），也会对被投电脑屏幕分辨率做自定义调整，这种情况设计稿分辨率也会发生变化。所以设计开始前**了解物理大屏长宽比很重要。**
|
||||
|
||||
## 5、页面布局、划分
|
||||
|
||||
尺寸确立后，接下来要对设计稿进行布局和页面的划分。这里的划分，主要根据我们之前定好的业务指标进行，核心业务指标安排在中间位置、占较大面积；其余的指标按优先级依次在核心指标周围展开。一般把有关联的指标让其相邻或靠近，把图表类型相近的指标放一起，这样能减少观者认知上的负担并提高信息传递的效率。
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## 6、定义设计风格
|
||||
|
||||
很多小伙伴也许没接触过大屏设计工作，但大多数人都应该有APP或者Web风格定义的经验。我们在定义一款APP或者Web页面设计风格时常用的方法是什么呢？**情绪版！**
|
||||
|
||||
大屏虽酷炫，但实际上也是运行在浏览器里的Web页面，所以大屏设计风格定义方法也同样可以是用情绪版来做，这种方法也是目前比较科学高效的风格定义手段
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
上图提供了情绪版应用的脑图，具体操作细节不做介绍，不太了解的小伙伴可以自己找找资料哈。
|
||||
|
||||
情绪版的一套流程下来，我们定义的风格基本是科学准确的，可以指导我们执行设计。如果是给甲方爸爸做大屏，这个流程也可以让我们提出的方案更有说服力
|
||||
|
||||
## 7、可视化设计
|
||||
|
||||
根据定义好的设计风格与选定的图表类型进行合理的可视化设计。目前来讲大屏可视化主要有指标类信息点和地理类信息点两大可视化数据。指标类信息点可视化效果相对简单易实现，而地理类信息点一般可视化效果酷炫，但是开发相对困难，需要设计师跟开发多沟通的。地理类信息一般具有很强的空间感、丰富的粒子、流光等动效、高精度的模型和材质以及可交互实时演算等特点，所以对于被投电脑、大屏拼接器等硬件设备的性能会有要求，硬件配置不够的情况下可能出现卡顿甚至崩溃的情况，所以这点也是需要提前沟通评估的。
|
||||
|
||||
|
||||
|
||||
## 8、样图沟通确认
|
||||
|
||||
这里的沟通分三个层面：设计师对内沟通、设计师对外沟通、设计师与大屏的“沟通”。
|
||||
|
||||
|
||||
|
||||
样图沟通环节，最初的样图不需要十分精致，我们可以把它理解为一个“低保真”原型，然后通过不断沟通修改，让它逐步完善精致起来，也就是小步快跑，避免那种一下子走到终点，然后又大修大改的情况。
|
||||
|
||||
|
||||
|
||||
因为我们在前几步已经分别确定了页面布局、图表类型、页面风格特点，所以这一步我们需要用尽可能简单的方法 ，把之前几步的成果在页面上快速体现出来，然后根据样图效果尝试确定五方面内容：
|
||||
|
||||
**1、之前确立的布局在放入设计内容后是否依然合适**
|
||||
|
||||
**2、确立的图表类型带入数据后是否仍然客观准确**
|
||||
|
||||
**3、根据关键元素、色彩、结构、质感打造出的页面风格是否基本传达出了预期的氛围和感受**
|
||||
|
||||
**4、已有的样式、数据内容、动效等在开发实现方面是否存在问题**
|
||||
|
||||
**5、大屏是否存在色差、文字内容是否清晰可见、页面是否存在变形拉伸等现象**
|
||||
|
||||
|
||||
|
||||
**跟大屏“沟通”是比较重要也是个特殊的环节**，这也是我觉得大屏设计跟其它设计不一样的地方，大屏有它自己独特的分辨率、屏幕组成、色彩显示以及运行、展示环境，这里的很多问题只有设计稿投到大屏上才能够被发现，所以这一步在样图沟通确认环节非常重要，有时候需要开发出demo，反复测试多次。
|
||||
|
||||
## 9、页面定稿、开发
|
||||
|
||||
事实上页面开发阶段并不是到了这一步才进行，这里说的页面开发仅指前端样式的实现，实际上后台数据准备工作在定义好分析指标后就已经开始进行了，而我们当前的工作是把数据接入到前端，然后用设计的样式呈现出来。
|
||||
|
||||
|
||||
|
||||
**切图与标注**
|
||||
|
||||
由于大屏实际就是一个web页面，所以开发阶段的切图与标注是少不了的。
|
||||
|
||||
**切图：哪些元素需要切图，怎么切？**
|
||||
|
||||
一般开发用代码写不出的样式或动效，都需要设计师切图作支持：比如数据容器的边框、小的动效、页面整体大背景、部分图标等。切图按正常网页设计标准切就可以了。
|
||||
|
||||
**标注**
|
||||
|
||||
Web页面用什么插件做标注这个大家都很熟悉，我就不多说了。需要注意的是，如果大屏页面需要在不同比例的终端展示，那么此时的标注与开发可以使用**rem**作为基本单位来实现，这样实现的大屏页面在后期会有更好的扩展性与适应性。
|
||||
|
||||
## 10、整体细节调优与测试
|
||||
|
||||
这部分是指页面开发完成后，将真实页面投放到大屏进行的测试与优化。这里主要有两部分工作。
|
||||
|
||||
**视觉方面的测试**（有点像APP的UI走查）：关键视觉元素、字体字号、页面动效、图形图表等是否按预期显示、有无变形、错位等情况。
|
||||
|
||||
**性能与数据方面的测试**：图形图表动画是否流畅、数据加载、刷新有无异常；页面长时间展示是否存在奔溃、卡死等情况；后台控制系统能否正常切换前端页面显示。
|
||||
|
||||
|
||||
|
||||
# 四、大屏设计的注意事项
|
||||
|
||||
## 1、字体使用
|
||||
|
||||
字体优先使用系统默认字体，需要嵌入字体时考虑字体的可识别性、与当前设计风格是否融合、是否可免费商用。
|
||||
|
||||
|
||||
|
||||
如果页面是云端部署，需要嵌入字体包时，我们可以使用**FontCreator**这类的软件把那些用不到的字符从字体包中删掉，然后重新打包上传，减小字体包大小，可以优化页面加载体验，避免在替换默认字体的过程中出现页面文字跳动等现象。（一般来讲一套字体文件包含了阿拉伯文、符号、拉丁文、日文、西里尔文、希腊文、拼音、注音符号等多种字符，对于大屏这个明确的场景，我们可以删掉其它使用不到的字符，仅保留中文、拼音和数字）
|
||||
|
||||
|
||||
|
||||
关于字体版权获取相关问题，公众号回复“可视化”获取
|
||||
|
||||
## 2、颜色搭配
|
||||
|
||||
1、**色彩明度与饱和度差异显著**、对比鲜明， 尽量避免使用邻近色配色
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
2、使用深色暗色背景：深色暗色背景可减少拼缝带来的不适感。由于背景面积大，使用暗色背景还能够减少屏幕色差对整体表现的影响；同时暗色背景更能聚焦视觉，也方便突出内容、做出一些流光、粒子等酷炫的效果，
|
||||
|
||||
3、渐变色慎重使用：大屏普遍色域有偏差，显示偏色，因而使用渐变色需要根据大屏反馈确定是否调整，纯色最佳。
|
||||
|
||||
## 3、页面布局
|
||||
|
||||
主次分明、条理清晰、注意留白，合理利用大屏上各小的显示单元，并尽量避免关键数据被拼缝分割
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
# 五、Q&A
|
||||
|
||||
## 1、设计稿投到大屏上显示效果不佳怎么办？
|
||||
|
||||
大屏的分辨率、比例、使用环境、投射方式等均会对设计造成影响。理想情况下，我们应该在设计开始前，就能打开大屏系统做一些简单测试。我们可以从网上收集不同设计师不同风格的大屏设计作品，然后投上去查看实际效果。因为大多数时候大屏都会存在色彩偏差，这时通过测试我们就能发现渐变色、邻近色等不同类型的色彩搭配是否可以在目标大屏上良好呈现，如果不可以，那我们设计进行时就不要使用显示效果不佳的色彩搭配。另一方面，样图沟通环节及时测试也很重要。
|
||||
|
||||
## 2、大屏设计定稿后，切图切几倍图？
|
||||
|
||||
由于是将我们电脑屏幕投射到了大屏，大屏上的内容是运行在我们电脑浏览器上的页面。所以切图根据我们电脑的分辨率，正常切1倍图就可以
|
||||
|
||||
## 3、1920\*1080的设计稿，投到9000\*4320的屏幕上，文字图片会发虚么？
|
||||
|
||||
看情况，视大屏系统硬件规格与观看距离来定。这块有四个概念需要跟大家交流下。
|
||||
|
||||
大屏逻辑分辨率（设计稿尺寸）——显卡输出分辨率——视频矩阵切换器（DVI）支持分辨率——大屏实际物理分辨率。
|
||||
|
||||
一般后两个是没问题的，大屏跟矩阵切换器是由大屏厂商提供，一般刚好配套大屏。容易问题的是显卡输出分辨率，我们电脑屏幕分辨率并不是最终显卡传递到DVI接口的分辨率，传递到DVI接口的分辨率是电脑显卡所能输出的最大分辨率（部分电脑可设置或自定义输出分辨率）。输出分辨率等于DVI支持分辨率时显示效果最佳。输出分辨率低于DVI支持分辨率，DVI会将信号放大后传递到大屏，放大的过程中就有图像信息丢失，虽然此过程中有各种算法支持去保证图像尽可能清晰，但算法再好，跟真实图形还是有差距的。此外，多信号源投射效果优于单个信号源投射。对于现场直播数据大屏，一般至少有两个信号源，一个投屏，另一个也投屏但是处于备用状态。
|
||||
|
||||
离大屏的距离也影响观感，一般离得近，颗粒感明显，距离稍远，会显的较为清晰
|
||||
|
||||
## 4、设计稿完成开发后，发现在大屏上页面有被拉伸或者压缩的情况，怎么补救？
|
||||
|
||||
一般来讲，开发只需要对设计图做还原即可。但特殊情况下，比如显示器扩展不正确导致页面被拉伸或压缩，这时就需做处理：我们可以先得到被拉伸/压缩的比例，然后对整体视图做压缩/拉伸处理，再由其拉伸/压缩，这样被拉伸/压缩的瑕疵就可以得到一定程度上的矫正。另外，了解被投电脑硬件特点，有的电脑可以通过自定义分辨率解决这部分问题。
|
||||
|
||||
## 5、除自行开发可视化大屏外，还可以通过哪些第三方服务来快速实现？
|
||||
|
||||
阿里云DataV、腾讯云图、百度Sugar等
|
||||
|
||||
## 6、数据可视化的图表样式可以在那些地方找到参考？
|
||||
|
||||
图表部分的二个库是我们设计师可以打开浏览产看的，这里面所有的图表样式都是基于代码实现的，可以作为我们设计图表的参考，也可以让开发拿代码去用，或者在这些图表的基础修改
|
||||
|
||||
工具类的需要有一定的代码基础，里面同样有丰富的图表，所以跟开发的沟通也很重要，因为他们可能会了解多一些更新的前沿的图表形式是我们设计师不知道的，所以彼此多沟通交流是在太重要了
|
||||
|
||||
|
||||
212
大屏设计/大屏设计.md
Normal file
212
大屏设计/大屏设计.md
Normal file
@@ -0,0 +1,212 @@
|
||||
# 一、大屏概述
|
||||
|
||||
可视化大屏这几年很流行，这些年我们见过不少的大屏，各种实时监控类大屏、销售情况概览大屏、智慧城市服务平台等。相比于传统报表，超大屏幕展示、酷炫的数据可视化让数据呈现更加美观、直观、快速、易于接收。
|
||||
|
||||
|
||||
|
||||
可视化大屏主要是将数据通过可视化的形式，实时地显示在足够的屏幕上。通过可视化大屏，企业对内可以观察数据的变化、了解业务的发展，及时发现问题、根据问题解决实际业务问题，指导企业做出决策；对外可以提升形象，体现公司实力和品牌形象、提升管理的层次！
|
||||
|
||||
下面我们看几个Demo示例：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
通过以上大屏示例研究分解我们可以发现，可视化大屏主要由背景、标题、指标卡、图形、表格、图标等元素组成，这些元素通过布局有序的组合在一起。
|
||||
|
||||
如下图 企业设备监控中心 是一个包括各种元素的可视化大屏，主要用于企业设备的监控和分析。
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
● 背景：主要是背景图或是背景色。
|
||||
|
||||
● 标题：描述可视化大屏的主题，一般字数最好不要超过10个，要求描述简洁清晰有力。
|
||||
|
||||
● 指标卡：用于显示重点指标数据。
|
||||
|
||||
● 图形：各种类型图形展示。比如对比可以用柱状图、趋势线图、占比饼图等。
|
||||
|
||||
● 表格：表格数据展示。明细汇总的数据都可以，很多情况下是用跑马灯滚动的方式显示。
|
||||
|
||||
# 二、准备工作
|
||||
|
||||
在制作大屏之前，我们应该做好相关的准备工作，主要包括需求的调研、大屏设计、数据准备三类。
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
首先我们对大屏进行需求的调研，这是大屏制作的基础。我们需要约谈客户，确定硬件设备规格、了解客户想要展示的主题指标。需求调研的工作主要包括：确定大屏的硬件设备、主题和指标、显示的维度和类型。具体介绍如下：
|
||||
|
||||
## 1．需求调研
|
||||
|
||||
（1）确定大屏的硬件设施
|
||||
|
||||
大屏展示使用的比较常见的硬件设备有大尺寸液晶显示屏、3＊4小型拼接屏、大型矩阵拼接屏、投影仪显示屏、竖屏显示厅。有些小型拼接屏投屏时，因为分辨率和屏幕不匹配，会出现画面拉宽变形的现象，所以我们需要重点关注显卡支持的分辨率，以便确定大屏资源的尺寸。
|
||||
|
||||
（2）确定大屏主题和指标
|
||||
|
||||
首先确定大屏展示的主题，然后根据主题归纳整理出需要展现并且后台数据支持的关键指标，接着我们根据业务的重视程度对指标进行分级（核心、次要、辅助）。
|
||||
|
||||
（3）确定维度和展示类型
|
||||
|
||||
同一指标可以从不同的维度去分析，因此我们也需要整理出指标相关的重点维度。然后根据维度的类型、图形的特性等方面选择合适的可视化图形类型展示出数据的相关性。可视化图形根据特性分类如下：
|
||||
|
||||
● 比较：进度和目标的比较，可以使用油量表、进度图；项目和项目间的比较，可以用柱图、条形图、雷达图、词云图、树图、热力图；地域间的比较可以用地图。
|
||||
|
||||
● 序列：连续、有序类别的数据波动，如线图、面积图、柱图；各阶段递减过程，如漏斗图。
|
||||
|
||||
● 构成：占比构成，如饼图；多类部分到整体，如堆积图。各成分分布构成，如瀑布图。
|
||||
|
||||
● 描述：关键指标、数据分组差异、数据分散、数据相关性、人物或事物之间关系，如关系图。
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## 2．大屏设计
|
||||
|
||||
（1） 整体风格设计
|
||||
|
||||
从显示风格上来讲，可视化大屏有科技感、商务感、工业感、政务感、简洁感、清新感等。大家在做大屏前可以先了解所在行业的常用主流风格，可以找设计师设计。当然你也可以到我们体验中心查看一些模板，若是喜欢可以直接安装到个人空间进行使用。
|
||||
|
||||
（2）确定大屏的显示布局
|
||||
|
||||
排版布局的重要指导原则是突出重要信息，保证重要优先级高的指标信息的有效传递。因此我们可以根据之前定好的指标级别进行排版，核心信息安排在较中间位置、占较大面积；次要信息放在两侧或是上下靠边的位置，占较小面积；辅助或是衍生信息通过交互手段获取，比如钻取、跳转、轮播等。
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
（3）设计背景图（背景色）、图表配色等
|
||||
|
||||
确定好整体风格后，我们需要设计好背景图或是背景色，大屏的背景一般都是深色色调，可以增加一些亮光、亮线用来突出质感，但是注意不要太花哨，以防喧宾夺主。
|
||||
|
||||
在图表配色中我们需要注意色彩数量不能大多，一般是有一个整体色调，然后关键信息通过对比色突出提亮。
|
||||
|
||||
在配色中尤其要注意的是，同一个大屏中的图表如标签、标题、图例、提示等最好统一配色。
|
||||
|
||||
（4）设计动态效果和交互效果
|
||||
|
||||
为了更好的显示酷炫效果，我们可以设计增加动态效果或是交互效果。如增加3D动态效果、轮播效果、滚动、交互效果（比较常见的地图下钻）、刷新效果、页面初始化的效果、图形缩放等。
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
（5）准备好图标等小元素
|
||||
|
||||
将大屏中用到的小图标元素都准备好。
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## 3．数据准备
|
||||
|
||||
（1）确保数据质量
|
||||
|
||||
好的大屏展现必须有好的数据支撑。我们要了解后台数据对关键指标的支撑情况，综合考虑数据量、数据计算、数据周期更新等对指标显示的影响，通过ETL、数据抽取等方式处理数据，尽量确保指标数据展示的质量。
|
||||
|
||||
（2）进行数据源连接
|
||||
|
||||
客户的数据一般存储在业务库中，Smartbi产品可从各种数据产品获得数据资源，并支持随着客户数据的变化而持续更新。
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
（3）创建数据集
|
||||
|
||||
数据集是构建图表的基础，我们根据需要展现的内容，进行数据的准备工作。多种形式的公共数据集是不可缺少的数据资源补充，针对不同的用户群体推荐使用不同的数据集，尤其是公共数据集可以关联计划任务把数据提前抽取到高速缓存，实现“数据集市”的数据落地加速！
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
此外，即席查询和透视分析也可以作为数据集使用，它们支持提供自助化的数据查询操作界面，最大的特点就是业务用户通过简单的鼠标操作，完成自助式的数据查询和条件筛选。
|
||||
|
||||
# 三、实现步骤
|
||||
|
||||
完成准备工作后，下面我们主要从整体、部分、细节、动态四个方面来说明通过电子表格如何来实现一个可视化大屏。
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## 1．整体设置
|
||||
|
||||
首先，我们登录电子表格设计器，插入背景图。
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
页面设置可以选择电脑自适应，这样可以适配多种像素屏幕；如果不完全适配时，可以用背景色填充屏幕。
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## 2．部分设置
|
||||
|
||||
在这里，我们使用已经规划好的大屏内容和准备好的数据，分别进行主标题、各图形标题、动态KPI指标、图表制作等。
|
||||
|
||||
注意模板和数据分开，拖拽数据字段到单独的sheet页面中，可以更好的进行维护更新操作。
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
创建好的图形可以随意拖拽调整位置和大小，放置到规划好的位置中。
|
||||
|
||||
表格可以使用Excel照相机功能复制到模板中，可以自由调整位置和大小。
|
||||
|
||||
## 3．细节美化
|
||||
|
||||
接着，我们对标题的颜色、字体、大小，图表的系列、标签、坐标轴等细节进行进一步的调整和美化。
|
||||
|
||||
前面我们提及到同一个大屏中的图表如标签、标题、图例、提示等最好统一配色。而Smartbi自带内置主题，支持用户预自定义主题，在报表定制时，可以一键应用这些主题，将报表设计人员从繁琐的图形设计工作中解放出来，提高工作效率的同时，也能满足设计效果需求。
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## 4．动态效果
|
||||
|
||||
为了大屏更好的展示，我们可以设计增加动态效果或是交互效果。
|
||||
|
||||
通过URL链接可以嵌入视频等外部资源，通过Tab页控件、轮播控件、图形扩展属性等可以实现轮播、Tab页切换、图形缩放等动态效果。
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
通过单元格传值、跳转规则向导实现下钻、联动、跳转等交互效果。
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
大屏的制作完成后，我们就可以进行调试了，达到客户满意就可以上线了！
|
||||
|
||||
|
||||
本文示例在Smartbi体验中心中都可以查找到，还可以安装这些应用到个人空间进行使用，有兴趣的小伙伴可以到Smartbi官网浏览安装！
|
||||
21
大屏设计/智慧城市数据可视化大屏设计.md
Normal file
21
大屏设计/智慧城市数据可视化大屏设计.md
Normal file
@@ -0,0 +1,21 @@
|
||||
- 微信公众号：BYMD：[智慧城市数据可视化大屏设计](https://mp.weixin.qq.com/s/MZsPUty8Xv9xDJkig6UChQ)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user