上一篇我们了解了一些硬件基础以及如何拆解产品需求。本期我们沿着上篇的思路继续和大家分享如何根据拆解出的需求制定相应的设计方案。如何做好可视化大屏业务？

上一篇我们了解了一些硬件基础以及如何拆解产品需求。本期我们沿着上篇的思路继续和大家分享如何根据拆解出的需求制定相应的设计方案。

如何做好可视化大屏业务？京东高手总结了这份方案（上） 在可视化大屏业务中，设计师如何快速了解业务并产出合理的方案呢？

阅读文章 >

本文将从以下五个方面讲解可视化大屏从 0 到 1 的设计过程：

首先，确定画板大小；然后，合理安排模块布局；其次，明确整体界面的设计风格；再次，对业务数据进行梳理、合理安排信息层级以及选择合适的图表去精准的表达业务数据；最后，就是快速的搭建一块可视化大屏。

一、确定画板 前期与客户、产品经理沟通后，得到的有用信息如下：

大屏被安置于室内； 适配电脑 1920*1080 分辨率，大屏原始尺寸：5.8*3.2 米，采用直投形式； LED 屏幕点间距 1.2 毫米。 通过以上信息，我们总结出大屏的色彩明度不易过亮。电脑直投形式按照“投屏电脑的分辨率为 1920*1080”设计就可以保证投屏的清晰度，不会产生拉伸和变形。因为 LED 屏的点间距 1.2 毫米，属于比较清晰的屏幕，所以我们把最小字号设定为 12 像素。

二、规划布局 确定了画板的大小，下一步需要根据产品原型优化页面布局。

一般中心的位置会放置地图，其余的指标按优先级依次在地图周围展开。

首先搭建信息分布框架，根据这个框架往里边填充内容就更规整了。大屏是以数据展示为主，内外边距的设定较小，希望能给数据展示留更多的空间。目前这张屏幕每个模块包括标题、数据指标以及数据分析图表三个部分。

在设计时，首先要让用户获取到有用信息。所以需要考虑哪些信息内容优先级更高。可以参考上篇分享内容

三、设计风格 风格定义主要依据上一篇文章分析得出的行业属性、业务应用场景、地域文化背景以及前期与客户沟通时提到的一些诉求以及审美倾向，甚至于时下流行时政热点、天气等因素都能成为影响整体设计风格的诱因。

通过这些影响因素搜集了相关词汇，最终提取 3 个核心关键词。

① 科技。我们的业务需求是：玉环市泵阀（水暖阀门）产业大脑，产业大脑就是将产业数字化治理。以科技驱动产业升级，是我们业务的核心目标。所以第一个关键词为科技。

② 机械。本屏主要是展示机械设备相关的企业数据，所以，机械被选入了第二个关键词。

③ 玉环。此处结合了地域文化：“ 玉环市 ” 被誉为中国阀门之都，并且玉环市的命名也是源于当地独特的自然现象 “ 晨雾缭绕，形如玉环 ”，我们可以把这种感觉设计在大屏中。

看到这个情绪板后，大家是不是头脑中已经描摹出一副大屏的初步模样了？

将情绪版落实到具体的设计细节有这五个方向：

① 图形：我们选用偏机甲风的造型。与机械硬朗的感觉相比，细节上我们采用圆角做融合；

② 质感：运用科技、光感；

③ 色彩：倾向于科技蓝，并且这这块客户也有明确表示过蓝色更符合他们企业的整体调性。为了丰富画面整体效果，为此增加了黄色、绿为辅助色。

④ 动效：采用流光等光效效果。

⑤ 字体：首选择现代、简洁一点的字体，更符合产业工业的气质；也要考虑后期开发实现。目前莫奈系统中字体有限，需要在这里找到比较符合现代感的字体。标题选用-京东朗正；其他字体选用-思源黑体；数字字体为选用-京东正黑。

四、业务设计 1. 视觉层级划分： 我们针对业务内容（信息维度的优先级）进行了梳理：

第一视觉层级是希望用户能第一眼看到的内容：这里包括：指标名称、数据指标、图表、业务兴趣点。

第二视觉层级是指模块背景层：包括模块 UI-背景、装饰元素、图标、控件等。

第三层视觉级为基础底图层：包括行政区域-边界、地面、地形、建筑、道路、水域、绿地等。

2. 图表的正确使用： 在选定适合的图表表达业务数据之前，首先要明确数据指标所要表达的维度，它是否符合业务场景？它是否合理表达了该数据业务属性？

在这里我对常用的图表做了个归类。在不同维度下，应该选择什么类型的图表，供大家参考。

3. 图表结构

以上是图表的解构图。它包括：图表标题、X\Y 轴线、坐标轴文本、网格线、图例以及图表背景。图表的每一部分都是可以根据界面整体设计风格去重新设计。不过前期请和开发工程师沟通好实现机制。了解图表的构成，还有另外一个好处就是在产品原型内容缺失或者表达不准确时候我们知道如何去调整它。

4. 图表选择

案例分析

上图表是对平台销售趋势进行分析，根据之前的研究表示趋势的图表有折线图、面积图、桑基图。

我们再看下该图表产品原型存在的问题：

X 轴表示时间维度，Y 轴上数据缺失； 悬浮层要表达 3 个维度的信息：该时间点下的订单量和销售额； 该图表没有展示图例信息； 桑基图应用于数据维度趋势比较复杂的情况下使用，而面积图除了可以展示数据趋势以外，还可以通过面积对比不同的数据量，但是订单量和销售额不在同一个分析维度，因此不需要对比。 所以最后我们还是采用了更简单易懂的折线图。

5. 快速搭建

可以分为以下两步：

第一步：设计师用我们长期积累的设计组件快速搭建界面；

第二步：设计师/研发人员用京东城市的 数据可视化 引擎—莫奈去快速实现界面效果。

上面这张屏正是采用了设计组件搭建而成。组件化不仅在提升设计师设计效率方面有着很重要的意义，还能够在项目长期迭代和多人协同完成设计方案的情况下保证设计的一致性。从而节省了更多的时间让我们去打磨设计细节。

以下附上我们还在不断完善的 Rainbow D（京东智能城市设计语言系统）。本设计系统包含了可视化组件库、中后台组件库以及相应的设计规范供大家参考。

网址： http://dev-uc.urban-computing.cn/find-react/index-cn

如果有项目周期特别紧张的情况下，客户想要快速看到线上效果，设计师也可以协助产品在莫奈系统上（京东城市数据可视化引擎）快速搭建产品原型。以下为在莫奈系统中搭建的大屏。

在莫奈系统中可以自定义配置图表、地图、文字，也可以嵌入视频、动态图片等

五、总结 我们简单回顾一下 可视化大屏设计 方案制定的流程：

