首页

页面加载方式介绍

涛涛

网易新闻




Pinterest

Artand



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

文章来源:站酷    作者:WseSteven 

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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




数据可视化--如何应用这12种图表

涛涛

怎样设计图表才能准确传达数据故事,设计的过程中需要注意什么?下面介绍这12种图表是如何应用的以及它们的优缺点

图表设计原则

怎样设计图表才能准确传达数据故事,设计的过程中需要注意什么?总结了几个设计图表的基本原则

1.确保准确性

数据可视化的设计首先需要始终保持数据的准确性和完整性。通过使用清晰的标签、准确的轴线等精准的的展示数据,使数据时刻都是真实可信未修饰过的,不能为了修饰美化数据而歪曲混淆信息。

2.提升用户体验

为用户浏览数据提供上下文标识有助于用户快速感知数据,设计时要考虑到用户现有的心智模型——这些心智模型可能由广泛使用的工具塑造而成,创建出色的可视化体验可使用标志性的功能引导用户找到他们需要的东西。以帮助感知快速响应的系统。

3.突出重点

减少认知负担使用户专注于主要的信息上,需要对整体视觉进行降噪处理。最大化数据信息的呈现比率并避免设计过多无关的图形元素。应用颜色促进图形的理解:标签、分类、突出显示或度量;帮助用户理解层次结构、数据方向和关系。


12种图表应用方式

下面介绍12种图表,应该根据什么样的场景结合哪种数据结构使用,以及是否存在可替代的方案等。其中有几种是在实际使用中并不常用的类型,大众对这类图表的理解并不多,我们只有在理解图表的含义及功能才可快速应用在设计中。

1.气泡图

气泡图也是散点图的一种,其拥有多元变量,除 X 轴和 Y 轴所代表的变量值外,每个气泡的面积代表第三个值。

缺点:气泡的大小是有限的,太多的气泡会使图表难以阅读。

设计时需注意:

a. 选择合适的气泡大小,不可过大或者过小,太的气泡容易遮挡到其他气泡不便于选择查看被遮挡的详细数据;太小的气泡难以选择

b. 不要使用奇怪的形状,均采用同一种气泡类型仅通过颜色做区分即可;无需做太多造型,多种造型结合不够直观难以区分种类


2.热力图

热力图用于指示区域内每个点的权重。除了将地图作为背景层外,还可以使用其他图像。热力图中的颜色通常与密度挂钩,每个颜色代表一个数据区间,通过使用颜色的对比来表示地理区域或数据列表的密度分布信息。

如何设计?

a. 使用简单的地图轮廓: 少量的留白轮廓可适当区分个区域边界,大量留白轮廓使边界过于清晰使各区域有割裂感的会分散注意力。

b. 使用简单的图案:图案过多容易干扰阅读,尽量不使用图案,如果必须要用使用1-2种即可,过多则难以驾驭;

c. 使用合适的颜色: 强烈的颜色会导致视觉负担,难以区分轻重缓急。使用单色或相近色,并调整阴影以区分区域更好。

d. 选择合适的数据范围:数据范围区间应该是均等的,而超出范围的数据可用 +/- 表示。

这些是设计热力图时需要注意的地方,适用于大多数情况,当然这也不能作为绝对的标准,需要具体情况具体分析。


3.桑基图

桑基图显示了从一个指标到其子级指标的流量及比例。在流程的每个阶段,节点可以组合或分割路径。两端的节点宽度显示其数值大小,因此节点越宽,占比越大。可用于财务、管理和能源分析或代表产品的生命周期。这种类型的可视化可用于描述实体从源头到终点的流程

优点:对于文字流尤其有用:金钱、货物、时间、选票等,但也可用于许多其他目的。通过连接流线可以直观的区分变量的聚散关系。

缺点:桑基图只能通过节点、连接和数值展示简单的数据故事。不能从中推导出更复杂的关系。


4.华夫饼图

华夫饼图是一个非常有趣的图表,通常由100 个方块组成一个整体,因此它可以根据指标与整体的关系进行着色或填充显示指标的占比情况,就像饼图一样,同时它也适合显示单个百分比。

优点:它能够显示整体的各个部分并比较单个百分比的多样性,指标比例能够更清楚地通过色块面积表示。

缺点:涉及太多指标时颜色区分变多使展示变得过于复杂,无法直观看出单个指标的面积结构,因此适合用在只有少数指标的展示


5.矩形树图

当画面中需要多次出现饼图或环形图展示指标间占比情况时,重复元素过多用户阅读时更加如意感觉到乏味,此时可以采用矩形树图展示占比,通过使用色块面积比例来区分指标间占比大小情况。

优点:使用区域空间而不是角度显示数据,当类别超过五个时(避免有时难以标记的饼图)以及可视化类别内的子类别,树形图比饼图更有用。

缺点:此类图表应用不够普遍,可能有大量用户对这种图表形式不太了解。


6.旭日图

旭日图是树图的一种替代方案,采用圆环形式表示分层数据信息。层次结构从内圈到外圈扩散,其展示形式像太阳一样由中心向四周发散。圆环的每个指标被切片对应一个节点,圆心是根节点,在出现多个层级换结构时通过圆心切换回上一层级。旭日图在用色上最好采用不同深浅的颜色来表示父子级结构在色调上保持一致性,使用户能够直观的看出层级间的关联关系。

优点:可以显示层次流以及整个关系的一部分

缺点:如果配色方案不正确,那么理解图表就会变得困难。此外,过多的切片会使图表拥挤且难以阅读。


7.靶心图

同样是占比图的一种,与常见饼图不同之处在于,该图的指标间没有关联即占比百分数相加不等于100,但又需要同时查看指标的占比情况,因此需要采用这种形式进行对比分析

优点:适用于指标间比较分析,视觉上较为直观;

缺点:因层叠环形过多无法在图表上加大量文字辅助展示


8.热词云

热词云是展示文本数据的可视化形式,由大量关键词组成的云状彩色图形。通过关键词的大小颜色等区分词语的使用频率以及重要性,可以快速帮助用户感知最突出的关键词。

优点:能够快速获取关键词信息,可通过热词快速检索所需信息

缺点:因热词云需要大量的数据支撑,对数据依赖度高,如果数据过少效果则不明显,不适合精确分析。


9.河流图

河流图是显示指标的大小或比例如何随时间变化,“流线”的垂直宽度表示该实体的大小。可以通过使用固定比例查看所有指标的整体大小的变化;也可以使用相对比例以某一项指标为参照目标,其他指标的值与此做对比;若所有指标始终达到 100%呈现的效果类似于面积图。

优点:可查看新指标的出现而其他指标消退的速度,整体的趋势发展状态比较直观。

缺点:虽然看趋势发展方向比较直观,但是详细的信息阅读起来较为困难。


10. 瀑布图

瀑布图通过对初始值进行多次加减运算来呈现达成某个值的运算过程。在瀑布图中,需定义好颜色的含义,不同的颜色用于显示不同的操作过程,例如绿色表示加法,红色表示减法,蓝色表示所有操作后收到的总值。这里起始值和最终值之间的所有值都是浮动的。

优点:快速查看在上一数据的基础上当前数据的变化情况

缺点:使用此图表是只能表示过程的流程


11.仪表盘

仪表盘是一种物化图表常用在时钟、汽车仪表等,通过指针角度代表当前数值进度。它可以直观地表示一个指标的进度或实际情况。一个仪表板仅能表示一种含义,若出现两种含义的仪表尽量分开展示,

优点:仪表适用于间隔之间的比较。

缺点:不适合用在具有多个分量的数据结构


12.甘特图

甘特图直观地显示了任务的时间区间、实际进度以及与需求的比较。因此管理人员可以轻松了解项目的进度情况。

优点:适合快读查看项目进度、状态随时间变化、项目流程等时间管理类信息

缺点:可查看整体情况,详细细节还需进行具体标注


总结

图表的类型多种多样,实际项目中使用何种图表需要根据数据间的关系来决定,如果画面出现同类型结构关系的频率过高想要增加画面的趣味性减少阅读的疲惫感可以通过改变图表的颜色进行区分,或者变换图表类型,有部分图表是可以替换使用的,例如:饼图表示占比关系,可以换成南丁格尔玫瑰图或环形图,也可换成上文所提到过的华夫饼图、矩形树图。因此在设计时可以不用太过于局限在图表的结构上,可以在其他方向进行优化。



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

文章来源:站酷    作者:胖kuan 

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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






用研成熟度的5个灵魂拷问

涛涛

最近一系列的对话让我意识到,类似于用户体验成熟度模型(UX Maturity Model),我们同样需要一套设计研究的成熟度模型(Design Research Maturity Model)。

在我看来,将某一领域的成熟框架死搬硬套地应用于所有企业,而忽略企业自身的使命或业务结构,是毫无帮助的。这种过度简化,甚至会导致企业自嗨式地以为自己每一步都做到了。

总体的能力成熟度模型(overarching Capability Maturity Model),沿用自美国国防部(Department of Defense),不过目前为止依旧是一个尚未被验证的框架。可能不像通常意义上讲的“硬技能(hard skills)和软技能(soft skills)”那样广为人知也弊端明显,但确实值得商榷。

因为任何值得做的事,都值得去质疑是否真值得去做。

因此,对于组织中真正想要通过评估产品和系统设计而持续探究领域潜能的个人,我提出这5个探索性问题。(最终,我会探索出一些类似节日五角星那样比较直观的视觉符号来展示每一个维度的进阶梯度和它们所代表的含义。)

 

5个灵魂拷问

这5个问题能帮你衡量所在组织做出更好设计研究的潜力,并让你在精准表达和实现组织目标上做得更好。

1. 你所在的组织中,让每个人敢于承认TA对于某件事的无知,在多大程度上是安全的?

To what extent is it safe for anyone in your organization to admit they don’t know something?

我之前有提到过这一点,如果一个人不承认自己知识欠缺时,是不可能虚心学习的。当组织内越多的人感觉到承认无知是安全的时,就越容易让你的组织处于持续学习并能毫无障碍地分享洞察的状态。

 

2. 在选择解决方案之前,探究多大程度上是从明确问题开始的?

To what extent does inquiry start with identifying the question before picking a method?

