本文是送给即将进入职场的新生 设计师 们的经验总结，内容包括理论篇、面试篇、工作篇、成长篇。

拓展阅读：

从大学到职场前3年，设计师如何打造一个完美的开局账号？ 大家可能听到完美开局就有点兴奋，小说和游戏里的剧情真的可以在我们设计师的身上重演吗？

阅读文章 >

7月第1波 设计干货 合集来了！这一次我所搜集的干货合集当中，有图标合集也有插画合集，但是最值得一看的，是 icons8 出品的动态图标和效果超赞的 SVG 素材编辑工具，还有将 Svg 格式的平面矢量文件升级为 3d 动态内容的服务。另外别忘了往期的干货合集：

第一波！2022年6月精选实用设计干货合集 6月第1波设计干货合集来了！

阅读文章 >

第二波！2022年6月精选实用设计干货合集 6月第2波设计干货合集来了！

阅读文章 >

第三波！2022年6月精选实用设计干货合集 6月第3波设计干货合集来了！

阅读文章 >

第四波！2022年6月精选实用设计干货合集 6月第4波设计干货合集来了！

阅读文章 >

下面我们具体看看这一期的干货：

60+ 有趣的免费小插画合集 https://prettyrandomillustrations.webflow.io/

这个插画合集是设计师 Prem Pradeep 自己做 100 天设计挑战过程中完成的插画作品，其中内容涉及到的主题非常宽泛，相当随机，这套插画小合集可以免费获取，不过清晰度有限制，如果你其中有你特别需要的，可以下单购买付费的矢量版本。

免费开源极简图标大合集 https://feathericons.com/

Feather 是一个风格比较简约利落的开源图标合集，每个图标都在 24×24 的网格上，图标整体保持着高度的一致性和可读性。你可以一次性把所有的图标都下载下来，也可以在临时有需求的时候，直接在网站当中根据主题 和关键词来搜索合适的图标，修改尺寸和笔触粗细，然后直接复制粘贴，非常方便。

icons8 出品的动态图标 https://icons8.com/animated-icons/color

这是著名的图标和插画素材供应商 icons8 出品的图标服务，目前其中已经囊括了 3700+ 动画图标，这些图标全部以基于 Lottie 的 Json 格式、Gif、AE三种格式而存在，便于你在不同的流程之下使用。另外，这里的动态图标有 iOS 和 Material Design 样式的，也有符合 Windows 系统风格的，可以根据风格选取。这里的图标并非完全免费，有一部分是可以免费下载使用的，另外一部分是付费的。

高素质免费 UIkit 下载 https://www.pixeltrue.com/free-ui-kits

这是著名的设计素材服务商 Pixelture Packs 出品的免费 UIkit 合集，这个合集当中所提供的 UIKit 是完全免费可商用的，无需署名，直接拿来修改应用就行，对于做 UI 设计的同学而言，特别值得收藏一发。这些 UIKit 大多数都提供 Figma 和 Sketch 格式的文件，而且通常包含有几十个界面和大量的常用组件，相当好使。

绝美的免费 SVG 素材编辑平台 https://heazy.studio/

这个名为 Heazy 的 SVG 编辑平台能够帮你生成视觉效果特别独特和时髦的素材，你可以轻松地在 JavaScript 和 TypeScript 当中调用矢量的 SVG 数据，还可以导出为 PNG，或者应用到 React 组件上去。这个SVG 编辑平台提供了很多预先设计好的 SVG 素材，你可以借助内置的编辑器将他们改成你想要的样子。

将 SVG 升级为动态 3D 的高级工具 https://studio.morflax.com/shift

这个工具我是第一次注意到，它可以将你的 SVG 格式的2D矢量文件转化为 3D 的动画，从这点来说，它是可以帮助很多现有的SVG 素材的基础上进一步提升，特别值得尝试。这项服务完全版是收费的，免费服务是有限制的，感兴趣的同学可以上手试试。

给UI设计师的UI控件占位符服务 https://www.uifiller.com/

当我们需要用小图标的时候，可以直接在网站上搜索图标然后复制图标，粘贴到设计软件当中。现在终于有人更近一步了，直接将日常的 UI 控件的占位符直接设计好，选中你需要的占位符复制粘贴，也是一个提升设计效率的好办法！所以做 UI 设计的同学可以试试看。

在 Figma 中直接使用交互式小组件 https://www.figma.com/community/widgets/figma_design

现在 Figma 当中更新了新功能，Figma 官方和 Asana、Jira 等社区的开发者一同合作，将交互式小部件带到了 figma 的插件系统当中，这样一来，进化在进行设计的时候就不止有静态的元素了，还能使用直接可交互式的控件。

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

昨天看到一个小伙伴在群里分享了一个网站——动效周期表（Motion Periodic Table），里面以“元素周期表”的形式罗列出Ae常用的73种基础动效，非常有意思。今天就为大家介绍一下这个网站，并推荐一系列AE 基础动效 入门学习的高质量免费教程，一起来看看吧~

动效周期表 Motion Periodic Table 网址直达： http://foxcodex.html.xdomain.jp/index.html （需梯子）

「动效周期表」是由日本设计师 Kazuki Akamine 在 2015 年作为毕业设计创作的，旨在降低初学者了解动效基础知识的难度。「动效周期表」借用了元素周期表的形式，按相似性将不同的基础动效分为 14 个系列（纵列），一共 73 个动效。

14 个系列分别是：偏移旋转系列、变形系列、时间操纵系列、5 组特殊效果系列、脚本系列、扭曲系列、扩散系列、模糊系列、灯光系列、移动系列、旋转系列、缩放系列、修剪系列和分形系列，其中重要且常用的动效都排列在表格上层。

学习动效的门槛并不低，初学者在看到一个动效作品时，很难立刻就能说出它是由哪些基础动效构成的，而动效周期表就能帮助初学者解决这些问题。它提供了一个系统化的动效知识体系，方便初学者理解并记忆，极大降低了学习难度。

超全面！写给设计师的动效知识库 Motion Graphic 也称为 Mg 或者 Mograh，通常翻译为动效或者动态图形。

阅读文章 >

其实优优教程网早在 2019 年就开始根据动效周期表里面的内容，制作免费的基础动效系列教程。目前优优教程网已经更新了 3 期动效周期表详解和 55 期 动效教程 视频，质量非常高，想自学 AE 的小伙伴们千万不要错过~

高质量免费动效入门教程 ① 动效周期表详解

详解有 3 期，对动效周期表内每个基础动效的原理，制作过程及引用拓展有详细说明。

「教程链接」

AE 教程！动效周期表解析（上） https://uiiiuiii.com/aftereffects/1212379817.html

AE 教程！动效周期表解析（中） https://uiiiuiii.com/aftereffects/1212383548.html

AE 教程！动效周期表解析（下） https://uiiiuiii.com/aftereffects/1212383842.html

② 动效周期表入门系列教程

这个系列教程目前有 55 期，每一期都以视频的方式教程大家动效周期表里一个基础效果，并且延展教授这种基础效果的应用场景。

「教程链接」

73 个设计师必备的基础动效教学 https://uiiiuiii.com/aftereffects/12127671.html

好啦以上就是今天推荐的动效基础入门相关免费资源，喜欢的小伙伴记得点赞收藏，也可以转发给身边有需要朋友。如果你有关于本文或者其他设计疑问，可以在评论区提出，我会第一时间为大家解答~ 也欢迎大家加入优设官方设计交流群，和优设主编、设计总监及其他热爱设计的小伙伴一起探讨学习（入群二维码见文末 Banner）~

更多动效学习相关文章：

腾讯高手出品！动效设计基础（一）：运动曲线与缓动 Heyu：作为设计师，我们经常接到这样的需求：XX App中的动效好酷啊，我们也做一个吧。

阅读文章 >

腾讯高手出品！动效设计基础（二）：动效的应用 Heyu：在上一篇文章《动效设计基础（一）：缓动与运动曲线》中，我们讨论了动效的几种常见形式以及缓动的重要性。

阅读文章 >

前言 在 UI 设计中，无论从效率角度、还是视觉角度来讲，组件元素始终在界面中扮演着极其重要的角色，其作用主要是提升应用的可用性、易用性，以帮助用户轻松完成任务。

移动端选择器使用：

6000字超长干货！移动端选择器正确使用指南 什么是选择器 选择器是一个输入字段， 用户必须在其中选择一个（或多个）选项，这与文本字段中用户可以自由使用的输入区不同。

阅读文章 >

选项看起来是一个很简单的组件，交互状态仅仅只是选中（填充）、未选中（描边）、不可选（置灰）三种，但在真正的设计过程中，比你想象的要难的多，其视觉样式、元素大小及选项数量都是至关重要的因素。

一个好的选项从来都不缺乏细节，虽然看起来并不复杂，实际要考虑的因素非常多，因为这不仅关系着用户体验，还涉及一些界面交互逻辑的问题，需要结合不同的使用场景、合理的将各选项灵活运用到界面当中，这其中的细节不容忽视。

本篇文章将围绕单选、复选、拨动开关三种选项元素的设计细节及使用场景展开分析，希望能帮助新手设计师避开选项设计的误区，为用户打造出更好的操作体验。

单选：独一无二 1. 什么是单选？ 单选按钮最早来源于老式的汽车收音机上的电台频道的切换按键，按下其中的一个按键就成为了被选中状态，其他就会被弹出，用户可通过这种方式快速切换不同的电台。

在 UI 设计中，单选是指当界面中存在两个或以上的选项时，且各项之间相互排斥，用户仅能在选项列表中选择其中的一个来使用，即便反复选择，最终的结果始终独一无二。 单选框 有选中、未选中两种状态（极少数不可选），主要通过填充和描边互换的样式将当前状态反馈给用户。

单选是一种较为精简的模式，它至少包含两个选项，为了提升操作效率，需要尽可能的将所有选项展示给用户，无需多余的操作和思考，即能快速完成任务。如果是必填选项，最好提供一个与当前用户较匹配或选中率最大的一个选项作为默认值，即便默认值有误，对用户也不会有什么影响，因为用户本来就需要去操作，可一旦匹配到对应的用户，就能免去这一步的操作，且默认值是经过多方面分析、反复推敲后才进行预设，只会是有益无害。

2. 单选组件样式 按钮式

按钮样式适合用在选项不多、文案不长的场景，可平铺在界面中或以弹窗的方式呈现。例如，购买衣服时，品牌、尺码、颜色都可以设计成按钮样式。

圆形组合

