一、基础概念

1、什么是数据可视化

把相对复杂、抽象的数据通过可视的方式以人们更易理解的形式展示出来的一系列手段叫做数据可视化，数据可视化是为了更形象地表达数据内在的信息和规律，促进数据信息的传播和应用。

在当前新技术支持下，数据可视化除了“可视”，还可有可交流、可互动的特点。数据可视化的本质是数据空间到图形空间的映射，是抽象数据的具象表达。

数据可视化作品《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、数据可视化的图表样式可以在那些地方找到参考？

图表部分的二个库是我们设计师可以打开浏览产看的，这里面所有的图表样式都是基于代码实现的，可以作为我们设计图表的参考，也可以让开发拿代码去用，或者在这些图表的基础修改

工具类的需要有一定的代码基础，里面同样有丰富的图表，所以跟开发的沟通也很重要，因为他们可能会了解多一些更新的前沿的图表形式是我们设计师不知道的，所以彼此多沟通交流是在太重要了

总结

数据可视化是一门庞大系统的科学，本文所有讨论仅针对大屏数据可视化这一特定领域，管中窥豹，如有遗漏或不足之处欢迎大家讨论交流

原文地址：UX设计诗  （公众号）

作者：UXBoy

转载请注明：学UI网》大屏数据可视化设计指南

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

相信许多同学对与“FUI”并不陌生，可能一提到这个词大家首先想到就是漫威和 DC 科幻电影中主角的操作场景，例如漫威电影中钢铁侠的操作界面：

图片源自 HUDS+GUIS

由于大家长期受到科幻电影影响，一度认为 FUI 即为“科幻界面设计”，这个定义真的是正确的么？大家可以短暂思考一下，带着疑问继续阅读下面对 FUI 的定义，看是否和你想的一样。

A.定义

为了让大家更好的理解 “FUI” 的定义，我们将 “FUI” 这个词拆开分别进行简单解释。在 FUI 中：

“U”代表用户（User）

“I”代表界面（Interface）

“F”代表虚构的（Fiction）、未来的（Future）、幻想的（Fantasy）。

简单点来讲 FUI 就是：虚构的、未来的、幻想的用户界面。

相信读到这里大家已经对 FUI 有了初步的认识，“科幻界面”只是 FUI 中的分支，并不能完全解释 FUI 。对与“虚构、未来、幻想”三个词我们再做进一步分析解构：

a.虚构的

FUI 的专业术语是“虚构用户界面”，其中包含各种“虚构”的用户界面，即不真实，只是大胆的设想。例如人们大胆的设想宇宙飞船的界面设计，或者可穿戴的智能设备界面。

图片源自 Behance

b.未来的

我们再回忆我们看过的科幻电影，在电影中它通常作为故事的一部分而创建。故事可以在不同的时间段进行设定，例如将来、当前或者过去。所以我们并不将 FUI 限制在“未来”用户界面，它的时间线是相对的。不同时代的人们对于科幻电影的理解不一样，所以大家对于未来的定义也有所不同，例如早年的《星球大战》系列电影和《环太平洋》系列电影都属于科幻电影，但存在的时间线却有所不同，其中的界面设计风格也会因有所不同。

图片源自 HUDS+GUIS

c.幻想的

关于“幻想”的用户界面，人们脑袋可能首先闪过一些夸张虚幻、为人耸听的画面。就像《神奇博士》中的神奇博士进入多玛姆的世界当中一样。

图片源自百度

“幻想”这个词经常被用来描述哪些远离现实的事情，这些事情难以被实现。百度百科中对幻想的解释是“虚而不实的思想；没有道理的想象；无根据的看法或信念；以理想或愿望为依据，对还没有实现的事物有所象。”

关于“幻想”的用户界面也可以包括基于现实和真实技术的用户界面，因为人们在基于现实的基础幻想也属于幻想的范畴之内。例如宝马的概念设计中，我们依然能看到现代的汽车设计的雏形，但也突破了现有的汽车设计状态。

图片源自 HUDS+GUIS

相信到这里大家已经对 FUI 的定义有一个较为清晰的概念，FUI 是虚构的、未来的、幻想的用户界面设计，即进行大胆的假设虚构用户界面，且并不受时间的限制的，远离现实的幻想用户界面。

2.FUI的优势

相对于大众接受度更好的扁平化，数据可视化设计却对 FUI 的设计风格情有独钟，在笔者所接触得到的数据可视化的设计中，无论是实际的工作项目还是一些概念稿的设计都频繁用到 FUI 的设计风格。到底是什么原因让市场对 FUI 接受程度如此之高呢？接下来我们从心理学、视觉、思维以及硬件几个角度作为切入点来进行分析。

A.物以希为贵

罗马人说：“物以希为贵。”因为在平时生活中极为罕见，则显得十分珍贵。例如大家平时的在玩游戏的时候，游戏中“限定”的虚拟商品总是能够比其它虚拟商品更加吸引玩家去购买，因为“限定”预示珍贵、与众不同，即使价格高一点，玩家也能够接受。例如最近王者荣耀中的新年限定皮肤，因为是“限定”，所以总是不断的勾引用户的钱包。

图片源自 王者荣耀

同样 FUI 的设计风格在整个设计行业属于一个小众的形式，我们在日常生活中难以接触到，毕竟我们的日常生活中不可能出现宇宙飞船或者炫酷的机架。面对当今扁平化设计的主流趋势，FUI 的设计风格会让用户耳目一新，接受程度会更高一些。例如在商品的展示中，同样是 New Balance 的鞋子，你那种形式的展示会让顾客更加愿意买单？

B.视觉优势

相对于当前流行的扁平化设计，FUI 可谓是在 UI 设计中独树一帜，设计风格十分鲜明，极具未来感和科技感。

作为主流趋势的扁平化设计，无论是 Material Design 还是 iOS 都以深入人心，人们对扁平化的设计风格习以为常，已经很难在数据可视化的设计中进行视觉创新，而 FUI 的设计风格可以说是在数据可视化的设计中极具视觉优势。

FUI 区别于我们平时所接触的扁平化的设计，在视觉层面我们主要以色彩和图形两个方面进行分析。

色彩

a.背景

在背景的处理上常以深色的背景营造来营造强烈空间感，让用户感觉自己处在一个三维的空间当中，例如下图，我们能够感受到强烈的空间感，数据仪表盘处于一个具有纵深感的三维世界当中，视觉中心的数据显示器与背景形成了鲜明的对比。

图片源自 HUDS+GUIS

b.配色简洁