很多组织偏执地认为定量数据本质上就比定性数据更有价值,或是条件反射式地运用用户访谈和问卷调研去回答任何类型的问题。你要解决的问题会告诉你什么是最好的解决方案:是去阅读文献报告,或是做个问卷调研,或者做一轮访谈。你需要在调研前,先描述清楚问题。举个例子,如果你已经接受的实践方案是在烤箱内放入一把尺子看它是否温度足够,那么,你放多少把尺子都无济于事。

 

3. 跨职能和部门识别和共享问题,在多大程度上是组织的优先事项?

To what extent is identifying and sharing questions across disciplines and departments an organizational priority?

我们花了很多精力去建立知识库(research repositories)和知识分享,却没有花足够的精力让每个员工去理解一个组织需要知道的知识以及为什么需要知道。部门墙和职能墙持续存在。(比如为什么要将市场研究和产品研究区分开来?)跨职能和部门的协作探索(Coordinated inquiry)是效率和创新思维的源泉。围绕某个问题讨论并达成一致也能增进合作,因为个体和团队都不会再为了争夺一个神话般的胜利而争论不休。

 

4. 组织内各个层级的决策逻辑在多大程度上是清晰的?

To what extent is the basis of decision-making clear at every level?

我们擅长对外提问,却很容易忽视企业内部的现实。组织本身就是组织制定决策的社会背景,而这些决策工作也应该能被组织内想弄明白和受影响的人明确理解。

 

5. 通过系统研究产生的洞察结果,在多大程度上为决策提供了依据?

To what extent do the insights that emerge from systematic inquiry inform decision-making?

这是最终测试。如果设计研究产生的洞察容易被管理者忽视,那不论研究本身有多么稳健强大,都会毫无意义。

一种从目标(goals),到问题(questions),再到在明确的证据标准内运行的洞察力(insights operating within clear standards of evidence),所形成的功能反馈闭环,应该是每个组织的愿望。


翻译:贾婷   审校:LilyZhou
原作者:Erika Hall

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


分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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


B端数据可视化设计指南(信息图表篇)

涛涛

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

在如今的工作中(尤其是 B 端)越来越多的会开始出现数据可视化的身影,对于一部分小伙伴来说这个概念是较为陌生的,面对这道无形之中提升的“门槛”我们常常会表现的手足无措。所以,为了让大家对于数据可视化不再那么束手无措,我希望能通过这篇文章和大家一起交流学习,解决一些属于我们共同的问题。

那么我们还是老规矩,想要了解一个事物首先需要知道的是它的定义。

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

数据可视化的基本信息

1. 数据可视化的定义

较为笼统的来说数据可视化是一种由图形、图像、数字等元素组成的语言用于解释、呈现目标数据之间的关系。从这个定义上来看,数据可视化从外观层面来说是与图形、图像这些视觉元素密不可分,这也是数据可视化最为明显的特征。

而结合我们实际的生活与工作来说,数据可视化是一种以图形符号为主要表现形式,将不可见的、抽象的、复杂的、枯燥的、专业的、不直观的数据内容,有趣的、浅显的传递给用户的有效手段。用户可以通过这样的手段完成自己的目标(例如对选定范围内的数据进行分析,发现数据的周期与规律、迅速找到自己目标节点中的关键数值、对比几组数据以了解当下研究对象的情况等)这也是数据可视化最为明显的价值。

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

2. 可视化发展简史

关于可视化的发展史上可追溯至 1950 年,当时人们利用计算机创建出了首批图形图表,可以说是数据可视化图表最为早期的雏形,而在 50-60 年代的可视化中又以查尔斯·约瑟夫·米纳德的《1812-1813 对俄战争中法军人力持续损失示意图》为代表。

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

该图描绘了拿破仑的军队自离开波兰到俄罗斯边界后军力损失的状况,也是后世分析拿破仑对俄战争的重要数据分析资料,后来这种带状图被称为“桑基图”用来解释能量的流动。

而可视化真正被提到一个应用理论的高度是到了 1987 年布鲁斯·麦考梅克和马克沁·布朗所编写的美国国家科学基金会报告《Visualization in Scientific Computing》(科学计算之中的可视化),其意在强调了基于计算机的可视化技术方法的必要性,此时的概念已经与现在我们所接触的工作中的数据可视化是非常接近。

到了 90 年代初人们发起了一个称为“信息可视化”的研究领域旨在为许多应用领域(科学、商业、行政、财务、数字媒体)之中对于抽象的异质性数据集的分析工作提供支持,与前面提到的“科学可视化”交叉形成了现在耳熟能详的“数据可视化”,此时这个词汇才慢慢的被更多的专业领域的人所接受,并在之后互联网的不断发展中扩充着自己的分支。

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

3. 为什么会使用数据可视化

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

目前大量开始使用视觉可视化的原因其实非常简单大致的原因可以分为需要处理的数据量太大了和人脑不够用了。

据不完全统计 IBM 公司每天有 2.5 亿字节数据的吞吐量,麻省理工学院的研究科学家 Andrew McAfee 和 Erik Brynjolfsson 教授指出,如今在互联网上传递的数据量比过去 20 年的总和还多,而且根据 IDC 预测,到 2025 年将有 163 万亿 GB 的数据。

这是非常惊人的,而这么多需求的数据量单凭人脑的计算能力和处理能力来说是完全无法与之匹配的,研究表明人脑很难同时处理 5 组以上的抽象数据,所以这种单线程的处理方式就决定了需要借助外力。

而对于用户尤其是决策层的用户来说在现实的工作场景中经常需要同时处理超过 5 组以上的数据并需要对其建立精准的分析模型以便于做出最准确的决策所以基于这样的需求,数据可视化设计氤氲而生。

4. 数据可视化的优势

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

基于数据可视化的需求来看,数据可视化的优势是显而易见的,可以概括为两点:认知减负和传递赋能。

认知减负是使用者在使用数据可视化工具时候的最直观感受,当所面对的庞大的、复杂的枯燥海量数据集变成了图像化、通俗化、形象化的视觉符号时,我们会本能的放下对于面对冰冷数据时候的抗拒和戒备,这是因为人对于一目了然更加接近自己熟悉的有趣事物的时候,会更为亲切和愿意去主动理解。而且被处理过、规划过的简洁直观表现形式,能更为直接的让使用者看到数据与数据之间的关联,进而分析出其潜在关系,在人对数据的认知这个环节上降低了识别成本和分析成本。

传递赋能上图像传递更接近人类最本能的获取信息的方式,比起文字来说图像更像是一个解密的步骤,通过解开文字描述这重“密码”将最本质的信息进行呈现,而且对比文字,图像所能够承载的信息其实更为广泛,而且人类读图的效率要远远高于阅读文字。

无论是一个约定俗成的语义符号形象还是符合语境的配色都能够起到比文字直白表述更为强烈的深入人心效果,并且图解的形式并不受限于语言的障碍,极大的降低了沟通成本。

5. 使用目标

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

基于用户的使用目标来说,使用数据可视化其实就像是一个侦探用“蛛网图”辅助自己梳理思绪进行破案的过程:将一些有关的,但是较为零散信息数据用一根根线索穿插起来,形成体系化的联系,方便使用者迅速把握各个节点之间的关系进行推导。

所以说我们在设计数据可视化的时候并不是对我们拿到的数据的无脑映射,而是要基于用户的目标经过一定的处理和优化后才能进行呈现,随时记住我们是给用户在打辅助,所以我们每一步的设计一定要基于用户的思考。

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

用户的期望是能够高效、清晰、简洁地完成数据的对比、关键节点的查询、每组数据之间的分析等一系列交互,提升自己的工作效率,降低自己的学习和使用成本。

6. 应用场景

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

数据可视化的应用领域较为广泛涉及医疗、统计、管理、金融、娱乐、人工智能等一系列领域,在 UI 的设计中我们最常接触到的包括:PC 后台的数据概览、数据可视化大屏、游戏 UI、后台实时监控等。

设计师们的任务

当我们大致了解了数据可视化的历史、使用原因、优势、用户目标、应用领域后下面就要切入我们设计师最为关心的话题:我们在设计中的任务。

1. 设计难点

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

数据可视化作为一门跨领域的学科,本身对于从业者而言就有着一定的综合素质要求,但由于国内教育并没有垂直教学学科,所以在现在的阶段从业人员一部分由纯视觉设计专业的同学组成,另一部分由纯工科类型的专业的同学组成。

于是这就导致了非视觉设计师在进行设计时,会将全副精力放在强数据的准确性、合理性上,从而让视觉的易读性上有一定的损失,表现形式也较为单一枯燥,视觉感官较差,反观视觉设计师通常会将数据可视化在视觉表现形式上过度用力,虽然营造了很好的视觉体验,但是从其实用度、可用性上来说会大打折扣。

于是设计的难点很多时候就会集中在平衡视觉与实用之间的关系。

2. 设计目标

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

通过以上分析,不难看出设计的主要目标,而面对这句较为抽象的“把握设计与实用之间的平衡”其实无外乎也就是拆解到功能和视觉这两个方面。

从功能上来说,我的目标是提升用户的数据阅读效率、让用户能够迅速 Touch 到目标信息,提升交互效率,一切都是以结果为导向,以解决用户问题为导向,一定记住人们不愿意接受未处理过的数据。

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

而从视觉上来说,我们的目标是处理好在视觉上各个模块之间的统一、透气关系,将数据进行可视化的同时尽量提升感官上的审美体验与传达上的有趣。

以上会作为后文中我们每一步设计的指导和检验的方式,从实际操作的维度上来说二者也并不是五十比五十的分配,遵循的原则是:体验一定要让位于功能,所以在视觉的层面发挥的空间其实需要比较克制。

案例制作

了解了数据可视化的设计难点,明确了数据可视化的设计目标,那么我下面进入我们最重点的环节:可视化页面案例制作,由于数据可视化的形式较多,这次我们以工作中经常接触得到的 PC 页面数据概览页为例。

1. 明确性质

同样的,细化到数据概览这个分支项目,我们同样需要明确了解其基础定义和性质,严格意义上来说数据概览部分属于 Dashboard design(仪表盘设计)的一种,其主要的目的和功能可分为分析和操作两块。

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

所以从综合的角度来说数据概览部分可以理解为:

其它模块的摘要视图,并显示来自应用程序各个部分的关键信息,从这点上来说建议此模块可以在其余模块设计完后再进行设计,如此有利于设计师从一个全局的视角切入进行设计,理解上也会更加透彻,否则很可能会陷入在你设计其他模块的时候不断地返回对其进行修改的怪圈。