未选中都是浅灰色描边的圆形，选中后，Android 常见的是描边变主色+内圆点填充，而 iOS 更多则是描边变填充+对勾图标组合。其实这些不重要，真的没必要纠结是用圆点组合还是对勾组合样式，只要在同一个产品中统一样式即可，用户不会因为这两种表现方式的不同而影响后续的操作。

对钩

对勾样式经常出现在弹窗列表选项中，只有选中后才会有“✔”标记，相比圆形组合，给用户的引导性更强。

在单个任务中，首次进入选择页面时，列表中没有任何标记（有默认选项除外），选中条件后，标记对勾的同时，无需其他操作即自动进入下一步任务流程，再次回到选项列表时，系统会标记上次的选择作为参考。另外，这种样式不会太过于局限选项的数量和字数。

选择器

通常作为表单项以弹窗的形式出现，适合二级、三级联动选项。例如：选择地址（省/市/区）、日期（年/月/日）、时间（时/分/秒）等选项较多且具有关联性的选项组。

3. 单选的使用准则 首先要确保单选组件的可用性，所有单选项需要清晰的呈现给用户，避免嵌套或隐藏二级单选，否则会影响结构的识别性。

其次为确保可读性，单选组件的布局要符合用户认知。选项较少且标签较短时，使用多行多列的按钮式布局比较常见，例如电商 APP 的商品属性选择等；标签较长则使用圆形图标、对钩样式单列多行显示，例如选择退款原因；联动选项需根据关联的等级数量，在选择器中多列显示，例如三级联动地址，省、市、区三列并行。如果将选项毫无章法的平铺、标签/图标上下排布，会造成视觉动线混乱、内容紧凑及一些不可预知的问题出现。

4. 提供默认选项 如果可以的话，尽量给用户提供一个默认选项，这并非随意设定，需要经过多方面分析综合决定。举个例子，你的产品属社交类型，大多数为男性用户，那么将男性设定为默认的性别选择，这类用户就可以直接跳过这一步，节约了大量用户的操作成本，即便面对的是女性用户，这也不影响原本就需要手动选择的步骤。默认选项需合理设定，切不可乱用，否则一些“偷懒”的用户并不会更换默认选项，导致后续数据分析的精准度。

复选：循环往复 1. 什么是复选？ 复选操作不会像单选那样出现信息阻隔，也没有拨动开关那么强的视觉干扰，通常包含一个或多个选项供用户选择，其选项条件不是互斥的，用户可从中选择一项或者多项，具体情况则根据选项条件的限制而定。

选择一项

一些设计师将复选理解为多选，且先不论对错，笔者想说明的是，多选只不过是复选的一种选择方式。在真实的设计中，有很多场景是不设限的，我们可以将选中/未选中理解为“是/否、同意/不同意、开启/关闭……”等意思。例如，注册页面中必定存在的「用户服务协议」，单个选项可反复操作；管理系统或B端的批量操作、权限设置等，选择其中的一项也可进入下一步操作流程。

选择多项

强制多选一般会设定需选择数量的下限和上限。例如：首次进入某些 APP 时，需选择个性化定制标签，通常最少不低于 3 项，最多不超过 6 项；还有，在填写调查问卷的多项选择时，最少选中两项、不设上限等，这些就是复选中真正意义上的多选。

2. 复选的使用准则 相比单选，复选需要配备提交按钮，提交后才会记录被选中的信息。对于批量性的选项操作，复选框的操作效率比拨动开关要高出许多，例如，在某些页面开启/关闭几个权限，每个权限用单独的拨动开关进行控制，完全没问题，但涉及到几十个权限的控制，这种批量操作使用 复选框 一定是最佳的选择，只要用户能清楚操作之后会发生什么即可。

3. 常见的使用场景 标签选择

个性化标签选择中最为常见，在标签文字、选项数量较少的情况下，使用外观大小完全相同的标签按钮多列显示，有助于用户浏览，还能节约页面纵向空间，用浅色描边/主色填充或明暗等级来区分选中/未选中状态，部分产品还会在选中的状态上增加一个小图标（✓、+/-），区分会更加明显。这种方式切记标签不能过长，否则可能会导致文字折行或容器内很拥挤，不利于用户阅读。

列表选择

当选项过多、标签长短不一时，适合使用列表式选择。WEB 端常见的是圆角矩形勾选填充，例如管理系统的商品列表；移动端更多则是原型勾选填充，例如购物车，当然并没有明显的界定，所有页面统一样式即可。

4. 未定状态 与单选视觉样式唯一不同的是多了一个未定状态。常见于管理系统或 B 端，当选项存在多个子级时，只是某些子级被选中，但并未全部选中，这时父级状态尚不确定，即为未定状态。

拨动开关：白天与黑夜 1. 什么是拨动开关？

拨动开关就像生活中控制灯泡的开关，它是在两个互斥的选项中始终存在默认值、且操作会立即生效的按钮，操作后必定是对立的选项，例如开启/关闭、是/否、同意/不同意等。

2. 拨动开关的使用准则

拨动开关必须表意明确，用户在操作之前就能清楚操作后会发生什么，使用时，需遵循以下原则：

用于操作后立即生效的场景； 标签和按钮是两个分离的视觉焦点，当用户有可能产生疑惑、或标签不足以言明时，需增加辅助文字予以说明； 主要用于控制全局，权重较高，针对单个任务流程的控制，请使用单选/复选； 默认就是开启/关闭状态，若存在子级，父级关闭的同时将子级隐藏（避免置灰）； 当操作有风险时，必须给予明确的提示； 避免大面积使用，如果存在太多需要开启/关闭的条件，建议使用复选。 3. 背景与文案

拨动开关的背景通常只介于两种状态，关闭状态下为置灰（全服通用），开启后为绿色，也有很多产品将其设定为品牌色，统一颜色样式即可。

辅助文案常见有两种类型，第一种为当前状态反馈，例如：获取设备通知权限“消息推送已开启/关闭”，这种反馈在应用中可灵活运用，尤其是在关闭状态下，可起到一定的引导作用。第二种为标签辅助提示，例如：操作后的好处或风险，告知用户会发生什么，提前让用户有一定的心理预期。

单选控件的纠葛 1. 单选框 vs 复选框

是用单选框还是用复选框，似乎是最好界定的，笔者查阅了很多资料，得到的信息是“需选择一个选项用单选、多个选项用复选”，答案出奇的一致，这好像什么都说了（确实如此）、又好像什么都没说（是个设计师都懂），当我们仔细分析之会发现，并非仅仅如此。

在 PC 端遇到两个对立的选项（如：是/否、同意/不同意、通过/不通过）时，除了用两个单选项之外，也可以使用复选框，尤其是在权限控制中，必定是复选。另外，移动端注册登录流程中，用户服务协议也是最具代表性的复选框（同意/不同意二选一）使用案例。除去这些特殊的使用场景，其他大部分就直接单选。

2. 单选框 vs 拨动开关

仅存在两个选项时，单选与拨动开关的使用，有一些设计师就将其混淆了。笔者曾遇到过这样的设计案例，有产品将性别（男/女）、O2O 取货方式（送货上门/到店自取）只有两个选项的任务用拨动开关来呈现，操作后，通过开关上的滑块左右移动+文案辅助来确定当前选中的条件。笔者认为，这种方式不可取，最大的弊端就是在当前状态下，用户并不知道另一个选项是什么，需要通过猜测或试错来确定，无疑增加了任务的完成难度，也打破了用户对常用操作的固有认知。

至于什么时候需要用拨动开关，上述 3-2《拨动开关的使用准则》中有详细说明，除此之外使用单选框，能解决设计中 80%的单选与拨动开关的选择性问题。

3. 单选框 vs 下拉列表

选项较少可直接在当前页面用单选框（选择性别）、按钮（标签）呈现，当用户需要在大量的选项中进行选择时，PC 端可使用下拉列表，移动端更多使用的是操作栏弹窗或跳转到新页面让用户操作。其实这方面没有明确的界限，需根据使用场景以及选项的属性根据实际情况灵活变动。

下拉菜单：

5000字干货！四大章节帮你全面了解「下拉菜单」 前言 下拉菜单是在界面设计中很常用的组件，它以下拉的方式同时展示多个标签并帮助用户缩小选择范围，快速满足用户的选择需求，尤其是一些导航，设计师会很依赖下拉菜单的使用。

阅读文章 >

必备常识和使用技巧 1. 选项的几种状态

单选、复选、拨动开关各自都有不同的状态，在设计之前，设计师需要清楚地知道这些状态所代表的含义以及不同的使用场景，避免后续在使用中给用户造成困扰。

2. 符合用户认知的控件样式

首先，选项框样式应符合用户认知，不能为了所谓的差异化、个性化打破用户固有认知，而带来额外的认知负担。例如单选/复选常见的是圆形填充+对钩（PC 端）、圆角矩形填充+对钩（移动端）两种方式，虽然这并不是唯一，但至少不会出错。虽然鼓励跳出常规的设计思维做出改变，但一切都以不增加用户使用难度、提供更好的用户体验为出发点，不然还不如不变。

3. 注意对齐方式

按钮式不用多说，文字跟容器上下左右居中。列表中的对齐方式无非两种，选项框在前，文字和选项框都是左对齐，单选/复选均可采用这种方式；选项框在后，则文字左对齐、选项框右对齐，采用这种方式的单选居多；拨动开关则是全网统一，标签左对齐，开/关右对齐。

4. 清晰简短的标签

选项标签需清晰简短、直接表达核心含义，尽量避免否定的表达方式，以免用户产生误解。像拨动开关这种两极分化的选项，当用户不清楚对立的选项内容时，可以使用副标题进行描述，让用户在操作之前有一定的心理预期。

5. 批量选择、节约操作成本

虽然都是将选择权交给用户，但面对不同的场景，需提供一个「全选」操作，帮助用户一次完成多个重复的操作，降低操作成本。

例如：B 端的内容管理，批量操作能节省很多时间，还能降低因多次重复操作产生的失误概率；C 端最具代表性的有购物车、以及初次进入部分应用时的个性化标签选择。

6. 触控热区的设定

针对移动端，点击区域切勿直接使用选项框的范围大小，需单独设定热区范围。大家都知道，大拇指在移动端应用中使用频率是最高的，相对来说，要有足够大（非绝对）的操作区域以供手指进行精准交互，以免无效操作或操作失误。需要将文本标签、选项框以及各选项区域均分后四周的留白都作为触动热区，操作起来就会轻松很多。

结语 本文笔者主要总结了单选、复选、拨动开关的使用规范及常见问题，不过设计规范只是基于产品本身构建的一个标准，为了约束后续的视觉统一而存在的规范参考。在真实的设计中，这些设计规范并不是唯一，需要根据产品的特点和使用场景进行灵活变动，设计出最适合自身产品的控件才是最重要的。