首先在明晰设计需求为前提的情况下，根据实际应用场景确定画板大小、根据业务数据优先级合理的规划布局和信息层级；

再根据行业属性、业务场景、客户倾向性等因素确定适合 大屏设计 风格；

大屏风格确定之后，需要从数据分析维度，去选定最适合表达业务数据的图表；

接着，就是采用设计组件库和莫奈可视化引擎去快速搭建完成可视化大屏。

欢迎关注作者微信公众号：「JDTDA」

前言文字是设计中的重要组成部分，就像我们平时看到的海报，里面各种被精心设计过的字体经常会成为视觉焦点，以醒目且个性化方式传达出内容的精髓，最后达到的效果事半功倍。虽然在 UI 设计中不需要对文字过分设计，但图文作为主要的传播途径，字体的使用是否规范合理将直接影响着信息传播的优先级、重要程度以及用户的接收质量和效率...

前言

文字是设计中的重要组成部分，就像我们平时看到的海报，里面各种被精心设计过的字体经常会成为视觉焦点，以醒目且个性化方式传达出内容的精髓，最后达到的效果事半功倍。

虽然在 UI 设计中不需要对文字过分设计，但图文作为主要的传播途径，字体的使用是否规范合理将直接影响着信息传播的优先级、重要程度以及用户的接收质量和效率。所以不管是平面设计还是 UI 设计，字体都是不可忽视的核心元素，做好对文字信息层级的处理，对用户的视觉体验有着至关重要的作用。

互联网经过多年的发展，也积累的很多的专业字体知识，设计师应该去了解字体的性格及特征并将其合理运用，才能将信息更清晰的传达给用户。本文将围绕着字型、字号、字距、字重等几个属性，针对各方面深度解析，希望能够帮到大家。

相关好文回顾：

8000字干货！超全面的 UI 字体排版设计指南 文字是人类文化的重要组成部分，经历了数千年的发展和演变，字体排版已经积累了非常多的专业性知识。

阅读文章 >

一、字体的基本特征 1. 使用前的思考

文字是信息内容的载体，能最直接的将信息清晰的表达出来，字体则表现了文字的外在特征，合理的使用这些属性特征不仅能清晰准确的传递信息、用于特定场景还能赋予情感表达，展现出独特的魅力，例如：健身、器械类的产品使用的字体通常会给人一种力量、刚硬、壮实的感觉，而女性专用产品字体则显的纤细、苗条。

2. 为什么要使用黑体

不同类型的字体传达出不同的气质，综合来讲，字体可分为黑体、宋体、圆体、书法体这四类，平时大家看到的各种形形色色的其他字体，基本是通过这几类延伸而来。

在 UI 设计中，绝大多数的文字排版用的是黑体，诸如思源黑体、阿里巴巴普惠体、苹方（ios）、微软雅黑（PC web）等都是标准的黑体。另外，特定场景如瓷片区、卡片、banner、专题头图、引导页、闪屏等，对于用什么字体不会有太大的限制，在避免商用侵权的前提下符合产品气质即可。

黑体字的笔画横平竖直、粗细均匀且字面呈正方形，一般来说，没有衬线的字体都可以称作黑体。黑体结构清晰、简洁有力，能让界面显得庄重还附有现代感，虽然气质上没有太大的个性化、但可塑性很强，这也是在 UI 设计中、黑体一直很受青睐的原因，无论是标题、正文、提示等使用场景都可以作为首选，对老设计师能多一个选择、新手设计师也不易犯错。

3. iOS 与 Android 的区别

iOS 与 Android 是移动设备的两大系统，虽然很多设计师用一稿适配两端、遇到特殊页面也只是单独拎出来微调即可，但对于中、大型的互联网公司则很难满足优质用户体验中的部分细微差别，例如：iOS 的苹方字体在 Android 设备中无法高度还原、预留的文字数量上限位置无法显示完整等，都会影响用户体验。

此外，iOS 和 Android 都有自己独立的设计规范，大家有时间的可自行查看，本文只对字体规范作基本了解。

iOS 使用的是「苹方」字体，提供了 6 个字重，英文字体为「San Francisco」；Android 使用的是 Google 联合 Adobe 发布的「思源黑体」，为充分满足设计要求，提供了 7 个字重，英文字体为「Roboto」。

此外，如果界面中涉及的数据较多，数字使用 DIN 字体也是不错的选择，字体外形较长，易用且耐看，很适合数据统计展示，不过这款字体商用的话需要收费的。

二、字体的基本属性 1. 字体大小

字号的大小决定信息的层次和权重，不规律的使用字号会让页面信息杂乱，不利于用户阅读。在设定字号规范时，需特别注意最小值和递增值。

最小值决定信息的可读性，以 2 倍图为例，iOS11 系统将最小字号规范为 11pt（22px），但很多产品依然将最小字号设定为 20px，甚至部分产品将 18px 的数字加粗运用在标签中，所以最小字号的设定并没有固定数值，原则上不影响用户的浏览就行。笔者建议最小字号不要低于 20px，在设计过程中，可以通过设备实时预览，因为同样的字号在不同的环境、色值、背景下，其视觉效果都有所区别。

其次，递增值决定着信息层级区分的明显程度，遵循字号越大、递增值越大的原则，常用字号数量控制在 6 种左右。iOS 和 Android 都是采用的 2 倍数栅格系统，为了让字号的层级区分更明显，字号设定要避开奇数且最小递增值不要低于 4px，下面举几个常见的例子：

①：20、24、28、32、40、48、64...

②：20、24、30、36、42、48、64...

③：22、26、30、34、40、48、60...

...

规范好的字号该如何使用，还得根据界面中的实际场景来决定，如下图：

2. 字符间距

字间距是指两个字符之间的横向间隔距离，在界面排版中，除了西文的字间距调整需求较大外，中文通常只保持默认，只有少数场景才会手动调整，且没有固定的规律，保持视觉舒适状态即可。例如：banner、界面大标题、重要数字（取件码）显示等。

3. 行高

行高是指包围在字体之外的隐形边框，一个字体元素的的行高等于文字上边框+下边框+字号的高度之和。

西文字体因高度的参差不齐，本身就能制造出视觉上的上下空间，通常行高为字号的 1.2 倍，而中文字体没有上下间隙的延伸，行高则较大，一般在 1.5 倍左右，如果字号较小且折行较多，行高甚至能达到字号的 2 倍。

4. 字重

字重指的是字体的粗细，不同的字重能体现出不同的层级关系，给用户的视觉感受也截然不同。

像苹方、思源、阿里巴巴普惠这些家族字体一般都会有极细体、细体、常规体、黑体、粗体等多个字重，在 UI 设计中，实用的就常规体、加粗两个字重，再通过色彩、字号使其成为对立关系，明显的拉开文字内容层级后，方能保持良好的浏览体验。