在颜色的选择上，借鉴了军事设备中的配色准则，在残酷的战争中“快速、准确、直接”是最重要的，所以在军事设备上多以单一的冷色调为主，尽量避免多种色彩的使用，这样对于操作者而言更加简单。所以 FUI 的配色设计大多以冷色调为主，对比色通常作为辅助色用以反馈重要信息，例如在 007系列电影中的界面都是使用对比色反馈重要信息，如下图中的坐标信息都使用了红色作为突出重要信息的设计手段。

图片源自 HUDS+GUIS

当然也有大量使用同类色的情况，例如 Sid Meier 中的飞船状态页面，着重表示当前的飞船的状态，这样在发生异常的状况下可以立马发现。

图片源自 HUDS+GUIS

c.对比强烈

FUI 中的配色对比强烈，首先因为背景多以深色为主，强烈的对比能够有效的拉开页面中的空间感，例如钢铁侠中的史塔克战役中头盔的界面。

图片源自 HUDS+GUIS

其次强烈的对比能够突出核心信息，更好的进行信息反馈。例如下图，强烈的对比能让我们一眼就能看到核心信息，以及当前的状态反馈

图片源自 HUDS+GUIS

图形

FUI 的图形装饰元素可以说是极其丰富，形式感很强。在设计的细节当中使用大量的“异形”的图形元素，并辅以一定的装饰元素。例如下图：

图片来自于 Grey Goo

a.军事风格

FUI 的设计大量借鉴了军事风格，其中也大量借鉴军事操控的平台的界面图形设计，这里借鉴军事风格的原因很简单，因为在众多的科幻、动作的故事题材中都是以军队或者其他超级团队来去对抗恶势力或者外星人入侵者，在界面设计上自然要延续其中军事风格。

图片源自Behance

细节上例如战斗机上的 HUD 瞄准界面中的图形多次被引用到飞船的操作界面上等等。

图片源自 HUDS+GUIS

b.机甲元素的运用

大量异形元素的机架风格源于对机甲设计的灵感，并且在细节上使用大量的装饰元素。

在细节上例如边框和环形图的设计，相对于扁平化的设计，FUI 的设计风格显然更具视觉冲击力。

图片源自 HUDS+GUIS

C.突破思维限制

FUI 是一个非常有趣的 UI 设计领域，是我们在日常现实生活之中无法探索的用户界面设计方式。在我们的日常工作中，通常普通设计师很难有机会为宇宙飞船、时间旅行设备，或者感知型人工智能和外星人使用的用户界面做设计。

图片源自 HUDS+GUIS

FUI 使设计师有机会去突破现有的用户体验和用户界面的限制，探索一个新的领域。通过虚幻界面设计，我们可以大胆的设想以及寻找新的解决方案。例如我们可以大胆的设想 AR 技术的应用，地图可以采用全息投影技术、人与智能硬件的环境交互等等。

虚幻界面设计甚至可以是新的发明，它们可以作为一种概念的验证，它们可以启发我们，提出问题，探索什么可行，什么不可行。正如科幻小说可以激励人们登上月球或建造自动驾驶汽车一样。虚幻用户界面可以激励人们为未来创造技术。

D.硬件载体

在我们之前提到影视故事中设定的使用场景多为宇宙飞船的指挥舱或者驾驶舱、可穿戴式AR设备等等，但在现实生活现在多以配备“大屏”的指挥厅为主，相对于我们平时使用的移动设备和 PC 台式机，大屏的物理渲染尺寸更大，在比例上的差异也更大。如下图：

由于硬件设施的变更，扁平化的设计无法满足用户的需求，主要原因有：扁平化设计力求干净整洁，而在大屏中物理渲染尺寸的变大会显得画面格外空和呆板；其次是缺乏细节。而 FUI 的设计风格设计细节丰富，恰好可以补充其细节缺失的问题。

3.总结

数据可视化设计选择 FUI 的设计风格有着必然的原因，首先是 FUI 的设计风格属于一个小众的设计风格，在这个扁平化当道的时代更容易吸引用户的目光，接受程度高；其次是视觉冲击力强，设计细节丰富，军事风格和机甲风格的图形在视觉上更加新颖；再者是“大屏”作为视觉载体，物理渲染尺寸比例的变更使得扁平化设计在大屏上显得画面不饱满，缺乏细节，而 FUI 则恰好能够补充这些空白；最后 FUI 可以帮助我们突破思维限制，寻求更好的解决方案。

借鉴参考：

《FUI-How-to-design-User-Interfaces-for-Film-and-Games》

图片来源：

https://www.hudsandguis.com

https://scifiinterfaces.com

原文地址：海盐社（公众号）

作者： 姜正

转载请注明：学UI网》数据可视化为什么偏爱FUI

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

原则

数据可视化是一种用图形形式来描述密集和复杂信息的通讯方式。由此产生的视觉视觉效果使得数据比较和用数据讲来故事都变得更加容易——这两种方法都有助于用户做出决策。

数据可视化可以表示不同类型和大小的数据：从少量数据点到大型多元数据集都可以表示。

类型

数据可视化可以用不同的形式来传达。图表是一种常用的数据传达方法，因为它们不仅描述了不同的数据类型，还能进行数据比较。

图表类型的使用主要取决于两个方面：想要传达的数据，以及想要传达的数据有关的内容。以下指南提供并描述了各种不同类型的图表及其用例。

图表类型

随时间变化

随时间变化的图表显示一段时间内的数据，如多个类别的变化趋势及其对比。

使用情况包括：

1. 股票价格表现
2. 健康统计
3. 年度报表

随时间变化的图表包括

1. 折线图
2. 柱状图
3. 堆积柱状图
4. 烛台图
5. 面积图
6. 时间轴
7. 地平线图
8. 瀑布流图

类别比较

类别比较图比较多个不同类别之间的数据。

使用情况包括：

1. 不同国家间的收入对比
2. 热门场次对比
3. 团队分配

类别比较图包括：

1. 柱状图
2. 分组柱状图
3. 气泡图
4. 平行线图
5. 多条折线图
6. 子弹图

排序

排序图表示一个项目在有序列表中的位置。

使用情况包括：

1. 选举结果
2. 表现统计

排序图包括：

1. 排序条形图
2. 排序柱状图
3. 平行线图

部分-整体

部分-整体图表示部分元素是如何加总为整体的。

使用情况包括：

1. 产品类别综合收益
2. 预算

部分-整体图包括：

1. 堆积柱状图
2. 饼状图
3. 堆积面积图
4. 矩阵树图
5. 太阳辐射图

相关

相关图展示两个或多个变量之间的相关性。

使用情况包括：

1. 收入和预期寿命

相关图包括：

1. 散点图
2. 气泡图
3. 柱状和折线图
4. 热力图

分布

分布图展示每个值在数据集中出现的频率。

使用情况有：

1. 人口分布
2. 收入分布

分布图包括：

1. 直方图
2. 线箱图
3. 小提琴图
4. 密度图

流

