导语 通过与重磅 IP 合作，《 和平精英 》打造出「与高达并肩」、「正义战士和平守护」的赛季主题。本期为大家呈现光子设计团队如何在不同环节中，打通内外营销和体验设计，协力共创炫酷机甲风视觉设计。

Edit｜Hulk，Charlene

本期机甲主题为您呈现四个设计环节：

1. IP 创意设计 2. 品牌视觉设计 3. 主题 界面设计 4. 衍生品设计

IP 创意设计 和平精英 x 机动战士高达 SEED

光子品牌设计团队和创意设计团队，首先启动机甲主题设计的新思路，以 SEED 里最强战斗状态“爆种”，作为联动海报套装的基础设定。代表和平玩家们最强竞技与冒险精神，唤醒高达迷的情怀，凸显特种兵的英勇无畏、积极向上的品质。

SEED联动海报

新版本系列海报，整体强调《高达 SEED》中的特有元素：运输、驾驶、爆种，结合《和平精英》的角色、场景和新玩法，配合动漫风格的视觉质感，还原高达色彩。特种兵和高达互动，通过画面讲故事，让用户产生共鸣和认同。

高达新版本海报

“与高达并肩”视频，用一次高达驾照考试，开启特种兵的太空之旅，最大化版本魅力。

和平精英 x SEED | 爆种！与高达并肩

和平精英 x 孙世前工作室

本次主题设计，也联合机甲艺术家孙世前，一起实现中国“和平机甲”计划，让 游戏设计 与中华文化携手共进。结合冬天上线时间，联动海报以雪山为背景，星辰守护者与站在空投箱上的孙老师、光子鸡互动，整体画面彰显东方意境与苍茫气势。

机甲联动海报

“披甲，上阵”海报，分别从传统文化的「图腾」符号、李白的《登广武古战场怀古》诗词里，提取了三个图腾及其深刻内涵：虎（勇敢）、龙（守护），鹰（自由）。

飞鹰，啸虎和赤龙

和平精英x高达 | 披甲，上阵！

《和平之翼》玩法海报

登场的四大高达 —— 自由、正义、强袭高达、母舰大天使号，与和平小队成员一起同框出镜。

和平之翼海报

新玩法 机动空投

《古战神甲》海报

作为《和平精英》的首个“硬核机甲”系列时装，海报设计中使用了“龙”与“长城”的概念。机甲的机库拼接组成了一条全新的“机甲长城龙”。在它前面矗立着的战甲角色，如驻守长城的卫士，一起守护和平世界，传承和平精神。

古战神甲海报

独立海报

时装海报，背景是拼合了凌厉切割的平面色块，加入机甲模型身上常见的金属刻线和贴纸元素，呈现《和平精英》定制版机甲模型盒封绘风格。

机甲款时装海报

道具海报在机库里布置装备，旁边舱门打开，在阳光和彩虹的祝福下，是出击前的整装待发。

道具海报

主题界面设计 凛冬已至，赛季切换，换上中国机甲，开启 SS16 赛季！

赛季切换

‍‍‍‍‍特种兵快速穿越高达战舰长廊，进入新赛季的紧急备战状态！舱门逐个打开，展示SS15的最高段位、本赛季的起始段位，以及段位奖励。

赛季切换

赛季主页的设计，是从长廊进入到了战舰中。在界面上可查阅各种信息，遥望远方，在雪景中可以看到玩家熟悉的大天使号、降落伞和空投箱。机舱环境、LOGO 和界面设计，打造未来科技感让玩家身临其境。

赛季主页

赛季手册

游戏内异形海报

进入游戏后，在弹出的异形海报上，长城的城楼，成为了展示古战神甲和装备的舞台。通过微仰望视角，展示神甲的高大威猛和挺拔身姿，传达中华战士的正义形象。弧形上仰的腾飞长城龙，与新飞行器一起出场，诠释积极向上的和平精神。

主界面海报设计

古战神甲

进入了战舰的内部，仰望为英勇善战的特种兵精英，所增设的更高规格装备库。

兑换界面

兑换界面 动态展示

衍生品设计 机甲主题设计衍生品的规划，是以“中国机甲”的设计理念为切入点，再加入“潮流”的艺术风格，并运用古唐诗里的山水元素，作为点缀。

本次套装包括：机甲三级头潮流摆件、HECATE 漫步者电竞联名蓝牙耳机、机甲潮流服饰等。

机甲系列衍生品 KV

机甲三级头摆件 产品设定

机甲三级头摆件 包装

GT4和平精英联名款

机甲潮流服饰

光子内部多团队联合演绎，将高达的进取精神和中国机甲传承的优秀文化，与《和平精英》的战斗艺术细致融合，交叉协作打通思路，致力于让玩家在游戏的内外，享受订制主题的多重视觉体验。将游戏和机甲，融入玩家生活。

部分作品文案和效果的展示为临时状态，最终效果以游戏内呈现为准。