5. 全角与半角

这种主要针对标点符号，以英文字母为标准，半角是指一个符号占用一个标准字符（英文）的位置，全角则是占用两个字符位置。

众所周知，中文使用都是全角、英文使用半角，并且会随着中/英文的切换而自动改变，但有时候难免会操作失误让页面中的某处信息看着怪怪的却不明所以、另外中文信息中的时间/日期也大多会使用半角符号，所以设计师对此有一定的了解时候、，在处理这些细枝末节就能做到收放自如。

三、不同场景下的属性参考 在色彩规范中，除主/辅助色之外，设计师还会提供 3~4 个等级的配色，如通用的#333（标题）、#666（正文）、#999（提示）、#ccc（占位符），这也是 UI 通用的文字色用色规范，不同的字号需用色规律。

如果想进一步延展，可以增加一点品牌色，也可以使用#000（纯黑）调整不透明度来体现文字色彩层级，深色模式中很常见，下面我们一起来了解几个常见的使用场景。

1. 标题

标题的主要作用是让用户以最快的速度了解界面主要信息，需要时刻吸引用户的注意力，例如 APP 中的导航栏、模块标题、内容标题、数据统计等。需要简单明了且有冲击力，字号一般会控制在 30px 以上并加粗显示，直接使用一级色值（#333）即可。

在特殊场景下，标题也可以使用主体色值，但一定要注意容器背景与其他信息色彩的协调，不然花里胡哨的还不如用回一级色值。

2. 正文

正文并不需要吸引用户注意力，它主要是提供标题的注释或内容的详细说明。 当白色背景文本内容过多、在需要用户仔细阅读的情况下，一定要注意颜色不能太深，不然显的主次不分，还有些刺眼，这里推荐 26~30px 字号使用二级文字（#666）色值。

3. 提示语

提示类文字使用场景就相对较多，它除了给用户展示当前状态，还能给予合理的引导，促进用户进行下一步操作。常见使用色值为三级（#999）、四级色值（#ccc），例如界面中的操作注意事项、表单占位符等。字号一般为 24px，因使用场景不同，也会有特殊的存在，例如表单中占位符的字号会跟随输入后的字号统一。

4. 超链接

超链接在字号、色值上没有一定的限制，但需要一个特定的辅助元素/属性来提示用户这是可点击的。

例如 APP 登录页面，找回密码、注册、获取验证码等，大部分都是用主体色、图标（右箭头）等方式强化可操作入口，而 PC 端网页中超链接的表现方式，下划线、蓝色字体、>>这三种方式几乎能涵盖所有。

5. 其他

规范并非不可更改，它只能帮助设计师在大部分使用场景中减少设计出入并提高产出效率，但总有一些使用场景需特殊对待，字体也不例外，如以下场景：

APP金刚区入口字体大多使用24px，一级色值（#333）； 底部Tab栏字体未激活使用浅色，激活后切换为一级色值（#333）或主体色； 重量级的提示语用红色色值； 按钮中的文字跟随按钮的等级权重变化； 深色容器标签的文字反白； ......

四、字体使用基本原则 1. 符合产品气质

虽说黑体（苹方、思源、阿里巴巴普惠）是 UI 设计中的首选字体，但这也仅仅只是建立在不出错的的情况下、满足基本条件而选择，如果想表达出产品的类型、情感、气质等品牌属性，在不影响用户识别的前提下，可选择一款符合产品气质的字体，打造出差异化的浏览体验，对于追求完美的 APP 来时是一个不错的解决方案。

例如，部分艺术、女性类的 APP 会选择使用宋体，整体看起来有一种高端、时尚且优雅的感觉。

整体界面使用特殊字体还是相对较少，为了更好的体现出产品属性/风格，将其融入不同的模块及使用场景，会让产品更有特色，例如 banner、瓷片区、大标题、头图等，对用户的视觉吸引力能得到很大提升。

2. 使用同一家族字体

在一个 APP 中，坚持使用同一个家族的字体，对标题、正文等文字信息有一个统一的视觉规划，这样有助于建立起体系化的设计思路，避免在开发落地时存在一致性问题，减少开发与设计的出入。

笔者曾见过这样的设计师，界面中原本用了「苹方」字体，在一个特殊场景下，「苹方」的粗体字重无法满足大标题的使用需求，于是将大标题单独改为「阿里巴巴普惠体」的最大字重。

从表面上看，上述的设计需求是满足了，但稍有不慎就会成为没有价值的艺术品，首先，单独一处使用不同家族的字体，会影响整体视觉的一致性；其次，若程序没有嵌入另外的字体，产品落地后其视觉效果毫无改观，且更没有必要为了某个场景的使用要单独嵌入几十到几百兆的家族字体，让应用安装包无故加大。在设计中，有时候在解决某个问题时，解决方案并非无可替代，加粗字体亦是如此。

另外，在可用性、实用性强且必要的情况下，并非不能再增加一个家族字体，例如所有标题系列使用「阿里巴巴普惠体」、数字系列都使用「DIN」，前提是一定要形成体系化，并非某一处的使用。

3. 明确的信息层级

在同一个界面中，字体色值、字号、字重等，都是用于区分信息层级，尽量不要使用过多的层级，避免层级混乱影响信息浏览。

在信息层级处理方式的四个基本原则中，「对比」就是将复杂的信息通过元素的各种属性以不同的视觉效果呈现，来体现信息节奏感，并非是为了好看而随意给文字赋予各种属性及样式效果。

五、UI 设计需注意的问题 1. 避头尾的使用

避头尾使用在文字内容较多的折行场景中，主要处理标点符号刚好出现在一行文字的开头或结尾时，通过自动调整单行的字符间距、在视觉上将标点符号前移或后移。

在新闻资讯类应用的详情页中，避头尾使用的较多，用以避免头/尾存在标点符号造成视觉重量不一、信息参差不齐的问题出现。

2. 反差体现层级

很多时候，为了区分信息层级，首先想到的是利用不同的字号、字重来体现，这当然没有问题，但如果结合字体的明暗关系（灰度色值等级）则效果更佳。 如下图：标题一级色值（#333）、正文二级色值（#666）、时间日期三级色值（#999）。

3. 备用字体

备用字体只会运用在 web 页面中，如果网站需要一款特殊的字体才能彰显其独特的气质、同时又担心用户在某些设备中因为没有这个字体而无法浏览其效果，则会另外再选择一款相近的通用字体作为备选，以弥补视觉体验上的损失。

如果字体包不大，也可以让开发将其放在服务器端，这样能让所有用户都能看到相同的效果，省去了不少麻烦。

4. 确保可读性