流图显示数据在多种状态之间的流动。

使用情况包括：

1. 资金转移
2. 投票统计和选举结果

流图包括：

1. 桑基图
2. 甘特图
3. 和弦图
4. 网状图

关系

关系图显示多个项目之间是如何彼此关联的。

使用情况有：

1. 社交网络
2. 文字图

关系图包括：

1. 网状图
2. 维恩图（或译Venn图、文氏图、韦恩图、范氏图）
3. 和弦图
4. 太阳辐射图

选择图表

许多类型的图表都可以用于描述数据。下面的指导方针提供了如何选择图表的见解。

显示随时间产生的变化

随时间产生的变化可以用时间序列图来表示，这是一种按照时间顺序来表示数据点的图表。

可以表示随时间变化的图表包括：折线图、条形图和面积图。

*基线值是指y轴上的起始值。

条形图和饼状图

条形图和饼状图都可以用于显示比例，表示部分值与整体值之间的比较。

1. 条形图使用一条共同的基线，通过条柱的长度表达数量
2. 饼状图使用圆内的圆弧或圆角表示整体的一部分

条形图、折线图和堆积面积图比饼状图更能够表达随时间产生的变化。因为这三种类型的图表中，可能的值共享同一条基线，所以比基于条柱长度的条形图更容易比较值之间的差异。

面积图

面积图有多种类型，包括堆积面积图和重叠面积图：

1. 堆积面积图表示（在同一时间段内）多个时间序列堆积在一起
2. 重叠面积图表示（在同一时间段内）多个时间序列重叠在一起

重叠面积图中不建议包含两个以上的时间序列，以免模糊数据。相反，可以使用堆积面积图在一个时间间隔内比较多个值（横轴表示时间）。

样式

数据可视化使用自定义的样式和形状，以适应用户需求和上下文的方式使得数据一目了然。

下列有益于图表自定义：

1. 图形元素
2. 排版
3. 图标
4. 轴和标签
5. 说明和注释

设置不同类型数据的样式

视觉编码是将数据转换成视觉形式的过程。独特的图形属性可以应用于定量数据（如温度，价格或速度）和定性数据（如类别，风味和表达式）。

这些图形属性包括：

1. 形状
2. 颜色
3. 尺寸
4. 面积
5. 体积（容积/量）
6. 长度
7. 角度
8. 位置
9. 方向
10. 密度

表达不同属性

多种视觉处理方式可以应用于数据点的多个方面。例如，条柱的色彩可以表示一个类别，与此同时条柱的长度可以表示一个值（如人口大小）。

形状可以用来表示定性数据。在该图表中，每个类别由一种特定形状代替（圆形，方形和三角形），这使得比较特定范围内的数据或与其他类别数据进行比较都很容易。

形状

图表可以通过形状来以多种不同的方式表达数据。形状可以被设计为一条有趣的曲线，或一个精确的高保真图形，以及介于二者之间的其他方式。

形状的精确程度

图表可以以不同的精度来表示数据。用于深入研究的数据应该（根据触摸目标的尺寸和相关可视化要求）使用适合交互的形状来表示。而用于表达大致想法或趋势的数据可以使用细节较少的形状。

颜色

颜色有四种主要的区分数据的方式：

1. 区分不同的类别
2. 表示数量
3. 突出特定数据
4. 表达意义

颜色区分类别

在环形图中颜色被用于定义类别。

颜色表示数量

在地图中颜色被用于表示数据值。

颜色突出数据

在散点图中颜色被用于突出特殊数据。

焦点区域

当颜色被少量使用时，它可以突出焦点区域。不建议使用大量的高光颜色，因为它们会分散用户的注意力。

颜色表示意义

无障碍

为了适应无法区别色彩差异的用户，可以使用其他的方法来强调数据，例如高对比度着色、形状或纹理。

将文本标签应用于数据也有助于澄清其含义，同时消除了对说明的需要。

线条

图表中的线条可以传达数据的质量，例如层次结构、突出强调和对比。线条的样式可以采用不同方式，如使用虚线或不同的不透明度。

线条可以应用于特定的元素中，包括：

1. 注释
2. 预测元素
3. 比较工具
4. 置信区间
5. 异常

排版

文本可以用于标记不同的图表元素，包括：

1. 图表标题
2. 数据标签
3. 轴标签
4. 说明

层次结构中级别最高的文本通常是图表标题，最低的是轴标签和说明。

文本粗细

标题和不同的字体粗细在层次结构中可以传达哪些内容比另一些更重要（或更不重要）。然而这种处理方式应该有节制地使用，即采用数量有限的字体样式。

图标

图标可以表示图表中不同类型的数据，以提高图表的整体可用性。

图标可以被用于：

1. 分类数据，以区分组或类别
2. UI控件及操作，如筛选，缩放，保存和下载
3. 状态，例如错误状态，无数据状态，完成状态和危险状态

当在图表中使用图标时，建议使用普遍可识别的图标，尤其是在表示操作或状态时，例如：保存，下载，完成，错误和危险。

在传达意义时图标补充了颜色的意义。

有标记的轴

有标记的轴或多个轴能够指示数据所展示的规模或范围。例如，折线图展示的是沿水平和竖直方向标记的轴的范围内的值。

条形图基线

条形图应该从基线（y轴上的起始值）上的0开始。从不为0的基线开始可能会导致数据被错误地感知。

轴标签

标签的使用应该反映图表中最重要的数据细节。轴的标签应该根据需要，并在用户界面中以一致的方式使用。它们的存在不应该妨碍图表的阅读。

文本方向

在图表中文本标签应该按水平方向放置，以保证其易于阅读。

文本标签不应该：

1. 被旋转
2. 垂直堆叠

说明和注释

说明和注释描述图表的信息。注释应该突出显示数据点、数据异常值和任何值得注意的内容。

1. 注释
2. 说明

在桌面设备上，建议在图表下方放置说明。而在移动设备中，建议将说明放置在图表上方，以便在交互过程中保持说明可见。

标签和说明

在简单的图表中，图表元素可以被直接标记。但是，密集的图表（或较大图表组中的部分）可以在说明中显示标签。

小型显示器

在可穿戴设备（或其他小型显示屏）上显示的图表应该是桌面端或移动端图表的简化版。

行为

图表为用户提供了可以控制所展示数据的交互模式。这些模式让用户关注图表中的特定值或特定范围。

以下推荐的交互模式、样式和效果（如触觉反馈）可以提高用户对图表数据的理解：

1. 逐级展开 提供了一种清晰的途径来揭示细节，可按需展示。
2. 直接操作允许用户直接对UI元素进行操作，以减少屏幕上所需的操作步数，直接操作包括：缩放和平移，分页，数据控件。
3. 改变透视图可以使一项设计服务于不同的用户和数据类型，例如数据控件和移动。

