设计思维

数据可视化设计浅析与研究(一)

seo达人

一. 数据可视化历史渊源

从人类诞生之日起,便有了信息的呈现形式,并伴随着人类发展足迹不断变迁。如今出现的任何信息可视化类型,并非一夜之前突现的新物种,几乎都是从过去经典的表达式中发展而来。

17000 年前

如果你问最早的信息图表设计师是谁,很多学者认为是远古时代的洞穴人,他们是最早用图像描绘成日常生活比如战斗,野生动物、死亡和庆祝活动等等。

法国发现的洞穴绘画遗址-拉斯科壁画,距今约17000年

 

公元前 3000 年

古埃及象形文字,作为那时的正式书写系统,开始使用符号来代表字母和概念,可追溯到公元前3000年。

 

公元前 550 年

希腊哲学家阿那克西曼德创造了第一个出版的世界地图,这可以说是最早的可视化地图了。

 

公元 950 年

欧洲人画出了基于时间变化的折线图,用于展示太阳,月亮等行星的位置变化趋势,开始出现如今的数据图表的雏形。

 

17 世纪

统计图形之父威廉·普莱费尔,发明了我们今天经常使用的折线图和条形图,也被认为创建了面积和饼图。普莱费尔是苏格兰工程师和政治经济学家,并在1786年出版了商业和政治地图集。

智能时代

随着时代的发展,智能时代AR、VR 技术的兴起,我们开始看多更多新颖的的数据可视化形式。

1992-2010年内世界小型武器和弹药的进出口贸易数据展示

 

“里约+20”地球峰会期间的Twitter话题汇集成一颗颗大树

 

二. 认识主流可视化图表

如今随着科学技术的发展,已经沉淀出丰富且经典耐用的信息可视化表达。无论在传统的纸质媒体,还是如今手机、电脑,电视等各类终端的电子媒体都得以大放异彩。目前,各大可视化工具中有非常详尽的图表类型介绍,比如 Excel2010 的版本里面,提供了 10 类共 53 个图表。AntV 平台则提供了 15 类近 200 个数据图表,现在我们就来普及一下基本知识。

常用可视化图表分类

目前主流的可视化平台把常用图表分成九大类(来自 AntV ),分别是:比较、分布、关联、占比、区间、流程、趋势、时间、地图。

1. 比较

显示值与值之间的不同和相似之处。使用图形的长度、宽度、位置、面积、角度和颜色来比较数值的大小,通常用于展示不同分类间的数值对比,不同时间点的数据对比。

典型图表:柱状图、条形图、直方图、K 线图、矩形树图等

 

2. 分布

显示频率,数据分散在一个区间或分组。使用图形的位置、大小、颜色的渐变程度来表现数据的分布,通常用于展示连续数据上数值的分布情况。

典型图表:散点图、气泡图、热力图、箱型图

 

3. 占比

显示同一维度上占比关系

典型图表:饼图、环形图、堆叠面积图、堆叠柱状图

 

4. 关联

显示数据之间相互关系。 使用图形的嵌套和位置表示数据之间的关系,通常用于表示数据之间的前后顺序、父子关系以及相关性。

典型图表:和弦图、桑基图(我有点读不懂)

 

5. 区间

显示同一维度上值的上限和下限之间的差异。 使用图形的大小和位置表示数值的上限和下限,通常用于表示数据在某一个分类(时间点)上的最大值和最小值。

典型图表:仪表盘、堆叠图

 

6. 流程

显示流程流转和流程流量。一般流程都会呈现出多个环节,每个环节之间会有相应的流量关系,这类图形可以很好的表示这些关系。

典型图表:漏斗图、桑基图

 

7. 趋势

分析数据的变化趋势。使用图形的位置表现出数据在连续区域上的分布,通常展示数据在连续区域上的大小变化的规律。

典型图表:折线图、K 线图、堆叠面积图

 

8. 时间(个人认为时间可以放在各大类型中作为一个维度)

显示以时间为特定维度的数据。使用图形的位置表现出数据在时间上的分布,通常用于表现数据在时间维度上的趋势和变化。

 

9. 地图

显示地理区域上的数据。使用地图作为背景,通过图形的位置来表现数据的地理位置,通常来展示数据在不同地理区域上的分布情况。

典型图表:地图

 

常用可视化图表举例分析

1) 柱状图

条形图

展示多个分类的数据变化和同类别各变量之间的比较情况。使用垂直或水平的柱子显示类别之间的数值比较。其中一个轴表示需要对比的分类维度,另一个轴代表相应的数值。

优点:对比分类数据。

缺点:分类过多则无法展示数据特点。

 

# 相似图表

堆积柱状图:比较同类别各变量和不同类别变量总和差异。

百分比堆积柱状图:适合展示同类别的每个变量的比例。

 

2) 条形图(也可归到柱状图大类中)

类似柱状图,只不过两根轴对调了一下。

优点:类别名称过长,将有大量空白位置标示每个类别的名称。

缺点:分类过多则无法展示数据特点 。

 

#相似图表

堆积条形图:比较同类别各变量和不同类别变量总和差异。

百分比堆积条形图:适合展示同类别的每个变量的比例。

双向柱状图:比较同类别的正反向数值差异。

 

3) 折线图

折线图

堆积面积图

展示数据随时间或有序类别的波动情况的趋势变化。

优点:有序的类别,比如时间。

缺点:无序的类别无法展示数据特点。

 

# 相似图表

面积图:用面积展示数值大小,展示数量随时间变化的趋势。

堆积面积图:同类别各变量和不同类别变量总和差异。

百分比堆积面积图:比较同类别的各个变量的比例差异。

 

4) 散点图(以及气泡图)

散点图

 

气泡图

 

用于发现各变量之间的关系。

优点:存在大量数据点,结果更精准,比如回归分析。

缺点:数据量小的时候会比较混乱。

 

# 相似图表

气泡图:用气泡代替散点图的数值点,面积大小代表数值大小。

 

5) 饼图

饼图

玫瑰图

饼图可以很好地帮助用户快速了解数据的占比分配。

优点:了解数据的分布情况。

缺点:分类过多,则扇形越小,无法展现图表。

 

# 相似图表

环形图:挖空的饼图,中间区域可以展现数据或者文本信息。

玫瑰饼图:对比不同类别的数值大小。

旭日图:展示父子层级的不同类别数据的占比。

 

6) 词云

词云

 

7) 箱型图

箱型图

以上只是部分常用图表样式,更多详细的图标样式及其介绍,可前往阿里数据可视化平台 AntV 学习。

 

数据图表使用指南

数据图表如此繁杂多样,到底该如何灵活运用呢?

数据图表专家 Andrew abela 设计了一张汇总图,从全局出发,帮助我们快速确定图表样式

Andrew abela 绘制的图表选择指南被广泛运用

 

这其实为我们提供了一种快速选择数据图表类型的思考流程,四步走:

1.分析数据源

2.确定展示的类型

3.选择的变量类型及数量

4.选择对应的数据图表

 

三. 实用的学习通道

介绍这些基本知识是远远不够的,网络上有非常多的平台、工具和团队可以供我们深入学习和研究数据可视化设计,以下列举了我平时经常光顾的学习资源。

1. 了解数据可视化设计的历史渊源(完整版):

数据可视化图表发展史:http://www.datavis.ca/milestones/index.php?group=Pre-1600&mid=ms9

 

2. 各类可视化图表的概念及用法(超详细):

蚂蚁金服可视化解决方案 AntV:https://antv.alipay.com/zh-cn/index.html

图表示例:https://antv.alipay.com/zh-cn/g2/3.x/demo/index.html

图表用法:https://antv.alipay.com/zh-cn/vis/chart/index.html

 

3. 前端可视化图表库(前端可直接调用):

ECharts:http://echarts.baidu.com/index.html

AntV:https://antv.alipay.com/index.html

Google Chat:https://google-developers.appspot.com/chart/

 

4.数据分析工具:

Google Analytics: https://analytics.google.com

百度统计:https://tongji.baidu.com/

 

5.运用可视化工具搭建自己的可视化图表(可以建立自己的可视化图表):

BDP个人版:https://me.bdp.cn/home.html

平时还可以使用 Excel 或 Numbers 整理和输出可视化图表

 

写在最后