可读性应该是选择字体的首要元素，虽说很多文字我们都可以从前后字义、联想词等角度将自己的理解补充完整，但完全没有必要。

UI 设计不像海报那样融入较多的艺术成分，更需要的是内容清晰、表意明确、高效率的传达，任何增加用户阅读、理解成本的做法都应该规避掉，例如过于变形的可爱风格、书法手写体等都尽量少用。

六、结语 文本内容是 UI 界面中占比较多的元素之一，设计师需要对其基本属性及使用场景有一个清晰的了解，使用的是否恰当取决于我们对字体的选择。虽说在 UI 领域，字体模块类的文章比较少（更多是文字、字库的设计），但它在设计规范中的地位是举足轻重，选好一款字体对设计来说是锦上添花。

关于 UI 界面中的字体，其实没有太多的讲究，也没必要整得花里胡哨，重点在于排版过重中注意信息层级的划分以及有足够的视觉舒适度即可。

欢迎关注作者微信公众号：「能量眼球」

编者按：AI画画一直是2022年的热门话题，但至今仍鲜有实战案例。本文作者把AI绘画的成果融入了双11的电商设计中，不仅效果炸裂，而且效率极高。前段时间，有个朋友突然问我关于 AI 的问题，我们一般会用 AI 来干嘛？

编者按： AI画画 一直是2022年的热门话题，但至今仍鲜有实战案例。本文作者把 AI绘画 的成果融入了双11的 电商设计 中，不仅效果炸裂，而且效率极高。

前段时间，有个朋友突然问我关于 AI 的问题，我们一般会用 AI 来干嘛？刚好，我们在双十一大促中就应用了 AI 进行创作，这里就浅聊下 AI 创作。

首先，我们来看看时下最流行的两个 AI 绘画工具 Midjourney 和 stable diffusion 生成的一些图片效果。

由 Midjourney 完成

由 stable diffusion 完成

是不是很震撼？

其实，只需要输入一段文字描述，加上艺术风格和艺术家的名词，即可实时快速生成精美的绘画。当然，prompt 提示关键词便是 AI 绘画中最有价值的部分。

关于 AI，在 2022 年的进化是巨大的，也是当下争议非常大的一个话题。

如今 AI 已经涉及到各个领域；在绘画领域，AI 的应用发展的也已经越来越成熟，相对应的，作为设计师，如何将 AI 应用到商业设计领域是我们最关注的问题。

目前来看，市面上鲜有将 AI 应用到商业设计领域的案例，因此，尝试将 AI 首次应用电商大促设计领域也是我们最大的挑战。通过网上大量资料和研究学习，针对 AI 现有的几个工具进行了研究和使用，我们挑选了 Midjourney、Stable Diffusion 和 runway 等几个工具。

关于AI绘画工具的详细介绍：

人工智能快速出图！盘点 4 款人气超高的 AI 绘画神器 大家好，我是和你们聊设计的花生~ 有关注 AI 绘画领域的小伙伴可能注意到，国内已经出现了能直接使用中文提示词生成 AI 图像的工具了，这就进一步降低了我们进入 AI 绘画世界的门槛，对设计师和创意工作者来说无疑是好消息。

阅读文章 >

手残党也能成为艺术家！4个热门AI绘画平台的创作经验总结 AI画画，无疑是当下最火热的话题之一。

阅读文章 >

在风格上，我们希望尝试大促设计艺术化，尽可能摆脱陈列感强、用户视觉疲态的常规化设计形式。风格确定后我们就开始具体的操作了。

一、从 0 到 1 的 AI 工作流 首先，简单用 PS 合成一张我们定义好的风格图，如下

然后，用这张效果图在 stable diffusion 反向生成关键词，关键词中会包含图中元素的相关描述词。

第三，应用这些关键词训练出 AI 艺术化模型包。

为了赋予 AI 更强的艺术化，我们将 200 多张艺术化 3D 风格的参考图提供给 AI，得到一个 AI 通过深度学习后的一个艺术化模型包，这时这个模型包便具备了我们最初定义的风格化。

通过关键词，再次使用艺术化模型包，调整 Steps、method 和 CFG scale 等重新测试后生成 30 张图，就基本具备了我们想要的艺术化效果，接下来便是让它调整色调和判定产品，将产品融入到场景中。

从产品内容、细节、环境氛围、色彩感觉和构图等进行描述，然后我们通过这些生成的描述词，进行适当的删减调整测试，将产品和部分细节关键词修改。

最后，通过调整后大概生成了 20 张图，再经过一些微调就基本可用了。

基于 AI 的无限可能性，我们利用新训练的模型包和开源模型包进行对比测试，针对其他的会场进行了生成。

根绝实际文案和产品布局需要，选择空间感和元素更适合的 3D 艺术化模型包生成的图进行后期合成，完成数码会场视觉。

可以发现，通过 3D 艺术化的模型包生成的风格和细节在理解艺术化需求上更加智能和成熟，在这个时候 AI 在效率上已经可以居于无限可能大量生产艺术化的效果了。获得我们想要的风格化图片后，增加大促相应的产品和主题，就可以直接在线上使用了。

二、AI 技术的加入对业务带来的影响 当前大促的会场主视觉设计，AI 技术的加入，使得沟通成本大幅降低，输出效率和精准度大幅提升，粗略统计，同等条件及要求的前提下，AI 的算力可以达到 3 秒/张 ，1 小时约可输出约 1200 张高质量设计方案。

会场商详到达率 20.5%，环比同期提升 4.3pt；首页包站日均点击率环比提升 149%；包站日均点击率 2.11%，环比提升 74.4%。

三、更多可能性 为了更多可能性，将上述得到的关键词也在 midjourney 上尝试，可能是因为 midjourney 与 stable diffusion 的 prompt 不太一样，生成的结果缺少了艺术化的感觉，但是整体效果还是不错的。

通过修改关键词，对数码的视觉稿也进行了生成，可能是 prompt 不够准确，尽管效果不错，但是构图上不是很合适。

1. 对于 AI 未来的发展

网上一直有这么两个争论，AI 到底是辅助画师还是取代画师？画师对于 AI 工具应该是抵制还是接受？网上关于取代的言论，假设指的是 Novel ai、stable diffusion 这类 AI 代替了许多的约稿需求，并以此衍生出了对未来 AI 会取代人类工作的设想，从生产力的角度看，可以想下假设画师驾驭了 AI 绘画这个工具后对整个行业的正向影响，对艺术领域的创新将会是超前的。技术的发展可以解放生产力，生产工具颠覆生产关系，AI 的影响也将会是革命性的，但取代人类画师并不是 ai 的目的，这里提出 AI 是否取代的话题，主要也是对大众对于“ai 是否会取代人类画师”这一论点作出浅浅的分析。