逐级展开

使用逐级展开的方式显示图表细节，能够允许用户根据需要查看特定的数据点。

缩放和平移

缩放和平移是图表中流行的交互方式，它们影响用户研究数据和探索图表UI的密切程度。

缩放

缩放改变了UI显示的距离。而设备类型则决定缩放的执行方式。

1. 在桌面端，通过点击并拖动或滚动的方式实现缩放
2. 在移动端，使用双指捏放的手势来实现缩放

当缩放不是主要操作时，（在桌面端）可以通过单击并拖动或（在移动端）通过双击来实现相同效果。

平移

平移能够让用户探索超出屏幕之外的UI。应该以对显示数据有意义的方式对其进行约束。例如，如果一张图表的一个维度比另一个维度更重要，那么平移的方向可以仅限于更重要的维度方向上。

平移操作通常与缩放配合使用。

在移动端，通常通过手势进行平移，例如单指滑动。

分页

在移动端上，分页是一种常见的模式，允许用户通过左右滑动查看上一张或下一张图表。

在移动端，用户可以向右滑动查看前一天的内容。

数据控件

可以使用切换控件、选项卡和下拉列表筛选或更改数据。

当用户调整控件时，这些控件也可以显示度量。

切换控件、选项卡和下拉列表意味着可以筛选或更改数据。

动效

动效可以加强并巩固数据间的关系以及用户和数据的交互方式。动效应该有目的地（而不是装饰性地）被使用，以表达不同状态和空间之间的关系。

动效应该合乎逻辑，平稳且能够快速响应，不妨碍用户的体验旅程。

在这一案例中，数据的动效设置在切换按天显示和按周显示的时候。在切换的过程中不显示所选日期范围之外的数据，从而降低了图表复杂性。

此处的动效显示了两张不同图表之间的联系。

空状态

空白的图片和表格可以显示一些表明在数据可用时期望发生的内容。

在适用的情况下，角色动画能够带来愉悦感和激励。

角色动画丰富了空白图片。

仪表盘

数据可视化可以在一系列的多个图表中展现，这在UI中被称为仪表盘。多个单独的图表有时比一个复杂的图表能够更好地传达一个故事。

仪表盘设计

仪表盘的目的应反映在其布局、样式和交互模式中。仪表盘的设计应该适应它的使用方式，无论它是一个演示工具还是一个深入研究数据的工具。

一个仪表盘应该：

1. （通过布局）优先考虑最重要的信息
2. 显示根据层次结构（使用颜色、位置、大小和视觉权重）排序的信息焦点

应该根据数据提出的问题对信息进行优先级排序。在本案例所示的操作仪表盘中，考虑了以下的用户问题：

1. 需要被注意的问题
2. 问题发生的时间
3. 问题发生的位置
4. 受问题影响的其他变量

分析型仪表盘

分析型仪表盘能够让用户探索多个数据集并发现趋势。通常这些仪表盘包括复杂的图表，这些图表能够发现数据细节。

使用情况包括：

1. 强调随时间变化的趋势
2. 回答“为什么”和“如果……怎样”的问题
3. 预测
4. 创建深入的报告

分析型仪表盘的案例有：

1. 跟踪随时间变化的广告活动表现
2. 跟踪产品在整个生命周期中的销售和收益
3. 显示城市人口随时间改变的趋势
4. 跟踪随时间变化的气候数据

操作型仪表盘

操作型仪表板旨在回答一组预定义的问题。它们通常用于完成与监视相关的任务。

在大多数情况下，这种类型的仪表盘会把当前信息安排在一组简单的图表中。

使用情况包括：

1. 根据目标跟踪当前进度
2. 实时跟踪系统表现

操作型仪表盘的案例有：

1. 跟踪呼叫中心活动，如呼叫量、等待时间、呼叫长度或呼叫类型
2. 监视云端应用程序的运行情况
3. 显示股票市场表现
4. 监视赛车的遥测数据

演示型仪表盘

演示型仪表板提供了关于感兴趣主题的详细快照。

这些仪表板通常包括一些小图表或记分卡，通过动态标题来解释每个支持图表中提供的趋势和见解。

使用情况包括：

1. 提供关键绩效的指标概述
2. 创建高级执行摘要

展示型仪表盘的案例有：

1. 提供投资帐户表现的概述
2. 提供产品销售和市场份额数据摘要

原文地址：Material Design

译者：杜雅黎

 转载请注明：学UI网》Material Design Data Visualization 数据可视化

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

Jorge Rey的化石燃料Dataviz

02. 它是如何工作的？

如果我们能看到它，我们的大脑就可以内在化并对其进行反思。这就是为什么理解图表和查看趋势比阅读大量的文档要花费大量时间和精力进行合理化更容易和有效的原因。我们不想重复人类是视觉生物的陈词滥调，但这是事实，可视化更加有效和全面。

在某种程度上，我们可以说数据Viz是讲故事的一种形式，目的是帮助我们根据数据做出决策。这些数据可能包括：

• 追踪销售
• 识别趋势
• 识别变化
• 监控目标
• 监测结果
• 合并数据

秘密7 –塞尔吉奥·费尔南德斯（Sergio Fernandez）提出离婚可视化的理由

03. 什么时候使用？

数据可视化对于每天处理大量数据的公司很有用。必须立即显示您的数据和趋势。胜过浏览庞大的电子表格。当趋势立即脱颖而出时，这也可以帮助您的客户或观看者理解它们，而不会迷失在混乱的数字中。

话虽如此，Data Viz适用于：

• 年度报告
• 简报
• 社交媒体微叙事
• 信息手册
• 研究
• 趋势贩运
• SciViz
• 烛台图，用于财务分析
• 确定路线

可以看到数据可视化的常见情况是在销售和营销，医疗保健，科学，金融，政治和物流中。

娜塔莉·祖伊娃（Natalie Zuieva）的租金和薪金统计信息图

04. 为什么要使用它？

简短的答案：决策。数据可视化具有快速识别模式和解释数据的不可否认的好处。更具体地说，它是确定以下情况的宝贵工具。

• 识别变量关系之间的相关性。
• 获得有关受众行为的市场见解。
• 确定价值与风险指标。
• 随时间监视趋势。
• 通过频率检查速率和潜力。
• 应对变化的能力。

太空垃圾-BBC科学焦点，作者：Federica Fragapane

05. 数据可视化类型

您可能已经猜到了，Data Viz不仅仅是简单的饼图和图形，而且还具有视觉吸引力。该分支用于可视化统计信息的方法包括一系列有效类型。

地图

地图可视化是一种很好的方法，可以分析和显示与地理位置相关的信息，并通过地图准确地将其呈现出来。这种直观的方法旨在按区域分布数据。由于地图可以是2D或3D（静态或动态），因此可以使用多种组合来创建Data Viz地图。