除了学习巩固数据相关的基础知识以外,更需要在日常工作学习中培养习惯,养成数据化的思维方式。

  • 1.保持对数据的敏感度
  • 2.尝试利用可视化工具创建图表,锻炼分析整理的能力
  • 3.密切关注自家产品线的用户行为数据,解读各类数据指标,培养分析的习惯
  • 4.关注前沿技术和可视化新形式,保持开放包容的心态

好了,文章就介绍到这里,大家一起学来吧。

预告:下一篇系列文章着重介绍可视化设计的具体方法,譬如从色彩、布局、交互等方面如何设计数据图表,欢迎持续关注。


作者:又彬

转载请注明:学UI网》数据可视化设计浅析与研究(一)

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


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


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



数据可视化设计浅析与研究(二)

seo达人

第一部分: 图表布局 

图表的基本构成(来源网易 UEDC)

 

图表标题

标题一般居中或居左对齐,但是布局时,需要综合考虑副标题、图例甚至筛选器控件等元素的位置。

 

坐标轴

坐标轴包括 X 坐标轴和 Y 坐标轴,有时还会出现次坐标轴。

1. X 轴刻度方向的改变,如果维度过多,则横向刻度的展示范围会非常有限,为了展示更多内容,通常会用其他替代图表(比如横向柱状图),不能替代的情况下,可以考虑将标注文案进行倾斜(不鼓励)。

2. 数据类刻度值尽量转化为千位分隔符(如 K,M,B),保持简洁,以节省空间。坐标轴上的最大值取值要恰当,保证图表占据 2/3 以上,画面更饱满。

3. 还需考虑坐标轴上的极值。

坐标轴

 

图例

离散型数据包括横向排列和纵向排列,连续型数据包括连续图例。

1. 所有图表类型的排列方式要统一,所以要考虑整体的图表空间是适合横向排列,还是纵向排列。

2. 所有形式总长度超过内容区换行或换列。

3. 双轴图包含了 2 种图表类型,不同类型的图例样式要有所区分。

4. 连续型数据通过渐变色来展示数据大小的变化,具体渐变颜色定义在下文中有详细介绍。

图例

 

背景栅格

背景栅格主要用来帮助用户快速读取数据值,方便参考和对比。背景栅格一般有网格线、虚线、点阵、斑马纹等。在设计栅格时,应该尽可能减少对数据的干扰,在合适的场景下,甚至可以去掉背景栅格。

栅格

 

Hover 态(或点击态)

用户在查看某一项数据指标时,给出明确的反馈和提示。数据详情多时,还会通过浮窗的形式展现。此时该状态下数据可以突出显示,可以变化颜色、增加背景元素(线/面)、或者增加动态变化等。

 

字体

数据图表的字体一般采用无衬线体,另外需要考虑字体的辨识度,防止在显示上产生歧义。多数情况下,数据图表会运行在不同分辨率的大小屏中,所以在文字排版上。

做到以上几条,我们在设计图表时就可以避免掉绝大多数的坑,不过毕竟图表类型这么多,在实际场景中也会遇到各种情况。总之有这么几条总的原则

1. 保持数据图表简洁、清晰、易读

2. 强调用户关注的数据,帮助用户快速聚焦

3. 弱化次要元素,如栅格、图例等

4. 删除不必要的元素,阴影效果、酷炫动画

5. 合理布局图表的间距、留白等

6. 充分考虑页面的适配效果

7. 最好使用真实的数据进行设计排版

 

 第二部分: 图表配色 

考虑到图表颜色在设计中至关重要,我把它单独分出来讨论。由于数据的复杂性和趋势变化,配色方案需要考虑非常多的因素,比如可辨识度、舒适性,还需要考虑特殊人群(色盲色弱人士等)对颜色的可读性等等。在配色过程中我们需要区分背景色和图表配色。

 

背景配色

背景色一般分为深色、浅色、彩色。在很多 LED 大屏上展现数据时,多采用深色背景,比如即将到来的天猫双十一活动,官方数据展示基本上会用深蓝色作为背景,这样可以减少屏幕拖尾,观看时也不会过于刺眼。深色背景中的图表配色一般不会采用太多的色彩,且图表也不会设计得过于复杂。

中小屏幕的背景选择性更大,中小屏幕背景色选择范围就比较广,浅色、彩色、深色均可以做出很好的设计。在 Web 端,大多数场景下,我们会采用浅色甚至白色作为背景,浅色背景更适合展示大量的数据信息,而且识别度更高。

 

图表配色

图表配色最关键的一点,就是要有辨识度。

我们可以通过明度上的变化增加辨识度,也可以采用大跨度的不同色相来增加辨识度,另外这两者也可以有机结合,常用于色彩较多的图表中。

 

明度变化

当我们需要使用单一色相配色时,势必要用明度差来进行设计,明度的跨度也要尽可能大才能更清晰。我们可以通过在灰度模式下配色的辨识度来判断明度差是或否合适。

(Google Material Colors 中的 Light Blue 色卡)

需要注意的是,采用单一色相的配色种类不宜太多,建议不超过 6 种。一旦种类过多,色彩之间的明度差异势必会变小,因而影响辨识度。

 

色相跨度变化

通过色相跨度来增加颜色辨识度也是我们常用的方式。

色环

需要的颜色较少时,我们尽量避免使用相近的色相,比如同类色和相近色。尽量选择对比色或互补色,这样可以使不同属性数据在图表中展示更加清晰。

 

 

美国大选图

 

所需颜色较多时,建议最多不超过 12 种色相。

通常情况下人在不连续的区域内可以分辨 6〜12 种不同色相。过多的颜色对传达数据是没有作用的,反而会让人产生迷惑。

 

三种常用的取色方法

01. 色环提取

可以采用色环中同一明度下的不同色调作为图表颜色。前面提到的单色相内取色,也可以在这个色环中进行采集,此外 Google Material Colors 是一个不错的色板,可以结合使用。

 

02. 借鉴自然界中的色彩

自然界中有非常丰富的渐变色彩,而且被大家所熟知,这些色彩更容易给人们带来愉悦感。

自然界中的色彩

 

在借鉴过程中,我们需要注意,比如天空经常会出现红、蓝、紫的渐变色,但这颜色的明度会有其规律,通常是浅黄到深紫,但绝对不会出现浅紫到深黄色。还有一些自然界其他的经验配色,比如浅绿色到紫蓝色,浅黄色到深绿色,橙棕色到冷灰色。

 

03. 渐变与明度叠加取色

在正常渐变色的基础上叠加一层只有明度变化的灰色渐变,形成既有明度差异也有色相跨度变化的配色。

 

渐变与明度叠加取色

 

渐变色应用案例

好了,配色部分就探讨到这里。除了以上关键内容以外,我们平时还需要注意数据图表的适配效果、交互细节、以及动画设计方面的问题,由于篇幅的关系暂不展开,以后有机会进一步探讨。

 

说在最后

我们在参与此类项目设计时,通常会通过以下的流程去思考:

1. 为谁设计,用户想要什么

2. 明确设计目标和价值

3. 明确数据指标

4. 选择最合适的数据图表

5. 规划设计,输出方案

前三步更多会由产品经理、运营人员去思考并输出结果,最后两步则由我们设计师来完成,这两步也正是这两篇系列文章的主题所在。

在学习过程中,我们每个人可有不同的思考方式和侧重点,以我个人的角度出发:能够读懂常见的数据可视化图表,并从图表中能获取到关键信息。当有一堆数据摆在面前,能根据业务目标选择合适的数据展示类型,并运用设计手段完整的表达给用户。有了这些沉淀,我就能更好的和产品、运营打交道,更多的关注链路上游的信息,从而进一步提升设计的产出质量。

欢迎交流、批评和指正。


作者:又彬

转载请注明:学UI网》数据可视化设计浅析与研究(二)

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


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


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



提升数据可视化的7个实用技巧

seo达人


1、避免使用鲜艳的颜色

明亮鲜艳的颜色就像是把所有的字母都大写想要强调一样,你的听众感觉你在对他们大声推销。而当有很多人在大喊大叫时,通常是很难集中注意力听他在说什么。单调的颜色,反而能很好地用于数据可视化,因为它们可以让你的读者理解你的数据,而不至于被数据淹没。

当你想要强调数据时,可以使用更亮的颜色。比如你的公司与竞争对手相比较时,或者你可以在现有颜色基础上加深颜色。