三、资源分享 AI 工具网页版链接：

① Disco Diffusion： https://colab.research.google.com/github/alembics/disco-diffusion

教程链接分享： https://www.bilibili.com/video/BV1b5411X7MM/

② Midjourney： https://discord.com/channels/662267976984297473/@home

教程链接分享： https://www.bilibili.com/video/BV16d4y1A7Zq

Midjourney 社区： https://www.midjourney.com/app/

③ Stable Diffusion： https://www.bilibili.com/video/BV1rd4y1k7oQ （这个是本地配置的整合包，需要 wendow 系统的 N 卡才可使用，感谢用爱发电的 UP 主）

教程链接分享： https://space.bilibili.com/250989068

④ DALL·E： https://labs.openai.com/waitlist

⑤ Tiamat： https://tiamat-ai.feishu.cn/share/base/shrcn2uXL8wNiveykIFYqWSzsPf

⑥ 网页端的 Runway 人工智能工具： https://app.runwayml.com

关于版权

针对 Ai 的训练和图片的使用，假如是因为画风问题，在版权上是无法对某一种特定风格申请版权的，100TB 的训练数据压缩成一个 4GB 甚至 1GB 的模型，从 AI 的底层生成原理上看，Ai 的作画方式也不能算是缝合，而是创造了全新的图像，这是一种变革，而且也是技术的发展不可避免的事情。 目前 SD 开源模型的授权协议是 Creative ML OpenRAIL-M license，在非有害目的的条件下，允许商用和非商用。自己部署已经开源的 Stable Diffusion，也就是说用的是自己的 GPU 资源，所生成图片（Output）的著作权，Licensor（Stability.ai）claims no rights。图片著作权和如何对外授权都归你自行定义，Stability.ai 不做约束，也不会共享你的著作权和收益。 最后 当版权的问题达成共识后，AI 作图便有可能成为划时代的辅助工具。AI 作图已经可以确定是一股不可阻的潮流，技术不断进化，趋势发展迅猛，未来对于 AI 你是接受还是抵触呢？

版权归原作者所有如有部分权属不清导致的侵权请联系我们，我们将第一时间删除。

本文梳理了8个常见的打光方式，结合清晰的手绘图例，让知识点一目了然。更多手绘技法：大神总结！学插画必知的6种构图小技巧构图决定了整体画面的基调，是绘画的一个关键知识点。

本文梳理了8个常见的 打光 方式，结合清晰的手绘图例，让知识点一目了然。

更多 手绘 技法：

大神总结！学插画必知的6种构图小技巧 构图决定了整体画面的基调，是绘画的一个关键知识点。

阅读文章 >

编者按：AI画画一直是2022年的热门话题，但至今仍鲜有实战案例。本文作者把AI绘画的成果融入了双11的电商设计中，不仅效果炸裂，而且效率极高。前段时间，有个朋友突然问我关于 AI 的问题，我们一般会用 AI 来干嘛？

编者按： AI画画 一直是2022年的热门话题，但至今仍鲜有实战案例。本文作者把 AI绘画 的成果融入了双11的 电商设计 中，不仅效果炸裂，而且效率极高。

前段时间，有个朋友突然问我关于 AI 的问题，我们一般会用 AI 来干嘛？刚好，我们在双十一大促中就应用了 AI 进行创作，这里就浅聊下 AI 创作。

首先，我们来看看时下最流行的两个 AI 绘画工具 Midjourney 和 stable diffusion 生成的一些图片效果。

由 Midjourney 完成

由 stable diffusion 完成

是不是很震撼？

其实，只需要输入一段文字描述，加上艺术风格和艺术家的名词，即可实时快速生成精美的绘画。当然，prompt 提示关键词便是 AI 绘画中最有价值的部分。

关于 AI，在 2022 年的进化是巨大的，也是当下争议非常大的一个话题。

如今 AI 已经涉及到各个领域；在绘画领域，AI 的应用发展的也已经越来越成熟，相对应的，作为设计师，如何将 AI 应用到商业设计领域是我们最关注的问题。

目前来看，市面上鲜有将 AI 应用到商业设计领域的案例，因此，尝试将 AI 首次应用电商大促设计领域也是我们最大的挑战。通过网上大量资料和研究学习，针对 AI 现有的几个工具进行了研究和使用，我们挑选了 Midjourney、Stable Diffusion 和 runway 等几个工具。

关于AI绘画工具的详细介绍：

人工智能快速出图！盘点 4 款人气超高的 AI 绘画神器 大家好，我是和你们聊设计的花生~ 有关注 AI 绘画领域的小伙伴可能注意到，国内已经出现了能直接使用中文提示词生成 AI 图像的工具了，这就进一步降低了我们进入 AI 绘画世界的门槛，对设计师和创意工作者来说无疑是好消息。

阅读文章 >

手残党也能成为艺术家！4个热门AI绘画平台的创作经验总结 AI画画，无疑是当下最火热的话题之一。

阅读文章 >

在风格上，我们希望尝试大促设计艺术化，尽可能摆脱陈列感强、用户视觉疲态的常规化设计形式。风格确定后我们就开始具体的操作了。

一、从 0 到 1 的 AI 工作流 首先，简单用 PS 合成一张我们定义好的风格图，如下

然后，用这张效果图在 stable diffusion 反向生成关键词，关键词中会包含图中元素的相关描述词。

第三，应用这些关键词训练出 AI 艺术化模型包。

为了赋予 AI 更强的艺术化，我们将 200 多张艺术化 3D 风格的参考图提供给 AI，得到一个 AI 通过深度学习后的一个艺术化模型包，这时这个模型包便具备了我们最初定义的风格化。

通过关键词，再次使用艺术化模型包，调整 Steps、method 和 CFG scale 等重新测试后生成 30 张图，就基本具备了我们想要的艺术化效果，接下来便是让它调整色调和判定产品，将产品融入到场景中。

从产品内容、细节、环境氛围、色彩感觉和构图等进行描述，然后我们通过这些生成的描述词，进行适当的删减调整测试，将产品和部分细节关键词修改。

最后，通过调整后大概生成了 20 张图，再经过一些微调就基本可用了。

基于 AI 的无限可能性，我们利用新训练的模型包和开源模型包进行对比测试，针对其他的会场进行了生成。

根绝实际文案和产品布局需要，选择空间感和元素更适合的 3D 艺术化模型包生成的图进行后期合成，完成数码会场视觉。

可以发现，通过 3D 艺术化的模型包生成的风格和细节在理解艺术化需求上更加智能和成熟，在这个时候 AI 在效率上已经可以居于无限可能大量生产艺术化的效果了。获得我们想要的风格化图片后，增加大促相应的产品和主题，就可以直接在线上使用了。

