- Qiao's Newsletter
- Posts
- #006 聊聊设计中的数据图表📊(数据可视化)
Hi👋🏻，各位设计师朋友们！
欢迎来到 Qiao’s Newsletter 第006期，
本期主题： 聊聊设计中的数据图表📊（数据可视化）
目录
主题内容
设计资源聚合
优秀案例鉴赏
产品推荐
杂乱无章
1️⃣ 聊聊设计中的数据图表📊（数据可视化）
▪️ 前言
在平面设计领域，图表、表格、和数据图表是很常见的设计元素。我们经常接到客户的需求，他们会提供大量的参数数据，或者多种表格和图表。这些信息需要我们将其整合并嵌入到画册、海报、或网站设计中。客户提供的材料可能是一个Excel表格，或者一张原始的、简陋的图表图片。
常见的客户的数据表格资料
当这些资料传递到设计师手中时，我们肯定需要对其进行二次处理，以便将其融入到我们的设计排版中。我们将这个过程，即提升客户提供的数据或表格的视觉效果——称之为数据可视化。
数据可视化的定义（个人理解）
在平面设计中，数据可视化是一种将抽象的数据信息转换成直观、易理解的图形或图表的过程。数据可视化的目的是让读者或观众能更快、更有效地理解和记住大量数据中的关键信息。
数据可视化可以使用各种图表类型（例如柱状图、折线图、饼图、散点图等），以及更复杂的信息图形（例如地图、网络图和树状图等），来表示数据的关系和模式。数据可视化的主要挑战在于找到最有效地表达给定数据的方式，同时保持设计的简洁和美观。
▪️ 痛点
在进行图表设计时，我们常用的工具是Adobe Illustrator。传统的方法是在Excel中生成图表，然后将其截图复制到AI中进行矢量化和美化，但这种方式既耗时又容易出错。因此，本期的主题是介绍一些在线服务和Figma插件等工具，还有一些现成的表单kit组件，它们能帮助我们更加便捷和高效地创建出美观的图表。
▪️ 认识图表
在众多图表类型中，我们常见的如柱状图、饼状图、折线图等可能已经非常熟悉。然而，除了这些，还有许多其他的图表类型可能我们知道却说不出其名称。
这个网站汇集了100种图表类型，并且对每种图表类型都提供了详细的说明、解释以及其背后的故事。可以说，它就是图表领域的“维基百科”。
 |  |
▪️ 图表工具介绍
图表在线服务
图表魔方：阿里出品的免费在线图表制作工具，简单好用。
PS：重点在于矢量化数据图表这个过程省去很多时间，可以根据数据生成的实际图表进行优化数据。
chartcube操作界面
操作分为四个步骤，1.导入数据（直接复制编辑或者导入表格），2.选择图表类型，3.配置图表，4.导出图表。
 图表魔方直接导出SVG（文字内容可编辑） |  导入figma优化色彩字体 |
图表导出支持SVG，PNG，JPG等常用格式，SVG就是矢量格式，可以直接拖入AI、figma进行二次设计。
在线生成漂亮的数据表格。
在线有表格、背景、色彩系列、Dark Mode&Light Mode、手机端&电脑端等预设开关。整体非常美观，还可以嵌入notion中。
Graphy操作界面
独特的功能是接入了AI（人工智能），你可以直接用文字描述自动生成一张所需要的数据表格，比如2022年中国发电类型分布，他就会结合网上数据生成表格。
或者是你创建了一个图标，可以让AI根据数据内容生成表格说明，就是一般表格下方会出现一句说明文字，方便认知。
AI生成的中国2022年能源分布图
镝数图表是一款功能强大的免费在线数据可视化工具，输入数据即可一键生成可视化视频、网页交互图表制作，数据动图、矢量图表、信息图表
dycharts
尝试了一下，后台编辑功能也比较强大，但是只能导出JPG或者PNG图片格式，可以在里面编辑好样式之后直接嵌入到设计文件中。
还有一点是可以做动态图表，比如20年世界各国GPD变化这种赛跑的动态表现，可以通过这个实现。
dycharts后台操作
Figma插件
图表是一个使用真实或随机数据来创建最流行图表的图形插件。图表支持从Excel、Numbers、Google表格等编辑器复制粘贴，与Google表格和远程JSON（REST API）、本地CSV和JSON文件的实时连接。
figma Chart plugin
Fast Chart是一款旨在协助设计师和开发者实现图表的提效工具，注释区代码可用于Echarts、AntDesignCharts（桌面端）或AntV/F2（移动端）中图表的实现，从而使图表的设计与调整不再耗时费力。
 Fast Chart操作界面 |  Fast Chart操作界面 |