COVID-19支出数据可视化POGO，George Railean

但是，最常见的是：

• 区域地图：显示国家，城市或地区的经典地图。对于每个区域中的不同特征，它们通常以不同的颜色表示数据。
• 线图：它们通常包含空间和时间，由于对特定场景进行了分析，因此通常是路线选择的理想选择，尤其是该地区的驾车或出租车路线。
• 点地图：这些地图分发地理信息的数据。它们是企业确定区域中建筑物确切位置的理想选择。
• 热图：它们根据特定属性指示地理区域的权重。例如，热图可以按区域分布感染者的饱和度。

图表

图表以图形，图表和表格的形式显示数据。由于图形确实是图表的子类别，因此它们经常与图形混淆。但是，两者之间的差别很小：图形显示数据组之间的数学关系，并且仅是表示数据的统计图方法之一。

图表数据可视化，作者：Madeline VanRemmen

顺便说一句，让我们谈谈数据可视化中最基本的图表类型。

条状图

他们使用一系列的条形图来说明数据。它们是较轻量数据的理想选择，并遵循不超过三个变量的趋势，否则，条形变得混乱且难以理解。

饼状图

这些熟悉的圆形图按部分划分数据。切片越大，部分越大。它们非常适合描述整体的各个部分，它们的总和必须始终为100％。当您需要显示一段时间内的数据发展或缺少任何部分的价值时，请避免使用饼图。甜甜圈图与饼图具有相同的用途。

线形图

他们使用一条线或多条线来显示随着时间的发展。它允许同时跟踪多个变量。一个很好的例子是跟踪品牌多年来的产品销售情况。面积图与折线图具有相同的用途。

散点图

这些图表使您可以通过数据可视化查看模式。它们有两个不同值的x轴和y轴。例如，如果您的x轴包含有关汽车价格的信息，而y轴包含有关薪水的信息，则正向或负向关系将告诉您某人的汽车所反映的薪水。

表格

与我们刚刚讨论过的图表不同，表格几乎以原始格式显示数据。当您的数据难以以视觉方式呈现，并且旨在显示应该阅读而不是可视化的特定数值数据时，它们是理想的选择。

数据可视化| Aishwarya Anand Singh的养蜂与否

例如，图表非常适合显示特定区域内一段时间内特定疾病的数据，但是当您还需要了解具体原因（例如原因，结果，复发，治疗时间和治疗方法）时，最好使用表格。

06. 数据可视化与信息图表

5个主要差异

它们并没有什么不同，因为它们在视觉上都代表数据。通常，您搜索信息图表并找到标题为“数据可视化”的图像，反之亦然。但是，在许多情况下，这些标题都不会引起误解。这是为什么？

1. 数据可视化仅由一个元素组成。它可以是地图，图表或表格。另一方面，信息图表通常包含多个Data Viz元素。
2. 与可能简单或极其复杂且繁重的数据可视化不同，信息图表简单易行，并且面向更广泛的受众。即使对于信息图表代表的研究领域之外的人，后者通常也是可以理解的。
3. 有趣的是，数据Viz不提供叙述和结论，而是提供这些叙述和结论的工具和基础。虽然信息图表在大多数情况下提供了故事和叙述。例如，数据可视化地图的标题可能是“按区域划分的空气污染饱和度”，而带有相同数据的信息图则显示为“ A区和B区在C国污染最严重”。
4. 数据可视化可以在Excel中进行，也可以使用其他自动生成设计的工具，除非将其设置为演示或发布。但是，信息图表的美学非常重要，其设计必须吸引更广泛的受众。
5. 在交互方面，数据可视化通常提供交互式图表，尤其是在线形式的图表。另一方面，信息图表很少互动，通常是静态图像。

Skype通过可视化.com进行可视化

07. 如何创建有效的数据可视化？

5种有用的技巧

该过程自然类似于创建信息图表，并且围绕了解您的数据和受众。更准确地说，这些是准备有效的数据可视化以使您的查看者立即了解的主要步骤和最佳实践。

1.做功课

准备工作已经完成了一半。在甚至开始可视化数据之前，必须确保您了解该数据的最后细节。

不可否认的是，了解您的数据查看对象是另一个重要部分，因为不同的人对信息的处理方式不同。您要为数据可视化的对象是谁？他们如何处理视觉数据？只需给他们一张饼图就足够了，否则您将需要更深入的可视化报告？

您正在可视化什么样的信息，它能反映出您的目标吗？

最后，考虑要使用多少数据并加以考虑。

图片来自Brodie Vissers

2.选择正确的图表类型

在上一节中，我们列出了可在数据可视化中使用的基本图表类型。要确定最适合您工作的人，需要考虑的因素很少。

• 图表中将有多少个变量？
• 您将为每个变量放置几项？
• 值之间的关系是什么（时间段，比较，分布等）

话虽如此，如果您需要展示整个项目的各个部分，那么饼图将是理想的选择。例如，您可以使用它来展示特定产品的市场份额的百分比。但是，饼图不适用于时间范围内的分布，比较和跟踪趋势。在这些情况下，条形图，散点图，s和折线图更为有效。

另一个示例是如何在图表中使用时间。使用水平轴会更准确，因为时间应该从左到右。它在视觉上更直观。

Oberhaeuser的MagnaGlobal广告市场海报

3.对数据进行排序

首先删除所有不会增加价值并且基本上是图表多余的数据。有时，您必须处理大量数据，这不可避免地会使您的图表变得非常复杂且难以阅读。不要犹豫，将您的信息分成两个或多个图表。如果这对您不起作用，则可以使用突出显示或使用更合适的内容更改整个图表类型。

提示：使用条形图和柱形图进行比较时，请按值（而不是字母顺序）以升序或降序对信息进行排序。

图片由萨曼莎·赫尔利（Samantha Hurley）

4.利用颜色发挥自己的优势

在每种可视化形式中，颜色都是您最好的朋友和最强大的工具。它们产生对比，重音，强调并直观地引导眼睛。即使在这里，色彩理论也很重要。

设计图表时，请确保不要使用超过5或6种颜色。除此之外，任何其他操作都将使您的图表不堪重负，并且难以为观众阅读。但是，您可以使用颜色强度来发挥自己的优势。例如，当您在不同的时间段内比较同一概念时，可以将数据从所选颜色的最浅阴影到其较深的颜色进行排序。它会创建适合您时间线的强烈视觉效果。

选择颜色时要考虑的事项：

• 不同类别的颜色不同。
• 系列中所有图表的采用一致调色板，方便以后将进行比较。
• 最好使用对色盲友好的调色板。

Jamie Kettle可视化塑料废物污染数据