官方出品！《英雄联盟手游》是如何做好界面概念设计的？ 在玩游戏的时候，我们都忙着挑选英雄和符文、策划路线和打法，不自觉就沉浸在游戏世界里。

阅读文章 >

欢迎关注作者微信公众号：「腾讯设计族」

导语 通过与重磅 IP 合作，《 和平精英 》打造出「与高达并肩」、「正义战士和平守护」的赛季主题。本期为大家呈现光子设计团队如何在不同环节中，打通内外营销和体验设计，协力共创炫酷机甲风视觉设计。

Edit｜Hulk，Charlene

本期机甲主题为您呈现四个设计环节：

1. IP 创意设计 2. 品牌视觉设计 3. 主题 界面设计 4. 衍生品设计

IP 创意设计 和平精英 x 机动战士高达 SEED

光子品牌设计团队和创意设计团队，首先启动机甲主题设计的新思路，以 SEED 里最强战斗状态“爆种”，作为联动海报套装的基础设定。代表和平玩家们最强竞技与冒险精神，唤醒高达迷的情怀，凸显特种兵的英勇无畏、积极向上的品质。

SEED联动海报

新版本系列海报，整体强调《高达 SEED》中的特有元素：运输、驾驶、爆种，结合《和平精英》的角色、场景和新玩法，配合动漫风格的视觉质感，还原高达色彩。特种兵和高达互动，通过画面讲故事，让用户产生共鸣和认同。

高达新版本海报

“与高达并肩”视频，用一次高达驾照考试，开启特种兵的太空之旅，最大化版本魅力。

和平精英 x SEED | 爆种！与高达并肩

和平精英 x 孙世前工作室

本次主题设计，也联合机甲艺术家孙世前，一起实现中国“和平机甲”计划，让 游戏设计 与中华文化携手共进。结合冬天上线时间，联动海报以雪山为背景，星辰守护者与站在空投箱上的孙老师、光子鸡互动，整体画面彰显东方意境与苍茫气势。

机甲联动海报

“披甲，上阵”海报，分别从传统文化的「图腾」符号、李白的《登广武古战场怀古》诗词里，提取了三个图腾及其深刻内涵：虎（勇敢）、龙（守护），鹰（自由）。

飞鹰，啸虎和赤龙

和平精英x高达 | 披甲，上阵！

《和平之翼》玩法海报

登场的四大高达 —— 自由、正义、强袭高达、母舰大天使号，与和平小队成员一起同框出镜。

和平之翼海报

新玩法 机动空投

《古战神甲》海报

作为《和平精英》的首个“硬核机甲”系列时装，海报设计中使用了“龙”与“长城”的概念。机甲的机库拼接组成了一条全新的“机甲长城龙”。在它前面矗立着的战甲角色，如驻守长城的卫士，一起守护和平世界，传承和平精神。

古战神甲海报

独立海报

时装海报，背景是拼合了凌厉切割的平面色块，加入机甲模型身上常见的金属刻线和贴纸元素，呈现《和平精英》定制版机甲模型盒封绘风格。

机甲款时装海报

道具海报在机库里布置装备，旁边舱门打开，在阳光和彩虹的祝福下，是出击前的整装待发。

道具海报

主题界面设计 凛冬已至，赛季切换，换上中国机甲，开启 SS16 赛季！

赛季切换

‍‍‍‍‍特种兵快速穿越高达战舰长廊，进入新赛季的紧急备战状态！舱门逐个打开，展示SS15的最高段位、本赛季的起始段位，以及段位奖励。

赛季切换

赛季主页的设计，是从长廊进入到了战舰中。在界面上可查阅各种信息，遥望远方，在雪景中可以看到玩家熟悉的大天使号、降落伞和空投箱。机舱环境、LOGO 和界面设计，打造未来科技感让玩家身临其境。

赛季主页

赛季手册

游戏内异形海报

进入游戏后，在弹出的异形海报上，长城的城楼，成为了展示古战神甲和装备的舞台。通过微仰望视角，展示神甲的高大威猛和挺拔身姿，传达中华战士的正义形象。弧形上仰的腾飞长城龙，与新飞行器一起出场，诠释积极向上的和平精神。

主界面海报设计

古战神甲

进入了战舰的内部，仰望为英勇善战的特种兵精英，所增设的更高规格装备库。

兑换界面

兑换界面 动态展示

衍生品设计 机甲主题设计衍生品的规划，是以“中国机甲”的设计理念为切入点，再加入“潮流”的艺术风格，并运用古唐诗里的山水元素，作为点缀。

本次套装包括：机甲三级头潮流摆件、HECATE 漫步者电竞联名蓝牙耳机、机甲潮流服饰等。

机甲系列衍生品 KV

机甲三级头摆件 产品设定

机甲三级头摆件 包装

GT4和平精英联名款

机甲潮流服饰