图表kit组件
基本都是figma社区里面的，可以去搜一下，有很多漂亮的表格组件，拿来就可以用。做的好点的还有做好layout，就是自适应，可以随意横向纵向拉伸。
▪️ TL;DR（长话短说）
前言：解释数据可视化的概念和重要性，以及它在平面设计中的应用。
痛点：传统的数据可视化流程和存在的问题。
介绍不同的图表类型：包括我们熟悉和不太熟悉的图表类型，推荐了解更多图表类型的资源——datavizproject网站。
工具介绍：分享在线数据可视化工具如chartcube, Graphy, dycharts，以及Figma插件如Chart, Fast Chart，帮助设计师更高效地创建图表。
图表kit组件介绍：推荐了一些在Figma社区中找到的图表组件，使设计更便捷。
结论：利用现有的工具和资源，我们可以更有效、更高效地创建出美观的数据可视化图表。同时，鼓励去探索和使用这些工具和资源，以提升数据可视化设计技能。
2️⃣ 设计资源聚合
开源字体“得意黑”，很适合做标题。推出之后受到广大B站up主欢迎，并在视频中作为标题和字幕使用。
字体是由设计师 oooooohmygosh（6o老师）atelierAnchor （锚坞）设计师耗时一年多共同完成。
6o老师在B站上也专门做了一个视频对字体和背后开发故事做了讲解。视频链接👉🏻🔗Link
得意黑字体样张
一套免费的各国国旗icon
flagpack国旗icon fimga文件封面
与其他国旗素材相比的优点是
 | 1.国家最全 世界上258个国家 |
 | 2.国旗没有瑕疵 在figma社区里面搜到的有的国旗icon包里面的中国国旗上的五角星是一个黄色方框代替的，其他国家的上太小的元素也做了修改 |
 | 3.国旗做了很多效果开关
图中就是开了“旗帜飘扬”效果 |
PS(Beta)在最新更新的版本中加入了一个强大的功能”创意填充“，也就是我们所说的AI制图功能，因为之前用过Adobe旗下的Firefly（图像模型，与midjourney类似），效果极差所以对这个功能也不抱期望。
Adobe 官方宣传片
但是尝试下来感觉超出预期。现在尝试下来比较稳定的操作是两个：1.替换画面部分元素，2.扩充图片。
扩充图片示意。当我们觉得图片边缘元素不够用，场景不够大这种情况，现在真的是可以完美解决。
替换部分元素示意。画面某些小的元素可以用关键词替换，这也解决很多抠图修图合成的需求。
 | 以上功能现在只对PS(Beta)版本开放，如果是Adobe Creative Cloud的订阅用户，可以在本地程序中索引到“Beta 应用程序”中找到并下载。 |
3️⃣ 优秀案例鉴赏
优秀的动态网站，如果想在网站里加入一些交互动态元素，可以在这上面找一些灵感，案例网站都是最新的。
非常优秀的一个首页交互动画，还伴随声音交互。
根据五角心设计在其官方Twitter上发布的消息，这个项目耗时一年半，其创新性和完整性堪称惊人。除了常规的设计元素，如logo、色彩、辅助元素、图标和字体，他们还结合了声音和动态元素，这非常符合电视节目品牌的特性。五角心13条的thread（推文串）也表示他们对这个项目的自己内部的肯定。
案例介绍中说到，第4频道成立于 1982 年，由于过去数十年行业翻天覆地的变化，全新的品牌形象不仅要适应当下，更要留出空间适应未来变化。
作为全球最大的品牌创意机构，五角星以往的案例都非常“稳重”，也能理解，他们的客户不是世界500强企业，也是名声很响的品牌，所以考虑的需要周全，但是这次第4频道的案例，让我看到了五角星不一样的一面。
PS：这个案例值得做品牌设计的朋友们去好好研究一下。
 |  |
