1. 确定核心用户体验

每个产品都有核心的用户体验，这基本上是它存在的原因。它解决了人们所面临的问题，而且为他们提供有意义的价值。关键内容和功能的组合代表了核心的用户体验。要查找你的产品核心用户体验，就要问自己一个问题：“客户需要完成哪些最常见和最重要的任务？”在你用于产品的每个渠道上支持这些核心任务的本质至关重要。例如，Uber的核心用户体验是任何时间随叫随到。无论屏幕尺寸如何，此功能都能在每个设备上正常工作实现这一目的。

                             预约出租车是Uber用户最重要的任务。用户可以使用Apple Watch完成此任务。图片来源： Techcrunch

2. 定义产品的设备组

尽管存在大量不同屏幕尺寸的设备，但绝对不能定位各个设备，可以根据用户可能关注的任务定义产品的设备组。最常见的设备组是：

移动手机

平板电脑

台式电脑

智能电视

智能手表

不同的设备组在不同的上下文中提供不同的服务：用户根据他们正在查看的屏幕的类型参与不同的交互模式。例如，手机主要用于微任务，并且具有较短的用户会话。平板电脑主要用于内容消费，目前不被视为大多数人的工作工具。在了解各种设备类型的基本上下文的假设对于构建一个好的用户体验是至关重要。

3. 适应每个上下文使用的体验

确定产品的核心用户体验后，选择一组你希望支持的设备组，你需要调整每个组的体验（对于每个上下文的使用）。上下文的设计在不同设备组设计时尤为重要。

第一，并非所有功能都在所有设备上都有意义。你需要确定你的产品在多个设备组中使用的不同场景，并设计适合每个场景的体验。例如，通常移动用户比电脑用户想要的不同于产品。以 Evernote为例，可以在多台设备上使用流行的笔记本产品。其电脑版本针对内容消费进行了优化：

                           用于电脑版本的Evernote应用程序被优化用于阅读文本和查看媒体。

而移动版本是针对拍摄笔记、照片和捕获音频进行了优化的：

Evernote了解移动环境：它利用设备功能，并提供快速保存想法的方式（添加文本笔记，捕获照片或设置提醒）。

第二，不同的屏幕允许不同的输入法。以触摸输入为例。在设计具有触摸输入（移动手机和智能手机）的设备时，设计师会犯的几个常见错误包括：

小的点击目标。点击目标（如CTA按钮）必须具有足够大的尺寸。通常至少7毫米是足够的，但最好使用10mm触摸目标尺寸。

                                      图片来源：UXMag

将项目过于紧密地放在一起。你应该考虑点击目标的大小以及它们之间的间距，因为间距有助于分离控件，并给你的用户界面提供呼吸的空间。建议的间距至少为23pt以防止输入错误。

                                                                                      按钮之间的间距

使用悬停状态。但在触摸屏上，没有“悬停”。

4. 最小屏幕设计

历史上，设计师一直从事大屏幕到小屏幕的设计工作，这意味着第一个也是主要设计是为了完整的电脑桌面视图（它具有最多的功能）。只有电脑桌面设计完成后才移植到移动设备和其他设备组。但当设计电脑桌面时，我们通常面临“厨房水槽”问题：许多功能被添加到产品中，特别是当涉及多个利益相关者时。这并不奇怪，，当你有很多不动产时，添加功能是比较容易。实践经验清楚地表明，最好使用移动方法进行设计，并通过与用户相关的最小屏幕创建应用程序。

当你首先设计相关屏幕的最小尺寸时，它会强制你决定最重要的。一段时间后，你将采用同样的方法仔细选择产品的其他版本，无论是电脑桌面设备，平板电脑还是电视。

在大多数情况下，手机将是相关屏幕的最小尺寸。如果可穿戴设备对你很重要，那么你将需要考虑具有更小分辨率的微型屏幕。

5. 不要忘记大屏幕

想想大屏幕以及小屏幕，给大屏幕和小屏幕提供同样的注意力：

不只是缩小设计，使其适合那些大屏幕。充分利用你可以使用的额外空间。

                                                                                           图片来源：Wikipedia

确保图像不会因为屏幕尺寸的放大而失去质量。

                                                左：低质量图像。右：正确的分辨率。