遵循设计规范只是最基础的标准，遵循的同时跳出规范的束缚才会有创意，这就离不开我们平时的积累，钻研各产品中优秀的设计细节，通过查漏补缺、扬长避短，在其他产品的亮点中找到与自身产品的平衡点并将其融合，这才是我们学习和总结的最终目的。

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

前言 在 UI 设计中，无论从效率角度、还是视觉角度来讲，组件元素始终在界面中扮演着极其重要的角色，其作用主要是提升应用的可用性、易用性，以帮助用户轻松完成任务。

移动端选择器使用：

6000字超长干货！移动端选择器正确使用指南 什么是选择器 选择器是一个输入字段， 用户必须在其中选择一个（或多个）选项，这与文本字段中用户可以自由使用的输入区不同。

阅读文章 >

选项看起来是一个很简单的组件，交互状态仅仅只是选中（填充）、未选中（描边）、不可选（置灰）三种，但在真正的设计过程中，比你想象的要难的多，其视觉样式、元素大小及选项数量都是至关重要的因素。

一个好的选项从来都不缺乏细节，虽然看起来并不复杂，实际要考虑的因素非常多，因为这不仅关系着用户体验，还涉及一些界面交互逻辑的问题，需要结合不同的使用场景、合理的将各选项灵活运用到界面当中，这其中的细节不容忽视。

本篇文章将围绕单选、复选、拨动开关三种选项元素的设计细节及使用场景展开分析，希望能帮助新手设计师避开选项设计的误区，为用户打造出更好的操作体验。

单选：独一无二 1. 什么是单选？ 单选按钮最早来源于老式的汽车收音机上的电台频道的切换按键，按下其中的一个按键就成为了被选中状态，其他就会被弹出，用户可通过这种方式快速切换不同的电台。

在 UI 设计中，单选是指当界面中存在两个或以上的选项时，且各项之间相互排斥，用户仅能在选项列表中选择其中的一个来使用，即便反复选择，最终的结果始终独一无二。 单选框 有选中、未选中两种状态（极少数不可选），主要通过填充和描边互换的样式将当前状态反馈给用户。

单选是一种较为精简的模式，它至少包含两个选项，为了提升操作效率，需要尽可能的将所有选项展示给用户，无需多余的操作和思考，即能快速完成任务。如果是必填选项，最好提供一个与当前用户较匹配或选中率最大的一个选项作为默认值，即便默认值有误，对用户也不会有什么影响，因为用户本来就需要去操作，可一旦匹配到对应的用户，就能免去这一步的操作，且默认值是经过多方面分析、反复推敲后才进行预设，只会是有益无害。

2. 单选组件样式 按钮式

按钮样式适合用在选项不多、文案不长的场景，可平铺在界面中或以弹窗的方式呈现。例如，购买衣服时，品牌、尺码、颜色都可以设计成按钮样式。

圆形组合

未选中都是浅灰色描边的圆形，选中后，Android 常见的是描边变主色+内圆点填充，而 iOS 更多则是描边变填充+对勾图标组合。其实这些不重要，真的没必要纠结是用圆点组合还是对勾组合样式，只要在同一个产品中统一样式即可，用户不会因为这两种表现方式的不同而影响后续的操作。

对钩

对勾样式经常出现在弹窗列表选项中，只有选中后才会有“✔”标记，相比圆形组合，给用户的引导性更强。

在单个任务中，首次进入选择页面时，列表中没有任何标记（有默认选项除外），选中条件后，标记对勾的同时，无需其他操作即自动进入下一步任务流程，再次回到选项列表时，系统会标记上次的选择作为参考。另外，这种样式不会太过于局限选项的数量和字数。

选择器

通常作为表单项以弹窗的形式出现，适合二级、三级联动选项。例如：选择地址（省/市/区）、日期（年/月/日）、时间（时/分/秒）等选项较多且具有关联性的选项组。

3. 单选的使用准则 首先要确保单选组件的可用性，所有单选项需要清晰的呈现给用户，避免嵌套或隐藏二级单选，否则会影响结构的识别性。

其次为确保可读性，单选组件的布局要符合用户认知。选项较少且标签较短时，使用多行多列的按钮式布局比较常见，例如电商 APP 的商品属性选择等；标签较长则使用圆形图标、对钩样式单列多行显示，例如选择退款原因；联动选项需根据关联的等级数量，在选择器中多列显示，例如三级联动地址，省、市、区三列并行。如果将选项毫无章法的平铺、标签/图标上下排布，会造成视觉动线混乱、内容紧凑及一些不可预知的问题出现。

4. 提供默认选项 如果可以的话，尽量给用户提供一个默认选项，这并非随意设定，需要经过多方面分析综合决定。举个例子，你的产品属社交类型，大多数为男性用户，那么将男性设定为默认的性别选择，这类用户就可以直接跳过这一步，节约了大量用户的操作成本，即便面对的是女性用户，这也不影响原本就需要手动选择的步骤。默认选项需合理设定，切不可乱用，否则一些“偷懒”的用户并不会更换默认选项，导致后续数据分析的精准度。

复选：循环往复 1. 什么是复选？ 复选操作不会像单选那样出现信息阻隔，也没有拨动开关那么强的视觉干扰，通常包含一个或多个选项供用户选择，其选项条件不是互斥的，用户可从中选择一项或者多项，具体情况则根据选项条件的限制而定。

选择一项

一些设计师将复选理解为多选，且先不论对错，笔者想说明的是，多选只不过是复选的一种选择方式。在真实的设计中，有很多场景是不设限的，我们可以将选中/未选中理解为“是/否、同意/不同意、开启/关闭……”等意思。例如，注册页面中必定存在的「用户服务协议」，单个选项可反复操作；管理系统或B端的批量操作、权限设置等，选择其中的一项也可进入下一步操作流程。

选择多项

强制多选一般会设定需选择数量的下限和上限。例如：首次进入某些 APP 时，需选择个性化定制标签，通常最少不低于 3 项，最多不超过 6 项；还有，在填写调查问卷的多项选择时，最少选中两项、不设上限等，这些就是复选中真正意义上的多选。

2. 复选的使用准则 相比单选，复选需要配备提交按钮，提交后才会记录被选中的信息。对于批量性的选项操作，复选框的操作效率比拨动开关要高出许多，例如，在某些页面开启/关闭几个权限，每个权限用单独的拨动开关进行控制，完全没问题，但涉及到几十个权限的控制，这种批量操作使用 复选框 一定是最佳的选择，只要用户能清楚操作之后会发生什么即可。

3. 常见的使用场景 标签选择

个性化标签选择中最为常见，在标签文字、选项数量较少的情况下，使用外观大小完全相同的标签按钮多列显示，有助于用户浏览，还能节约页面纵向空间，用浅色描边/主色填充或明暗等级来区分选中/未选中状态，部分产品还会在选中的状态上增加一个小图标（✓、+/-），区分会更加明显。这种方式切记标签不能过长，否则可能会导致文字折行或容器内很拥挤，不利于用户阅读。

列表选择

当选项过多、标签长短不一时，适合使用列表式选择。WEB 端常见的是圆角矩形勾选填充，例如管理系统的商品列表；移动端更多则是原型勾选填充，例如购物车，当然并没有明显的界定，所有页面统一样式即可。

4. 未定状态 与单选视觉样式唯一不同的是多了一个未定状态。常见于管理系统或 B 端，当选项存在多个子级时，只是某些子级被选中，但并未全部选中，这时父级状态尚不确定，即为未定状态。

拨动开关：白天与黑夜 1. 什么是拨动开关？

拨动开关就像生活中控制灯泡的开关，它是在两个互斥的选项中始终存在默认值、且操作会立即生效的按钮，操作后必定是对立的选项，例如开启/关闭、是/否、同意/不同意等。

2. 拨动开关的使用准则

拨动开关必须表意明确，用户在操作之前就能清楚操作后会发生什么，使用时，需遵循以下原则：

用于操作后立即生效的场景； 标签和按钮是两个分离的视觉焦点，当用户有可能产生疑惑、或标签不足以言明时，需增加辅助文字予以说明； 主要用于控制全局，权重较高，针对单个任务流程的控制，请使用单选/复选； 默认就是开启/关闭状态，若存在子级，父级关闭的同时将子级隐藏（避免置灰）； 当操作有风险时，必须给予明确的提示； 避免大面积使用，如果存在太多需要开启/关闭的条件，建议使用复选。 3. 背景与文案

拨动开关的背景通常只介于两种状态，关闭状态下为置灰（全服通用），开启后为绿色，也有很多产品将其设定为品牌色，统一颜色样式即可。

辅助文案常见有两种类型，第一种为当前状态反馈，例如：获取设备通知权限“消息推送已开启/关闭”，这种反馈在应用中可灵活运用，尤其是在关闭状态下，可起到一定的引导作用。第二种为标签辅助提示，例如：操作后的好处或风险，告知用户会发生什么，提前让用户有一定的心理预期。

单选控件的纠葛 1. 单选框 vs 复选框

是用单选框还是用复选框，似乎是最好界定的，笔者查阅了很多资料，得到的信息是“需选择一个选项用单选、多个选项用复选”，答案出奇的一致，这好像什么都说了（确实如此）、又好像什么都没说（是个设计师都懂），当我们仔细分析之会发现，并非仅仅如此。

在 PC 端遇到两个对立的选项（如：是/否、同意/不同意、通过/不通过）时，除了用两个单选项之外，也可以使用复选框，尤其是在权限控制中，必定是复选。另外，移动端注册登录流程中，用户服务协议也是最具代表性的复选框（同意/不同意二选一）使用案例。除去这些特殊的使用场景，其他大部分就直接单选。

2. 单选框 vs 拨动开关

仅存在两个选项时，单选与拨动开关的使用，有一些设计师就将其混淆了。笔者曾遇到过这样的设计案例，有产品将性别（男/女）、O2O 取货方式（送货上门/到店自取）只有两个选项的任务用拨动开关来呈现，操作后，通过开关上的滑块左右移动+文案辅助来确定当前选中的条件。笔者认为，这种方式不可取，最大的弊端就是在当前状态下，用户并不知道另一个选项是什么，需要通过猜测或试错来确定，无疑增加了任务的完成难度，也打破了用户对常用操作的固有认知。

至于什么时候需要用拨动开关，上述 3-2《拨动开关的使用准则》中有详细说明，除此之外使用单选框，能解决设计中 80%的单选与拨动开关的选择性问题。