光子内部多团队联合演绎，将高达的进取精神和中国机甲传承的优秀文化，与《和平精英》的战斗艺术细致融合，交叉协作打通思路，致力于让玩家在游戏的内外，享受订制主题的多重视觉体验。将游戏和机甲，融入玩家生活。

部分作品文案和效果的展示为临时状态，最终效果以游戏内呈现为准。

官方出品！《英雄联盟手游》是如何做好界面概念设计的？ 在玩游戏的时候，我们都忙着挑选英雄和符文、策划路线和打法，不自觉就沉浸在游戏世界里。

阅读文章 >

欢迎关注作者微信公众号：「腾讯设计族」

你是不是也遇到过，好不容易做好的内容，一上传到平台就被切割了，显示不全！那是因为你的尺寸设置的不对噢

今天给大家整理了一波自媒体平台常用的各种尺寸，快看看吧~

你是不是也遇到过，好不容易做好的内容，一上传到平台就被切割了，显示不全！那是因为你的尺寸设置的不对噢

今天给大家整理了一波自媒体平台常用的各种尺寸，快看看吧~

大家好，我是小六。今天给大家分享在可视化设计中，最常用的 动效落地 方案介绍，这一次是一个非常非常干的干货，手把手教你如何配合开发将小 动效 在页面中展示出来。希望可以带给大家更多帮助！

前言 最近在做项目中遇到一些问题，有些效果开发实现出来跟实际相差较大、被产品拿着设计稿戏称为买家秀、卖家秀的区别。还会有些情况是因为项目排期问题开发落地有一定成本，希望能快速落地。还有的开发直接说搞不了等等。借这次整理一下动效落地过程中遇到的坑，同事展开聊一下 设计师 对接前端做动效落地的一些最常用的方法，最后会把文中提到的插件软件整理打包分享给大家。

常见的开发对接方式

1. GIF 2. PNG 序列 3. APNG 4. Lottie 5. SVGA 6. MP4

GIF Gif 是现有市面上应用最广泛的动效格式了，最早起始于 1987 年 由 CompuServe 公司引入。

谨此纪念 Steve Wilhite：关于 GiF 和创始人你不知道的 9 件事 2022 年 3 月 14 日，GIF 动图的发明者 Steve Wilhite 因新冠并发症去世，享年 74 岁。

阅读文章 >

优点：兼容性好几乎所以浏览器都支持、文件能够快速输出。

缺点：颜色仅支持 8 位 256 颜色，支持半透明、颜色有限导出文件体积大而且有锯齿，效果差透明导出会有白边。

输出：GIF 文件有多种输出方法这里给大家罗列比较常用的，大家按需使用。

1. 通过 ae 导出 png 序列或者 mov 视频 拖入 ps 导出

2. Adobe Media Encoder（需要跟 ae 版本一致就可以软件联动直接导出 gif）

3. AEscripts GifGun 是一款可以直接在 AE 里一键创建输出 GIF 动画格式脚本

GIF 压缩的方法可以看这篇：

如何正确压缩GIF格式文件？来看京东设计师的总结！ 本文主要介绍了羚珑动图产品侧对压缩GIF格式文件的探索，其中归纳了压缩GIF的各种方法以及相关开源工具，可以为需要压缩GIF文件的设计师提供帮助。

阅读文章 >

PNG 序列 由 PNG 图片组成的序列帧。

优点：兼容性非常好、效果还原高、颜色丰富。

缺点：文件比较大，动效比较复杂的话输出 png 序列可能好几百张，会影响浏览器性能。

输出：可 ae 等动效软件直接输出。

APNG APNG 是一个基于 PNG 的位图动画格式，它的动图后缀依然是.png。

优点：颜色丰富，支持 1600 万种颜色，支持渐变透明，无损压缩。

缺点：文件过大，兼容性差受浏览器、系统版本等限制。

在 web 端对于主流的浏览器 Firefox、Safari、Chrome 都能够兼容。

输出：

1. 通过 iSparta 软件导出。操作步骤是将 png 序列拽到 iSparta 软件中点击开始即可导出 apng，此软件一共可以导出三种格式，APNG/GIF/WEBP

2. AE BX-WebpApngExporter 插件

Lottie Lottie 是 Airbnb 开源的一套跨平台的完整的动画效果解决方案，用 AE 做完动画后，使用 Lottie 提供的 Bodymovin 插件将导出成 JSON 格式，就可以直接运用在 Web 上，无需其他额外操作。

一篇文章帮你了解AE动画插件Lottie的前世今生（附避坑案例） 大家好，我是彩云。

阅读文章 >

优点：文件小、颜色丰富，开发可以控制大小、速度、循环次数等参数。

缺点：不支持渐变、粒子、阴影透视等效果，表达式也只支持一部分，部分位图文件输出的效果失真，需手动替换。

输出：使用: AE 菜单栏窗口 – 扩展 — Bodymovin — 导出.json文件