考虑大屏幕细节。每个设备组都有自己的不同。例如，电视屏幕的设计被称为“设计10英尺体验”，因为从沙发的距离来看，与电脑桌面屏幕相比，屏幕上元素的明显尺寸明显更小。

                                                                 电视的用户界面元素应大于电脑桌面。图片来源：Samsung

6. 提供一致的体验

一致的体验意味着应用程序及其在所有屏幕尺寸上的体验都是相似的。无论设备如何，一致的用户体验是成功的全通道用户体验的关键组成部分之一：

对未来与产品的交互设定期望，并建立用户信心。

一致的体验使得你的产品在其他设备上与用户的交互更容易。

你可以将它们视为相同体验的方面，而不是将设计定制到越来越多的屏幕和设备中。例如，Google搜索应用在所有设备上提供相同的搜索体验。

                                                 当设计和功能一致时，用户可以在他们选择的设备上更快更有效地完成任务。

7. 创造无缝体验

跨不同设备组创建无缝体验对你的用户非常重要。人们可以自由地在设备之间来回移动，完成任务，或当他们从设备转移到另一设备时，他们期望他们的产品和服务与他们一起转移。这意味着用户不必考虑他们正在使用的设备，环境的变化或上下文的变化，并且可以依赖于设备良好的功能性和独立于设备的易用性。

                  大多数人如何走过他们的一天，他们访问的主要屏幕。图片来源：Intercom

根据使用情况，你可能希望确保每个设备上的内容消耗量同步。以Apple Music为例：你可以在Mac上设置播放列表，并在iPhone上即时播放，也可以开始听iPhone上的歌曲，当你转到电脑桌面时，你将被拍摄回到你在iPhone上。

                                                                  Apple Music可以很好地处理多个设备的同步。

8. 测试你的设计

在测试环境中有效的并不总是在现实世界中。在实际设备上为实际用户运行可用性测试，你可以在发布之前发现用户体验的问题并解决它。

结论

在设计多个屏幕和设备时，最好的策略是保持最终的用户体验。作为用户体验设计师，你必须评估产品的使用时间，位置和方式，以评估用户的最佳体验。无论你的内容是什么尺寸的屏幕，用户都希望在各种设备之间获得流畅的体验。

转载请注明：学UI网》在不同屏幕和设备上创建用户体验设计的8个步骤

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

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

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

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

起源发展

动画发展大致经过了三大阶段，分别是从传统动画（纸笔）>>CG动画（离线渲染）>>互动动画（实时渲染）。随着时代变迁、设备以及技术升级，新的动画形式以及呈现载体不断的被创造出来。

传统动画注重理论基础以及扎扎实实的基本功，并且是艺术学院必修课，宫崎骏的早期的动画就是传统的手绘动画。每一张都是纯手绘的作品，所以我们看到宫崎骏的动画会有完全不同于纯工业的动画的感觉。

 应用场景

这里我们只针对我们互联网产品设计讲一下交互动效的应用场景，我总结了以下七大应用场景，分别是图标动画、界面交互、插画动效、HUD大屏、汽车系统、项目包装、品牌宣传等等。

图标动效

界面交互 

汽车系统 

插画动效 

品牌宣传

HUD 

项目包装 

设计语言

动画价值

优秀的动效可以帮我们解决产品设计中的很多问题，可以从用户体验的五大要素来进行价值的拆解：

战略层

战略层本质上来说大部分设计师其实是接触不到的，当然接触不到战略并不能代表我们不需要了解，作为设计师我们必须了解公司对产品的战略定位以及期望，也必须要了解用户的目标和心理预期。战略层是整个产品的核心也是底层，所以单纯来讲，动画在这一层面上可以发挥的余地是是不多的，因为更多的这一层更加关注意识形态的战略思考。

范围层

范围层是通过战略思考来思考明确产品的大概功能和内容，有很多产品的功能复杂，交互繁重，内容很多，在这种情况下动效就派上了用场，我们可以尝试通过动效来解决内容过载，优化交互模块，扩展产品内容功能范围。

结构层