3. 单选框 vs 下拉列表

选项较少可直接在当前页面用单选框（选择性别）、按钮（标签）呈现，当用户需要在大量的选项中进行选择时，PC 端可使用下拉列表，移动端更多使用的是操作栏弹窗或跳转到新页面让用户操作。其实这方面没有明确的界限，需根据使用场景以及选项的属性根据实际情况灵活变动。

下拉菜单：

5000字干货！四大章节帮你全面了解「下拉菜单」 前言 下拉菜单是在界面设计中很常用的组件，它以下拉的方式同时展示多个标签并帮助用户缩小选择范围，快速满足用户的选择需求，尤其是一些导航，设计师会很依赖下拉菜单的使用。

阅读文章 >

必备常识和使用技巧 1. 选项的几种状态

单选、复选、拨动开关各自都有不同的状态，在设计之前，设计师需要清楚地知道这些状态所代表的含义以及不同的使用场景，避免后续在使用中给用户造成困扰。

2. 符合用户认知的控件样式

首先，选项框样式应符合用户认知，不能为了所谓的差异化、个性化打破用户固有认知，而带来额外的认知负担。例如单选/复选常见的是圆形填充+对钩（PC 端）、圆角矩形填充+对钩（移动端）两种方式，虽然这并不是唯一，但至少不会出错。虽然鼓励跳出常规的设计思维做出改变，但一切都以不增加用户使用难度、提供更好的用户体验为出发点，不然还不如不变。

3. 注意对齐方式

按钮式不用多说，文字跟容器上下左右居中。列表中的对齐方式无非两种，选项框在前，文字和选项框都是左对齐，单选/复选均可采用这种方式；选项框在后，则文字左对齐、选项框右对齐，采用这种方式的单选居多；拨动开关则是全网统一，标签左对齐，开/关右对齐。

4. 清晰简短的标签

选项标签需清晰简短、直接表达核心含义，尽量避免否定的表达方式，以免用户产生误解。像拨动开关这种两极分化的选项，当用户不清楚对立的选项内容时，可以使用副标题进行描述，让用户在操作之前有一定的心理预期。

5. 批量选择、节约操作成本

虽然都是将选择权交给用户，但面对不同的场景，需提供一个「全选」操作，帮助用户一次完成多个重复的操作，降低操作成本。

例如：B 端的内容管理，批量操作能节省很多时间，还能降低因多次重复操作产生的失误概率；C 端最具代表性的有购物车、以及初次进入部分应用时的个性化标签选择。

6. 触控热区的设定

针对移动端，点击区域切勿直接使用选项框的范围大小，需单独设定热区范围。大家都知道，大拇指在移动端应用中使用频率是最高的，相对来说，要有足够大（非绝对）的操作区域以供手指进行精准交互，以免无效操作或操作失误。需要将文本标签、选项框以及各选项区域均分后四周的留白都作为触动热区，操作起来就会轻松很多。

结语 本文笔者主要总结了单选、复选、拨动开关的使用规范及常见问题，不过设计规范只是基于产品本身构建的一个标准，为了约束后续的视觉统一而存在的规范参考。在真实的设计中，这些设计规范并不是唯一，需要根据产品的特点和使用场景进行灵活变动，设计出最适合自身产品的控件才是最重要的。

遵循设计规范只是最基础的标准，遵循的同时跳出规范的束缚才会有创意，这就离不开我们平时的积累，钻研各产品中优秀的设计细节，通过查漏补缺、扬长避短，在其他产品的亮点中找到与自身产品的平衡点并将其融合，这才是我们学习和总结的最终目的。

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

这两年互联网行业在 C 端市场上的增长已经不足以吸引大众和投资者的视线，B 端作为一个新的热点开始被追捧。

但 B 端是一个泛指，它是由若干面向商业场景的不同细分行业组成。包括云服务、SAAS、PAAS、定制系统、数据可视化、智慧平台、商用 HMI 等等。

不同 B 端细分行业差距是非常大的，就像游戏 APP UI 和一般软件 APP UI 完全是两种职业一样。每当我们讨论 B 端行业前景，就一定要聚焦到具体的行业类型，否则就没有讨论下去的基础。

而我们今天重点聚焦的，就是目前声势极大的 数据可视化 行业。

相关文章推荐：

可视化大屏设计快速入门指南，看这篇就够了！ 前言 随着大数据产业的蓬勃发展，很多企业都开始应用数据可视化。

阅读文章 >

这是最近很多同学咨询和关注的领域，也是各大显卡厂商、3D 引擎发布会上的常客。

各种让人眼花缭乱的图例和技术应用解说，很容易让我们产生未来已经加速向我们走来的 “幻觉”，此时不抓紧时代的机遇投身数字化界面的设计，更待何时？

但我还是要劝大家别光顾着鸡冻，冷静下来好好分析这些行业和市场状况，当你了解的越多，你就越会发现，这个职业方向和你们想的不太一样……

首先，数字可视化领域也是一个比较笼统的行业，它依旧可以拆分出若干细分领域。但我先简单根据视觉展示类型把它们分成两大类，平面展示型和 3D 展示型。为什么根据这个分而不是商业场景，下面会做进一步解释。

首先，数据可视化不是用了花哨的 3D 视觉才叫可视化，平面展示类型是绝对不能忽视的一个方向。它的主要应用场景集中在商业 BI，统计分析工具等。

比如统计并查看网站、应用、店铺数据的平台。

这类产品有非常广泛的使用场景和需求，是现代企业和产品运营的基石，它存在的价值是毋庸置疑的。

而另一类 3D 展示型的细分发展方向，包含展示大屏、数字孪生、智慧项目、商用 HMI 等类型。

这类项目更多是由技术发展催生而来的 “新需求”，和 5G 的发展是高度相似的。我对这个行业的发展潜力是认可的，但对设计师从事这个行业的总体前景持悲观态度。

下面，针对真正的数据 可视化设计 师，我会从下面几个维度展开讨论（唱起反调）：

知识门槛 行业特征 团队价值

数据可视化是对数据信息进行图形化设计的过程，这个行业不是这两年才出现的，而是由来已久。

从世界上第一个图表的诞生之后，就有无数统计学家和设计师投身到这个领域中，发明和设计出各种精妙绝伦的图形。

数据可视化的重要性不会比任何其它设计行业低，但是，数据可视化重要性的来源，是由数据本身的价值赋予的。因为诠释数据的方式精彩，所以有价值，而不是仅仅是因为你做得好看且花哨。

更进一步说，就是数据可视化的价值是被统计学赋予的，而统计学是被这个世界真实需要的。

但很可惜，极少有 B 端设计师会投入精力到统计学的基础知识和应用，这就导致很多设计稿中，连对数据的展示应该用折线还是柱状都分不清。

或许你依靠经验可以提升对一些基本图表使用的心得，但是，进阶的可视化设计需求就靠几个简单的折线、柱状、饼图就能解决嘛？那下面这些图形应用需要掌握什么？

复杂的可视化应用场景，不仅需要设计师对统计内容和数据应用有主动地分析，还需要对计算机图形学有一定的掌握。先不说门槛极高的 R 语言应用，但凡涉及到区级以上的地理信息可视化，就一定需要应用 GIS 工具的应用，导出并转化数据包。

除了 2D 以外，3D 可视化的项目，所需的知识储备就更进一大步。很多新人的认知以为设计师的工作只要用 3D 软件建模并输出就可以，学会 C4D 就可以做可视化项目。

这和以为掌握烤箱的功能就可以做出美味的蛋糕性质是一样的……

前面说过，3D 可视化是由技术发展催生出的行业，它的应用受到技术的影响非常大。因为 3D 应用实在是太复杂了，比 2D 图形复杂好几个量级，这就导致设计可以落地的限制远远超出新手的认知。

常规的 3D 项目，必然要借助相关的图形协议或者引擎。比如新手刚开始都以为的 3D 可视化就是网页中运行 3D 效果，而网页运行 3D 就是借助 WebGL 图形协议实现的。

由于各种技术和硬件限制，WebGL 的性能是奇差无比的，因为它的图形绘制渲染主要依靠 CPU 来完成，只要项目稍微复杂一点，多边形和图元数量一多，立马就会让电脑变卡（CPU 占用量暴涨）。同时，它可以使用的渲染效果、着色器也必然不等同于 3D 软件的高阶渲染插件 OC 或 Redshift。

因为 WebGL 太弱，目前封闭的可视化项目就转而使用其它的技术解决方案，即虚幻 Unreal 和 Unity。没错，就是你们玩游戏启动画面中显示的那俩引擎。

换句话说，现在的高端 3D 可视化项目，就是用做游戏的方式做可视化应用，只要在指定设备里安装，就可以调用 GPU 资源，实现更高级复杂的效果。

但是，只要应用了对应的引擎，就必须使用配套软件来完成渲染、动画、交互事件。即通过 C4D 或者 Blender、犀牛等软件完成建模（不同可视化项目应该用的建模软件也不一样），再导入到虚幻或者 Unity 编辑器中进行下一步的操作，然后再和开发进行交付。

因为 3D 的复杂性，导致独立 3D 可视化项目的开发流程被大幅度拉长，从而让设计师需要掌握的知识面也大大增加。中间每个步骤都充斥着各种屎尿屁的限制，我就不继续展开了。

3D 可视化设计师，几乎就等同于游戏行业中的技术美术(Technical Artist)，因为游戏开发更复杂，分工更明确，技术美术作为设计师和开发之间的桥梁，帮助项目的美术能尽量在技术上被实现。

而因为可视化项目的建模精度与视觉效果要求不高（对比游戏），这些工作就要由同一个岗位包揽，设计师就没办法回避这些让人绝望的知识信息。

还有一点对比游戏行业更让人绝望的，就是 3D 可视化实际应用的技术方案是高度碎片化、没有体系的，而且技术迭代周期远比游戏行业短（WebGPU 已经在路上了），这在客观上增加了设计师的从业压力（欢迎体验前端开发的压力？）。

一个专业的可视化设计师知识门槛，是远远高于一般 UI 设计师的。

当我们研究一个行业的前景时，就是研究它未来的趋势和潜力。数据可视化严格意义来讲并不是完全独立的一个行业或市场，而是其它多个大市场中的某个组成部分。

如前面提到的数字分析、物联网、工业物联，都是层次更高的商业化市场。这些都是近年来高速发展的热门行业，是带动可视化行业发展的客观依据，我就不一一找公开统计数据佐证了。

而可视化除了商业场景外，还有个在国内做可视化绕不开的话题 —— 政策。