5.获取灵感

当您想成为数据可视化设计中的佼佼者时，请多多发挥自己的灵感。查看优秀的示例、信息图、其他人的工作，并了解哪种方法最适合您需要实现的每种数据。

下图这个Twitter帐户数据可视化是一个很好的例子。同时，我们还将精选一些令人称赞的示例，这些示例将使您有信心开始为数据创建视觉效果。

lilit Hayrapetyan创作的大数据纪录片的人脸

8个数据可视化示例

作为另一种艺术形式，Data Viz为一些令人惊叹的精心设计的图表提供了沃土，这些图表证明了数据也可以是美丽的。现在，让我们来看看一些例子。

1.黑暗之魂III体验数据

我们从孟小伟的个人项目开始，介绍他玩《黑暗之魂3》的经验。这是信息图表和数据可视化也是个人设计工具的完美例子。这项研究非常庞大，但非常专业地归类为针对不同概念的不同类型的图表。所有数据可视化都使用相同的调色板进行制作，并且在信息图表中看起来很棒。

我的黑暗之魂3孟小伟在播放数据

2.有史以来最伟大的电影

凯蒂·西尔弗（Katie Silver）根据评论家和观众的评论汇总了有史以来最伟大的100部电影。可视化显示了每部电影的关键数据点，例如发行年份、奥斯卡提名和获胜、预算、利润、IMDB得分、类型、拍摄地点、电影背景和制作工作室。所有电影均按发行日期排序。

凯蒂·西尔弗（Katie Silver）的100部最佳电影数据可视化

3.最暴力的城市

费德里卡·弗拉加帕内（Federica Fragapane）显示了2017年全球50个最暴力城市的数据。这些项目根据人口在垂直轴上排列，并根据凶杀率在水平轴上排序。

4.家族企业作为数据

这些数据可视化和插图由Valerio Pellegrini为《透视》杂志制作。它们显示了一个饼图，其中包含行业细分以及对就业贡献的散点图。

视角杂志–家族企业by Valerio Pellegrini

5.太阳系的轨道图

该地图显示了太阳系中18000多个小行星的轨道数据。每个小行星都显示在1999年除夕的位置，并按小行星的类型进行了着色。

埃莉诺·卢兹（Eleanor Lutz）的太阳系轨道图

6.标题的语义

KatjaFlükiger对头条新闻的故事情有独钟。数据可视化旨在传达销售对算术的影响程度。该项目在马里兰大学艺术学院完成，目的是可视化对移民的引用，并对用词选择和上下文所暗含的价值判断进行颜色编码。

标题语义学KatjaFlükiger

7.月球和地震

该数据可视化用于回答月球是否引起地震。该图显示了根据月球的相位和轨道位置而发生的地震的时间和强度。

月亮与地震艾西瓦娅·阿南德·辛格（Aishwarya Anand Singh）

8. Nanosats的黎明

可视化效果显示了从2003年到2015年发射的卫星。该图表示了专注于项目的机构类型以及为其提供资金的国家。左侧显示了每年的发射次数和卫星应用次数。

有线英国–由Nanosats拍摄的黎明（Valerio Pellegrini）

最后的话

数据可视化不仅是一种科学形式，而且还是一种艺术形式。其目的是帮助任何领域的企业快速理解复杂数据，并开始根据该数据做出决策。为了使您的图表高效且易于阅读，这一切都与了解您的数据和受众有关。这样，您就可以选择正确的图表类型，并使用可视化技术来发挥自己的优势。

展示一：

展示二：

展示三：

展示四：

展示五：

根据用户使用场景和特殊情况出现时，产品会结合变化呈现不同的功能或者服务，这种差异化的设计更能体现情感化设计的一面，提高用户对于产品的认可度。

腾讯新闻 APP 在东航事故出现时，在底部操作栏新增了祈祷的图标，方便用户表达祈祷的心情。特殊情况下的差异化设计满足了用户的情感需求，也体现出了产品的温度，带给用户更强的粘性。

二、优化指引路径提高操作效率

通过提取本机号码一键登录减少了繁琐的注册流程，提高了登录的效率，减少用户的操作路径。在登录时都需要用户同意一些条款协议等内容，当用户未勾选时通常都是提示用户，指引用户选择后操作。这样的设计增加了用户的操作路径，使用体验不是很好。

网易云音乐 APP 在同样问题出现时，提供了一个弹窗进行指引，用户无需重复操作，直接点击“同意并继续”即可完成登录。在用户误操作出现时，无需用户过多的操作路径，给出了更高效的操作解决方案，提高了用户使用体验。

三、温馨提示降低用户的过度依赖

随着互联网时代的到来，太多的娱乐产品占据了我们的时间，过度依赖和使用耗费了大量时间。特别是短视频的走热，刷视频容易带来过度依赖，影响用户的视力等健康问题。

抖音 APP 作为用户量庞大的短视频产品，提高用户体验至关重要。为了降低用户的过度依赖，提示用户注意休息，特意设计了温馨提示。用户可以设置提示时间和进行管理，APP 也会定期提示用户。温馨的设计提高了用户对产品的好感度，也能辅助用户做好时间管理，以免过度依赖而影响休息时间。

四、隐藏式设计提高版面利用率

对于用户来说希望内容具有较高的可见性，提高内容的曝光度才能被关注。在控制内容的优先级时，通过隐藏式设计可以满足更多内容的呈现，不过需要做好隐藏内容的引导，提高隐藏内容被发现的概率。

网易云音乐 APP 在云贝中心签到设计中使用了隐藏式设计，将签到相关的附属内容隐藏在展开卡片中，为更多主要内容提供了展示空间。为了提高展开的交互设计，在每天初次访问时会默认展开，然后再收起隐藏，这个动态的指引提高了这个交互动作的曝光度。利用隐藏式设计满足了产品需求，通过动作引导提高了用户知晓度，是一个具备较好体验的设计解决方案。

五、更人性化的模式设计

随着用户群体的跨度增加，为了带给不同年龄段用户更好的体验，众多产品都针对不同用户提供了定制化模式。特别是针对老年用户而进行适老化设计，还有针对青少年儿童设计的时间管理等，不同模式满足了更多不同年龄段的用户需求。

比如优酷 APP 在个人中心设计了“模式切换”，点击可以设置长辈模式、青少年守护、儿童守护。针对不同年龄段对于产品的使用需求进行定制化，带给用户更加人性化的使用体验。

六、定制化的播放页模式设计

不同用户对于产品的使用需求有所差异，固定的模式虽然可以减少产品的开发成本，但是单一的体验不够人性化。针对不同用户提供更多选择，可以带给用户更加人性化的体验。