这一层主要确定产品的功能结构以及层级，主要设计用户如何快速，准确的触达某个界面完成某个任务，要考虑用户体验地图，用户整个的任务路径，简单来说就是用户要做什么事情，如何做，做完之后应该干什么，如果能对动效巧妙的运用，就可以做到引导用户，练习上下流程的作用，降低用户理解成本，提搞产品的操作效率，提高产品的可用性和易用性。

框架层

从这一层开始，UI设计师接触的内容逐渐多了起来，大家也会更加熟悉工作的内容以及范围，这一层主要体现在优化页面布局，确定元素摆放位置，涉及到具体的信息、界面、导航设计等等。通过利用格式塔，栅格，设计语言等方法确定产品功能具体页面内容布局，我们可以通过动效来进行辅助设计，例如强化元素的位置、颜色、大小，优化页面的切换、跳转的流畅度以及自然度等等。

表现层

表现层具体涉及到视觉、听觉、触觉的体验设计，也是做为视觉设计师、UI设计师发挥最多的一层，在表现层动效的展现形式会多种多样，这里不展开讲解，大家应该都明白。在表现层加入适当的动画能够提升产品趣味性，加强用户与产品的情感链接，增加用户对产品的友好度。

未来发展

5G

5G时代已经到来，5G的普世将会为科技发展带来更多的可能性，众所周知5G的速度是4G的百倍，那么意味着我们的设计的动画会加载的更快，动画文件的大小限制将会被打破，另外也可以在某些领域的产品内设计更复杂更酷炫的动画。

人工智能（AI）

它是研究、开发用于模拟、延伸和扩展人的智能的理论、方法、技术及应用系统的一门新的技术科学。该领域的研究包括机器人、语言识别、图像识别、自然语言处理和专家系统等。在我们日常生活中运用的包括不限于人机对弈、模式识别、自动工程、知识工程等等。所以未来在这些领域内，我们能参与到的动画设计必然会更多样，形式也会更丰富，挑战也会更大。可能会不断有新的动画形式以及设计方法被创造出来，让我们拭目以待。

虚拟现实（VR）

是20世纪发展起来的一项全新的实用技术。虚拟现实技术囊括计算机、电子信息、仿真技术于一体，其基本实现方式是计算机模拟虚拟环境从而给人以环境沉浸感。随着社会生产力和科学技术的不断发展，各行各业对VR技术的需求日益旺盛，VR技术也取得了巨大进步，并逐步成为一个新的科学技术领域。相信在未来的工作中必然会慢慢的接触到VR界面设计以及动画设计，并且我相信未来会逐渐的变成主流。

参考资料

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

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

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

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

变色龙效应/镜像效应

俗话说，“有样学样（Monkey see, monkey do）”，包括人类在内的灵长类动物都擅长模仿。这个词表示无意识镜像或模仿我们周边人行为的状态。根据我们在产品方面的经验，我们进行的互动具有亲密性和即时性。

你有没有试过听了朋友说的话之后又说给对方听？这是变色龙效应的完美例子。

启动效应（Priming）

指由于之前受某一刺激的影响而使得之后对同一刺激的知觉和加工变得容易的心理现象。我们半夜三更看了电视的恐怖电影之后，跟看喜剧相比，屋子里面听到的任何吱吱声或者噪音更有可能让你毛骨悚然、心惊肉跳。

启动效应会塑造我们对环境的行为和反应，而且往往是有效的捷径，让我们可以迅速做出决定。这也是一种有效的说服工具，已经广泛应用到产业的营销和广告领域。

冯·雷斯托夫（Von Restorff）效应

德国精神病学家和儿科医生海德维希·冯·雷斯托夫（Hedwig von Restorff）在1933年提出的理论。冯·雷斯托夫有一次实验，涉及到让受试者观看一系列相似的物品。结果他发现，如果其中某个很特别的话，那么相比其他物品，受试者就更容易回忆起这件物品。

冯·雷斯托夫效应又叫做隔离效应（isolation effect），或者新奇效应（novelty effect），其预测是当存在多个相似的对象时，跟其他有所不同的那个最有可能被记住。

序列位置效应

该理论由赫尔曼·艾宾浩斯（Herman Ebbinghaus，著名的艾宾浩斯遗忘曲线也是他的发现）提出。它描述了序列中项目的位置是如何影响回忆的准确性的。