它也是核心功能、常用功能的快速操作助手和快捷页面跳转(有点类似于导航),交互功能的排布和关键信息的显示,其共同的要求点是显而易见的,即明确各个模块之间的层级,做好顺序、优先级排布。这就需要你对业务目标有一定的了解,记住,对业务目标不了解,你的设计将毫无意义。

你可以通过查询一些内部资料、报告、也可以询问产品经理等相关负责人,还可以通过用户调研得出,这里不展开说,在动手之前你需要搞清楚:各模块之间优先级如何、你需要在一张单独的图表内展示多少变量、想展示一段时间内的值是项目和项目之间还是组与组之间、每段变量中有多少关键数据需要展示等问题。

2. 定义模块优先级

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

如上图所示,在工作中我们接到需求的时候是面对一堆冗杂的数据集,组成了若干个模块,但是正如上文所说,我们并不能对其进行无脑的可视化映射,所以首先要做的就是要对各个模块进行优先级的梳理排序

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

明确了各个模块的优先级排布之后,我们开始对每一个单独模块进行可视化转化,即哪一个部分分别用什么类型的可视化形式表现,这一步非常类似于土地使用规划,当你在将土地划分完后,为每一块土地定义其使用类型。

3. 明确图表选择

想准确的将图表与所要表现的数据进行对应,需要了解图表本身所包含的基本元素。

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

在这些元素中正常情况下一定在图表中的有:标题、时间范围、图形主体,经常出现的有:坐标系、图例、提示信息,有时候会有的有:切换选项和值域。

知道了这些重要的基础信息了,那么在面对这么多图表的时候我们该如何正确的选择来进行使用呢?

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

其实和之前说的一样:基于目的来进行思考,所谓的基于目的来进行思考也就是要明确你所确立的数据指标需要分析的维度,而日常使用的数据需要分析的维度无外乎:比较、构成、分布联系。

比较类图表

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

比较类图表应该是大家最为熟悉的范畴,第一时间能够想到的就是柱状图,这也是运用最为广泛的图表之一,经常出现在 PC 端之中,用于描述分类数据之间的对比,描述的数据可以是地区、品类甚至一个时间周期,但由于其扩展能力有限,所以一般不建议项目超过 12 条。

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

条形图与柱状图类似,看上去只是交换了 X 轴与 Y 轴,功能和承载数据种类较为类似,但不同的是,条形所能承载的项目数量相对于柱状图而言更多,由于其优良的纵向延展性一般用于手机端较多,而且从上到下的阅读方式符合人眼阅读习惯,所以也会经常用于排行榜的设计中。

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

分组条形图是条形图的衍生之一用于比较多个变量在不同区域之间的数量关系,比如当想比较同样一款衣服和鞋子在四个门店中的一个季度的营业额时就可以使用分组条形图。

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

双向条形图表适合比较两组以上的分类数据比较,和分组条形图较为类似,但是由于自身外观特征更适合用于比较两组意义相反的数据,也正是如此,双向条形图的组内二级分类数量一般不要超过 3 条最好。

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

折线图与前者最大的不同就在于在坐标轴中加入了连续类别这个概念,数据基于时间等因素变得动态了起来,注重变化趋势的展现。

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

面积图是折线图的延伸,除了表示变化趋势之外还能比较所选范围内积累的值。

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

玫瑰图应该算是可视化图表中的“网红”,因为我们从小学的课本中就知道它还有一个别称叫“南丁格尔玫瑰图”。它是一种圆形的直方图,使用半径长短表示数值大小,其特点就在于因为其独特的外观可以将数值之间的差距在视觉层面进行放大,和将坐标轴范围缩小来提升视觉上数值的碾压是一个道理,发布会吹水最爱,但是要注意的是这不是一个表示占比构成的图,因为玫瑰图的每一份角度是一样的,一定要和饼状图等图区分开来,它用来表示的还是数值与数值之间的大小

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

雷达图经常用于分析一些多维的性能数据、评分数据,经常打游戏的朋友应该不陌生,有多少五边形选手可以扣个 1,每一项指标越接近圆心说明状态越差,越向外说明越佳。

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

子弹图用于比较当前数值与目标之间的关系,比如看当前业绩是否达标,也可以通过标记划分区域来进行更好的评估。

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

漏斗图适用于业务流程比较规范、周期长、环节多的单流程单项分析,一定要有清晰的环节,比如监控买家从浏览到最后下单的数量统计以求得转化率,不适合无逻辑、无流程的分类对比。

构成类图表

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

构成类图表整体上来说主要用于观察部分和整体的占比关系,最经典的莫过于饼状图,这个不用多说,通过每一份半圆角度所占整个圆的大小来表示部分和整体的关系,但是由于其所占面积较大,经常会让视觉过于集中,影响注意力。

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

相对于饼状图而言,环状图十分有效的避免的干扰视觉的问题,其本质是将饼图中间掏空,功能与饼图基本一致,但是视觉上做到了轻量化,目前在日常设计中较为常用。

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

旭日图相当于前面二者的结合,适用于展示多层级数据的占比关系,距离圆心越近代表层级越高,下一层级的总和构成上一层级,存在一定的父子层级关系。

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

堆叠面积图出了可以表达趋势外,其优势在于能够表达总量和分量的构成关系,堆叠面积图上的最大的面积代表了所有的数据量的总和,是一个整体。各个叠起来的面积表示各个数据量的大小。

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

堆叠柱状图的优势在于它既可以表达一级分类的比较,同时还能看出二级分类在其一级分类中的占比,但是缺点在于二级分类并不是按照同一基准线对齐的,相比于堆叠面积图更为常用。

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

瀑布图用表达两个数值之间的变化过程,过程值为正的时候,向上加,过程值为负的时候向下减。

分布联系类图表

分布联系类地图在这两年在国人的心中其实已经非常熟悉了,因为疫情今年的地图可视化的应用经常出现在我们的生活中,地图可以结合不同的表达方式:

可以结合散点、可以结合动画、还可以结合引导线以及热力图的方式,图的形式使用视具体的业务需求来定

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

最后就是气泡图,这是在查看分布关系中最为经典的视觉模型,用气泡的面积大小表示数量,结合辅助线可以更好地观察分布情况

4. 匹配图表 重构布局

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

当我们对每种图表的功能和使用范围有了一个较为明确的认知之后,下面我们就可以对我们之前所规划好的优先级的模块进行可视化形式(图表)的匹配了。

进行匹配过后,我们将对布局进行重构,整体重构需要遵循的原则是

  • 布局层级明确,首屏尽量曝光更多内容
  • 统一透气,具有呼吸感

布局层级明确,首屏尽量曝光更多内容

从首屏曝光更多内容来说,主要是因为基于分析类的数据概览工作场景和 Analytical dashboard 自身特征决定的,用户希望能够通过仅仅一屏的的大小进行对各类信息的情况有基本的把控,达到一眼全局的目的,其主要注意力都会放在首屏,所以我们需要尽可能的在首屏安排更多的信息。

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

当然首屏内容也并不是越多越好,一般建议也尽量不要超过 7 组模块,而在层级明确这块儿主要是根据人眼阅读习惯所产生的优先级排布:正常情况下都是左上为优先级最高,而右下优先级较低,这是无数经典的眼动测试和设计总结产生的最常用结论,就不展开叙述了,所以当我们按照优先级、首屏曝光更多内容的原则进行处理后会得到如上图的布局。

统一透气 具有呼吸感

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

这主要是视觉层面的问题,统一透气的要求在首页概览中可以依靠栅格系统来解决,它可以有效的保持页面布局一致性,为页面建立基础布局框架,将页面中的所有元素都捆绑在一个体系之中,同时还能有效解决适配问题。

5. 模块拆解

完成了大规划之后,下面我们开始对一个一个的模块进行拆解,同样的以目标指导设计,边设计边验证

层级明确 突出重点

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

和大规划一样,单独到每一个图表同样要时刻注意层级的梳理,销售渠道部分很明确应该是运用一个折线图的形式,由于业务目标上来说更关注销售额而不是销售额和订单数的比较,所以我们选用了一个带有切换选项的折线图形式。

但是我们会很容易发现在读图时会出现较大的视觉干扰,并没有能够很好地突出重点信息,视觉层级不清晰、混乱。

于是我们对没有重点的视觉层级进行梳理,像之前划分模块那样,对视觉元素进行高、中、低的 P0、P1、P2 的设定,提升易读性

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

P0:层级最高的自然是重点信息突出部分,所以我们需要在其之上做加法,给予内容异形悬停样式进行具体强调,配合投影加强视觉效果,有效传递用户,拉开与别的元素的层级,同时数据部分用特殊字体并适当加大字号进行设计,方便用户第一时间能够看到所要强调的数据具体值。

P1: 其次就是主体图形部分,这是用户需要看到的重要部分,在使用场景中会长时间盯视,所以采用更低的明度与更高的饱和色颜色确保易读性,但是也不致于会让用户太晃眼产生视觉疲劳,最后考虑到该模块所处位置属于页面中较为核心的地带,给予一定的颜色透明度渐变装饰,在强化主体图形的同时不致于太显单薄。

P2:前两者都是一定程度的做加法,那么层级最低的元素需要开始做减法,此时轴线、刻度、切换选项等元素需要弱化视觉层级,降低透明度,尤其是背后的刻度线与背景的明度对比大概控制在 1.6:1 上较为合适。

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

销售总额、订单数、渠道数同属于一个数据统计的范畴,最忌讳的就是把以上提供的三个信息给做平,让用户抓不住重点,面对这样的情况还是一样,确立需要突出的重点信息给予特殊文字和大小的设计,选择合适的主体图形。

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

但在这里需要注意的是由于在这个模块中 P0 是金额数、订单数、渠道数这些重要值,所以可视化图形需要适当为其让步,不要放在阅读中心位置,按照 P1 来进行处理,而订单数、转换率这样的标题就成了 P2 需要适当降低透明度和文字大小,不干扰主要信息的表达。

统一营造

说到统一,最先想到的一定是色彩,无非也就是需要处理好对立统一关系,而这其中统一的比例又要大于对立,配色上尽量选用同类色系,不宜太过花哨,尤其是对于 B 端而言,建议在可能的情况下不要超过 5 种,而且主色、辅助色,对比色的比例建议控制在 6:3:1 的比例(但不绝对),既能做到有所区别又不致于过于绚丽干扰视觉。

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