4️⃣ 产品推荐
Dropover 是一款 macOS 实用程序，可让拖放操作变得更加轻松。无需打开并排窗口即可存储、收集或移动可拖动的内容。
 现在系统下隔空投送文件需要的操作步骤 | 如果你是Mac上Airdrop（隔空投送）的重度使用者，在新系统macOS Ventura下你肯定非常痛苦，因为现在的隔空投送多了很多步骤。 |
 dropover隔空投送文件操作 | Dropover很巧妙的使用了一个操作交互“摇晃”，很天才。只需要一步就能完成隔空投送操作。 |
Mac上最好的Gmail客户端，使用下来已经离不开了，比在网页里开Gmail方便很多。重度Gmail用户可以考虑，我已经付费了。
经过免费内测，现在开始收费，之前参加内测的用户可以享受第一年半价的优惠，正常价格49.99美金，说实话定价确实贵了点，回让很多人选择继续用回网页端Gmail。
5️⃣ 杂乱无章
得益于AI人工智能的发展，显卡需求不断上升，Nvidia（英伟达）最近成了价值万亿美元的公司，🔗Link。CEO黄仁勋是一位台湾裔美国人企业家，1993年创建公司开始做游戏显卡，多年来起起伏伏，也遇到过濒临破产的时候，最终也把自己的公司做成能与Apple，Intel，微软并肩的大公司，他在台湾大学演讲的最后说道：放弃什么，才是让你成功的关键。
首尔往旧金山的航班，一位妈妈给飞机上的二百多乘客都发了个塑料袋。装着糖果、口香糖和耳塞，一个纸条写着（你好，我是 Jun Woo，4个月大，和妈妈和祖母一起去美国旅行，有点紧张和害怕。人生第一次坐飞机，很可能会哭，我会尽量保持冷静，但不能保证，若我声音太大，请使用耳塞。祝你旅途愉快，谢谢）。🔗Link
今年6月4日是六四事件34周年纪念日，除了各地各国华人举办纪念活动，在微博上各国大使馆都在当天发博暗示。🔗Link
上周有个令人很心痛的新闻，一个小学生在学校被老师开车压到头部拖行5米，并且二次碾压，失去了生命…其母亲在维权过程中被网友网暴和被公安维稳，痛心跳楼…实在无法想象这个母亲当时的心情，作为也有小孩的人我最近都不敢想这个事情。🔗Link，中国的公民和公检法机构已经是一个无情的机器了，🔗Link。
英国设计师Oliur靠买iPhone和Mac壁纸，换了一辆又一辆豪车，最近又换了一辆红色法拉利，他在Twitter上PO上了新车照片，并且写到：感谢每一位买我壁纸的人。感叹国外设计师实现财富自由之容易。🔗Link
上周三凌晨的WWDC大会，苹果发布了三款桌面端新品，分别是15寸的M2 MacBook Air、M2 Max & M2 Ultra的Mac Studio和Mac Pro，然后就是iOS、iPadOS、MacOS、tvOS、watchOS的日常更新，吐槽一下MacOS新系统Sonoma真的是挤牙膏（其他端的不关注，因为Mac是我生产力工具）…，最重磅的还是Apple的VR眼镜Vision Pro，很多人评价感觉看到乔布斯发布第一款iPhone的感觉。此款眼镜预计明年3月份在美国面市，其他国家暂定，估计要在直营店想体验到至少明年下半年了。
Design Shanghai（设计上海）第十届展览最近在上海世博展览馆举办，我记得在大学时候和同学去看过，那会好像还免费，大概第三第四届，现在票价已经来到300左右，还是早鸟价，有点开始割韭菜的意思了。对家具家居感兴趣的可以关注一下。🔗Link
我的周刊已经进行到了第六期，两个月的时间里，订阅人数不断增长，离不开朋友们的关注和支持，我对此深感谢意。  然而，近期遇到了一个问题。我发现，使用@qq.com（QQ邮箱）的读者无法成功订阅我的周刊。经过与平台的深入沟通，得知QQ邮箱的域名因被频繁标记为垃圾邮件，已经被平台禁止使用。 |  所以大家尽量避免使用QQ邮箱订阅，其他国内邮箱暂时没被Ban，尽量Gmail、Outlook等国外邮箱…  避免QQ邮箱订阅 你的订阅是产出优质内容的最大动力，感谢大家支持。 |
Reply