这种效应是指记忆材料在系列位置中所处的位置对记忆效果发生的影响，包括首因效应和近因效应。系列开头的材料比系列中间的材料记得好叫首因效应或者首位效应；系列末尾的材料比系列中间的材料记得好叫近因效应或新近效应。

用户往往最容易记住系列中的第一项和最后一项。

把最重要的信息放到开始和结尾。把最不重要的信息放在中间，这是吸引用户注意力的高效方法。

格式塔原理

在格式塔原理之下，派生出了很多的其他原理。我们会在下面进行简要讨论：

负空间：

在设计周围留白，从而创造出一块大于其各个部分之和的区域。用最简单的措辞来说，格式塔理论是基于这样一种思想，即人脑会下意识地把各个部分组织成一个系统，从而创造出一个整体而不是一系列的离散元素，通过这样来简化和组织包含有很多元素的复杂图像或者设计。我们的大脑天生就是为了看清结构和模式，从而更好的理解我们生活的环境而构造出来的。

相似：

在格式塔里面，相似的元素不管彼此是否靠近也会在视觉上进行分组。分组可以按颜色、形状或大小进行。相似性可用来将可能彼此不相邻的东西联系在一起。

连续性：

不管实际画出来的线条如何，人眼在观看线条的时候都会按照最平滑的路径想象。当目标是引导访客的眼睛朝特定方向看时，这种连续性会是很有价值的工具。

闭合：

这条原理反映的是人会把设计或图像缺失的部分自行脑补，创建出一个整体来。或者说得简单点，在Adobe、Sun Microsystem、NBC、USA Network等的logo中就可以看到复杂的形状。

相邻性：

这条原理是指元素之间的距离如何。在UX设计当中，运用相邻性是为了让用户将某些事物组合到一起。通过把它们放在一起，用户就会感觉它们是相关的。

图形与背景关系：

跟闭合原理类似，这条也利用了负空间。我们的大脑会区分出图像前景的对象。设计师如果想要突出某个焦点时，用这条这真的很方便。

共同命运律：

这条原理是指，沿同一个方向移动的元素本身会被视为一组。如果我们看到一群鸟朝特定的方向飞行，我们就会把它们组合在一起，并将它们看作是单个刺激物。

认知负荷

指在一个人的工作记忆使用的脑力综合。是指你为了完成任务需要消耗的脑力。

认知负荷是表示处理具体任务时加在学习者认知系统上的负荷的多维结构。

希克定律

以英国心理学家威廉·埃德蒙·希克（William Edmund Hick）命名，其理论指出当选项增加时，下决定的时间也增加。一个人做出决定所需的时间取决于他或她可以选择的选项数。因此，如果选择的数量增加，则做出决定的时间将对数增加。

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

菲茨定律（Fitt’s Law）

这条定律规定，任意一点移动到目标中心位置所需时间与该点到目标的距离和大小有关，距离越大时间越长，目标越大时间越短。

获得目标所需的时间取决于到目标的距离以及目标的大小。

可以利用这条定律来影响互动按钮的转化率，尤其是用手指操作的移动设备上的设计，可以把希望互动的按钮设计得更大一点，把不希望用户点击的按钮设计得小一点，更难点中一点。用户任务/注意区域与任务相关的按钮之间的距离应尽可能的短。

美即适用效应

这条指的是用户往往会认为有吸引力的产品更实用。大家往往会相信看起来更好的东西用起来也会更好——就算实际上效率和效能并没有提高。

用户往往会把美观的设计看作是更实用的设计。

对视觉设计的积极情绪反应会让他们对可用性方面的小问题更加宽容。

双重编码理论

这一理论是由心理学家佩维奥（Paivio）提出来的，他强调在信息的贮存、加工与提取中，语言与非语言的信息加工过程是同样重要的。佩维奥（1986）指出：“人的认知是独特的，它专用于同时对语言与非语言的事物和事件的处理。”利用双重编码系统可以让用户更容易记住我们网站上的重要内容。

我们会根据你对现实世界的体验和感知为脑中想到的文字建立视觉形象。一想到“体育”，我们的大脑就会自动想到球的形象，运动员的形象。通过将文字跟图像配对，可以更容易记住东西。

直觉检查

我们一般不会用价值数千美元的眼动追踪软件或者脑电图来判断设计是不是有效。但是5秒测试是个强大工具，用它就可以确定你的设计是不是一看就明白。