你的主色不一定要迁就你的品牌色,但是一定要是如上文说的尽量低明度高饱和,以适应于长时间的注视。

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

颜色过后就是字体,字体的使用需要极为谨慎,如果可以尽量只出现一种字体(但不要超过三种),并且只采用基础字体,正常情况下都是将其作为一个需要被降噪了的视觉元素来对待(比如降低透明度),在 PC 端中尽量也不要出现较多不同的字号、字重,造成没有必要的视觉干扰。

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

除了字体之外,在统一感的营造上卡片的布局结构也需要尽量保持一致,这是为了提升易用性,同一个产品内,相同布局会给予用户相同交互、相同功能的暗示,也更容易培养用户习惯,提升操作效率。

呼吸适中

呼吸感是留白的艺术,很考验设计师的排版能力,在单独的模块内,元素与元素之间尽量不要用实线进行间隔,可以的话利用亲密性原则通过元素间距的远近进行布局。

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

而柱状图的设计上,柱与柱之间的间距最好大于柱宽的 1.5 倍,这样才显得视觉上较为透气,不致于太臃肿。

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

最后就是模块中的边距留白部分,这点一定要重视,不然不仅你的版心会变散,还会严重影响你的页面呼吸感。

细节处理

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

细节上首先要说的就是横纵坐标轴上的文字,上面的文字一定不要过长,最好的方式是将文字进行精简。然后横、竖排对齐处理,如果实在不能精简那么再进行斜排的方式。

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

第二点就是横纵坐标轴有的时候会因为需要展示的数据过多而过于密集影响阅读,这个时候可以采用适当增加一个值域的划定的方式来进行坐标间距的缩放。

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

第三点就是,在排行榜等模块可以适当增加一些小设计,比如金、银、铜的设计,提升情感化元素的融入。

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

第四点就是,尽量不要选用一些 3D 的酷炫效果来做可视化,因为这种效果很容易对数据进行遮挡和扭曲,不是非常适用于高效阅读,也不适合 PC 页面上的交互,而且也不利于开发,比较得不偿失。

6. 组装自检

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

当所有的模块设计完成后,像拼高达一样进行组装,组装完成后适当调整其过于干扰视觉的地方,然后进行自检。

自检不只是从检查你的视觉、你的模块间的布局,更重要的是带入使用角色来进行检查,你可以模仿用户使用中的各种需求场景,对已经制作好的页面进行交互和阅读,看是否能够快速高效地完成使用目标。

当然除了自己之外,你还能在有条件的情况下找专家用户进行使用,即使记录使用中存在的问题并及时进行调整,当初步使用大致无问题后便可以交付。


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



文章来源:优设    作者:肃静、

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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




好的表格信息展示都有这三个特征

涛涛

表格是B端产品中出现最高频的模块之一,我们认为良好呈现信息的表格应当做到疏密适度、高效扫视、精简克制。

前言


表格作为组织整理数据的手段,可以有效的向用户展示数据信息,是B端产品中出现最高频的模块之一。

下图为典型的B端表格示例:



用户主要通过表格浏览获取信息、对数据进行筛选、排序以及相关业务处理等更多复杂操作、对比数据的差异与变化(关联和区别)。好的表格信息展示设计,应当是能够辅助用户高效便捷的实现以上场景中的诉求。

今天我们就来讨论表格设计中一个重要的问题——【应该如何考虑表格信息展示】。首先抛出结论,我们认为良好呈现信息的表格应当做到疏密适度、高效扫视、精简克制。


///


一、疏密适度


常见的表格信息包含文本、标签、状态样式、数值统计图表、关键信息Icon等。表格单元格是信息填充的基本单元,行高和列宽的定义决定了表格信息的疏密程度,进而决定了表格给用户的直观感受,因而下面分别从行高和列宽两个方向来探讨表格信息展示如何疏密适度。



1、定义合理的表格行高


a、行高模数设定

在具体设定表格行高时,由于表格中以文字信息为主,我认为可以参考文字排版的常用做法,将整个表格的行高分成文字行高、文字与分割线间距离,即上下间距两部分来考虑。文字行高可以设定为字号的1.2~1.8倍,文字与分割线间距离可以设定为字号的1~1.5倍。分为这样的两部分也比较符合开发同学写代码时的习惯(多行行高同理去设定)。



根据用户场景的不同,来选择模数倍数,需保证系统内使用统一的模数。比如,针对用户快速浏览获取大量数据场景时,可以选择1.2倍作为模数,列表更为紧凑,同样扫视范围内,可获取更多信息。


b、为小屏幕考虑一屏显示的行数

表格行高决定屏幕内能呈现的行数,即用户在一屏内能获取信息的数量,主要影响用户纵向对比数据的效率。对于1920*1020(包含该分辨率)以上的大屏用户,对于一屏显示行数的感知不强,但对于1366×768、1280*720等这类小屏,显示行数有限,用户进行纵向数据对比的效率就会有所降低。在设计前,应当充分了解目标用户的行为诉求,了解目标用户设备屏幕分辨率的占比分布情况,有针对性的设置行高。


c、用户自定义行高的场景

B端产品的特点之一是通用化,覆盖用户角色多样。然而用户个体对于表格信息呈现密度的诉求经常是有所差异的。比如个人视力的原因,有些用户喜欢表格行高值大一些,看起来舒适透气,便于阅读。而有些平台用户由于很熟悉线下excel表格模式,希望线上的表格也尽可能像excel那样紧凑,以便他们在一屏内看到更多的数据,进行对比,提升工作效率。产品为了让不同用户都能获得较好的体验,可以考虑把表格疏密度的设置开放给用户,建议不是完全开放给用户去调整尺寸,而是给出一定阶梯度的快速选项,例如舒适、标准、紧凑三种高度来满足用户需求。

例如,Gmail提供默认/标准/紧凑三种表格密度设置,如图:



2、灵活扩展的横向空间


通过对表格固定位置与列宽的调整,扩大表格数据空间,使信息不局促,空间更透气,保证横向扫视易读性。


a、列宽极限值设定

设计师需要根据表格承载内容定义表格的列宽,应包含最大/最小/默认列宽的定义以及使用规则。

我推荐的一个规则是:

规则1:当相对列少【浏览器宽度-页面其他模块 > 全部列的默认宽度和】,则各个列自动等比拉伸,撑满屏幕;

规则2:当相对列多【浏览器宽度-页面其他模块 < 全部列的默认宽度和】,则出横向滚动条,每列宽度为默认宽。

另外需注意最小值设定时应避免信息展示出现【对联式表格】。对联式表格最大的问题在于,一屏内展示的行数有限,当用户纵向对比数据时,需往复滚动多次,记忆压力大;横向扫视时,阅读视线不能一直保持左右横向预览,而是不停上下左右切换,使用体验不佳。



b、横向『偷取』屏幕外空间、行高模数设定

当压缩列宽也无法在有限空间内展示大量的数据指标列时,我们可以借助横向滚动来『偷取』屏幕外更多空间。横向滚动需用户拖动滚动条进行浏览,有一定操作成本,所以要结合业务实际情况选用是否利用屏幕外横向空间。

随着行和列的增加,用户的瞬时记忆会达到极限,超过“7±2原则”的范围,用户需要依靠辅助信息去阅读表格内的数据,防止遗忘某列数据的意义。因而当表格数据列较多横向滚动时,建议为用户固定重要信息列,如标题列、操作列。同时用户浏览表格时是符合F型扫视原则的,建议固定列显示在表格左侧,方便用户从左至右浏览数据、从上至下对比数据时能够清晰定位当前所浏览数据的主体是什么,同时可根据需要快速发起操作。



同理,用户拖拽纵向滚动条来阅读数据时,可固定表格的表头,帮助用户在阅读过程中清晰知晓单元格数据的意义。


c、用户自定义展示信息

针对需展示大量数据的情景,我们除了【偷取】屏幕外空间外,可以根据B端产品提供的数据表格是覆盖全部用户角色的全量数据的特点,让不同用户角色来自定义想要浏览的信息,从而提升表格的可读性。下图为百度信息流推广平台的自定义列功能,用户可根据需要选择展示的数据列,系统将在用户完成选择后,主动帮用户保存自定义内容,下次登录后,表格依然按照用户定义的数据来展示。



///


二、高效扫视


无论是在表格中要明确的定位数据,还是顺序阅读,高效扫视都是B端用户一个很重要的诉求,我们在设计表格时可尝试一些有效手段提升用户浏览获取信息的效率。


1、合理的对齐方式


数据信息本身包含多种格式,可遵守一个基本原则即文字左对齐,符合从左到右的阅读习惯;数据信息右对齐,方便数据大小的直观对比。

具体对齐方式可参考我们建议的方式:

文本字段:可点击字段、普通文本类、数字、字母等,长短参差不齐,左对齐;

格式化字段:日期、时间、部分枚举类等,字符数一致且较短的,左对齐。

数据字段:金额、数据、百分比。带小数点等数据,方便对比为主,右对齐。



2、去除视觉杂音,强调对比关系


a、正确使用分割线,实现对表格行与列的强调

横向分割线可强调行内信息的连续性。垂直分割线在缩减元素之间的距离后也能区分不同元素,更好的强调纵向数据对比。但只要遵循良好的对齐方式,通常不展示纵向分割线,避免信息干扰。因而表格中通常仅使用横向分割线和底色分割,提升表格阅读效率。



b、斑马线作用有限

斑马线即隔行(列)变色。它能让行(列)间界限更为明显,但由于与分割线的作用类似,起到的作用有限,可针对不同场景酌情考虑是否使用。比如针对不同类型的数据(如总和、平均值)使用不同底色来区分,可以更突出强调该数据。要注意的是,隔行(列)换色的两种颜色不能反差过大,否则看来太“跳跃”。

对同一类数据而言,分割线就已经能够明显区隔,所以可不使用斑马线,但需要给出单行的悬浮状态,强化横向导视,避免出现列数过多引起数据错行的问题。



3、突显重要内容的视觉重量


前面我们提到表格呈现的数据信息除文本外,还有其它一些可视化数据。可视化一方面提升了列表视觉表现力,增加差异化,另一方面让内容更加突出,提升阅读效率。例如:数据列中数据异常时,最好可以醒目的形式突显,让用户一进入页面就能快速注意到异常状况。



