• 效果更细腻!在线免费抠图神器「ImageMatting」

    UI交互 2022-05-30
    ImageMatting 是一个免费在线去背工具,使用 AI 人工智能驱动的算法进行处理,算法本身也透过百万张的相片训练,以重现专业人员在处理相片时的精确...

    ImageMatting 是一个免费在线去背工具,使用 AI 人工智能驱动的算法进行处理,算法本身也透过百万张的相片训练,以重现专业人员在处理相片时的精确性和细腻度。这家公司的背景提到从 2006 年开始就在做图片编辑的商业外包工作,Media Backoffice 总部位于日本东京,将设计师和摄影师的工作委由印度农村生产中心的 300 名员工进行处理,ImageMatting 就是以这些相片来训练算法。

    开启 ImageMatting 网站后直接把相片拖曳到适当字段就全自动去背,没有任何设定选项,准确性方面也非常理想,不过 ImageMatting 不擅长辨识主题不清晰、具备纹理背景的相片,更适合轮廓清晰、背景平坦、白色的相片素材,特别是电子商务或产品会用到的相片,通常都能在这个去背工具获得非常好的效果。

    ImageMatting 另一特色是在相片的边缘质量方面处理得很细腻,将图片放大检视会发现细节相较于其他的去背服务来说更为理想,当然这也取决于本身相片的主体是否清晰,如果有需要将图片去除背景的话可以试试看这项免费服务。

    往期 抠图神器 :

    扣头发丝不留痕!最新免费抠图神器 ClipDrop Remove Background 来啦~ 大家好,我是和你们聊设计的花生~ 随着人工智能技术的发展,运用算法自动进行图片处理的工具越来越多,极大地提升了设计师的工作效率。

    阅读文章 >

    不限次数!快收藏在线免费抠图神器「Hama」 Hama 如同上次介绍的「Magic Eraser」,让用户上传图片、将画面中不想要的部分抹除,因为这类服务都是使用人工智能 AI 加上机器学习方式训练出更强大的程序辨识能力,会分析标示人物或物品,移除后将附近的颜色补充进来,就会使去除后的相片画面很自然,而且这项服务完全免费,使用者只要

    阅读文章 >

    又一个抠图神器!在线免费一秒搞定超好用! 当今的在线去背工具多半会整合 AI 人工智能技术,以机器学习方式去建构出可准确辨识前景和背景的模型,使用机器自动化去除背景的好处是快速、精确而且无需额外编辑,即使没有专业绘图软件一样可以在浏览器进行,remove.bg 是在线去背服务最早出现、而且最强大的选择,后来也有 FocoClip

    阅读文章 >

    ImageMatting 网站链接: https://imagematting.com/

    使用教学

    开启 ImageMatting 网站会看到右侧的上传字段,将相片拖曳进去即可自动去背,在写这篇文章时 ImageMatting 服务还是标记为测试(BETA)阶段,不确定未来会不会转为收费服务。

    去除背景后 ImageMatting 会直接显示结果,点选右上角「Download」就能下载相片。

    如果想查看原始图片和去背后的图片差异,从左上角「Processed」可切换相片。

    如果想要测试一下 ImageMatting 效果,网站也有提供四张范例图片,分别为球鞋、T 恤和外套等商品照片,因为是单一颜色背景,在处理效果上也很理想,可点选范例图片带入去背工具测试。

    值得一试的三个理由:

    ImageMatting 以人工智能 AI 驱动的算法,自动去除图片背景 适合轮廓清晰、背景平坦的相片,纹理背景可能无法获得好的效果 对于相片的边缘质量方面处理得更为细腻

  • 剪纸风海报怎么做?推荐这5位顶尖艺术家和超多免费教程!

    UI交互 2022-05-30
    大家好,我是和你们聊设计的花生~ 剪纸风格是海报设计中一种常用的风格,它能拓展画面的深度,丰富画面内容和层次。精致的剪纸风元素能成为撑起一张海报的视觉焦...

    大家好,我是和你们聊设计的花生~

    剪纸风格是海报设计中一种常用的风格,它能拓展画面的深度,丰富画面内容和层次。精致的 剪纸风 元素能成为撑起一张海报的视觉焦点,搭配合适的文字排版就能得到一张高质好看的平面作品。

    今天就为大家推荐 5 位顶尖的剪纸艺术家,他们的作品风格各异,但都无比精致美丽,肯定能为大家的设计带来新的灵感。另外还为大家提供几个免费的剪纸风海报高质量教程,帮助大家更好的学会这种设计风格,一起来看看吧~

    往期热门内容推荐↓

    超多教程!7 个实用方法帮你学会设计立体字效 大家好, 我是继续和你们聊设计的花生~ 立体或者带有空间感的文字能打破了二维平面的单调,带来新鲜的视觉感受,在海报设计中运用极广。

    阅读文章 >

    5 位优秀的剪纸艺术家 1. Adrian & Gidi

    「Behance 主页」 https://www.behance.net/adrian-gidi

    「工作室主页」 https://www.adrian-gidi.com/projects

    Adrian & Gidi 是一家位于阿姆斯特丹的多学科的创意工作室,业务范围包括工艺、摄影、设计、动画等多个领域。不同于 Eiko Ojala 的数字化剪纸艺术,Adrian & Gidi 工作室的剪纸作品都是实打实的手工作品。

    他们使用纸张、发泡胶、微型模型和木材来完成剪纸场景的搭建,用相机捕捉不同角度的场景然后导入电脑进行后期处理。实景拍摄让 Adrian & Gidi 的剪纸作品可以实现更复杂精致的效果,经过后期合成能实现令人惊叹的产品创意。作品中也经常出现花朵绿叶的植物元素,营造出自然而蕴含生机的氛围。

    2. Margaret Scrinkl

    「Behance 主页」 https://www.behance.net/scrinkl

    「Instagram 主页」 https://www.instagram.com/scrinkl/

    Margaret Scrinkl 是一名来自俄罗斯的剪纸艺术家和定格动画师。她的剪纸小巧精致,能在有限的空间内创造出一片温馨治愈的小天地。Margaret 的作品整体来说非常适合用作平面设计的灵感参考,画面配色清晰活泼,层次不多但明度差异分明,场景显得有深度。内部元素会探出边界,打破固有的限制,让构图更加灵活有视觉吸引力。

    往期热门内容推荐↓

    这 5 位优秀的贴纸设计艺术家,是我每日学习的源泉! 大家好,我是和你们聊设计的花生~ 上一期为大家推荐了 5 位擅长扁平风插画的艺术家: [link https://www.uisdc.com/5-illustrations-artist] 今天要为大家推荐的 5 位艺术家,都非常擅长「贴纸」设计。

    阅读文章 >

    3. Yeni Kim

    「工作室主页」 https://www.marchcraft.com/

    「Behance 主页」 https://www.behance.net/yeni_kim

    「Instagram 主页 」 https://www.instagram.com/yeni__kim/

    Yeni Kim 是来自韩国的一位首尔的艺术家,专精于创意手工纸艺。她擅长纸艺场景的搭建,场景完整,细节精致,配色温暖,作品整体呈现出童话般梦幻的氛围感。作品的高质量让 YYeni Kim 的作品收到很多知名品牌的喜爱,Apple、CHANEL、NB、Starbucks 都与其工作室有过合作。

    4. Sarah Dennis

    「个人网站」 http://www.sarah-dennis.co.uk/

    「Pinterest 主页」 https://www.pinterest.com/sarahdenniss/_created/

    「Instagram 主页」 https://www.instagram.com/sarahdennisillustration/

    不同于前面前面介绍的几位艺术家,Sarah Dennis 的剪纸作品大量的镂空雕刻,因此显得古典华丽。她作品的一大特色是大胆使用金色,在与浓郁深沉的底色搭配色显得光彩熠熠,为作品增加了一丝神秘的色彩。

    5. EIKO OJALA

    「个人网站」 https://ploom.tv/

    「Behance 主页」 https://www.behance.net/eiko

    「Instagram 主页」 https://www.instagram.com/o_eiko/

    Eiko Ojala 是来自爱沙尼亚的著名插画家,他的插画以剪纸风为主,光影细腻,形状精致,层次丰富。Eiko Ojala 擅长用负空间、镜像、视角倾斜等各种方式构思画面,并精心安排不同元素使其形成微妙奇特的关系,从而传达出深层的寓意,这种以简单的形状表达复杂的主题的特性也让 Eiko 的插画受到世界各地客户的欢迎。

    虽然剪纸的效果非常逼真,但是 Eiko 的作品同时通过数字方式处理形成的。他会先将草图画好,然后在 PS 中勾勒形状并添加光影和质感。这样不仅创作效率更高,也更让我们惊叹于 Eiko 对光影在画面中分布的把握。

    高质量免费剪纸风教程 「教程一」PS 基础教程!教你制作 3D 剪纸文字效果: https://uiiiuiii.com/photoshop/12124894.html

    「教程二」PS 教程!超逼真的敦煌折纸字效海报: https://uiiiuiii.com/photoshop/1212440967.html

    「教程三」AI 教程!教你绘制春分主题剪纸风格插画: https://uiiiuiii.com/illustrator/1212345160.html

    好啦以上就是今天的分享,希望对大家学习剪纸风有帮助。喜欢的小伙伴记得点赞收藏哦~

  • 剪纸风海报怎么做?推荐这5位顶尖艺术家和超多免费教程!

    UI交互 2022-05-30
    大家好,我是和你们聊设计的花生~ 剪纸风格是海报设计中一种常用的风格,它能拓展画面的深度,丰富画面内容和层次。精致的剪纸风元素能成为撑起一张海报的视觉焦...

    大家好,我是和你们聊设计的花生~

    剪纸风格是海报设计中一种常用的风格,它能拓展画面的深度,丰富画面内容和层次。精致的 剪纸风 元素能成为撑起一张海报的视觉焦点,搭配合适的文字排版就能得到一张高质好看的平面作品。

    今天就为大家推荐 5 位顶尖的剪纸艺术家,他们的作品风格各异,但都无比精致美丽,肯定能为大家的设计带来新的灵感。另外还为大家提供几个免费的剪纸风海报高质量教程,帮助大家更好的学会这种设计风格,一起来看看吧~

    往期热门内容推荐↓

    超多教程!7 个实用方法帮你学会设计立体字效 大家好, 我是继续和你们聊设计的花生~ 立体或者带有空间感的文字能打破了二维平面的单调,带来新鲜的视觉感受,在海报设计中运用极广。

    阅读文章 >

    5 位优秀的剪纸艺术家 1. Adrian & Gidi

    「Behance 主页」 https://www.behance.net/adrian-gidi

    「工作室主页」 https://www.adrian-gidi.com/projects

    Adrian & Gidi 是一家位于阿姆斯特丹的多学科的创意工作室,业务范围包括工艺、摄影、设计、动画等多个领域。不同于 Eiko Ojala 的数字化剪纸艺术,Adrian & Gidi 工作室的剪纸作品都是实打实的手工作品。

    他们使用纸张、发泡胶、微型模型和木材来完成剪纸场景的搭建,用相机捕捉不同角度的场景然后导入电脑进行后期处理。实景拍摄让 Adrian & Gidi 的剪纸作品可以实现更复杂精致的效果,经过后期合成能实现令人惊叹的产品创意。作品中也经常出现花朵绿叶的植物元素,营造出自然而蕴含生机的氛围。

    2. Margaret Scrinkl

    「Behance 主页」 https://www.behance.net/scrinkl

    「Instagram 主页」 https://www.instagram.com/scrinkl/

    Margaret Scrinkl 是一名来自俄罗斯的剪纸艺术家和定格动画师。她的剪纸小巧精致,能在有限的空间内创造出一片温馨治愈的小天地。Margaret 的作品整体来说非常适合用作平面设计的灵感参考,画面配色清晰活泼,层次不多但明度差异分明,场景显得有深度。内部元素会探出边界,打破固有的限制,让构图更加灵活有视觉吸引力。

    往期热门内容推荐↓

    这 5 位优秀的贴纸设计艺术家,是我每日学习的源泉! 大家好,我是和你们聊设计的花生~ 上一期为大家推荐了 5 位擅长扁平风插画的艺术家: [link https://www.uisdc.com/5-illustrations-artist] 今天要为大家推荐的 5 位艺术家,都非常擅长「贴纸」设计。

    阅读文章 >

    3. Yeni Kim

    「工作室主页」 https://www.marchcraft.com/

    「Behance 主页」 https://www.behance.net/yeni_kim

    「Instagram 主页 」 https://www.instagram.com/yeni__kim/

    Yeni Kim 是来自韩国的一位首尔的艺术家,专精于创意手工纸艺。她擅长纸艺场景的搭建,场景完整,细节精致,配色温暖,作品整体呈现出童话般梦幻的氛围感。作品的高质量让 YYeni Kim 的作品收到很多知名品牌的喜爱,Apple、CHANEL、NB、Starbucks 都与其工作室有过合作。

    4. Sarah Dennis

    「个人网站」 http://www.sarah-dennis.co.uk/

    「Pinterest 主页」 https://www.pinterest.com/sarahdenniss/_created/

    「Instagram 主页」 https://www.instagram.com/sarahdennisillustration/

    不同于前面前面介绍的几位艺术家,Sarah Dennis 的剪纸作品大量的镂空雕刻,因此显得古典华丽。她作品的一大特色是大胆使用金色,在与浓郁深沉的底色搭配色显得光彩熠熠,为作品增加了一丝神秘的色彩。

    5. EIKO OJALA

    「个人网站」 https://ploom.tv/

    「Behance 主页」 https://www.behance.net/eiko

    「Instagram 主页」 https://www.instagram.com/o_eiko/

    Eiko Ojala 是来自爱沙尼亚的著名插画家,他的插画以剪纸风为主,光影细腻,形状精致,层次丰富。Eiko Ojala 擅长用负空间、镜像、视角倾斜等各种方式构思画面,并精心安排不同元素使其形成微妙奇特的关系,从而传达出深层的寓意,这种以简单的形状表达复杂的主题的特性也让 Eiko 的插画受到世界各地客户的欢迎。

    虽然剪纸的效果非常逼真,但是 Eiko 的作品同时通过数字方式处理形成的。他会先将草图画好,然后在 PS 中勾勒形状并添加光影和质感。这样不仅创作效率更高,也更让我们惊叹于 Eiko 对光影在画面中分布的把握。

    高质量免费剪纸风教程 「教程一」PS 基础教程!教你制作 3D 剪纸文字效果: https://uiiiuiii.com/photoshop/12124894.html

    「教程二」PS 教程!超逼真的敦煌折纸字效海报: https://uiiiuiii.com/photoshop/1212440967.html

    「教程三」AI 教程!教你绘制春分主题剪纸风格插画: https://uiiiuiii.com/illustrator/1212345160.html

    好啦以上就是今天的分享,希望对大家学习剪纸风有帮助。喜欢的小伙伴记得点赞收藏哦~

  • 可视化大屏设计快速入门指南,看这篇就够了!

    UI交互 2022-05-30
    前言 随着大数据产业的蓬勃发展,很多企业都开始应用数据可视化。智慧城市、智慧交通、智慧医疗等等越来越多的行业都有了可视化的需求,可视化行业也...

    前言 随着大数据产业的蓬勃发展,很多企业都开始应用数据可视化。智慧城市、智慧交通、智慧医疗等等越来越多的行业都有了可视化的需求,可视化行业也迎来了迅速发展的成长期。

    往期回顾:

    想快速搞定可视化设计?这20个精选神器收好了! 大家好,我是小六。

    阅读文章 >

    可视化设计神器第二弹!15个精选神器都在这! 大家好,我是小六。

    阅读文章 >

    数据可视化释义 数据可视化就是把一些相对复杂、抽象的、我们看不懂的数据数据通过“可视化”的方式,运用图形化的手段清晰有效地将数据信息进行解读和传达,帮助我们发现其中的规律和特征,挖掘数据背后的价值。

    可视化大屏 可视化大屏 是以 大屏 为主要展示载体的数据 可视化设计 。它的应用场景非广泛如 ToC、ToB、ToG 等都会存在。一般应用在会议展厅、园区管理、城市交通调度中心、公安指挥中心、企业生产监控等重要场所。

    可视化用户群体相对比较明确,主要是单位领导及一些一线人员。通过交互式实时数据监测,洞悉运营增长,助力智能高效决策。

    伴随行业的发展,行业内也对可视化进行了一些行业细分。常见的一些类别:行业可视化(如交通、医疗、金融、军警部队、农业、工厂、化工等)、智能终端系统类(定制化终端产品)、演示 demo(数据演示、展览展示、数据看板 )、可视化分析系统(通过对数据的分析监控辅助决策,如交通预警平台、天气监控平台等)。

    市场现状 1. 平台化

    由于近几年可视化的需求越来越大,一般的公司都会有一些可视化的需求,各大厂商也逐渐整合可视化资源,实现平台化、低代码化。满足了大多数公司的可视化需求。国内比较知名的可视化厂商:光启元(Ray design)、Data V、优诺科技(森工厂)、袋鼠云(Easy V)、数字冰雹、图扑、等等。他们将一些可视化效果组件化集成在平台,拖拖拽拽就能实现一些不错的效果,满足了一些公司的展示需求。

    2. 实现方式

    目前可视化框架是大多数都是基于 Web 端的(基于 web 开发或者 web 封装)而非 PC 端。常见的可视化实现方式是二维加三维相结合,比如大屏两侧的可视化图表可以用 Echarts 这种第三方的轻量化图表控件或者 Vue 去实现。

    主视觉部分会基于 Unity3D、虚幻引擎(UE4)、Ventuz、threejs 等工具去实现。满足三维炫酷的效果需求。使整个可视化大屏效果有了质的提升。这些三维工具的优势是三维粒子效果能很好的支持,且效果非常炫酷。多平台支持,可通过 webgl 封装在浏览器里打开使用。缺点就是维护成本较高,需要相关的专业人员去开发维护,有一定的使用门槛。一般公司如果不是专门做可视化相关业务不会配备相关专业人员。

    说下几种工具的优缺点:

    Ventuz 国内用的相对较少,相关专业人员也较少。虚幻引擎效果上是比较好的,但是对 WebGL 参数支持的较少。Threejs 虽然支持三维但是没有 Unity 那么强大的编辑器,一些复杂的效果实现不了。相对于前者 Unity 相对成熟一些,也是目前市场上用的比较多的,不过 three 对于前端开发同学更友好一些,容易上手,学习成本相对低一些。

    可视化设计师应了解的知识 可视化设计是相对新兴的行业,就目前市场来看也是当今比较火的行业。作为一名设计师,不仅仅是只做完效果图就能行的,是一个结合 硬件设备、UI 设计、三维建模、三维渲染、动态设计、数据可视化、图形技术、GIS 数据、渲染引擎、交互技术等等综合类的交叉学科。

    1. 硬件设备

    硬件设备信息是做大屏一切的开始,我们首先要了解它的尺寸、比例、屏幕种类(拼接屏、LED 屏)投影方式 等等 一系列的信息,方便后续的设计工作。

    上图为一些常见的屏幕拼接方式,确认好屏幕的拼接方式就可以计算出整个大屏的物理分辨率。举个例子:上图中最后一个的拼接方式为横向3块屏,竖向2块屏幕。他们每块的屏幕分辨率为 宽1920px 高1080px,那么这块2×3的拼接屏幕的尺寸就应该是:宽度 1920乘以3(横向3块屏)高度1080乘以2(竖向2块屏)得出 整个屏幕的物理分辨率为:5760×2160。

    物理分辨率 VS 输出分辨率

    大屏的投射方式大致分为三种:1、电脑屏幕 1 比 1 等比例投屏。2、通过主机直接输出给拼接屏(这种大多都是一些自定义比例屏幕和分辨率超大的情况会应用到)。3、投影仪投射。

    一般大屏的物理屏幕分辨率大小都有不同,有的是极大的,几万像素,如果我们按照物理分辨率来去做设计的话会很卡,所以这里设计尺寸建议按照输出分辨率设计。输出分辨率会受到硬件的限制(超大情况下需等比缩放),我们一般会采用输出分辨率作为最终 的设计尺寸。针对硬件设备设计时要关注以下几点:屏幕拼接方式、单屏幕像素及拼接后像素、输出像素等这些决定了设计尺寸、内容排布、拼接缝的规避等问题。

    2. GIS 数据

    通常应用于参数化建模,主要是通过一些地理位置高程数据进行模型的生成。属于智慧城市可视化设计的基础设施。

    常见的一些格式:Openstreetmap(多用于生成模型)、Shapefile(多用于生成模型)、Geojson(主要用于基于 Web 的映射)、TIFF(多用于贴图处理)。

    一些常用的工具:Qgis、Arcgis、Google mapper。

    3. 三维建模

    在可视化设计中,一般我们会结合生成 参数化模型 加 定制化手工模型 的方式处理整体效果。这么处理的目的:一是设计上能突出主体,增加画面的层次感。二是在性能上能很好地优化,提高整体性能。

    下图为设计侧到开发侧对接流程:

    4. 动效设计

    常见的一些动效对接格式:GIF、MP4、APNG、Lottie、序列帧。感兴趣的小伙伴可看这篇:

    想让设计更酷炫?先学会 6 种常用的动效落地方案(附插件下载) 大家好,我是小六。

    阅读文章 >

    5. 图形技术

    了解图形成像原理,是由一个个的粒子点生成的画面。

    下图是由一个 50×100 的粒子组成的平面,每个粒子都会对应的 xy 轴的坐标位置,我们通过控制的粒子透明度、大小、颜色、位置、旋转等参数呈现不同的视觉效果。

    世界地图的是通过一个一个粒子成像形成的画面,其中黑色=0、白色=1。比如粒子大小是 1,它对应的位置是黑色,黑色是 0,1×0 就=0 显示为黑色。

    我们常做的粒子世界地图就是通过控制粒子黑白 x 粒子大小叠加出来的。

    比如我们做粒子地球的时候是通过一张贴图来去控制黑白度 海洋是黑色所以就不显示粒子,陆地为白色显示 为白色粒子,最终呈现了一个粒子地球的效果。

    6. 渲染引擎的技术架构

    前面实现方式里讲到市面上可视化落地基本都是基于于 Unity3D、虚幻引擎(UE4)、Ventuz、threejs 等工具实现的。它们的底层是由 BS(Browser-Server)架构和 CS(Client-Server)架构两大架构组成的。

    BS 架构与 CS 架构特点

    BS:(Browser-Server)浏览器/服务器模式,web 应用可以实现跨平台,客户端零维护,但是个性化能力低,响应速度较慢。WebGL 就属于 BS 架构的一种。优点就是使用便捷、数据实时更新、跨平台。缺点是渲染效果较差,大场景支持差。

    CS:(Client Server,客户端/服务器模式),桌面级应用响应速度快,安全性强,个性化能力强,响应数据较快。Unreal Engine、Unity3D、Ventuz 属于 CS 框架。优势就是整体渲染视觉效果棒,大场景支持好,缺点是必须安装客户端、电脑性能要求高、不同平台需要不同文件。

    可视化大屏 UI 可视化设计是一个综合类交叉学科,同样在大屏 UI 设计中也是一个相对复杂的流程,我们需要对大屏的布局、风格、主视觉、信息图表、字体、规范、动效等方面综合考虑,推导设计方案。

    设计前:一定要对用户需求充分分析和理解,要知道大屏的展示场景及设计分辨率,大屏的拼接方法都要有一定的了解,最后是跟开发沟通下实现的工具与方法。

    设计中:构思布局,可以在纸上简单画一下。根据业务需求定义设计关键词进行设计的提炼与分析,方便自己找参考。颜色上背景深色为主,为了更好地聚焦,数据可以采用亮色,有一定的对比关系,便于业务信息传达。字体上可以采用系统默认字体 数字采用特殊字体包的形式(这块根据实际需求,切记不要照搬)。图表选择恰当的展示形式,同时保证视觉上的统一(分清页面的主次关系,图表的展示切莫设计过度,容易造成抢主体)

    设计后:再次校验信息层级、文字大小、图表等各层级间的对比关系是否传达准确,与技术同步沟通下技术的实现性。最后开发完成后,要拿演示 demo 去现场测试,看下整体展示效果,测试输出是否有问题,有无拉伸问题,拼接缝与内容有无穿插,及时与开发进行页面的校验工作,最终才算是设计完成。

    下面针对可视化设计中 布局、风格、主视觉、信息图表、字体、规范、动效等 7 个方向细节点的拆解

    1. 布局

    通过硬件设备信息可以得到可视化的设计尺寸,基于尺寸新建设计画布后,第一件事就需考虑页面的整体布局。 可视化大屏设计 从信息布局到数据表达,都需要设计师对业务深入了解后才能用数据助力业务决策。

    常见的大屏布局:居中结构、左右结构两种种常见的布局形式以常规的 16:9 模板为例,下面列举的一些常见的布局形式,供大家参考。

    居中结构

    异形超宽拼接屏幕

    左右结构

    布局的原则一定要主次分明,根据业务需求抽取关键性的指标,提取主要信息。可以在纸上大概画一下,然后在软件里具体细化布局。避免次要信息的面积过大,喧宾夺主,影响整体的视觉效果。

    2. 风格

    提起可视化大屏,大家都会联想到:科技感、FUI、HUD 这些关键词,可以说可视化大屏跟科技、数据这两词是强关联的,风格上也基本是这一类方向。

    定义设计风格:一般会基于业务需求场景去定义几个设计关键词,根据关键词去找一些参考图,推导出贴合业务的设计风格。

    我们可以通过调整颜色、装饰细节、主视觉、字体等一些细节点控制区分不同的设计风。下面拿图表举例,我们在做设的时候,只需调整卡片和标题的装饰,就能够展现出不同的设计风格。

    3. 主视觉

    主视觉部分大致分为:地球、地图、智慧城市、行业类业务展示等。目前比较容易出效果的都会采用三维模型的处理方式。地球:粒子地球、地图贴图、地球模型。

    地图:第三方在线地图(百度、高德、腾讯、谷歌)基于 地图开放平台进行个性化配置。或者通过地理位置数据建模:如全国和各个省份的轮廓模型。

    智慧城市:GIS 参数化生成简模和重点楼宇定制化建模。

    行业类:多数为定制化建模。如工业类、医疗类、能源类、园区、学校、港口、工厂、仓储库房、零售、工程、安防、国防军工等。

    以上图片源于 DAT

    主视觉是可视化设计中的一大难点,不光是设计落地的时候也会有需要注意的点,这里建议大家在做之前一定要充分跟开发沟通,确认好技术选型,方便后期输出跟开发更加高效的对接。

    4. 信息图表

    图表的设计原则是易理解、可实现,能够准确表达数据意图,给用户传达明确信息。

    以上图片源于网络,如侵删

    上图通过通过使用场景可分为比较、联系、构成、分布四个维度解释图表的不同属性类别。在做可视化大屏设计的时候可以参照上图,选择对应的数据图表。

    比较

    两个及以上变量数据,一是基于分类不同的对比,二是基于时间维度的对比。常见的图表:条形图、柱状图、雷达图、玫瑰图、桑基图等

    联系

    两个及以上数据之间的相关性,随时间变化比较关联。常见的图表:散点图、气泡图、多级饼图、热力图、力导向图等。

    构成

    指标里的数据都由哪几部分组成、每部分占比如何。常见的图表:饼图、环形图、堆积面积图、堆积柱状图、瀑布图等。

    分布

    指标里的数据主要集中在什么范围、表现出怎样的规律,想表达两个数据点之间数量的演变过程。常见的图表:阶梯折线图、面积图、直方图等。

    基于图表的类型可分为:饼图、线形图、柱状图、混合图、面积图、散点图、极坐标图、关系图、树图、桑基图、漏斗图、热力图、还有其他图表类型等。

    饼图

    适合展示分类的占比情况,不适合展示分类过多(超过 9 条数据)或者差别不明显的场景。

    线形图

    折线图用于显示数据在一个连续的时间间隔或者时间跨度上的变化,它的特点是反映事物随时间或有序类别而变化的趋势。

    当水平轴的数据类型为无序的分类或者垂直轴的数据类型为连续时间时,不适合使用折线图。同样,当折线的条数过多时不建议将多条线绘制在一张图上。

    柱状图

    柱状图提供了分类数据的可视化展示,基于不同的数据类型有以上几种不同的形式。分类数据是将数据分组成离散的组,例如月份、年龄组、鞋码和动物。这些类别通常是定性的。图表上的条形图可以按任何顺序排列。

    混合图

    折线图和堆叠柱状图的组合图表。同时显示两个坐标轴,用于展示两种不同类型的数据。 适用于带有细分分类的累计数据大小以及与之相关的趋势数据,例如在过去十年全国三大产业的具体产值,以及 GDP 增长率。

    面积图

    面积图强调数量随时间而变化的程度,也可用于引起人们对总值趋势的注意。适合于比较多个变量随时间间隔变化趋势。

    散点图

    散点图是一种使用直角坐标来显示一组数据的两个变量值的图表。数据显示为一个点的集合,每个点都有一个变量的值决定水平轴上的位置,另一个变量的值决定垂直轴上的位置。

    通常用于显示和比较数值,不光可以显示趋势,还能显示数据集群的形状,以及在数据云团中各数据点的关系。

    极坐标图

    基于直角坐标系的径向变形(相当于把直角坐标卷起来)。适用于显示三个或更多的维度的变量对比或者部分与整体的趋势。

    关系图

    可以展示数据的占比情况,还能厘清多级数据之间的关系。 通常用于可视化大量元素之间的复杂关系

    树图

    树图是一种流行的利用包含关系表达层次化数据的可视化方法,是研究多元目标问题的一般工具。 适合展示数据之间的层级关系,适合 6 条以上数据。

    桑基图

    一种特定类型的流程图,用于描述一组值到另一组值的流向,图中延伸的分支的宽度对应数据流量的大小。用以展示数据的层级关系。常用于可视化能源或成本转移,也帮助我们确定各部分流量在总体中的大概占比情况。

    漏斗图

    一种直观表现业务流程中转化情况的分析工具,总是开始于一个 100%的数量,结束于一个较小的数量。通过漏斗各环节业务数据的比较能够直观地发现和说明问题所在的环节,进而做出决策。 适用于业务流程比较规范、周期长、环节多的流程分析,比如流程流量分析、转化率分析。

    热力图

    将数值大小通过色块有序且紧凑地在坐标系中呈现。 适合呈现多组数据连续的数值分布,适合做数据的预测统计,可以在图片上直接展示热度。例如展示城市在不同时间段打车热度情况。

    其他图表

    词云图适用于对比大量文本或绘制特定形状的词云。水球图适用于多个百分百数据呈现。子弹图用于表达多项同类数据的对比,可以表达一项数据与不同目标的校对结果。 维诺图适用于层级数据比较大小,同时能看到各层级之间的情况。金字塔图适合展示分类的占比情况,不适合展示分类过多或者差别不明显的场景。

    5. 字体

    文字是可视化展示中最重要的构成要素之一,可视化大屏设计中字体的运用其实原理跟网页 app 的 逻辑基本一致。在字体选择上会基于业务需求选择对应的字体,一会会与设计风格相结合。这里要注意的是字体有无衬线、字重、字距等。

    大屏设计中,中文字体一般会采用浏览器默认字体(微软雅黑、思源黑体、苹方等)页面中标题会采用特殊字体处理,常用的字体有:优设标题黑、旁门正道标题体、时尚中黑简体、方正正中黑体等。英文数字字体推荐:Din、Ds-Digtal、Bebas、Acens、DS-DIGIB、Roboto 等。

    6. 规范

    建立规范的主要目的是:保证设计的一致性、提高开发效率和还原度、方便迭代 ,辅助设计和开发更好地完成设计的协作。可视化设计中规范一般会分为:色彩、文字、图表、标题控件等,跟网页端规范同理,这里就不一一赘述了。

    7. 动效

    大数据可视化大屏设计少不了动效,动效是可视化重要的组成部分,动效能增加观感体验,凸显关键产品内容、强调功能信息关联,帮助用户理解产品、情感化互动。但过分的动效极其容易喧宾夺主,影响用户阅读,反而弱化了数据的展示。

    动效的设计原则

    动效应优先满足核心内容、故事线。常见的大屏动效 – 展示类,用于突出产品核心功能和特点。界面信息按照一定的规律呈现,引导用户的视觉流向。

    好的大屏设计应该是数据展示模块最好动效不易过多,要有一定的主次关系变化,例如一个动画表现的视觉强,另一个就表现稍弱化,有强有弱、有主有次节奏才会舒服,同时动效要结合数据变化,考虑极端情况的展示效果,最终输出一套完整的动效方案。

    最后 以上是我对可视化参差不齐的一些认知,主要是给大家普及可视化设计的一些流程以及相关的专业知识,希望能够帮助你快速进入大屏设计及避免一些坑。由于篇幅原因字体、规范、动效没有详细拆解说明,后面会陆续更新相关文章,感谢大家支持。可视化体验远远不止这些。欢迎大家提出更多意见和建议,我们一起前行。

  • 可视化大屏设计快速入门指南,看这篇就够了!

    UI交互 2022-05-30
    前言 随着大数据产业的蓬勃发展,很多企业都开始应用数据可视化。智慧城市、智慧交通、智慧医疗等等越来越多的行业都有了可视化的需求,可视化行业也...

    前言 随着大数据产业的蓬勃发展,很多企业都开始应用数据可视化。智慧城市、智慧交通、智慧医疗等等越来越多的行业都有了可视化的需求,可视化行业也迎来了迅速发展的成长期。

    往期回顾:

    想快速搞定可视化设计?这20个精选神器收好了! 大家好,我是小六。

    阅读文章 >

    可视化设计神器第二弹!15个精选神器都在这! 大家好,我是小六。

    阅读文章 >

    数据可视化释义 数据可视化就是把一些相对复杂、抽象的、我们看不懂的数据数据通过“可视化”的方式,运用图形化的手段清晰有效地将数据信息进行解读和传达,帮助我们发现其中的规律和特征,挖掘数据背后的价值。

    可视化大屏 可视化大屏 是以 大屏 为主要展示载体的数据 可视化设计 。它的应用场景非广泛如 ToC、ToB、ToG 等都会存在。一般应用在会议展厅、园区管理、城市交通调度中心、公安指挥中心、企业生产监控等重要场所。

    可视化用户群体相对比较明确,主要是单位领导及一些一线人员。通过交互式实时数据监测,洞悉运营增长,助力智能高效决策。

    伴随行业的发展,行业内也对可视化进行了一些行业细分。常见的一些类别:行业可视化(如交通、医疗、金融、军警部队、农业、工厂、化工等)、智能终端系统类(定制化终端产品)、演示 demo(数据演示、展览展示、数据看板 )、可视化分析系统(通过对数据的分析监控辅助决策,如交通预警平台、天气监控平台等)。

    市场现状 1. 平台化

    由于近几年可视化的需求越来越大,一般的公司都会有一些可视化的需求,各大厂商也逐渐整合可视化资源,实现平台化、低代码化。满足了大多数公司的可视化需求。国内比较知名的可视化厂商:光启元(Ray design)、Data V、优诺科技(森工厂)、袋鼠云(Easy V)、数字冰雹、图扑、等等。他们将一些可视化效果组件化集成在平台,拖拖拽拽就能实现一些不错的效果,满足了一些公司的展示需求。

    2. 实现方式

    目前可视化框架是大多数都是基于 Web 端的(基于 web 开发或者 web 封装)而非 PC 端。常见的可视化实现方式是二维加三维相结合,比如大屏两侧的可视化图表可以用 Echarts 这种第三方的轻量化图表控件或者 Vue 去实现。

    主视觉部分会基于 Unity3D、虚幻引擎(UE4)、Ventuz、threejs 等工具去实现。满足三维炫酷的效果需求。使整个可视化大屏效果有了质的提升。这些三维工具的优势是三维粒子效果能很好的支持,且效果非常炫酷。多平台支持,可通过 webgl 封装在浏览器里打开使用。缺点就是维护成本较高,需要相关的专业人员去开发维护,有一定的使用门槛。一般公司如果不是专门做可视化相关业务不会配备相关专业人员。

    说下几种工具的优缺点:

    Ventuz 国内用的相对较少,相关专业人员也较少。虚幻引擎效果上是比较好的,但是对 WebGL 参数支持的较少。Threejs 虽然支持三维但是没有 Unity 那么强大的编辑器,一些复杂的效果实现不了。相对于前者 Unity 相对成熟一些,也是目前市场上用的比较多的,不过 three 对于前端开发同学更友好一些,容易上手,学习成本相对低一些。

    可视化设计师应了解的知识 可视化设计是相对新兴的行业,就目前市场来看也是当今比较火的行业。作为一名设计师,不仅仅是只做完效果图就能行的,是一个结合 硬件设备、UI 设计、三维建模、三维渲染、动态设计、数据可视化、图形技术、GIS 数据、渲染引擎、交互技术等等综合类的交叉学科。

    1. 硬件设备

    硬件设备信息是做大屏一切的开始,我们首先要了解它的尺寸、比例、屏幕种类(拼接屏、LED 屏)投影方式 等等 一系列的信息,方便后续的设计工作。

    上图为一些常见的屏幕拼接方式,确认好屏幕的拼接方式就可以计算出整个大屏的物理分辨率。举个例子:上图中最后一个的拼接方式为横向3块屏,竖向2块屏幕。他们每块的屏幕分辨率为 宽1920px 高1080px,那么这块2×3的拼接屏幕的尺寸就应该是:宽度 1920乘以3(横向3块屏)高度1080乘以2(竖向2块屏)得出 整个屏幕的物理分辨率为:5760×2160。

    物理分辨率 VS 输出分辨率

    大屏的投射方式大致分为三种:1、电脑屏幕 1 比 1 等比例投屏。2、通过主机直接输出给拼接屏(这种大多都是一些自定义比例屏幕和分辨率超大的情况会应用到)。3、投影仪投射。

    一般大屏的物理屏幕分辨率大小都有不同,有的是极大的,几万像素,如果我们按照物理分辨率来去做设计的话会很卡,所以这里设计尺寸建议按照输出分辨率设计。输出分辨率会受到硬件的限制(超大情况下需等比缩放),我们一般会采用输出分辨率作为最终 的设计尺寸。针对硬件设备设计时要关注以下几点:屏幕拼接方式、单屏幕像素及拼接后像素、输出像素等这些决定了设计尺寸、内容排布、拼接缝的规避等问题。

    2. GIS 数据

    通常应用于参数化建模,主要是通过一些地理位置高程数据进行模型的生成。属于智慧城市可视化设计的基础设施。

    常见的一些格式:Openstreetmap(多用于生成模型)、Shapefile(多用于生成模型)、Geojson(主要用于基于 Web 的映射)、TIFF(多用于贴图处理)。

    一些常用的工具:Qgis、Arcgis、Google mapper。

    3. 三维建模

    在可视化设计中,一般我们会结合生成 参数化模型 加 定制化手工模型 的方式处理整体效果。这么处理的目的:一是设计上能突出主体,增加画面的层次感。二是在性能上能很好地优化,提高整体性能。

    下图为设计侧到开发侧对接流程:

    4. 动效设计

    常见的一些动效对接格式:GIF、MP4、APNG、Lottie、序列帧。感兴趣的小伙伴可看这篇:

    想让设计更酷炫?先学会 6 种常用的动效落地方案(附插件下载) 大家好,我是小六。

    阅读文章 >

    5. 图形技术

    了解图形成像原理,是由一个个的粒子点生成的画面。

    下图是由一个 50×100 的粒子组成的平面,每个粒子都会对应的 xy 轴的坐标位置,我们通过控制的粒子透明度、大小、颜色、位置、旋转等参数呈现不同的视觉效果。

    世界地图的是通过一个一个粒子成像形成的画面,其中黑色=0、白色=1。比如粒子大小是 1,它对应的位置是黑色,黑色是 0,1×0 就=0 显示为黑色。

    我们常做的粒子世界地图就是通过控制粒子黑白 x 粒子大小叠加出来的。

    比如我们做粒子地球的时候是通过一张贴图来去控制黑白度 海洋是黑色所以就不显示粒子,陆地为白色显示 为白色粒子,最终呈现了一个粒子地球的效果。

    6. 渲染引擎的技术架构

    前面实现方式里讲到市面上可视化落地基本都是基于于 Unity3D、虚幻引擎(UE4)、Ventuz、threejs 等工具实现的。它们的底层是由 BS(Browser-Server)架构和 CS(Client-Server)架构两大架构组成的。

    BS 架构与 CS 架构特点

    BS:(Browser-Server)浏览器/服务器模式,web 应用可以实现跨平台,客户端零维护,但是个性化能力低,响应速度较慢。WebGL 就属于 BS 架构的一种。优点就是使用便捷、数据实时更新、跨平台。缺点是渲染效果较差,大场景支持差。

    CS:(Client Server,客户端/服务器模式),桌面级应用响应速度快,安全性强,个性化能力强,响应数据较快。Unreal Engine、Unity3D、Ventuz 属于 CS 框架。优势就是整体渲染视觉效果棒,大场景支持好,缺点是必须安装客户端、电脑性能要求高、不同平台需要不同文件。

    可视化大屏 UI 可视化设计是一个综合类交叉学科,同样在大屏 UI 设计中也是一个相对复杂的流程,我们需要对大屏的布局、风格、主视觉、信息图表、字体、规范、动效等方面综合考虑,推导设计方案。

    设计前:一定要对用户需求充分分析和理解,要知道大屏的展示场景及设计分辨率,大屏的拼接方法都要有一定的了解,最后是跟开发沟通下实现的工具与方法。

    设计中:构思布局,可以在纸上简单画一下。根据业务需求定义设计关键词进行设计的提炼与分析,方便自己找参考。颜色上背景深色为主,为了更好地聚焦,数据可以采用亮色,有一定的对比关系,便于业务信息传达。字体上可以采用系统默认字体 数字采用特殊字体包的形式(这块根据实际需求,切记不要照搬)。图表选择恰当的展示形式,同时保证视觉上的统一(分清页面的主次关系,图表的展示切莫设计过度,容易造成抢主体)

    设计后:再次校验信息层级、文字大小、图表等各层级间的对比关系是否传达准确,与技术同步沟通下技术的实现性。最后开发完成后,要拿演示 demo 去现场测试,看下整体展示效果,测试输出是否有问题,有无拉伸问题,拼接缝与内容有无穿插,及时与开发进行页面的校验工作,最终才算是设计完成。

    下面针对可视化设计中 布局、风格、主视觉、信息图表、字体、规范、动效等 7 个方向细节点的拆解

    1. 布局

    通过硬件设备信息可以得到可视化的设计尺寸,基于尺寸新建设计画布后,第一件事就需考虑页面的整体布局。 可视化大屏设计 从信息布局到数据表达,都需要设计师对业务深入了解后才能用数据助力业务决策。

    常见的大屏布局:居中结构、左右结构两种种常见的布局形式以常规的 16:9 模板为例,下面列举的一些常见的布局形式,供大家参考。

    居中结构

    异形超宽拼接屏幕

    左右结构

    布局的原则一定要主次分明,根据业务需求抽取关键性的指标,提取主要信息。可以在纸上大概画一下,然后在软件里具体细化布局。避免次要信息的面积过大,喧宾夺主,影响整体的视觉效果。

    2. 风格

    提起可视化大屏,大家都会联想到:科技感、FUI、HUD 这些关键词,可以说可视化大屏跟科技、数据这两词是强关联的,风格上也基本是这一类方向。

    定义设计风格:一般会基于业务需求场景去定义几个设计关键词,根据关键词去找一些参考图,推导出贴合业务的设计风格。

    我们可以通过调整颜色、装饰细节、主视觉、字体等一些细节点控制区分不同的设计风。下面拿图表举例,我们在做设的时候,只需调整卡片和标题的装饰,就能够展现出不同的设计风格。

    3. 主视觉

    主视觉部分大致分为:地球、地图、智慧城市、行业类业务展示等。目前比较容易出效果的都会采用三维模型的处理方式。地球:粒子地球、地图贴图、地球模型。

    地图:第三方在线地图(百度、高德、腾讯、谷歌)基于 地图开放平台进行个性化配置。或者通过地理位置数据建模:如全国和各个省份的轮廓模型。

    智慧城市:GIS 参数化生成简模和重点楼宇定制化建模。

    行业类:多数为定制化建模。如工业类、医疗类、能源类、园区、学校、港口、工厂、仓储库房、零售、工程、安防、国防军工等。

    以上图片源于 DAT

    主视觉是可视化设计中的一大难点,不光是设计落地的时候也会有需要注意的点,这里建议大家在做之前一定要充分跟开发沟通,确认好技术选型,方便后期输出跟开发更加高效的对接。

    4. 信息图表

    图表的设计原则是易理解、可实现,能够准确表达数据意图,给用户传达明确信息。

    以上图片源于网络,如侵删

    上图通过通过使用场景可分为比较、联系、构成、分布四个维度解释图表的不同属性类别。在做可视化大屏设计的时候可以参照上图,选择对应的数据图表。

    比较

    两个及以上变量数据,一是基于分类不同的对比,二是基于时间维度的对比。常见的图表:条形图、柱状图、雷达图、玫瑰图、桑基图等

    联系

    两个及以上数据之间的相关性,随时间变化比较关联。常见的图表:散点图、气泡图、多级饼图、热力图、力导向图等。

    构成

    指标里的数据都由哪几部分组成、每部分占比如何。常见的图表:饼图、环形图、堆积面积图、堆积柱状图、瀑布图等。

    分布

    指标里的数据主要集中在什么范围、表现出怎样的规律,想表达两个数据点之间数量的演变过程。常见的图表:阶梯折线图、面积图、直方图等。

    基于图表的类型可分为:饼图、线形图、柱状图、混合图、面积图、散点图、极坐标图、关系图、树图、桑基图、漏斗图、热力图、还有其他图表类型等。

    饼图

    适合展示分类的占比情况,不适合展示分类过多(超过 9 条数据)或者差别不明显的场景。

    线形图

    折线图用于显示数据在一个连续的时间间隔或者时间跨度上的变化,它的特点是反映事物随时间或有序类别而变化的趋势。

    当水平轴的数据类型为无序的分类或者垂直轴的数据类型为连续时间时,不适合使用折线图。同样,当折线的条数过多时不建议将多条线绘制在一张图上。

    柱状图

    柱状图提供了分类数据的可视化展示,基于不同的数据类型有以上几种不同的形式。分类数据是将数据分组成离散的组,例如月份、年龄组、鞋码和动物。这些类别通常是定性的。图表上的条形图可以按任何顺序排列。

    混合图

    折线图和堆叠柱状图的组合图表。同时显示两个坐标轴,用于展示两种不同类型的数据。 适用于带有细分分类的累计数据大小以及与之相关的趋势数据,例如在过去十年全国三大产业的具体产值,以及 GDP 增长率。

    面积图

    面积图强调数量随时间而变化的程度,也可用于引起人们对总值趋势的注意。适合于比较多个变量随时间间隔变化趋势。

    散点图

    散点图是一种使用直角坐标来显示一组数据的两个变量值的图表。数据显示为一个点的集合,每个点都有一个变量的值决定水平轴上的位置,另一个变量的值决定垂直轴上的位置。

    通常用于显示和比较数值,不光可以显示趋势,还能显示数据集群的形状,以及在数据云团中各数据点的关系。

    极坐标图

    基于直角坐标系的径向变形(相当于把直角坐标卷起来)。适用于显示三个或更多的维度的变量对比或者部分与整体的趋势。

    关系图

    可以展示数据的占比情况,还能厘清多级数据之间的关系。 通常用于可视化大量元素之间的复杂关系

    树图

    树图是一种流行的利用包含关系表达层次化数据的可视化方法,是研究多元目标问题的一般工具。 适合展示数据之间的层级关系,适合 6 条以上数据。

    桑基图

    一种特定类型的流程图,用于描述一组值到另一组值的流向,图中延伸的分支的宽度对应数据流量的大小。用以展示数据的层级关系。常用于可视化能源或成本转移,也帮助我们确定各部分流量在总体中的大概占比情况。

    漏斗图

    一种直观表现业务流程中转化情况的分析工具,总是开始于一个 100%的数量,结束于一个较小的数量。通过漏斗各环节业务数据的比较能够直观地发现和说明问题所在的环节,进而做出决策。 适用于业务流程比较规范、周期长、环节多的流程分析,比如流程流量分析、转化率分析。

    热力图

    将数值大小通过色块有序且紧凑地在坐标系中呈现。 适合呈现多组数据连续的数值分布,适合做数据的预测统计,可以在图片上直接展示热度。例如展示城市在不同时间段打车热度情况。

    其他图表

    词云图适用于对比大量文本或绘制特定形状的词云。水球图适用于多个百分百数据呈现。子弹图用于表达多项同类数据的对比,可以表达一项数据与不同目标的校对结果。 维诺图适用于层级数据比较大小,同时能看到各层级之间的情况。金字塔图适合展示分类的占比情况,不适合展示分类过多或者差别不明显的场景。

    5. 字体

    文字是可视化展示中最重要的构成要素之一,可视化大屏设计中字体的运用其实原理跟网页 app 的 逻辑基本一致。在字体选择上会基于业务需求选择对应的字体,一会会与设计风格相结合。这里要注意的是字体有无衬线、字重、字距等。

    大屏设计中,中文字体一般会采用浏览器默认字体(微软雅黑、思源黑体、苹方等)页面中标题会采用特殊字体处理,常用的字体有:优设标题黑、旁门正道标题体、时尚中黑简体、方正正中黑体等。英文数字字体推荐:Din、Ds-Digtal、Bebas、Acens、DS-DIGIB、Roboto 等。

    6. 规范

    建立规范的主要目的是:保证设计的一致性、提高开发效率和还原度、方便迭代 ,辅助设计和开发更好地完成设计的协作。可视化设计中规范一般会分为:色彩、文字、图表、标题控件等,跟网页端规范同理,这里就不一一赘述了。

    7. 动效

    大数据可视化大屏设计少不了动效,动效是可视化重要的组成部分,动效能增加观感体验,凸显关键产品内容、强调功能信息关联,帮助用户理解产品、情感化互动。但过分的动效极其容易喧宾夺主,影响用户阅读,反而弱化了数据的展示。

    动效的设计原则

    动效应优先满足核心内容、故事线。常见的大屏动效 – 展示类,用于突出产品核心功能和特点。界面信息按照一定的规律呈现,引导用户的视觉流向。

    好的大屏设计应该是数据展示模块最好动效不易过多,要有一定的主次关系变化,例如一个动画表现的视觉强,另一个就表现稍弱化,有强有弱、有主有次节奏才会舒服,同时动效要结合数据变化,考虑极端情况的展示效果,最终输出一套完整的动效方案。

    最后 以上是我对可视化参差不齐的一些认知,主要是给大家普及可视化设计的一些流程以及相关的专业知识,希望能够帮助你快速进入大屏设计及避免一些坑。由于篇幅原因字体、规范、动效没有详细拆解说明,后面会陆续更新相关文章,感谢大家支持。可视化体验远远不止这些。欢迎大家提出更多意见和建议,我们一起前行。

  • 薇娅消失半年后:淘宝直播正在加速“去头部化”?

    设计动态 2022-05-29
    编辑导语:薇娅消失在公众视线已经半年,超级主播时代逐渐走向落幕。回望“一姐”消失的这半年,直播电商格局出现了哪些新变化?本文就此问题做了分析,一起来看看吧。 下个月,618电商的大考即将来临,而谁还记得去年薇娅和李佳琦两大主播的世纪对决? 时至今日,薇娅在公众

    编辑导语:薇娅消失在公众视线已经半年,超级主播时代逐渐走向落幕。回望“一姐”消失的这半年,直播电商格局出现了哪些新变化?本文就此问题做了分析,一起来看看吧。

    下个月,618电商的大考即将来临,而谁还记得去年薇娅和 李佳琦 两大主播的世纪对决?

    时至今日, 薇娅在公众视线中整整消失了半年 ,而那个“两大主播带货200亿、超过4000家上市公司全年营收之和”的 超级主播时代也逐渐走向落幕。

    而已经居家直播两个多月的 李佳琦,也因上海疫情遭遇了一定影响。 期间他共计开播了50多场,时长从此前的6个小时左右降低至三四个小时,场均产品数量也由100件左右下降到60-80件左右,GMV也略有下滑。 约一周之前,上海加快了复工复产的步伐 ,物流恢复正常,直播间的大部分品牌已经面向上海地区用户开放购买, 当晚李佳琦直播间观看人次从2000万左右上涨至5501万。

    回望“一姐”消失的这半年,直播电商格局出现了哪些新变化?

    一、谦寻的“小号”,半月带货近亿 薇娅助播首次开播,能够在抖音再造一个薇娅吗?

    这是一个令人好奇的问题,同时也是“蜜蜂惊喜社”之后,谦寻打出的一张新牌。

    如果说 前者试图在失去薇娅后、稳固在淘宝的基本盘,后者则尝试在抖音能否开垦出一条新路。 值得注意的是,阿里系与谦寻的资本绑定削弱。4月底,谦寻(杭州)控股有限责任公司发生工商变更,阿里系的云锋基金等退出股东行列。

    今年2月,“蜜蜂惊喜社”开播,6个主播中有5人曾为薇娅助播,选品和直播模式均延续薇娅风格,5天跻身淘宝直播TOP3榜单。外界视为薇娅复出投石问路的信号,但谦寻方面有意撇清关系,表示是“团队创业”。

    截至发稿前,“蜜蜂惊喜社” 淘宝粉丝量达到376.6万,单场直播观看量目前在700-800万左右,在大促或营销节点,单场直播观看量超过1250万。

    另一助播、常年在薇娅身边的琦儿,与薇娅捆绑更为紧密 ,有消息称为薇娅弟媳。在薇娅出事后,其抖音账号沉寂了一段时间。4月13日,琦儿首次恢复更新短视频,并于5月7日首次直播C位出道。近一个月琦儿一共进行了7场直播,视频作品97个,目前粉丝人数177.7万。

    据新抖数据, 琦儿7天内的头3场直播带货,预估销售额依次为2717.42万元、985.17万元和746.51万元,累计带货4449.1万元 ,总观看人次达1649.02万人次, 半月带货8808.68万。

    这个成绩远远超出百万粉丝量级主播和不少明星,除了私域流量打法下,“薇娅的女人们”情感粘性深厚,谦寻仍然具有强大的供应链优势等因素,或许也离不开机构砸钱投放流量的扶持力度。

    “琦儿Leo”所属MCN为杭州初行传媒有限公司,其法定代表人为徐俊,后者曾任杭州谦玺电子商务有限公司(现已注销)执行董事兼总经理,谦寻(杭州)文化传媒有限公司持有该公司70%股权。琦儿带货品牌如“一叶子”等也颇具谦寻色彩。

    扶持助播承接流量,是超级主播陨落后,机构不约而同的选择。今日雪梨因成被执行人、股权冻结登上热搜,原助播团队中的5人重开小号“光光来了”(现更名为“香菇来了”)也受到关注。截至发稿,“香菇来了”淘宝粉丝量达207万。

    在这些新直播间,商家乐见坑位费的消失、因话语权不足只能采取纯佣金模式。

    但是, 任何一个助播团队,都难以达到头部主播原有的商业价值高度。 这些助播们的直播间用户由原有粉丝转化而来,具有强烈的个人IP烙印,外界褒贬不一,且“弃淘入抖”,原有话术和运营方法未必适宜,需要经过长时间的磨合。

    近日琦儿便因螺蛳粉测评收到了“小7婶”的律师函,接下来还将面临资源投入力度弱化后,突破原有粉丝基础,出圈涨粉的考验。

    外部环境和入场时机亦发生了变化 ,近7000万粉丝量级的刘畊宏热到发烫,反哺平台,虽目前尚未进军直播带货赛道,而是更为谨慎地选择了品牌植入等合作方式,但无法预测未来是否会对主播们带来威胁。品牌虚拟主播等虚拟人崛起,抢占阵地。

    昔日四大主播的诞生,是平台、用户需求、疫情等共同推动的结果,彼时,整个电商大盘仍然处于高速增长阶段,税务风暴后,主播格局重新洗牌,行业进入冷静期,下一个超级头部主播或许已经很难诞生。

    二、平台加速“去头部化”,超级主播淡化个人色彩 经历前两年的狂热后, 整个直播电商领域正在降温 。互联网增长红利见顶;商家自播崛起;受经济大环境影响,品牌和消费者趋于理性;直播电商进入深水区,据统计,两会期间,有近20位代表建议规范直播带货。同时,互联网平台监管趋严将成为长期趋势。

    抖音悄然降低了直播的权重,“一级入口”的多次变化背后潜藏着业务重心的改变。

    2021年11月开始,抖音灰度测试新版本中,已经将直播在抖音客户端首页的入口取消,取代“直播”的则是“扫一扫”。有消息显示,抖音正在内测新版本,“商城”出现在首页,意味着其未来商业变现重点押注在电商。

    将目光投向淘宝,在薇娅“消失”之后,并没有出现能够填补巨大流量空白的主播。李佳琦曾迎来短暂的流量暴涨,随即回落到均值水平,这与超级主播各自不同的人设、带货特点有关,其粉丝群体很难互相转化。且受时间精力、形象、擅长领域等限制,单个主播能够带货的品类是有限的,无法无限拓展。

    欧莱雅事件暴露出头部主播与品牌之间的议价权矛盾,加之带货品类逐步细分, 中腰部主播崛起,或将成为未来主流趋势。 对于平台而言,“去头部化”是降低单一依赖风险、推动生态良性化的必然选择,对于MCN而言,打造腰部主播矩阵有利于延续生命周期,寻找增量市场。

    据易观千帆数据显示,淘宝及点淘4月的月活数都出现了下滑。其中,淘宝4月月活为7.81亿,较上月环比下滑1.51%;点淘4月月活为1833万,环比降幅达10.78%,意味着淘系平台需要激活新的增长点。

    在失去薇娅、雪梨等头部主播之后, 淘宝加速站外挖人,向不同量级的主播倾斜流量、现金激励。 优质主播仍然是直播电商行业中的稀缺资源,被各大平台争相抢夺。

    今年1月,淘宝直播总经理道放在淘宝直播MCN机构大会上表示,“在淘宝直播新生态主播战略下,有实力的新人主播会被很快看到,并且得到流量、货品的支持,在短时间内达到弯道超车。”

    从4月开始,淘宝开启了一项名为“超级新咖”的站外KOL引入计划,用“真金白银的激励+流量补充加码”,陆续引入外站博主,对其进行流量、营销资源、选品、宣发等多方位的扶持,据透露,单机构预估最高获奖金额190万,获奖机构的比例40%。

    所谓新咖,指的是“从未在淘宝直播过”的主播。随后,抖音博主一栗小莎子、快手喜剧带货博主小沈龙,以及微信自媒体大V年糕妈妈等人,相继进入淘宝直播间,同时取得了较为可观的成绩。

    一栗小莎子414首播,场观达到255w。4.29聚划算百亿补贴专场,单场涨粉40余万。目前小莎子在淘宝直播上的粉丝已经达到52w,直播总场观1000W+,单场单品牌带货超过56w。这些新主播们将代表着淘宝直播对新生态布局的探索。

    相应地, 仍“身在江湖”的超级主播们也有意识地淡化了个人色彩,将自身转化为一个品牌、一个平台,布局多元渠道,沉淀私域流量,降低风险。

    辛巴更多关注于供应链;今年美One开始运营微信小程序“所有女生会员服务中心”,积分兑换礼品,上线了一款微信小程序“鲸选会”,跳转京东页面。 上文已经提到,对应着李佳琦直播时长缩短,“李佳琦时尚助播团”存在感增强,另外同样运营着大量社群。 罗永浩近几个月GMV占比缩小至5%,交个朋友布局多矩阵外,也创建了“交个朋友会员中心”小程序,以1:1的比例兑换积分。 同任何一个新生赛道一样,变化或许是直播电商领域唯一的常态。平台、机构、主播分别选择了以不同的方式拥抱这种变化,而不同的未来,也将逐渐在他们的面前铺开。

     

    作者:Mia;微信公众号:娱乐独角兽(ID:yuledujiaoshou)

    原文链接:https://mp.weixin.qq.com/s/ifzfhh0fbFe_YXkK63pX_g

    本文由@娱乐独角兽 授权发布于人人都是产品经理,未经许可,禁止转载。

    题图来自Unsplash,基于CC0协议

  • 无人接盘618

    设计动态 2022-05-29
    编辑导语:这个618被不少人称作“史上最冷618”,毕竟,消费者的购物选择更趋多样化,且当这类大促活动已经绵延开展多年后,消费者可能也会产生一定的“免疫”心理。那么,面对这样的消费环境,电商平台后续应该做出何种举措?本文作者对今年的618局势做了解读,一起来看

    编辑导语:这个618被不少人称作“史上最冷618”,毕竟,消费者的购物选择更趋多样化,且当这类大促活动已经绵延开展多年后,消费者可能也会产生一定的“免疫”心理。那么,面对这样的消费环境,电商平台后续应该做出何种举措?本文作者对今年的618局势做了解读,一起来看。

    520活动刚结束,618便无缝衔接启动年中大促。

    5月23日,京东、拼多多、唯品会等平台率先拉开帷幕。26日,天猫预售接踵而至,分为预售期、开门红、品类日、狂欢日四个阶段。各平台大促战线越拉越长,京东6月21日续售期结束,整体跨度将近一个月。

    上半年,在线下实体受挫的情况下,“抗疫”一度成为各电商平台的主要社会活动之一。然而,工厂停工、物流受阻等现实问题对电商的成交影响也是明显的。

    此次年中大促与以往不同之处在于,还要承载着提振社会消费、帮助平台和商家回血等更多的压力。

    “往年这个时候忙得不行,今年因为疫情很多工作不能进行,倒没有那么忙了。”一位天猫&京东商家对比往年618的筹备工作这样表示。

    同样不忙的还有消费者。“虽然各平台、主播的预热预售活动很火热,但你看身边真正加了购物车的又有几个人?”

    电商平台早早地开始预热促销,并发布了一系列对商家的扶持政策,可见平台对这次618的期望,但对应到商家和消费者这边,现实情况似乎有很大落差。

    一、商家降低期待值 去年以来,不少企业纷纷将“控制成本”提上了日程,告别大手笔的烧钱,停止无厘头的扩张,只求好好活着。

    历来,年度大促都是商家冲销量创收、以及品牌营销的关键节点。于欣是某国货美妆品牌的员工,当他被问到“前几个月连续疫情销量受挫,今年618是否准备大干一场冲冲销量”时,他表示难以理解,为什么会有“大干一场”这样的想法?

    “现在最重要的是要活下去。”于欣感叹道,对比前几年大肆砸钱做营销的国货美妆们,今年很多品牌的追求朴实得多。

    受疫情影响,商家端的产品生产与物流运输受阻,正常经营受影响;消费者端,不少人群面临居家或失业,人们的消费热情已大不如前。

    “今年年初,公司就开启了一轮裁员,将抖音投放全线裁撤。”于欣反应,原本他们是天猫、抖音双平台运营,如今为控制成本,抖音不得不暂时收缩。

    于欣表示,他们4月份就已经惨不忍睹,仅上了一场佳琦直播间,而缩减投放最直接的原因就是缺钱。

    “如果能和去年持平就偷着乐吧。”所以对于今年618的到来,他似乎也不敢抱有太大的期待。在宏观预期上,商家的信心普遍不足。而在具体的执行层面,今年618同样处处受阻。

    在上海居家办公的于欣表示,最直接的就是沟通成本增加了好几倍,居家的效率太低。在天猫预售前一周左右,他们的广告预算、图片素材等都还没准备好。同时,物流影响也很大,每天都得和快递确认,物流成本明显上升。

    方明是一位天猫和拼多多运营的家居类商家,他同样表示,很多地方现在物流受阻,只能发邮政和顺丰,物流速度和成本都被抬高了。

    “我们在昆山,也被封了一个多月。在疫情刚开始,我们急急忙忙在安徽租了个小仓库应急,因为仓库面积有限,只能对卖得好的进货,很多一般销量的就尽量找厂家一件代发,如今618到了,大部分商品还是只能找代发。”方明表示。

    “虽然发货基本能够应付,但销量肯定是会受影响的,尤其是北京、上海这种贡献主要销量的大城市正在遭受疫情。”

    方明表示,在各种主客观因素的影响下,他们也调低了很多,包括这次618的投入预算、目标销售都调低了。

    线上经济再成熟,终归要受到供应链生产、物流等实体环节的影响,在复工复产、物流运输并未能完全恢复的当下,各种不确定影响因素仍会持续影响今年的618。

    二、被分散的消费者购物欲 需求决定供给,主要原因或许还是在消费者端。

    消费者对购物节的敏感度降低早已不是一天两天的事。2020年左右,双十一、618等购物节的疲态就开始显现。“一线大城市参加购物节的人越来越少了,三线以下的群体还稍微好一点。”上述家居类商家方明表示。

    疫情持续三年之久,大部分人正常的工作生活已然受到影响。当被我们问到今年618是否要买东西时,大部分人都是以一句“没钱”一笑了之,其画风早已不像从前晒包裹数量、晒订单这样阔气。

    “我居家两个多月了,公司以上海最低工资标准给我们发放工资,每个月房租都得倒贴。”一位在上海工作的95后年轻人表达了自己的无奈。疫情之下,很多人的收入大不如前,对于非必需品则是能不买就不买。

    “往年618我一般会买些换季夏装,但如今门都出不了,好像并没有买新衣服的必要。就算有很想买的东西,但送来可能是一两月之后,瞬间就没有购买的欲望了。”

    可见,疫情等因素对消费者产生的影响不仅仅只是收入打了折扣,同时对大家心态的影响也是很明显的。很多东西缺乏了使用场景,就没有了购买的必要。

    另外,像如今直播电商、C2M电商逐渐走向大众化,消费者对节日大促的热情也被进一步削减。大促主要追求的就是划算,当直播电商等在价格上的让利高于传统电商平台的购物节,这些所谓的大促对消费者来说也就失去了意义。

    “自从习惯了看直播带货买东西,我感觉每一天都是购物节。”一位抖音忠实用户表示。直播电商正在发展成为各商家和平台的常态化促销手段,而其吸引消费者最直接的逻辑便是以更优惠的价格给到消费者。

    李佳琦等头部主播历来以“全网最低价”的方式与品牌方谈合作,达人直播为了留住消费者、吸引粉丝,因此尽可能以最优惠的价格给到消费者。很多商品在直播间的价格与天猫等官方店的日常价相比,本身就要便宜很多。

    以某大牌一款粉底液为例,京东、天猫旗舰店日常价一般是530元,而抖音官方直播间的价格仅为299元。一件商品便宜两百多,即便是双十一这样的年度大促也难以给到这样大的优惠力度。

    由此可见,购物节输给直播电商的趋势愈发明显。

    同时,像拼多多“百亿补贴”等也在成为很多消费者以更划算的价格购买大牌商品的一个选择,而常规日用产品的替代渠道则更多。如今电商行业越来越卷,各平台为了留住消费者,也不得不使出各种方式让利消费者,消费者选择更多的同时也就不再单单盯着这类年度购物节。

    不止是同行的竞争,其实当电商平台疯狂造节的时候,就应该预想到618、双十一的流量会被分散。520、618、818、99购物节、双十一、双十二、黑五等一系列促销节的连番袭来,消费者对大促早已变得麻木。

    三、抖快低调,压力来到电商平台 商家趋于保守,消费者走向理性,提振消费的压力便来到了平台这边。为刺激商家和消费者,此次618平台明显给出了更大的优惠空间与扶持力度。

    京东在4月29日就召开了商家大会,公布了发布了30项“三减三优”举措,包括“减少成本、减少考核、减少风险、优化规则、优化效率、优化服务”的商家扶持方针。京东2022年618将重点聚焦在中小商家,最大限度减轻疫情对中小商家的影响,帮助他们在京东618的投入产出比至少提升20%。

    在今年618大促之前,京东也将升级APP,更加突出短视频和直播的占比,让消费者“更好逛、更好买”。可见京东此次明显突出“逛”的体验,以开发潜在消费力。

    天猫于5月13日公布了25条618助力商家举措,主要涵盖了金融补贴、物流疏通、流量补贴、疫情特别举措、技术升级等5个方面。

    本次618,天猫首次将金融补贴纳入到助力商家的举措中。具体而言,天猫将联合金融机构,帮助商家低息借到钱、提前收到钱。

    另外在受疫情影响较大的物流方面,菜鸟将预售商品提前下沉至离消费者最近的快递站点,同时为入仓商家提供疫情发货应对方案,在全国21个城市提供仓配一体、备货存储、全托管等服务。

    上述家居类商家方明向光子星球反映,最近淘工厂确实在很频繁的联系商家,希望商家入仓,然后以1.9元每单的快递价格给到商家。而平时商家自己发货的快递价格是2.2元一单,加上人工成本、场地等,入仓确实为商家提供了一定的便利。

    他同时表示,拼多多也在和商家谈入仓。“本地仓这个概念说了很久了,去年就在找我们谈。”但在疫情影响物流受阻的情况下,本地仓的意义也更重大。

    参考京东的自营模式,在特殊的外部环境影响下,阿里和拼多多也正在变重。短期看对于应对物流不畅等问题具有缓解作用,长期来看也是弥补自营模式的一个契机。

    直播带货的内容属性对于消费者购买欲的激励无疑高于货架模式,此次618,传统电商平台都有在主动或被动的增加对直播电商的倚重程度。以直播电商为主的抖音、快手也相继加入618的战局,推出一系列的补贴和扶持政策。

    不过,此次618抖快的声量似乎要比天猫和京东低调得多,常态化直播如期进行。这或许也与抖快商品本身日常价就很优惠有关,同时平台在物流等基础配套方面的缺失,也难以像京东、天猫等提供实际性的支持。

    整体而言,平台对商家、对消费者,今年都在加大扶持力度,以最大限度调动消费活力。不过,平台在扶持和优惠上的加码,也正是其压力外露的体现。

    京东刚刚公布的2022年一季度财报显示,今年前3个月,京东净亏损近30亿。京东将主要亏损原因归结于疫情,同时将希望寄托于即将到来的618。

    618无疑将承担起提升平台第二季度经营业绩的重任,商家,品牌方的销售压力来自于一系列现实因素的制约,这也是平台加大对商家扶持力度的原因。

    阿里在今年一季度的净利润同样是毫无意外的下跌,加之电商业务连续好几个季度的增长放缓,阿里需要一场突破。

    面对内外部环境的不确定性,以及电商行业增长触及天花板的行业困境,电商平台在此次618的压力有增无减。

     

    作者:何芙蓉,编辑:吴先之

    来源公众号:光子星球(ID:TMTweb),细微之处,看见未来!

    本文由人人都是产品经理合作媒体 @光子星球 授权发布,未经许可,禁止转载。

    题图来自 Pexels,基于 CC0 协议

    给作者打赏,鼓励TA抓紧创作!

    {{{path> 赞赏

  • 凭什么说设计方案有用?先掌握基础的数据分析思路!

    UI交互 2022-05-29
    “凭什么说你的方案有效果?” “讲了一堆你觉得,有客观依据么?” 是不是很想有理有据的把数据分析甩出来?

    “凭什么说你的方案有效果?”

    “讲了一堆你觉得,有客观依据么?”

    是不是很想有理有据的把数据分析甩出来?

    行!那今天就来介绍设计的 数据分析 思路,为你的方案增添 10 分说服力!

    从这 6 个方面,帮你快速入门数据分析! 作为一枚设计小萌新,对上述场景,是否似曾相识呢?

    阅读文章 >

    设计为什么要会数据分析?产品给的报告不能用吗? 谁不想摸鱼呢?可真的用不上呀!

    产品或运营的数据报表多是从本职业影响的范畴出发,去分析产品策略、渠道投放、运营手段等对整体大盘的影响。给出的数据要么和设计无甚相关,例如渠道的投入产出比,要么更偏向整体效果,无法探究设计方案的作用,例如参与人数、整体留存等。这样的数据,无法论证设计方案的影响效果,也就无法形成有效沉淀。

    所以,数据分析,还是要自己做!

    这样叫做“会设计数据分析”吗? 如果你知道哪些设计会影响最终 数据指标 ,知道如何拆解成与设计相匹配的小指标,会通过数据看出问题或机会,那么这就叫会 设计数据分析 。

    简单点,如果你曾被以下问题困扰过,那么下面的内容可要看仔细了~

    我是根据产品目标来做设计的,但我没办法证明方案是怎么影响总指标的? 收到数据图表,但看不出这和我的设计有什么关系? 得到一组多维数据,可怎么看结论都只有比大小? 设计的数据分析如何做? 本篇文章将遵从数据分析的三大步骤“拆解—埋点—分析”,从设计视角进行讲解和案例探讨。

    Step1:数据拆分 问题:我是根据产品目标来做设计的,但我没办法证明方案是怎么影响总指标的?

    诊断:除了总目标,不知道还能如何验证。属于数据拆分的问题。

    怎么拆?

    拆分数据是大化小的过程,宗旨是可以将终点数据拆分成过程数据、细节数据。以下为两个基础拆分思路:

    1)构成法

    「适用范围」有多维平行影响因素构成的数据,通常有固定公式的都属于该类。

    「案例」商品交易总额 GMV、用户终身价值 LTV 等。

    2)行为路径法

    「适用范围」总指标是“后置数据”,会受到一系列的“前置因素”影响。

    「案例」用户留存。

    在实际使用中,“构成法”和“行为路径法”通常是交叉叠加使用的。

    例如,为电商的年终大促做活动设计,总指标为 GMV(商品交易总额)。

    第一步:通过“GMV=点击 UV*转化率*平均客单价”的一般公式,可拆出 3 个二级指标——“SKU点击UV”、“转化率”、“平均客单价”。但这3个指标并不能直接指向设计,需要继续拆分。

    第二步:“SKU 点击 UV”对照用户行为,即用户“进入活动页面—看到页面上的‘商品橱窗’—点击陈列的SKU”。依照该行动顺序,可以找到对应的设计模块。“进入活动页面”转化为“活动入口点击率”;“看到页面上的商品橱窗”转化为“模块曝光率”;“点击陈列的SKU”转化为“模块的SKU点击率”。

    到此,指标已拆分至与设计直接相关的数据,我们可以通过数据的表现,发现设计效果是否达到预期。

    如果不满足于问题的发现,还想继续探讨如何设计效果更好,则需要通过对影响因素进行拆分,例如影响 SKU 点击的设计因素有位置、大小、动效、商品信息等等,通过 AB 测试的方式,来找到设计更优的解法。

    概括模型

    以上思路可以概括为:UJM+OSM 模型。该模型非常通用,和做设计的思路一致,会设计就会拆数据。

    应用思考

    案例:一款雇主招聘产品,为有更好的招聘效果,鼓励雇主在活动期间多查看简历、与应聘方沟通。那么“招聘效果”可以用哪些数据表示呢?

    实际案例更为复杂多元,以上仅为大致的思考思路,并不代表标准答案。

    Step2:数据埋点 问题:收到数据图表,但看不出这和我的设计有什么关系?

    诊断:没有办法对应数据和方案的关系。属于数据埋点的问题。

    怎么设置埋点数据?

    1)页面行为转化法

    设置埋点的目标,是在设计方案中找到可以表达你所需指标的数据。是用户在页面上的行为形成了数据,我们需要做的是确认哪些行为可以表达数据,然后对行为进行统计。接上个例子,“模块的 SKU 点击率”=模块的 UV 点击数/模块展示 UV,因此埋点数据是“模块的 UV 点击数”和“模块展示 UV”。

    概括

    这里归纳一些通用数据供参考。

    以上数据收到后还需进行分析,才能发现目标。仅仅展示这些数据并不能叫做数据分析哦~

    Step3:数据分析 问题:得到一组多维数据,可怎么看结论都只有比大小?

    诊断:缺乏关联分析思维。属于数据分析的问题。

    通过数据埋点得到多个单一数据,对单一数据进行不同角度的计算,再结合设计得出的结论,就是数据分析。

    如果对数据具备充足的设想,这一步仅仅是简单的计算和推理工作。但在实际中,往往会因为前期的思考不足,拿到数据后只会比大小。

    如何找到分析角度?

    分析就是找特征,以及造成特征的原因。因此,大小只是表象,大小必须和其他因素关联才是分析。以最常见的“比大小的思路”为起点,横纵拓展思路:

    案例应用

    应用案例:C 端招聘-留存数据分析

    一款面对求职者的招聘产品,在节日期间开展活动,活动目标是通过任务奖励,引导用户产生和求职相关的行为。

    已有数据:

    其他数据:活动整体次留、产品次留。

    依照上述思路:

    1)比大小

    A 同期比较:

    抽取以上数据并制作新表,观察可得以下三点。

    Q1. 两类用户中哪类的次留表现更好?(人群性)

    从整体数据看,“完成任务的用户”相比仅“参与的用户”,次留率明显更高。

    Q2. 两类用户与活动整体留存相比表现如何?(事件性)

    活动整体次留率为 8%,“参与任务用户”和“完成任务用户”次留均高于整体次留。说明与任务相关的用户次留表现更好。

    Q3. 两类用户与产品整体留存相比表现如何?(事件性)

    活动期间整体产品的次留率为 25%,通过数据可知:“参与 3 个任务及以上”、“完成 1 个任务及以上”的用户,可达或超越平台次留数据。

    而这两部分用户占比活动用户数量极少,也侧面印证了活动次留低于产品同期次留的结论。说明该活动的内容或策略未达用户预期,可能是活动目标与用户使用产品的目标不一致,也可能是奖励吸引力不足。

    B 不同期比较:

    Q1. 当前活动数据对比往期相同数据,是否有变化?(时间性)

    方法参考以上,此处不再举例。

    2)看趋势

    A 从参与任务数、完成任务数视角看:

    Q1. 任务数与留存提升幅度之间有什么发现?

    从留存提升效率看,“参与 2 个任务”到“参与 3 个任务”,留存提升最快(17.75%),其次是“参与 3 个任务”到“参与 4 个任务”(12.1%);考虑到“完成所有任务”(7 个任务)的基数过小,排除“完成 6 个任务”到“完成 7 个任务”外,“完成 2 个任务”到“完成 3 个任务”,留存提升最快(24.26%),其次是“完成 1 个任务”到“完成 2 个任务”(17.64%)。

    因此,尽量让用户从“参与 2 个任务”提升到 3 到 4 个、从“完成 1 个任务”提升成 2 到 3 个,对提升留存效率最高。

    B 从日期来看:

    Q1. 两类用户留存变化与活动留存有什么关系?

    以“完成 1 个任务的用户”留存为例,看转化与留存的关系:“用户活动次留”与“完成 1 个任务的用户次留”随时间变化趋势相近。说明转化与留存存在一定的正相关关系。

    Q2. 活动期间,次留如何变化?

    次留随时间呈现缓慢下降趋势,但基本维持在 7-8%之间。结合该活动过程中无其他事件或策略来中途拉升留存,判断 3 周的活动对用户的留存效果相对稳定。

    同理,如果在长期次留走势中发现有突然下降或提升的点,可以参考该时间段内是否有其他事件发生,这是一种寻找留存和事件关系的方式。

    3)看分布

    Q1. 参与、完成任务人数分布占比有何特点?对后续策略有何启发?

    从参与不同任务数的人数分布看,参与 1 个任务的占比最高,达 39.00%,远高于其他参与任务数。从完成不同任务数的人数分布看,完成 1、2 个任务占比最多,二者相加占比达 67.67%。结合“任务数与留存提升幅度”的结论推理可得:如想整体活动的留存率提升,需要关注占比较大的“参与 1 个任务的用户”、“完成 1、2 个任务的用户”。且这两部分人群占比大,针对其进行专门设计,可以有效影响活动整体的留存。

    Q2. 转化与次留随时间如何变化?有何发现?

    此处转化指完成任务。根据趋势图可看出:

    完成 1-3 个任务的用户,次留随时间有所变化,但稳定; 完成 4-6 个任务的用户,次留随时间变化有明显下降趋势,尤其是活动开启一周后; 完成 7 个任务(全部任务)的用户,次留基本不随时间产生变化。 以此可得,“完成 1-3 个任务的用户”和“完成全部任务的用户”,在当前无任何中途拉升次留的情况下,再次访问的意愿基本不变。但完成 4-6 个任务的用户,则需要在活动开启一周后采取其他留存措施来帮助稳定留存。

    总结 以上就是设计数据分析的基本思路,希望可以帮助大家建立基本的分析意识,面对数据不再迷茫。不过,对数据的敏感度并非一朝一夕可以形成,今后也需要大家在具体案例中有意识的练习哦~

    欢迎关注「58UXD」的微信公众号:

  • 凭什么说设计方案有用?先掌握基础的数据分析思路!

    UI交互 2022-05-29
    “凭什么说你的方案有效果?” “讲了一堆你觉得,有客观依据么?” 是不是很想有理有据的把数据分析甩出来?

    “凭什么说你的方案有效果?”

    “讲了一堆你觉得,有客观依据么?”

    是不是很想有理有据的把数据分析甩出来?

    行!那今天就来介绍设计的 数据分析 思路,为你的方案增添 10 分说服力!

    从这 6 个方面,帮你快速入门数据分析! 作为一枚设计小萌新,对上述场景,是否似曾相识呢?

    阅读文章 >

    设计为什么要会数据分析?产品给的报告不能用吗? 谁不想摸鱼呢?可真的用不上呀!

    产品或运营的数据报表多是从本职业影响的范畴出发,去分析产品策略、渠道投放、运营手段等对整体大盘的影响。给出的数据要么和设计无甚相关,例如渠道的投入产出比,要么更偏向整体效果,无法探究设计方案的作用,例如参与人数、整体留存等。这样的数据,无法论证设计方案的影响效果,也就无法形成有效沉淀。

    所以,数据分析,还是要自己做!

    这样叫做“会设计数据分析”吗? 如果你知道哪些设计会影响最终 数据指标 ,知道如何拆解成与设计相匹配的小指标,会通过数据看出问题或机会,那么这就叫会 设计数据分析 。

    简单点,如果你曾被以下问题困扰过,那么下面的内容可要看仔细了~

    我是根据产品目标来做设计的,但我没办法证明方案是怎么影响总指标的? 收到数据图表,但看不出这和我的设计有什么关系? 得到一组多维数据,可怎么看结论都只有比大小? 设计的数据分析如何做? 本篇文章将遵从数据分析的三大步骤“拆解—埋点—分析”,从设计视角进行讲解和案例探讨。

    Step1:数据拆分 问题:我是根据产品目标来做设计的,但我没办法证明方案是怎么影响总指标的?

    诊断:除了总目标,不知道还能如何验证。属于数据拆分的问题。

    怎么拆?

    拆分数据是大化小的过程,宗旨是可以将终点数据拆分成过程数据、细节数据。以下为两个基础拆分思路:

    1)构成法

    「适用范围」有多维平行影响因素构成的数据,通常有固定公式的都属于该类。

    「案例」商品交易总额 GMV、用户终身价值 LTV 等。

    2)行为路径法

    「适用范围」总指标是“后置数据”,会受到一系列的“前置因素”影响。

    「案例」用户留存。

    在实际使用中,“构成法”和“行为路径法”通常是交叉叠加使用的。

    例如,为电商的年终大促做活动设计,总指标为 GMV(商品交易总额)。

    第一步:通过“GMV=点击 UV*转化率*平均客单价”的一般公式,可拆出 3 个二级指标——“SKU点击UV”、“转化率”、“平均客单价”。但这3个指标并不能直接指向设计,需要继续拆分。

    第二步:“SKU 点击 UV”对照用户行为,即用户“进入活动页面—看到页面上的‘商品橱窗’—点击陈列的SKU”。依照该行动顺序,可以找到对应的设计模块。“进入活动页面”转化为“活动入口点击率”;“看到页面上的商品橱窗”转化为“模块曝光率”;“点击陈列的SKU”转化为“模块的SKU点击率”。

    到此,指标已拆分至与设计直接相关的数据,我们可以通过数据的表现,发现设计效果是否达到预期。

    如果不满足于问题的发现,还想继续探讨如何设计效果更好,则需要通过对影响因素进行拆分,例如影响 SKU 点击的设计因素有位置、大小、动效、商品信息等等,通过 AB 测试的方式,来找到设计更优的解法。

    概括模型

    以上思路可以概括为:UJM+OSM 模型。该模型非常通用,和做设计的思路一致,会设计就会拆数据。

    应用思考

    案例:一款雇主招聘产品,为有更好的招聘效果,鼓励雇主在活动期间多查看简历、与应聘方沟通。那么“招聘效果”可以用哪些数据表示呢?

    实际案例更为复杂多元,以上仅为大致的思考思路,并不代表标准答案。

    Step2:数据埋点 问题:收到数据图表,但看不出这和我的设计有什么关系?

    诊断:没有办法对应数据和方案的关系。属于数据埋点的问题。

    怎么设置埋点数据?

    1)页面行为转化法

    设置埋点的目标,是在设计方案中找到可以表达你所需指标的数据。是用户在页面上的行为形成了数据,我们需要做的是确认哪些行为可以表达数据,然后对行为进行统计。接上个例子,“模块的 SKU 点击率”=模块的 UV 点击数/模块展示 UV,因此埋点数据是“模块的 UV 点击数”和“模块展示 UV”。

    概括

    这里归纳一些通用数据供参考。

    以上数据收到后还需进行分析,才能发现目标。仅仅展示这些数据并不能叫做数据分析哦~

    Step3:数据分析 问题:得到一组多维数据,可怎么看结论都只有比大小?

    诊断:缺乏关联分析思维。属于数据分析的问题。

    通过数据埋点得到多个单一数据,对单一数据进行不同角度的计算,再结合设计得出的结论,就是数据分析。

    如果对数据具备充足的设想,这一步仅仅是简单的计算和推理工作。但在实际中,往往会因为前期的思考不足,拿到数据后只会比大小。

    如何找到分析角度?

    分析就是找特征,以及造成特征的原因。因此,大小只是表象,大小必须和其他因素关联才是分析。以最常见的“比大小的思路”为起点,横纵拓展思路:

    案例应用

    应用案例:C 端招聘-留存数据分析

    一款面对求职者的招聘产品,在节日期间开展活动,活动目标是通过任务奖励,引导用户产生和求职相关的行为。

    已有数据:

    其他数据:活动整体次留、产品次留。

    依照上述思路:

    1)比大小

    A 同期比较:

    抽取以上数据并制作新表,观察可得以下三点。

    Q1. 两类用户中哪类的次留表现更好?(人群性)

    从整体数据看,“完成任务的用户”相比仅“参与的用户”,次留率明显更高。

    Q2. 两类用户与活动整体留存相比表现如何?(事件性)

    活动整体次留率为 8%,“参与任务用户”和“完成任务用户”次留均高于整体次留。说明与任务相关的用户次留表现更好。

    Q3. 两类用户与产品整体留存相比表现如何?(事件性)

    活动期间整体产品的次留率为 25%,通过数据可知:“参与 3 个任务及以上”、“完成 1 个任务及以上”的用户,可达或超越平台次留数据。

    而这两部分用户占比活动用户数量极少,也侧面印证了活动次留低于产品同期次留的结论。说明该活动的内容或策略未达用户预期,可能是活动目标与用户使用产品的目标不一致,也可能是奖励吸引力不足。

    B 不同期比较:

    Q1. 当前活动数据对比往期相同数据,是否有变化?(时间性)

    方法参考以上,此处不再举例。

    2)看趋势

    A 从参与任务数、完成任务数视角看:

    Q1. 任务数与留存提升幅度之间有什么发现?

    从留存提升效率看,“参与 2 个任务”到“参与 3 个任务”,留存提升最快(17.75%),其次是“参与 3 个任务”到“参与 4 个任务”(12.1%);考虑到“完成所有任务”(7 个任务)的基数过小,排除“完成 6 个任务”到“完成 7 个任务”外,“完成 2 个任务”到“完成 3 个任务”,留存提升最快(24.26%),其次是“完成 1 个任务”到“完成 2 个任务”(17.64%)。

    因此,尽量让用户从“参与 2 个任务”提升到 3 到 4 个、从“完成 1 个任务”提升成 2 到 3 个,对提升留存效率最高。

    B 从日期来看:

    Q1. 两类用户留存变化与活动留存有什么关系?

    以“完成 1 个任务的用户”留存为例,看转化与留存的关系:“用户活动次留”与“完成 1 个任务的用户次留”随时间变化趋势相近。说明转化与留存存在一定的正相关关系。

    Q2. 活动期间,次留如何变化?

    次留随时间呈现缓慢下降趋势,但基本维持在 7-8%之间。结合该活动过程中无其他事件或策略来中途拉升留存,判断 3 周的活动对用户的留存效果相对稳定。

    同理,如果在长期次留走势中发现有突然下降或提升的点,可以参考该时间段内是否有其他事件发生,这是一种寻找留存和事件关系的方式。

    3)看分布

    Q1. 参与、完成任务人数分布占比有何特点?对后续策略有何启发?

    从参与不同任务数的人数分布看,参与 1 个任务的占比最高,达 39.00%,远高于其他参与任务数。从完成不同任务数的人数分布看,完成 1、2 个任务占比最多,二者相加占比达 67.67%。结合“任务数与留存提升幅度”的结论推理可得:如想整体活动的留存率提升,需要关注占比较大的“参与 1 个任务的用户”、“完成 1、2 个任务的用户”。且这两部分人群占比大,针对其进行专门设计,可以有效影响活动整体的留存。

    Q2. 转化与次留随时间如何变化?有何发现?

    此处转化指完成任务。根据趋势图可看出:

    完成 1-3 个任务的用户,次留随时间有所变化,但稳定; 完成 4-6 个任务的用户,次留随时间变化有明显下降趋势,尤其是活动开启一周后; 完成 7 个任务(全部任务)的用户,次留基本不随时间产生变化。 以此可得,“完成 1-3 个任务的用户”和“完成全部任务的用户”,在当前无任何中途拉升次留的情况下,再次访问的意愿基本不变。但完成 4-6 个任务的用户,则需要在活动开启一周后采取其他留存措施来帮助稳定留存。

    总结 以上就是设计数据分析的基本思路,希望可以帮助大家建立基本的分析意识,面对数据不再迷茫。不过,对数据的敏感度并非一朝一夕可以形成,今后也需要大家在具体案例中有意识的练习哦~

    欢迎关注「58UXD」的微信公众号:


让你的品牌快速脱颖而出,抢占市场份额,提升销量
免费获取方案及报价
*我们会尽快和您联系,请保持手机畅通