设置选项里了选择输出一个 HTML 的本地文件，可打开进行预览

bodymovie 插件下载地址： https://github.com/bigxixi/bodymovin_cn

bodymovin 需要这个安装器才能安装，推荐 zxp 安装器下载地址 https://zxpinstaller.com/

SVGA SVGA 是一种同时兼容 iOS / Android / Flutter / Web 多个平台的动画格式。

优点：便捷 SDK 开发集成步骤轻松简单。支持大部分效果、体积小、动画还原效果好

缺点：有损压缩，兼容性不太好有的平台不支持，移动端用的居多

输出：ae 选择 菜单 > 窗口 > 扩展 > SVGAConverter

MP4 MP4 是一种常用的视频格式，也通常运用于直接对接开发。

优点：兼容性好，文件能够快速输出，文件小。

缺点：视频格式项目中过多的话影响性能，效果会有压缩。

输出：Adobe Media Encoder（需要跟 ae 版本一致就可以软件联动直接导出 MP4），ae 中菜单-合成-添加到 Adobe Media Encoder 队列，直接可以输出 MP4 文件。

最后 以上介绍的几种动效落地方案，是目前比较主流的方法， 基本可以满足产品中动效落地，而且能够大大节省开发的时间和产品的稳定性。

如何让动效又快又好落地？我分析了这5种格式的优缺点！ 动效设计，可以提升界面的趣味性和引导性，让用户浏览过程中不会太枯燥，获得更好的体验。

阅读文章 >

欢迎关注作者微信公众号：「小六可视化设计」

往期回顾：

企业出海！设计师如何做好产品本地化设计：印尼篇 可以预见的是，企业出海会是未来两年的趋势之一，特别是东南亚国家，这两年经济增速很快，成为了国内诸多公司的出海首选。

阅读文章 >

企业出海！设计师如何做好产品本地化设计：竞品分析印尼篇 上一章，我们宽泛的了解印尼的宏观环境、电商市场、移动市场、支付、物流、税收、汽车及两轮汽车市场、汽车后市场。

阅读文章 >

企业出海如何做好产品本地化设计：C 端实战复盘 2020 年小编及团队成员对 Speedwork Customer App 及 Workshop App 进行了“从 0 到 1”的设计，包括设计理念到视觉语言，界面框架到组件模式，单用户触点到全链路场景。

阅读文章 >

汽车养护服务市场是一个复杂的 F2B2b2C 行业供应链，参与者需要把用户、供给和履约都做好，并不断优化三者的服务能力，从而形成一个完整的闭环服务系统。

作为提供一站式汽车养护服务平台的 Speedwork 连接了用户与商户，平台需要将数字化能力赋能给商户帮助其管理及运营门店，同时还为商户提供汽配供应链，构建商业模式的闭环，打造汽车服务生态系统。

Gtech 佳应科技以技术为驱动，实现价值创造最大化。我们为商家打造了掌上门店管理应用 SpeedBiz，提供线上线下订单的统一管理、商品及库存管理、员工管理、销售报表等功能，同时还能进行一站式的轮胎、汽配件采购。针对平台侧提供了 SpeedShop Enterprice 业务中台，帮助平台运营管理门店、商品、促销、会员及全渠道订单。

B 端设计内核探索 B 端 C 化也是近几年 B 端产品的设计趋势，之所以有这种趋势是因为无论 2B 还是 2C，最终使用者都是人，我们都在为人的使用做设计，因此从以往的 B 端 IT 直接开发交付，到现在要以 C 端产品的用户体验设计标准来交付，企业开始重视整个业务链路上的所有产品体验设计，能够帮助商家数字化运营赋能且提高工作效率，是 B 端产品的核心。站在公司战略侧，SpeedBiz 的交付不是针对 Speedwork 本身定制化的产品开发，我们更希望能做 L 型能力的产品，在此基础上让产品具备商业化能力，复用性以增加其价值，可以使用到其他业务场景，或者赋能给更多企业，在这里埋个伏笔，后续系列文章中，我们会介绍到通用版的门店管理系统的设计，支持多语言多终端，能够灵活适用到汽后市场不同的业务场景。

B 端的用户体验建立在解决客观问题、提高工作效率的基础上，他们相对理性，所有的操作都是在完成某个任务，而不是毫无目的的闲逛或是消磨时间。每个任务都是一个闭环，每一个任务都尽可能降低用户各种操作及学习成本，让用户感觉到“简单”、“稳定”、“高效”。因此 Speedwork Workshop App 的核心设计理念为：简单、稳定、高效。

用户定性研究 明确了解目标用户，并对其进行定性的研究，确定用户画像，根据真实的业务场景进行体验设计。Speedwork workshop App 目标用户是门店老板及维修技师，少数门店还有收银岗位，门店类型分为摩托及汽车维修门店。我们在描绘 B 端用户画像时应注重职位、门店规模、利润水平、业务需求等。不同的职位决定了不同的使用场景，比如老板/经理作为最高权限的用户，他能使用产品内所有功能，查看全部数据，而维修技师往往只需要关注本职工作，完成上级分配的订单，并可进行日常上下班打卡即可。