///


三、精简克制


体验好的表格一定是克制的,克制应表现在信息的适度隐藏以及内容折行与截断展示原则。


1、适度隐藏信息


a、隐藏低频操作

当表头需要承载排序、表头筛选、提示等功能时,不建议一股脑的将所有功能展示出来。用户对表头的诉求是定位数据指标﹥执行操作的,因此可根据具体业务定义展示哪些操作,将其它操作隐藏,有需求时用户主动触发再展示。比如,百度搜索推广平台的推广管理页面提供了全局筛选,所以表头筛选对于用户而言是相对低频的操作,我们选择隐藏表头筛选的图标,当用户鼠标HOVER表头单元格时再展示。



对于表格行内的操作我们也应当进行优先级排序,为用户专门设置操作列展示高频核心的操作,其它相对低频的次要操作可隐藏在相关数据单元格中,用户有诉求时hover对应单元格即可快速发起操作。



b、隐藏辅助信息

表格中的有些数据指标是综合纬度的,当用户关注点定位于该指标时,需要通过细分数据来理解、分析。指标的细分纬度信息虽能起到辅助用户更好理解数据指标的作用,但如果全部拿出来在表格列展示,会让表格变得臃肿不易读,此时可以考虑采取一定设计手段去隐藏这些信息,把触发展示的自由度交给用户,也更符合用户逐级查看的场景。例如,百度搜索推广平台中关键词列表中,质量度指标是由多条数据共同决定的,我们采用了将细分指标聚合在气泡卡片中,当用户HOVER质量度得分数据时展示出来。



再比如,有父子层级关系的数据,可以通过父子折叠表格将子信息默认隐藏,用户根据需要,去展开查看详细的子信息。



2、设定折行与截断规则


B 端业务的数据信息复杂多样,信息内容的长度高度是多样不可控的,很多内容会超出我们限定的最大列宽,最大列高,我们应当给出折行与截断原则去约束内容的展示,而非总是为具体情况而做特殊设计,破坏体验的一致性。

截断折行原则设定时要细分,不能简单粗暴的一刀切,比如一行截断这种,如日期、时间等固定格式内容,拖动列宽后文字应折行而非截断展示,避免影响用户误读。再比如很多业务实体标题字段是格式化的,即标题前面部分可能都是一致的,这时候如果简单的截断,用户就需要逐一Hover才能找到定位到要找的数据。因而折行与截断原则,我们建议是给出三种:单行截断、双行截断以及自适应截断,根据具体业务情景选择。

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


文章来源:站酷    作者:百度MEUX

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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


《2021年第一季度民用航空业移动端趋势分析报告》

涛涛



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


文章来源:站酷    作者:简立方SimpleUX 

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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


「感知性模式设计」是什么?

涛涛

总的来说,所谓的感知性模式就是物体或者物件的一种外在的呈现而给人的感觉或者感受。例如同样的一个电脑桌上都有电脑、鼠标、或者其他的物件摆设,但根据不同人的使用给人的感觉是完全不同的,或是凌乱、或是整洁、或是简约,而更直观的差异可能来源于这些物件的样式、材料、颜色、纹理的不同而传递出来的视觉感知,

如果沿用到互联网方面的设计,那么感知性模式的例子可能包括:文字信息、版式、配色、布局、插图、图标、形状纹理、间距、交互或者动画等等,这些都作为具体方式来表达感知性设计。

说到这里,你可能会认为感知性设计是一个纯粹的外在视觉表现,但想要完全的得到一些成效,更多需要把这个事情融入到品牌的核心中,随着产品的发展而发展,进而在众多的同类此产品中脱颖而出。

感知性模式较强的产品例子

案例一:微信

微信作为一个超过十亿用户的产品,随着版本的不断迭代,功能也越来越强大,因此从产品体验上来说也可能会给人一种臃肿的感受。但微信整体的感知性模式的设计是非常清晰的,从桌面 APP 的 logo,再到内页呈现的图标、颜色、按钮样式、交互反馈等等的设计都是统一性很好的设计。

腾讯高手都在学的「感知性模式设计」是什么?

案例二:Instagram

Instagram 作为全球热度最高的图片分享社区,自始自终都有着非常明显的感知性,整体 APP 的简洁性设计让用户更加专注于内容本身,似有似无的品牌蓝色似乎已经牢牢融入了用户的大脑中,这种感知性无需被刻意放大,但就在潜移默化中用户就能感受到。

腾讯高手都在学的「感知性模式设计」是什么?

案例三:抖音

作为目前国内最热的短视频平台,抖音的感知性模式已经深入的印在用户的脑里,我认为抖音主要在以下三个方面让用户记住了 TA:1.品牌属性,抖音的品牌属性就是用最简单的方式让用户记住了 ta,通过 APP图标、闪屏、发起按钮的图形及品牌色的串联;2.内容属性,具有自己平台气质的内容特性,抖音在最早期主打的“潮酷”类的视频让它跟快手做了明确的区分;3.体验属性,大胆的全屏滑动视频交互很好的结合了手机的体验方式。

腾讯高手都在学的「感知性模式设计」是什么?

感知性模式的作用

1. 有助于品牌形象传递

在同一个领域中的产品,在功能上大多会具有一定的趋同性,而由于这几年的扁平化风格盛行,更把产品之间的类同性推向极致。因此更需要通过感知性模式的设计来进行区分,这种区分不仅仅只是视觉上的差异,更多是来自于产品者对于自己产品方向的把控。

书中提到 Spotify 的例子,Spotify 给人感觉是温暖的、私人的,虽然月活跃量已经超过一亿,但给用户的感受仍然是独特的,除了功能之外,主要在于整体的图形样式、颜色搭配(黑绿的品牌色比例把控)、交互中微妙而平静的感觉,以及排版上传递出来的感受。

从上面这个案例来说,基础体验是用户值得参与的一个重要环节,但感知性模式的设计更多是来源于产品者想要给用户传递什么样的品牌性格或品牌核心,Spotify 的静谧性及沉浸式体验,这是 Spotify 设计师想要传递出来的品牌核心

2. 感知性模式通过界面传递品牌

感性性模式的品牌传递主要是通过界面或者运营调性来让用户得到感知,并且让人记住。在界面上想要让用户记住我们的产品,更多的是需要思考三个关键点:设计的独特性;设计的辨识性;设计的区分度。

设计的独特性

设计的独特性往往是通过我们界面的排版、图标、图像、交互体验方式、交互措辞等等一系列的内容来奠定。这些内容我们常常可以在国外的软件中看到很多不错的案例。

还是以 Instagram 作为案例来说,ins 风的极简设计是一种贯彻始终的独特性存在,除了设计界面本身的研究之外,还在内容上下足了功夫。以照片浏览来说,始终坚持大图的体验方式,保证一屏内的沉浸度,而非为了效率,这与 Instagram 一直具有较高的照片质量密不可分。

腾讯高手都在学的「感知性模式设计」是什么?

设计的辨识性

辨识性的可打磨方式有很多种,以图标作为一个基础的案例来说,我们在设计图标的时候是否有结合整体产品的性格去思考并且设计,并且深入打磨。简单的区分,我们可以从风格(例如:简洁的、有趣的、硬朗的、柔软的等等),更深入的内容就是需要思考如何传递品牌感,以及将图形与品牌理念、产品性格进行结合,通过设计贯彻品牌辨识性。

以 YouTube 这个 APP 的图标作为案例,设计师在设计时更多是希望表达整体 APP 设计的简洁性,弱化图形对于内容的影响,因此在整体坚持了三个核心关键点:简约、细线、普识。

腾讯高手都在学的「感知性模式设计」是什么?

设计的区分度

在目前趋同性的主潮流之下,如何把握好产品设计的区分度变得尤为关键,也就是说,当用户在看我们产品的时候会不会乍一眼认为是另一个产品。区分度的把握往往来源于品牌对于颜色的选择,我们在定义色调之前需要对主流竞品做一个分析,从中找出属于我们的区分度,并且尽量避免重合性。

以现在流行的电商 APP 为案例,很大电商平台的设计大多类似,在品牌色的选择上则尤为重要,因此需要尽量避免具有耦合性。

腾讯高手都在学的「感知性模式设计」是什么?

让设计系统更加连贯

我们在产品设计中想要把所有的模块或者组件做得一模一样几乎是不可能的,但我们可以利用感知性模式的设计进行内容模块的渗透,让用户对于整体的感受感知是一致的。

以 material design 的设计系统为案例,他所确定的是一个规则,而并不是任何的模块或者任何的图标都是一样的、无差别的,如果都完全长得一样会让设计变得单调、无差异性,通过设计准则来限定整体的图形风格,应用在不同的位置让用户从视觉角度感知到风格的一致性,这样也可以让整体的体验更连贯。

Material design 的设计准则

富有表现力

为了突出 Material Theming 必须提供的功能,每个 Material 研究都表达了一个不同的品牌。

各种各样的

为确保 material 主题化和组件满足尽可能多的产品需求,material 研究代表了不同类型的产品。

基于现实

为了尽可能地复制真实产品,每项研究都会识别用户、显示功能用户流并应用现实世界的限制。

腾讯高手都在学的「感知性模式设计」是什么?

感知性模式的探索与思考

我们在日常设计功能性模块更多的是考虑到用户对于产品的体验感受,而感知性模块则是我们想要用户在这里获得什么品牌感知,通过品牌结合视觉设计系统给用户带来产品独特的性格及个性化氛围。

对于探索感知性设计的方法也有很多,目前比较流行的技巧主要有:情绪板、样式叠片、元素拼贴。无论是哪种方式,都没有唯一的答案,更多是利用这些方法在不断的尝试中探索到属于自我品牌的感知。

情绪板

情绪板是一种较为轻量的风格探索方法,在这个过程中往往不需要花费过多的精力,我们需要做的就是把统一或者接近类型的图片进行重新整合,得出我们想要表达的视觉感受即可。

情绪版属于比较前期的视觉品牌调性探索,在整体的颜色、排版上也都可以利用情绪板来获得初步的答案,如果想要再往深一步,可能则需要样式叠片的方式。

腾讯高手都在学的「感知性模式设计」是什么?

样式叠片

