mirror of
https://gitee.com/AiShiYuShiJiePingXing/bigscreen.git
synced 2026-01-21 05:40:35 +08:00
上传图片
This commit is contained in:
AiShiYuShiJiePingXing
@@ -1,6 +1,6 @@
|
||||
- 微信公众号：BYMD：[大屏数据可视化设计指南](https://mp.weixin.qq.com/s/qwTwBYcHzqvzufSRIQyI_g)
|
||||
|
||||
|
||||
|
||||
|
||||
# 一、基础概念
|
||||
|
||||
@@ -12,7 +12,7 @@
|
||||
|
||||
在当前新技术支持下，数据可视化除了“可视”，还可有可交流、可互动的特点。<font color='orange'>**数据可视化的本质是数据空间到图形空间的映射，是抽象数据的具象表达。**</font>
|
||||
|
||||
|
||||
|
||||
|
||||
数据可视化作品《launchit》
|
||||
|
||||
@@ -20,7 +20,7 @@
|
||||
|
||||
> 作者写了本书，地图上显示了世界各地读者的分布情况及对应人数
|
||||
|
||||
|
||||
|
||||
|
||||
数据可视化作品《world-drawn-by-travelers》
|
||||
|
||||
@@ -28,7 +28,7 @@
|
||||
|
||||
> 国家之间相互连通的旅游路线，颜色越相近的国家，表明两国家的人们互动越频繁
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -38,43 +38,27 @@
|
||||
|
||||
“大面积、炫酷动效、丰富色彩”，大屏易在观感上给人留下震撼印象，便于营造某些独特氛围、打造仪式感。电商双11类大屏利用此特点打造了热烈、狂欢的节日氛围，原本看不见的数据可视化后，便能调动人的情绪、引发人的共鸣，传递企业文化和价值。
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
利用面积大、可展示信息多的特点，通过关键信息大屏共享的方式可方便团队讨论、决策，故大屏也常用来做数据分析监测使用。大屏数据可视化目前主要有信息展示、数据分析及监控预警三大类。
|
||||
|
||||
|
||||
|
||||
数据分析类
|
||||
|
||||
> 图片来源：必应；图片作者：帆软软件有限公司
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
# 二、大屏数据可视化设计原则：设计服务需求、先总览后细节
|
||||
|
||||
## 设计服务需求
|
||||
|
||||
大屏设计要避免为了展示而展示，排版布局、图表选用等应服务于业务，所以大屏设计是在充分了解业务需求的基础上进行的。那什么是业务需求呢？业务需求就是要解决的问题或达成的目标。设计师通过设计的手段帮助相关人员达成这个目标，是大屏数据可视化的价值所在。
|
||||
|
||||
|
||||
|
||||
## 先总览后细节
|
||||
|
||||
大屏因为大，承载数据多，为了避免观者迷失，大屏信息呈现要有焦点、有主次。可以通过对比，先把核心数据抛给用户，待用户理解大屏主要内容与展示逻辑后，再逐级浏览二三级内容。部分细节数据可暂时隐藏，用户需要时可通过鼠标点击等交互方式唤起。
|
||||
|
||||
|
||||
|
||||
# 三、大屏可视化设计流程
|
||||
|
||||
规范的流程是好结果的保证。找到一个可参考的流程，然后步步为营，就能避免很多不必要的返工，保证设计质量和项目进度。
|
||||
|
||||
|
||||
|
||||
|
||||
## 1、根据业务场景抽取关键指标
|
||||
|
||||
@@ -84,15 +68,13 @@
|
||||
|
||||
确定关键指标后，根据业务需求拟定各个指标展示的优先级（主、次、辅）。
|
||||
|
||||
|
||||
|
||||
|
||||
## 2、确立指标分析维度
|
||||
|
||||
“横看成岭侧成峰”。同一个指标的数据，从不同维度分析就有不同结果。很多小伙伴做完可视化设计，发现可视化图形并没有准确表达自己的意图，也没能向观者传达出应有的信息，可视化图形让人困惑或看不懂。出现这种情况很大程度就是因为分析的维度没有找准或定义的比较混乱。
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
上图向大家展示了数据分析常用的4个维度，我们在选定指标后，就需要跟项目组其他小伙伴讨论：我们的各个指标主要想给大家展示什么，更进一步的讲，是我们想通过可视化表达什么样的规律和信息。而上图，可以引导我们从“联系、分布、比较、构成”四个维度更有逻辑的思考这个问题。
|
||||
|
||||
@@ -104,8 +86,6 @@
|
||||
|
||||
**构成**：指标里的数据都由哪几部分组成、每部分占比如何
|
||||
|
||||
|
||||
|
||||
## 3、选定可视化图表类型
|
||||
|
||||
当确定好分析维度后，事实上我们所能选用的图表类型也就基本确定了。接下来我们只需要从少数几个图表里筛选出最能体现我们设计意图的那个就好了。
|
||||
@@ -116,7 +96,7 @@
|
||||
|
||||
可视化设计要考虑大屏最终用户，可视化结果应该是一看就懂，不需要思考和过度理解，因而选定图表时要理性，避免为了视觉上的效果而选择一些对用户不太友好的图形。
|
||||
|
||||
|
||||
|
||||
|
||||
### 可实现
|
||||
|
||||
@@ -124,15 +104,13 @@
|
||||
|
||||
2、我们设计的图形图表，要开发能够实现。实际工作中，一些可视化效果开发用代码写很容易实现，效果也不错，但这些效果设计师用Ps/Ai/Ae这些工具模拟时会发现比较困难；同样的，某些效果设计师用设计工具可以轻易实现，但开发要用代码落地却非常困难，所以大屏设计中跟开发常沟通非常重要，我们需要明确哪些地方设计师可以尽情发挥，哪些地方需要谨慎设计！一个项目总有周期与预算限制，不会无限期的修改迭代，所以设计师在这里需要抓住重点，有取舍，不钻牛角尖、死磕不放。
|
||||
|
||||
|
||||
|
||||
|
||||
## 4、了解物理大屏，确定设计稿尺寸
|
||||
|
||||
**多数情况下设计稿分辨率即被投大屏的信号源电脑屏幕的分辨率。**有多个信号源时，就会有多个设计稿，此时每个设计稿的尺寸即对应信号源电脑屏幕的分辨率
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -142,9 +120,7 @@
|
||||
|
||||
尺寸确立后，接下来要对设计稿进行布局和页面的划分。这里的划分，主要根据我们之前定好的业务指标进行，核心业务指标安排在中间位置、占较大面积；其余的指标按优先级依次在核心指标周围展开。一般把有关联的指标让其相邻或靠近，把图表类型相近的指标放一起，这样能减少观者认知上的负担并提高信息传递的效率。
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## 6、定义设计风格
|
||||
|
||||
@@ -152,9 +128,7 @@
|
||||
|
||||
大屏虽酷炫，但实际上也是运行在浏览器里的Web页面，所以大屏设计风格定义方法也同样可以是用情绪版来做，这种方法也是目前比较科学高效的风格定义手段
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
上图提供了情绪版应用的脑图，具体操作细节不做介绍，不太了解的小伙伴可以自己找找资料哈。
|
||||
|
||||
@@ -164,18 +138,14 @@
|
||||
|
||||
根据定义好的设计风格与选定的图表类型进行合理的可视化设计。目前来讲大屏可视化主要有指标类信息点和地理类信息点两大可视化数据。指标类信息点可视化效果相对简单易实现，而地理类信息点一般可视化效果酷炫，但是开发相对困难，需要设计师跟开发多沟通的。地理类信息一般具有很强的空间感、丰富的粒子、流光等动效、高精度的模型和材质以及可交互实时演算等特点，所以对于被投电脑、大屏拼接器等硬件设备的性能会有要求，硬件配置不够的情况下可能出现卡顿甚至崩溃的情况，所以这点也是需要提前沟通评估的。
|
||||
|
||||
|
||||
|
||||
## 8、样图沟通确认
|
||||
|
||||
这里的沟通分三个层面：设计师对内沟通、设计师对外沟通、设计师与大屏的“沟通”。
|
||||
|
||||
|
||||
|
||||
|
||||
样图沟通环节，最初的样图不需要十分精致，我们可以把它理解为一个“低保真”原型，然后通过不断沟通修改，让它逐步完善精致起来，也就是小步快跑，避免那种一下子走到终点，然后又大修大改的情况。
|
||||
|
||||
|
||||
|
||||
因为我们在前几步已经分别确定了页面布局、图表类型、页面风格特点，所以这一步我们需要用尽可能简单的方法 ，把之前几步的成果在页面上快速体现出来，然后根据样图效果尝试确定五方面内容：
|
||||
|
||||
**1、之前确立的布局在放入设计内容后是否依然合适**
|
||||
@@ -188,15 +158,13 @@
|
||||
|
||||
**5、大屏是否存在色差、文字内容是否清晰可见、页面是否存在变形拉伸等现象**
|
||||
|
||||
|
||||
|
||||
**跟大屏“沟通”是比较重要也是个特殊的环节**，这也是我觉得大屏设计跟其它设计不一样的地方，大屏有它自己独特的分辨率、屏幕组成、色彩显示以及运行、展示环境，这里的很多问题只有设计稿投到大屏上才能够被发现，所以这一步在样图沟通确认环节非常重要，有时候需要开发出demo，反复测试多次。
|
||||
|
||||
## 9、页面定稿、开发
|
||||
|
||||
事实上页面开发阶段并不是到了这一步才进行，这里说的页面开发仅指前端样式的实现，实际上后台数据准备工作在定义好分析指标后就已经开始进行了，而我们当前的工作是把数据接入到前端，然后用设计的样式呈现出来。
|
||||
|
||||
|
||||
|
||||
|
||||
**切图与标注**
|
||||
|
||||
@@ -226,11 +194,11 @@ Web页面用什么插件做标注这个大家都很熟悉，我就不多说了
|
||||
|
||||
字体优先使用系统默认字体，需要嵌入字体时考虑字体的可识别性、与当前设计风格是否融合、是否可免费商用。
|
||||
|
||||
|
||||
|
||||
|
||||
如果页面是云端部署，需要嵌入字体包时，我们可以使用**FontCreator**这类的软件把那些用不到的字符从字体包中删掉，然后重新打包上传，减小字体包大小，可以优化页面加载体验，避免在替换默认字体的过程中出现页面文字跳动等现象。（一般来讲一套字体文件包含了阿拉伯文、符号、拉丁文、日文、西里尔文、希腊文、拼音、注音符号等多种字符，对于大屏这个明确的场景，我们可以删掉其它使用不到的字符，仅保留中文、拼音和数字）
|
||||
|
||||
|
||||
|
||||
|
||||
关于字体版权获取相关问题，公众号回复“可视化”获取
|
||||
|
||||
@@ -238,7 +206,7 @@ Web页面用什么插件做标注这个大家都很熟悉，我就不多说了
|
||||
|
||||
1、**色彩明度与饱和度差异显著**、对比鲜明， 尽量避免使用邻近色配色
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -250,9 +218,7 @@ Web页面用什么插件做标注这个大家都很熟悉，我就不多说了
|
||||
|
||||
主次分明、条理清晰、注意留白，合理利用大屏上各小的显示单元，并尽量避免关键数据被拼缝分割
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
# 五、Q&A
|
||||
|
||||
@@ -284,8 +250,6 @@ Web页面用什么插件做标注这个大家都很熟悉，我就不多说了
|
||||
|
||||
## 6、数据可视化的图表样式可以在那些地方找到参考？
|
||||
|
||||
图表部分的二个库是我们设计师可以打开浏览产看的，这里面所有的图表样式都是基于代码实现的，可以作为我们设计图表的参考，也可以让开发拿代码去用，或者在这些图表的基础修改
|
||||
图表部分的二个库是我们设计师可以打开浏览产看的，这里面所有的图表样式都是基于代码实现的，可以作为我们设计图表的参考，也可以让开发拿代码去用，或者在这些图表的基础修改。
|
||||
|
||||
工具类的需要有一定的代码基础，里面同样有丰富的图表，所以跟开发的沟通也很重要，因为他们可能会了解多一些更新的前沿的图表形式是我们设计师不知道的，所以彼此多沟通交流是在太重要了
|
||||
|
||||
|
||||
工具类的需要有一定的代码基础，里面同样有丰富的图表，所以跟开发的沟通也很重要，因为他们可能会了解多一些更新的前沿的图表形式是我们设计师不知道的，所以彼此多沟通交流是在太重要了。
|
||||
|
||||
@@ -1,30 +1,20 @@
|
||||
- 微信公众号：We-Design-[如何为你的产品设计搜索功能](https://mp.weixin.qq.com/s/ZkPOn7S6i8ZJPlNar2ehSw)
|
||||
|
||||
|
||||
|
||||
在数字化生活体验中，我们可能每天都在不同的界面、设备和 APP 上与搜索进行交互。搜索使我们的生活变得更加轻松，但这个领域仍然还有很大发展空间。
|
||||
|
||||
|
||||
|
||||
我在搜索领域工作了两年，可以说搜索是我所遇到过的最开放、最复杂的 “问题空间” ¹ 之一。这是一项应用了全世界最好的技术的工具，但全量用户都可以无门槛使用。谷歌、微软、 Spotify 等众多公司，都分配了成千上百的人才在这项工作中。在本文中，我将试图解释搜索的不同阶段是如何工作的、这些阶段中需要做出哪些关键决策，以及如何为它进行设计。
|
||||
|
||||
# 1 不断变化的问题空间
|
||||
|
||||
搜索是一项非常普遍的功能，现在几乎所有的数字产品中都有搜索。这是一个让用户跳过复杂流程，直接获取他们想要的信息的快捷方式，就像在一个应用程序内的远距离传送。
|
||||
|
||||
|
||||
|
||||
但是用潘杜·纳亚克先生的话来说 “距离搜索问题完全被破解还有很远的路要走” ，而本 · 戈麦斯也认为 “寻找搜索问题的完美解决方案这件事根本看不到尽头，因为世界在不断变化。”
|
||||
|
||||
|
||||
|
||||
在搜索中您很少遇到有明确答案的问题，几乎都是关于可能性和概率性的问题。这是为什么呢？为了跟上不断增长的在线信息库，搜索系统需要想出更好的方法来解析和聚合可用的信息。无论搜索系统如何进化，仍然不可能完全准确地预测用户正在寻找的搜索结果。以谷歌搜索为例，你会发现他们在搜索流程的每个阶段都在收集反馈。因为他们知道系统的结果可能不符合用户预期，所以期望用户能帮助他们把这部分标记出来。
|
||||
|
||||
|
||||
|
||||
搜索如此复杂，那该如何设计它呢？这就需要充分理解并学会处理搜索的每一个阶段。通过下图，可以让我们对搜索流程有了初步的了解，接下来让我们更深入地研究各个阶段的具体呈现。
|
||||
|
||||
|
||||
|
||||
|
||||
▲ 搜索的五大阶段
|
||||
|
||||
@@ -38,7 +28,7 @@
|
||||
|
||||
用户将自己的意图转化为一个搜索请求，并输入到搜索框中。这就是你在为用户提供有价值的结果前从他那里能获取到的全部信息。
|
||||
|
||||
|
||||
|
||||
|
||||
▲ 获取搜索的过程
|
||||
|
||||
@@ -53,7 +43,7 @@
|
||||
**•** 提供视觉反馈 —— 当搜索请求被获取时，需始终在其所处位置提供视觉反馈。在触发搜索之前，确保用户能够看到他们输入或说出的内容，这还包括语音搜索的不同状态（获取中，已获取）。同时需要允许用户检查错误，并自行更正。
|
||||
**•** 使用自动完成功能 ——对于文本搜索，使用自动完成可以减少错误，还可以节省输入整个搜索内容的时间。自动完成是一个小对话框，它出现在搜索栏下面，根据用户目前输入的内容提供搜索建议。这个界面很简单，但是它真正的魔力在于它背后的智能系统。了解更多有关自动完成的资料可查看这篇文章《谷歌自动完成搜索如何运作》²。
|
||||
|
||||
|
||||
|
||||
|
||||
▲ 视觉反馈与自动完成
|
||||
|
||||
@@ -69,7 +59,7 @@
|
||||
|
||||
每个产品都使用自己独特的算法来解析用户的搜索请求。一旦接收到这个请求，它将从几个方面进行检查和评估，比如拼写、语法、过去成功的搜索案例、质量、结果数量等等。由此，系统生成了一系列用户可能正在寻找的搜索内容 —— 我们称之为最佳搜索请求。如果系统认为接收到的原始搜索请求质量良好，则将其视为最佳搜索请求。如果系统认为原始搜索请求不是最优的，它会根据相同的检查标准对所有系统生成的搜索请求进行评估，并为每个搜索请求打分，得分最高的搜索请求获胜。获胜的搜索请求通常是系统通过数据预测得到的，例如，用户在谷歌上搜索 “家庭影院”，系统会将搜索请求映射到 “家庭影院”，并显示类似的结果。该系统有一个选项来匹配出其他搜索请求，如 “家庭影院”，“家庭理论” 等，但搜索引擎采取了有根据的预测，并映射到最佳搜索请求 “家庭影院”，以最好地满足用户的需求。
|
||||
|
||||
|
||||
|
||||
|
||||
▲ 将搜索请求解析为系统所能理解的最佳状态
|
||||
|
||||
@@ -87,7 +77,7 @@
|
||||
|
||||
**•** 确保透明度和自由度 —— 永远让用户知道系统的当前状态。例如，系统认为用户搜索请求是不正确的，并且显示了一个系统生成的最佳搜索请求，那么就需要与用户进行沟通。同时，用户不能仅仅因为系统的推荐而只向某个预估方向探索，他们需要有自由选择搜索结果的权利。
|
||||
|
||||
|
||||
|
||||
|
||||
▲ 搜索请求反馈的几种类型
|
||||
|
||||
@@ -101,7 +91,7 @@
|
||||
|
||||
—— 凯茜·爱德华兹
|
||||
|
||||
|
||||
|
||||
|
||||
▲ 找出系统中的所有匹配项
|
||||
|
||||
@@ -121,7 +111,7 @@
|
||||
|
||||
当我们计算出需要显示给用户的匹配项时，我们需要定义这些匹配项在界面上的样子。您可以采用一种通用的方法，全面遵循一种设计样式，也可以针对不同匹配集做个性化设计。当你在 Google 上搜索 “冠军联赛” 时，你会看到一张包含所有相关信息的卡片。这正是 Google 为高精准匹配结果展示形式进行的差异化设计。同样地，你可以看到 Google 为演员、电影、疾病、体育联盟等搜索结果采用了特定的展示形式。
|
||||
|
||||
|
||||
|
||||
|
||||
▲ 高精准匹配结果展示形式设计
|
||||
|
||||
@@ -153,7 +143,7 @@
|
||||
|
||||
理论上，发现的匹配可能良莠不齐 —— 满足用户信息需求的匹配和不满足信息需求的匹配都存在。然而在现实中，系统很少以二元的方式进行分类，相反它的结果是两者在一个范围内的混合。为了对这些匹配进行排序，系统现在需要给这些匹配打分。根据这些分数，区分出有各种各样的匹配 —— 非常好、好、不太好、差和非常差。
|
||||
|
||||
|
||||
|
||||
|
||||
▲ 根据匹配项对用户的有用程度将其进行排序
|
||||
|
||||
@@ -187,7 +177,7 @@
|
||||
|
||||
a. 结果呈现形式 —— 定义呈现形式的第一部分是为搜索结果设计默认的样式。如果您的产品需要区别分不同类别的结果，则需要为所有这些类别定义样式。例如，WhatsApp 对联系人和群都使用相同的样式展示，而亚马逊则使用不同的样式来展示鞋子和手机。产品针对不同类别使用不同的样式，以提升其易用性，并满足用户对这些类别的具体需求。并非所有产品都需要用不同的样式来区分类别。
|
||||
|
||||
|
||||
|
||||
|
||||
### 搜索结果展示样式
|
||||
|
||||
@@ -197,7 +187,7 @@ a. 结果呈现形式 —— 定义呈现形式的第一部分是为搜索结
|
||||
|
||||
b. 类别 —— 你的产品可能需要展示多个类别的结果。处理这种情况的两种方法是同构结果和异构结果。当所有来自一个类别的结果集中在一个集群中时，它们被称为同构结果，而如果来自不同类别的结果按照排名一起列出，它们被称为异构结果。
|
||||
|
||||
|
||||
|
||||
|
||||
### 同构和异构结果的几种展示样式
|
||||
|
||||
@@ -207,13 +197,13 @@ b. 类别 —— 你的产品可能需要展示多个类别的结果。处理这
|
||||
|
||||
c. 信息组件 —— 你可能需要向用户传达某些关键信息，把所有这些信息都考虑进去并为它们设计组件。你可以以相同的样式处理所有的问题，也可以区别处理，这取决于你和你的产品。这些信息组件通常显示在结果之前，因为它们可能携带关于用户搜索请求的关键信息，这也许会影响用户的一些决策。这些组件往往很小，还包含快捷和关联性操作的链接和按钮，因为它们通常被视为标题的一部分。
|
||||
|
||||
|
||||
|
||||
|
||||
▲ 信息组件
|
||||
|
||||
d. 绕行组件 —— 很多时候某些产品会利用额外的组件来引导用户的搜索流程，使他们在当前的进程中更发散或聚焦。这些组件通过接近用户的最初意图来发挥作用。它们在用户的搜索过程中可能有用，若无用我们则应该使它们与界面很好地融合在一起以降低用户对这些组件的关注度。这些组件需要与产品保持良好的一致性，但又需要吸引用户的注意力，这就要求这些组件样式和搜索结果组件的样式存在差异，以让搜索结果页看起来不那么单调。它们需要容纳大量的信息，但又不能占用太多的空间，所以这些组件普遍采用水平滚动菜单的形式呈现。根据组件服务的用户类型，可以确定组件在页面中的位置。例如，如果你发现在到达某一滚动深度后用户量开始下降，那么在那里使用绕行组件为用户提供一条沿着他们最初意图的探索路径可能会对这一现象有所帮助。一些产品还将这些组件用于承载广告和赞助的产品。
|
||||
|
||||
|
||||
|
||||
|
||||
▲ 绕行组件
|
||||
|
||||
@@ -225,7 +215,7 @@ e. 分页或无限滚动 —— 现在您已经将所有组件放置到位。页
|
||||
|
||||
当您获得了所有用例所需的所有组件，接下来你需要做的就是把它们按照你想要的顺序放在一起。
|
||||
|
||||
|
||||
|
||||
|
||||
▲ 整合所有组件
|
||||
|
||||
@@ -233,6 +223,6 @@ e. 分页或无限滚动 —— 现在您已经将所有组件放置到位。页
|
||||
|
||||
搜索是一个极不稳定的领域，它会随着用户和产品的变化而不断产生新的问题。当您为了一个用例优化系统时，您还需要评估它可能对整个范围内的其他用例产生的影响，这又增加了解决这个问题的难度。我非常享受在搜索领域工作，希望未来能够继续在这个领域中学习和成长。
|
||||
|
||||
|
||||
|
||||
|
||||
▲ 搜索运行流程
|
||||
@@ -1,7 +1,5 @@
|
||||
- [如何养成良好的灵感收集习惯？](https://www.uisdc.com/2019-inspiration-collection-habit)
|
||||
|
||||
|
||||
|
||||
#### 设计师的灵感资源库
|
||||
|
||||
关于设计师的灵感资源库主要会牵涉到优秀作品（图片形式）、文章、音视频等形式。日常的采集习惯将会大大提升设计师后期的项目设计灵感来源与执行效率，设计做不好其中部分因素就是[灵感素材](https://www.uisdc.com/tag/灵感素材)没有找对。
|
||||
|
||||
Reference in New Issue
Block a user