MOO 音乐 APP 为了满足不同用户对于播放页的体验差异，设计了播放页模式定制化切换，用户可以选择以专辑封面或者背景大图进行展示。为了直观的方便用户做出选择，模式设计以可视化的图形展示，便于用户更快的做出选择。定制化的模式虽然把繁琐的事情留给了产品开发者，却把更好的体验带给了用户。

七、缩放预览满足对细节的体验

随着短视频走进更多用户的视野中，短视频的形式也是越来越丰富，满足不同用户的使用体验至关重要。特别是图片形式引入短视频平台，对于细节的体验因人而异，缩放画面满足对于细节的体验才能更加人性化。

抖音 APP 无论是针对视频还是图片形式作品都可以缩放预览，配合缩放的手势交互带给用户放大细节查看的体验，满足了不同用户对于细节的需求。手势交互也是产品设计师需要多多探索的方向，更加便捷的操作有助于提升用户对于产品的使用体验。

八、满足用户好奇心的设计

用户从小白到依赖是一个逐步探索的过程，好奇心的用户会点击尝试任何的功能，甚至连一个图标或者 LOGO 都希望获得彩蛋。作为设计师来说设计出来的每一个元素都需要考虑用户体验，给予反馈式的设计才能满足好奇心的驱使。

爱奇艺 APP 首页左上角的 LOGO 展示你有注意到吗？有没有尝试去点击体验，作为好奇心驱使特意尝试了一下。点击之后会跳转到皮肤等设置的页面，为该功能的曝光新增了首页入口，用户也可以通过个人中心“装扮”进行设置。该设计解决方案不仅满足了用户点击的好奇心，也赋予了 LOGO 展示功能化的作用。

九、可以标记和叠加的点赞设计

点赞设计在众多产品中均有体现，这是用户表达对于内容的喜欢，以此来增加作者和用户之间的互动性。为了吸引用户点击和带来差异化的体验，点赞设计也被脑洞大开，在表情化、叠加点赞、点赞标记、微动效等方向不断探索。

小宇宙 APP 在播放页中对音频进行点赞时，可以多次叠加点赞，点击之后会针对音频播放进度条进行点赞标记，反复点击也会使得进度条纹增高，以此来强化点赞的程度。该设计解决方案不仅丰富了点赞的设计，也能通过标记和进度条纹的高度让用户记住关键的部分，方便后续回顾的时候知道哪些时间段是重要内容，提高用户对于产品的使用体验。

十、差异化的短视频推荐设计

作为新闻资讯类产品来说，大部分用户的习惯还是图文结合的阅读形式，不过随着短视频的出现，改变了一部分用户的阅读习惯。通过短视频获取新闻资讯、搜索指定内容、学习生活技巧或者专业技巧等均可实现，改变了用户的阅读习惯和获取内容的形式。

央视新闻 APP 作为新闻资讯类的专业平台，在满足用户阅读新闻的同时，也跟进了短视频观看新闻的体验。在底部标签栏以舵式导航的形式作为短视频新闻入口，点击之后会有推荐视频展示，差异化的推荐设计不仅提高了内容的曝光度，也吸引了用户的关注度。

小结

本期为大家总结了提高用户体验的十个优秀设计解决方案，体验、分析、总结是为了掌握别人的设计经验，积累设计灵感并运用到项目设计中。灵感的积累离不开总结，探索细微之处的差异化对于 UX 设计师而言至关重要。

本期分享到此结束，仅为个人角度的体验总结，希望可以带给大家更多灵感启发。

1、菲茨定律

选中目标所需时间与移动距离长短和目标面积大小有关。（与距离负相关，与面积正相关）

现实中的应用

在商场中寻找洗手间取决于标志的大小及步行的距离。为了满足这两个标准，标志设计得更大、更容易接近。

设计应用

▲ 左侧页面的CTA按钮很小，没有突出显示，与表单的其他元素基本上没有区分；右侧页面CTA按钮尺寸很大，能让用户清晰识别。

2、希克定律

决策所需要花费的时间随着选择的数量和复杂性增加而增加。

现实中的应用

与餐厅相比，快餐店的菜单选项有限。因此顾客点餐速度更快，门店提供的服务也更快。

设计应用

▲ 在Whatsapp上转发消息时，会在“最近聊天”列表上方看到“经常联系”的3个好友。这对用户来说是一种简单的交互，帮助用户节省操作时间。

3、共域定律

被一个显而易见的边框包围起来的多个元素，被视为一个群组。(从属于格式塔理论)

现实中的应用

在服装店中，衣服按照类型被分到不同的架子上来展示，即使对这家服装店一无所知，顾客也会将一个货架内的商品关联成相似的东西。

设计应用

▲ 过滤器被封闭在产品页面之外的单独区域中，因此可以清楚地识别左右两部分的差异。

4、雅各布定律

用户将大部分时间花在别人家的网站(产品)上，而不是你的。这意味着他们希望你的网站(产品)跟别人的有相同的使用方式。

现实中的应用

假设家中的阳台是一扇推拉门，我们可能希望酒店的阳台门也以同样的方式操作。因此如果酒店有一个滑动门，我们可能会下意识地先去推门。

设计应用

▲ 以上是国外知名的电商网站导航栏设计，这几个网站导航栏中显示的信息及其结构都非常相似：左侧是品牌标志，中间为搜索栏，右侧为其他选项(购物车/个人账户)。

5、系列位置效应

用户更容易记住系列中出现的第一项(首因效应)和最后一项(近因效应)。

现实中的应用

我们通常更容易记住某个电话号码的前4位或后3位，这条法则也是银行卡号被分成4组数字的原因。

设计应用

▲ 在亚马逊主页上，网站的第一部分总是显示最重要的内容：导航包含logo、搜索和其他重要功能；轮播图通过图形设计吸引用户的目光，引导新的交易或优惠。

6、冯·雷斯托夫效应

又称隔离效应。当存在多个相似物体时，与众不同的物体最容易被记住。

现实中的应用

在商场购物时，相较于普通装饰的门店，我们更有可能记住或将注意力转移到具有霓虹灯效果的门店上。

设计应用

▲ App上有新消息时，会在图标上用红点显示，这样的提示更清晰和突出，从而吸引用户的注意力，引导用户点击并查看消息。

7、审美可用性效应

用户通常认为漂亮的设计更易用。

现实中的应用

当参观汽车展厅时，我们通常会对汽车精美的展示感到惊叹，并立即对这个品牌产生积极的印象。

设计应用

▲ 在爱彼迎上，我们住在陌生人的房子里，因此建立双方的信任是必要的。当访问像爱彼迎这样干净简洁的网站时，我们会下意识地信任这个产品，也确保了用户对品牌的信任。

8、峰终定律

人们评论体验优劣，大多基于峰值和结束时的感受，而不是所有环节的平均值。

现实中的应用