给予情绪板获得的大致品牌方向之后,便可以利用样式叠片的方式来进行更精细化的探究,我们可以用一种或多种不同的样式叠片来表达,但是希望在截取这些内容的时候要记得保持控件、组件、颜色、字体等等内容的一致性,避免差别性较大,形成不了统一的视觉系统。

腾讯高手都在学的「感知性模式设计」是什么?

元素拼贴

从书中讲到的大体概念是:将界面元素等内容拼贴在一起,从而达到设计稿初稿的雏形感受。这个方法可以比较敏捷的对需求方进行试探,但相比上面 2 种方法需要花费更多的时间及精力,同时这个方法出来的内容也比较偏向高保真。

腾讯高手都在学的「感知性模式设计」是什么?

从表面上来看,这三种方法似乎都可以帮助我们更好的进行设计,没有太大的差异化,不过从本质上来看,这三个方法影响的是我们设计初期输出的保真程度,从情绪版到样式叠片再到元素拼贴似乎是一个越来越保真的方式,我们可以选择其中一种,或者 2 种结合来进行表现。

平衡品牌性与一致性

过多的个性化设计,会削弱整体的品牌感,同样,如果设计的内容需要全部都一模一样的规范,也会扼杀设计的品牌感的创造性。因此,在感知性设计的概念下,一致性设计不是一味的复用,不求变通,而是通过整体统一的理念,允许个性化设计的存在,这样既满足部分模块的独特视觉表现又并不影响品牌传递。

举个例子

例如外面在设计一个完整的 APP 时,我们已经规范好了大体的基础视觉规范,在不影响这个规范的前提下,我们针对部分模块,例如福利类、游戏类,这种比较偏运营的设计界面,我们可以考虑有更丰富的颜色、图形等视觉表现,但前提在于是否符合基础规范的设定,如果符合那我们完全可以对这些类型进行个性化设计。

如果没有打破常规的设计方式,固化的追求一致性的设计,那么它就会变得普通、僵化,感知性设计的存在就是让我们在允许的范围内追求更不一样的设计,鼓励设计师积极探索更多的可能性,好的设计体系既能体现品牌的一致性也能表达出创造性。

由于感知性模式的相关设计,容易被当作只是样式或者主题化皮肤设计,很多人会认为这方面的设计比优化交互流程更容易些。在这种状况下,临时的业务经常会去挑战产品的品牌性和规范性,综合这 2 方面的原因,我们需要随时调整我们对于感知性模式的策略。

好数据不代表感知性设计的好坏

数据的好坏往往来自各种原因,优化设计后得到好的数据,但并不能说我们的感知性设计是好的,首先刺激数据的手段有很多,例如加重内容的表现、利用颜色对比突出想要突出的模块,这些方式都是与感知性设计背道而驰的。

基于上面这个问题,我们在日常设计中有几个基本原则是需要我们去遵守的,尽量避免为了满足短时间的产品需求而影响整体的设计感知性。

1. 不挑战基础规范原则

基础规范作为整体设计的基本标准,整体的制定肯定经过多种尝试之后的结果,如果轻易推翻的话,其中产生的设计成本是巨大的,往往需要重新输出、多方对齐、最终输出、再落地形成开放组件,在我日常的工作中也常遇到。往往是因为一个极小的模块而产生了巨大的设计成本。

2. 不改变用户的普识习惯

这里说的不是不去优化或迭代体验设计,而是我们应该尽量避免因为一个很小的内容而调整全局的体验方式。

举个例子:早前很多 APP 在设计表单选择器时都喜欢进行 UI 定制,从这个问题分析,用户在使用这种表单选择器的时候是用的系统多一点还是我们的 APP 多一点,如果是系统的多一点,我们何不直接调用系统?因为组件的 UI 改造,往往会带来一定的开发成本,但其造成的感知却并不够大,反而会让用户觉得很奇怪,为啥这些选择权在不同 APP 的不一致。

3. 一致性最大化

任何的设计都应该以一致性作为最大的前提,这样才能更加完整体现感知性模式,在各个模块、颜色、图形等等内容都具有完整的呈现,无时无刻影响着用户,让用户对于整体具有潜移默化的感知。

最后

感知性模式不是一个原则,而是一种工作方式、设计模式,除了个人的坚持之外,还需要有团队的意识才能让我们的设计更加具有品牌性,自上而下的调性、方向的确定,在团队中形成共识,这样设计语言才能形成。

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



文章来源:优设    作者:ID设计站

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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


底部导航栏设计技巧

涛涛

很多受欢迎的产品中都有我们值得学习和借鉴的设计思考点,通过分析海外主流产品,带大家掌握底部导航栏(Tab Bar)的基本知识,找到解决问题的方法并开拓创意思维。

在开始之前,请大家先思考下面两个问题~

问题 1:你的产品真的需要 Tab Bar 吗?

好像并不是。虽然淘宝、微信、微博、美团等大多数主流的产品都在使用 Tab Bar,但这并不意味着所有产品都需要它。

从主流海外产品中,提炼了 8 个底部导航栏设计技巧

很多APP没有Tab Bar,比如日历、计算器、滴滴、Uber等。对于是否要在APP中使用Tab Bar,应该分不同的情况灵活考虑。

问题 2:为什么产品要有 Tab Bar?

答案是为了易于使用,意味着通过 Tab Bar 这种简单的设计可以轻松帮助用户导航到页面。

明白了上面的问题后,接下来就要考虑如何来设计 Tab Bar,能更好的满足用户的需求和体验。

1. 显示最重要的信息

导航栏应该只包含最有用的信息,不能添加过多无用的标签使导航栏混乱。许多 App 在导航栏上添加搜索功能,因为这有助于用户更快地导航和检索内容。

从主流海外产品中,提炼了 8 个底部导航栏设计技巧

在Spotify底部导航中,主页选项用于播放或收听所有内容,搜索选项用于搜索下一首歌曲和播客,音乐库选项用于播放列表中喜欢和保存的歌曲,单独的会员选项方便用户轻松点击并快速完成购买操作。

2. 扩展导航的功能

主流 App 更喜欢在底部导航栏中使用 4-5 个标签,这样能保持导航栏的整洁,还避免了标签过多导致用户难以精确点击选项的情况。

从主流海外产品中,提炼了 8 个底部导航栏设计技巧

Pinterest的导航栏上只有四个选项,这有助于用户轻松点击。消息选项会实时更新消息数量,对用户来说这样的提示很直观。另外搜索功能包含在导航栏中,方便轻松地在主页和搜索结果之间来回切换。

3. 容纳多种标签形式

多数 App 底部导航栏会使用「图标+文字」的标签形式,这样能清楚地告知用户点击标签之后的结果。

有时候我们也会看到有些产品的导航栏只有图标没有文字,但这种形式并不会影响我们的操作,因为当导航栏的标签使用了用户特别熟悉的形状和内涵,完全可以省略文字。

从主流海外产品中,提炼了 8 个底部导航栏设计技巧

宜家App的导航栏使用了大众都很熟悉的图标,所以即使不加文字,我们也能清楚地知道这3个图标分别代表了主页、分类、我的。

从主流海外产品中,提炼了 8 个底部导航栏设计技巧

相对于宜家,Youtube的导航栏就显得有点复杂,因为Youtube的图标含义用户可能并不是很熟悉,加上文字说明很有必要。

4. 文字标签应该简短

文字标签应该简短而清晰,准确的文字说明能对用户使用正确导航起到关键作用。

从主流海外产品中,提炼了 8 个底部导航栏设计技巧

TikTok导航所有的文字标签都简短,并且中间的添加图标还隐藏掉了文字,以此来引吸引用户的注意力。

5. 避免隐藏导航栏

Tab Bar 通常包含了最重要的导航信息,应该始终向用户展示,避免在用户滚动页面的情况下被隐藏掉。

从主流海外产品中,提炼了 8 个底部导航栏设计技巧

Pinterest导航栏的设计是个例。当滚动页面时,底部的导航栏会隐藏,这么设计的原因可能是为了防止导航栏遮挡图像,保证用户看到更多的图像内容。

6. 传达位置

Tab Bar 帮助用户轻松导航,但如果用户不知道自己的位置,将会影响他们浏览和使用产品的体验。

从主流海外产品中,提炼了 8 个底部导航栏设计技巧

多邻国App通过改变导航图标的样式来让用户清晰的知道自己所有的板块。

从主流海外产品中,提炼了 8 个底部导航栏设计技巧

Headspace在底部导航栏加上了线条装饰,每次切换选项,线条都会跟着一起切换,确保告知用户确切的位置。

7. 从反馈中学习并不断改进

反馈是关键,如果想改善产品的导航栏设计,就要考虑并测试用户最喜欢哪个导航选项,不使用哪个导航,需要四个还是五个选项等等。

从主流海外产品中,提炼了 8 个底部导航栏设计技巧

Pinterest通过收集用户的使用反馈情况来不断改进导航栏的设计,帮助用户更方便地使用产品,这些不断打磨的改进真是产品成功的关键。

8. 在导航栏中显示更新

Tab Bar 不仅仅起到导航的作用,很多时候还能通过状态变化告知用户更多的信息。

从主流海外产品中,提炼了 8 个底部导航栏设计技巧

在Twitter主页导航中,当有新内容推送时,主页就会出现更新的状态,提示用户查看新内容。这样的设计在Youtube、Pinterest等很多主流产品中都有使用。



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



文章来源:优设    作者:Clip设计夹

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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



「自然交互·预判」如何根据用户行为做预判设计?

涛涛

什么是「预判设计」?

预判设计(Anticipatory Design)是一种能够引导用户、缩短用户行为路径的有效设计手段。使用预判设计方法设计的交互界面,在交互和视觉上的表现总是比用户更远一步。而且这些交互表现是在用户没有作出行动触发的情况下进行的。

预判设计的本质上是一种基于数据收集所做的用户习惯研究和智能推送的设计模式。UX 设计师 Joelvan Bodegraven 曾说过:“Anticipatory Design 是围绕机器学习、预测和用户预期的综合性设计模式。”

好的预判设计可以做到以下几点:

  • 在用户初次体验某种功能时起到引导作用,避免用户产生疑问和不知所措

  • 提前判断出用户的下一步行为,利用合理手段和方法,缩短行为路径

  • 让用户感受到惊喜和关怀,对产品上瘾,产生好感和依赖感

预判设计的主体是用户行为,从用户的视角出发,建立在整个产品的交互里路程和功能框架上,对用户的行为深刻洞察后进行细节的改进。