所谓5秒测试，就是让受试者观看网站或应用5秒钟，然后回答有关主题和设计的问题。如果用户的答案或者留下的印象跟你的设想不一样，那就说明设计没有达到原先的目的，需要继续改进。

说服心理学

这条原理来自罗伯特·西奥迪尼（Robert Cialdini）的著名著作《影响力：说服心理学》（Influence: The Psychology of Persuasion），里面列举了类似互惠、一致性、社会认同，权威以及稀缺性等原理。

这些原理往往决定了我们在社会当中的行为方式，我们可以用它们来识别人类行为。

互惠：这条原理是说人都不喜欢亏欠别人。如果别人给了他们什么东西的话，他们应该会觉得有责任给予一定程度的回报。提供免费的电子书，博客文章，播客或其他免费内容，然后换取用户提供的电子邮件地址，这就是现实生活当中互惠的好例子。

权威：权威这条原理说的是我们大多数人都意识到自己没办法在每一件事情上都是专家。我们最好的选择是依靠专家的证词。所以，我们允许专家和任何特定议题的“权威”人士影响我们。大家往往会对高水平的专家和权威人物的话言听计从，因为觉得他们值得信赖。如果跟成功公司能扯上关系的话就会经常被提及，好建立一定程度的尊重和可信性。

一致性：这条原理说的是大家一般都希望自己行为跟自己的决策过程保持一致。西奥迪尼曾经进行过一项研究，他让两组志愿者挨家挨户去询问房主愿不愿意在自家前面的草坪上立一块写着“小心驾驶”的大广告牌。

第一组的做法就是简单粗暴直接上门问。而第二组是先做一个初访，请求房主在他们前面的草坪放一块很小的标志牌，“做一位安全的驾驶员。”

结果第二组的成功率高出450％。这就是（承诺与）一致的一个例子，因为房主会觉得自己有义务在这种情况下保持一致性。

社会认同：大家未必总能知道自己为什么会这么做。大家是不是都在跳舞？如果是的话会有更多的人跟着跳。大家是不是都在看那个视频吗？是的话会更多人会点击它。是不是每个人都在买你的产品吗？是的话，你想拦都拦不住。在电子商务的实践当中，我们使用的网站会社会认同（比方说点评、评论和推荐）来吸引其他用户，并引导他们做出购买决定。亚马逊有“购买这个的客户也购买了那个”的提示，希望强化你跟商品的关联性，让用户认为“如果别人需要它的话，那我也需要它”。

稀缺性：在塑造行为的原理方面，这是我的最爱之一。稀缺性原理是说，如果东西有限的话，大家就会更想得到它。能得到的人越少，吸引的人就越多。

为什么有的商店会推出限量版服装？这就是原因，这样可以吸引更多的顾客。

变化盲视（Change Blindness）：指观察者不能探测物体或情景所发生变化的现象。

记忆限制

记忆未必永远可靠。我们对信息的存储方式会被我们的想法、感知信念以及周围环境所重构。

我们的工作记忆能力大概就只有10到15秒，一次只能记住3到4个东西。

研究表明，大家往往会制造出错误的记忆，要么会记住了没有发生过的事情，要么就是记得的东西跟实际不一样。由于记忆具有提示性和可塑性，所以根据大脑的习惯或心智模式来进行设计就非常重要，因为这样会更容易记住。

尽可能为用户提供帮助和反馈，并提供撤销选项，以减少用户犯错时的沮丧情绪。让体验个性化，好迎合我们用户的喜好。

单纯呈现效应（Mere Exposure Effect）

单纯呈现效应是指图片、符号、数字、声音等外部刺激信息只要经常暴露在人面前，就能增加人们对其喜欢程度的现象。这种社会心理会发生在我们所有人身上，我们在不连续的时间段内见到某人的次数越多，我们觉得这个人讨人喜欢或迷人的可能性就越高。这种效应有时候又被叫做熟悉定律。

了解单纯呈现效应及其机制，会让你在转化率优化的工作中具备重大优势。更多的呈现会带来熟悉感，进而带来舒适感，从而让转化率优化整体上得到显著改进。

色彩心理学