多彩的颜色效果就像把文字全部大写一样

 

2、避免使用饼图

尽管它们很受欢迎,但饼图并不是一种可视化数据的有效方法。 为什么? 因为你的大脑很难确定每块馅饼的相对大小

Stephen Few详细介绍了这个问题 链接在:

https://www.perceptualedge.com/articles/visual_business_intelligence/save_the_pies_for_dessert.pdf

多使用条形图, 它能使受众更容易理解和比较数据的相对大小。

Tip:按降序或升序对数据进行排序,能更轻松地比较数据。

饼图不是可视化数据的有效方式, 请尝试使用条形图。

 

3、避免数据噪音

正如“数据界的达芬奇”Edward Tufte 所说,图表上的每一点信息都应该有存在的理由。

把不重要的东西减到最少或者去掉。这包括减弱或移除图形线,改变轴线、图形线的颜色,以及用浅灰色描绘电子表格行。使得“数据比率”可以达到一个很高的水平,听众会更容易明白其中的数据情况。

Tip: 如果有人评价你的图表华而不实,你只需要优化数据比率就好了。

隐藏或减弱非数据项能使数据脱颖而出

 

4、使用简单易读的字体

有些时候,排版可以提升视觉效果,增加额外的情感和洞察力。但数据可视化不包括在内。坚持使用简单的无衬线字体(通常是Excel等程序中的默认字体)。无衬线字体即是那些文字边缘没有小脚的字体。

不用使用手写体,以及其他会分散数据可视化注意力的字体

 

5、使用表格数字字体

表格间距赋予所有的数字相同的宽度,使它们排列时能彼此对齐,使比较更容易。大多数流行字体都内置了表格。不确定字体是否正确?就看小数点(或任何数字)是否对齐就行。

使用一个表格数字字体,这样每个数字间都保持对齐(像右边的那个),比较起来更容易

 

6、使用相同细节和精度的数字

添加的细节(和数字)越多,大脑处理的时间就越长。想想你想要用你的数据传达什么,以及最有效的方式是什么。

每一个额外的数字都需要大脑去理解

 

7、使用基础图形

一个很好的经验法则是,如果你不能高效理解,你的读者或听众可能也难理解。因此,坚持使用基础图形:直方图、条形图、维恩图、散点图和线形图。

译者注:关于这些数据图的区别以及使用方法,我这里就不作展开说了,有兴趣的可以自己去网上翻翻。每种图形都用它的特点和使用场景,还蛮有意思的。以下是我在网上搜集的图形示例:

直方图

 

条形图

 

维恩图

 

散点图

 

线形图


作者:Becca Selah

译者:彩云Sky

转载请注明:学UI网》提升数据可视化的7个实用技巧

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


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


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




设计的价值是保障产品用户健康度

分享达人

宜家的设计为销售负责。比如设计一个杯子,宜家的设计师需要考虑如何更多的卖出杯子。没错,销售更多的产品是设计师的KPI。在这样的目标导向下,设计师很容易去思考几个问题。

  • 一定成本的杯子,用户为什么要买我的产品?解决做好产品设计的动力。
  • 杯子的使用场景和定位,是刷牙杯、还是咖啡杯,它应该是家用的、还是在高端的商业场所出现?基于成本出发,对设计、原材料和制作工艺的思考。
  • 杯子在售卖时期的陈列、互动形式应该是怎样的?基于如何能售出更多,解决产品的流量获取问题。
  • 杯子在使用过程中的手感、方便性。基于用户感受和体验,解决产品和用户互动的故事性,口碑问题。

众所周知,宜家的产品是场景化的,总能让人感受到设计师们的热情、心血和心机。设计为销售负责,售出更多的产品确实可以作为设计有效性的验证方式之一,但销售量却不能作为设计的量化标准。

这两者之间有很微妙的差异。我们引入一个概念叫做“数据趋势的正向反馈”来解释这个问题。“数据趋势的正向反馈”,它具备允许波动,且不为一个具象的数值服务的特征。类似下图示:

设计为销售负责,我们可以理解为,衡量好设计的其中一个维度标准就是销售“数据趋势的正向反馈”,值得注意,不是销售量的某个单一的KPI值。因为达成某个销售量的KPI值有很多手段,设计策略、产品策略、运营策略和营销策略等等方式都可能完成,如果用销售量去衡量设计,会让设计变得不够纯碎。但是,用“数据趋势的正向反馈”来衡量设计是否有效,用户是否认同却是可行的。而且,“数据趋势的正向反馈”意味销售量是持续增长的,哪怕有波动,哪怕有快慢,长期看能够持续增长代表用户是健康的。设计价值是为产品带来健康用户,或者说是保障产品的健康度。产品健康度一般看几个值。

用户跳出率

用户跳出率指只访问了入口页面就离开的访问量与所产生总访问量的百分比。通常互联网的平均跳出率大致是73%,如果你的产品跳出率超过这个值,说明用户质量不高。

平均访问时长

平均访问时长指用户在一次访问中,平均使用产品的时间。互联网的平均访问时长大致是2分40秒。

平均访问页数

平均访问页数=浏览量(PV)/访问次数。互联网的平均访问页数大致是2页。

除此之外,产品还会从营收的角度看用户支付金额、ARPU值和转化率等等。营收指标对与设计来说,就是需要参考的趋势数据了。了解了这些原理,怎么做呢?我们用首页改版为例,首先按上述要求定义用户健康度指标。假设首页承载电商内容,根据电商特性在基础指标之上,增加一个用户在首页的停留时长指标,这个指标衡量用户是否能在首页逛起来。

依据这些指标,就可以搭建针对于当前项目的用户健康度指标,在设计过程中通过对指标和指标用户的数据分析和对指标用户的访谈综合得出项目的核心问题及解决思路。通过线上验证设计方案观测数据模型的趋势变化,以获得最优的设计。设计在保障产品用户健康度上,是一个持续迭代的过程。

产品没有最健康,只有更健康。

作者:ZA大人

转载请注明:站酷

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


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


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


工作中如何体现设计价值?

分享达人

http://www.lanlanwork.comhttp://www.lanlanwork.comhttp://www.lanlanwork.comhttp://www.lanlanwork.com/dp.htmlhttp://www.lanlanwork.comhttp://www.lanlanwork.com/web.htmlhttp://www.lanlanwork.com/Design.htmlhttp://www.lanlanwork.com/Design.htmlhttp://www.lanlanwork.com

写在前面

一年一度的年底复盘总结大会即将开启,期间闲聊时被问:作为设计师,日常工作中如何体现设计价值?你们平时做的那些不是业务需求吗?如何体现设计价值呢?直白一点:你们设计一年都没产出啊!!!我开始反思:如果平时做的业务需求不能体现设计价值,那么什么体现我的价值呢?设计价值到底用什么来衡量?


分享目录

1、如何理解设计价值

2、设计师价值分层 

3、设计价值案例体现

4、设计价值具体表现方向

一、如何理解设计价值

很多招聘上都写着会插画会动效的加分,很多职场人没面试或没应聘上理解是不会某个技能,因此抱怨设计要学的太多了...但是注意「加分」这个词的前提是满足必要条件之后才去考虑的,如果公司有大量的剪辑和插画需求,自然会招插画师和剪辑师(我上家公司有专门的插画师和视频剪辑人员),所以不妨反省自己是否满足必要条件。

前几年大家或许可以凭借这些差异化优势拿到不错的薪水,但是寒冬之下公司更多的思考着如何活下去,更看中设计能给产品发展带来什么价值



商业设计本质上服务于业务,公司需要用户参与盈利,所以每个季度或每个月分发每个部门业务目标,项目团队根据当前部门任务制定相应的项目目标,然后再一层层分发到设计,总结他们的关系如下:



因此判断设计价值的关键是:是否真正地帮助业务解决问题,助力业务目标达成。换言之,设计价值就是设计师通过设计思维/策略/方法,帮助业务创造的那部分价值。

  • 实现了哪些业务目标
  • 解决了哪些业务问题
  • 创造了哪些业务价值

根据设计价值,市场上衍生出各种设计师头衔,被划分为更靠近产品的UXD(User Experience Design)、以及在UXD基础上提升出与业务更密切的UGD(User Growth Design),最后就是更偏纯视觉的VD(Visual design)。



