想成为更优秀的设计师， 需要了解设计趋势和受众目标的需求。了解UI/UX设计趋势本质上与了解时尚或者消费行业的趋势并无本质差别，都必须倾听人们的需求，关注人们如何使用产品，创造出美观、简单、易用的设计，使产品脱颖而出。
我们收集了一份UX/UI设计趋势的清单，帮助你了解2022年的相关行业变化。
弹窗到底该不该加？怎么加？用什么形态展示？真正的作用是什么？这些真的是产品经理说了算吗？
好的产品通常会在恰当的时间、合适的位置给出合理的反馈，弹窗也是必不可少的反馈方式，不反馈、反馈不及时或反馈不合理都会带来不好的使用体验，甚至误导用户，从而导致用户流失。很多时候，产品经理会从商业角度、公司业务、资源限制等方面考虑问题，但这些未必是用户所需要的，设计师不应该完全按照产品需求做设计，否则就成了只会照搬产品原型的“美工”。需要做的是从用户角度出发，把产品需求转化成设计目标，只有经过反复的推敲、认真分析，最终才能打磨出服务于用户的弹窗设计，所以弹窗该不该加、如何加就成了设计师不可推卸的责任和使命。
本篇文章将围绕着弹窗类型、使用场景、转化率及常见问题为侧重点，将自己对弹窗的理解、设计经验分享给大家，帮助大家对弹窗组件有更清晰的认识，为后续避坑设计出更好的弹窗做准备。
一、弹窗的基本介绍
二、弹窗体系分类
三、弹窗的使用场景
四、如何设计有效的弹窗
五、需关注的问题点
六、总结
当我们与应用产生主动或被动交互时，页面上层会弹出容器，将可承载的文本、按钮、选项、标签或表单等任一内容与之组合，就可以用来传递信息、状态反馈、引导用户等操作，这就是弹窗。
弹窗的目的主要是为回应用户或让用户回应，是用户与产品间对话的一种方式，在线上各种场景中都有可能碰到，相当于产品的线上小助理。不同类型的弹窗其作用不同，但最终都是为了满足跟用户之间的友好交流。
弹窗组件的样式很多，如浮层、对话框、下拉菜单、toast等，且iOS、Android官方平台也都根据自身的规范对组件进行命名，不管如何称呼，其常见的弹窗组件绝大多数都是由以下元素组成：
◇ 容器：作为承载弹窗的文本、图片等内容，容器必不可少，有的弹窗直接以蒙层作为容器，如toast；
◇ 蒙层：为了和底层内容分离，避免信息混淆，通常会在界面上层（容器下层）设置一个不透明度为20%~60%
的纯黑色蒙层。部分小型弹窗不设蒙层，但会为容器设置投影，例如筛选器的展开、下拉菜单等；
◇ 文本：文本是弹窗传达信息主体的必要条件，如标题、按钮等，即便把文本融入图片，也能一目了然；
◇ 图片：用于运营弹窗传达更多信息内容的方式之一，为了对用户产生更强的吸引力，还可设计成动态效果；
◇ 表单：为成功进入下一步做准备，如输入密码（iOS设备下载应用前的必要步骤）。也可以是当前页面流程的分支，例如输入优惠券等；
◇ 选项：条件较少的选项可使用弹窗完成，单选、复选在选项不超过6个的情况下都可使用；
◇ 图标：在弱化次要操作的情况下，通常会将关闭弹窗按钮设计成图标放在右上角或弹窗下方，目的是突出主操作，鼓励用户从弹窗中进入下一步，另外还有单选、复选、提示等按钮；
◇ 按钮：是进入下一步或回到上一步（去掉弹窗）的操作入口，部分应用也可以点击弹窗以外的空白区域让弹窗消失，但同样会提供按钮以方便用户更容易操作。toast等短时间自动消失的弹窗无需设置按钮。
用户在完成任务的过程中，界面会出现弹窗打断用户的操作行为，用户必须通过主动点击才可以进行下一步操作，这即是模态弹窗。
模态弹窗通常能较好的获取用户的视觉焦点，并通过承载的内容、按钮主次层级来引导用户完成他们的需求，这也会根据用户、产品侧重点的不同，弹出样式也有所不同，常见的模态弹窗有对话框、动作栏、浮层...等。
1.1 对话框Dialog/Alert
对话框是很常见的弹窗，主要在打断用户后并提供选项操作，对用户的干扰较大，通常会配备1~3个操作按钮，而且会把用户最期待的或产品最期待用户操作的按钮突出显示。
对话框类型的弹窗主要分为主动、被动两种触发类型，主动弹窗：信息的二次确认、输入内容、前置条件选择、风险警示等；被动弹窗：版本更新、运营宣传、消息通知、系统功能授权等。
1.2 动作栏Actionbar
动作栏是通过用户主动操作后弹出的内容信息，基本都是从底部弹出，屏幕占用比例根据内容量的多少比较随意，从小区域、半屏、再到全屏随处可见。
动作栏相比对话框则能承载更多、更丰富的功能信息，在用户清晰感知当前操作及反馈的情况下，比跳转到新的页面更有安全感。
1.3 浮层Popover/Popup
浮层是指用户操作某个功能/内容后，会在附近出现一个带有视觉引导性质的弹窗，最常见的浮层就是下拉菜单/弹窗等，浮动于顶层窗口并指向触发操作的位置。
例如很多社交娱乐类型的应用右上角有一个“+”入口，里面会放置部分常用功能。部分浮层底部没有设置不透明度的蒙层，为了与页面信息更好的区分，会给浮层容器加上投影，避免与底部信息混淆。
相比模态弹窗，非模态弹窗属较为轻量，触发后以一种非阻碍的的方式呈现，不会打断用户的当前操作，主要是给予用户即时反馈，让用户清楚应用当前的交互后状态。非模态弹窗不强制用户操作，根据反馈信息的重要程度及意愿，可在一定的时间内自动消失，也可等待用户操作后消失，常见的有以下几种：
2.1 提示框Toast/Hud
用于反馈用户操作成功、警告、错误等当前状态信息，可能出现在任何位置（底部/中间/顶部），在呈现样式上，相同等级的模块统一位置、风格即可，无需用户有任何操作，出现2s左右自动消失。
Toast只有纯文字提示，例如格式错误、刷新成功、删除成功等；Hud会使用文字+图标样式，例如添加到购物车、关注成功等。
2.2 提示对话框Snackbar
Snackbar早期只是Android系统的一种弹窗控件，后在iOS、Web前端都会使用到，可以看作是toast的加强版。一般只出现在屏幕底部，存在的时间比toast长，提供0~1个操作入口，可自动消失，也可与用户产生交互后消失或者跳转至其他页面。
Snackbar反馈的重要程度强于toast，例如，某个应用今天有重要提醒，同时又不想影响用户的其他操作，会在用户首次进入时弹出提醒，并提供关闭操作入口，等待用户通过手动关闭（部分自动关闭），加强用户记忆。
2.3 通知Notice
最有代表性的就是消息通知、系统推送，在设备未锁屏的情况下，通常从顶部弹出，停留几秒后自动消失，锁屏后，不同设备弹出的位置也有所不同。Notice的前提是需要在应用设置中打开消息通知开关，具备应用外推送功能的，需在设备系统设置中开启通知权限。
2.4 透明指示层HUD
HUD是一种在透明元素上通过填充、反馈用户当前交互操作的指示层，实时生效，例如视频类产品中的调整音量、亮度、控制进度条等。
当我们对弹窗体系有了一定了解后，就需要清楚什么场景需要设计弹窗？用什么类型的弹窗？产品最终都是服务于用户，如果仅凭自己的主观意见乱加一通，整的花里胡哨，弹窗就成了干扰元素，很大程度上会影响用户体验。什么样的场景适合什么类型的弹窗，我们可以从以下几点来说明。
风险警示：当用户的某种操作可能存在风险，为避免操作失误，会弹出对话框打断用户，并给予一定的风险提示引起用户的注意，让其有足够的时间确认是否真的需要进行下一步操作，如：删除、放弃福利机会、退出登录等，会弹出对话框提示操作后可能引起的后果。
前置条件：部分任务在流程中设有一定的前置条件，需要满足条件才能进入下一步操作，通常这种情况会根据内容量的多少、重要程度以对话框或动作栏的样式弹出，例如下单时选择优惠券、支付方式。
任务关键节点：用户在满足任务的基本条件后，需要操作一个关键步骤才能成功，则会弹出对话框让用户完成最后一步操作，例如提交订单、表单、输入支付密码等。
这类弹窗主要从产品角度出发，不会过于在乎用户是否需要、会不会反感，都会引导或强制用户操作。
例如产品发布新版本，会强制用户更新，否则将无法使用。还有各大电商APP，在进入首页时会弹出一堆红包、优惠券，刻意将取消/关闭入口弱化，给用户返回造成一定的难度，利用突出的视觉、动态效果突出主题增加吸引力，以达到转化用户的目的。
二次确认也是一种打断用户的操作行为，但跟上面纯粹的打断用户相比其作用更大，主要是在用户已做好选择的情况下再次弹出确认，以免操作结果造成用户认知上的偏差。虽然从用户体验角度出发，用最少的操作、最简单的流程满足用户所需是产品追求的目标之一，但通过权和利弊之后，二次确认的出现实属迫不得已的折中方案，它能够起到给用户多一次思考避免误操作、同样的含义换种方式表达、重要的内容加深二次记忆等作用。
二次确认使用得当，可以避免用户、产品的潜在风险，但若是从主观角度一味的滥用，就成了对用户的恶意干扰、影响使用体验，导致出现因多步骤操作增加任务完成难度、降低转化率、损害产品形象等问题，所以需要从业务（用户侧、产品侧）实际角度出发，两相其害（加-影响使用体验；不加-造成一定损失）取其轻的考虑是否需要增加二次确认弹窗。
当用户的某个操作可能带来不可逆转、错误严重程度较高时，例如：放弃仅有一次机会的较好福利、手机系统还原、应用账号注销等，系统都会给予二次确认，降低用户认知偏差后，以确保用户是经过多次思考才做出的决定，即便后续给用户造成损失也不会过于降罪产品，产品也算是“问心无愧”了。
常见于用户操作之后的状态反馈，即便用户没有注意到，也不会造成较大的损失、或结果已经注定，相对来说成本较低，大部分出现在任务过程中的提示（可重复）和结果反馈，以确保用户知晓当前所处状态。
非模态弹窗toas样式居多，例如加载中、操作成功、刷新结果、清除缓存等，可出现在其他类型的弹窗之后或同时存在。
优秀的弹窗需要从视觉、交互两方面思考，视觉上简洁、易懂，交互上可操作且可控。
视觉层面：首先需要做到的是易懂，这时候就非常注重文案清晰程度及按钮层级关系了，弹出的信息需能直击要害，用户看了能一目了然才是关键；其次，弹窗属于一种干扰信息的存在，设计必须简洁，在弹出时需要考虑是否会过度影响（影响是一定会有的、且看如何降低）用户的其他操作。假想我们正在玩游戏、突然来了电话全屏幕覆盖（传统来电），自己会以最快的速度挂掉电话，回到游戏中后发现自己已领“盒饭”，即便来电是多么的理所当然，但心里必定是非常不痛快的，那么，如果来电以弹窗的形式且占据屏幕很小区域（如今的来电方式）是不是就给了用户足够反应时间及缓冲时间呢？
交互层面：弹出的内容及操作入口需清晰可操作，虽然有时基于业务需求，产品更希望用户能进行下一步操作而并非回到上一步，即便如此，我们也只能通过弱化次要操作以突出主要操作，用户有来去自由的权利，如果弱化至用户看不清、甚至找不到的程度，即便提供了次要操作入口，也会存在反面作用；另外需注意用户对产品的可控性，不管产品如何期望用户进入下一步转化，但不能强制，一定要给用户提供回去的路（强制版本更新除外），否则，任性的用户可能会直接结束应用，甚至因产品过于霸道直接卸载。
首先，设计师应该理解产品需求，分别从用户侧（能给用户带来什么？满足什么样的需求？避免什么损失?...）、产品侧（能给产品带来什么？产品如何期望？是否合理？能得到什么样的结果？...）分析为什么要加弹窗，然后将分析的结果转化为设计目标，以确保弹窗根据不同的需求，在恰当的时间、适合的样式合理的呈现给用户。
其次，在得到设计目标后，同样需要从设计侧、技术侧思考弹窗组件的一致性。从设计角度，团队所有成员需要对该组件有清晰且统一的认知，了解组件的使用场景，以确保不会错用、滥用，如果增加或更换新人设计师，很容易学习和上手，提升效率；站在技术角度，一致性的常用弹窗组件，便于开发做组件封装后续复用，减少不必要的重复工作，大大提高开发效率。
在UI设计中，组件的设计思路基本相通，旨在满足产品的实用性、视觉的统一性，主要围绕着以下几点进行：
◇ 基础定义：利用清晰易懂且简短的文案描述弹窗组件的内容及目的。
◇ 类型及构成：明确弹窗的类型，如模态/非模态，将其拆分并注明每个小元素的具体信息。
◇ 规则用法：弹窗出现的位置、包含的具体内容及信息的展示规则，比如哪些场景可复用。
◇ 交互状态：交互流程逻辑清晰，拟请产品交互前、交互中、交互后如何反馈以及用户随时可能碰到的问题。
设计弹窗时需要注意信息的主次层级关系，优先传达用户想要的或产品想要让用户知道的，以确保重要的信息在第一时间传达给用户。
弹窗需要根据实际的场景合理使用，不能为了简洁而过分删减内容、更不能画蛇添足。例如一些偏向于操作状态、系统报告类的提示可以使用简单的反馈，而可能造成用户损失的提醒就需要刻意打断用户，给予更明确的提示甚至二次确认。
△ 例如删除内容就需要使用模态弹窗明确提醒用户，如果用非模态很可能被用户忽略从而带来不可逆的损失。
因弹窗本身承载内容有一定的局限性，固文案一定要简洁且精确，能用一句话说清楚的就不要过于啰嗦，不仅容器的空间有限且用户的耐性也有限，需要在有限的空间、有效的时间内清晰的表达出核心内容。
针对运营弹窗，如果弹出的时间不对或过于频繁，可能会造成用户反感，所以需要把握好弹出时机及频率。
例如用户有一张未使用的优惠券，如果用户每次进入应用都看到弹出提醒，确实又没有购买商品的意愿，总是被弹窗打断真的就很烦，那么可以将提醒弹窗设置为每日首次进入应用时提示、每累计进入应用5次后提示、即将到期提示或者用户有购买意愿且优惠券支持改品类时提示等，总之，需要控制在大部分用户的可接受范围内。
本篇文章主要系统的分析了弹窗组件分类及使用场景，总结的虽然不是很全面，但能让很多新手设计师清楚认知弹出组件的定义及用法。另外，弹窗不管如何设计，都需要有一个不断优化的过程，要根据产品的实际情况不断思考与打磨，通过脑暴或已知问题作出更好的改善。
能清楚认知、理解、使用弹窗组件是一个成熟UI设计师必备的条件，当然，并不能以此定义设计师是否优秀，在此基础上，还需通过持续的学习探索，挖掘出更多技巧，不断提高自身的专业能力。
文章来源：站酷 作者：大漠飞鹰JYSJ
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设
提及“设计的温度”，不得不提我们老生常谈的“情感化设计”，提出这一概念的美国认知心理学家唐纳德·诺曼将设计拆解为三个层次：本能层、行为层、反思层，层层递进。
1/ 本能层的设计，是视觉的直接反馈，是指用户第一眼看到的、感觉到的东西是否会激发用户兴趣；
2/ 行为层的设计，注重的是效用，产品功能是否好用，易用，用户使用产品过程中能否高效解决问题；
3/ 反思层的设计，是情感化设计的最高层次，指用户使用产品后，是否建立情感连接和记忆反馈。
因而，它们是从美学诉求到效率诉求再到情感诉求的一个进阶关系。
如果一款产品在满足基本功能，对于用户有用，同时好看并且易用，使用完之后还能产生愉悦以及满足感的话，那么这将是一款好的情感化设计产品，那必然是一个有“温度”的设计。
如果一个项目本身充满社会使命和责任感，那么“有温度的设计”将可以助推项目的落地链条，让使用平台的用户有“温度”，更让项目背后的人员感受到“温度”。
因为，接下来陈述的项目是一个很有“温度”的项目——用互联网工具去温热社会中的穷苦灰暗，用互联网思维去帮扶社会的乡村孤寡老人和留守儿童，用有温度的设计去践行有温度的项目。
随着我国社会经济的快速发展，农村青壮年劳动力转入城市，人口老龄化趋势加剧和家庭结构的演变，“空心村”越来越多，因此在乡村出现大量的“留守儿童”和“孤寡老人”。据统计，在农村独居和空巢老人超过3000万人，留守儿童也达到了近2000万人
孤寡老人因为独居生活、物质困难、缺乏照料面临着易患疾病、精神压抑等很多问题；而留守儿童因为缺少父母监管和陪伴，极易产生很多身体及心理问题，这两大群体是我国人群结构的重大组成部分，一个是未来的花朵和希望，一个是曾经发过光热的迟暮老人，他们需要关爱和守护，需要有一座“有温度”的桥梁，为留守儿童撑起蓝天、健康成长；为孤寡老人送达温暖、安享晚年。
基于社会现状，践行社会责任，腾讯为村平台联合中国社会福利基金会、腾讯公益慈善基金会，预想搭建一个线上与线下结合的平台，成立“为村暖心小站”，立足于脱贫地区的农村社区，主要服务农村的一老一小以及其他需要帮助的困难群体，解决日间照料、健康护理及心理关怀等诸多问题。
“暖心小站”的整个帮扶路径是以线上+线下相结合的模式，依据产品需求，在线上可以招募志愿者、发布救助需求、触达爱心人群；在线下建设实体服务站，开展具体的帮扶活动。从而形成一个从线上到线下的一个完整帮扶闭环。
那在线上的呈现形态上，主要考虑APP和小程序两种方式，经过对比分析，APP稳定性高、体验好，但是在乡村的受众群体内，互联网基础还是很薄弱的，要让村民朋友下载和适应一个新APP是一个难度非常大的事。而微信在乡村的覆盖面非常广，占有率很高，那么依托于微信的生态、建立小程序，在推广层面会更加便捷和高效。同时，暖心小站本身结构简单，是一个非常轻量化的应用，这种特性也更适合以小程序为载体。
在线上的产品框架上，设立两大专区：关爱老人专区和呵护小孩专区，各自创建知识宣导、在线课堂、爱心募捐等版块内容，同时在线上召集志愿者，在线下成立社区服务站，开展帮扶活动，然后志愿者们在线下实地服务打卡同步展示在线上的暖心小站。
确定框架之后，梳理角色和场景。本项目主要包含线下服务站的站长，工作人员，志愿者以及社会的爱心人士。
站长、工作人员、志愿者主要是通过线上为村暖心小站这个平台发布活动信息、记录服务概况、展示志愿者风采，社会的爱心人士通过线上平台查看对应信息并参与对应活动，最终帮助农村的一老一小解决各种帮扶问题。
经过梳理分析，平台使用人群的年龄跨度较大，30岁到60岁这个群体占到了80%左右，所以在产品的呈现形式上将兼顾青年到老年的年龄跨度，让设计更友好，让产品有温度。
基于前面分析，在农村现实环境中的孤寡老人和留守儿童，他们生活是灰暗的，情感是封闭的，他们需要有更多志愿者以及爱心人士给他们带去阳光和温暖，让孤寡老人可以健康生活，让留守儿童可以健康成长。
所以在设计目标的确定上：让产品形成一个“有温度、有故事、可以连接情感的桥梁”。让贫苦生活渗透阳光、感受温暖、看到希望。
品牌色的推导，是站在线下的实际场景感受来提炼，乡村的孤寡老人和留守儿童的生活是贫苦的、灰暗的，他们需要金灿灿的阳光给生活带来希望，而我们日常所的见的公益组织通常都是以红色系为主，似乎已经形成了作为公益组织的标识色，因为这种大红色传递爱心、带来温暖。
这些颜色都很有代表性，黄色代表阳光，红色代表公益，而暖心小站，将这两种颜色进行叠加融合，形成阳光橙，再以阳光黄纳入辅助色，形成温暖、友爱、活力、阳光的色彩体系。
在设计原则上，考虑到我们的用户群体年龄跨度比较大，一些年长用户互联网基础薄弱，为了让产品更有亲和力，让年长用户都能轻松上手，所以在策略上制定简单、易用、温暖的设计原则，保持框架简单清晰、交互简单易用，让产品有温度，让用户觉得有用、好用、还想用。
在“简单”方面，保持产品的页面框架要简单，结构要清晰，让用户清楚知道自己在哪里，所以在产品形态上只做了内容页的垂直展示，没有过多琐碎的信息入口，让页面信息更集中，浏览体验更聚焦，让年长用户也可以简单使用。
在“易用”方面，简单的框架和结构是易用的基础，在视觉元素的排列上，通过加大的图片、加大的间距、加大的圆角，通透的页面布局可以让内容陈列更集中，获取信息更高效。页面的间距以4px为基数，分为5个跨度，在统一性的基础上让界面更有节奏感，层级更清晰，从而提高产品的易用性。
在“温暖”方面，主要体现在在调性、元素、和内容上：
调性：以“温暖橙”+“阳光黄”为品牌色系贯穿始终，形成温暖、阳光的整体基调；
元素：在常规尺度上进行适当加大，加大的字体，加大的卡片占符，加大的点击区域，让产品更照顾年长用户的操作习惯，让产品更有温度；
内容：在内容及主图的运营展示上，突出“温暖”的调性，增强用户的共鸣，拉近用户与产品之间的距离。
整体以大面积的“温暖橙”为基调进行铺设，营造温暖阳光的质感，顶部展示产品名称和合作logo，增加产品的权威性和信赖度。
自上而下，控制大的间距和留白，分别设置了热门小站、一老一小专区、志愿者风采、活动回顾、学习园地等版块。全方面展示了小站的基础信息、输送了对孤寡老人和留守儿童的健康资讯、汇集了志愿者服务的风采、记录了帮扶活动的结果反馈、以及陈列了关爱老人和小孩的相关线上课程。
一老一小的入口及详情：通过大头图的形式加强专题感知，引导用户点击。详情内展示相关的关爱资讯和助力入口，让用户可以选择性的进行点对点帮扶。
小站详情：分为小站介绍、人员风采、小站活动、和运营概况四个部分，清晰展示线下暖心小站的各项事务，让线上用户对线下小站有更全面的了解。
个人中心：功能简单，布局简洁，根据不同身份类型展示不同入口。作为站长的话，拥有志愿者审核、活动管理的权限，整体表现形式以统一的卡片式陈列，让内容更聚焦。
秉持“简单、易用、温暖”的设计原则，尽可能地让产品陈列简单、操作流程易用、设计满足功能凸显温暖，让用户想用，让产品好用。
经过多次推导与线下团队配合，小站1.0在今年5月初上线，第一批试点小站正在使用中，得到了较多正向良好的反馈，为乡村的一老一小带去了许多暖心的帮扶行动。
产品上线之后，通过在线上发布活动信息召集志愿者。在线上顺利举行了多场暖心活动，比如在重庆马蜂社区的服务站内为当地留守儿童举办了多项课业辅导的活动，在重庆周家寨服务站新建了日间照料室，提升老人的居住生活质量。
今年5月20号，在中国互联网公益峰会上，为村暖心小站进行线上交流展示，获得了很多与会代表的关注和认可。
截止2021年7月，平台上线了两个试点小站，共举办了数10次线上+线下结合的活动，活动参与了520人，受到36000人以上的关注。暖心小站的建立和运营，对乡村的“一老一小”提供了更加有针对性和个性化的服务，同时加强对当地社会组织的培育和孵化，提升了服务对象的生活质量，促进和谐社区建设，助力乡村振兴。
通过这些试点小站的成果和反馈，让设计目标也得到一定程度的印证，让产品体现了“有温度、有故事、可以连接情感”的桥梁。
随着互联网的发展，人们对于产品不再是简单的形式服从功能，而是逐步转向形式服从情感。让设计回归情感，让有温度的设计去创造有温度的产品，可以增进人与产品之间的情感连接，让产品更有生命力。再者，用有“温度”的设计思维，去捕捉和解决社会问题，通过具有社会责任感的设计，推动社会进步，形成坚实有用的“设计力”。
那么，如何提升自己的设计力呢？可以概述三个保持一个向善。
设计需要坚持，而坚持源于热爱，保持热忱之心会发现许多美好的事物，同一个需求会自发性地探索很多不同的解决方案，因此会洞察需求背后最本质的东西，切入要点寻找最优解。
还有一句话：“设计路上，唯有热爱，方能抵御岁月漫长”。
这里的“敏感”指的是设计师要有好奇心，善于发现新事物，善于追踪最新行业动态，是一种职业敏感，是一种自觉行为，表现为热情、兴奋、敏锐，对新事物充满热情，对于新发现充满兴奋，能够特别敏锐的捕捉社会痛点解决设计难题。
生活中常说，有共情的人往往都特别感性、多愁善感，泪点低笑点也低，因为特别有代入感，而且对事物特别专注。
设计上所说的共情力则需要保持感性，同时也需要理性加持，不偏不倚。让设计师自己能切换到项目内的各种角色，不把自己当成局外人，将自己融于产品本身，随时切换为不同用户的视角，更能深入地发现、分析和解决问题，让设计站得住脚、更接地气，让设计有依有据。
设计的最终目的是传递需求、解决问题，这就意味着设计的初衷不同，那么最终的导向也会截然不同。
设计向善，保持“善”的初心，主张设计回归社会、回归到人心最本质的出发点，做有温度的设计、有仁心的设计、可持续的设计。
关注社会问题，保持一颗敏感而善良的心，用“设计向善”解决社会痛点，坚实巩固自己的设计力。
文章来源：站酷 作者：峰HENG
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设
无论是高保真还是低保真原型，设计人员在软件中的展现所有效果，最终目的都是传递给开发人员进行实现。当开发人员开始使用代码还原页面时，设计就不可以再随意修改。
最重要的不是在设计软件中展现的效果，而是实际在用户设备上实现的效果，因此在设计时，要提前考虑代码实现的成本。
盒子模型是一种描述对象尺寸和间距的方法。有四个部分组成：“边框Border”、“边距Margin”、“填充Padding”、“元素本身Element”。
Border：围绕元素外围的边线。
Padding：元素及其子元素之间的间距。
Margin：元素和其相邻对象之间的间距。
点（pt）取决于屏幕物理尺寸大小，是绝对尺寸单位。对应@1x图的1px。
像素（px）取决于实际屏幕显示分辨率，是相对尺寸单位。在@2x图情况下1pt=2px，在@3x图情况下1pt=3px.
建议使用“@ 1x”进行设计，其他尺寸图可以从@1x进行衍生。
如果是以@2x进行设计，那么若要得到@3x则要先缩小50%然后再扩大300%，增加了不必要的工作量，并且很容易出现奇数、小数等不便利数值。
创建的每个UI元素都应该和像素网格对齐，防止出现半像素的“锯齿“效果。
文本由于其图形的特殊性，难免会出现无法对齐像素的情况，这里可以忽略。
文本是页面中最重要的元素之一，但因为其本身的多样性，产生的不同的字体、行高很难和其他元素一起适用网格。因此给文本设置基线网格，将基线网格采用4pt进行等距划分，来和其他元素进行和谐搭配。
使用8的倍数来定义区块和内部元素的尺寸，间距等。
当区块元素为文本（例如按钮）时，将文本设置成其余部分一致（或者平台预先定义好）的大小，然后使用padding来确定区块大小。如果是全宽的元素，使用padding来确定高度，并使用一致的水平边距来确定宽度。
硬网格：将元素放置在以8为增量定义的显示网格中，使用额外的透明背景元素，和前景元素组成一个整体。
软网格：保证元素之间的的间距为8的倍数，以此获得更快的处理速度，从而得到更流畅的体验。
当所有尺寸都遵循相同的规则时，就有了一致的UI。
减少自定义的尺寸规则，得到更快的代码运行速度。
无论设备外形如何，主流的屏幕的屏幕尺寸长宽值至少有一个维度可以被8整除。
有一些屏幕的尺寸无法被整除（iPhone 6的375*667pt），只需要保持padding和margin一致，适当调整区块的大小来进行适配。
确保开启了“对其像素网格”选项。
如果根文根大小设置了16px，则可以使用0.5rem的增量在8点网格上构建布局。
如果不喜欢这样做，或者是不喜欢rems的使用方式，可以使用CSS或预处理器间距变量来处理布局，同时保留变量以供后期维护。
大多数软件都可以设置快速“微调”，一般默认为10px，sketch中可将其调整为8px，便于快速的工作。
学习并善用快捷键，提高工作效率。
图标设计通常需要进行视觉修正，因此，在其周边放置透明框架（例如Hard Grid的方式），来保证整体的一致性。
设计时经常会放大预览界面来进行设计，这会导致会略整体；如果以缩小的尺寸会导致看不到细节，因此要经常变焦画面来确保能看到整个画面。
文章来源：站酷 作者：YMOOM
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
什么是设计系统？
设计系统 = 设计价值观和原则+设计规范+场景定义+工具包
为什么要构建设计系统？
问题1:
随着业务的拓展，产品和项目数量不断增加，发展中期设计和交互上不一致性的问题浮出水面，需要采取措施确保产品或产品线之间保持统一的品牌传达、外观和体验，以满足用户预期并向其传达统一的品牌认知。
问题2:
无统一的设计规范和交互原则，没有统一的UI组件库和代码库，各团队设计和前端需花费大量资源陷于低质量沟通协作和重复造轮子，拖慢产品和项目设计和开发节奏。
问题3：
产品项目数量 vs 产品设计师，人员配比严重不足的情况下，团队的设计师们无法从杂/乱/急的日常需求中剥离出来，影响构建产品壁垒的质量和速度。
设计系统的价值
产品侧：
设计侧：
开发侧：
测试侧：
主流设计系统-他山之石可以攻玉！
无需犹豫，直接基于现有的优秀的开源设计系统，
设计系统的打造不必从0-1构建， 例如：Ant Design业界优秀的开源设计系统，我们完全可以站在前人的肩膀，最终生产出符合达观品牌、业务特性的设计系统。
字节跳动 Semi Design：https://semi.design/zh-CN/
字节跳动 Arco Design ：https://arco.design/
以原子理论构建设计系统
原子理论设计介绍
首先原子设计理论并不是什么高大上的规则。最早是由国外前端开发工程师 Brad Frost提出的，他从化学元素周期表中得到启发，发现在化学世界中，所有的物体都是由原子构成，原子组合构成分子，分子组合构成有机物，最终形成了宇宙万物。根据他的理论，设计体系主要包含 5 个层面：原子、分子、组织、模板、页面。
原子理论设计不是一个线性的过程， 它更像是一个心理模型，来帮助我们把用户界面看作是一个连贯的整体，同时也是一些元素的集合。这五个阶段的每一个阶段都会在我们的界面设计系统层级中扮演重要角色。下面，让我们更深入的了解每一个概念哦～
原子是物质的基础组成部分，是构成设计系统的最基础元素。
在界面中以「元素」的形式存在，例如：颜色、文字、图标、分割线、间距、圆角、间距、阴影等。
简单概述下来就五个字：色、形、质、构、质；
在界面中，分子就像是一个由UI元素组成的相对简单的组织。如：按钮、弹窗、搜索框等。
以按钮为例，它的组成元素包含了文字、色块、图标和间距。这些抽象的原子从毫无关联原则组合成一个分子，图标和文字互相配合传达意义，颜色定义了按钮的特性，间距为按钮定义了一个尺寸和规范。
组织(Organisms)层
分子+原子组合成更复杂和可扩展性的模块，这个称之为组织（区块组件），如：列表操作区块、列表展示区块、表单区块、数据统计卡片区块。
以表单为例，一个表单我们可以通过数量的组合，以及间距的调整，元素的增减，在界面中表达不同的场景和含义。
模板(Templates)层
由原子+分子+组织构成的更复杂更具拓展性的模块，如：分组表单页、页面级表单、详情页、列表页、异常页、dashborad。本质就是线框图，模版在设计系统承载的作用就是保证设计方案在原型阶段的多样性。专注于页面的底层的内容结构，页面中的信息是占位作用，而不是页面的最终内容。
页面(Pages)层
带业务逻辑的场景案例如：标注详情场景、抽取详情场景、权限管理场景。页面将真实内容应用于模板；
页面是模板的具体实例，填充了真实的内容（图片、文字等）后形成页面，也就是常说的带交互逻辑的「视觉稿」即为高保真原型图，将占位符替换为有代表性的真实内容，使设计系统有了生命。在模版的基础上进行优化和完善就形成了页面最终的设计方案。
关于设计系统的常见认知误区
误区1：设计体系就是设计规范或者组件库吗？
许多人认为设计系统就是单个代码库、组件库、设计规范，但实际上他们不是一个层次的东西，准确度的来说设计体系包含设计规范，组件库也是建立在设计体系内的，组件库是记录和共享设计模式的工具，就是设计体系工具化和表现层的部分；
误区2：设计体系的存在扼制了组织内创造力，会替代掉设计师？
抛出这个问题，是因为经常在不同的场合听到“设计系统是扼杀设计师的创造力”之类的观点，我个人是很难以认同这个的，对design system的最大误解就是限制设计师的想象力。首先设计系统本身就是一个庞大且复杂的设计观集合，需要调动整个团队的想象力和创造力，最终达到一个统一共识才有可能被实施和执行；
好的设计系统可以通过流程和机制促进创造力的，而且好的设计资产可以帮助大家从不必要的、重复的劳动时间内节省出来，当然也不能过度依赖过往的沉淀资产，把自己定位为设计系统的创造者，而不是使用的工具人，不断的创造和贡献好的解决方案被整个组织采用，就不必再担心那些即将沦为沉没成本的过往设计与技术资产的限制。不会替代掉设计师，反而是一个企业内部尊重设计师价值的开始！是企业对设计文化的认可！
设计体系是动态的，永远是随着组织需求和用户需求而变化的，一切说自己已经完成了设计体系的建设的人都是错误的，都是将将静态的设计规范曲解成了设计体系。
正确管理机制：少数人负责管理，多数人参与贡献；避免你做、我用模式，这种生产消费模式非常内卷；避免如：我一个设计师为啥要用你的规范；这规范做的太垃圾用处不大，我才不用，用你做的规范；我苦逼做业务，你晋升拿结果的负面心态；
然设计系统也不是简单的靠少数的人1-2个月用爱发电就能完成的，设计系统是一群人，对一种做设计文化的认可，每个与之相关的人都应该是设计体系的贡献者与布道者！
需要克服的潜在难题
产品业务复杂性提升，提升建设难度
难以控制创造与控制间的平衡；
复用与定制间的平衡，刻意追求复用率而容易丢失整体观，为特定业务目标服务时不如灵活集中化式方法等
资源问题，容易被当成是辅助项目而缺乏预算等资源….
缺乏良性有效的组件库更新迭代机制，虎头蛇尾….
收益短期不明显，搭建体系的长期收益难以被组织短期内察觉；
尽管有一系列潜在的问题，但总的来说设计体系的带来的收益是大于这些投入的，总的来说方向是没错的，下一个关键问题是：我们如何去建立一个更优秀的设计体系。
文章来源：站酷 作者：从你的世界经过
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
1. 需求定义
需求是用户对于自己碰到的困难从而提出的问题，是用户对于已有产品的反馈和建议，是老板提出的商业诉求，就是运营人员减少工作麻烦的想法。需求和产品是一种问题导向与目标导向的结合，是用户碰到了什么样的问题，从行业属性、用户群体、业务场景、工作目标、商业利益等方面从而产出的输出物，也就是所谓的产品。
需要：是解决问题或者满足欲望，达到最终的目的。
需求：是需要付出一定成本来满足，主要体现在解决方案中的具体产品和功能。
2. 名词解释
产品需求文档（PRD）是将商业需求文档（BRD）和市场需求文档（MRD）用更加专业的语言进行描述。
3. 面向对象
开发、设计师、测试、老板、项目经理、产品经理、运营、市场、销售、客户、财务等其他角色。
4. 输出物
文档：Word、ppt
交互或者原型稿件：Axure、UI界面
5. 产品需求文档结构
命名和编号
修订记录
背景分析（产品背景、行业背景、国家政策）
需求分析
用户定位
产品目标
总体架构（技术架构、功能架构）
业务流程
功能设计（功能总表、用户角色、功能详情）
产品特色
产品模块清单
产品适配清单（支持的浏览器、数据库、中间件、操作系统）
6. 需求分析原则及方法
6.1. 产品需求的三个层次
基础性需求、期望性需求、兴奋性需求
6.2. 马斯洛需求五个层次
生理需求、安全需求、社交需求、尊重需求、自我实现
6.3. 需求管理的四个环节
采集需求、分析需求、筛选需求、处理需求
6.4. 需求分析四象限
重要并紧急、重要不紧急、不重要但紧急、不重要不紧急
7. 需求分析及产出
WWH法：是什么？为什么？怎么做 ？
需求分析贯穿整个产品全生命周期，包括产品概念期、产品设计开发期、上线后-成长期、成熟运营期、产品衰退期。
7.1. 明确问题
7.1.1. 需求收集渠道
明确需求收集渠道，确定用户群体和需求调研的方法，比如问卷调查、访谈、名义小组会议、头脑风暴法、观察法、亲和图、蒙特卡洛技术、鱼骨图、提示清单等方法。
提出需要解决的问题，明确需求带来的价值。利用目标用户、场景、问题三个思考维度，去定义真正意义上的产品需求，示例如下：
通过用户针对不同的场景，明确了主要问题需求，怎么思考产品需求怎么体现到产品设计上面，从而体现产品价值，包括产品设计成型后的市场推广方式至关重要。产品问题产生的产品价值示例如下：
7.1.2. 拆解需求
拆解需求指的是把已经明确的问题，从多个维度进行拆解，目的就是为了找到更合适的解决方案。
拆解问题的五个维度分别是积极层面、否定层面、转移层面、拆解、脑洞。
Ø 积极层面：通常可以拆解出怎么做对用户来讲可以产生更积极的情感。
Ø 否定层面：通常可以拆解，即使不做什么，依然可以产生好的结果。
Ø 转移层面：转移指的是不直接单独解决当前用户的问题，通过转移法，用户转移、问题转移等。
Ø 拆解：把当前问题刨根问底的拆，挖掘更多的可能性、找到问题本质。
Ø 脑洞：这个更多的靠灵感、经验等进行头脑风暴，补充其他维度考虑不到的地方。
7.1.3. 需求管理
7.1.3.1. Kano模型
Kano模型是对用户需求分类和优先排序的工具，以分析用户需求对用户满意的影响为基础，体现了产品性能和用户满意之间的非线性关系。
Kano模型把需求分为五类：基本型需求、期望型需求、 兴奋型需求、无差异性需求、反向型需求。怎么通过模型知道用户的需求类型，示例如下：
7.1.3.2. 时间管理四象限法
时间管理四象限法分别按照紧急程度和重要程度分为重要且紧急、紧急不重要、重要但不紧急、不紧急不重要。具体示例如下：
本方法的优势可以评估产品开发的时间优先级，对于一些重要且紧急的功能开发能够做到心中有数。
7.1.3.3. ICE排序法
ICE排序法是一种比较严谨科学的分析需求的方法，通过几个几个维度给需求进行相应的打分，以总分的高低去排序。
I（Impact）：影响范围。
C（confidence）：对上线效果的自信程度评估。
E（ease）：开发难易程度（工作量+技术难易程度）评估。
7.1.4. 需求输出
7.1.4.1. 输出内容
思维导图、业务流程图、原型图、需求说明文档、功能说明文档等
7.1.4.2. 输出角色
业务人员、技术经理、后端技术人员、前端技术人员、UI、UE人员
7.1.4.3. 沟通样例
（一）业务人员
面对业务人员，主要是讲产品功能实现和重点业务流程，主要依靠思维导图或者原型图去讲解产品可带来的价值和解决了什么样的问题。
（二）后端开发人员
面对后端开发人员需要给技术经理协调和沟通，确定的项有数据库怎么写，字段（数据结构）怎么定义，最后生成什么样的表，当用户进行相关业务操作时（增删改查），怎么去设计接口，接口设计对应数据库，先调用什么样的接口，传输什么样的参数，返回什么样的结果。进行前端解析，后台数据图形化，最后呈现给业务用户。
（三）UI、UE人员
面试UI、UE人员从行业特征、用户群体特征、用户习惯等方面来确定产品视觉和交互形式。
（四）前端开发人员
通过评审后的UI设计稿交付给前端人员，进行前端页面的开发。
（五）测试人员
面对测试人员，跟进产品测试情况，提供产品需求文档和原型图及UI设计图，编写测试用例，把控测试时间，协调相关资源，保证产品顺利产出。
8. 产品迭代规划与需求跟进
8.1. 产品全生命周期规划
根据产品规划的全生命周期，确实不同阶段需求的落地情况，根据用户对于需求的满足情况。
8.2. 业务流程分析
根据已开发上线的所涉及的业务流程，先分析完整性，基于本流程从专业角度提出改进方案，不断优化该流程，确定流程的可用性。特别是一些核心业务流程，要做到简洁高效，提高效率。
8.3. 新需求管理
通过产品的不断使用，收集和接收不同的新需求，并定期开展新需求评审，逐步完善到产品里面，以最小调整为基线确定新需求的开发计划，保证产品总规划的稳步实施。
8.4. 里程碑管理
把控整体产品里程碑管理，确保产品迭代重大节点变化能够有理有据，为产品的营销工作，提供支持。总结产品优势和产品亮点，对产品的销售情况负责。
分享此文一切功德，皆悉回向给文章原作者及众读者.
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
情绪板的作用？
情绪板能够更加帮助设计师与业务方达成设计共识，并且能够帮助设计师定义视觉风格与找到设计方向，使设计更加合理，为产品赋能。
如何运用情绪板定义视觉风格
情绪板的制作流程
情绪板的制作流程大致分为5步：
1、明确原生关键词
了解项目背景或需求本身的方向，通过内部讨论，用户研究和品牌等方式定出3-5个原生关键词，通常定出的词都比较抽象。
2、挖掘衍生关键词
在原生关键词的基础上让参与者发散得到更精准的二级词语，能够更加准确的定位到图形传达方向，最好是一些情绪和视觉表达的形容词。
可通过视觉映射、心境映射、物化映射，得到用户理解的“抽象关键词”所对应的“具象定义”。
3、搜索关键词图片
确定完关键词后，可在pinterest、花瓣等设计网站上建立情绪板图库，按照人，事，物，形、色、字、构、质等方向收集大量的对应图片素材来匹配关键词。
4、建立情绪板
对应每个关键词，从情绪板图库中提取高质量能够代表关键词意思的人，事，物，形、色、字、构、质去展示，以此唤醒用户对关键词情绪体验。
5、提取视觉风格准则
根据情绪板图库中的图片提取出视觉风格准则，包含：图形、颜色、质感、构成、字体等视觉风格准则。
举个案例说明：
明确原生关键词
讨论原生关键词
了解项目背景或需求本身的方向，通过内部讨论（可叫上产品、运营、老板等进行讨论），用户研究和品牌等方式定出3-5个原生关键词，通常定出的词都比较抽象。
确定原生关键词
从讨论的关键词中提取3-5个最适合的关键词。
2、挖掘衍生关键词
在原生关键词的基础上让参与者通过视觉映射、心境映射、物化映射，发散得到更精准的二级词语，能够更加准确的定位到图形传达方向，最好是一些情绪和视觉表达的形容词。
3、搜索关键词图片
确定完关键词后，可在pinterest、花瓣等设计网站上建立情绪板图库，按照人，事，物，形、色、字、构、质等方向收集大量的对应图片素材来匹配关键词。
4、建立情绪板
对应每个关键词，从情绪板图库中提取高质量能够代表关键词意思的人，事，物，形、色、字、构、质去展示，以此唤醒用户对关键词情绪体验。
5、提取视觉风格准则
根据情绪板图库中的图片提取出视觉风格准则，包含：图形、颜色、质感、构成、字体等视觉风格准则。
总结
情绪板作为一种常用的设计方法论，能够帮助设计师更加合理的总结出合适的视觉风格。设计不仅仅是只是跟随着设计趋势，怎样找到适合产品的视觉风格，是每个设计师更需要去掌握的内容。
以上内容，是学习如何定义视觉风格的其中一种方法，希望对大家有所帮助，如有不同意见，欢迎指正！
图片版权归原作者所有
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
最近几年不管是WEB端页面还是APP，使用交互动效越来越多，加了动效的UI页面看上去不再那么枯燥无味，能很好的抓住用户眼球，既提升了用户交互体验同时也更好的展示了产品。通常我们会在哪些场景下使用动画呢？例如菜单图标、载入动画，空白页，产品介绍等都可以使用动画，下面是一些示例：
今天给大家讲解一下如何制作一个svg格式的动画，开始之前先和大家说一下svg是什么，目前web或者app中的动画大多使用svg格式，svg英语全称是Scalable Vector Graphics，它是一种可缩放的矢量图像图形文件格式，这种格式的文件具有边缘清晰、文件体积小、传输方便的特点，因此在网页设计以及APP中比较常用。可以使用Illustrator软件或使用
专业的svg编辑器进行设计输出，svg支持浏览器及任何文字处理工具打开。因此svg格式是一种开放标准的矢量图形语言，可让你设计激动人心的、高分辨率的图形页面。
如果你具有一些代码能力，还可以直接用代码来描绘图像，通过改变部分代码来使图像具有交互功能，并可以随时插入到HTML中通过浏览器或编译器来观看。
综合起来SVG优势如下：
可被非常多的工具读取和修改
与 JPEG 和 GIF 图像比起来，尺寸更小，且可压缩性更强。
SVG 可随意缩放
SVG 图像可在任何的分辨率下被高质量地打印
SVG 图像中的文本是可选的，同时也是可搜索的（很适合制作地图）
SVG 可以与 JavaScript 技术一起运行
SVG 是开放的标准
SVG 文件是纯粹的 XML
目前制作SVG动画的软件主要使用AE（需要插件加持）或者在线的SVG动画工具，如svgjson.com等，如果使用AE需要安装bodymovie插件，我平时大部分动画都是使用svgjson工具完成的，所以今天给大家分享的svg动画教程主要也是使用在线工具svgjson来完成（完全免费），它支持导出svg或json格式动画，可以满足不同的需求，目前该软件虽然是英文版的，但是上手还是比较容易，为了更好让英语不是特别好的同学快速上手，我下面做了一个关键功能的中英对比说明。
软件地址：https://www.svgjson.com/editor-page/
如制作一个loading动画
制作要点：
创建2个圆形，一个底色（浅灰色）一个旋转的圆圈（蓝色）
在Store中设置Stroke Dash Array的圆圈长度，圆圈长度可以从Information中获取
3. 设置Stroke Dash Array后，开始旋转圆圈的长度，我设置了400，大家可以根据自己的需要进行个性化设置
4. 第四步我们来设置动画，先选择蓝色的圆圈，然后在Transform中设置旋转动画，第0秒为0，第10秒为3600
度（记住别忘记按关键帧动画按钮，第一帧设置了动画，后面更改参数会自动生成动画关键帧）
5. 按空格键或者点击时间条上的播放按钮看看效果，如果没有问题选择导出SVG动画，一个loading动画就完成
了。
完成后效果
上面的动画是通过Angle（角度）来实现的旋转动画，接下来我们可以通过Stroke Dash Offset来设置旋转动画
loading动画进阶教程
先看最终效果
由于svgjson的绘制能力相对较弱，所以我在其他软件中先画了如下图这个动画的基本元素（需要保存为svg格式），然后通过svgjson中的导入svg方式导入。
首先把“按钮左”和“”放在一起拼凑成一个圆，然后把“按钮中间部分”也放在圆中间，并且把它的Scale X值设为0.
把载入的圆圈放在刚刚的红色圆中，并设置Stroke Dash Array值和Stroke Dash Offset动画（具体参照上面的动画教程）
把载入成功的勾号放在载入圆圈中，然后设置动画Stroke Dash Array值和Stroke Dash Offset动画
再设置按钮左和按钮右位移动画，同时也需要“按钮中间部分”的Scale X的动画
通过上面的2个教程，相信大家对svgjson这个软件有了一个基本的使用能力，svgjson中的Stroke属性下的Stroke Dash Array和Stroke Dash Offset功能还是蛮强大的，可以通过这2个参数设置很多丰富的动画效果。
下面的动画主要使用x轴缩放功能实现的交互，当然也可以使用Stroke Dash Offset参数实现动画效果。
这个动画的核心点在设置对象的中心锚点位置，默认对象的中心点在中心，这个教程是把对象中心点移到了左侧
接下来给大家演示如何制作一个变形动画，变形动画也是一个非常常见的交互
这个教程重点是对象的缩放，缩放前需要设置锚点位置，然后就是设置x轴和y轴的偏移值。
总体来说，svgjson网站提供的动画能力还是很强的下面是我制作的项目样例：
分享此文一切功德，皆悉回向给文章原作者及众读者.
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计的小编 http://www.lanlanwork.com