B 端视觉规范 一期上线的印尼版 Speedwork workshop App，延续了 C 端 视觉规范 设计体系，在商户端同样需要建立平台品牌心智，让商户侧感受到 Speedwork 平台对于 产品设计 的用心以及专业性。

卡片式模块化的布局可以灵活支持功能拓展，界面简洁、布局清晰，注重信息的有效表达和操作的便捷性。

典型场景的交互设计 主要有 3 种典型使用场景：

1. 订单管理

针对全渠道的线上订单跟进处理；针对线下的订单进行录入

2. 商品管理

管理线下销售的商品，主要用于非平台商品的录入

3. 查看销售报表

查看线上线下客流、交易流水、支付方式占比、毛利分析、产品及类目销售排行等经营数据

7000字干货！东南亚本地化产品设计差异：印尼篇 印尼是东南亚人口最多的一个国家，人口超过 2.65 亿（还是 2019 年末的数据，现在应该近 3 亿），其中 30 岁以下人口占比超过 50%。

阅读文章 >

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

地图 App 已经不再满足导航工具，通过信息挖掘和拓展，更希望能够成为人们日常生活中重要的信息平台。刚好回老家期间， 高德地图 用得比较多。使用过程中发现了一些比较有意思的细节，觉得有必要总结下分享给大家。

主要包括以下 3 点内容：

1. 信息架构升级，构建清晰的信息边界

2. 信息挖掘，更好的服务用户出行

3. 智能感知，提高用户行为效率

信息架构升级，构建清晰的信息边界 高德 10.0 版本升级了平台的信息架构。原有的版本并没有做信息分层，而是以地图画面为核心，将各类信息分散展示，出行功能路径入口共用“路线”功能，影响了用户的操作效率。

另外为了减少各个功能对地图的遮挡，功能选项只能尽可能的融合、隐藏、精简，造成了部分入口信息层级较深，拉长了用户的行为链路，同时不利于功能和内容的拓展。

在新的版本中，信息架构回归到传统的底部 Tab 导航形式，可以更好的拓展信息承载空间，满足信息平台型产品的设计定位。目前底部导航分为“首页、附近、消息、我的”四个频道，用户可以分类查看内容，信息结构更加清晰。

图片来自 AlibabaDesign

在首页中，高德地图打造了“内容中心”来承载更多信息。将”地图“与”内容“相互独立，构建出了明确的信息边界。

交互设计上，内容中心采用弹性浮层方式，分为了 3 种模式。默认模式下，内容中心展示快捷功能”工具箱“和常用地点，方便用户快捷操作。当“内容中心”下拉收起，可以释放更多的屏幕空间给地图。上滑则进入“更多模式”，为用户提供更丰富的信息。

“内容中心”的信息会根据用户实际位置，搜索地点而变化。例如我在北京时，会显示北京的专享服务。而我搜索上海的地点，首页下方则增加了上海的推荐信息。

信息挖掘，更好的服务用户出行 1. 地图信息颗粒度细化，提高信息承载能力

一个地点除了基础的地理信息外，还需要集合各类相关信息，为用户做好出行服务。如何将复杂多样的信息整合，实现“所见即所得”展示给用户呢？

高德地图采用了“内容分类”的方式来展示地理位置的二级信息，从而提高地图信息的承载量。

当地图定位到景区范围内，会显示厕所、出入口、餐饮、停车场等信息选项，用户点击即可查看相应的内容。

而大型商场聚焦放大时，用户可以查看商场楼层的店铺信息，将细节信息融入在地图中，通过多层级的信息划分，展示不同颗粒度的内容。

2. 实景信息，提高用户决策准确性

当我们进入一个陌生区域，乘坐公交车时，需要准确知道公交车站的位置。而公交车是有方向的，一旦我们进入了错误的方向，可能需要横穿马路或者绕行很远才能抵达正确的公交站点，这会花费用户很大的体力和时间成本。

当用户规划出行路线时，地图路线中通过冒泡提示形式，引导用户查看公交站点的实景地图，方便用户更准确的定位。

3. 场景化信息挖掘，为用户提供更好的服务体验

当用户搜索酒店时，在页面上方会展示“查看附近酒店”的快捷按钮。方便用户快速查看周边的酒店，进行对比选择。

如果用户在非营业时段搜索商业场所，会展示不同的信息状态。例如深夜搜索时，显示“已打烊”状态，而在清晨搜索时，显示”未营业“状态，并告知营业时间，避免用户跑冤枉路。

当用户查询驾车路线时，如果查询的地点不是特别明确，系统会提供多个地点供用户选择，并增加了各个地点的选择比例，降低不熟悉用户的选择成本。另外选项中不仅有停车场景，还考虑到了接送人临时停车的场景，实现了多场景的覆盖。