相信大家和我一样,在公司对设计师的要求再也不是单纯界面输出了,虽然职称头衔没变,但是公司对我们的要求越来越高了,那说明你正在向体验型设计师或用户增长型设计师发展。今天看了我的文章,打开格局,未来的路也会越走越宽

二、设计师价值分层

设计师的价值可以分为五层:

基础价值(设计协同):重要且紧急,设计师立身之本

二级机制(优化负向):自驱解决负向问题,量化优化结果

三级价值(增长爆破):洞察增长爆破点,自驱推动增长

四级价值(L型赋能):垂直击穿,经验沉淀,实现L型赋能

五级价值(业务领军):人人都是业务方,拓展设计师在行业和生态影响力

今天主要聊聊前三种,我相信很多人最初选设计师这个职业认为设计不用对接太多人,做好自己的事情就OK,紧接着慢慢的在无止尽的改稿消耗了激情,开始喊出设计没前途想转行不好找工作等等,但是正真玩明白设计的人往往笑而不语

第 1 层:基础价值

不知其然,表象复刻。设计协同最基本要求就是在拿到需求后高效又完美地实现落地。也就是我们刚刚入行时日常工作中所做的事情:产品给到原型、设计开始执行、接着进入研发、再接着走查等等,甚至很多人都没玩明白设计系统有哪些,各个设备的的规范区别...
做好这个阶段是设计师基本素养,需要良好的专业能力,良好的沟通能力,并参与到产品的探索与构思中来。



第 2 层:负向优化

我之前在小红书分享了很多关于设计优化内容,优化前VS优化后。以用户体验为核心,不同场景不同设计。相较于基础价值而言,负向优化开始逐渐融入业务当中,慢慢了解整个业务流程,很多小伙伴往往提出优化方案后被认定为优先级不高,就是没有针对当前业务主要功能提出优化



第 3 层:增长爆破

这个阶段在设计师晋升中非常关键,领导非常看重设计是否主导项目优化,我目前公司晋升标准是设计师除业务需求外,一年至少需要2次设计主导项目推动。这个过程比做业务需求复杂的多,因为当你没有足够资源协助优化时,需要设计自己前期调研、设计问卷、找数据、写产品文档、画原型图、标注交互规则...整个过程由你主导。

当然这个阶段的设计师会比上一个阶段更能体现设计价值,并对产品产生一定的影响力。我们要把格局打开不要局限于设计本身,不是说忽略设计,是基于日常设计界面去考虑设计的意义,给产品和业务带来的影响。能在以用户为中心的基础上,寻找机会点,推动业务的增长,所以这个阶段的设计也被称为UGD(User GrowthDesign)


这时候对设计的要求更高,比如需要具备用户洞察力,数据分析能力等,从这些维度出发,去熟悉业务、分析业务,寻找设计机会点,制定设计策略,从而推动业务。这个阶段的设计师,也是市场最需要并且很稀缺的。



三、设计价值案例体现

通过一个案例我们一起讨论设计价值体现,首先看一下业务目标,设计目标是由它推导而来,这个推导的过程并不是直观可见的,需要我们进行用户调研、问卷调查、数据分析等等一系列方式去推导,最后总结归纳出可行设计目标。推导过程是整个设计过程中最重要的环节,为了让大家理解,我在网上查了很多案例

1、业务目标

一般业务目标是决策人开会共同决定的,它只是某个阶段大的方向,基本可以套进下面这个公式



以我目前工作正在执行的项目为例,可以组合其中一部分作为业务目标,例如:
Q4:通过提升中介版位的曝光率引导中介入驻(上传社区资料),来增加社区内容的丰富度

阿里《五导家设计法》中对业务目标和设计目标的定义是:

1、业务目标:用[某策略]给目标用户带来[某价值],以实现[某变现方式]

2、设计目标:用[某设计策略]给目标用户带来[某价值],以助力[某变现方式]

这个刚开始理解会比较困难,因为很多项目其实只有一个总体的目标并不会细化到这样的颗粒度。于是我去网上查了一些设计师的分析部分内容,整理组织一下发现大致的信息是这样的:



由业务方提出一个需求,这个需求背后往往伴随着一个业务指标,设计师则需要将定量指标拆解为有设计执行指向的目标。上图中简化XX功能的操作路径,就需要拉出整个操作过程中的数据,观察同级功能及子级功能有什么影响,用户是在哪一步流失的,有什么优化途径...,可以看出短短几个字背后的工作远远比想象的多



2、洞悉产品的业务场景

这次设计改版也是伴随着业务的发展而来的,为了做出贴近业务目标的设计,项目前期对产品的定位及业务底层逻辑做了深刻的理解,思考我们为什么要做这个产品?用户通过我们产品得到什么?为了方便理解,我从项目背景开始说起
项目背景:随着平台买卖租赁业务迅猛发展,用户对于房屋周边关注度越来越高,单个房屋详情无法满足用户对整个房屋周边的了解,所以推出社区找房平台。产品主要定位是提供小区内真实有效的房屋信息,帮助用户省时省力的筛选出优质房源
问题:由于第三方合作平台房屋资料更新不及时,导致C端用户(买卖租赁)去线下看房时发现已卖已租,渐渐地对平台产生不信任,最后很大可能弃用。
解决:为了改善这一现状,平台引入「社区专家」这一概念,并通过提升中介版位的曝光引导中介入驻,入驻则需上传该小区户型图/平面图/内景图等 。也就是说中介入驻后被称为社区专家,在APP端曝光量增加,吸引C端用户点击互动,从而提升房屋成交量的可能性(也就是业绩)

这样一来,我们就明确了现阶段为什么要做这件事:中介通过上传房屋信息获得一定的曝光量;而买卖租赁用户通过房屋信息省力省心找到符合自己预期的房源。



3、洞察目标用户特征

产品最终服务于用户,不同产品面对的不同人群的需求是不一样的,所以前期深入了解了用户,明白用户诉求,这样能更好的聚焦设计策略,将产品的核心价值及服务价值传递给用户,从而提升用户使用体验
接着对此次需求目标用户(中介)进行了调研分析,当前我们的中介用户特征具体表现为:年龄在45岁以下的用户人群占73%左右,整体年龄不大,对互联网接受度较高,工作业绩直接与房屋成交金额挂钩



4、梳理用户入驻流程

社区专家入驻流程简单的看就是上传社区信息图片,然而其实是一个系统化决策的过程,整条关键路径从了解入驻优势(信息获取)到怎么上传(上传图片)再到上传成功(入驻成功)经历了几个关键节点,开始呈现一个漏斗状的情形,转化率越来越低。
因此在产品设计之前,我们对用户决策的关键路径进行了相应的梳理:主要为入驻前、入驻中、入驻后几个阶段,同时围绕着每个环节去强化用户内心感知,挖掘设计上的机会点
在这几个阶段我们主要解决的问题可以归纳以下几点
1、入驻前:如何让中介快速找到入驻入口,明确入驻优势
2、入驻中:如何让用户入驻更顺畅
3、入驻后:如何提升用户入驻后效果感知,为再次入驻做推动



5、设计目标推导

到此产品整体的设计思路已经很明确了,如果前期我们没有对业务进行宏观层面的拆解和分析,设计后期可能找不准设计的发力点,从而导致设计没有贴合实际业务场景
围绕着这些背景,经过多次沟通最终设计和产品同学达成了一致,本次主要设计目标为
1、提升用户信息阅读效率
2、提升用户入驻决策效率
3、提升用户入驻后效果感知



6、设计方案落地

在明确了设计目标之后,最后一部分是设计落地了,正确的设计始终围绕着产品策略来执行的,并通过深耕的设计解决方案来为用户打造优质的服务体验,那么我们将从以下几个维度来进行视觉方案的设计

6.1、提升用户信息阅读效率

(1)以传达信息内容为主
说到权益设计师视觉常常会体现荣誉感,就会联想到黑金权益对比,但是不管是什么样的视觉表现,最终的结果都是以清晰传达信息内容为主,让用户看的明白这个是干什么的,对他有什么好处
如果用户看不明白,即使信息有效触达,最终会以为是广告不明所以的关闭



当然这中间也不仅仅是设计的问题,产品给的交互原型稿就有问题,整个图就没让人明白这个是基础权益和置顶权益的对比。设计拿到原型搞后要提前沟通,在交互原型不确定的情况下不要开始设计,这个在《设计如何提升工作中话语权》有提到过,等交互评审多方达成一致后开始着手设计,这样才会事半功倍