如果具体关注过地产、5G、电动车产业的发展历程，就应该明白国家意志的贯彻可以怎样在短时间内催生出市场的高度繁荣（或者泡沫）。

而政策对于可视化的利好，就在于 “数字政府” 概念的规划中。从几年前开始就兴起的政务数字化转型，到最近国务院发布的 《关于加强数字政府建设的指导意见》，都是中央直接 “指导” 地方发展数字化的指标，是行政意志与力量的体现。

说更具体点，下面是指导意见中的目标说明，非常直白，大家可以自己体会：

到 2025 年，与政府治理能力现代化相适应的数字政府顶层设计更加完善、统筹协调机制更加健全，政府数字化履职能力、安全保障、制度规则、数据资源、平台支撑等数字政府体系框架基本形成，政府履职数字化、智能化水平显著提升，政府决策科学化、社会治理精准化、公共服务高效化取得重要进展，数字政府建设在服务党和国家重大战略、促进经济社会高质量发展、建设人民满意的服务型政府等方面发挥重要作用。

到 2035 年，与国家治理体系和治理能力现代化相适应的数字政府体系框架更加成熟完备，整体协同、敏捷高效、智能精准、开放透明、公平普惠的数字政府基本建成，为基本实现社会主义现代化提供有力支撑。

原文链接： http://www.gov.cn/zhengce/content

正因国情在此，所以这些年 G 可视化项目才如雨后春笋一般涌现。智慧城市、智慧农村、智慧水利、智慧交通、智慧民政等等，都是借助这股东风蓬勃发展。

所以，商业和政务的迫切需求，催生出一大批可视化服务公司，如 EasyV、ThingJS、观远等。即使头部大厂也生怕错过这个机会，纷纷组建团队进行行业布局。如腾讯云的 Raya Data、阿里云的 DataV、网易的数帆等等，都已经小成气候，初现锋芒。

市场需求旺盛，规模快速增长，前景理应一片大好！但是……

市场总规模的扩张，带给个体的收益却不一定有表面看起来那么理想，尤其是设计师岗位。

这要先从常规 UI 设计行业说起，UI 设计师工资已经是国内设计行业工资最高的类型之一，从 10 年前的屌丝行业到今天能和老牌贵族建筑设计叫板，是非常了不起的成就。

而之所以有这种收入，除了移动互联网爆发以外，最重要的原因就是互联网产品的 “利润率”，可以用非常少量的职员撬动上亿甚至上百亿的利润。

如王者荣耀 2021 年全年盈利 28 亿美元，接近 200 亿人民币的利润。一款游戏的利润直接达到万科（2021 年利润 225 亿）和中国人保（2021 年利润 216 亿）的水平，他们都是在册员工超过 10W 人的大型企业，也是国内各自行业里的巨头，而王者的员工只是他们的几百近千份之一。

再如蚂蚁金服、微信、抖音之类的国民级互联网应用，都是用极少的员工达到让人难以置信的估值和利润，这在传统行业是无法想象的。

所以能盈利的公司会给员工开出满是行业红利的待遇，拔高行业上限的同时，也迫使那些有志于挑战巨头的新公司愿意抬高工资价码，吸引人才。

总结起来，UI 之所以平均收入远超平面、服装、工业、室内等老牌设计行业，并不是因为 UI 专业门槛更高，而是以行业规模、项目规模、利润率三个核心指标的共同作用形成。

其中，项目规模和利润率的重要性，其实远远大于行业规模，这是很多职场新人最想不通的地方。

例如广告行业已经是一个万亿市场了，除了分众这家互联网独角兽外，其它老牌广告营销公司每年财报的营收和利润大家感兴趣的可以去搜搜（下图为 21 年财报）。

看看他们的营收总额和净利润比例，以及员工总数，你自己就会得出，作为普通平面设计师的待遇，是绝对不可能超过头部互联网企业的，甚至能达到中游水平都是超常发挥的结论。

行业规模大，但是头部企业规模和利润却不高，除了行业本身的平均利润率因素外，还有一个原因就是业务是高度分散的，没有被集中在少数头部企业，供应商数量庞大，不像多数 C 端市场都由少数几家公司或者产品把持或直接垄断。

在可预见的未来，可视化行业也会处于这样的情况，竞争激烈，利润率低。而且作为 B 端服务商，不要看各家企业需求旺盛，政府各级单位招标不断，实际上每个项目的规模都不大，百万内的项目才占行业的绝大多数，这是不太符合满足我们收入期待的项目规模。

而单个项目规模在未来高速扩大在我看来也不太现实，有两个原因，一个是项目使用人数极少（通常也就几十上百人…），另一个就是对可视化项目实用性的质疑。

如果看过航天相关的报道，就会看到指挥室数据大屏相比我们网上看过的案例比起来，简陋得发指。这会是因为总局没有预算，请不起设计师和团队开发嘛？

为什么航天指挥中心没有用下面这种 “科技感” 满满，复杂的我坐下面保证除了标题一个字也看不见的 “高端设计”？

原因说出来让人沮丧，因为他们 —— 真的要看上面的信息啊！

真正能发挥可视化价值的场景并不多，很多项目出发的意义，就是为了表面工程（各级 ZF 单位需求，自行体会），装饰属性大于实用性。既然实用性不够高，很多甲方心里也清楚，是花钱装裱门面的，那么投入的预算就更不可能太高。

所以，我对可视化行业的整体的发展是认可的，但对单家公司或项目的预期，却是悲观的，它们没法达到我们已经习惯的 C 端和 SAAS 行业的高度。

最后，还要探讨下数据可视化中设计师的团队价值。

我们知道，一个完整的可视化项目设计与开发门槛都是非常高的，但因为高，创造的价值就高嘛？项目营收的成本占比就高吗？

答案依然是否定的！因为可视化行业的绝大多数项目都是 “传统” 的外包项目。

不管是商业是政务领域，外包最重要的任务，都是找到业务（中标）。朴素的价值观会认为，只要技术和服务够好，业务自然源源不断，其实不然。技术服务都是后验的，客户没有合作过之前是不知道的，在市场上挑选服务商，可不是打开淘宝买家评论查看分数和具体评价筛选。

所以，外行了解服务商的窗口，更多是通过熟悉的中间人介绍，或者销售的嘴。谁能拿到项目，谁就为公司创造了最大的价值。后面怎么做那是后面的事，换谁做不是做……

这就是最常见的外包企业思路，所以技术人员或者设计往往都是消耗品，没有那么强的依赖性。而在具体外包实践环节中，项目的执行决策也和一般 B 端、G 端项目不同。

我以前一直强调，B 端项目的存在价值，是用来解决业务问题，为企业 —— 降本增效。但是可视化项目往往不是用来解决问题，而是用来 —— 解决产生问题的人！

尤其是面向政务的项目，在领导的需求面前，是没有体验这一说的，首先考虑的应该是 ”科技感“（结合前文理解），不然怎么展示自己贯彻上层指导意见……

这种环境对于创意类职业是非常不利的，一方面创造的价值并不显著，另一方面是由别人 “教你” 怎么做设计。长此以往，你会越来越缺失职业竞争力和发展可能。

问题二，则是因为可视化项目独立开发成本太高昂，做的视觉内容又非常固定。于是有实力的团队就纷纷投入可视化编辑工具的研发，解决最麻烦的底层图形方案。

这和 B 端的前端开源框架非常类似，把底层的代码、交互、动画、性能优化都帮你做好了，设计师和程序员可以用非常省事的完成项目的视觉内容落地。

但是，常规 B 端管理项目中，界面样式一直就不是最重要的事情，而是解决复杂页面流程和组件交互的问题。所以资深的 B 端设计师乐于应用第三方的框架来完成复杂的项目。

而在可视化领域中，多数项目并没有那么多和复杂的交互需要考虑，视觉展示效果才是第一位，绝大多数团队应用第三方框架是大势所趋。核心工作内容被影响，那才叫触及灵魂的打击。

所以，在我看来可视化设计师可以创造高价值的场景，只会出现在两种团队中。

第一种，是给其它可视化团队提供图形服务的 SAAS 工具，比如 Raydata、EasyV 这类。都需要团队有非常优秀的前端程序员和技术积累，换句话说，就是既要有技术实力又要有资金保障的团队。

相关神器推荐：

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

阅读文章 >

第二种，则是走优质项目输出路线的小团队或公司。会有一些优秀的开发人员坐镇，再由设计师主导来推动业务发展，不会什么项目都做，会选有价值的用心交付。例如早年的 UI 外包团队 ARK、Eico、TangUX 等都是这种路线。

这两种对比目前海量的服务商来说都是凤毛麟角，第一种类型是可视化设计师发展最好的归宿，因为设计产出和图形技术发展高度捆绑，只有这样的团队才会最早最快接触新的专业技术方案。

除了这两类，不要对其它外包类公司有太多的期待。在整个互联网行业中，成熟产品团队非常不喜欢招外包设计师不是没有原因的。

至于未来是不是可视化内容会在 C 端领域打开局面，发展出一些新的应用场景，我就不过早下定论了。

最后，做个总结，给目前还没有进入可视化设计行业，或者是误打误撞进入这个行业的设计师一些职业方向的建议。

可视化设计行业和广告业非常类似，就是从业人员收入构成是沙漏状，而不是像 UI 这样呈金字塔状的，缺乏健康的增长梯度和充足的腰部岗位。

可视化设计师从菜鸟进入专业阶段所需的知识量更大，准备周期更长，技能门槛更高。在初中级阶段和一般 UI 行业对比起来 —— 毫无性价比。

如果本身热爱可视化，想将 FUI 那些东西搬进真实的世界和项目里，也做好了艰苦学习的准备（说不定是你乐在其中的），那么这个的行业的头部岗位就是为你这种人准备的。

毕竟行业体量大，当然就会有真正优质的岗位出现，只是它的门槛高，没有那么多水分能挤。

如果不是异常热爱这个行业，具备较强的自学能力，或有一定的 3D 和图形技术知识积累，那么不太建议往这个职业深入发展，一般的 B 端和 SAAS 项目才会是更好的选择。

以上分享都是一家之言，希望大家能结合自己的思考，产生出新的观点！

我们下篇再贱～

欢迎关注作者的微信公众号：「超人的电话亭」

这两年互联网行业在 C 端市场上的增长已经不足以吸引大众和投资者的视线，B 端作为一个新的热点开始被追捧。

但 B 端是一个泛指，它是由若干面向商业场景的不同细分行业组成。包括云服务、SAAS、PAAS、定制系统、数据可视化、智慧平台、商用 HMI 等等。