4. 激活用户群，实现信息共享

当用户计划出行时，希望了解目的地的天气、游玩情况。有些信息平台无法给出明确的答案，于是高德地图将发言权交给了有经验的用户，搭建相互交流的群组，实现了信息的共享交换。

智能感知，提高用户行为效率 1. 用户行为态势感知

当用户打开 App、搜索地点或者行程导航时，高德地图会主动感知用户的导航需求，提供相关的信息引导。例如上下班路线、消费券、团购优惠、停车场建议等等引导信息，引导用户的快捷操作。

另外用户查询地点时，地图还会扩充展示周边地点的卖点信息，希望能够为用户提供更多的参考信息。

2. 行程查询记录的保存

用户在查询打车行程，但未打车时，信息会保存在首页信息中，便于用户随时调用出行。

以上就是我的一些使用心得，欢迎小伙伴们评论区留言交流~

下期再见。

10个产品细节剖析，看看大厂是如何做设计的！ UI/UX 设计能力的提升离不开分析与探索，针对优秀产品的设计进行分析总结，探索设计背后的经验规则。

阅读文章 >

欢迎关注作者 微信 公众号：「子牧UXD」

大家好，我是小六。今天给大家分享在可视化设计中，最常用的 动效落地 方案介绍，这一次是一个非常非常干的干货，手把手教你如何配合开发将小 动效 在页面中展示出来。希望可以带给大家更多帮助！

前言 最近在做项目中遇到一些问题，有些效果开发实现出来跟实际相差较大、被产品拿着设计稿戏称为买家秀、卖家秀的区别。还会有些情况是因为项目排期问题开发落地有一定成本，希望能快速落地。还有的开发直接说搞不了等等。借这次整理一下动效落地过程中遇到的坑，同事展开聊一下 设计师 对接前端做动效落地的一些最常用的方法，最后会把文中提到的插件软件整理打包分享给大家。

常见的开发对接方式

1. GIF 2. PNG 序列 3. APNG 4. Lottie 5. SVGA 6. MP4

GIF Gif 是现有市面上应用最广泛的动效格式了，最早起始于 1987 年 由 CompuServe 公司引入。

谨此纪念 Steve Wilhite：关于 GiF 和创始人你不知道的 9 件事 2022 年 3 月 14 日，GIF 动图的发明者 Steve Wilhite 因新冠并发症去世，享年 74 岁。

阅读文章 >

优点：兼容性好几乎所以浏览器都支持、文件能够快速输出。

缺点：颜色仅支持 8 位 256 颜色，支持半透明、颜色有限导出文件体积大而且有锯齿，效果差透明导出会有白边。

输出：GIF 文件有多种输出方法这里给大家罗列比较常用的，大家按需使用。

1. 通过 ae 导出 png 序列或者 mov 视频 拖入 ps 导出

2. Adobe Media Encoder（需要跟 ae 版本一致就可以软件联动直接导出 gif）

3. AEscripts GifGun 是一款可以直接在 AE 里一键创建输出 GIF 动画格式脚本

GIF 压缩的方法可以看这篇：

如何正确压缩GIF格式文件？来看京东设计师的总结！ 本文主要介绍了羚珑动图产品侧对压缩GIF格式文件的探索，其中归纳了压缩GIF的各种方法以及相关开源工具，可以为需要压缩GIF文件的设计师提供帮助。

阅读文章 >

PNG 序列 由 PNG 图片组成的序列帧。

优点：兼容性非常好、效果还原高、颜色丰富。

缺点：文件比较大，动效比较复杂的话输出 png 序列可能好几百张，会影响浏览器性能。

输出：可 ae 等动效软件直接输出。

APNG APNG 是一个基于 PNG 的位图动画格式，它的动图后缀依然是.png。

优点：颜色丰富，支持 1600 万种颜色，支持渐变透明，无损压缩。

缺点：文件过大，兼容性差受浏览器、系统版本等限制。

在 web 端对于主流的浏览器 Firefox、Safari、Chrome 都能够兼容。

输出：

1. 通过 iSparta 软件导出。操作步骤是将 png 序列拽到 iSparta 软件中点击开始即可导出 apng，此软件一共可以导出三种格式，APNG/GIF/WEBP

2. AE BX-WebpApngExporter 插件

Lottie Lottie 是 Airbnb 开源的一套跨平台的完整的动画效果解决方案，用 AE 做完动画后，使用 Lottie 提供的 Bodymovin 插件将导出成 JSON 格式，就可以直接运用在 Web 上，无需其他额外操作。

一篇文章帮你了解AE动画插件Lottie的前世今生（附避坑案例） 大家好，我是彩云。

阅读文章 >

优点：文件小、颜色丰富，开发可以控制大小、速度、循环次数等参数。

