本文从What/How两个部分循序渐进地阐述如何输出清晰有效的设计方案，希望给大家一些建立系统性设计思路的启发，帮助大家更好地输出设计方案，为决策设计方案提供更有力的参考。
WHAT: 什么是清晰有效的设计方案
首先我们需要对清晰有效有一个整体的认知。所谓清晰，从字面上理解是指看得很清楚、明朗，设计层面来说就是方案能做到方向明确，方案明了。而有效字面上指的是有效果，有效力，从设计层面来说就是输出的方案可以解决存在的问题，能达到设定的目标以及可以切实落地。
清晰和有效的考量维度是不一样的：清晰更多是针对设计这一环节，在于不同方向/方案的差异度和侧重点；而有效则更多需要联合设计上下游（用户/产品/开发）。对于优秀的设计方案来说两者相辅相成，缺一不可。
接下来我们来详细拆解什么是清晰和有效。
1.清晰 - 方向明确，方案明了
——————————
很多设计师对方案输出的数量有个认知误区，认为设计方案越多越好，可以给老板、合作方更多选择，往往不假思索地用大量的时间输出所有可能的方案，并拿出来让别人评审，认为把所有的可能性列出来就不会错，这正是对方案清晰性缺乏认知的表现。
在设计最初期，不要着急动手输出界面，先结合目标（近期目标和远期目标）综合考量，系统性地思考有哪些途径达到目标，确保所有实现手段的方式都有考虑到，并且可以整合途径一致、方向近似的方案。对差异性不大的方案进行合并划归，才能在合理范围内整理出具有不同思考维度与目标侧重的提案方向。前期规划思考的深度决定了方案的广度，只有清晰的思考方案才会创造无限的可能。
用案例来让大家对清晰这个定义有更具象的认知：
相册小程序Logo这个需求的目标是需要突出相册元素，并强化品牌识别度。
这是设计师输出的Logo提案初稿，虽然输出了28个方案之多，但没有设计思路的规划，想到哪就画到哪，很多方案是重复的，还有一些方案在设计初期就应该Pass，设计的整个细致度也不够充分。
于是设计师对设计方向重新进行规划整合，按照输出形式重新规划了分类。
按照分类筛选出四个可以继续优化的方案。并且拿着四个不同方向的方案去汇报。最终确定D方案。
我们重新回顾一下这个需求，28个方案 VS 4个方案，设计师需要的不是尽可能输出多方案的能力，方案越多可能表示你在错误的道路上越走越远，需要的是通过前期系统的思考能一次把方案做对的能力。
2. 有效 - 解决存在的问题、能达到设定的目标、可以落地的方案
——————————
很多设计师拿到产品需求会立即动手，认为满足了产品这个角色提的需求便是好的设计输出，或者把方案出的天花乱坠，当产品或者其他角色提出不同意见就会觉得他们不懂什么是好的设计。这些现象大多是因为设计师在项目前期没有正确思考和评估这个需求本身需要解决什么问题、方案能否达到团队共同设定的目标，以及方案是否能平稳落地这三个维度。
解决存在的问题—从问题出发
我们在实际输出方案的时候，不能从产品经理的需求文档开始，而是要把考量维度更前置，从项目现有的问题出发。这个问题的搜集包括外部用户的反馈，内部团队的声音，但需要注意的是用户的反馈不一定是真正的问题，需要做到筛选和甄别。比如新发布一个版本可能会碰到的一个情况是很多用户打一星反馈说界面太难看太丑，这种属于用户感受，我们可以再深挖一下用户觉得丑的原因，是不是改变了太多用户习惯，但又没有给用户真的带来更好的体验和更多的收益。
能达到设定的目标—从目标启动
问题还需要结合目标一起考虑，解决问题的思路并不完全等同于目标，目标是大家一起制定的未来产品的发展方向。比如我们新发布的版本里面新加了一个Tab改变了用户习惯，大批用户投诉，但如果这个新Tab是符合我们目标的，我们不能为了短期解决用户投诉把这个Tab下掉，应该继续观察用户在这个使用过程中碰到了什么问题，解决实际操作中碰到的问题。
用案例来让大家对问题和目标有更具象的认知：
我们需要优化QQ空间的为空界面，首先我们梳理下现网存在的问题，风格整体比较老旧，很多图形表意不明确，新出模块就会有新风格，所以存在很多不统一的地方，空间整个业务有一百多个为空界面，导致开发也不清楚到底应该怎么用，用什么，所以很长一段时间是处于乱用的状态。
接着我们梳理了这次优化的目标：
1 界面统一，用户能对表意感知明确（解决现网问题）
2 强化QQ的品牌
3 做成基础组件，保证复用性
4 低成本开发
确定了优化目标以后我们没有马上急于尝试风格，而是先遍历了所有为空异常页，整合了所有场景最后梳理出八种情况，这八种情况可以覆盖所有的为空场景，梳理整合场景是目标1、3、4能实现的前提。
然后我们基于这八个场景来输出设计风格，要低成本开发，所以这里没有考虑加动画，用企鹅剪影结合具体的场景来表意，不仅强化了品牌，也能做到表意清晰明确。图形定好以后我们马上也输出了规范，Push给对接的开发同学方便调用。
在输出方案过程中，始终都要紧紧贴合问题和目标，避免无效设计。
能落地的方案—技术可以实现
在输出设计方案的时候，设计师需要考虑到开发成本是什么，需要消耗多少资源去实现这个需求，最低成本达到目标的路径是什么。如果有些方案开发成本很大却收益价值却很小，我们就需要斟酌它是否仍有执行的必要。避免一味的追求设计效果不去对齐成本、人力，最后也只会是设计的自嗨。
用案例来让大家对清晰这个定义有更具象的认知：
产品提了好友生日推送礼物的需求，目标是想用生日这一比较温情的场景去设计专门的祝福页，用来提升写操作和大盘活跃。我们需要设计送给用户的礼物卡片，从实现手段的难易规划了三个方向：
A 手势交互但开发难度大: 3D手势交互动画
B 趣味动图且开发成本适中：局部小动画
C 静态但开发成本低：全静态视觉，复用已有开发流程
最后团队对齐了人力成本，决定采用方案C，把设计精力放在本身卡片的表现上。
HOW: 如何输出清晰有效的设计方案
那如何才能输出清晰有效的设计方案呢？设计方案归根结底是思维方式的具体体现，输出清晰有效的设计方案最核心的点在于体系化的思考方式，我总结了一下几点：
1 拓宽边界
——————————
拓宽边界需要设计师站在更高的视角和有更广的视野，把设计从表现和执行抽离往前后延展，在整个设计过程中往前去挖掘需求和规划产品结构，往后做到把控和沉淀，能站在上下游各维度去Review整个项目，只有站在更全局的视角审视，才能跳出片面设计的维度。
2 转换视角
——————————
从不同的视角看待问题，学会拆解问题和解决问题，从产品/开发不同的角度来全盘看整个产品，分析这个需求的投入产出比是不是足够，是不是能达到目标（包括设计目标和产品目标）。设计、产品、开发从来都不是对立的，都是不同角色为了整个产品发力。
举个例子，产品同学觉得输出的方案不好看，是在用感性表达，我们可以尝试继续拆解不好看背后的原因，比如是不是核心内容不够突出、担心按钮转化率等，一开始就抱着产品不懂设计这种想法是没有办法解决问题的。
还有一个就是用户同理心，很多时候我们不能只站在设计师和产品的角度看待用户反馈的问题，比如新功能内部团队觉得很厉害，但实际门槛太高，用户根本不知道怎么操作，而我们长期体验这个产品反而忽略了产品的易用性。
3 结构思维
——————————
我们在启动项目的时候，不要单点去看要在某个页面要做什么改动，而是从问题入手，和产品同学对齐好目标，结合设计理念，最后找到发力点在哪里，循序渐进，这样很大程度上能避免项目的反复，对设计流程的准确把控也是输出优秀设计方案的基础。
举一个日常生活的例子帮助大家理解，比如我的问题是长得丑，我的目标是要变得更年轻漂亮，我的理念就是改善体型和优化五官，最后找到具体的发力点比如晚上不吃晚饭，去美容院打美容针、学会怎么化妆等。
4 认知创新
——————————
有些新设计师对设计创新的认知还停留在是去做一些创造世界、改变世界的事情，认为创新就是把原项目进行翻天覆地的改变，初入职场会觉得负责的业务和项目都很小，没有什么意思，其实创新的维度有很多，包括设计工作流程的优化、还有从小的问题点着手去深挖和思考，找到合适的解决方案并打磨细节给用户创造惊喜。摆正心态才能做对事做好事。
5 及时复盘
——————————
完成项目以后需要不断的总结方法，遇到的问题，除了技法层面的提升，更重要的还包括思考层面的提升。学会去总结之前踩过的坑，避免重复性的问题，比如你的输出一直存在层级不清晰的问题，那么你需要关注后续输出的界面里大模块之间以及元素之间的层次是否还存在这个问题。可以犯错误，但是尽量避免总是犯同样的错误，这样才能加速成长的脚步。
作者：腾讯ISUX 来源：站酷
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
前人早已总结了让动画生动的技巧，早在1981年由两位迪士尼动画师所撰写的《The illusion of life:Disney Animation》一书就提到了动画的12项基本法则，该法则也是受用至今。法则虽是针对传统动画而制定，但对于我们日常需求中所接触的动效/动画需求也同样受用。
1）动画原则介绍
2）结合案例应用原则
3）流程方法论沉淀
4）结语
挤压与伸展是我们最常用的运动技巧。使用挤压与拉伸来强调物体的质感、重量、速度。挤压和拉伸会给予物体运动时具备质量感和体积感的错觉。例如当一个皮球正在进行下落运动，在运动过程中让皮球体积产生一定拉伸来表现它的速度感，皮球落地后则因力的作用产生挤压变形。
挤压与伸展的幅度影响着物体的质感、重量。设计师们可根据物体的质感去决定挤压伸展的幅度。动画虽存在夸张性，但对于物体挤压拉伸的体积尽可能保持视觉统一，避免较大的体积误差导致运动的突兀。
预期动作可告知观者物体运动即将发生，增强观者的场景代入感，使运动更加生动真实。如果我们去除前期的预备过程物体所呈现的运动感知像是突然被前方磁铁所吸引。
预期动作可对观者视线进行引导，设计师可以根据预期动作所引导的方向来衔接镜头/场景的转场。反之预期动作也可以用来欺骗观众，当用户预期与画面不符时也可增加动画舞台的趣味性。
每个角色/运动元素在运动过程中都会流露出独特的态度和气质。针对不同的角色/元素的运动特性运用不同的运镜、表演技巧、时间节奏以及舞台的编排技巧，传递贴合角色/元素气质的动态感知。
在现今动画工作流程中，考虑到流程效率及技巧利弊，我们可以使用两者相互结合的方式。关键动作描述的是设计师们熟知的关键帧动画的方式（类似AE）。在动画设计前进行基本运动的关键动作提炼，再进行细化，一层层的递进。底层的关键运动越完善，在后续添加细节时才不会耗费大量时间调整。而对于持续动作（逐帧动画）的技巧，我们可以利用它处理一些复杂效果例如（涉及到运动空间的变化、形状上的灵动变化等）。
逐帧动画。
优点：自由且流畅的动态。
缺点：难以把控时间长短、体积大小。
关键帧动画。
优点：清晰、可靠、规范。
缺点：修改成本略高。
跟随动作指的是元素运动结束后不会立刻停止，会因为质量、惯性等因素，元素会慢慢进行振动减幅的过程。重叠动作则指的是运动不会同一时间发生，主体与附属部分的运动会因质感、外力等因素产生不同的速率。
当一个人跳跃的时候，自身的衣帽等附属物也会随之摆动。跟随&重叠动作反应着运动的力量感和速度感，利用好跟随与重叠动作，可以更好地表现角色/元素主要动作/运动。当主要动作/运动力量大、速度快的时候，跟随与重叠的物体运动幅度大，反之则运动幅度小。
真实世界的运动遵循着缓动运动的规律，而并非匀速运动。根据物体运动情况、动态质感去编排元素合适的运动速率。关于运动的速率编排相关内容，可以看看过往的文章-《动效的质感》。
仔细观察可发现自然界中的运动多为弧形运动的组合，而匀速运动只存在于机械运动中。
在人物运动过程中使用弧形运动增添角色动画表现力。比如当人物抬头或转头时，通过弧度的变化映射人物的情感，是充满好奇心的还是沮丧的。
在交互动效中，弧形运动路径会给予观者运动表现力较年轻活泼的感知隐喻。设计师可根据品牌调性及产品属性去选择运动路径类型。
当主体在运动时，设计师可通过附属物运动来辅助表达主体运动气质。比如人物敲门时，捏紧拳头的敲（代表生气）与翘起兰花指敲的（代表精致）区别。
在上篇文章其实我们有提到影响动效质感的原因之一就是时间，控制好物体的运动时间也是表现良好动画节奏感的关键。
使用「时间偏差」的技巧，可以让你的动画更加生动。因为受力、质感等因素影响，主体运动时附属部分的运动不会同时发生。比如当人物正在打哈欠时，首先是从嘴巴发力，再扩散至五官眉毛。
为保持动效的连续性以及营造自然流畅的交互体验，适当的使用时间偏差，可避免动效元素变化过程出现空档期，提升信息传递效率减少认知负荷。
通过夸张手法增添动画表现张力，加强运动元素的吸引力令动画更有代入感和戏剧性。
动画设计时可通过营造镜头透视感、景深感模拟真实的空间感打破二维扁平视觉效果，提升画面表现力。
一部好的动画作品一定会有令人吸引的人事物，比如动态气质或视觉风格等它们都能很好的吸引观众。除此之外，如何讲好一个故事，通过趣味幽默的故事表达手法也可以增添动画的吸引力。
通过对十二大基本原则的学习，我将技巧分为以下两大类：设计技巧和表演技巧。
设计技巧：动画设计的技法，增添动画细节令动画表现更生动自然。
表演技巧：舞台表演的技巧，提升动画舞台全局的表现力。
接下来我们结合上述所提及的动画原则，根据实际案例进行结合应用。一起来探讨下当接到动效设计需求时，我们需要思考哪些点？才能使我们的动效表现力更上一层楼。
假设在项目中我们需要对设计元素（猪猪存钱罐）添加动效以提示用户已省钱成功的情感氛围。设计前我们先来分析下元素以什么动态/动作表现会更贴合元素性格。考虑到猪猪的可爱属性，采用了跳跃的运动方式。并拟定了跳跃后天上落下金币的动画脚本。
将脚本确定后，我们在脑海里已经有大概的运动画面。但在进入动效设计前，还需要明确在动画中使用哪些动画原则来提升动画生动性。
在添加动画细节前，我分享下在项目中经常用到的两个技巧。
实现挤压与伸展的方式有很多种，最常见的是直接改变物体的缩放比例或形状路径来实现。但在设计项目中我们往往会遇到非矢量的设计元素，利用xxx可实现图层的弯曲扭曲等变形效果。
质地坚硬的物体受外力的影响较小，质地柔软的物体受外力的影响较大。而像猪猪这类柔软的物体在恢复静止吋肉肉会有一个跟随&重叠动作（抖动）。在处理这类抖动的效果除了使用常规的弹性表达式外还可配合使用AE的 CC bend it 效果增加形变细节令物体运动更为生动自然。
当我们去除这些动画原则后，再去作对比明显的感知差异就出来了。
根据过往项目经验，我总结了动效/动画设计的流程思路。从业务目标的分析到动画脚本的确定，层层递进。前期的目标和框架确定后，之后进行动画原则的梳理及最后的动效输出。设计师们不妨在项目中尝试上述的流程思路及原则技巧，将自身动画的表现力提升一个档次。
随着动画/动效的落地方式愈来愈完善，像Lottie、svga等新型的动画落地形式所带来的高品质画面呈现。设计师们不能满足于动画仅仅只是动那么简单，如何去塑造生动的动画形象还有不少我们需要考虑的细节。恰好前人总结了相应的原则技巧，帮助我们站在巨人的肩膀上看得更远。除《The illusion of life:Disney Animation》外，近期也在阅览《动画师的生存手册》里面涵盖了不少关于角色动画的运动技巧及细节。其中部分技巧并不局限于角色动画的设计中，下期文章我将分享关于角色动画的知识沉淀内容。
作者：Fiasc1 来源：站酷
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
动效的质感主要由时间、速率、运动理念、运动方式等来表现。动效设计不仅仅只是动而已，作为设计师需要洞察更多的动效细节。通过对动效细节的把控去营造自然真实的动态体验，并根据产品品牌特性去建立其动效理念。
速率影响着运动的质感。让我们做一下对比实验，在相同时间以及运动效果下，只改变运动元素的速率曲线并观察它们的变化。两元素为一组，一组速率曲线较陡峭而另一组则偏平缓。通过改变速率曲线，元素在下落运动中所呈现的物体质量也有明显差异。运动曲线较陡峭且速率对比较大则会导致元素的质量更重冲击感更强，反之较平缓的曲线元素运动则较为轻盈。
时间的变化感知是较为直观的，我们可以通过调节运动时间的长短来表现物体的运动性格。时间越少，运动越快速干脆且可感知的运动细节更少。时间越多，则反之。
不同的运动理念会给物体带来不同的质感表现。举个例子一个活泼有活力的物体在运动的表现上会较为柔软Q弹，就需要通过回弹挤压来体现自身的质感。而运动理念生硬的物体，则相反。运动理念与产品品牌调性有关，根据品牌特性我们可提取一些适合的运动理念或在自然理念中吸取灵感，将其应用在自身的产品上可以更好的体现品牌价值。
运动方式依附于运动理念，是产品运动质感的一种表达方式。例如运动路径是曲线还是直线？空间的景深程度是如何的？可以明确感受到空间感吗？整体方式是基于效率还是表现力？在这一块，也需要设计师根据品牌调性及产品属性去作考虑。
因为运动曲线的存在，动效才会表现的如此自然。设计师可以通过曲线的方式进行运动速率节奏的编排，从而实现设计师们想表达的动效调性。在影响运动质感表达的部分速率的编排占了比较大的比重，借此机会讲述下运动曲线的基础知识帮助大家更好的理解曲线。
打开AE关键帧控制面板我们可以看到有两种曲线的表达图示；一种为速度曲线图表一种则为数值（属性）曲线图表。
速度曲线记录的是物体运动每一刻的速度变化。我们来分解下它的曲线图表，x、y轴分别表示的是时间与速度。观察下图的曲线则可以得出物体起始速度为0呈静止状态，后续慢慢开始加速并且速度达到顶峰；最后物体运动至终点并停下。整体图表展示较为直观，经过分析我们可以得知整段运动其实就是我们熟知的缓动运动（起点和终点慢，运动过程快）
对于速度曲线的编辑，设计师可以通过曲线手柄来控制运动节点的加速度。让我们双击节点查看关键帧速度图表来分析下速度曲线的基本规律。此时速度图表显示传入速度（incoming Velocity）为0，影响为33%。「传入速度」我们可以理解为运动起点的速度，而「影响」这个数值则可以理解为加速度。传入速度需要百分之多少的加速度即可达到最高速度，数值越大即代表加速的幅度越大曲线呈现的陡峭程度就越陡峭。
速度编排
当设计师们想针对物体运动速度做一些特殊的编排处理，使用速度曲线会更直观一些。例如：想要模拟小球弹跳过程中的滞空感，我们只需调节小球悬空时的速度大小及加速度即可。想要达到滞空的感觉，那运动中程球体的速度需要大于0让球体持续运动，就能达到我们想要的效果了。
表达式应用
我们经常会在动画内使用弹性表达式，许多设计师也遇到过表达式输入后还是没效果的情况。其实是因为当前关键帧的速度为0而导致的，除表达式所设置的弹性频率、衰减度外；速度也决定着弹性的强度，我们只需根据速度调节自己想要的弹性效果即可。
数值（属性）曲线记录的是元素属性随着时间的变化过程。我们也来分解下它的曲线图表，x、y轴分别表示的是数值（当前运动变化的属性）与时间。而该曲线代表着物体运动速率的分布情况，也就是速度等于=物体运动的距离（数值）/物体运动距离所花的时间（时间）。可能看着公式挺简单的（初中物理）但乍一看图表还是比较抽象，我们可以一步步的将其拆解方便大家理解它的含义。
我们先确定元素位移时间以及距离，在不添加任何缓动插值的情况下，赋予他们最基础的线形运动。也就是从0～1秒它的速度是呈匀速的状态。再将整条曲线分解成平均的几个关键时间点，记录元素在不同时间点所在的位置。
根据速度公式，我们去测试下速度的变化对曲线的影响是什么？关于速度的计算公式其实我们都知道的，速度等于单位物体的位移距离除于位移所花的时间，也可以理解为图表中的速度就是线段的斜率。
接着让我们将其速度提升一倍，从1秒的总时长提到0.5秒的时间。根据图示我们可以观察到当我们将时长加快时，速率线段与我们的x时间轴的角度越来越大。同理我们尝试下将运动属性数值降低一倍，我们可以观察到此时速率线段与我们的x时间轴的角度越来越小。我们通过上述的拆解分析，可以得到一些规律。在数值曲线下，时间以及运动属性数值影响着物体运动速度。根据曲线陡峭程度影响着运动速率快慢的规律，我们可以总结一个观察曲线的技巧。曲线越缓和（贴近时间轴x）速率越慢，曲线越陡峭（贴近数值轴Y）速率则越快。
在弄明白了数值曲线的基本规律后，我们将曲线做一些处理让他更贴合于我们的现实自然运动。模拟现实物体运动的状态，物体刚开始慢慢起步再到加速的过程。如下（P1）图所示数值曲线在前半部分速率较慢，到达时间中点后突然增速并到达终点。将曲线作一定的平滑过渡处理就是我们所熟知的缓入（P2）曲线啦。
对于不同的运动曲线模式（速度/数值），设计师们需充分了解其曲线模式的含义。我们可以根据设计场景去选择适合的曲线模式，关于场景还有很多，我大概罗列了部分项目接触到的特定场景出来。主要目的是想让大家意识到熟练的掌握两种运动曲线模式的重要性，别将自己的工作方式或习惯限定太死，灵活的变通很重要。
AE动画中部分无具体数值单位的动画帧，例如（蒙版路径），设计师们只能通过速度曲线进行调节。
使用弹性表达式需根据速度大小去调节弹性强度。
在UI交互动效的设计场景，数值曲线适应于落地开发的贝塞尔曲线插值器。
数值曲线是C4D动画的默认函数曲线模式，在C4D中无法调节速度曲线。
通过上述分析我们对运动曲线模式的了解更进了一步，接下来让我们结合案例探究下不同运动曲线类型的含义以及应用方式。减少大家在动效设计过程中的公式化硬思维，提升自身对于动效的编排能力。
缓入运动即加速运动，物体运动的时候都需要一个加速过程，并不会马上达到速度的最高峰。观察自然世界，有许多类似的运动案例例如弹弓以及汽车发动等。在交互动效中缓入运动会运用在元素离开页面的情况。
这里的离开指的是元素永远离开屏幕并且无法让我们返回的操作例如，弹窗、通知等。元素将会一直加速至消失，且告知用户该元素不会再出现在页面某个角落了。
缓出运动与缓入运动相反，描述的是元素的减速运动。类似于我们生活中行驶中的汽车减速的案例。我们可以利用缓出运动表示界面外的元素进入屏幕，即元素以高速度进入屏幕慢慢减速至静止的过程。
结合自然世界的运动规律来看，把页面进入的元素比作是行驶的汽车，用户当作是正在斑马线上行驶的人，将马路作为页面空间。若汽车采用的是缓入运动（加速）的话，马路上的行人则看到的是一辆不断加速向他行驶过来的车辆。因为担心车辆高速的逼近导致刹车不及时的情况，行人便会本能的作出躲闪的反应。其实页面也是一个道理，进入的元素使用加速运动出现过冲的运动感知会让用户体验时产生不适。
缓动运动即我们所接触的常规运动类型，在运动开始慢慢加速再到运动结束慢慢减速的过程。该运动符合自然世界大多数物体的运动逻辑，也是页面中经常使用的曲线类型。
阅览Material design动效模块中关于缓动曲线的描述，适当的增加曲线的不对称感可以让运动更加真实。我们可以根据页面元素运动逻辑和产品品牌特性来设定缓动曲线。缓动曲线适用于大部分在页面中运动的元素，当元素在页面消失且用户可进行返回等操作时也应使用缓动曲线。
在现实生活中，因为作用力与反作用力的存在。皮球触碰到地面会不断弹起，而用手推船，船就会离开岸边。这就是我们所说的弹性运动。弹性曲线与其它曲线（常规缓动）有些许差异，弹性曲线由两个值影响着它；弹性阻尼以及振动频率。
弹性曲线相比常规运动曲线更贴合自然运动现象，在运动的衰减过程更为真实。早在ios7中，苹果就已经大范围使用该类曲线。例如APP收起展开、预览窗口收起等。弹性运动并非需要表现出明显的回弹感，就算运动无明显的回弹感其效果相比常规曲线实现的运动启动速度更快，且会有更长的一段衰减距离。让用户更加集中于物体运动的衰减过程（结尾）而并非加速过程，也使得ios的使用体验更符合自然规律以及交互反馈更为真实流畅。
与常规的缓动曲线不同，设计师可在Framer、Protopie、flinto、principle等软件根据自身需求来尝试并输出弹性运动相关数值提供于开发。对于不同（ios/安卓）平台关于弹性数值单位的转化，设计师们可根据MartinRgb的Animator list网站去模拟各端弹性运动的数值来对接开发。
Animator list：http://www.martinrgb.com/Animer_Web/#
弹性运动可赋予物体材质，通过弹性运动我们可以表达产品的品牌调性。例如面向低龄人群的产品或是娱乐类型的产品可在产品内大范围的使用弹性运动去传递产品品牌的运动感知。除此之外，弹性也存在不少寓意。对于ios中使用的弹性运动，官方说法是基于用户行为的奖励反馈。如果用户滑动操作UI元素的话，就有回弹，显得用户滑的力度很强，是一种奖励性反馈使得用户的体验过程更为真实自然。弹性也具备提醒的作用，吸引用户对元素的注意力以及提示用户该元素可进行逆操作等。同时切忌在页面中使用过多的弹性运动，设计师们在使用前需要充分的考虑当下页面使用场景、产品品牌调性等因素。
现在越来越多的公司开始制定自己的设计语言/理念，像Material Design、IBM、IOS等。对于"动效"目前市面上大多数产品有着自己的动效规范，但并没有上升到语言理念的层面。规范并不等同于语言，语言应反应其品牌特性和灵活性。为此最后分享下个人目前对于动效语言的理解，以及关于动效语言制定的技巧经验。
作为互联网设计师的我们都熟知视觉语言的概念，通常我们会根据产品所传递的品牌特质去制定产品的视觉语言。动态语言也是如此，通过提炼产品品牌气质去传递一种感受。我们的动态体验是什么样的感受？是高效简洁的还是活泼具有表现力的？为此我们可以找寻对应的品牌核心理念或是运动现象，组合提炼出符合品牌调性的理念和感受。
动态所传递的感受是感性与理性的结合，在感性层面我们根据产品的品牌形象提炼出相应的情感感知。而在理性层面我们需要分析产品受众用户特征以及产品类型业务属性等，针对其特征进行产品体验感知的传递。根据提炼结果，我们可以得出初步的动态感受。
以提炼的动态感受为出发点，理性的层面给予了我们大致的产品体验感知，为我们的动效理念建成提供了框架。对此我们将继续从感性层面出发，找寻可传递品牌感受的运动现象并加以组合提炼；将运动特征以及动态感受落点于实际的动态理念。这个过程与品牌设计非常相似，动效理念的孵化应充分考虑情感层面品牌感受的传递。而并非只考虑理性层面的感知，忽略其品牌气质的塑造。
到这一步，动效语言的雏形已形成。通过感性与理性两个层面去呈现「感受」，明确产品需给予用户什么样的动态感知。后续我们可以结合动态理念去进行动效原则的总结，根据原则去输出后续的动效规范并进行推动落地。
建立动效语言体系，而并非只是建立规范。动效语言的价值除规范统一及体验优化外，更重要的是传递产品品牌调性。以动效为例，用户使用产品所接触的交互动效、视效动效等其表现的动态感知都在潜移默化的影响着产品的使用体验以及品牌形象。在目前大家都在注重设计带来的短期商业价值的环境下，设计师也应重视下产品品牌、体验价值的建设。
作者：Fiasc1 来源：站酷
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
目录
一、项目背景
二、项目分析
三、风格探索
四、设计原则
五、深色模式
六、设计规范
七、总结
一、项目背景
这家公司主要致力于研发医疗大数据和人工智能驱动的智慧医疗产品，其产品主要用于疾病的预测、筛查、诊断和治疗的各个环节，主要聚焦于人工智能医学影像领域。
产品定位
1、开发定位：web应用；
2、用户群体：从事医疗行业的医生；
3、功能定位：解决的是医生阅片花费时间过长的问题，能够辅助医生智能诊断的工具型智能应用系统。
二、项目分析
从前面的产品定位，可以得到以下三个关键词：web、医疗、应用，同时根据这三个关键词可以延伸出一些问题，然后开始着手准备前期设计工作。
A、医疗设计注意事项
1、医生的操作交互模式习惯于之前固有的Pacs阅片系统，设计时要尊重现有的交互模式；
2、因为多数影像科的使用环境都比较暗，所以界面整体风格采用深色模式。
3、因为有很多专家都是比较年长的，考虑到这一特点，在制作设计稿时字号不能太小。但是信息内容又多，字号大的话信息很难布局，这是一大问题；
4、和第3点类似，影像应用要求给影像显示区域留有足够的空间以，这就导致其它文字内容的空间又被压缩了，其它文字内容的显示又成了问题；
5、安全性，涉及到很多病患的信息，如何体现安全性很重要；
6、整体风格上趋于保守，因为是为医院设计的，颜色使用上相对来说要克制。
B、web设计注意事项
1、最明显的是用鼠标操作系统，鼠标的交互方式多，有hover、click、滚轮、左右键等等。而鼠标右键一般是浏览器自带的功能，不方便定制。
2、pc端浏览器右上角带有关闭浏览器。同时自带后退、前进、关闭的按钮，有点类似于安卓系统自带返回键。这些功能影响着应用信息保存的交互问题；
3、布局问题，浏览器可自由伸缩，会影响页面的布局；
4、设计时不存在@2x、@3x这些问题，采用@1x设计就可以，可以给设计和开发带来不少便利，有些切图为适配高分辨率的屏幕需要切2倍3倍图；
5、头部浏览器自带菜单栏，会影响纵向空间的布局；
6、什么时候新开标签页和什么时候在当前页面跳转问题。研究显示，国内网页多喜欢新开标签页，国外网页喜欢在当前页面跳转，但是应用类型的网页更多的还是在当前页面跳转；
C、中后台系统应用设计注意事项
1、中后台系统信息繁多，因此系统用起来体验好不好、效率高不高尤为重要，在医疗行业更是如此。如何用设计区分信息的层次，并且在有限的空间展示尽可能多的信息是设计的首要任务，为了展示正确的信息哪怕展示方式不对也比设计的好看而信息展示不全要好。
2、尽可能的优化操作流程，再精美的设计也不如优化一两个流程效率来的快一些；
3、交互点到为止，尽量少用复杂的交互方式，比如拖拽，双击和右键都尽量少用；
4、对颜色和icon的运用要谨慎一些，以免造成多余的认知障碍。由于文字能够传达清晰准确的信息，无疑是更好的设计元素。
5、即时反馈是提高效率的有效手段。
三、风格探索
A、布局
我们采用左右布局的设计方案，将左侧菜单栏固定，右侧工作区域动态适配。菲兹定律表明：越远难点击，越近越容易点击，靠近边缘更容易点击。因此菜单栏在左侧时，当浏览器全屏时，点击左侧的菜单相当于是点击边缘的目标，这种操作路径用户所花的时间是最少的。而当菜单栏在上方时，因为上方有浏览器自带的菜单栏，会影响用户的操作，因此用户点击起来所花的时间更长，也容易操作失误。
B、色彩
医疗产品多采用蓝色作为主色调，蓝色具有安静、信赖、科技的色彩象征，然后绿色是生命、医疗的象征，所以最后选择了一个蓝色偏青的色彩，比较符合现有的产品调性。另外因为影像科工作环境多为暗室，所以界面整体采用深色模式设计，字体颜色的选取注意WCAG规范，文本和背景的对比度至少要有4.5:1。
C、字体
我们最开始设计demo时，常用文字使用的字体大小是12，而医生试用后反馈字体太小。原来有很大一部分医生专家都是比较年长的，12对于他们来说字体小了点，因此我们决定采用14作为主要字号，12作为辅助说明文字。
D、图标和圆角
为了更好的搭配深色模式，我们决定图标采用面性图标（后文会讲解）。图标和按钮的圆角也采用了直角硬边风格代替了常见的有圆角风格。硬朗的图标有一种精确性、科技感，更符合产品调性。
四、设计原则
A、层次清晰
中后台系统有信息繁多，这就需要设计来区分信息的层次，引导用户去关注最重要的东西，“偷偷地”给用户一种高效的体验。这里根据《写给大家看的设计书》当中的四大原则：对比、对齐、亲密性、重复，来区分信息的层次。
①、对比
对比即为设计元素的对比，可以是颜色对比、字体对比、大小对比等等。恰当的对比能让看起来更有层次，能给产品提供一种韵律美。通过对比可以引导用户的视线，减少用户的选择时间，间接的提高了使用效率。
②、对齐
对齐作为设计的最基本原则，是建立秩序的一种最基本手段，合理的利用对齐方式能够有效地提高用户体验。常见的对齐方式有左对齐、居中对齐、右对齐、两边对齐。在中后台系统中常常出现标题长度参差不齐，表单内容长短不一的情况，这种情况不论是左对齐还是右对齐都会出现不整齐的问题。而这时，我们往往要考虑的已经不是美的问题，而是哪种方式更能够提高用户的使用效率。
③、亲密性
亲密性能够让内容凝聚在一起，产生层次而不凌乱。信息的关联性越高，它们之间的距离应该越近，反之就应该越远。在本系统中页面中的纵向间距采用小、中、大三种间距来区分层次，分别是8px、16px、32px，以此来体现页面的组织性。另外，一些特殊情况，比如空间有限，最小间距可以是4px。其它不适应的情况统一采用8的整倍数定义间距。
④、重复
相同的元素在页面间的重复运用，可以有效的降低用户的学习成本。也能够帮助用户识别出这些元素的关联性。重复的元素可以是某个颜色，某种样式，某个布局。这里主要讲重复在不同产品之间的应用，不同产品之间有相同的结构布局、相同的配色能够让用户快速上手我们的产品，同时也是对品牌感的一种强调。例如：由于医生以前习惯于使用医院的pacs系统来阅片，所以在影像显示页面，我们延用之前pacs系统的布局，让医生找到一种熟悉感。
B、即时反馈
人机交互时，系统及时给出反馈非常重要，反馈能够给用户确定性和安全感。如果用户操作了系统，得不到相应的反馈，用户往往觉得系统是不是出错了，就会给用户造成一种负面使用体验。常见的反馈形式有确认反馈、警告反馈、错误反馈、状态反馈。本系统中从患者拍片、系统智能分析、医生审核、保存打印，各个步骤都应该有确认反馈、警告反馈、错误反馈、状态反馈，只是反馈的形式可能是弹窗，可能是颜色的变化，可能是符号的提示等等。这里举例最基本的按钮一定要有normal、hover、click、disable，不然用户不知道自己的操作是否起作用了，给用户造成认知障碍。
C、简单有效
奥卡姆剃刀原理讲究设计时避重趋轻、避繁逐简、以简御繁、避虚就实，因此在设计时，我们会和产品经理商量有些功能是否真的有必要放上去，或者有些信息是不是可以隐藏。例如：搜索栏，按照医生阅片流程来看，医生是很少会使用到搜索功能的，即使用到了，搜索病人ID就足够了，其它项目的搜索完全可以放到高级搜索里。再比如病人列表里，往往会因为列表项太多使整个表格看起来非常臃肿，于是我们筛选出了最重要的7项，其它不是那么重要的，我们就以自由定制化的形式放在右侧，医生可以根据自己的需要进行定制。
五、深色模式
前文提到，根据医疗产品的特性以及用户的使用环境，我们的系统采用深色模式。然而深色模式并不是简单的背景色使用深色那么简单，因为背景变成了深色，相应的字体的颜色、图标的风格、元素的布局等等都会产生微妙的变化，以下列出一些深色模式要注意的一些事项。
A、颜色
1、深色的选取尽量不要直接选用纯灰色，可以往冷色系偏一些；
2、白色背景上不会用纯黑文字，同样的深色背景上不要直接使用白色，否则会产生强烈的刺眼感，但是一些按钮还是要使用白色；
3、字体的中性颜色深浅建议使用白色的透明度变化来制作深浅，原因有两个：一是透明度变化能够让字本身投射出背景色的色调，做到自带色调的效果，能够让页面更自然协调；二是利于设计和开发理解记忆，有一个量度去衡量。虽然通过透明度变化有时会碰到没有背景色的问题，但是这种情况很少，而且也很好解决，增加一个背景就可以了；
B、图标
最开始我们就像以往一样，图标的形式采用线性图标。但是我发现在深色模式下，线性图标变得单薄、空洞。我们分析是因为在白色背景下，线性图标是深色的，深色具有收缩感，让人眼能够关注到“线”和被线包围的“留白”，人眼关注的是整体；而在深色模式下，线是白色的，白色具有扩张感，白色的扩展让人眼的关注点变成了“线”，忽略了“留白”，所以人的观察感觉是缺失的，而且在大面积深色的压迫下，线性图标变得特别单薄。于是我们决定采用面性图标来代替之前的线性图标。
六、设计规范
原子设计理念
原子设计理论由设计师Brad Frost首先提出，我觉得这套理论能够很好的组织构建设计规范，也有利于团队成员理解与协作，于是我把这套理论践行于这套系统中。在原子设计理念中，一切设计都是由最小的原子组成，然后原子可以演变成分子，组织，模板，页面。
1、原子
为UI设计构成的基本元素，文字、颜色、图标、图片、调色板、进度条、分割线、开关、单选框、复选框，也可以为抽象的概念，例如色调等。特点是不可再分割。
2、分子
由原子构成的简单UI组件。按钮、标签、导航、输入框、搜索框等。
3、组织
相对分子而言，较为复杂的构成物，由多个简单的UI组件构成。弹窗、表单、列表、卡片、数据图表等。
4、模板
以页面为基础的架构，将以上元素进行排版。例如消息模块、列表模块、项目模块、表单填写相关模块。
作者：Watt海罗 来源：站酷
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
发现一个非常好用插画神器
地址是https://blush.design/zh-CN/sketch
能自动生成各种你需要的插画形式，重点是这些插画都是可以免费商用的，肯定能帮到你。
它有Figma和sketch2个不同的版本，下面彩云就以sketch为例来说说这个插件怎么用。（没有Mac电脑不能使用sketch的同学，也可以用figma来生成插画哦，所以在win下也是可以用的，使用方法跟sketch类似）
1.如何使用
使用非常简单，只需要简单几步就能搞定：
1）下载插件并安装
装好后，从插件菜单点开Blush插件，会出现一个插画库界面。
2）生成插画
1.创建一个矩形，先给定一个大小，目的是为了给生成的插画一个位置和范围（也可以后面再调整，不是太重要）
2.选一个你喜欢的插画风格，点下封面右上角的随机图标
3.生成之后，你还可以针对它的组件各个部位再次随机，当然你也可以根据自己的喜好直接选择对应的部件
免费版把插画的尺寸改到中型尺寸再生成。效果调整好之后，按正常的sketch选择导出png图片就行。想导出svg矢量格式的需要付费，但我觉得2x的Png图，已经足够用了。
2.插件包含了哪些类型的插画资源呢？
1）城市元素
2）装饰背景
3）人物场景
3.这种插画在实际项目中运用如何？
彩云随便做了几个，大家可以感受下，效果应该还可以 。
1) 引导页
使用了插件中的Tech Life主题插画
2）网页头图
使用了插件中的Tech Life主题插画
3）作品集包装
4）登录页
使用了插件中的Cityscapes主题
4.结语
这个插件的原理是把插画进行组件化，利用sketch和figma的组件功能进行拆分再重组，构成大量的随机插画。可以看到，组件化已经成为一种思维方式，最初是用在UI中，现在已经扩展到了插画领域，未来还有哪些可以组件化？我们可以一起思考。
作者：彩云Sky 来源：站酷
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
迪士尼动画的12条原则是设计师必须要掌握的经典指导性原则，是由 Ollie Johnston 和 Frank Thomas 在他们的书《The Illusion of Life》中提出来的观点（译者注：这本书在豆瓣的评分有9.3分，值得一看）。这些原则最初是用来为动画片这种传统的形式设计的，然而，这些原则也同样适用于 UI设计。所以，我想在这里做一个有趣的尝试，看能否将这些动画原则联系起来。
在动画中，挤压和拉伸代表了物体的重力，质量，重量和灵活性。举例来说，当一个弹球在它撞击地面时会发生形态变化，就是挤压和拉伸。
在界面中，挤压和拉伸很容易就联想到按钮。当一个按钮被按下时，就可以理解为受到了挤压，通过控制按钮的挤压和拉伸，我们可以很轻易地做好一个按钮的交互动画。除了按钮之外，这种原则也可以应用于 UI 中的任何交互元素上。
△ 按钮在交互时的挤压和拉伸
△ 挤压和拉伸被应用于侧边栏
让观众能预先知道接下来将会发生什么，它是先于下一步会发生的动作。举例来说，迪士尼动画里经常有从高空往下跳跃时会先弯曲膝盖再跳，正在跑步的人要停止跑步前会逐渐变慢步伐等等。
在界面中，悬停状态就是很好的例子。当我们把鼠标悬停在元素上时，元素会提供反馈，表明它是可以点击的，并且在点击时，又会有一些别的反馈。
△ 悬停的交互通常会暗示这个按钮是可以点的
在有水平滚动界面里，通常在交互时会显示下一个元素的部分内容。这其实是一个很好的例子，因为它是在告知用户下一步的一些信息。
在传统动画中，时间会决定关键帧的绘制方式。帧数越多，动画就越流畅，同时也更慢，时间能够给动画赋予情绪和性格。
时间的节奏感是任何动画的基础，速度在元素编排中起着非常重要的作用。速度太慢，用户会不耐烦；速度太快，用户又会错过一些内容。一般来说，大多数 UI动画在200-600ms之间，其中悬停和反馈交互时长大约为300ms，精细的转场动画大约在500ms。也可以去参考谷歌的动画规范（https://material.io/design/motion/speed.html#duration），里面非常详细地解释了每种动画类型的持续时间。
一些设计系统，如 Carbon（https://www.carbondesignsystem.com/guidelines/motion/）、 Lightning（https://www.lightningdesignsystem.com/guidelines/animation/styleguidelines/）都把运动的节奏感视为一个很重要的方面，并为每种类型的过渡都制定了严格的规范。
△ 右边的过渡动画显得太过于漫长，繁琐。
在现实世界中，大多数物体都遵循着缓动运动规律。也就是说，物体的运动并不会瞬间开始或瞬间结束，就像一个物体自由落体，也是一开始很慢后面才会变快。
△ 左侧的卡片是没有缓动的，右侧的是带有缓动的，看起来会自然很多。
给 UI 中的元素加上缓动会让它看起来更加自然，缓动和节奏感都是可以有效的提升动画的品质。
舞台中的表演需要合适的编排才会精彩。也就是说，对象在场景中如何摆放，每个动画又如何出现，关乎演出的质量。通过这种编排，能够将注意力引向最重要的角色。
在界面中，呈现方式能够决定元素的位置，以及在交互时，它应该如何编排才能将用户的注意力引向预期的元素。
比如现在有一个基于兴趣的音乐APP，对这个应用来说，最重要的事就是让动画引导用户选择他们所喜欢的音乐。因此，有必要将类似的操作与其他元素分开编排，有目的的引导用户。
一个从高处抛出的小球，运动轨迹会做抛物线轨迹运动，弧线能使物体的运动更加自然。
在界面中，沿着对角线的元素沿着弧线轨迹将会使运动变得更加自然。当需要凸显出元素的运动路径时，多尝试使用弧线轨迹。
△ 通过对比，能够发现右侧的弧线运动轨迹会比左侧的直线运动轨迹显得更加自然。
在动画中，次要动作能够起到烘托主要动作，比如动画中的角色在走路时，头部的晃动就是次要动作，却能够让角色行走显得更加自然。
在界面中，次要操作能够起到强化关键动作，当元素需要向用户提供反馈时，这个方法非常管用。所有的微交互都是基于这个附属动作原理。
△ 按钮边上的粒子效果强化了主按钮的点击效果
场景中的重要角色通常会采用一些比较夸张的动作来获得更多的注意力。
在界面中，重要的交互也会通过一些夸张的动画来引起用户的注意。谷歌设计规范中的 FAB按钮就是一个很好的例子，FAB按钮在不动的时候也比较能引起注意，因为它通常会带有比较鲜明的颜色，并且是独立悬浮在界面元素之上的。当它被点击时，FAB的动画被放大，把整个界面都占满，使得它完全占据用户的注意力。
△ FAB夸张的交互形式
△ 对于支付这么重要功能的按钮，通过夸张的动效引起用户的注意
想象一只兔子从高处跳下来，当兔子开始起跳时，它的耳朵动作会与身体动作发生错位。然后当它着陆时，它的身体停下来了，但是耳朵还在动。前者称之为跟随动作，后者被称为重叠动作。其原理说的就是：没有任何一种物体会突然停止，物体的运动是一个部分接着另一个部分的。
在界面中，可以使元素在停止之前超过它们原本的位置，使得元素运动更加自然。（译者注：大白话就是我们常说的回弹效果。）
△ 界面有一定的回弹，会显得更加自然。
△ 当界面滚动时，文字会跟随图片的运动，图片与文字以不同的速度运动会更加自然。（译者注：像是被拖着走的那种感觉）
界面中的每一次交互都必须在适当的场景中精心设计，让整个体验更具沉浸感。在正确的地方使用这些原则能够确保产品中的交互体验更加协调自然。
这些原则正在以不同的形式应用于当今的数字产品中，值得敬畏的是，30年前设计的一套规则到今天仍然适用。
（译者注：这又应了迪特·拉姆斯的设计十诫，好的设计是不会过时的。）
作者：彩云Sky 来源：站酷
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
临摹是一个很好的学习方法，人类学习就是从模仿开始的，而对于设计师来说，临摹作品对于提升学习效率尤其有用。
但在做具体临摹练习时，就会发现一些问题，比如在星球里看到同学们做日常打卡练习时会遇到临摹的原作本身质量不高，不会分析作品优缺点，不知道如何用到自己的项目中等等。所以我在星球里的月度分享会上跟大家聊了这方面的经验，今天也将部分内容整理成文章分享给大家，希望能提高学习效率。
分享的内容分以下几点：
1、为什么需要做临摹练习？
2、临摹的几个阶段
3、如何找到优质临摹作品？
4、如何做临摹思考？
5、保持行动力的秘诀
6、总结
有些新人在刚入行的时候，出于对设计天马行空的想象，不屑于做临摹练习，觉得作为设计师就应该多发挥一些自己的原创能力。想法是很好的，但此时更多的是手上的输出跟不上脑子中的想法，产出的原创作品质量往往不高。而临摹是站在巨人的肩上做事，提升动手能力的同时吸收优秀的设计思路对自己的提升来说非常有帮助。
其实不光是小白需要临摹，很多资深设计师甚至艺术家也会采用临摹的方式提升自己的能力，从中学习别人的创作思路、表达方式，学无止境。
不同的阶段，临摹的目的也有所区别。一般来说，前期临摹更多的是练习软件、技法，后期才会是练习别人的风格表达，综合运用。所以，我把临摹分为3个阶段：
因为是练习技法，训练的是自己的软件操作能力和观察解构能力，所以我通常会选择稍难一些的作品进行临摹，目标是跟原作尽可能的一模一样。
比如我6年前临摹的Mike大神作品，就比较考验技法，适合初期刚入门阶段做练习。
这个阶段主要是练习思考和分析能力，尝试理解原作者这样设计的原因和目的。这个阶段，我通常会选择临摹一些有特点的图标或者界面，并尝试改动原作中的一些小的元素，目标是有保留原作的特征，又会加入更多自己的思考让作品在细节上有所区别。
比如在2015年做的界面练习，同时还会记录自己的思考
其实经过一段时间的练习，你肯定已经积累了不少创意，现在有实现能力就可以尽情发挥了。虽说是原创，其实也会大量找参考。刚入行设计的时候，我一直觉得，大师应该是可以完全自己创造出新的作品，但后来知道，优秀的作品大部分都是建立在融合非常多优质作品精华之上完成的。之前看过暴雪的设计师分享，他们做一个场景效果，光找参考都要花掉一半的时间，可见找参考的重要性。
这个作品当时是我在圣诞节前做的，是有参考笑脸、塑料口袋、光碟、进度条光带等等结合起来的原创作品。
既然是希望通过临摹从别人的作品中学到东西才去做，那么临摹优质作品就很关键。我一般会从Dribbble,Behance,Pinterest,Instagram和大厂出品的应用中找临摹对象。判断是不是优质作品，可以从推荐上，细节上，吸引你的点上进行选择。
比如，我想做一些细节丰富的UI控件，那平时大家打王者的时候，里面的UI细节都是非常精致的，包括按钮样式，排版，造型，动效，可以从中学到的知识点可太多了。
在比如在Dribbble中，用关键词进行搜索，再筛选为热门，时间选择最近一年，就能知道流行趋势和设计佳作了。从中选择一些很有感觉的作品来临摹练手，肯定很有动力了。
不要无脑临摹，做的过程一定要多加思考，我一般会从以下几个方面来做分析：
同一个作品，闪光点的判断因人而异，但你既然喜欢它肯定就有你看中的地方。你喜欢的那个细节，就可以是它的亮点，记录下来就是你的思考。这些记录会成为你下次创作时的灵感，在实际做项目的时候就不会脑袋空空了。
比如下面这张作品，我就很喜欢它的光影细节表达，在开关的边缘还会有小光源的颜色影响，会有红色和绿色的边缘光。我觉得这张图值得学习，所以就临摹了下来，这张图就是我临摹之后的效果。
记录你觉得是问题的地方就行，不讲对错，只需有你自己的理由就行，然后尝试给出自己的优化方案。没有完美的作品，但如果确实暂时看不出来也没关系。
在做临摹的过程中，会遇到哪些问题，比如某些效果跟原作有差异，某些字体大小间距不好把握等等，这些就是你可以学习的地方。
比如我在最初做UI的时候，就不清楚具体的设计规范，我就逐个把原作用到的间距，字体，尺寸全都量出来，然后用到临摹的界面中，自己来摸索出设计规范，而不是去死记硬背。更多当年我的打卡日记系列请见https://www.zcool.com.cn/work/ZODAxNzI2MA==.html
做练习，最重要的是坚持，让很多人苦恼的是做了几天看不到效果就没了动力了，但其实想要坚持做事也是有方法的。
就像挖井一样，每次打井就要打通看到水才行，设计练习也是如此。一段时间专注一个能力的练习，学到会运用才算是真正掌握。这里我的方法是按主题系列来执行，比如这周我主要打卡练习美食类的图标设计，那么就会找各种差异化的风格来练习。系列感的练习也更容易出效果，获得满足感。今天练这个，明天练那个，心态很容易浮躁。
往往做练习的时候，很多时间会花在纠结到底练什么内容上。减少选择的办法就是列好清单，提前规划好每天做的内容，具体可以直接执行的程度。
学习最忌讳的是三天打鱼两天晒网，保持规律，每天进步一点点很重要。忙的时候，也要至少保证自己比昨天有点进度。这个进度哪怕只是改个颜色，调个比例，或者有点思考记录都是行的。做两天又中断几天，很容易产生挫败感，而每天进步一点点的本质就是让你获得心态上的稳定感，这会成为你坚持下去的持久动力之一。
千万别闷头做东西，多寻求反馈，不论是发设计作品到平台还是朋友圈，亦或是在星球里跟一群相同想法的人互相打卡点赞，这些反馈和认同感都会不断激励自己坚持下去。当你因为坚持一件事而有收获的时候，就能体会到一种成就感与满足感。不断给予自己一些正向激励会让自己进入一个良性循环，更不容易放弃。
作者：彩云Sky 来源：站酷
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
今天这篇国外大佬写的文章，算是从为什么这样做的角度来分析卡片设计，一起来学习吧。
从Instagram和Facebook这样的社交媒体应用到亚马逊这样的电商平台，卡片设计似乎是无处不在的，这些大厂广泛应用使得卡片设计很快流行了起来。
作为一个信息容器，卡片能承载包括文本、富媒体、按钮等所有UI元素。基于这些内容，卡片设计可以根据不同的设备和屏幕调整其大小，平衡界面视觉和用户体验。
卡片是一个UI组件，包含了某一个内容的信息和操作。卡片可以包含各种元素，但它们都应该属于同一个主题。
这样做的目的是为了避免冗长的文字，并呈现更多的内容。即使从设计的角度来看，用户可能不熟悉卡片的概念，但他们马上就知道如何使用它们，因为它们与实体卡片是一样的。（彩云注：这个就是用户心理学中隐喻的运用）
卡片之所以流行，是因为它们能更好的把控内容。卡片是模块化的，所以不同的内容可以堆叠在一起，而不需要注意它们的差异。
卡片通过强制内容适应卡片边界和卡片布局上的限制来聚焦内容。设计师喜欢通过卡片混排大量内容，而无需担心设计会变得杂乱无章。
卡片可以将内容分解成易于理解的小块，以便用户与之互动。通过给内容一个容器，卡片向用户表明内容是真实和感性的。
卡片 UI 设计流行的原因还有很多：
直观：卡片在界面中看起来与现实世界中的卡片相同，它们对用户来说似乎很常见。在卡片成为移动和网络应用中的流行元素之前，它们在现实生活中无处不在：名片、棒球卡、便签。卡片代表了一种有益的视觉类比，它允许我们的大脑直观地将卡片与其所代表的内容联系起来，就像在现实生活中一样。
易于阅读：卡片不占用太多空间，并敦促设计师优先考虑其内容。不同的是，每张卡片都变成了易于阅读的内容。卡片让用户更容易找到他们感兴趣的内容。
有吸引力且对用户更友好：基于卡片的设计通常非常依赖视觉效果（尤其是图片）；就信息架构而言，视觉层次会更加清晰。使用图片有助于使基于卡片的设计比不在卡片中排列的相同内容对用户更具吸引力。
有利于响应式设计：卡片是矩形的，可以平滑地调整大小，以适应不同屏幕的水平和垂直正面，这意味着用户可以在所有设备上获得统一的体验。
便于分享：卡片可以鼓励用户在社交媒体上分享内容，因为它允许用户只分享特定的内容，而不是整个页面。
什么时候应用卡片设计？
这通常是当你有:
基于搜索的界面: 卡片能通过模块的内容快速显示合适的内容，这使得用户可以深入了解自己的兴趣。基于卡片的设计是一种非常适合呈现这类内容的方式。
信息浏览：当用户浏览信息时，卡片的兼容性更好。
任务管理：当可以将流程中的单个任务作为卡片进行说明时， 可以轻松组织卡片以获取任务列表。任务管理应用在使用卡片式界面为用户创建仪表板方面做得很好，其中每张卡片代表一个单独的任务。
类似项目：卡片最适合于异构项目的集合（当并非所有内容都是相同的基本类型时）。
可视化分析: 仪表板通常在同一页上同时显示各种内容样本。在这种情况下，卡片类比可以帮助在不同物品之间创造出更明显的差异，其中每张卡片可以适应不同的角色。
卡片的布局可以不同，以支持它们包含的内容类别。下面的组件通常可以在多种卡片样式中找到。
(1)富媒体: 卡片可以包含缩略图，以显示图片，插图，头像，Logo，图标或图形。
(2) 标题: 标题文本可以包含相册或文章的名称或标题。
(3) 描述: 支持文本，如文章摘要或简短的描述。
(4) 行动按钮: 卡片可以包含用于操作的按钮。
(5) 副标题: 副标题文本可以包含详细介绍，如文章的署名或标记的位置。
(6) 图标: 卡片可以包含操作图标。
有一些小的技巧可以快速提高卡片设计细节。
1. 使用相关主题的图片
图片是卡片设计的主角，你需要一个高级的图片来吸引用户对每张卡片的注意。不仅是图像，卡片还可以包含插图、带有浅色背景框的图标或任何其他类型的富媒体，但需要与内容主题相关。
2. 增加视觉层次
卡片内的层次结构有助于引导用户对重要信息的阅读。将主要内容放在卡片的顶部，并使用排版来强化主要内容。使用空白和对比来分隔需要更多视觉分隔的内容区域。（彩云注：视觉层级对于信息表达至关重要！）
3. 限制内容长度
一张卡片应该只包含重要的信息，并提出一个相关的观点，以获取额外的细节，而不是完整的细节本身。当我们试图在一张卡片中放入太多内容时，卡片可能会变得很冗长，并失去与卡片类比的实际联系，因为它不再像一张卡片了。
4. 避免嵌入链接
不要包含内联链接，卡片应该自己链接。嵌入文字链接会让用户误操作。
5. 区分操作主次
包含不同操作的卡片应该在视觉上形成对比。在下面的例子中，我通过使用一种较轻的色调而不是主要的按钮风格来降低后续操作的视觉强度。
6. 去掉分割线
对于新手设计师来说，用分割线来区分内容是一种常见的方式，以此定义不同的组。这些边框会造成不必要的视觉干扰，从而影响内容。
APP中的卡片并不是纯粹的拟物概念，但通常情况下，使用一致的类比和物理原理能帮助用户理解界面并分析内容中的视觉层次。在卡片的情况下，你可以做几件事:
1. 使用圆角
在形态上与真实世界的卡片进行视觉对比。圆角更有效，因为它们让我们的眼睛容易跟随视觉动线，“因为它更适合头部和眼睛的自然运动”。
2. 增加一个轻微的外边框或者投影
增加一条淡淡的描边框或者增加一个淡淡的投影都是很好的做法。阴影在界面中创造了一个层次，这有助于我们区分UI元素。
然而，在设计中添加阴影并不像听起来那么简单。有时候设计师会过分强化投影效果，让原本看起来不错的设计看起来很廉价。避免使用纯黑色的阴影。
3.注意字体和留白
重要的是要让每一张卡片都能被人看到、阅读和理解。在每个块周围添加大量的空白，让用户有时间处理并进行视觉重置，有精力看完一张卡再到下一张。
选择简单和基本的字体，因为基本的排版最大限度地提高了可读性，并有助于浏览。
让我们看看一些真实项目中的卡片设计案例：
信息流中的卡片设计
保持信息流卡片简单是很重要的。它们应该有一个一致的、重复的结构，但是使用不同的图片和字体大小来代表卡片中最重要的和最不重要的元素，以使读卡片的人更容易理解它们。
由Diseno Constructivo和Webpixels设计
他们突出特色图片和标题作为最突出的元素，这能帮助用户决定文章或发布的内容是否适合他们。
电商卡片设计
产品卡片是一个很重要的东西，它可以帮助你将访问者转化为客户。一张优秀的产品卡片应该能够吸引人们的注意，激发人们获得产品的欲望，激励人们购买，并在搜索结果中得到高效推广。
由Webpixels设计
产品的名称应该放在最显眼的地方，这样参观者就会立刻明白他来对地方了。一个好的配图能告诉顾客胜过千言万语，所以你需要一个高质量的产品配图来设计完美的产品卡片。
如果产品有特价，不仅要在价格栏中注明促销价格，还要注明常规价格，以及客户可以节省多少钱。
个人中心卡片设计
简介卡已经成为一个应用或网站中的功能模板。随着个人品牌变得比以往任何时候都重要，卡片设计在这里也能发挥重要作用。
由Neelesh Chaudhary设计
就像每一张卡片一样，配置文件卡片也是一个UI组件，它包含了对它所代表的内容至关重要的信息。为了达到你的目标，你要向其他人推销你自己。
确保只包括必要的信息(例如，照片，名字，职业)，让你的“关于”页面有剩余的细节来完善你的个人资料。
仪表盘卡片设计
仪表板的设计可以有很大的不同。但是所有的仪表盘都是用卡片做的。根据仪表板的类型，每张卡片可能包括概要信息、通知、快速链接或导航设计元素、关键数据、图表和数据表。确保你为每个元素使用了正确类型的卡片。
由Simmmple设计
仪表盘卡设计允许用户决定他们想要关注哪些数据。易于理解的UI，允许用户精确地控制哪些数据需要在仪表板的前端做好。
只包括最相关的信息，为用户使用方便。当你的数据集在一起看更容易理解时，找到在一张卡片上显示它们的方法。但是要小心，不要让用户感到困惑。
日常计划卡片设计
看板任务卡似乎是一件非常简单的事情——拿一张便签，写下你需要做什么，然后把它贴在墙上。这些卡片必须包含需要行动的单位数量。它们还可能包含各种各样的其他信息，清楚地传达了必须做什么。
由Neelesh Chaudhary设计
卡片上包含的信息包括任务的名称和重要的细节，如任务的类型和谁拥有它。看板卡放在状态类别下。最基本的状态类别是“计划要做”、“正在进行中”和“完成”，但是状态可能因项目而异。
卡片结构最适用于添加或删除任务这样的小改变，而不是改变像你的总体目标这样的大想法。
有几种方法可以使卡片设计更加有效。通过最初定义和观察卡片，我们可以更好地了解跨行业的这种设计模式。这也让我们能够推测用户希望在这些卡片上采取什么行动。卡片在提供许多不同种类内容摘要的环境中尤其有效，而不是简单地作为内容列表的现代替代品。
作者：彩云Sky 来源：站酷
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
一个优秀的设计不仅要解决正确的问题，同时也是给用户创造积极的情感。在过去，实体产品可以通过人类的五感来创造情感体验，但对于如今的数字化产品来说，这似乎很难达到，因为只是在屏幕上进行枯燥的交互来获取服务。
所以，数字化产品设计师们需要更深入的理解每种类型的情感，以及创造它们的心理学原则。
根据唐.诺曼（Don Norman）的研究，人们对一个物体产生情感有三个层次：本能、行为和反思。
本能层: “用户想要的感觉是什么”
行为层: “用户想要做什么”
反思层: “用户想成为什么样的人”
在第一层，用户将通过视觉和与产品的交互设计中产生情绪。因此，这是UI设计师擅长发挥的地方。除了美学和基本的平面设计原则外，下面是我在工作中经常应用到设计中的心理学原则。
人类的眼睛倾向于将相似的元素连接成一个组，而大脑会认为这些元素都有相同的目的。
因此，在设计具有相同功能和内容的界面元素时，就应该要保持一致性。（彩云注：这也是为什么要保持一致性的理论解释）
应用场景: 导航、控件、卡片、banner、内容、分页
人眼会将连续的元素视为一组。这一定律与对称性和相似性非常相关，通过在一个序列上设计相似和重复的元素，我们可以将用户的视线引导到我们想要的方向，它能使得阅读信息更加连贯和清晰。
一点点的切割是在暗示用户，这里还有更多的内容等待你去查看。
应用场景: 菜单、列表、排序、轮播、服务进度
当看到一幅不完整的图像时，大脑会依赖之前的经验进行填充。
这是图形和logo设计中常用的规则，但是在产品设计中，我们也经常把它用在图标和Loading设计中。
应用: 图标、loading、数据可视化
这是UI设计中的一个基本规则，因为人眼会将任何相邻元素视为一个组。
在设计的时候，我非常注重使用间距来将元素组合在一起。我通常使用大空间来分隔大内容组，然后使用小空间来分隔大内容组中的小内容组。
应用场景: 导航、控件、卡片、banner、内容、分页
我们的大脑喜欢看到对称和平衡的东西。它是所有设计领域中使用最频繁、最安全的法则。它帮助我们创造一种稳定和秩序的感觉。
当设计需要简单和谐可视化的产品时，我经常使用对称律。当用户需要关注重要的事情时，它也能让他们感到更舒服。缺点是，如果过度使用，产品会变得乏味和单调。通常，我用标题或CTA按钮来更好地强调和号召行动，打破画面的单调格局。（彩云注：CTA是call to action的缩写，中文通常翻译为行为号召。可以理解为引导用户点击的行为都算是行为号召）
应用场景:控件，banner，强调内容，产品显示，清单，导航。
这个定律是关于人眼倾向于注意脱离背景或组合的事物。
我使用这个规则引导用户的眼睛看到重要信息。它通常是一个卡片设计与一个轻投影在背景之上的层。此外，构建整体也是应用这一规则的一种方式。
应用场景：卡片、内容、列表、服务、摘要
在同一方向上移动的元素被认为比固定的元素或在另一个方向上移动的元素更相关。这个规则应用帮助我们建立组和状态之间的关系。
在制作动画时，我经常更明确地使用这个规则。然而，我们仍然可以适用于许多不同的因素。
应用场景：导航/下拉菜单，折叠，手风琴，工具提示，产品滑块，视差滚动和指示器。
当我们看东西时，我们的眼睛倾向于首先关注最突出的元素。理解这种行为将帮助我们在设计中创建一个“锚点”，从而推动用户查看我们的场景之后的内容。
应用场景:内容、落地页、价格、产品页、banner
（彩云注：维基百科解释为指个人对学习材料或所见所闻的资讯，容易记住最特殊的部分的现象。例如：有一些参考书将重要的资料，以不同颜色或特殊的字体标示出来，就是利用雷斯多夫效应来加深读者的印象。）
这也被称为隔离效应，它表明人们倾向于注意并记住与其他部分不同的部分。这条规则很容易与焦点定律混淆。不同的是，应用此规则的元素通常是独立的，没有为用户导航更多信息的额外功能。
应用场景：定价表、促销banner、不同会员介绍
基于现实世界打造的视觉体验。比如，当我们看一个视频，每个高潮笑话时都有旁白跟着一起笑时，我们会更容易发笑（彩云注：想想《快乐大本营》）。用户会喜欢我们的设计，如果它让他们感觉良好和舒适。
（彩云注：这个理论的意思是说尽可能让用户产生沉浸感，把产品用到真实的环境上，比如大家平时使用的手机样机，把设计的界面放到这些样机中就能够给人直观的感受到应用后的效果，也是这个理论的运用）。
应用场景：产品配图、插图、摄影
有很多研究表明颜色对我们的潜意识有特别的影响。对颜色的看法也因性别、宗教和文化而异。这张彩色心理学海报就足够了（彩云注：感兴趣的可以自行翻译研究下）。
此外，我们不要忘记从早期到现在一直在广泛使用的颜色，这些颜色的使用更符合用户习惯：
红色：错误
绿色：成功
蓝色：进行中
黄色：警告
就像颜色一样，人类的潜意识对不同的形状也有不同的反应。例如:
圆形、椭圆形：传递积极的信息，通常与社区或关系有关。
方形和三角形：带有强烈的信息，通常与力量和稳定联系在一起。
竖线：代表强度、力量或攻击性。
横线：表示平静、相等、安静。
这一理论解释了人类需要视觉和语言信息来尽可能快地处理信息。此外，人类是视觉动物，我们的大脑处理图像的速度是处理文本的6万倍。为了最大化设计的有效性，我们不应该去掉解释性的文字。
（彩云注：根据这个理论，在做作品集时，就应该尽可能的多用视觉化语言，文字作为辅助，对于视觉设计师来说，能用图表达的就尽量减少文字的比重。）
一个很明显的例子就是导航栏。大多数新的应用或具有复杂功能的应用都同时设计了图标和文字标签。
人类的眼睛倾向于看到平行因素比其他因素更相关。我经常使用这一原则对同一屏幕内的两组不同内容进行分类。最容易看到的例子可能是Facebook messenger界面，当帖子并排排列时，消息是平行的。
这一原则类似于格式塔原则中的相似定律，但它并不是完全相似。共同区域原则是通过我们使用分隔线、形状或颜色的方式创建的。
如果一个界面需要用户滚动更多来查看内容，我们应该有一些方法来更清楚地划分它，而不仅仅是使用间距。
应用场景：列表清单、信息流
根据NNGroup UXPin等组织或团体的各种研究，两种最常用的扫描模式是“F”和“Z”。
F的使用最为广泛，尤其是对于内容量大的网站。
Z用于不太注重文本的网站，通常强调在最后的号召行动。
一旦我们理解了如何使用这些模式，我们就可以选择布局并有效地安排元素来实现我们的设计目标。
第一印象是最令人难忘的，积极的体验可以在用户和产品之间创造持久的关系。如果能让用户在一开始就喜欢上我们的设计，就能为我们的产品创造了一个很好的优势。
（彩云注：这些都是非常基础的理论，但基础的厚度才是决定后期发展高度，我现在越来越能体会到这一点了，也希望大家能重视并加强基础的学习。）
原文：https://blog.prototypr.io/10-psychological-rules-i-used-to-make-users-love-at-first-sight-55c71f99bfa1
作者：Hoang Nguyen
译者：彩云Sky
本文翻译已获得作者的正式授权（授权截图如下）
作者：彩云Sky 来源：站酷
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
很多人知道品牌设计中有辅助图形的概念，辅助图形对于品牌识别体系非常重要，但其实在图标设计时，也会经常用到辅助图形。图标中的辅助图形，简单理解就是图标的装饰元素，它能让图标设计有更多的细节和特点，强化图标识别性，同时还能让图标更具视觉表现力。
举个例子，像下面这套图标中的浅色部分和噪点就是图标中的辅助图形，去掉这些辅助图形不大会影响图标的识别性，但增加这些辅助图形后，图标变得更有特点，更容易被记住。
https://dribbble.com/shots/14490441-Feature-Icons
善用辅助图形为图标增强表现力是图标设计中的一个秘密武器，彩云在工作中总结了一些经验，大概有以下5点：
《简约至上》这本书中提到过一个删除原则：删除是将不必要的元素都剔除掉，直到不能再删除为止。那么在图标设计中，这一点尤为重要，因为图标本身就浓缩了大量的信息，所以要让用到的辅助图形有它存在的价值，不加多余的元素。
比如下面这个案例，容易看出其中的辅助图形是绿色部分。在图标中它们代表的是行动或者结果，作为事物主体的补充，可以理解为主语和宾语的关系。因为有了这样的辅助图形存在，强化了图标的识别性，这就能让图标增色不少。
https://dribbble.com/shots/14374503-Covid-19-Back-to-Work
下面这个案例是星球中一位同学的练习，整体来说还是不错的，但就辅助图形的使用上看就有些小问题了。淡黄色的辅助图形圆形跟主体图形没有太大的关联，也没有太多实际意义，可以理解为强行为了统一而统一。图标主体已经做了双色设计，增加这些圆形后让图标变得比较复杂且删除对图标意义的表达也没影响，所以这里的辅助图形的使用稍显多余。
在配色上，辅助图形还可以结合品牌色彩。用品牌色的主色作为主体颜色，辅助色作为辅助图形的颜色，或者直接用品牌主色调作为辅助图形的配色都可以作为图标设计的亮点。
品牌色的加入，能够让图标配色的使用找到立足的理由，马上就能加分。
比如大家经常在画图标的时候，图标主体通常以单色为主，但此时可以尝试加入以品牌色装饰元素作为点缀，立马就能提升图标细节。下面这个案例是爱奇艺的首页图标设计，能看出来它的辅助图形设计配色上是按品牌绿色来设计的。
在使用辅助图形的时候，尤其是对于多图标体系来说，完全一致的辅助图形就显得比较呆板，缺乏细节。再拿上面那个星球同学的练习来看，不看辅助图形的具体含义和复杂度，在整体上看起来也缺乏变化，圆形都在同一个位置，保持着同一个大小和颜色。
辅助图形的使用想要有更好的效果，尽量在一定的范围能多一些变化。
比如下面这个例子，虽然图形的位置和大小都一样，但在颜色上做了不同的变化，整体看来细节度还是不错的。
https://dribbble.com/shots/14728145-Project-icon
再比如下面这个案例，辅助图形的使用有丰富的变化，使得图标的细节满满。
https://dribbble.com/shots/3861669-Australia-Post-Iconography
另外值得注意的是，变化应该在一定的范围，不可以变化太大。
比如星球中另一位同学的练习，她在图标的底部用了浅色的蓝色填充作为辅助图形，但这3个之间的辅助图形差异太大，前面2个还能理解是一套，但对于第三个图标来说，辅助图形的比例明显大于前2个图标，显得不够统一。
而对于下面这组图标来说，蓝色的辅助图形的面积变化相对一致，显得更为统一。
https://dribbble.com/shots/3817782-Gretchen-Rubin-Icons
虽然使用图标辅助图形会让图标显得更加有特点，但也要分清主次，不应该超过图标本身的核心意义，不能太抢用户的注意力而影响识别性。
比如下面的案例，图标主体特征一眼就能识别出来，辅助图形的加入并不会影响主次关系。
https://dribbble.com/shots/3235311-Clearly-Eyewear-Iconography
星球中的一位同学做的练习，这里的辅助图形有些太过于抢眼，且盖在图标上面影响了一定的图标识别性。修改方向是如果能把辅助图形的玻璃质感做一个强化，增加一些透明度，把主体元素凸显出来就会好很多。
这是另一位同学的练习，也是同样的问题，辅助图形抢了主体元素的风头。修改方向是把辅助图形改小一些就会好很多。
她画这个图标是临摹了原作的效果，能看到原作中的星星辅助图形小一些会好很多。
图标辅助图形也是图标的一部分，从整体上也需要遵循图标本身的风格体系。
这是星球中一位同学的练习，辅助图形用星星是没问题的，但这里星星的尖角相对于主图形的圆角来说就显得风格不够统一，把星星的尖角改为圆角就会好很多。
这位同学的作品也是临摹了原作的效果，能看到在原作中辅助图形都是以同样的圆润图形为主的，这里就体现了风格的一致性。
比如对照看看MBE的图标风格，他的辅助图形跟主图形一样，都是比较圆润可爱的，这样看起来整体的风格更加统一和谐。
作者：彩云Sky 来源：站酷
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
蓝蓝设计的小编 http://www.lanlanwork.com