(2)利益点的展示
关于用户入驻的利益点运营角度肯定是展示越多越好,但是产品为了减少用户跳出率,期望查看任务是在当前页面用弹框承载。由于弹框承载信息有限,我们尽量想在电脑一屏内展示完当前任务及主要利益点,所以在用户能看明白的前提下不能无限增加利益点



(3)挽留弹框优化
无论什么类型的弹框,必须要做到文案简洁。不要让用户看半天还没明白你要说的是什么,然后才没办法也无所谓的点了确定或取消,当然大部分这种情况,他们都会点击取消,或者右上角的关闭键。
而一般弹框按钮,右边是主操作按钮,也就是引导用户操作下一步的按钮,这次优化前按钮文案不好理解,确定操作与用户本身理解有歧义,易造成误操作



6.2、提升用户入驻决策效率

(1)统一入驻后的视觉效果
中介入驻前后状态分为:入驻前、入驻中(审核中、未通过、已通过)、入驻后(免费续期)。其中入驻中未通过使用警示色红色,为了强化中介入驻后的视觉效果也采用了红色,这与入驻成功的绿色不符。
在视觉上用色混淆,那么后续红色是表示警示的同时还可表示强调?那么下图中「1筆成交」用红色是成功了还是未成功?为了避免这个问题,入驻后视觉效果统一为绿色,在后续色彩感知上更清晰明确,无论是设计师还是用户都不会混淆



(2)优化入驻路径

主要按照流程最短,操作最少方向去优化,1.0版本完成整套任务流程:免费入驻 → 入驻成功 → 做任务 → 免费置顶。当1.0第一版设计稿灰度上线后,产品预期是与中介达成共赢的结果,但是灰度数据结果显示中介用户入驻率低
在优化前我建立了一个用户调研群收集用户反馈,与部分用户电话1V1,发现有很大潜力去提升。比如与用户沟通时,用户说不知道入驻成功后还需要做任务;做完一个任务置顶后怎么还需要做任务;再做任务有什么作用等等
①免费入驻 → 入驻成功过程产生疑问,即入驻成功有权益还是做任务有权益?有什么不同?
②置顶一词有歧义,他们理解置顶是整个流程完成,而产品放理解置顶是前端页面的置顶



(3)任务弹框关闭方式
通常来说为了方便用户关闭弹框,点击蒙层或点击关闭都可任务。入驻任务弹框是中介进入后强制弹出,1.0版本用户点击蒙层也可关闭,在2.0版本时候新增上传社区格局图,需要填写筛选格局信息,关闭筛选框最常见方式点击筛选框其它区域,由于任务本来是弹框展示区域有限,点击蒙层是大多数人选择,这时候可能上传一半就打断了,体验非常不好。
处理方式:增加关闭按钮点击区域,弹框只能点关闭按钮关闭,点击蒙层不能关闭



6.3. APP优化专家入口

买卖租赁用户与中介的互动率在一定程度上影响着中介留存以及再次入驻意向,入驻后中介用户在APP展示上至关重要。
由于品牌色是饱和度比较高的橙色,所以前期整个页面的可点击区域基本以品牌色为主,每次强调都是在原视觉上更强。当专家版位的视觉强调用橙色,视觉上可能无法凸显;
用其辅助色蓝色时,存在2个问题,①蓝色辅助色视觉感比较重(新建案品牌色不能随意修改),作为按钮时更像是一个主按钮;②后续设计可能与其他业务线用色混淆,用户也可能分不清2个业务之间的关系

设计侧如何解决呢?

面对这样的僵局再做优化,就一定需要转换思路了。跳出纯页面设计的层面去看转化,我们到底设计什么?此时需要重新梳理模块内容,明确产品诉求是想突出什么,结合产品诉求重新梳理内容优先级,以视觉维度重新输出设计优化。



7、数据反馈

这一个阶段就是证明之前所说内容是对的,证明你的设计正确性与有效性,并对后续的优化做准备

从入驻前中后期及APP展示在10月18号优化上线后,中介入驻成功率明显上升,从而影响着社区入驻率也明显上升,APP端互动按钮点击率也极大提升。整体来说这次改版非常成功,后续在响应式详情页上也会做相应的专家版位优化,社区专家曝光率最大化,同时也提升C端用户找房效率


上面说了这么多,以上五步简单来说:

为了什么做 (问题在哪) → 要怎么做 (如何解决) → 如何才算做好了 (评估体系) → 做好了吗 (“定性、定量”在过程中的合作方式和态度) → 还需要优化吗 (验证复盘,再次出发)

四、设计价值具体表现方向

上面说了这么多其实想说明设计价值的本身不是局限的,它不仅仅是大多数人看到的可感知的界面,它还包含对外增值和对内成本两种类型:


对外增值是指价值的增加,用户、营收、知名度等,这些都是对外增值的部分,也就是我上面从设计维度改版产品;对内成本是指成本的控制,资源、效率、投产比等,这些都是对内成本的部分
而这两部分又可以被分为有形和无形



1、对外增值的有形价值

对外增值的有形价值,一般是指用户行为数据、业务盈利数据这些,是能被直观看见的。
如果一个决策是由你主导推进的,且因为这个决策引起了数据的上升,这个决策就是唯一变量,它能直接证明你的价值;


但是设计不是万能的,大多情况下设计只能通过“影响/实现局部用户价值”间接助力变现,我们只需关注可以通过设计手段参与、干预和落实的部分即可,这个就是我上面内容项目复盘总结的内容
当然,直接证明并不一定比间接证明更有价值。更重要的是,你要情境合理、逻辑自洽。



通常我们需要关注的指标有新增(新用户数,日周月)、传播(传播周期)、活跃用户数(DAU、MAU)、留存率以及流失率,还有aarrr的海盗指标-获取、激活、留存、传播、收入,这里不展开讲了大家可以去搜索一下。这些数据在改版以及做新功能的时候我们经常会用到。

2、对外增值的无形价值

对外增值的无形价值是什么呢?比如公司周年庆,设计组会承担全部的舞美设计,但是这个结果没办法用数据来衡量的。但是整个过程是设计全程跟进支持,使得客户好评高于往年,甚至还在行业内有一定的传播和讨论,这些都是对外增值的无形价值。
也就是说除了直观的数据目标,我们还可以从定义抽象的目标,抽象的目标也可以衡量。

3、对内成本的有形价值

设计组件规范可以最大化的保证设计的一致性、提升开发的效率以及方便产品的迭代优化,我们就使用了这样的公式:组件开发时间*使用次数-投入的时间成本,以此估算出组件库带来的工时缩减。当然组件库只是对内成本价值的一种,对内价值包含很多,比如设计原则提炼、设计语言统一等,这些在多个设计合作时事半功倍



大家常被到的问题:市面上开源的组件这么完善,设计师为什么花费那么多时间重新做组件?其实它存在2个问题

3.1、业务属性不符
虽然网上存在很多第三方组件比如Ant Design、TDesign等等,研发使用这些确实提升效率,但由于设计语言不同(公司不同业务属性不同),市面上的组件不一定与自家产品属性贴合,需要我们结合产品愿景以及业务规划进行重新设计。



3.2、业务特性不贴合

我们见到的很多组件只是基础组件,可以保证基础设计一致性,但由于业务领域的独特性和多样性,在一些专业的场景中有着强烈的业务属性,需要我们对一些基础组件进行组合,进行更专业的沉淀,这样在实际使用的时候会更加高效。例如高级筛选、不同的场景弹框等。



4、对内成本的无形价值

推动产研设流程优化,比如我之前写的《设计师如何提升话语权》就是我今年上半年发现了协作流程的不合理,反复沟通推动了流程的优化。这件事让整个团队有了更高效的合作,就属于对内成本的无形价值。
项目复盘对于我们设计师的能力成长的作用是巨大的。它之所是最快的学习方式,因为它在是实践中的反馈,这种直观的经验沉淀最终会融入自己解决问题的知识体系架构,而这将进一步反辅自己的职业成长。
复盘可以让我们站在第三方角度,重新对项目流程进行全面的回顾与总结。结合不同的反馈,客观的了解当前设计在整个业务目标中的价值,这是对我们设计量化最佳途径。