色彩也是影响人的选择和行为的主要因素之一。我们经常会发现儿童玩具颜色鲜艳，女孩玩具往往是粉红色的。这方面研究的主要思想是色彩对用户的感知有很大的影响。

所以，作为设计师我们应选择能够传递含义与正确信息的色彩。

红色。跟热情、强烈或攻击性的感觉关联。同时是好和不好的感受，比如爱、自信、热情、愤怒等的象征。

橙色。充满活力的暖色，给人以兴奋的感觉。

黄色。幸福的色彩。象征着阳光、喜悦和温暖。

绿色。大自然的色彩。给人以来平静和新生的感觉。另外，也可能用来表示经验不足。

蓝色。一般用来表示企业形象。往往表现出冷静的感觉，但是作为一种冷色，也跟距离与悲伤有关。

紫色。由于很多国王都穿紫色的衣服，所以长期以来就与皇室和财富联系在一起。紫色也是代表神秘与魔力的颜色。

黑色。这种颜色有很多含义。往往跟悲剧和死亡相关联。可以代表着未解之谜。可以是传统的，也可以是现代的。一切都取决于怎么用，以及跟哪些颜色一起用。

白色。意味着纯洁和纯真，以及完整性和清晰度。

本能反应

我们一般是从大脑负责本能的部分得到这种反应，本能反应的速度比我们的意识要快得多。本能反应会导致我们用了一下产品后就爱上了它。这些反应植根于我们的DNA之中，所以很容易预测。

作为设计师我们就是要通过设计制造出视觉上极其出色的美感印象。为什么一个东西在用户眼里好看，以及为什么他们是我们的目标受众，他们的需求是什么，这些都不难猜测。

用户体验设计的概念根植于认知和行为心理学，那是人类与机器交互的蓝图。当然，本文仍还没有涵盖到所有的设计心理学原理。但是，作为设计师，我们还需要观察和理解最终用户，并且加深对用户的理解与共鸣。在产品开发过程中，了解用户的互动、行为和情感可以增加更多的价值。

原文地址：追波范儿（公众号）

作者：terechen

转载请注明：学UI网》你想要的，用户体验设计中的心理学

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

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

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

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

这是最常被提及的用户体验设计基础，当涉及到产品设计决策时，提醒我们要学会使用同理心，而不是仅凭个人的想法或意见。

真正好的用户体验设计是为用户量身打造的，用户的意见、痛点、愿望、偏好和需求对产品来说至关重要，所以在项目初始阶段需要投入大量的时间和精力去了解用户。

用户体验研究重点是了解用户，为接下来的产品设计做准备。以用户为中心的设计理念是设计师迎合用户的需求，区分了设计任何人都可以使用的产品和为目标用户设计的产品。

一款特定的产品需要面对不同的目标群体，前期研究中需要了解目标人群需要什么并在产品中反映出来，这是针对性很强的设计研究。

2.了解信息架构

可能很多人对信息架构的定义很模糊，这里举个例子来具象说明一下信息架构的含义。

例如在一款产品中，如果把所有内容都堆到一个列表或页面中，可能我们将无法使用这款产品，所以我们看到大多数的App和网站都包含很多的导航和页面结构，按照内容重要程度有序地来组织内容。

信息体系结构的最终目标是帮助用户理解他们在看什么，并帮助他们找到需要寻找的内容。

信息架构在制作线框图或原型之前完成，因为它是产品的基础，有助于设计师考虑什么功能是最重要的，哪些是用户最需要的以及哪些次要内容可以隐藏起来等。

这种结构与产品的导航设计密切相关，有助于将用户引导到正确的位置。导航和信息架构都试图让用户以最少的认知努力来完成操作。

信息架构的设计不当会造成重大故障甚至可能危及整个产品。如果用户在使用产品时找不到任何想要的内容，点击任何元素都没有反应，会给用户带来很糟糕的使用体验。

3.考虑使用场景

没有场景，任何设计都很难生效。设计师在项目开始时会投入时间去了解用户面临的问题以及围绕这些问题的背景。

这条原则有助于设计师考虑还有哪些因素会影响用户和产品，很多产品设计会为用户提供一些有助于消除使用摩擦的操作提示。

例如在设计表单时，会尽可能的添加输入提示，最大程度地减少用户出错的机会。