在足球比赛中，整场的观看体验将根据比赛结束(谁获胜)和比赛高潮（谁进球最多/比赛中最激动人心的时刻)来判断。

设计应用

▲ 在夜晚非常饥饿的时候，我们使用订餐App选择食物时，却被告知付款失败。这时候App界面设计的再好看也无关紧要，订餐失败就是从这次体验中收获的结果。

参考：uxplanet.org/laws-of-ux-outside-the-screens-d44298c85d94

原文地址：Clip设计夹（公众号）

作者：Clippp

转载请注明：学UI网》用户体验设计法则应该怎么用？来看看这些应用原理！

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

1. 3D设计风格

虽然 3D化 的视觉风格早已到来，但是在B端市场上，3D风格在此之前依旧表现的十分克制。

随着 C4D、Blender 这些 3D 建模软件的不断普及，再加上互联网上关于 3D 建模教程的增多，你会发现 3D 风格的视觉表现，是一个 B端视觉设计师 的基本要求。

而3D风格用在B端软件当中，会有两个使用场景：

图标

因为在B端产品当中，图标本身就是非常难以去表现，比如“物联网，大数据”。

许多的抽象词汇，很难通过一个具象的事物进行表达，而在企业官网当中，在视觉表现上的要求又十分的高。因此你会发现，在视觉风格上的选择，往往只有 3D 图标 + 插画 这一条路。

并且 3D 图标的使用场景不会太过于局限，也可以用于产品的工作台、运营营销工具箱 等页面，因此 3D 图标的出现，它的应用场景也会相比之前 要更加的广阔。

可视化大屏

大屏设计 也在不断的“内卷”，因为传统的 2D 可视化大屏 所搭建出来的大屏已经满足不了企业的野心， 像DataV 腾讯云图 ，大家都在朝着 3D风格 炫酷的方向进行延展，因此也就会导致 3D 的视觉风格需求 激增，而 3D 建模仿佛就是大势所趋。

2.新拟态

虽然新拟态是在前两年的产物。这个设计风格背后，遭到了很多设计师的质疑与排挤。

但是随着这个风格的不断成熟，感觉它在B端视觉领域（特指的是 官网 ），是非常受到欢迎的，因为整体的风格，与官网的设计形式趋同。

同时作为B端产品的官网，其实是更需要新拟态这种风格。因为电脑场景下鼠标光标对页面进行 Hover 操作 给出的真实反馈，而使用了新拟态的官网按钮，给你的反馈非常真实。

这里安利一下腾讯云的首页官网，大家就会发现在设计风格上，大量的采取了新拟态元素，并且配合 3D 风格的图标，以及毛玻璃材质的设计，让它的设计瞬间加分不少。

3.开源的设计系统

在去年，设计系统迎来了一波发展的高峰期，随着字节、腾讯，三大设计系统（Arco Design、TDesign、Semi Design）的开源，其实是给我们很多B端设计初学者，有了更加完整仔细的B端入门教程。

比如 Arco Design 的组件用法 https://arco.design/docs/spec/link

就清晰的讲清楚了每一个组件的使用方式，以及注意事项，仔细阅读这里面的内容，其实就是B端设计的入门学习。

而未来，国内的环境，开源的系统也会越来越多，大家可以针对这几大类不同的设计系统，进行对比，或许会有一番收获。

产品趋势

超级app

这里的 超级app 可能和大家潜意识里的 支付宝、微信 这些软件不太一样。

在B端行业，随着疫情的不断扩散、再加上了两年时间的发展，很多B端产品的功能架构都出现了一个现象，产品的功能开始变得非常拥挤。因为B端软件的核心价值其实就是靠着一个又一个功能去累积，也就意味着随着B端产品的发展，功能模块在不断的累积，导致在设计层面，这样的现象变得更加严峻。

你会发现左侧的导航菜单已经完全没有办法装下这些导航内容，而这一现象也反映在很多产品当中，比如我了解的 飞书管理后台、薪人薪事 等等诸多B端产品，它们在整个导航内容上，已经增加到一级导航 15+  、二级导航 40+ ，这无疑会开始对设计师的能力造成巨大考验。

面对这一情况，许多导航菜单都将会迎来前所未有的挑战，最近也在深入研究导航菜单过多时的解决办法，发现了一些新的 导航菜单 设计方法，有机会咱们重新梳理一下 导航菜单 的内容，将B端设计指南 文章进行更新。

低代码定制化

低代码一直是我关注的一个领域，先给不明白低代码的同学简单科普一下。

低代码，一种快速开发应用的软件，将通用、可重复利用的代码形成组件化的模块，通过图形化的界面来拖拽组件并形成应用。低代码能够实现只写少量代码或不写代码，类似用“乐高积木”的方式来开发。

在国外有很多著名的低代码成功案例。Outsystems（国外非常出名的低代码平台）帮助施耐德电气在20个月内推出了60款应用程序，开发过程加速了两倍，仅在第一年就节省了650人天的工作量；在2012年即将推出Model S之际，特斯拉放弃了SAP的ERP产品（可以思考一下为什么），改用低代码开发平台Mendix，用25个人四个月时间自建ERP系统。

去年，低代码平台，也有很多新产品面世，其中就包含：

因此你会发现，其实低代码就是在解决一件事，围绕着某一个业务场景，通过平台的持续完善优化。

让所有的功能都能围绕这个业务展开，其中包括：权限、时间轴、流程、表单、公式等等，能够解决很多特殊的业务场景。

而低代码会涉及到设计思路上的转变，以及低代码编辑器的出现，如何去设计如此复杂的配置流程，如何能够让用户能够快速上手，如果你能够有比较完整的思路，这些都会成为我们设计的新机会。

行业细分

随着互联网市场的不断发展，用户会越来越关注产品在自己行业的应用，比如CRM，其实只是一个笼统的称呼，现在CRM市场又会分为 SCRM、运营CRM，等诸多产品。

PaaS类的平台也出现了 负责从虚拟主机和数据库层面入手的 iPaaS 以及 从应用和数据层面入手的 aPaaS。

即使是大家经常使用的 钉钉、企微、飞书，它们也在各自的领域有所擅长。

因为B端产品，在底层逻辑上是不能允许趋同的产品出现，如果你和别人的产品一样，其实是没有办法在目前的市场上立足。

因此你会发现，虽然产品形式都会比较相同，但是B端市场十分广阔，大家都在去寻找自己产品的差异化。

当然市场是瞬息万变的，这里也只是简单聊聊我自己的看法，希望对你有所帮助。最近拖更确实比较厉害，准备之后几天给大家抽些书，可以多留意留意公众号的文章。

原文链接：CE青年（公众号）

作者：CE青年

转载请注明：学UI网》2022年，B端设计的趋势有哪些？

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司