如何预判用户的行为?

我们可以从三个维度探索用户行为预判的方法:

一.「人」的维度:

从「人」的维度来看,就是预判用户的需求和行为,方法有以下几种:

1. 预测用户所需

对用户即将做出的动作做出反馈,且适当突出反馈效果,帮助用户更轻易的看到想要的结果。

Apple 的 magic keyboard 在 iPad 上的鼠标效果,当鼠标圆点靠近功能热区时,系统预判用户需要点击按键,于是会产生自动吸附的 hover 效果。


Mac 上的鼠标效果也做的很用心,当用户在一段时间内不断的摇晃鼠标时,系统判断用户可能是需要找到鼠标,因此会放大鼠标箭头的大小,提示用户鼠标的位置。    

                                           

2. 缩短行为路径

通过预测用户下一步的行为,对用户进行直接引导,缩短用户的行为路径,减少操作步骤。

得到 App 预判用户的截图行为的下一步是分享,因此在截图后,可以点击「分享」直接分享到其他平台。


微信会在用户截图之后打开微信对话窗口点击「+」时,显示用户刚刚保存的、可能要发送的图片。


微信朋友圈会在用户再次打开时提示用户直接「跳到还没看的位置」,帮助用户快速定位之前离开的位置。


3. 分析历史数据

通过对用户的历史行为数据进行分析,对产品的功能和内容进行优化,符合用户的个性化需求,创造优质体验。


淘宝等电商平台会跟据用户之前浏览过的商品进行推荐,大众点评也会根据用户的饮食喜好进行美食推荐。


Google 翻译里,用户在第二次点击发音按钮时,读音播放的速度会明显比第一次缓慢,因为系统预判用户可能在第一次播放时没有听清,所以才需要播放第二次。



二.「时间」的维度:

从「时间」的维度来看,是指在特定时间对用户的行为进行预判和推荐,方法有以下几种:

1. 对有固定完结日期的功能/信息的提醒

对快要过期/马上到来/必须被使用的功能、信息做及时的提醒,避免用户忘记/逾期/迟到等。

外卖平台会在中饭晚饭前后给出红包/优惠推送、生鲜电商平台会在优惠劵快要过期时给出提醒,行程类产品会在飞机/火车快出发时给出行程通知。

2. 在特定的时间做功能的临时优化

在特殊的时间给用户适当的提醒(包括隐私提醒、天气提醒等),借助节日、活动等时机部分开放功能的限制,让用户觉得自己时刻被关注、被惦记,拉近与用户之间的关系。

美团外卖针对用户所在区域,提前推送天气变化,提醒用户提前下单,以免天气影响用餐时间。


七夕节到来,微信将原本最高 200 元的红包金额调整到了 520 元,是一个惊喜又有人文关怀的产品细节。



三.「空间」的维度:

从「空间」的维度来看,是指在特定空间或者当地点切换时,对用户的行为进行预判,与用户产生合情合理的交互:

大众点评会在用户切换城市时给用户恰当的提示。

使用支付宝刷地铁站出站的概念页面设计,清晰的展示了出站口的地点信息。



预判用户行为的设计原则:

预判设计(Anticipatory Design)的主体是用户行为,从用户的视角出发,建立在整个产品的交互里路程和功能框架上,对用户的行为深刻洞察后进行细节的改进。其设计原则有:

1. 化繁为简,缩短路径

从用户使用的流程出发,减少用户不必要的成本消耗,优化和缩短交互的路径。

2. 结合场景,分析原因

思考用户行为背后的逻辑和原因,做产品功能上的优化和调整。

3. 行之有度,点到即可

做体验设计改进时不能急功近利或显得过于生硬,要注意力度和用户心智的平衡关系。

4. 个性推荐,千人千面

预判设计应该使用户在界面的操作过程中感觉到自然,所以大部分预判设计是根据用户喜好量身定制的个性化设计。


最后,记住:用户在实际使用中不应该真正“看到”预判设计,但应该能够感觉到它的存在,并为之感到愉悦。

文章来源:站酷 作者:Ant_Design 

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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

B端产品如何做好数据可视化?

涛涛

我们毫无疑问已经处在一个大数据的时代。各行各业都在快速产生和积累数据。 本文结合 UED 团队过去所参与 B 端数据可视化项目分享一些经验及思考。

  • 背景
  • 什么是数据可视化
  • 数据可视化的应用价值
  • 如何做好数据可视化设计
  • 数据可视化发展趋势
  • 结语

背景

“得益于计算机技术和海量数据库的发展,个人在真实世界的活动得到了前所未有的记录……社会科学将脱下‘准科学’的外衣, 在21世纪全面迈进科学的殿堂。”- 雅虎首席科学家Duncan J. Watts

“大数据的影响,就像四个世纪前人类发明的显微镜一样……而大数据,将成为我们下一个观察人类自身社会行为的‘显微镜’。” – 麻省理工教授Erik Brynjolfsson

从数据,到海量数据,再到大数据,对人类的做事和思维方式都有很大的影响。在《大数据时代:生活、工作与思维的大变革》一书中,作者归纳了大数据的三个特点:

  • 更多:不是随机样本,而是所有的数据;
  • 更杂:不是精确性,而是混杂性;
  • 更好:不是因果关系,而是相关关系。 [1]

当前对大数据的研究涉及计算机科学、数学、生物学等多个领域。大数据尤其是对数据存储、数据挖掘等提出了重大挑战。而数据可视化也将在大数据时代扮演一个重要的角色。数据可视化可以将纷繁复杂的大数据集、晦涩难懂的数据报告变得直观易读、易于理解,通过图表将杂乱的数据进行科学有序的呈现,使用户找到数据的变化规律以及潜在价值,帮助用户作出决策。就数据可视化的应用来看,应用范围极其广泛,如政府应用、商业决策、公共服务等等。

什么是数据可视化

顾名思义,数据可视化就是将数据转换成图或表等形式,以一种更直观的方式呈现数据。通过可视化的方式,我们可以将大量复杂的数据通过图形化的手段进行有效地表达,帮助用户发现规律和特征,发掘数据背后的价值。

B端产品如何做好数据可视化?收下这篇7000+的干货!

图 1 @Marco Zemolin Siresia Bagnoli

数据可视化的应用价值

1. 易于理解,有利于发现信息特征

使用可视化的方式来表达复杂的数据,可以确保对关系的理解要比那些混乱的报告或电子表格更快。通过图形化的表现方式,我们可以以清晰和连贯的方式解释大量的数据,从而让我们理解数据,得出结论。

案例:流媒体平台节目数量的变化

以下图为例,当用户希望了解 2011 至 2020 下图四大流媒体平台节目的数量变化情况时,以表格方式呈现效果如下图:

B端产品如何做好数据可视化?收下这篇7000+的干货!

未经可视化设计的表格数据图

如果通过可视化设计处理后效果如下图:

B端产品如何做好数据可视化?收下这篇7000+的干货!

经可视化设计后的数据图

在这个案例中,我们可以看到,通过文字信息表达的方式,所有的数据在文字信息的表达中都只是零散的个体,我们很难在短时间内对列举数据有一个大致的了解,更不用说发现特征得到结论了;而在可视化表达中则不同,所有的元数据通过图表形成一个整体,数字信息被转化为视觉信息,通过可视化图表,通过观察点的位置和颜色即可感知到数据的差异,原本需要通过计算数字大小完成的对比,变成了肉眼可见的点的颜色与间距对比,我们可以迅速了解到近十年四大流媒体平台每年节目数量、每年不同平台节目数量的对比以及各个流媒体平台节目数量的增长趋势等。

2. 将数据转化为更具吸引力的故事

据研究发现:人脑处理图片信息的速度显著快于处理文字信息,例如一篇 300 字的小故事,看一遍需要数十秒,而转化成图片后则只需要一眼即可记在脑海里。

这表明,在信息的类型中,人脑对图片信息的接收和处理效率远高于文字信息。而数据可视化则可以将数据通过可视化的方式转化一个以图片形式展示的故事,帮助用户快速接收、处理信息,激发用户联想并产生情感共鸣。

案例一:新冠病毒如何通过空气传播

随着新冠疫情在全球各个地区的蔓延,如何做好疫情防控已经成为了每个民众的头等大事 。Mariano 和 Javier 用可视化的方式生动形象地传达了新冠病毒是如何通过空气传播的以及可以通过哪些措施来降低传染风险。

B端产品如何做好数据可视化?收下这篇7000+的干货!

图 2 @Mariano & Javier

案例二:在叙利亚,谁和谁战斗?

许多不同的团体之间的关系可能很难理解 – 尤其是当有11个这样的团体存在的时候,这些团体之间有的结盟,有的敌对,这让人难以理解。但是,Joshua Keating 和Chris Kirk通过表格的形式和熟悉的视觉效果和色彩,将这些数据简化为一种简单的、易于理解和可互动的形式,让人们可以轻松了解这些团体之间的关系和故事

B端产品如何做好数据可视化?收下这篇7000+的干货!

图 3 @Joshua Keating and Chris Kirk

3. 帮助人们作出决策,加快决策过程

现实生活中大部分的人是视觉学习者,他们倾向于在与视觉元素相关联的情况下进行学习并与信息互动。[2] 人类大脑识别并理解一张图像最快仅需 13 毫秒。[3] 因此,相比起阅读和理解文本,大部分人更容易通过图表或其他可视化形式来理解数据,合理的数据可视化设计可以提高他们作出决策的速度。

B端产品如何做好数据可视化?收下这篇7000+的干货!

图 4 @Bea Vaquero

如何做好 B 端数据可视化设计

1. 明确客户需求

设计师在设计数据可视化项目的开始阶段应该尽量与客户进行深入沟通,确定他们的业务诉求,也可以理解为确定客户的初衷与目的,从企业客户对数据可视化的需求看来,通常会有两种类型:

  • 侧重于汇报展示,主要用途是为了对外宣传、对内展示等,对于这类需求,设计时可强化视觉效果的呈现,对数据进行场景化设计,尝试让数据以一种新的载体,有趣的互动等形式结合展现。
  • 侧重于数据分析和协助决策,对于这类需求,一定要清晰了解需求方的业务内容和重点指标,重点关注数据的维度、种类、数量等信息,视效设计上应该优先满足业务诉求。