二、AI 技术的加入对业务带来的影响 当前大促的会场主视觉设计，AI 技术的加入，使得沟通成本大幅降低，输出效率和精准度大幅提升，粗略统计，同等条件及要求的前提下，AI 的算力可以达到 3 秒/张 ，1 小时约可输出约 1200 张高质量设计方案。

会场商详到达率 20.5%，环比同期提升 4.3pt；首页包站日均点击率环比提升 149%；包站日均点击率 2.11%，环比提升 74.4%。

三、更多可能性 为了更多可能性，将上述得到的关键词也在 midjourney 上尝试，可能是因为 midjourney 与 stable diffusion 的 prompt 不太一样，生成的结果缺少了艺术化的感觉，但是整体效果还是不错的。

通过修改关键词，对数码的视觉稿也进行了生成，可能是 prompt 不够准确，尽管效果不错，但是构图上不是很合适。

1. 对于 AI 未来的发展

网上一直有这么两个争论，AI 到底是辅助画师还是取代画师？画师对于 AI 工具应该是抵制还是接受？网上关于取代的言论，假设指的是 Novel ai、stable diffusion 这类 AI 代替了许多的约稿需求，并以此衍生出了对未来 AI 会取代人类工作的设想，从生产力的角度看，可以想下假设画师驾驭了 AI 绘画这个工具后对整个行业的正向影响，对艺术领域的创新将会是超前的。技术的发展可以解放生产力，生产工具颠覆生产关系，AI 的影响也将会是革命性的，但取代人类画师并不是 ai 的目的，这里提出 AI 是否取代的话题，主要也是对大众对于“ai 是否会取代人类画师”这一论点作出浅浅的分析。

三、资源分享 AI 工具网页版链接：

① Disco Diffusion： https://colab.research.google.com/github/alembics/disco-diffusion

教程链接分享： https://www.bilibili.com/video/BV1b5411X7MM/

② Midjourney： https://discord.com/channels/662267976984297473/@home

教程链接分享： https://www.bilibili.com/video/BV16d4y1A7Zq

Midjourney 社区： https://www.midjourney.com/app/

③ Stable Diffusion： https://www.bilibili.com/video/BV1rd4y1k7oQ （这个是本地配置的整合包，需要 wendow 系统的 N 卡才可使用，感谢用爱发电的 UP 主）

教程链接分享： https://space.bilibili.com/250989068

④ DALL·E： https://labs.openai.com/waitlist

⑤ Tiamat： https://tiamat-ai.feishu.cn/share/base/shrcn2uXL8wNiveykIFYqWSzsPf

⑥ 网页端的 Runway 人工智能工具： https://app.runwayml.com

关于版权

针对 Ai 的训练和图片的使用，假如是因为画风问题，在版权上是无法对某一种特定风格申请版权的，100TB 的训练数据压缩成一个 4GB 甚至 1GB 的模型，从 AI 的底层生成原理上看，Ai 的作画方式也不能算是缝合，而是创造了全新的图像，这是一种变革，而且也是技术的发展不可避免的事情。 目前 SD 开源模型的授权协议是 Creative ML OpenRAIL-M license，在非有害目的的条件下，允许商用和非商用。自己部署已经开源的 Stable Diffusion，也就是说用的是自己的 GPU 资源，所生成图片（Output）的著作权，Licensor（Stability.ai）claims no rights。图片著作权和如何对外授权都归你自行定义，Stability.ai 不做约束，也不会共享你的著作权和收益。 最后 当版权的问题达成共识后，AI 作图便有可能成为划时代的辅助工具。AI 作图已经可以确定是一股不可阻的潮流，技术不断进化，趋势发展迅猛，未来对于 AI 你是接受还是抵触呢？

版权归原作者所有如有部分权属不清导致的侵权请联系我们，我们将第一时间删除。

本文梳理了8个常见的打光方式，结合清晰的手绘图例，让知识点一目了然。更多手绘技法：大神总结！学插画必知的6种构图小技巧构图决定了整体画面的基调，是绘画的一个关键知识点。

本文梳理了8个常见的 打光 方式，结合清晰的手绘图例，让知识点一目了然。

更多 手绘 技法：

大神总结！学插画必知的6种构图小技巧 构图决定了整体画面的基调，是绘画的一个关键知识点。

阅读文章 >

在可视化大屏业务中，设计师如何快速了解业务并产出合理的方案呢？我们把日常工作做了梳理，为了大家有更好的阅读体验，文章将拆分为需求理解与设计方案制定两部分，本篇介绍可视化大屏业务之——需求理解。可视化设计相关干货：万字干货！

在可视化大屏业务中，设计师如何快速了解业务并产出合理的方案呢？我们把日常工作做了梳理，为了大家有更好的阅读体验，文章将拆分为需求理解与设计方案制定两部分，本篇介绍 可视化大屏 业务之——需求理解。

可视化设计 相关干货：

万字干货！写给设计师的数据可视化设计指南 设计师在工作中经常会遇到下面这种情况： 自己辛辛苦苦、加班加点、没日没夜做出来的数据分析报告交到 boss 们手上，结果看不懂，全程黑人问号脸。

阅读文章 >

一、大屏数据可视化设计基础 1. 概念以及特点

大屏数据可视化设计，是以大屏为显示载体，用直观形象的图形语言表达抽象复杂的数据；让用户易看易懂，帮助他们辅助决策等等。

大屏数据可视化设计具有以下特点：硬件种类多且各家尺寸和比例不一，具有独特性；业务涉及行业广、场景多且空间有限、具有专业性；设计视觉要求炫酷，需掌握多种技能，并且运用设计语言准确的表达出来，具有综合性。

2. 需要具备的知识体系

在大屏数据可视化设计，设计师需要具备哪些能力呢？本文将从大屏硬件环境、业务理解力、视觉表现力三个方面做陈述与说明。

大屏硬件环境，需要了解大屏显示终端的硬件各种类型：DLP、LCD、LED 以及特性。针对不同物理硬件的特点，我们采取不同的设计方法；设计前必须了解大屏比例尺寸。例如：拼接屏单屏分辨率是 1920*1080。那么，大屏总分辨率宽是 1920*N，高是 1080*N（其中 N 代表横向和竖向拼接屏个数 ）；

除此之外，大屏的物理环境还受终端硬件特性、坐席最佳视距，室内采光等因素的影响。因此，我们在设计的时候，会根据这些因素考虑字号的大小和整体屏幕的色彩明度。

业务理解：大屏数据可视化设计因为涉及的业务领域较为广泛，所以需要设计师具备一定行业基础知识和业务积累，再把这些业务知识应用到实际的大屏场景的设计中去，学会用合理的设计表达来讲故事。