缺点：不支持渐变、粒子、阴影透视等效果，表达式也只支持一部分，部分位图文件输出的效果失真，需手动替换。

输出：使用: AE 菜单栏窗口 – 扩展 — Bodymovin — 导出.json文件

设置选项里了选择输出一个 HTML 的本地文件，可打开进行预览

bodymovie 插件下载地址： https://github.com/bigxixi/bodymovin_cn

bodymovin 需要这个安装器才能安装，推荐 zxp 安装器下载地址 https://zxpinstaller.com/

SVGA SVGA 是一种同时兼容 iOS / Android / Flutter / Web 多个平台的动画格式。

优点：便捷 SDK 开发集成步骤轻松简单。支持大部分效果、体积小、动画还原效果好

缺点：有损压缩，兼容性不太好有的平台不支持，移动端用的居多

输出：ae 选择 菜单 > 窗口 > 扩展 > SVGAConverter

MP4 MP4 是一种常用的视频格式，也通常运用于直接对接开发。

优点：兼容性好，文件能够快速输出，文件小。

缺点：视频格式项目中过多的话影响性能，效果会有压缩。

输出：Adobe Media Encoder（需要跟 ae 版本一致就可以软件联动直接导出 MP4），ae 中菜单-合成-添加到 Adobe Media Encoder 队列，直接可以输出 MP4 文件。

最后 以上介绍的几种动效落地方案，是目前比较主流的方法， 基本可以满足产品中动效落地，而且能够大大节省开发的时间和产品的稳定性。

如何让动效又快又好落地？我分析了这5种格式的优缺点！ 动效设计，可以提升界面的趣味性和引导性，让用户浏览过程中不会太枯燥，获得更好的体验。

阅读文章 >

欢迎关注作者微信公众号：「小六可视化设计」

本文邀请了优设的优秀老师哔波、林不慌和香奈，为大家分享他们多年的接私单经验。

上期回顾：

自由职业4年多，我总结了完整的私单合作流程 我是从 2018 年年初开始做自由职业的，到现在已有 4 年半的时间，在做独立插画师、设计师的过程中，合作过很多品牌。

阅读文章 >

@AC炒碗面

接私单通常是朋友介绍或者从发作品的平台找寻过来的，和正常工作一样，需要询问清楚意向风格、工作总量、提交时间，这三点是确认自己是否有排期可以接单；然后提供对标作品给需求方，这点是需求方确认是否合作的常规操作，最后才是谈价格，双方确认价格后，收账方式一般是 50%+50%，或者 30%+30%+40%。

确认合作后第一步就是收取 50% 亦或是 30%的定金，收到定金后再工作，收定金前对任何询问创意思路、或者要求帮助找参考的要求都要婉转拒绝。早期接单我觉得走合同更有保证，但是实际上如果经常是几千块的小活，按照喜欢收款方式分步收款即可，走合同意义不大，因为走法律途径追款的成本明显超过这个单子本身的价值。

50%+50%：一般是设计前收款 50%，设计完成交付源文件前收款 50%，30%+30%+40%：设计前收款 30%，设计中期取一个节点（比如线稿完成）收取 30%，设计完成交付源文件前收款 40%。如何选择可以与需求方商量，一般我觉得几千的小活就分两次收款即可。

如果想学类似的扁平插画，可以看我的录播课程，一顿饭钱掌握 ? https://pro.uisdc.com/detail

@Lady不慌 在商业合作中，我们往往会遇到各种各样的合作对象，希望留意一些小细节，让自己在合作中更加顺畅更加直观。

1. 做好自己的作品展示，确立自己的主要风格和方向。

各个作品流平台和社交媒体依然还是一个非常重要的展示机会，保持各个平台的尽量同步更新，在不同的平台类型之间输出不同的类型作品，比如视频和图文两类，平时整理发表作品时不限于图文内容，也可以注意保存视频类型的作品，绘画过程或设计过程或自己关于专业领域的一些心得，发抖音 B 站等尊重各平台的特色，各个平台之间互相引流。不少商业的合作也许都是从这些平台开始跟我们进行联络和了解。

2. 高效的沟通。

当自己的内容平台吸引了一些合作客户时，我觉得高效率的沟通很重要，首先可以在各个作品平台简介上直接了当的注明自己联系方式和商务合作方式，让人一目了然。然后各个社交流媒体或平台都有自己的消息聊天功能，收到合作邀请或意向时尽量及时留联系方式，转到微信或其他去聊，不要在临时的私信或留言界面聊。

3. 对自己价格的理解。

在私单价格沟通方面可以先对自己的作品和水平有一个定位，不至于太模糊，商业合作比较多时，可以有一个门槛价，过滤不感兴趣价格低的合作，与人沟通聊价格时尽量主动，快速判断合作项目的性价比。有时候会遇到各式各样的合作对象，当对方对价格没有概念时，可以快速解释清楚行业价格，遇到自己没有价格概念的时候可以问问行业朋友再去聊