和大家再说远一点,工作可能常遇到的场景,设计优化推不动,无法进行下去。得到反馈是:优先级不高,后续有时间再优化...这个其实在大中小厂都有这个情况,属于设计价值的第二层体验优化,它优先级高不高,取决于这个问题是否足够致命。


比如说这个问题是核心功能,但根本不可用,这些就是致命问题;如果核心功能可用,只是没那么好用,也许对于你这个产品来说,就没有那么致命。所以与其想着怎样优化体验,不如看看是不是还有什么可以带来增长的方式,比如扩充下一类用户,或者更多的生态、品类等等

另外有个例子是关于一个朋友的,这个朋友工作很拼,在怀孕的时候周末都不休息,她当时负责2个业务中的一个很差。她调研了相关用户,把用户做画像分层,也找出了可以带来增长的方式,但是发给当时的合作方,他和他leader都是想混混日子的类型,就应付了一下,也没有往上汇报。在当时,级别差两级去沟通就很费劲了,这家公司在绩效期,也不强制要求给合作方评价,所以问题得不到解决,这些辛苦却换不来的成长
最后朋友就离开了,但她的性格闲不下来,而是找了一份挑战更大的工作。在之后的几份工作中,一路得到赏识和重用,充分发挥了能力。HR告诉她主管的评价是,没有做不好的事,就算不带设计团队,也可以转行带别的团队甚至创业。
他现在的公司,上下级也要互相打评价。所以身为主管,本身也要真的能力强,不然会被下属挑战,所以大家的话语权,就靠自己的能力和人品,简单明了,行就上,不行就下。团队的同学都说在她来了之后,他们有干劲多了。他们之前也很积极提方案,但总是被说优先级不高,其实是没有找准更值得做的项目。
所以建议是,首先看看是否是自己的问题,如果在和他人充分沟通后,明确问题确实不在自己身上,那你改变不了环境,就改变自己。或者你本身所在的公司挺好的只是部门不好,那就换个部门,找个级别相对弱化,专注于能力本身和项目本身的公司,成长会非常快。

作者:贝贤设计笔记

转载请注明:站酷

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


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


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


数据可视化在移动端的应用

seo达人

1.应用场景

数据可视化在移动端的主要体现是“数据图表”,我们最常用的数据设计组件就是:柱状图、折线图、环形图等,它们简单易懂,容易被用户接受。它们常常出现在与我们生活息息相关的产品当中,例如健身 app 中使用图表记录我们体重的变化;效率工具型的 app 记录分析你在某一件事情的花费的时间;金融理财展示股市中某一支股票的价格走势等等。

 

2.数据可视化的特点