4.了解一致性及其重要性

保持一致性是用户体验设计的关键原则。拥有一致设计的产品可以更快地被新用户接受，因为用户不需要再次学习如何操作，他们会回忆起之前的操作习惯并将其作为指导，这也解释了为什么同类型的产品例如电商类App页面设计的很相似。

保持一致意味着在需要时可以重复使用某些UI组件，并在整个产品中保持一致的行为。例如当点击或悬停在按钮上面时，所以按钮的状态应该是一致的。

从逻辑上讲，产品越大，这种一致性会变得越来越有挑战性，这促使许多设计团队创建自己的设计系统。一款产品的学习曲线越长越陡，放弃的用户就会越多，在市场营销中，这通常被称为销售漏斗中的漏洞。

5.给予用户适当的控制权

这条原则意味着用户希望能控制产品，无论是完成任务还是定制满足他们需求的内容。

在设计过程中一直试图给用户尽可能多的控制权，例如允许用户撤消操作、更改设置、自定义UI外观、创建快捷方式等。

需要注意的是，当提供太多选项或用户太依赖于自己的选择时，用户可能会不知所措，造成所谓的选择悖论。所以在设计时要了解用户乐于掌控的余地，不能让用户感到使用压力。

6.把可用性放在首位

在整体上看，建立高标准的可用性是为用户做的最好的事情，有助于检查用户是否能够轻松地完成任务、产品是否正常运行以及是否完成工作。

可用性的重要之处在于要理解可用性的灵活性和重要性。

7.了解用户测试

结合可用性的概念，我们还要进行用户测试，这是设计师对工作进行测试的方式，对新的产品来说至关重要。

当设计思想和理念被转化为有形的原型时，设计师要观察真实的用户是如何与之交互的，可以通过许多不同的方式例如简单的A/B测试到全面的审核测试等来实现。

测试通常分几轮进行，团队在向原型添加更多细节之前验证每个步骤。随着测试结果的出现，设计也随之发生了变化。

如果发生更改，将会进行新一轮的测试，通过这个过程，设计团队可以改进他们的工作，直到达到可用性标准。

8.少即是多

在创造力和创造独特事物的渴望中，很多设计师很容易无意中弄乱产品界面甚至产品本身。

功能过多的产品可能会失去焦点并削弱吸引力。具有太多元素的页面会变得充满视觉冲击，但也会给用户带来负面体验，在设计时要学会克制并优先考虑真正关键的部分。

另外手机端的屏幕空间非常小，创建一个有效的布局，想出巧妙的方法来隐藏次要元素并创建一个令人愉悦的界面需要付出很大的努力和创造力。

9.视觉层次

视觉层次是向用户传达产品中元素重要性的方式。良好的层次结构有助于用户视线在界面上移动，并立即了解最重要的内容以及这些内容与其他部分的关系。

视觉层次结构与布局设计紧密相连，帮助用户消化所接触到的信息。

创建层次结构从概念的草图开始，一直持续到完成设计。例如发送按钮通常会用绿色而是不红色，而次要按钮会显示为灰色或与背景混合，并显示“撤消”或“返回”。

10.了解用户的心智模型

为用户创建心智模型是尝试使用同理心的一种方式，是帮助设计师从用户的角度看待问题的工具。

做到准确就是直观的产品，用户不需要投入精力就可以使用它，而错误的思维模型会导致一些问题，例如界面混乱、高昂的交互成本。

为了匹配用户的心智模型，可以采用多种不同类型的研究方法，常见的方法包括卡片分类、决策树、对用户行为的密切观察，或者使用大量的数据来建立关键用户的心理模型。

11.设计中的讲故事

讲故事的方式更加直观，利用图像、视频、动画和文本等元素让整个页面与用户对话。用户体验设计中的视觉叙事是为了唤起用户的情感，给用户留下持久的印象。

想出一种可视化的方式来传达复杂的内容具有挑战性，但同时也是有益的，可以更好地接近用户并将其作为提高产品可学习性的方法。

12.不要直接跳到高保真原型上

高保真原型是设计项目的最终目标，但是直接使用原型软件不断添加各种页面细节是错误的操作。