不同 B 端细分行业差距是非常大的，就像游戏 APP UI 和一般软件 APP UI 完全是两种职业一样。每当我们讨论 B 端行业前景，就一定要聚焦到具体的行业类型，否则就没有讨论下去的基础。

而我们今天重点聚焦的，就是目前声势极大的 数据可视化 行业。

相关文章推荐：

可视化大屏设计快速入门指南，看这篇就够了！ 前言 随着大数据产业的蓬勃发展，很多企业都开始应用数据可视化。

阅读文章 >

这是最近很多同学咨询和关注的领域，也是各大显卡厂商、3D 引擎发布会上的常客。

各种让人眼花缭乱的图例和技术应用解说，很容易让我们产生未来已经加速向我们走来的 “幻觉”，此时不抓紧时代的机遇投身数字化界面的设计，更待何时？

但我还是要劝大家别光顾着鸡冻，冷静下来好好分析这些行业和市场状况，当你了解的越多，你就越会发现，这个职业方向和你们想的不太一样……

首先，数字可视化领域也是一个比较笼统的行业，它依旧可以拆分出若干细分领域。但我先简单根据视觉展示类型把它们分成两大类，平面展示型和 3D 展示型。为什么根据这个分而不是商业场景，下面会做进一步解释。

首先，数据可视化不是用了花哨的 3D 视觉才叫可视化，平面展示类型是绝对不能忽视的一个方向。它的主要应用场景集中在商业 BI，统计分析工具等。

比如统计并查看网站、应用、店铺数据的平台。

这类产品有非常广泛的使用场景和需求，是现代企业和产品运营的基石，它存在的价值是毋庸置疑的。

而另一类 3D 展示型的细分发展方向，包含展示大屏、数字孪生、智慧项目、商用 HMI 等类型。

这类项目更多是由技术发展催生而来的 “新需求”，和 5G 的发展是高度相似的。我对这个行业的发展潜力是认可的，但对设计师从事这个行业的总体前景持悲观态度。

下面，针对真正的数据 可视化设计 师，我会从下面几个维度展开讨论（唱起反调）：

知识门槛 行业特征 团队价值

数据可视化是对数据信息进行图形化设计的过程，这个行业不是这两年才出现的，而是由来已久。

从世界上第一个图表的诞生之后，就有无数统计学家和设计师投身到这个领域中，发明和设计出各种精妙绝伦的图形。

数据可视化的重要性不会比任何其它设计行业低，但是，数据可视化重要性的来源，是由数据本身的价值赋予的。因为诠释数据的方式精彩，所以有价值，而不是仅仅是因为你做得好看且花哨。

更进一步说，就是数据可视化的价值是被统计学赋予的，而统计学是被这个世界真实需要的。

但很可惜，极少有 B 端设计师会投入精力到统计学的基础知识和应用，这就导致很多设计稿中，连对数据的展示应该用折线还是柱状都分不清。

或许你依靠经验可以提升对一些基本图表使用的心得，但是，进阶的可视化设计需求就靠几个简单的折线、柱状、饼图就能解决嘛？那下面这些图形应用需要掌握什么？

复杂的可视化应用场景，不仅需要设计师对统计内容和数据应用有主动地分析，还需要对计算机图形学有一定的掌握。先不说门槛极高的 R 语言应用，但凡涉及到区级以上的地理信息可视化，就一定需要应用 GIS 工具的应用，导出并转化数据包。

除了 2D 以外，3D 可视化的项目，所需的知识储备就更进一大步。很多新人的认知以为设计师的工作只要用 3D 软件建模并输出就可以，学会 C4D 就可以做可视化项目。

这和以为掌握烤箱的功能就可以做出美味的蛋糕性质是一样的……

前面说过，3D 可视化是由技术发展催生出的行业，它的应用受到技术的影响非常大。因为 3D 应用实在是太复杂了，比 2D 图形复杂好几个量级，这就导致设计可以落地的限制远远超出新手的认知。

常规的 3D 项目，必然要借助相关的图形协议或者引擎。比如新手刚开始都以为的 3D 可视化就是网页中运行 3D 效果，而网页运行 3D 就是借助 WebGL 图形协议实现的。

由于各种技术和硬件限制，WebGL 的性能是奇差无比的，因为它的图形绘制渲染主要依靠 CPU 来完成，只要项目稍微复杂一点，多边形和图元数量一多，立马就会让电脑变卡（CPU 占用量暴涨）。同时，它可以使用的渲染效果、着色器也必然不等同于 3D 软件的高阶渲染插件 OC 或 Redshift。

因为 WebGL 太弱，目前封闭的可视化项目就转而使用其它的技术解决方案，即虚幻 Unreal 和 Unity。没错，就是你们玩游戏启动画面中显示的那俩引擎。

换句话说，现在的高端 3D 可视化项目，就是用做游戏的方式做可视化应用，只要在指定设备里安装，就可以调用 GPU 资源，实现更高级复杂的效果。

但是，只要应用了对应的引擎，就必须使用配套软件来完成渲染、动画、交互事件。即通过 C4D 或者 Blender、犀牛等软件完成建模（不同可视化项目应该用的建模软件也不一样），再导入到虚幻或者 Unity 编辑器中进行下一步的操作，然后再和开发进行交付。

因为 3D 的复杂性，导致独立 3D 可视化项目的开发流程被大幅度拉长，从而让设计师需要掌握的知识面也大大增加。中间每个步骤都充斥着各种屎尿屁的限制，我就不继续展开了。

3D 可视化设计师，几乎就等同于游戏行业中的技术美术(Technical Artist)，因为游戏开发更复杂，分工更明确，技术美术作为设计师和开发之间的桥梁，帮助项目的美术能尽量在技术上被实现。

而因为可视化项目的建模精度与视觉效果要求不高（对比游戏），这些工作就要由同一个岗位包揽，设计师就没办法回避这些让人绝望的知识信息。

还有一点对比游戏行业更让人绝望的，就是 3D 可视化实际应用的技术方案是高度碎片化、没有体系的，而且技术迭代周期远比游戏行业短（WebGPU 已经在路上了），这在客观上增加了设计师的从业压力（欢迎体验前端开发的压力？）。

一个专业的可视化设计师知识门槛，是远远高于一般 UI 设计师的。

当我们研究一个行业的前景时，就是研究它未来的趋势和潜力。数据可视化严格意义来讲并不是完全独立的一个行业或市场，而是其它多个大市场中的某个组成部分。

如前面提到的数字分析、物联网、工业物联，都是层次更高的商业化市场。这些都是近年来高速发展的热门行业，是带动可视化行业发展的客观依据，我就不一一找公开统计数据佐证了。

而可视化除了商业场景外，还有个在国内做可视化绕不开的话题 —— 政策。

如果具体关注过地产、5G、电动车产业的发展历程，就应该明白国家意志的贯彻可以怎样在短时间内催生出市场的高度繁荣（或者泡沫）。

而政策对于可视化的利好，就在于 “数字政府” 概念的规划中。从几年前开始就兴起的政务数字化转型，到最近国务院发布的 《关于加强数字政府建设的指导意见》，都是中央直接 “指导” 地方发展数字化的指标，是行政意志与力量的体现。

说更具体点，下面是指导意见中的目标说明，非常直白，大家可以自己体会：

到 2025 年，与政府治理能力现代化相适应的数字政府顶层设计更加完善、统筹协调机制更加健全，政府数字化履职能力、安全保障、制度规则、数据资源、平台支撑等数字政府体系框架基本形成，政府履职数字化、智能化水平显著提升，政府决策科学化、社会治理精准化、公共服务高效化取得重要进展，数字政府建设在服务党和国家重大战略、促进经济社会高质量发展、建设人民满意的服务型政府等方面发挥重要作用。

到 2035 年，与国家治理体系和治理能力现代化相适应的数字政府体系框架更加成熟完备，整体协同、敏捷高效、智能精准、开放透明、公平普惠的数字政府基本建成，为基本实现社会主义现代化提供有力支撑。

原文链接： http://www.gov.cn/zhengce/content

正因国情在此，所以这些年 G 可视化项目才如雨后春笋一般涌现。智慧城市、智慧农村、智慧水利、智慧交通、智慧民政等等，都是借助这股东风蓬勃发展。

所以，商业和政务的迫切需求，催生出一大批可视化服务公司，如 EasyV、ThingJS、观远等。即使头部大厂也生怕错过这个机会，纷纷组建团队进行行业布局。如腾讯云的 Raya Data、阿里云的 DataV、网易的数帆等等，都已经小成气候，初现锋芒。

市场需求旺盛，规模快速增长，前景理应一片大好！但是……

市场总规模的扩张，带给个体的收益却不一定有表面看起来那么理想，尤其是设计师岗位。

这要先从常规 UI 设计行业说起，UI 设计师工资已经是国内设计行业工资最高的类型之一，从 10 年前的屌丝行业到今天能和老牌贵族建筑设计叫板，是非常了不起的成就。

而之所以有这种收入，除了移动互联网爆发以外，最重要的原因就是互联网产品的 “利润率”，可以用非常少量的职员撬动上亿甚至上百亿的利润。

如王者荣耀 2021 年全年盈利 28 亿美元，接近 200 亿人民币的利润。一款游戏的利润直接达到万科（2021 年利润 225 亿）和中国人保（2021 年利润 216 亿）的水平，他们都是在册员工超过 10W 人的大型企业，也是国内各自行业里的巨头，而王者的员工只是他们的几百近千份之一。

再如蚂蚁金服、微信、抖音之类的国民级互联网应用，都是用极少的员工达到让人难以置信的估值和利润，这在传统行业是无法想象的。

所以能盈利的公司会给员工开出满是行业红利的待遇，拔高行业上限的同时，也迫使那些有志于挑战巨头的新公司愿意抬高工资价码，吸引人才。

总结起来，UI 之所以平均收入远超平面、服装、工业、室内等老牌设计行业，并不是因为 UI 专业门槛更高，而是以行业规模、项目规模、利润率三个核心指标的共同作用形成。

其中，项目规模和利润率的重要性，其实远远大于行业规模，这是很多职场新人最想不通的地方。

例如广告行业已经是一个万亿市场了，除了分众这家互联网独角兽外，其它老牌广告营销公司每年财报的营收和利润大家感兴趣的可以去搜搜（下图为 21 年财报）。

看看他们的营收总额和净利润比例，以及员工总数，你自己就会得出，作为普通平面设计师的待遇，是绝对不可能超过头部互联网企业的，甚至能达到中游水平都是超常发挥的结论。