4. 如何避免被坑

首先先看清合同，合作之前咨询清楚对方合同的主要重要条款之类的，之后细看，注意聊清税前税后价格。

关于价格，快速判断出性价比是第一位的，预算较少没有达到心理价位时，注意维持合作的性价比，消减作品投入精力。

有时合作方找你不直接去和你合作你的主营业务和特长，而只是看你综合能力强与你接触，遇上不熟悉的业务又想合作时，可以多沟通一下，不要急于开始合作，或是不熟悉的风格而需求量大时，可以先主动试稿，确立单张的品质各方面再合作。

可以明确单张合作价格，对方有时会以系列数量多而要求降低价格，可以明确单张价格，不因为系列数量多而降低单张价格，避免整体合作性价比降低。

了解合作方的不同，有时作为直接与某品牌或项目合作，有时合作方作为某品牌的代理宣传再次外包合作，聊清合作形式以及付款的时间次序。

可以适当提出修改次数的规定，避免无限制的修改，在合同中说明，比如确定大的定稿方向后最多两次或三次细节调整修改。

有些时候也会遇到无商业合同的合作，遇到新的需要磨合的合作伙伴时，除了内容上的沟通之外呢，记得多聊一些付款流程，可以在合作之前先要求付一些定金，再开始进行创作，结束后，可以要求付完款后再提供输出图和源文件。

如果你对于这类梦幻风格插画感兴趣， 想系统性的学习，不妨关注一下我的私房课：

这类人气超高的治愈系梦幻插画，有 iPad 就能学！ 对设计师而言，iPad 不仅意味着娱乐、看剧，更是画画的绝佳帮手，设计创作的新核心： 它携带方便，可以随时随地画画，上下班路上也能练手； Procreate 功能强大，几乎能满足一切画画需求。

阅读文章 >

香奈：

1. 确认身份

对于新手小白第一次接单，需要了解对方公司或者个人的真实性，避免被骗或者被坑，可以网上搜查或者天眼查验收。

2. 沟通基本需求

① 画的具体内容

② 要求的风格（最好甲方给到具体的参考风格）

③ 难度

④ 预算

⑤ 时间期限

⑥ 报价

3. 签约

签约是为了保障自己的合法权益，必要的内容包括：

1. 合作内容和附件

2. 交付&验收方式（具体交付时间以及验收的方式）

3. 费用的结算与支付（包含具体时间避免被拖欠）

4. 项目成果归属约定（一般成果交付后成果归甲方所有，甲方可同意乙方拥有成果的署名权，可用于参展、参赛等非商业性活动中标注其自身作品时展示和使用等)

5. 保密协议（保密的内容）

6. 作品修改补充（超过三次修改可适当增加修改费用）

7. 争议解决办法（万一发生争议可双方协商或者通过诉讼等方式解决）

4. 报价

有两种情况：

一是甲方主动报预算 这个时候可以根据自己的实力去定夺，适当报高，不要太离谱就可。

二是甲方让作者先报价，尽量往高了报，高了可以谈，但是低了没法往高了谈。

报价公式：报价=时薪 X 绘画时长 X 2（或者根据绘画的难度适当增加）

报价也会和插画师的知名程度成正比，同一个稿子知名的插画师报价可能会比一般的插画师要高的多。同时也会随着自己的个人画技的不算提升和接稿次数的提升而提升。

有的报价可能会包含税点，或者税点对方支付，具体看双方的协商，然后开等额的发票给到对方。

5. 预付款

预付款，一般是稿费总额的 3~5 成，具体看双方的协商。

预付款是为了防止骗稿或者项目因不可控因素导致无法继续，插画师的劳动成果有一定的保障。同时也能根据预付款看出合作方的真实性以及诚意，没有预付的合作都是耍流氓。

6. 试稿

一般来说试稿都是新手遇到的比较多，试稿时有必要跟对方要求一定比例的试稿费用。

一定要沟通确定好，否则试稿不通过浪费自己的时间和精力。可以要求支付单张稿费的 50%或者在自己能承受的范围内协商具体价格。

7. 创作流程

草图

先画大概的草图跟对方确认沟通，画面是否满足对方的要求。

线稿

草图确定后画线稿再进一步确认线稿，这个时候我们需要跟对方确认这个线稿确定后是不能修改的（这个一般都会提前写到合同里）。

上色

线稿确认无误后开始上色，上色完成后可以适当接受修改的次数不超过三次，超过三次需要对方支付一定的修改费用，具体看自己的情况和对方协商而定。

8. 结尾款

截止到结款的过程中，我们发给对方最好是插画的截图或者小图供对方审核，以免遭遇骗稿的风险，只有在对方确认最终画面时候，收到对方的打款再交货。

如果想学我的中国风插画，可以看我的录播课程，一顿饭钱掌握 ? https://pro.uisdc.com/detail