避免直接出高保真的主要原因是因为这样做的成本会更高。在没有任何用户研究和测试的情况下，一款产品无论具有多少的细节都有可能面临不符合用户使用的情况。

13.可访问性测试很重要

不仅要检查关键用户是否可以流畅地使用产品，还应该检查其他所有用户例如少数群体等是否都能够正常使用产品。

事实上，残疾人和其他用户一样需要数字产品，但很多产品在设计时并没有考虑到这些群体，但这也提供了一个机会，为所有用户提供一个可以依赖的好产品。

14.熟悉并在用户体验设计中使用

我们知道为用户提供一致的设计有助于克服学习曲线，同时为用户提供熟悉的东西也有助于缩短学习曲线。

例如，大多数用户都会立即识别某些UI组件(汉堡菜单/单选按钮)，这意味着他们会本能地知道这些组件代表什么意思或者如何操作。

使用用户已经熟悉的东西并不一定会让产品的独特性消失，有经验的设计师会利用这种熟悉性来来创造一些独特的设计，同时也是直观的，不需要太多努力就可以使用。

设计一个完全不依赖熟悉度的产品可能是具有风险的行为，因为它很容易让那些不熟悉产品的用户超负荷，形成巨大的学习曲线，增加用户负担。

15.了解交付成果的力量

可交付成果是可以在整个团队中交付的内容，包括用户画像、心智模型、用户旅程以及线框图和原型等，是一种有形和具体的表现。

可交付成果是用户体验设计原则，可以帮助设计团队和其他利益相关者理解和交流概念。

▲ 用户画像可以捕捉理想用户，并提供可以相关联的真实面孔，是一种指导设计的工具。用户旅程图帮助设计师了解用户完成任务需要的具体步骤，有助于确保这些步骤确实可以轻松执行，并且整个过程很流畅。

这些交付成果服务于关键功能，设计师需要在整个项目中都依赖它们，不断转换为用户可以与之交互的真实有形的设计。

16.专业的原型设计工具

用户体验设计的过程不是线性的，而是一个循环。无论创建什么样的产品，都需要专业的原型工具，将基本框架放在一起，然后添加可能需要的所有细节。

从逻辑上讲，设计团队的具体需求会因团队而异，但一些关键功能例如团队协作、需求管理、交互设计和开发移交等，对于大多数团队来说是必要的。

17.精心管理产品需求

一切都从收集需求开始，然后慢慢创建关键列表。虽然简单地列出一个列表听起来很容易，但随着项目的进展，要保持列表的条理性确实是一个挑战。

除了创建需求和检查需求之外，还有一个问题就是调整需求，需要从设计、技术和业务各个方面来处理各种需求，还要确保这些需求之间没有相互矛盾。

18.了解移动和网页产品之间的差异

网页端和移动端产品最明显的区别是屏幕尺寸，这意味着所有的视觉层次结构和信息架构都将从Web到App发生变化。

移动端产品会有更多影响设计决策的因素，例如设备的操作系统、使用产品的环境等。了解移动端产品在导航设计、用户流程等关键方面的差异是至关重要的用户体验设计原则。

19.利用UX设计模式

几乎所有的产品都专注于设计模式，它们可靠、易于查找并通过减少设计时间来为项目增加实用性。

▲ 当用户在谷歌搜索中输入的内容有问题时，谷歌会提供一个相关的搜索提示，辅助用户进行精确地搜索，解决用户使用不同方式在搜索栏中传达他们正在寻找的内容的问题。

20.使用合适的工具才能有效

拥有单一的内容来源可以为团队带来清晰性和高效性，如果线框和原型分散在多个渠道中，这种内容的集合就会变得很难达成。

通过合适高效的工具能够避免产品在到达终点时遇到各种各样的可用性问题，防止产品细节没有表现出来或者被忽略。

最后

通过这份用户体验设计原则的合集希望能够让你对这个领域有一个大致的了解。

没有人知道用户体验设计在未来会引领我们走向哪里，不过我们可以确定，无论它带给我们什么，肯定都会很有趣。

内容参考：justinmind.com/ux-design/principles

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

作者：Clippp

转载请注明：学UI网》掌握这20条用户体验设计原则，助力设计成长！

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

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

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

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

一、基础概念

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咨询、用户体验公司、软件界面设计公司