讲好故事前提是需要对业务有深刻的理解，我们可以通过拆解业务目标、分析并重组业务模块进行设计。正确的选择合理的指标，准确的采用形象的图表，用大数据之美来帮助用户快速理解业务的核心内容。

以笔者多年的设计经验，大屏数据可视化设计多应用在：企业展示、实时监控、辅助决策、战略指挥、城市运行、领导驾驶舱、运营汇报、展会中心等场景。所以，针对以上场景的应用，我们平时应该多多关注这些方面的信息，做好必要的知识沉淀。

除此，设计师还需要具备综合的设计能力。不仅仅只是具备基本的界面设计能力，还需要具备三维建模、渲染动画、动效设计等，数字孪生是未来的发展方向。因此就要求设计师必须熟悉地理信息和三维引擎等技术。

二、大屏数据可视化设计需求拆解 1. 初步沟通后，如何拆解需求

以下，我们通过一个具体的需求事例来具体说明

我们先看一段产品经理和设计师之间的对话：

通过以上对话，我们可以针对需求中的关键字进行挖掘，获取有用信息（隐藏需求）。

例如：

“某地”就可以考虑采用代表该地域特征物产或地标建筑，可准备相关地域问文化素材或矢量地图；

“产业大脑”自带行业属性。设计师可以提前准备下与此相关的行业知识。

“大屏电脑都用”说明需要适配大屏端和 PC 端。所以，在设计时，需要考虑大屏尺寸比例与电脑尺寸比例是否一致；

“ LED ” 表明硬件终端类型，需要了解 LED 屏幕像素间距大小，设计时可考虑字体规范；

“ 5.8m*3.2m ” 有了物理尺寸可以换算像素以及比例，方便设计师确定界面尺寸大小；

“ 紧急！明天要 ” 说明任务紧急，设计需要快速，可考虑采用已有组件快速搭建；

通常我们拿到产品经理的需求原型，先熟悉整体的业务由那些各个模块构成、各个模块之间的主次关系以及交互行为等。

以上原型主要模块有：

顶部：主标题 中间：地图展示企业分布区域、预警企业以及预警详情 （主场景） 左右两侧和底部：图表展示产业相关数据报表 （次要） 模块布局：“回”字型布局 层级方式：底图为地图，上层浮层为图表 以上初步了解原型之后，我们可以通过参加产品原型评审会议进一步详细了解需求，有问题可以再评审会上提问交流解惑。

我们对需求了解清楚了，需要进一步对各个模块需求分析理解：

标题：要言简意赅，如冗余可进行优化； 指标：指标应考虑名称、指标数据展示多情况下保障足够的扩展空间； 图表：准确选用合理表达业务内容的图表； 例如：全链营销模块 标题：全链营销 指标：指标名称，2~6 个字符，指标数值，1~6 位数； 图表：业务表达，近一年销售量和订单量的趋势变化，选用两条折 线图表达；维度：月份 1~12 月；度量：销售额 1~4 位数，单位万元；订单量：1~4 位数，单位：件 通过分析理解，我们可以更深入的理解业务模块的内容，以便于我们着手开始设计：

在对业务理解中，我们先以讲故事的方式，帮助用户理解业务场景。比如：某市的领导驾驶舱大屏设计，哪部分数据是最重要的，用户最关心的内容是什么？在设计的时候，设计师会着重刻画这部分数据内容的展示。

我们可以通过行政区域的下钻或者界面数据的联动等交互分主次，分层级的让用户知晓业务重要数据指标和内容；

在设计中我们运用对比等形式，图表准确的表达，能够让用户一目了然，易看易懂，从而提升用户体验。

在对需求理解的这个过程中，我们不断的分析、拆分、重组各个业务的模块，以便于我们更好的吃透整个大屏数据模块，整理出对设计更有价值的信息来设计界面，以满足客户的需要。

另外也会有一些硬性需求植入。所以需要设计师整体整理大屏思路。例如，某屏需求最后分析输出如下：

A. 需求侧（客户方&产品经理）：大屏界面信息展示要有层次、突出核心指标、便于领导观摩，并且要适配 PC 端；

B. 设计侧：大屏硬件特点、尺寸比例、坐席环境以及设计目标

指标卡清晰 图表表达准确、层次分明 业务逻辑清晰 设计组件快速搭建界面 C. 研发侧：使用莫奈配置大屏，后台接入指标系统；

关于可视化大屏之「需求理解」的分享就到这里，下一篇我们讲讲《可视化大屏业务之设计方案制定》。

下期见！

欢迎关注作者微信公众号：「JDTDA」

天生C位，迅猛来袭！今年的流量之争番位抢夺战，要说谁能占鳌头，非动效短视频莫属。前有灵动岛交互动画席卷而来，后有电商营销动画、大厂趣味视频层出不穷，为提高用户体验使出了浑身解数。

天生C位，迅猛来袭！今年的流量之争番位抢夺战，要说谁能占鳌头，非动效短视频莫属。

前有灵动岛交互动画席卷而来，后有电商营销动画、大厂趣味视频层出不穷，为提高用户体验使出了浑身解数。

（鸡爷作品）

设计师 挑战高薪，就得有高价值的交付能力。想学动效设计，苦于没人教，自学又很难，怎么办？

11月15日晚8:00， 优设大课堂 免费「动效设计」快来抢先体验！

直播讲师介绍：

从去年年底开始，鸡爷的教程视频，就逐个出圈了，全网播放量大到惊人，超过了5000万+，直到现在，这个曝光数字还在攀升。

无数人被鸡爷的视频牢牢吸引，评论经常会有热情的同学一键三连。

 

这些全网播放量已超过100W+的教程视频，更是吸引来了很多甲方过来谈合作。出书、企业内训、Adobe座上宾、商单这些一个不漏。甚至还上过CCTV！

优设动效班学员屡屡传来的涨薪消息，也证实会动效的设计师在市场上有着不容小觑的竞争力。

学完课程完成公司视频项目，收获一片称赞，顺带涨10W年薪：

技能提升后获得老板认可，原公司涨薪2K：

自由职业，有了动效技能，成功接到商业私单：

简历中加入动效作业，成功涨薪2000：

热门赛道抢先学 ：本次直播课包括表情包动画以及短视频素材特效两大热门赛道，学完之后马上用，实操不怕没商单。

（鸡爷作品）

大佬授课更简单：结合鸡爷数十年的从业经验，方法实用简单，超多复杂特效只需几步搞定，数据自由调整，复用超方便。

大师级讲师亲授，教你10分钟搞定1天的工作，赶快扫描二维码预约吧！

在可视化大屏业务中，设计师如何快速了解业务并产出合理的方案呢？我们把日常工作做了梳理，为了大家有更好的阅读体验，文章将拆分为需求理解与设计方案制定两部分，本篇介绍可视化大屏业务之——需求理解。可视化设计相关干货：万字干货！