行业规模大，但是头部企业规模和利润却不高，除了行业本身的平均利润率因素外，还有一个原因就是业务是高度分散的，没有被集中在少数头部企业，供应商数量庞大，不像多数 C 端市场都由少数几家公司或者产品把持或直接垄断。

在可预见的未来，可视化行业也会处于这样的情况，竞争激烈，利润率低。而且作为 B 端服务商，不要看各家企业需求旺盛，政府各级单位招标不断，实际上每个项目的规模都不大，百万内的项目才占行业的绝大多数，这是不太符合满足我们收入期待的项目规模。

而单个项目规模在未来高速扩大在我看来也不太现实，有两个原因，一个是项目使用人数极少（通常也就几十上百人…），另一个就是对可视化项目实用性的质疑。

如果看过航天相关的报道，就会看到指挥室数据大屏相比我们网上看过的案例比起来，简陋得发指。这会是因为总局没有预算，请不起设计师和团队开发嘛？

为什么航天指挥中心没有用下面这种 “科技感” 满满，复杂的我坐下面保证除了标题一个字也看不见的 “高端设计”？

原因说出来让人沮丧，因为他们 —— 真的要看上面的信息啊！

真正能发挥可视化价值的场景并不多，很多项目出发的意义，就是为了表面工程（各级 ZF 单位需求，自行体会），装饰属性大于实用性。既然实用性不够高，很多甲方心里也清楚，是花钱装裱门面的，那么投入的预算就更不可能太高。

所以，我对可视化行业的整体的发展是认可的，但对单家公司或项目的预期，却是悲观的，它们没法达到我们已经习惯的 C 端和 SAAS 行业的高度。

最后，还要探讨下数据可视化中设计师的团队价值。

我们知道，一个完整的可视化项目设计与开发门槛都是非常高的，但因为高，创造的价值就高嘛？项目营收的成本占比就高吗？

答案依然是否定的！因为可视化行业的绝大多数项目都是 “传统” 的外包项目。

不管是商业是政务领域，外包最重要的任务，都是找到业务（中标）。朴素的价值观会认为，只要技术和服务够好，业务自然源源不断，其实不然。技术服务都是后验的，客户没有合作过之前是不知道的，在市场上挑选服务商，可不是打开淘宝买家评论查看分数和具体评价筛选。

所以，外行了解服务商的窗口，更多是通过熟悉的中间人介绍，或者销售的嘴。谁能拿到项目，谁就为公司创造了最大的价值。后面怎么做那是后面的事，换谁做不是做……

这就是最常见的外包企业思路，所以技术人员或者设计往往都是消耗品，没有那么强的依赖性。而在具体外包实践环节中，项目的执行决策也和一般 B 端、G 端项目不同。

我以前一直强调，B 端项目的存在价值，是用来解决业务问题，为企业 —— 降本增效。但是可视化项目往往不是用来解决问题，而是用来 —— 解决产生问题的人！

尤其是面向政务的项目，在领导的需求面前，是没有体验这一说的，首先考虑的应该是 ”科技感“（结合前文理解），不然怎么展示自己贯彻上层指导意见……

这种环境对于创意类职业是非常不利的，一方面创造的价值并不显著，另一方面是由别人 “教你” 怎么做设计。长此以往，你会越来越缺失职业竞争力和发展可能。

问题二，则是因为可视化项目独立开发成本太高昂，做的视觉内容又非常固定。于是有实力的团队就纷纷投入可视化编辑工具的研发，解决最麻烦的底层图形方案。

这和 B 端的前端开源框架非常类似，把底层的代码、交互、动画、性能优化都帮你做好了，设计师和程序员可以用非常省事的完成项目的视觉内容落地。

但是，常规 B 端管理项目中，界面样式一直就不是最重要的事情，而是解决复杂页面流程和组件交互的问题。所以资深的 B 端设计师乐于应用第三方的框架来完成复杂的项目。

而在可视化领域中，多数项目并没有那么多和复杂的交互需要考虑，视觉展示效果才是第一位，绝大多数团队应用第三方框架是大势所趋。核心工作内容被影响，那才叫触及灵魂的打击。

所以，在我看来可视化设计师可以创造高价值的场景，只会出现在两种团队中。

第一种，是给其它可视化团队提供图形服务的 SAAS 工具，比如 Raydata、EasyV 这类。都需要团队有非常优秀的前端程序员和技术积累，换句话说，就是既要有技术实力又要有资金保障的团队。

相关神器推荐：

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

阅读文章 >

第二种，则是走优质项目输出路线的小团队或公司。会有一些优秀的开发人员坐镇，再由设计师主导来推动业务发展，不会什么项目都做，会选有价值的用心交付。例如早年的 UI 外包团队 ARK、Eico、TangUX 等都是这种路线。

这两种对比目前海量的服务商来说都是凤毛麟角，第一种类型是可视化设计师发展最好的归宿，因为设计产出和图形技术发展高度捆绑，只有这样的团队才会最早最快接触新的专业技术方案。

除了这两类，不要对其它外包类公司有太多的期待。在整个互联网行业中，成熟产品团队非常不喜欢招外包设计师不是没有原因的。

至于未来是不是可视化内容会在 C 端领域打开局面，发展出一些新的应用场景，我就不过早下定论了。

最后，做个总结，给目前还没有进入可视化设计行业，或者是误打误撞进入这个行业的设计师一些职业方向的建议。

可视化设计行业和广告业非常类似，就是从业人员收入构成是沙漏状，而不是像 UI 这样呈金字塔状的，缺乏健康的增长梯度和充足的腰部岗位。

可视化设计师从菜鸟进入专业阶段所需的知识量更大，准备周期更长，技能门槛更高。在初中级阶段和一般 UI 行业对比起来 —— 毫无性价比。

如果本身热爱可视化，想将 FUI 那些东西搬进真实的世界和项目里，也做好了艰苦学习的准备（说不定是你乐在其中的），那么这个的行业的头部岗位就是为你这种人准备的。

毕竟行业体量大，当然就会有真正优质的岗位出现，只是它的门槛高，没有那么多水分能挤。

如果不是异常热爱这个行业，具备较强的自学能力，或有一定的 3D 和图形技术知识积累，那么不太建议往这个职业深入发展，一般的 B 端和 SAAS 项目才会是更好的选择。

以上分享都是一家之言，希望大家能结合自己的思考，产生出新的观点！

我们下篇再贱～

欢迎关注作者的微信公众号：「超人的电话亭」

前言 2022 年 5 月 25 日，「2022 春季飞书未来无限大会」如期举行。

“Emoji 动效好可爱”、“发布会怎么能开得如此高级”、“年轻人喜欢飞书是有道理的”——这些来自用户的肯定让我们欢欣鼓舞。

同时，我们也收到了一大波的提问：“直播间的效果是如何实现的”、“嘉宾是如何和场景互动的”、“PPT 的切换是如何控制的”等等。作为发布会的核心主创团队，本篇文章想仅就视效维度来跟大家聊一聊：如何诠释一场别具特色的「飞书线上虚拟发布会」。

1. 因时而变 随事而制 因为疫情的关系，我们不得不给发布会的线下筹备工作按下暂停键，转向线上形式。从线“下”到线“上”，仅一字之差，却是又一个从 0 到 1 的挑战。

时间紧、任务重，「线上虚拟发布会」对于大家来说又是一个全新的课题，每个成员都是抱着既激动又紧张的心情投入到筹备工作中。我们迅速成立了专项调研小组，遍历了国内外各种形式的 虚拟发布会 形式，我们希望从中找到一个最优解，以飞书的设计语言呈现给大家。

2. 以「People」为核心的设计策略 「人」是先进团队的第一要素

当我们说一个团队先进，说的不止是业务和市场，更是对「人」的进一步思考，强调人是先进团队的第一要素，而此次发布的 飞书 People 产品能够帮助先进团队谋人事，把人才的价值最大化，把用人的难度最小化。

就像视频中所言“问题不一定都有答案，但对「人」的探索，却正在成为先进团队的共识”。那在设计表现维度，如何兼顾「组织」与「产品」这两种属性，还能更好的诠释“人”的内核呢？

会「发光」的发布会视觉识别系统

以人为进 —— 以人为「镜」

“人”这个主题，我们再熟悉不过。那么如何解构大家熟悉的话题，每一天都有新的手稿将前一天的讨论淹没，但是让所有人怦然心动的想法却始终杳无踪影。

灵感迸发的热情在时间的进程中逐渐滋生出疲倦，然而灵感总是在这样垂头丧气的困境中突然跳出来，给了所有人一个惊喜——

“ 可否试试「光」，我想说的是每一个员工都是一束光，都蕴含着自己的力量，但是需要一个发现的契机或者平台来助力 ”

“一束光在常人眼中只是平常，我们如何通过视觉的方式来表现出抽象的「光的力量」？是否可以通过一种介质，譬如「三棱镜」、「钻石」 ，让我们能够「看见」无形的力量，或者说是人的「潜力」、「活力」和「多样性」”

“飞书的 people 产品提供了多维度的信息，把一个人的多面价值充分展现出来。让每一个员工都可以发光”

顺着这束「光」的指引，「多彩」、「钻石」、「镜面」、「折射」、「晶莹剔透」…一个个或具象、或抽象的关键词如雨后春笋般在我们干枯了 N 天的会议室内冒了出来，视觉设计内核也在这一次讨论后正式确立，并在后续的提案中获得通过。

由点到面 —— 从概念到主视觉

前期的概念脑暴只是给我们的命题作文确定了一个核心立意，但是怎么写出个漂亮的开头，关键还得看主视觉的表达。一个个视觉关键词，只是我们设计内部沟通的暗语而已，画面——才是与受众最直接的沟通方式。

同时，从静态到动态，从二维到三维，后续的场景延伸给视觉的创作提供了多样化的表达空间，同时也对其提出了更高层面的制作和考量要求。

草图推导

三维搭建

完稿输出

用光线「点亮」一套视觉识别系统

主视觉，只是整场发布会的开始。对于飞书这样大体量的一场发布会，它需要的是在各个场景下的一套完整的视觉解决方案。因此，我们需要将主视觉中的「光」延展开来，照亮整个 VI 视觉识别系统。

飞书空间 —— 虚拟拍摄 1. 空间 —— 产品的场所

对于用户来说，飞书是一个 APP，是一个工具，同时，它也是一面镜子，将企业内部真实的协作与管理场景映射到数字化的虚拟世界中。

我们将这个虚拟的数字世界称之为「飞书空间」。亚里士多德将「空间」定义为「事物的场所」，对于飞书而言，「飞书空间」即「飞书产品的场所」，由虚拟抽象化的人事、招聘、绩效等的界面元素所构成。飞书通过构建这样的空间，助力各个先进企业，让管与理回归本质，人与事互相成就。