数据可视化属于一种理性思维,产品通过图表可以向用户清晰的反应用户在每一个项目中所花费的时间和精力,用户可以通过数据可视化的图表形式快速了解到其中的信息。现在iOS 和 Android 平台暂时没有推出在数据可视化的设计规范,但是大家只要按照平台的基本规范设计,相信都能设计出美观、大方数据图表。如果大家对数据可视化有兴趣,这里向大家推荐 ANtv(https://antv.alipay.com/zh-cn/index.html)蚂蚁数据可视化团队,ANtv 是国内在数据可视化发展最完善的团队之一。 

 

3.使用原则

在数据可视化设计的时候我们首先要注意的是尽量避免使用“复杂”的数据表现形式,针对于普通用户我们要始终坚持 – 简单易懂的原则。其次在选择数据表现形式的时候一定要考虑到是否适用于目标数据,如果不能清晰的向用户清晰的传递出数据背后的信息,那么建议你重新进行分析,更换数据表现形式。在我们经常使用的数据图表中,柱状图擅长数值比较;折线图擅长做数据趋势展示;饼图和环形图适用于各类数据比例比较。这里我们需要注意的是折线适用于具有连贯关系数据纬度进行比较,而柱状图则不需要。我们以不同蔬菜的价格比较和单个蔬菜价格趋势为例,例如当我们在比较各种蔬菜的价格的时候,由于各品类蔬菜没有任何连贯性的逻辑关系,所以折线图不合适,而柱状图则能清晰的表达蔬菜之间价格比对。
蔬菜品种之间没有任何连续性,所以不适合用折线图来表示;而单个蔬菜的价格走势是通过具有连续性的“时间”纬度进行比较的,所以趋势图选择折线图更加合适。
饼图不适用于分类过多的数据展示,随着数据种类的增加切片的数量也随之增加,每个切片的大小过于相似,无法达到数据对比的目的。
相对PC,手机屏幕展示的区域有限,不适宜展现数据纬度过多的数据。假设我们遇到数据纬度众多的数据,我们可以通过横轴交互来增加数据展示区域。
我们还可以对数据进行梳理清洗,通过增加交互步骤减少用户的记忆负担,分段查看数据。例如灯塔专业版中的行业数据将电影行业中涵盖的信息分成票房、影片数、影院数、银幕数等维度进行分析。

 

4.场景分析

柱状图

柱状图擅长对不同类型的数据进行数值比较,柱状图之间的条目相对独立,数据之间不需要有逻辑的关联性。我们常用的柱状图分为横向柱状图和纵向柱状图,如下图:
两者的区别在于纵向柱状图带有一定的逻辑关系,可用于 TOP 排名,数值越大的位置越靠上。例如 iOS 系统中会记录你最常使用的 App 形成纵向柱状图,并按照使用 App 的时长大小进行一次排列。

 

横向柱状图

横向柱状图只需在以 X 轴为基线通过对比柱形图的长短就可以进行数据比较,因其简洁、直白的设计形式深受用户们的喜爱,应用领域极广,是我们最常见到的图表形式之一。例如在支付宝中会显示用户每月的消费,并能通过横轴交互查看更多数据。

 

纵向柱状图

纵向柱状图以 Y 轴为基线通过对比柱形图的长短就可以进行数据比较,纵向柱状图区别于横向柱状图的地方在于:在具有一定关联性的数据种类进行比较的时候,可以通过数值的大小依次排列显示明确数据等级关系。例如网易有钱中会按照你消费的品类数值的大小进行排布,让用户明确知道自己在那一方面消费最多,并且依靠 Y 轴交互我们可以向下滑动查看更多数据信息。

 

折线图

折线图通过线链接横向相邻数据的数据表现形式,通常相邻数据之间都有一定的逻辑关系,一般以时间属性为主,表达一定周期之内的趋势走向。
折线图在金融领域的产品应用极其广泛,“折线图+涨幅数据”无疑是吸引用户理财的利器。这时折线图不单单代表数据,在用户心中已经成为一种标志。
当然折线图最重要还是记录段时间之内的趋势变化,例如微信运动中记录用户每天的运动量,用户可以根据折线图反馈的信息来调整自己的运动计划。

 

饼状图

饼状图是通过将一个圆饼按照分类的占比划分成多个区块,整个圆饼代表数据的总量,每个区块(圆弧)表示该分类占总体的比例大小,所有区块(圆弧)的加和等于 100%。
现在 App 较少用到饼状图而更多的采用环形图,因为饼状图和环形图两者有异曲同工之妙,都是应用于表示不同分类的占比情况,通过弧度(角度)大小来对比各种分类。但相对于饼状图,环形图的空间利用率更高。

 

环形图

由两个及两个以上大小不一的饼图叠在一起,挖去中间的部分所构成的图形。通过弧长来比较各类数据的占比大小。
在灯塔专业版中通过环形图能够准确的表达出各个电影所占总场次的比例。

 

5.画重点

1.在数据可视化的设计当中我们要是始终坚持“简单易懂”的原则,选择最合适的数据表达形式
2.柱状图擅长数值比较;折线图擅长做数据趋势展示;饼图和环形图适用于各类数据比例比较。
3.在有限的移动端的显示区域,我们可以借助于 XY 轴交互手段和对数据进行梳理增加交互步骤分段查看更多数据。 

 


作者:姜正

转载请注明:学UI网》数据可视化在移动端的应用

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


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


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





数据可视化大屏设计经验分享【高级篇】

seo达人

案例解析

下图是我们优秀的技术人员利用模版直接布局出来的页面,也可以理解为需求页面,接下里就需要我根据页面的内容重新定义风格设计。

原图

 

当我看到这个页面,首先要知道他是干什么的?功能是什么?是纯数据展示还是监测预警?通过这些了解基本就能知道有没有交互行为,有交互和没交互在数据可视化的设计思路上会有很多不同,还有功能不一样设计方向也会不一样。

其次要分析出主次数据总分数据,还要剖析目前图表运用的合理性和大屏的设计比例尺寸等等,最终可以通过分析对页面有个合理的布局展示。

通过分析对页面重新布局,如下图:

重新布局图

 

最终设计稿

 

数据可视化页面设计,如果页面中有一个非常抢眼的主视觉图,那么一般对其他的元素不会过度的设计,如果都是抢视觉的元素整个页面太“花枝招展”了。

上图左右两边的图表只是简单的呈现出来,这样整体视觉上更有呼吸感,有张力,如果每个图表都加上边框,页面就会显得局促,常见的3D地理城市,主视觉为3D模型,辅助元素一般都不过度修饰。

 

1、关于板式风格元素

主题风格构思阶段:

既然是“首都国际机场”那么用3D地球来展示最佳不过了,3D地球无疑是一个重磅视觉元素,飞机围绕地球往返飞行形成光线,这样看上去页面会有很多线条。

设计讲究“你中有我,我中有你”所以这个页面可以设定为以“线条”主题,尽可能的用纤细的效果设计其他元素,例如页面中纤细的条形图、柱状图、环形图这样的设计就能体现出元素间的关联性,整体能达到一种视觉平衡和谐

在思考用3D地球来设计时,我是提前跟开发沟通过,知道可以落地实现,然后才着手开始设计,所以工作中有拿不准的设计,要即时跟开发沟通

 

元素设计阶段:

标题设计

 

左边的标题中规中矩看起来比较死板,不太符合这个产品页面整体调性,右边的标题用了斜体和轻微的渐变色,能够渲染页面飞机动感的氛围,所以右边的设计形式更合适。

但不是说所有产品标题都应该用斜体渐变色,要根据产品而定,例如政府类产品更多是要体现庄严的氛围,中规中矩的形式就更为合适。

天气、空气质量、时间元素

 

天气温度、空气质量、时间是一定要加上的,原因是飞机在户外飞行肯定会关注天气,而对于北京机场来说关注空气质量也尤为重要,再说说时间,既然是机场实时数据,那么当下的时间对比实时数据就非常有意义,所以时间要体现出来。

 

2、关于图表设计

图表一改版:

总航班量图表截图

 

上面图表虽然可以表达清楚全部数据,但图表包含航班总数量,这样的展现方式视觉上表现弱,同时不能够直观表达总量里面包含延误航班和取消航班。

改版后

 

改版后从“出港量”“进港量”两个维度出发,合并同类项:

出港量包含:出港延误航班、出港取消航班

进港量包含:进港延误航班、进港取消航班

用大字号重点突出进出总航班量,然后在下面分别罗列延误航班数量、取消航班数量,这样数据之间的关系表达就很清晰,一看就明白,同时两个维度各个数据也可以互相比较。

 

用色说明:

延误航班用黄色,黄色情绪映射为等待,延误即等待;

取消航班用红色,红色情绪映射为停止,取消即停止。

 

图表二改版:

问题图表

 

上图环形图其实用的并不恰当,环形图更适合总量的各个百分比呈现,标题“今日前五延误进港机场”其实想表现前五名城市的延误进港排名,排名用条形图最为直观。

但从页面的整体看一下,已经有两处用到了条形图,柱状图,如果这里还是条形图,那么页面看起来会很单调,图表也没有表现的多样性,所以现在设计要体现图表的多样性也能够有排名的直观呈现。

改版后图表

 

修改后依旧采用环形图,把排名由高到低用注释的形式呈现,俩者都能兼顾,这样的设计思考方式就是设计思维,设计师既要考虑视觉,也要考虑功能目的,善于在两者之间找到平衡。

 

3、标题和文案优化

第一处修改:

问题标题

上图左右两个标题唯一的区别就是一个是“进”字,一个是“出”字,这两个字如果不仔细看很难一眼出左右的区别,所以我们在设计标题的时候,一定要提炼关键词,把可以作为明显区别的关键词置前。

调整后标题

 

调整后的标题把重点区别的关键词置前,观者能够快速识别。

 

第二处修改:

问题标题和数据格式问题

 

此图表数据体现是延误航班数据,所以标题的关键词应该是“延误”,延误放在标题中间没能起到快速识别数据类型作用。

再者就是图表上的数据格式错误,航班数量不该有小数点,因为航班数都是整数呈现。

调整后

 

调整后关键词置前“延误进出港机场-今日前五”用横杠隔开“今日前五”能够过度信息,更直观。

 

4、3D效果技法

3D地球效果:

原图上进出港途中详情是上下分开的:

开始想用进出港切换的方式呈现,就是一个大地球,一个小的缩略图,可以点击切换,也可以自动轮播大小切。

初稿

 

后考虑到此产品是没有任何交互操作的,这里设计交互行为是不合理的,所以要换一种形式。

定稿(数据15分钟刷新一次)

 

调整后让两个数据都呈现在地球上,用两种不同光线颜色表示进出港班次。

青色:北京扩散的方向代表出港

蓝色:聚焦北京的方向代表进港

如果细心查看页面会发现,所有关于进港的都是青色,例如进港总航班量、进港人数、即将进港航班;同样关于出港的都是蓝色,目的就是要建立观者颜色对数据类型的认知。

 

3D地球技法教程:

3D地球动画效果,纯用C4D软件完成:

  • 1、地球用一个世界地图贴图
  • 2、地球的凹凸效果用了材质的置换和凹凸
  • 3、小飞机动画用的是对齐曲线动画
  • 4、国家之间样条生成用的是插件 LON—LAT Connection
  • 5、光线粒子用的是插件 X-Particles

下面我们一一介绍:

首先找一张世界地图,这里称为“球皮”,ps调整色调,满意为止。

调色球皮

 

把球皮放入材质,表面的凹凸效果用置换和凹凸。

材质设置

 

小飞机动画用的是对齐曲线动画,打关键帧转一圈,记得勾选切线,不然飞机会横的飞。

飞机绕地球动画

 

国家之间样条生成用的是插件 LON—LAT Connection,这一步很关键,插件使用很简单就是选择:洲-国家-城市~洲-国家-城市,tab切换有设置可以设置样条曲线的高度弧度等。

城市链接样条设置

 

最后就是用插件 X-Particles 渲染光线粒子效果,光线效果利用毛发渲染,第一条光线走完冻结,后面小光线依次循环发射。
光线渲染

 

上面教程说的很笼统,有基础的同学肯定会明白,接下来我们来看如何开发落地。

 

3D地球效果开发落地:

首先我们要知道一个网站Echartsj 里面有个3D路径图,看下图:

Echartsj网站截图

 

上图两个地球路径图组件,都可以实现我们的效果,只需要我们把色调调整好的“球皮”给到开发人员,替换组件里面的图片即可,组件生成的地球原理是一样的,也是由一张图包裹成球,地球数据光线颜色可更改,把色值给开发人员即可。

 

案例总结:

1、数据可视化设计,首先了解功能,分析数据之间的关系

2、构思主题,围绕主题设计其他元素,特殊效果跟开发沟通

3、分析数据,合理选用图表,对图表能灵活运用

4、不要忽视文案的设计,提取关键词

5、加强技法,了解数据可视化设计网站

 

最后

数据可视化大屏设计,对视觉表现、数据的合理呈现有一定的要求,这两点都是由设计师为主导,所以设计前根据产品定义风格,了解数据之间的关系非常重要,切记不要太依赖原型图。


作者:吴星辰

转载请注明:学UI网》数据可视化大屏设计经验分享【高级篇】

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


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


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



后台数据可视化界面设计的10条经验法则

seo达人

写在前面:本文的英文原标题是“10 Rules of Dashboard Design”,其中Dashboard如果翻译成仪表盘的话,总觉得不大容易理解,所以我在这里把它翻译为数据可视化。数据展示方面的设计,相信大家会经常用到,这篇文章有很多简单直接,立马就能用上的干货,一起来学习吧!

 

为什么数据可视化设计非常重要?

数据可视化的目的是以一种用户更容易理解的形式呈现复杂信息。
一个优秀的数据可视化界面包含以下几个关键要素:
清晰: 一个好的数据可视化界面一定是能够清晰的展现用户所需要的信息。当用户看到界面内容时,应该能在5秒内了解到它的用途,而不是花费至少几分钟才能理解各个数据的含义。
有意义: 一个有用的数据可视化界面上的每一条信息都应该是有意义的。这些有意义的信息能准确传达设计师想要表达的内容。每一条数据的背后,用户应该都是可以读懂的。
一致性:优秀的数据可视化界面,会有一套非常严谨一致的版面。这里的一致性需要考虑到布局,结构和内容。
简单: 复杂的界面违背了数据可视化设计的初衷。如果一个信息呈现不够简单直接,那么肯定是在设计上出现了问题。

 

如何设计一个数据可视化界面?

数据可视化界面设计最重要的步骤是需要了解目标用户是谁,能为他们提供什么价值。了解目标受众的知识背景和理解水平能帮助你做出对他们有价值的设计。
在了解目标用户时,有必要了解受众感兴趣的数据类型。
“专注于用户的需求,更容易产生他们喜欢使用的结果。”
目标用户级别可能会在一级和另一级之间变化,这是一个挑战性的点。与其他任何设计项目一样,可以细分受众并将信息相应地分为基本内容和高级内容。
在界面中表示一组信息有多种方法,选择正确的数据指标是设计数据可视化的另一个关键元素。这也与目标用户的偏好有关,即他们希望看到什么样的信息。
“根据需要设计数据可视化界面,为不同的业务使用不同类型的展示方式。”
下面是为目标用户设计数据可视化界面时需要考虑的一些重要规则。

 

1. 区分层级

一个非常常见的错误就是设计师没有对信息区分层级,所有的内容看起来都一样重要。
可以尝试使用组件的大小和位置来区分数据的层次结构。
  • 通过定义信息层级,让用户清楚什么是最重要的
  • 在左上角显示更重要的信息,沿着对角线方向,信息的重要程度应该依次减弱,右下角的信息重要性最弱
  • 还可以将信息划分为不同类别,并在不同的视图中显示它们

 

2.简单易懂

数据可视化的真正目的是用一种更方便理解,更简单的形式来传达复杂信息。
  • 不要放一些大多数用户都难以理解的信息
  • 使用更少的列来显示信息
  • 删除冗余内容来减少混乱

 

3. 一致性

使用一致性布局设计的数据可视化界面看起来更好。
  • 为了使界面更容易阅读,可以在信息组之间使用类似的可视化效果。
  • 把相关的信息放的更近一些
  • 对相关内容进行可视化分组

 

4. 临近原则

在界面中把相近的信息放在一起可以帮助用户快速理解。
  • 把相关的信息放的更近一些
  • 不要将相关信息分散在界面上
  • 对相关内容进行可视化分组

 

5. 对齐

可视化组件元素需要在视觉上对齐,并保持视觉平衡。
  • 将可视化组件元素在视觉上进行对齐,可以将界面组织的更好
  • 尝试将组件元素进行网格布局设计
  • 不对齐的界面会给用户带来糟糕的体验

 

6. 留白

留白是为了让界面有呼吸感,它使得用户在使用你的界面时能够有出喘息的空间。
  • 当用户查看需要的信息时,界面中的留白能够吸引用户的目光,提升用户体验。
  • 减少留白会使用户的界面变得混乱
  • 使用留白能对信息进行可视化分组
留白太少简直就是在鼓励你的用户尽快离开

 

7. 颜色

使用有效的配色方案来吸引用户的注意力,帮助他们轻松地浏览信息。
  • 仔细选择颜色,目标是使内容易于阅读。
  • 使用大对比度来显示背景上的视觉元素。
避免使用低对比度和低效的渐变

 

8. 字体

标准字体是可视化界面中的最佳字体,除非有特别的理由,一般不要用其他字体。
  • 使用标准字体,因为它们更容易阅读和扫描。
  • 特别和美术字体可能看起来不错,但很难理解
  • 避免所有的大写字母文字,因为它很难阅读,人类的大脑需要时间来消化它。
  • 使用合适的字体大小和风格,有效地传达信息。
不要使用影响可读性的字体

 

9. 数字排版

显示精度超过要求的数字使它们难以阅读和理解。
  • 必要时使用整数,因为长数字会使用户混淆
  • 省去不必要的信息
  • 让用户能够容易地比较简单的差异细节

 

10. 标签

使用能够快速有效地向用户传达所需信息的标签。
  • 避免使用带旋转的标签,因为很难阅读
  • 尽可能的使用标准的缩写
避免旋转标签

 

总结

数据可视化旨在节省时间和精力,将复杂和抽象的数据以更简单的形式表示,目的是以用户能够理解的方式将关键信息传达给他们,确保自己理解用户所需,并给他们需要的信息。

 


作者:Saadia Minhas

译者:彩云sky

转载请注明:学UI网》后台数据可视化界面设计的10条经验法则

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


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


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




数据可视化设计 – 3D粒子模型科技感动效【进阶教程】

seo达人


调研给大家看的效果图
上图是调研给大家看的效果图,这种效果常常在科幻大片中看到,是FUI风格较常见的设计元素,实际上可视化设计也常用真实的形象和三维场景,助力数据解释。
如下图,之前设计的产品“军人心理指标采集系统”,功能上是呈现人的生理指标数据,界面中人的形象,就能直观的把人体,如脑电、心率等各部位对应的数据展示清楚。
3D动画使用场景
不多说了开干!
接下来我们用两种方式实现这种效果

 

方法一: 

用到的软件为:C4D+AE
首先得有模型,C4D自带了一些模型,网上也可以找到很多模型,我常在“CG模型网”找模型,模型最好找C4D格式或者通用obj格式,其他软件格式需要转格式,当然如果有建模能力可以自己建模,下面用一个帅气的跑车为例讲解。
第一步:找到需要的模型在C4D软件中打开;

 

第二步:使用晶格,把模型置入晶格下面,调整晶格对象属性中的数值,使模型看起来是线框展示,调整的半径尺寸需要呈现细丝状,太粗略显笨重;

 

 

第三步:打关键帧制作动画让跑车原地打转一圈360度,需要注意的是坐标点位置的调整,例如模型旋转一圈,坐标最好在模型中心位置;

 

第四步:设置缓动曲线,我们要实现的效果匀速运动循环播放更为贯通,默认会有缓入缓出,所以需要调整,右击指定的关键帧区域,找到显示函数曲线,弹窗里点击“线性”直角图标;

 

 

第五步:设置输出参数尺寸、帧频、帧范围,帧频设置需要在不影响流畅度的情况下,可以稍小一些,这样后面落地的文件也就不会太大,然后设置保存参数,选择PNG勾选Alpha通道,抗锯齿选项中可以为“最佳”;

 

 

第六步:渲染序列帧;

 

 

最后一步:把序列帧倒入AE,在AE中设置颜色、时间、加特效等;

 

 
 

方法二: 

用到的软件为:AE粒子插件 Trapcode-Form
 
新建合成-新建纯色图层-找到Form拖给纯色图层,选择模型-开启3D图层-打关键帧;

 

 

 

AE通过改变粒子属性(顶点、边、面、体积)可以变化不同样式,下图切换为“顶点”后呈现的跑车样式。

 

 

如果觉得这样旋转很单调,还找一些HUD添加效果,如下图所示:

 

两种方法的优缺点总结:
C4D导出序列帧方式虽然步骤多,但在模型的特殊要求上更为灵活,可随时修改模型,可局部晶格化。
AE的优势是有不同的样式可挑选,步骤简单,但如果设备不给力稍大的模型会很消耗设备资源,导致卡顿。
下面再分享几个其他模型效果,枪的效果是Form模型设置中“面”的效果。

 

 

如何落地?在之前的《B端新零售产品》文章详细讲解过,文末有文章链接,文章中出现的模型送给大家,供大家练习,公号后台回复“模型”即可获取。
 
 

最后  

数据可视化设计的核心还是数据的有效呈现,视觉上的美观炫酷要与数据呈现契合,做到美观性与实用性相辅相成,3D效果固然炫酷,但不能为了加而加,影响数据呈现,有的产品并非适合,让炫酷的视觉效果助力数据可视化,才是设计师应该追求的。


作者:吴星辰

转载请注明:学UI网》数据可视化设计 – 3D粒子模型科技感动效【进阶教程】

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


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


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



日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档