在可视化大屏业务中，设计师如何快速了解业务并产出合理的方案呢？我们把日常工作做了梳理，为了大家有更好的阅读体验，文章将拆分为需求理解与设计方案制定两部分，本篇介绍 可视化大屏 业务之——需求理解。

可视化设计 相关干货：

万字干货！写给设计师的数据可视化设计指南 设计师在工作中经常会遇到下面这种情况： 自己辛辛苦苦、加班加点、没日没夜做出来的数据分析报告交到 boss 们手上，结果看不懂，全程黑人问号脸。

阅读文章 >

一、大屏数据可视化设计基础 1. 概念以及特点

大屏数据可视化设计，是以大屏为显示载体，用直观形象的图形语言表达抽象复杂的数据；让用户易看易懂，帮助他们辅助决策等等。

大屏数据可视化设计具有以下特点：硬件种类多且各家尺寸和比例不一，具有独特性；业务涉及行业广、场景多且空间有限、具有专业性；设计视觉要求炫酷，需掌握多种技能，并且运用设计语言准确的表达出来，具有综合性。

2. 需要具备的知识体系

在大屏数据可视化设计，设计师需要具备哪些能力呢？本文将从大屏硬件环境、业务理解力、视觉表现力三个方面做陈述与说明。

大屏硬件环境，需要了解大屏显示终端的硬件各种类型：DLP、LCD、LED 以及特性。针对不同物理硬件的特点，我们采取不同的设计方法；设计前必须了解大屏比例尺寸。例如：拼接屏单屏分辨率是 1920*1080。那么，大屏总分辨率宽是 1920*N，高是 1080*N（其中 N 代表横向和竖向拼接屏个数 ）；

除此之外，大屏的物理环境还受终端硬件特性、坐席最佳视距，室内采光等因素的影响。因此，我们在设计的时候，会根据这些因素考虑字号的大小和整体屏幕的色彩明度。

业务理解：大屏数据可视化设计因为涉及的业务领域较为广泛，所以需要设计师具备一定行业基础知识和业务积累，再把这些业务知识应用到实际的大屏场景的设计中去，学会用合理的设计表达来讲故事。

讲好故事前提是需要对业务有深刻的理解，我们可以通过拆解业务目标、分析并重组业务模块进行设计。正确的选择合理的指标，准确的采用形象的图表，用大数据之美来帮助用户快速理解业务的核心内容。

以笔者多年的设计经验，大屏数据可视化设计多应用在：企业展示、实时监控、辅助决策、战略指挥、城市运行、领导驾驶舱、运营汇报、展会中心等场景。所以，针对以上场景的应用，我们平时应该多多关注这些方面的信息，做好必要的知识沉淀。

除此，设计师还需要具备综合的设计能力。不仅仅只是具备基本的界面设计能力，还需要具备三维建模、渲染动画、动效设计等，数字孪生是未来的发展方向。因此就要求设计师必须熟悉地理信息和三维引擎等技术。

二、大屏数据可视化设计需求拆解 1. 初步沟通后，如何拆解需求

以下，我们通过一个具体的需求事例来具体说明

我们先看一段产品经理和设计师之间的对话：

通过以上对话，我们可以针对需求中的关键字进行挖掘，获取有用信息（隐藏需求）。

例如：

“某地”就可以考虑采用代表该地域特征物产或地标建筑，可准备相关地域问文化素材或矢量地图；

“产业大脑”自带行业属性。设计师可以提前准备下与此相关的行业知识。

“大屏电脑都用”说明需要适配大屏端和 PC 端。所以，在设计时，需要考虑大屏尺寸比例与电脑尺寸比例是否一致；

“ LED ” 表明硬件终端类型，需要了解 LED 屏幕像素间距大小，设计时可考虑字体规范；

“ 5.8m*3.2m ” 有了物理尺寸可以换算像素以及比例，方便设计师确定界面尺寸大小；

“ 紧急！明天要 ” 说明任务紧急，设计需要快速，可考虑采用已有组件快速搭建；

通常我们拿到产品经理的需求原型，先熟悉整体的业务由那些各个模块构成、各个模块之间的主次关系以及交互行为等。

以上原型主要模块有：

顶部：主标题 中间：地图展示企业分布区域、预警企业以及预警详情 （主场景） 左右两侧和底部：图表展示产业相关数据报表 （次要） 模块布局：“回”字型布局 层级方式：底图为地图，上层浮层为图表 以上初步了解原型之后，我们可以通过参加产品原型评审会议进一步详细了解需求，有问题可以再评审会上提问交流解惑。

我们对需求了解清楚了，需要进一步对各个模块需求分析理解：

标题：要言简意赅，如冗余可进行优化； 指标：指标应考虑名称、指标数据展示多情况下保障足够的扩展空间； 图表：准确选用合理表达业务内容的图表； 例如：全链营销模块 标题：全链营销 指标：指标名称，2~6 个字符，指标数值，1~6 位数； 图表：业务表达，近一年销售量和订单量的趋势变化，选用两条折 线图表达；维度：月份 1~12 月；度量：销售额 1~4 位数，单位万元；订单量：1~4 位数，单位：件 通过分析理解，我们可以更深入的理解业务模块的内容，以便于我们着手开始设计：

在对业务理解中，我们先以讲故事的方式，帮助用户理解业务场景。比如：某市的领导驾驶舱大屏设计，哪部分数据是最重要的，用户最关心的内容是什么？在设计的时候，设计师会着重刻画这部分数据内容的展示。

我们可以通过行政区域的下钻或者界面数据的联动等交互分主次，分层级的让用户知晓业务重要数据指标和内容；

在设计中我们运用对比等形式，图表准确的表达，能够让用户一目了然，易看易懂，从而提升用户体验。

在对需求理解的这个过程中，我们不断的分析、拆分、重组各个业务的模块，以便于我们更好的吃透整个大屏数据模块，整理出对设计更有价值的信息来设计界面，以满足客户的需要。

另外也会有一些硬性需求植入。所以需要设计师整体整理大屏思路。例如，某屏需求最后分析输出如下：

A. 需求侧（客户方&产品经理）：大屏界面信息展示要有层次、突出核心指标、便于领导观摩，并且要适配 PC 端；

B. 设计侧：大屏硬件特点、尺寸比例、坐席环境以及设计目标

指标卡清晰 图表表达准确、层次分明 业务逻辑清晰 设计组件快速搭建界面 C. 研发侧：使用莫奈配置大屏，后台接入指标系统；

关于可视化大屏之「需求理解」的分享就到这里，下一篇我们讲讲《可视化大屏业务之设计方案制定》。

下期见！

欢迎关注作者微信公众号：「JDTDA」