不同于常见的「城市」、「社区」等概念，我们想通过「空间」一词，更多地表达关于「相对性」和「无限性」的理解，其中「相对性」是指飞书内部各个产品之间紧密的相对依存关系，「无限性」则是寓意着飞书未来的无限可能。

在各个子场景设计上，我们希望尽可能地将飞书产品的特性进行空间视觉语言的转译与融合，例如飞书 OKR 场景的圆环形层叠穹顶、飞书人事场景层叠的用户信息卡片、飞书绩效场景的绩效等级地砖等。每一处空间细节即是一条产品特性的说明，无数个这样的小细节搭建出立体的产品空间，搭配演讲者置身其中的倾力演绎，让用户在看似陌生的全新场景中感受到一种似曾相识的亲切。

2. 由面到体 —— 空间视觉语言建构

空间设计整体延续飞书一贯的视觉风格，同时通过细节的刻画，在强化整体品牌心智的基础上，打造和而不同的新意。

形：将飞书品牌标识、People 产品标识、钻石等元素作为主次视觉焦点融入各模块，以抽象的飘带元素贯通整个场景，传递整体的律动感。

色：以飞书品牌的蓝绿双色组合为主，白色作为空间的基础色，营造轻盈的未来科技氛围感。

质：材质上以轻透的玻璃搭配细腻的塑料材质，冷调的自然光作为主光源，辅以隐藏在结构中的环境光，视觉呈现上达到明亮且干净的效果。

构：各个子场景的建构以简洁的几何造型为主，干脆利落的直线与柔和灵动的曲线相互交错，空间呈现生动且有力量。同时，所有的元素布局均将用户的视线聚焦至画面中心，且能够顺畅地实现与下一场景的无缝转接，在保留传统虚拟舞台「聚焦演讲者和演讲内容」的信息传达特性的同时，又能够为用户打造沉浸丝滑的数字化观看体验。

飞书空间

这次大会，有许多同行输出了相关技术测评。可以看到大家最喜欢的环节是猜测哪里是用 XR、哪里是用绿幕，哪里是用实景。虽然不同的场景，技术实现是大不一样的，但我们最大限度的去做好融合，突破技术壁垒。在几种拍摄形式上进行了切换。为整个发布会增加了趣味性。

主场景

产品场景

3. 设计预案—— 异地拍摄的品质保障

我们有 12 个虚拟场景，7 个演讲嘉宾，3 种拍摄方式。同时筹备期间，正面临着多地疫情管控。面对大量不确定性，我们的多位演讲嘉宾无法赶赴拍摄现场录制，这给整个前期拍摄带来巨大的风险和不可控性。那我们该如何确保整场发布会的视觉品质和调性统一呢？

我们第一时间组建了“预案小组”，实现了居家没有绿幕的情况下也可通过简易设备，并利用独有的 AI 智能抠像技术，把演讲嘉宾合成到虚拟场景中。同时在飞书所在的城市工区，利用已有的品牌工作室提前完成绿幕测试与实验，确保无论是异地还是居家，都能保证品质的统一性。

4. 引擎内场景切换 —— 更丝滑的观看体验

在虚拟引擎技术应用上，为了突破以往活动中依靠后期特效包装、实现分段场景衔接的过渡方式，本次发布会创新式地实现了引擎内虚拟场景切换，让同一位演讲人在不中断录制的情况下，能够根据演讲内容实现不同场景的自由切换。

5. 订制化解决方案——更细腻的视效呈现

虚拟场景的设计制作中，往往会尽量避免白色材质和玻璃材质的渲染，因为这两种材质在渲染过程中很容易因为光线过强而过曝，或者因为光线不足而呈现出不连续的过渡色，也就是我们常说的“画面脏脏的”。

除了前期的实景搭建、灯光调度，还有后期的调色加持，本次制作过程中还额外添加了订制化的美术设计，来获得更加统一、真实的视效产出。

增强现实——沉浸式的信息传达 演讲内容的呈现最清晰、直观、重要的载体是 PPT。演讲过程中有大量时间需要 PPT 全屏显示。这对 PPT 的美观度要求非常高。演讲者对内容的修改不可避免会精益求精，修改到最后一秒。所以我们对 PPT 需要输出充分的规范，和组件化。在各种紧急情况下保证品质。

除了视觉美观外，将演讲嘉宾的文字内容转化为 AR 视觉，使得演讲内容能够更加生动地传递给在线观众，提升整体内容可视化的创意性和关注度，这也是我们所追求的效果之一。

网站体验提升计划 在体验设计层面，飞书官网、活动主站、直播页是每年的重头戏，是发布会与用户接触的核心入口。我们围绕「简化操作」、「增强氛围」、「提升互动感」三个改版方向进行探索实验，以帮助业务更快的达成数据目标。

1. 飞书官网

2. 活动主站

3. 增强氛围与互动感

除此之外，我们还打造了一套从观看到直播结束的沉浸式浏览方式，这里面既有「首页换肤」、「倒计时」的常规操作，也有针对直播页特殊定制的「动态 Emoji」表情，每一个节点上，用户都可以感受到春季发布会的满满心意。

动态 Emoji 让用户的表达过程更加愉悦：以前我们也许需要按下无数个静态小表情来强调当下的心情，现在只需要一个动态表情就能更准确、更快速地传达我们的心中所想。

未来·无限思考 以上提到的设计解决方案，都是在过去的时间里，我们不断精心打磨的颗颗“钻石”，但从更长远的维度来看，我们依然还有很长的一段路要走。因为疫情的关系，线上发布的形式预计会成为未来的常态，那「成本与效果」之间如何获得更大的增益？ 这是一个我们需要思考的问题。

经历过发布会的同学都会知道，内容的持续变更也是一个不可更改的常态，我们也需要思考如何从「重后期变成轻后期」，让质量的完成度在时间线上提前一点、再提前一点。

其实完全线上化后，整个环节更像在拍摄一场电影。未来，新的技术和工具将会源源不断地出现，对于团队成员的整体素质和技能要求也会更加地多元化。镜头语言的转译、分镜脚本的编写、后期素材的合成，导演、编剧、摄影、文案，团队能否快速组建出这样的一支队伍？ 设计师 能否在其中找准自己的定位？展现给观众每一帧的背后都是无数个小伙伴的努力。

写在最后 3 个月的时间，好像经历了一场漫长的进化之路，这里面要感谢很多人：

首先是要感谢市场团队的信任和包容；其次要感谢承接整场发布会的第三方执行团队，如果没有他们的的全力支持，我们就没法看到那么细腻的画面效果落地；最后要感谢所有参与此次发布会的工作人员的努力。

最后我们用一个简短的视频合集，与大家一起分享那段难忘的奋战时光。

声明：以上信息内容仅代表作者本人意见及观点，版权归属作者本人及其公司，任何主体未经书面授权不得转载、摘编或利用其他方式使用该等信息内容。

相关阅读：

字节跳动出品！飞书 5.0 品牌升级完整设计复盘 本文阐述了在飞书5.0品牌升级项目中，飞书品牌创意团队的所思所想。

阅读文章 >

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

昨天看到一个小伙伴在群里分享了一个网站——动效周期表（Motion Periodic Table），里面以“元素周期表”的形式罗列出Ae常用的73种基础动效，非常有意思。今天就为大家介绍一下这个网站，并推荐一系列AE 基础动效 入门学习的高质量免费教程，一起来看看吧~

动效周期表 Motion Periodic Table 网址直达： http://foxcodex.html.xdomain.jp/index.html （需梯子）

「动效周期表」是由日本设计师 Kazuki Akamine 在 2015 年作为毕业设计创作的，旨在降低初学者了解动效基础知识的难度。「动效周期表」借用了元素周期表的形式，按相似性将不同的基础动效分为 14 个系列（纵列），一共 73 个动效。

14 个系列分别是：偏移旋转系列、变形系列、时间操纵系列、5 组特殊效果系列、脚本系列、扭曲系列、扩散系列、模糊系列、灯光系列、移动系列、旋转系列、缩放系列、修剪系列和分形系列，其中重要且常用的动效都排列在表格上层。

学习动效的门槛并不低，初学者在看到一个动效作品时，很难立刻就能说出它是由哪些基础动效构成的，而动效周期表就能帮助初学者解决这些问题。它提供了一个系统化的动效知识体系，方便初学者理解并记忆，极大降低了学习难度。

超全面！写给设计师的动效知识库 Motion Graphic 也称为 Mg 或者 Mograh，通常翻译为动效或者动态图形。

阅读文章 >

其实优优教程网早在 2019 年就开始根据动效周期表里面的内容，制作免费的基础动效系列教程。目前优优教程网已经更新了 3 期动效周期表详解和 55 期 动效教程 视频，质量非常高，想自学 AE 的小伙伴们千万不要错过~

高质量免费动效入门教程 ① 动效周期表详解

详解有 3 期，对动效周期表内每个基础动效的原理，制作过程及引用拓展有详细说明。

「教程链接」

AE 教程！动效周期表解析（上） https://uiiiuiii.com/aftereffects/1212379817.html

AE 教程！动效周期表解析（中） https://uiiiuiii.com/aftereffects/1212383548.html

AE 教程！动效周期表解析（下） https://uiiiuiii.com/aftereffects/1212383842.html

② 动效周期表入门系列教程

这个系列教程目前有 55 期，每一期都以视频的方式教程大家动效周期表里一个基础效果，并且延展教授这种基础效果的应用场景。

「教程链接」

73 个设计师必备的基础动效教学 https://uiiiuiii.com/aftereffects/12127671.html

好啦以上就是今天推荐的动效基础入门相关免费资源，喜欢的小伙伴记得点赞收藏，也可以转发给身边有需要朋友。如果你有关于本文或者其他设计疑问，可以在评论区提出，我会第一时间为大家解答~ 也欢迎大家加入优设官方设计交流群，和优设主编、设计总监及其他热爱设计的小伙伴一起探讨学习（入群二维码见文末 Banner）~

更多动效学习相关文章：

腾讯高手出品！动效设计基础（一）：运动曲线与缓动 Heyu：作为设计师，我们经常接到这样的需求：XX App中的动效好酷啊，我们也做一个吧。

阅读文章 >

腾讯高手出品！动效设计基础（二）：动效的应用 Heyu：在上一篇文章《动效设计基础（一）：缓动与运动曲线》中，我们讨论了动效的几种常见形式以及缓动的重要性。

阅读文章 >