明确客户诉求,通过设计手段帮助客户达成目标,这才是 B 端数据可视化设计的关键所在。只有当我们了解客户的需要,我们才能快速推导产品结构、关键数据、视效风格等信息。

B端产品如何做好数据可视化?收下这篇7000+的干货!

图 5 @Daria

2. 确定关键指标与优先级

关键指标是对一组或者一系列数据的统称。一般情况下,一个指标在屏幕上独占一块区域,所以通过关键指标定义,我们就知道数据大屏上大概会显示哪些内容以及数据大屏会被分为几块。

那么关键指标的选取依据是什么呢?我个人认为主要还是依据客户诉求,数据可视化的最终目的就是帮助客户达成业务目标。需要思考的是,哪些数据通过何种呈现方式能够帮助客户解决问题、达到目的、满足他们的期望,选择出一系列关键指标。

对于这些选取出来的关键指标,我们需要对其进行优先级的排列,一般来说,主要指标能够呈现业务的主要逻辑,一般放在显眼位置,用重点元素标识;次要指标围绕主要信息进一步阐述;辅助指标是对主要信息的补充,一般放在非核心区域,或者二级结构中。

通过合理优化关键指标并进行优先级排列,能够保证数据可视化的核心设计的重点,避免数据空洞散乱。

3. 合理使用数据图表

在选择图表展示相关数据指标时我们要思考各个指标的主要呈现,更进一步的讲,是我们想通过可视化表达怎样的信息。下面这张图就清晰告知了我们如何从数据的展示目的出发,选择合适的可视化方式来呈现数据。

B端产品如何做好数据可视化?收下这篇7000+的干货!

图 6 翻译自@Stephen Few

4. 合理进行页面布局

数据可视化页面布局的设计是相对灵活的,为了保证数据呈现最佳效果需要结合实际需求来合理规划。关注核心数据的比例和位置,横向布局最为常见(人眼的水平运动比垂直运动快,会先注意水平方向的事物),核心数据场景划分在中心位置,占较大面积;其余的指标按优先级遵循人们的浏览习惯在核心指标周围依次展开。将类型相近的指标放一起,这样能减少观者认知上的负担并提高信息传递的效率。

B端产品如何做好数据可视化?收下这篇7000+的干货!

@布局设计案例

5. 制定设计方向

在定义设计风格的阶段,从项目背景出发,综合行业类型、产品定位、品牌传播等因素,提取关键信息,构建设计框架。

数据可视化的设计风格主要根据客户要求、行业特性、数据指标等因素决定。通常我们很容易看到的可视化设计以深色为主,是因为相比于浅色基调,深色背景设计能够有效缓解视觉疲劳,其次深色设计能够更好地营造对比差异以及数据层级,再者深色设计更容易呈现丰富的动态效果,营造出强烈的空间感等。配色的设计使用应该充分考虑项目背景以及项目属性,例如党政机关类项目会慎重考虑用色,应当确保设计严肃,庄重。

数据可视化的设计除了对数据进行合理设计,还需要注重场景感的塑造,例如,我们通过场景化设计可以让某大数据平台成为大型“图书馆”,查看数据的过程就跟图书馆看书一致,场景化设计的优势是能够让用户能够以一种具象的互动方式来理解十分抽象的业务数据,当然合理的构建动态数据效果能够让数据具备“生命力”。

B端产品如何做好数据可视化?收下这篇7000+的干货!

图 7 @Gan Gryc

6. 设计对比

除了尺寸和位置,我们还可以通过配色来突出数据。

无论是通过颜色或形状对比设计,容易产生强烈的视觉冲击力。

B端产品如何做好数据可视化?收下这篇7000+的干货!

图 8 @Bureau Oberhaeuser

利用明度的对比,我们可以用深色烘托鲜明的色彩,或者用鲜明的色彩衬托某一块暗沉的色彩,亮色靠附近的暗色衬托显得更加鲜明,其色彩特征表现得更加充分;

B端产品如何做好数据可视化?收下这篇7000+的干货!

图 9 @Zoey Shen

正确的对数据进行配色,让数据传递出的信息更清楚、更明白,例如国内 A 股,红色代表涨,绿色代表跌(美股绿涨红跌)如果给国内的股票、金融等相关客户做数据可视化设计时,需要避免不同地区文化所产生的差异。

B端产品如何做好数据可视化?收下这篇7000+的干货!

图 10 @Dima Groshev

7. 选择 2D or 3D?

随着数字孪生概念的火热,越来越多的企业热衷于打造自己的 3D 数据可视化产品,那么 3D 可视化就一定比 2D 强吗?

数据可视化设计本身就是为了高效传达数据信息而服务的,相比平面呈现,3D 最大的优势在于多了空间维度,适合那些需要跟空间结合的数据呈现,例如地理信息、建筑楼宇、工业生产等场景。那么 3D 数据可视化相比 2D 就一定能够展示更多的信息吗,显然不是绝对的;需要根据实际业务需求出发。

通常我们所说的数据 3D 可视化,就是把大量复杂抽象的数据信息,通过 3D 模型以视觉方式呈现出来,帮助人们理解和分析数据。相比于数据 2d 可视化,数据 3d 可视化具有以下的优势:

  • 展示空间相关的数据,因为空间数据具有三个维度,如果想要将其以视觉方式直观呈现出来,就必须要借助 3d 模型。例如显示一栋大楼不同楼层的人员分布情况,此时只有 3D 数据可视化能够帮助我们达到目标;
  • 视觉冲击力更强,相比于 3D 可视化从视觉上表现力更强;
  • 场景/对象仿真,在一些需要高度仿真的项目,例如与军事、地理勘测相关的项目中,数据 3D 可视化就不可或缺了,无论宏观态势还是细微结构的精密运行,数据 3d 可视化都可以将相关信息清晰呈现给使用者,将真实的环境、对象搬到屏幕上,降低使用者的认知成本。

在一个实际的数据可视化产品项目中,有必要应用 3D 数据可视化的情形;

  • 需要展示多维空间数据
  • 需要通过对场景/对象进行仿真,减少使用者的认知成本和学习成本
  • 需要依靠 3D 效果来提升视觉冲击力

相比 2D,3D 的设计与开发成本相对较高;其次 3D 场景会容易产生视角遮挡以及操作成本等问题,那么从实际项目出发合理选择才是最重要的。

B端产品如何做好数据可视化?收下这篇7000+的干货!

亚信数字楼宇@PRD MO UED

8. 设计还原

设计稿完成了并不代表设计师在这个项目中的工作就结束了,在后续的开发工作中,设计师还要与开发人员合作,减少上线产品与设计稿的差异。

这个阶段的工作也并非听上去那么容易,尤其是 3D 可视化设计,我们会使用相关 3D 工具制作设计效果,但 3D 设计工具与最终开发引擎存在着色、渲染等差异;在这个时候我们需要灵活运用开发引擎特性,提供对应的美术资源。作为设计师同样需要了解相关引擎着色器知识,帮助设计效果实现同时也提升对接效率。

B端产品如何做好数据可视化?收下这篇7000+的干货!

亚信数字楼宇@PRD MO UED

9. 调优与测试

测试客户终端上线是否正常,有无适配所造成的兼容性问题;排查有无视效及体验问题,同时也要考虑极端场景下所产生的问题及应对方案。

对于大型 3D 可视化场景会存在性能卡顿,加载缓慢等问题,在保证视效基础上尽可能压缩相关美术资源,减少不必要的效果计算和内存占用量,根据实时效果需要不断优化性能提升产品体验度。

数据可视化发展趋势

趋势一:数据可视化 ╳ AI人工智能

随着企业发展数据量日益庞大,通过人脑分析复杂数据变得越来越困难,我们需要借助 AI 人工智能的帮助。AI 人工智能可以通过强大的算法快速识别分析数据,为企业节省了宝贵的时间和资源,目前人工智能已经被广泛应用于医疗保健服务、销售、供应链、客户分析和欺诈预防的数据可视化项目中。

B端产品如何做好数据可视化?收下这篇7000+的干货!

IBM 数据可视化专家 Mauro Martino 创建的仪表板,允许用户可视化新闻中出现的主题

趋势二:数据可视化 ╳ XR

AR 和 VR 技术的应用可以增强数据在空间上的感知,从而帮助人们更好地使用数据。通过结合 VR、AR 技术,用户能够更好,更快地理解、分析数据。最近进行的许多研究表明,VR 和 AR 具有较强的感官体验,可以促进更快的学习和理解。帮助用户对业务问题进行多维度的分析,并更快速地找到解决方案。

B端产品如何做好数据可视化?收下这篇7000+的干货!

图 11 LM9000@5puj47980xk

趋势三:数据可视化 ╳ 实时数据

在数字时代,事物变化很快,企业需要对数据告诉他们的信息做出快速反应——正因为如此,实时可视化数据比以往任何时候都更重要。

在 COVID-19 大流行期间,企业能够迅速作出反应更加重要。各国政府和卫生当局已经使用实时数据可视化来跟踪感染情况并据此进行调整。越来越多的公司正在将实时数据集成到他们的产品中。

实时数据可视化可以采取一些简单的形式,如实时更新的折线图或使用新信息(如销售)快速更新的交互式地图。

B端产品如何做好数据可视化?收下这篇7000+的干货!

图 13 @Esri & The Science of Where Podcast

趋势四:数据可视化 ╳ 全面体验设计

用户体验为核心的数据可视化设计是一种重要趋势,将用户放在第一位,然后是数据。无论处在哪个行业,设计师都应该遵循类似的思考过程,从思考用户需求及其痛点开始, 用户正在尝试解决哪些问题,以及他们面临哪些可能的困难?他们需要什么信息和功能来解决这些问题?我们如何以最佳方式为他们打造数据可视化?

最新的趋势之一是将用户的工作流与可行的见解、建议、预测以及针对当前任务或决策的最佳后续操作合并,帮助用户进一步钻研数据并发现模式、趋势和相关性。

结语

数据可视化是一门同时结合了科学和艺术的复杂学科,其核心意义在于清晰的叙述和艺术化的呈现,这些需要依靠数据工程师和设计师的精心策划而不是仅仅考虑如何实现炫酷的效果 ,只有最终达到帮助用户理解数据和做出决策的目标,才能发挥它巨大的价值和无限的潜力。

文章来源:优设 作者:AsiaInfo Design

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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


日历

链接

个人资料

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

存档