随着C端市场饱和与数字化的浪潮下，实体经济、ToB 、ToG的产业再次迎来了它的曙光。视频动效的作品占比也已超过C端界面设计，相信今年视频动效作品占比还会再次提升。
追波年度最佳作品来自大家最熟悉的UI8团队中的Tran Mau Tri Tam ✪，作者来自越南西贡，最佳作品截止目前355K浏览量，2933个赞。
为什么看似平平无奇的作品却能获得追波年度最佳作品呢？既不是C端也不是纯B端的作品，更像一个网页与平面的结合体。如果去掉搜索图标、分类图标和按钮，你可以理解它就是一个平面作品，一个字体加几何形体构建的作品，为了丰富画面的层次，让画面更加的活泼采用了多彩加几何色块，让标题阅读有停顿感和呼吸感。faster底部的横线让它从标题文字中脱颖而出，这种使用线条突出重要信息的设计也是今年追波设计流行趋势之一。
MetroUI是Windows8的界面设计语言，在2010年至2013年间曾经风靡一时，那也是移动互联网的发展元年，现在国家推行实体经济、数字化带动To B 、To G 的发展元年，通过几何色块（MetroUI）实现B端产品与C端设计风格的传承与衔接，你会发现历史总是惊人的相似。最后背景结合今年最流行的微软风，毛玻璃的多彩高斯模糊渐变风，年度作品当之无愧。
最后来看下按钮的设计，正常的按钮要么文字加色块，要么左图标加右文字，它设计成左文本加右图标，更加注重信息的可读性和易读性，也体现B端设计重功能和交互体验，视觉点到为止的设计理念。
下面我们来欣赏年度最佳作品里面的流行趋势吧。
字体三原则：可读性、易识性、易读性。当你同时读一篇文言文和一篇设计文章，肯定设计文章的内容可读性更好。易识性是用在字体设计上，不能过于浮夸的改变字体骨架、形体而不易识别。易读性和每个位设计师都息息相关，因为我们都需要编排文本。当我们小时候写作文时，不会写的文字可以用拼音代替。这时候读者读到拼音时会有停顿感，更加适合用户阅读。
通过给用户制作停顿感来增加用户的易读性。可以在相关联文本后面添加图片、表情、图标来更好的理解文本内容，丰富文本内涵。比如情侣间表达爱意时会输入文本，“我爱你”、“我Love你”、“我ai你”、“我❤️你”，哪个更加会有情感共鸣呢？不言而喻，相信你心中已经有答案了。
在标题文字上添加曲线来突出重要文案是2021追波最流行的趋势之一，第一个设计目的就是突显文字，其次就是想表现铅笔真实书写的感觉。之前很多带有签名的设计中，签字的文本都是手写体的感觉，手写体对比电脑的机械字体会带有一种人文气息，也会让两者之间产生一种对比、矛盾。
除了突显文本外，曲线还有视觉引导的作用。通过视觉引导让用户按照设计师编排的顺序进行浏览界面。当然还有比这更科学的工具就是眼动仪测试，通过真实用户眼睛浏览界面显示对应的热点图。
多彩高斯渐变风是从色彩的角度来传达和丰富画面的，多彩高斯渐变风其实是从制造矛盾到平衡矛盾的过程，多彩渐变多为冷暖对比来制造画面的冲突，需要控制冷暖画面的大小来实现平衡。主流的还是以暖色突显为主。多彩渐变主要起到活跃气氛、吸引目光、平衡画面的作用。
多彩高斯渐变还可以结合轻拟物、几何图形、三维等新的组合方式去创新，给用户呈现一种更加新颖的视觉表现形式。最后我们还是要回归到内容上，为了更好的传达信息需要去设计与内容相匹配的视觉风格。
B端设计的火爆带动了B端相关模块设计，更多的人也愿意尝试B端相关模块设计，侧边栏作为产品架构中重要的导航系统，好的侧边栏设计能为用户带来更好的效率。主流侧边栏都做了展开、收起、拖拽等交互效果，也是受限于PC屏幕为展示更多数据而腾空间。侧边栏主要承担的功能有导航、分类、自定义筛选、共享、新增等。追波的B端产品设计已经不再是假大空概念设计，而是一套实用美观可落地的设计。
仪表盘设计是一个很好的隐喻，想象一下开摩托车或汽车主驾驶前面的屏幕，汽车仪表有燃油表、车速表、里程表、水温表、转速表、故障指示灯等。B端类产品后台界面的仪表盘设计也需要展示一些重要的数据和各种状态，大体分为侧标栏、导航栏、待办任务、个人信息、报表数据、消息中心、快捷入口等。当然最重要的就是报表数据，团队收益、任务进度、转化比例、新增、存量、团队工作时长等都是老板或领导关心的内容。每个公司业务不同、每个人员权限不同，自定义的仪表盘也各有差异。重要的是突显数据和业务状态，需要分层级系统性去思考和设计。
复杂的事情简单化，简单的事情标准化，标准的事情流程化，流程的事情自动化。流程设计是每一个企业核心功能和业务，可自定义的管理流程系统搭建也是B端产品设计的难点，需要对业务高度抽象，让每一个业务人员可自定义的流程才是好的流程设计。
B端C化是B端产品设计的视觉表现力慢慢往C端产品设计的视觉靠齐，国内B端产品界面设计视觉水平还有很大的提高空间。除了视觉上的提升外，由于业务的发展，B端产品也开始移动化、智能化，国内主流还是通过小程序、H5来现实B端产品C端化。
轻代码化是一种低代码赋能无代码的方式，弥补无代码拓展性差、覆盖场景少的问题。在保有无代码灵活、易用、快捷的同时，又能覆盖低代码使用场景。简单理解就是无需代码开发即可如搭积木般快速、灵活地创造属于你的个性化管理系统，轻松实现多元业务场景的数字化管理。
轻代码化将功能进行打包，升级成全局可以用的配置，技术人员配置好后，业务人员在应用编辑时直接选择使用模版，绑定对应的变量即可使用。
为什么人加色块的组合方式能流行起来？还是B端行业流行带动的。B端讲的更多的是企业对企业。企业对企业除了讲行业解决方案外，还需要传达公司的价值观、使命、愿景。人加色块的组合方式非常适合体现公司的企业文化。对于一家全球化的公司不同肤色的人物组合在一起，这种人文气息和价值观已经就不言而喻了。
当然企业也需要进行营销，抓人眼球。几千年来的遗传证明了，人的大脑对食物、性、动的东西、人脸和眼睛、危险的动物很敏感。人加色块的组合方式也具有抓人眼球营销的功能。真可谓一举两得。
这种风格更适合大公司，国内的一些手机厂商OPPO、VIVO等也会通过手机+背景+人物来体现科技与人文的结合，而对于中小型公司产品差异化和行业解决方案展现应该还是重中之重。
毛玻璃效果加大了模糊程度，透明效果更加扁平，很好的顺应当下UI扁平化的设计趋势。苹果Mac OS Big Sur系统的图标、界面中运用了大量毛玻璃和半透明元素，界面更扁平。至于C4D三维彩色玻璃的视频教程可以在B站搜索“透光艺术-C4D创建彩色玻璃的4个技法”，完全能满足UI设计师。当然还有一个好消息就是Mac用户可以享有OC一年免费的使用权，具体安装购买方法可以上“某宝”就可以轻松搞定，真香。
轻拟物这几年一直流行，在UI设计中趋于稳定的位置。从写实到扁平再到轻拟物，其实是设计师们一路不断探索的结果。本质就是光影对形体产生的视觉感受。在色彩中对高光、亮面、明暗交界线、暗面、反光（环境光）五个部分的处理。写实三维的图标等设计更适用于简洁的画面中，扁平等设计更适用于复杂一点的界面中，比如B端产品界面中的功能图标。轻拟物可使用的范围更广，效果更佳。Sketch、Figma软件对于渐变、高光、投影、高斯模糊处理已经非常简单且出彩。
简洁设计遵从了密斯·凡德罗的“少即是多”的设计原则，在B端产品界面中更加需要简洁设计，我们最熟悉的Sketch软件界面已经是相当的简洁了。回到现实当需求功能不断增加，产品界面的编排如何取舍，如何保证界面的简洁是设计师需要深度思考的问题？如何与上级沟通？该功能是否可做可不做？是否需要埋点用数据说话？如果只是一味竞品有我们就需要有，功能不断累加只会让界面越来越重。
几何图形和几何插画有异曲同工之妙，几何图形多为产品界面和宣传内容的抽象，产品界面的几何图形多为占位符形式，加上色彩和几何色块让其成为一个整体。B端产品视觉设计C端化的进程中，几何图形、几何色彩不失为最好的突破口，相信今年追波B端产品的视觉设计一定会更上一个台阶。
几何图形另一个场景化的地方就是品牌，作为一名UI设计师一定会经历从图标到几何图形到品牌设计的过程，品牌设计的技巧基本还是以几何图形为主，至于品牌的内涵需要更深层次的解读。掌握主流品牌设计的技巧对产品定位、品牌宣传打下扎实的基础。
暗黑模式的设计是解决在微弱环境下内容也可以有更高的可读性。随着用户夜晚及深夜使用电子设备时长增大，如何在夜晚这个特定场景下使用更加舒适。合理使用暗黑模式可以减轻眼睛疲劳，提高在夜间使用的可读性。
在设计暗黑主题时，不能为了突显视觉上的逼格，而去使用高饱和度鲜艳的色彩来突显界面的品质感。而应该把舒适度、可读性作为设计的衡量指标。Material Design给出了暗黑主题的设计准则，即正文和背景之间的对比度应至少为15.8:1。按照此标准设计，可读性都还不错。这里介绍一个插件“Stark”（Figma、Sketch、XD、Chrome插件）用来测试界面的对比度。
为什么叫模块化，而不叫组件化，组件化更多的利用原子系统从原子、分子、组织、模版、页面来快速的搭建界面，但在B端产品设计中基础组件和业务组件的搭建是以提高工作效率为前提，是否有从0到1搭建B端产品组件的经历是设计师一生中最宝贵的经验之一，它能提高设计师的系统化思维、逻辑思维和抽象思维能力。
产品模块化设计就是将产品分成几个部分，也就是几个模块，每一部分都是具有独立功能，具有一致的连接接口和一致的输入、输出接口的单元，相同种类的模块在产品族中可以重用和互换，相关模块的排列组合就可以形成最终的产品。通过模块的组合配置，就可以创建不同需求的产品，满足客户的定制需求 。
插画作为设计的一大品类，不同的插画师都有自己擅长的风格，本质是都有自己的个性，但是在产品设计中更多是需要共情、共性来讲故事，表达产品理念和价值观。这就需要插画师去尝试并探寻出适合互联网产品设计类的插画风格。设计的本质是旧元素的重新组合，插画不会过时，而是需要结合当下和产品找到最匹配的设计风格。
几何插画算是插画简化的一种表现形式，人和物的形态不再写实，而是抽象成几何图形拼凑的感觉，同时保留人物形态的神韵。加上几何色块与人物交互形态的表现，传达出简洁、科技的现代感。难点还是在人物形态的表现上，平时多练习练习速写还是很有必要的。
线面插画最近一两年非常流行，准确的说是非常适合。首先线面插画主要是由线条和块面组合而成，用块面表现人物形态时某些结构会表现不出来，这时候用线条简单勾勒后，结构就会清晰明了。其次当线面插画运用在界面上时，可以打破界面纯文字或组件化的机械和沉闷感。线面插画的风格提升画面热闹感的同时，还能保持界面的干净整洁。
界面微交互动效会让用户的体验更加精致到位。想要打造优秀的产品设计，微交互和动效设计是绕不开的，UI界面设计通过微交互反馈告知用户当前正在发生的事情，所处的状态。细微的动效更能调动用户情绪，取悦用户。C端产品微交互和动效已经很成熟了，一部分功劳来自iOS系统原生自带的效果。B端产品的微交互和动效更多还是在学习海外产品，还需要给前端工程师灌输微交互和动效的设计价值，共同打造产品体验细节。
Mg动画需要很好的节奏感、韵律，每一个场景动画都需要其中的元素进行连接变化，让转场动画更加自然，MG人物动画通过点线面的动效变化让画面更加有趣、自然，通过粒子效果让特定场景无限循环会让人更加印象深刻。
MacOS Big Sur系统图标的更新带动了三维图标的流行，三维图标的应该场景还是需要有较大留白空间的界面，因为三维图标太小后就看不到更多细节。三维图标感觉又回到了拟物化和扁平化哪个更好的问题上？设计师应该保持开放多元的视角。设计本身也在不断的演化融合，存在即合理。合适最重要，它们都会有适合自己的场景和设计价值。
为什么轻三维在界面设计中占有一席之位？一个是设计师不断追求差异化的产物。另一个是更好的表现内容，并与用户产生共鸣。轻三维的基础模型都是来自手机界面中的各种元素，比如组件、开关、按钮、占位符、图表、几何图形、图标、进度条等，这些都是用户日常使用系统软件常见的元素，通过简单的几何形体建模—打灯光—加材质—渲染—PS调色。难度系数不大但效果很出彩。第一个出彩点是模型带有厚度的倒角，结合灯光渲染的光泽是二维软件不能比拟的。第二个出彩点就是材质自由添加，特别是当下流行的毛玻璃效果，玻璃材质渲染效果更佳。第三个出彩点就是可以加局部灯光，局部的渐变色或环境光更佳出彩。
P4D是PS加C4D的设计表现技法，也是视觉设计的最后一个环节，通过PS对C4D的渲染图片进行调色，利用PS的调色技巧可以很好的解决C4D打灯光的瑕疵，还可以利用PS强大的合成功能，将渲染图片与图片素材进行合成，来表现画面的视觉度，当然三维软件比较难实现的水、粒子、烟花等效果，也可以通过PS的后期合成来实现，这也是P4D的强大之处。
卡通IP设计最近三四年技术的迭代已经慢慢的走上成熟，卡通IP也从传统的纯PS手绘技法，转到C4D建模—角色绑定—MD衣服制作—OC渲染—PS（静态）/AE（动态）调色。
卡通IP火的本质更适合做营销，相比于品牌或Slogan，卡通IP具有亲和力和画面感。随着各种手办行业大热，受互联网大厂影响下，卡通IP已经是互联网B轮以上公司的标配了。如果团队中没有这样能力的人，也可以通过绘制好二维，一套三维可以选择外包完成。
对于UI设计师来说学习是有成本的，暂时并不是必备技能，如果喜欢完全可以学习，从设计差异化的角度来看三维视觉确实有一定的竞争力。
C4D三维场景动画通过构建实物和场景模拟生活中的现实场景，会让用户体验真实感，三维软件制作动效的最大优势是通过动力学和表达式来模拟真实感，未来在AR/VR领域会有更好的发展。相对于界面动效学习成本难度也相对较大。在三维动画中C4D软件对于域、动力学还是有一定的优势。
存在即合理，趋势流行稍纵即逝，注定是不长久的，只有大浪淘沙历史遗留下来的风格才能更长久。但我们也不能不去关注，因为哪有什么所谓的创新，只不过是旧元素的重新组合，并符合当下这个时代人的审美需求。香奈儿的“时尚易逝，风格永存”大概就是这个意思吧。
作者：水手哥 来源：站酷
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
视觉空间、字体性格、颜色情绪三个大方面来谈一下我对视觉知识的部分理解！目录如下
空间感：空间感( sense of space)是指艺术形象通过一定手法引起的类似现实空间的审美感受。艺术家通过特定的瞬间造型和空间深度的追求，使人联想到其活动、生活的环境空间。在绘画、摄摄影艺术中，形象存在于二维平面中，但通过构图、透视、线条走向、光影和色彩处理，使人感受到空间的整体性、立体性。
而在我理解总结，空间感其实就是运用各种手法，打造出画面的空间纵深感，让二维的画面变成三维，从而提升画面的品质、细节、冲击力。
我们以人物海报为例对比几张图，直观感受一下：
无空间感：
有空间感：
我们直观的可以看到，都是人物海报，下面的两张明显更有品质感。有空间感的图，画面会更高级。
那是因为空间感会让你的画面更有层次，更灵动和富有场景感。这就是空间感的有点。
空间感，其实就是打造画面纵深，让元素之间形成前后关系，那有哪些方法来打造画面纵深呢？我们总结了5个方法来分享给大家：
1.3.1 构图
富有极强透视线的构图能很直观地表现出空间感。
比如
这类
这类拥有很强透视的构图，不用做别的，光构图就能体现出很强的空间感了。
实际运用中，我们还可以利用标题文案排列出这种透视构图来打造空间感：
1.3.2 虚实
虚实分为：
1.轮廓虚实
2.颜色虚实
轮廓虚实：两个相同的元素，轮廓模糊的在空间上会感觉处于轮廓实的元素后方。
这是两个元素，放到一起就会感觉上是在同一个平面上的。没有虚实关系。
如果把其中一个圆的轮廓虚化：
是不是就会感觉出右边的会在左边的前面，拉出了前后的空间感。这就是我们的轮廓虚实了。
颜色虚实：越贴近背景色的颜色，在空间上会感觉处于后方。
还是这两个元素，如果把其中的一个颜色调成和背景贴近：
两相比较，颜色更实的飞碟，会处于颜色较浅的飞碟前面。
1.3.3 大小
越大元素会感觉越近，越小的元素感觉越远。
在实际操作中我们一般可以利用不同元素来制作这个效果。
比如这是一堆元素，如果大小都差不多，就会感觉是平铺在一起的，没有空间关系。
如果调整它们的大小， 重新摆放，通过近大远小的原理，就可以很轻易地打造出元素之间的前后关系，从而营造出空间感了。
大小对比空间再其他画面中的应用：
1.3.4 明暗对比
除了虚实、大小之外，明暗也能对比出前后关系，从而营造空间感。
通过纹理层次的明暗对比，一明一暗的对比，也能拉出前后关系。从而营造空间感。
1.3.5 穿插
利用元素相互穿插产生的前后关系，也能营造出空间感。
这是1个元素和两个圆的平铺，没有交集。
如果我给他们穿插重叠在一起：
那就能产生元素之后的叠压前后关系，从而也能营造空间感。
利用在海报中：
以上这五种方式就是我们今天分享给大家的方法啦，
在视觉海报的打造中，基本都不是只靠其中一种方法去打造空间感，而是3种，甚至5种一起运用，可以让塑造的空间感的更有层次细节和冲击力。
比如：轮廓虚实+颜色虚实+大小，或者：穿插+大小+明暗。
大家一定要灵活运用，自由组合，以画面最优效果为目标去做，不要局限在某一个框架里。
字体也有字体的性格，不同的字体会呈现出不同的字体性格特征，比如高矮胖瘦、敏捷、邪恶、可爱、优雅文艺等等等等。通过精准地对字体的结构，笔画粗细，细节调整，字体效果等的处理表现字体的差异化，使字体的性格调性，与画面内容相匹配。
2.2.1 力量感、沉稳
特点：横细竖粗/留白少/重心偏下/转折笔直
2.2.2 可爱
特点：圆润/不规则/扩张
2.2.3 优雅
弧度/纤细/重心偏高
2.2.4 活力
特点：倾斜/笔画延伸/笔画干脆，转折弯曲很少
字体还有各种各样的性格，比如魔幻、哥特、血腥、恐怖等等。
我们在做项目的时候，字体的感觉就一定要抓得准，符合整个画面的调性：
比如这种欧式哥特的画风， 字体就可以加一下哥特元素，点缀点玫瑰、藤条。
刚硬科技的画风，字体笔画就可以粗一些，添加点科技感和几何图形，营造超前科技的感觉：
植物自然的风格笔画就可以柔和一些，带有弧度，把一些画面元素图形化点缀在上面：
2.3.1 字型特点的提取
具体实操怎么做的呢？我们今天就给大家分享一个案例，看看是怎么操作的：
这是一张视觉，我们要给他做一个主标题，这个主标题的字型特点应该如何从图里提取呢？
我们要提炼出三个点出来才能知道如何去做：
1.风格
我们先分析这张图，它的一个风格是有点魔幻+复古，神话传说加西域古代的一种史诗感。
我们可以找一些神话类史诗的类似的参考看看：
特征：
1.复古
2.重心高.
3.不用那么特别复古可用衬线体变形
2.特征
这个我们可以从人物身上去提取，人物有盔甲，我们可以把盔甲的特征提取出来：
3.配色
颜色也不是乱选的，一定要和图能呼应关联起来，那颜色怎么选呢？其实画面里已经帮我们选好了配色。我们观察一下画面：
整体偏冷调，墨绿色居多。，对比色有红色和黄色。
那我们为了突出字体，又能和画面呼应，那黄色就是再好不过的选择了。
那到这我们的设计目标就比较明确了：
2.3.2 字型设计
1.基础字型：
虽然是往复古了去做，但也不是真做成甲骨文，还是结合一下使用场景，和识别度。参考中也有部分是使用宋体去变形的，所以我们可以先选一个宋体的字体出来当做基础字型。
为了保证识别度，我们可以只做部分复古。
这里我挑灵下面“火”字，因为这个字处在中间，比较显目。
2.调整重心
参考复古类型的字体重心都会往上偏移，让字体稍显长一些。
3.加入特征
（1）锋锐：默认字体上有很多圆润的地方，我们都改成尖锐的感觉。
把每一个笔画都改掉：
（2）弯曲的尖角：
图形提炼：
加入到字体当中：
字型到这里就完成啦。
（3）字体转折的厚度：
字型完成了，字体转折的厚度我可以再字体效果上去做。在笔画中间加一个层次，以明暗分隔开，以实现盔甲上这种转折的厚度：
全部加上，看下完成效果：
结合到画面中看下：
效果还是很不错的，整体风格也比较统一。
这一块就是关于字体性格的内容，我们继续往下看！
接下来我们来说下关于颜色情绪的问题！
配色感觉不对？颜色脏？配色不高级？
这些问题一直困扰着我们。应该怎么配色呢？其实颜色也是有规律可循的，这篇文章就是带给大家一些颜色方面的启发，让你了解配色的底层逻辑，从而更明确快捷地配出想要的颜色。
认识色彩饱和度的情绪：
因为不同的配色会带给观者不同的情绪感受，只有在先了解不同颜色特性的基础上才能为我们的配色指明方向。我们做出的画面想要传递什么感觉，这种感觉对应什么颜色？
只有搞懂了逻辑，在之后的工作中，才能为我们的配色方案指明方向，而不会一开始就被难住。
如果我想配一个积极热闹活泼的画面，颜色怎么配呢？ 如果想配一个温柔恬静小清新的画面颜色又该如何选择呢？他们都有什么特点，为什么会这样？往下看
3.1.1 积极活力
我们先来看几组图片
用吸管工具提取一下它们的颜色观察
我们可以看到这类海报视觉上都能给人一种热闹、动感、活力的feel。
通过颜色提取，再观察它们选色的位置，可以发现它们的的配色的纯度和饱和度都非常高。
这是为什么呢？接下来我们降低饱和度看看会发生什么：
可以很明显的感受到画面中已经失去了那种动感、热闹和活力的感觉了，整体更趋于平稳和安静。
所以，高饱和度的配色会带给观者活力，动感，热闹的情绪。常常应用于一些电商、运动品牌的视觉项目中，用来渲染or打造年轻、活力、热闹、动感等氛围。
3.1.2 温柔平静
我们再来看一组:
这一类图片就会给人一种文艺小清新的feel，这类配色和热闹、运动的感觉完全不同。
都是低饱和度高明度的颜色。所以，低饱和度的颜色会给人传达平和、放松、舒适的心情。
3.1.3 轻松休闲
这一类的图片就给人以中正休闲的感觉。饱和度都趋于中性，不过高，也不会过低。
其实原理就是在取色器里，
我们看同一张图片，给我们的感觉：
高饱和度配色给人感觉冲击力很强，具有活力，对比非常强烈。
中饱和度画面就弱了一级，视觉冲击力没那么强。画面会放松一些，适合传递休闲的感觉。
使用低饱和度的颜色时，我们看到画面更冷静了，有些高级灰的感觉。
在以往的实际工作当中，我也是先用饱和度来定画面的大情绪基调，只有大的感觉对了，后面才不会出大问题。比如像一些战斗、pk、热血类的banner，都用高饱和颜色:
我们可以来吸取他们的颜色看看：
基本都是靠右边的颜色。
而像我在做下面这种类型的banner时，就会使用到中饱和度的颜色，给人一种轻松休闲的感觉：
我们再看下他们的色域：
都是趋于中间的位置。
最后一种低饱和的颜色，像下面这种作品，就有一种文艺、清新的感觉：
再来看看他们的颜色色域
都是比较靠左的颜色。
用饱和度来定画面的大基调，还是非常好用的，可以说是屡试不爽，大家可以好好理解并且用起来！
总结：
高纯度，高饱和度的颜色，会让人感觉激动、积极、动感、醒目、记忆深刻等特点感官，常常应用于一些电商、运动品牌的视觉项目中，用来衬托年轻、活力、热闹、动感等氛围。
中饱和度的颜色饱和度和纯度都适中，显得中正平和，又不会有低饱和度那样的“平缓“，想要视觉年轻一些，但又不想饱和度那么的强烈，可以尝试选择中度的颜色。
低饱和度的颜色，会给人平和，舒适的感受，常常会结合大量无彩色一起使用，让画面传递出简约，自然，小清新文艺的感觉。
作者：菜心工作室 来源：站酷
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
在版式设计中对比其实就是差异化。若两个元素有所不同，那就让他们截然不同，不要拖泥带水。
比如我用两个圆表达大小对比，那么下图则是拖泥带水的反面教材。
因为此图中的大小对比并不明显，看不出要强调哪个圆形，主次不明，对比含糊不清。
对比上图，此图大小对比明显，更能够有效的传递出重要信息，所以要用对比的话，就让元素差异化强烈一些。
对比的分类有很多种，比如：
除了这些还有字体类型的对比、距离对比、虚实对比、远近对比等，可以说存在差异的地方就存在对比。而在版式设计上，我们要将这种对比最大化，以达到吸引眼球、方便阅读的效果。
对比能简化画面，使版面主题更明确，更直观。
运用对比能使视觉冲击力更大，更抓人眼球。
对比使版面层级清晰，能够突出重点，从而更有效的传达信息。
通常一个作品中不会只用一种对比，而是多种对比方式组合使用的。比如上面左图用强烈的大小对比出标题与正文的层级，同时加入光影对比为主体打造立体感，更抓人眼球。右图使用方向对比与位置对比使版面更活跃，更有视觉张力。
几乎所有的作品都会用到对比原则，在设计中我们也要善用对比原则。
对齐原则是让版面中的元素有一种视觉上的联系，以此来打造一种秩序感。
此版面中没有运用对齐原则，各元素间没有联系，凌乱而没有秩序感。
使用了对齐原则之后，整个版面规整又美观，建立了一种秩序感而更利于阅读。
左对齐：版面中的元素以左为基准对齐。左对齐是最常见的对齐方式，简洁大方，利于阅读。
右对齐：版面中的元素以右为基准对齐。相对于左对齐来说不太常见，给人一种人为干预的感觉，阅读比率慢一些。
居中对齐：版面中的元素以中线为基准对齐。居中对齐给人一种严肃与正式感。
两端对齐：版面中的元素拉伸或缩放与同一元素两端对齐。两端对齐通常用于大段落文字编排中，利于阅读。
顶对齐：与左对齐相似，版面中的元素以顶部为基准对齐。
底对齐：版面中的元素以底部为基准对齐。
轴线对齐：轴线对齐是以版面中心线为对齐基准，而不是元素的中线。
除了上图的案例为轴线对齐外，下图的这几种也都是轴线对齐的形式。
轴线对齐能给人正式感，同时各个部分又富有变化，比较灵活。
对齐的作用总结下来其实只有一点，就是能够使版面统一简洁更有条理，能够引导视觉流向。
这是一个同学的名片作品，给人感觉凌乱、没有秩序，信息传达也不清晰。那么问题出在哪儿呢？
首先，绿点部分的文字大小差不多，缺乏对比，导致层级关系不分明。
其次对齐方式不统一，没有秩序感。
那我们运用两个原则修改后是什么样子呢？
我们强调名片持有人的名字，将联系方式等其余信息左对齐，LOGO与二维码则置于右边，是不是整洁规整了不少，信息的传达性更强了。
同样的，我们也可以将联系方式与二维码移到版面右边，LOGO置于左下方，同样很规整，简洁美观，利于传播。
对齐与对比的组合会有多种变化，运用好了会使版面规整美观不少。
接下来看一下修改前后的对比图。
这是某同学的周练的海报作品，可以看到她对齐是统一的左对齐，没有问题。但是画面中却缺乏对比，主次感不强。另外图片选择也不美观。
同个主题下，另外一个同学的作品：
这个同学的作业突出了主标题，对比也非常明显，其余的信息层级也有对比变化，视觉上比较丰富，统一的左对齐也非常有条理。
同样的内容与主题，对比与对齐原则应用的好坏会直接影响版面的美观性与易读性。大多数情况下，对比与对齐是缺一不可的。
当然版式设计中有四大基础原则，「对比」、「对齐」、「组合」、「重复」，一般情况下这四个基础原则都是组合使用的。「对比」与「对齐」只是一部分，「组合」与「重复」我们以后再细说吧。
作者：大猫404 来源：站酷
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
近年来界面设计工具不断推陈出新，一些新兴的实用界面设计工具渐渐走进设计师们的视野，逐步改变着设计师的工作模式。作为互联网设计师，效率至上的工作原则敦促我们不断尝试新工具，建立新的工作模式。本文将回顾界面设计工具的发展历程，并着眼界面设计工具的发展趋势，为大家推荐一些新兴、高效的界面设计工具，涉及UI、动效设计领域，希望对大家有所帮助。
随着互联网行业的日益繁荣，界面设计领域逐渐走向成熟，界面设计工具也一直在以惊人的速度发展。界面设计工具的发展历经了三个阶段：
1. 第一阶段是最早期界面设计领域刚刚起步，设计师普遍使用PS来制作界面。但PS是一个全面的而非专门针对界面设计的工具，因此界面设计师在界面的绘制、文件的交付上都存在一定不便。
2. 第二阶段是Sketch的出现。虽然Sketch是一款Mac端软件，但其作为一款专门针对界面设计的工具，以其高效、小巧的优势迅速占领界面设计市场，逐步取代PS成为各大设计团队的首选。由于Sketch在动效制作方面的欠缺，出现了Principle、Flinto、Protopie等专门设计界面动效的工具，一般设计师都会将其搭配使用。
3. 当前阶段各种新兴设计工具如XD、Figma、Framer Web逐渐走进设计师们的视野，它们专注于界面设计领域，不断挖掘和突破Sketch的短板，为设计师们打造更良好的使用体验。
界面设计工具的发展改变着设计师们的工作方式。界面设计工具也渐渐从单一专注设计本身向云端性、协作性、通用性发展，旨在实现更高效的设计生产活动。
云端性
随着云计算的发展，界面设计工具也在逐步走向云端化。设计从本地转向云端，不再依赖于本地硬件的性能，云端的计算能力让使用性能得以提高。设计也不再受时间和空间的限制，只要有网络，设计师可以随时随地的工作，临时使用其他电脑工作时省去了安装软件、同步设计文件的麻烦。 设计文件的共享从传送本地文件给对方，变成发送链接给对方。前者耗费本地内存与下载时间，后者有网即可打开。设计工具的云端性使得设计的灵活度增强，设计效率大大提高。
协作性
注重不同工种之间的高效协作也是设计工具的一个发展趋势。新兴的设计工具（如Figma、Framer Web）试图将产品、设计、开发、测试融为一个整体，让不同工种之间可以高效讨论、同步设计方案。实现整个团队效率的最大化。利用技术降低反复沟通的成本、减少同步不一致情况的发生，扫除各工种之间的协作障碍。
通用性
今年9月Figma举办的第二届Config Europe大会，其主题是让设计和代码连接更紧密。可以看出设计工具越来越注重其通用性，设计工具不仅可以帮助设计师输出设计稿本身，而且致力于打破设计与代码之间的壁垒，降低交接成本。让设计实现变得更加轻松高效。
Figma是一款全平台通用的在线界面设计软件。2019年UXTOOLS设计工具使用报告中显示，Figma的使用率从12%增长至26%，在今年的Config Europe大会上Figma也预告了一些即将推出的功能迭代，其便捷高效的特性使其受到众多设计师的追捧，正在逐步抢占sketch的用户市场。
Figma与Sketch相比，亮点功能有哪些？
（1）Windows用户也可随心使用
与sketch只支持苹果生态系统相比，Figma最大的好处是windows用户也可以使用。他支持在Mac、windowsPC机甚至ipad上使用，理论上只要你能打开浏览器，就可以使用Figma愉快地设计。
（2）云端文件使用不卡顿，支持离线编辑
Figma创建的文件全部存储在用户的云端账户中，不占用本地内存。当文件过大时，sketch会出现卡顿现象，拖拽一个图层都会变得很困难。而Figma对本地资源的消耗很小，大文件也几乎不存在卡顿的情况。设计师们最关心的无网或若网情况下Figma的使用问题，Figma也给出了相应的解决方案。其支持离线编辑，离线时会自动把内容保存在本地，当网络恢复后自动同步到云端。
（3）一键导入sketch文件
Figma可导入Sketch文件，大大降低了文件迁移成本。如果你想迁移全部工作到Figma是十分便捷快速的。
（4）更强大的组件功能
Figma和Sketch都拥有组件功能。当原始组件更改时，复制组件就会同步变化，在这点上二者是相同的。但Figma在组件逻辑上比Sketch更进一步，复制组件可以灵活处理与原始组件的同步关系。当设计师修改复制组件的样式时，原始组件不受影响。此时二者的关联逻辑仍然存在，当再次修改原始组件，复制组件仍然会同步变化。相比于Sketch，Figma把组件做的更加灵活限制更少。
同时Figma也在不断优化其组件功能，在Config Europe大会上，Figma预告在今年11月会正式上线组件Variants功能。该功能是将一系列有关联的内容生成一个Variants组件，在使用时可以直接通过识别出来的组件属性改变组件样式。其优势在于使用组件时可以更轻松的切换所需组件的不同状态,再也不需要像在sketch中一样逐级寻找了。
如下图中的按钮组件，设计师可以将所有的按钮状态都列举出来并按层级、颜色、状态、大小命名。然后选中所有按钮将其组成一个Variants组件。
（5）与代码紧密结合
在使用sketch输出设计稿时，设计师往往需要借助蓝湖或zeplin输出标注文件。Figma则与代码紧密结合，本身自带交付功能。 其文件中的每个模块都有代码模式，只需要将开发同学的账号开通查看权限并发送链接，就可以直接在设计文件上获取标注，也可自行导出所需的CSS、ios、Android样式。
（6）一键恢复历史版本
Figma会将设计师的每一次修改存成对应的历史版本，当老板说想要某一版时，设计师只要恢复至老板想要的版本就ok啦。如果其他设计师误删除或错误修改文件，也有机会一键抢救。
（7）团队协作
团队协作功能可谓是Figma最大的核心竞争力。当几位设计师需要维护同一份设计文件时，Figma可以支持几位设计师同时在线修改，只要将文件链接分享给对方并给到相应权限（查看、编辑权限）即可。如果使用sketch，设计师一般会发送源文件给对方修改来达到协作效果。来回传输源文件不仅容易造成文件同步出错，而且有一定的下载时间成本和存储成本，相比之下Figma的优势显而易见。
除了设计师之间的协作，Figma也有效提高了设计评审的效率。与在工作群截设计图标红再描述相比，Figma的评论功能使得同事可以在设计文件中实时标注讨论方案，提高了线上评审效率。
设计师受文件本地存储的限制，在工作中把源文件给同事、设计稿给产品、切图给开发、一项简单的输出对接任务变得琐碎起来。Figma的出现打破了设计师长久以来的孤岛工作状态，设计师只需分享一个链接，同事可以修改设计稿、产品可以评审、开发可以查看界面模块的属性甚至查看代码，大大提升了设计师的工作效率。如果您的团队正在考虑更换设计工具,Figma是一个不错的选择。
Framer Web是一款在线动效设计软件，于今年5月上线正式版，相比于Framer家族的前两款产品Framer classic、Framer X, Framer Web突破了其以代码为操作核心的理念，上线的新版本对设计师来说更加易用友好。
Framer Web的核心亮点是什么？
（1）网页端全平台可用
相比于Framer classic和Framer X作为本地客户端软件只支持Mac电脑，Framer Web是一款基于浏览器的在线设计工具，因此windows用户也可以安心使用。同时个人版本免费，大大降低了设计师的使用成本。
（2）文件导入
Framer Web可通过import选项导入Sketch甚至Figma文件，可搭配Sketch和Figma快速制作高保真动效。
（3）轻松实现复杂动效
Framer一直主打利用代码实现复杂可控的交互动效,。虽然可以保证输出高质量的动效，但对于设计师们来讲十分不友好，学习成本过高。此次发布的Framer Web为了解决这一问题，增加了适合设计师使用的可视化界面控制动效，设计师可以通过Magic Motion轻松实现复杂动效。
Magic Motion与principle、keynote的动画实现原理类似。当你选择目标元素添加了交互行为后，可以在Magic Motion中选择一个过渡方式。只要两个画板中的元素名称一致且在不同面板中拥有不同的形态，那么在画板切换时该元素就会生成补间动画发生相应变化。
同时Framer也新增了一些特别的交互控制实现一些特殊动效。比如自带控件中的video，本身会有一些独特的交互行为如End、Pause、Play（播放、停止、暂停），当进行这些操作时，会触发相应的页面变化。
（4）从设计到代码
代码一直是Framer的核心功能。Framer Web默认隐藏了代码面板，设计师还是可以在设定了动效后，通过点击顶部的handoff调出相应代码。如果你是一个需要使用代码的设计师，你仍然可以通过编辑代码实现更复杂的动效。对于设计师来说，Framer提供的丰富动效已经可以满足绝大部分诉求。绝大部分设计师已经无需再关注代码部分，通过可视化界面完全可以做出很丰富的交互效果。而Framer Web最终的野心是希望设计师通过可视化界面设计出参数化的动效，可以直接导出相应的能交付生产端的代码。目前Framer Web 已经可以实现导出相应动效代码，但导出的效果仍有待完善，只是可以导出Transiton的参数而已。
（5）高效协作
Framer Web和Figma一样，也非常注重团队协作。设计师可以将链接分享对方进行查看、编辑，方便几位设计师合作一个项目的情况。与需要反复传输文件相比，Framer Web省时省力，大大提高了设计师的工作效率。
小结
Framer Web放弃了攻占界面设计领域的策略，转而和Figma官方达成积极的战略合作，专注于做专业的动效设计软件。因此Framer Web非常适合和Figma搭配使用。随着产品策略的调整，相信在不久的将来Framer Web还会为设计师们提供更丰富、高效的动效设计功能，非常值得期待。
虽然云端化的设计工具正逐渐兴起，但sketch仍然是目前较为主流的界面设计工具。因此接下来除了为大家介绍一些可以提升工作效率的Figma插件外，也会介绍一些好用的sketch插件，大家可以根据自己的需求自行尝试体验。
3.1 Design Lint（Figma）
设计师在做较大项目时可能会绘制几十个页面，难免会存在界面丢失元素的情况。Design Lint就能帮助你解决这一问题。它可以在你工作的时候进行实时更正，检查不同界面直接的差异，包括颜色、字体、填充、半径值等样式差异并纠正错误。如果你做了一些修改，Desgn Lint也会根据你的修改实时更新。这款插件可以让你更专注于设计本身，而不用浪费时间检查不同页面的元素是否使用正确，大大提高了设计师的工作效率。
https://www.figma.com/community/plugin/801195587640428208/Design-Lint
3.2 TinyImage Compressor（Figma）
设计师在做较大项目时导出的设计稿过大，存储和传播的成本高。用这款插件最多可以比Figma默认导出的文件小90%。同时支持导出多格式文件，导出多个图片时还会自动生成一个zip压缩包。
https://www.figma.com/community/plugin/789009980664807964/TinyImage-Compressorl
3.3 Design System Organizer（Figma）
这款插件帮助设计师在设计组件系统时管理组件系统。在设计组件系统时，会遇到如图所示的：“Buttons-Small-Default...”的组织形式。该插件可以对组件进行管理、如分组、取消分组、移动、重命名。当重命名组后，该组中所有组件的名称都会随之改变，十分方便。
https://www.figma.com/community/plugin/802579985985331070/Design-System-Organizer
3.4 Juuust Handoff（Figma）
Figma本身自带交付功能，但该插件的好处是生成的是离线文件，导出的文件可直接交付开发。开发同学可以不受网络影响随时查看间距、色值等信息。
https://www.figma.com/community/plugin/830051293378016221/Juuust-Handoff
3.5 Image Optim （Sketch）
设计师在导出设计稿时有时图片过大，Image Optim可以在导出图片时压缩图片，但不会影响图片的质量。使用时需先安装app再安装Sketch插件。
https://oursketch.com/plugin/imageoptim
3.6 FontFinder（Sketch）
设计师在做较大项目时可能会绘制几十个页面，难免会存在字体使用错误的情况，Font FInder就能帮助你解决这一问题。它可以检测出文件中存在的所有字体，你可以勾选想要更改的字体就可以一键将其改成目标字体。再也不需要在几十个页面中逐个寻找更改，大大提升了工作效率。
https://oursketch.com/plugin/font-finder
3.7 Craft（Sketch）
Craft插件十分强大，其中填充功能可以大大提升设计师的效率。在设计如列表页时，设计师为了效果需要编辑不同的标题、图片，都要冥思苦想编内容。Craft可以一键填充文字，如姓名、文章、日期、邮箱、地址、国家等。不同类别下面也设置了一些分类，方便设计师选择。除此之外，Craft还可以一键填充真实不重复的照片,为设计师节省了很多时间。
https://www.invisionapp.com/craft
3.8 BaseAlign（Sketch）
Sketch自带的对齐工具对形状来说很好用，但对于文字来讲一般是文字的文本框对齐，并不是文字本身对齐。BaseAlign插件使用的是文字自身的基线对齐，这样就以保证不同大小的文字都可以对齐，设计效果更完美。
https://oursketch.com/plugin/basealign
XSHOW是一款由ISUX研发的高效设计协作平台。XSHOW连接了产品经理、开发等各个不同工种，提高了设计资源输出和分发效率。设计师将设计文件上传到XSHOW，就可以将文件链接分享给产品经理、开发等同学。产品经理在手机小程序上就可以预览方案，设计师每次更新的方案也可以直接预览。开发同学可以直接查看标注和切片。同组设计师也可以直接下载源文件、甚至查看历史迭代版本。
（1）可视化上传文件
设计师先在Sketch中安装XSHOW插件，可使用快捷键或直接点选需要上传的文件画板，接着直接选择XSHOW中的“导出”，就可直观快速的将文件上传到XSHOW。
（2）记录所有版本迭代，轻松找回第一稿
设计师每一次上传的文件都会有云端记录，设计师可以通过时间轴便捷找回历史文件，轻松找回第一稿。
（3）灵活丰富的分享权限
对于项目分享的权限，XSHOW的设置更为灵活，除了支持私密、公开、指定人或团队可见外，也可以控制权限的时效。
（1） 直观了解团队输出,组建团队展示能力空间
XSHOW除了个人使用外还可以组建团队。项目管理者可以通过XSHOW直观查看整个团队的设计稿件输出修改情况，同时可以组件团队展示能力空间。
（2）方案变更及时知道
XSHOW有记录所有版本迭代的能力，因此作为项目管理者可以及时知道团队成员对方案的修改变更，解决了团队内部有时同步不及时的问题。
（3）便捷组建项目和管理团队成员
项目管理者可以在XSHOW便捷组建项目和管理团队成员，大大提高了项目管理者的管理效率。
（1）多端查看更方便
XSHOW支持web和小程序两种沉浸式查看方案的方式。在小程序上查看方案方便合作方直观感受方案在手机上的真实效果，如果合作方身边没有电脑也可以及时查看稿件。
2. 查看历史变更
XSHOW的历史变更功能可以使合作方也及时了解方案的变更情况，大大提升了信息同步效率。
（1）便捷查看标注与管理切片
设计师将文件上传到XSHOW后，只要将链接分享给开发，开发就可以直接在线查看文件标注、下载切片。
作者：腾讯ISUX 来源：站酷
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
按住option单击图层缩略图，视图上会只显示该图层内容（暂时性隐藏其他图层，进行其他操作依然会显现出来）
在AD中同样也是有蒙版功能的。例如下图，这三个字实在是太霸气了，我们想变怂一点，那该怎么办呢？在右侧图层面板中，按住矩形层缩略图，拖入文字层的缩略图与图层名称之间（也可以看作是缩略图层），即可完成蒙版操作。
但是要想调整文字大小，但是依然只显示矩形所在区域范围的内容呢？那么我们需要勾选上方工具栏中的【锁定子项（lock children）】按钮，在进行调整就OK了。
历史记录工具包含一个定位滑块（position），拖动滑块，可快速撤销与复原，效率很高。同时也可以点击列表的特定步骤，点击后就会回到该步骤操作。
在文件菜单栏中有个【随文档保存历史记录（save history with document）】，勾选后，保存的文件将保留历史记录。当你在历史记录中选中曾经的特定操作的情况下，进行一步新操作，则历史记录会产生一个小分支符号，分支符号代表不同的未来。例如我新建一个黄色矩形，然后将颜色调整为蓝绿色渐变。然后通过点击历史记录，回到新建黄色矩形的步骤，然后把颜色改成蓝紫色渐变，这样在填充步骤就会出现分支符号，通过点击分支可快速切换至蓝绿色渐变，可用于尝试性创作，并通过同时存在的两种结局来进行对比。
复制粘贴和复制图层操作与PS完全一致，不同的是power duplicate部分。首先，我们在画布上绘制一个矩形，然后按command J复制出一个矩形副本，将矩形副本移动到矩形的左边，然后缩放它，操作完成后按command J，在矩形副本的左边就会出现一个比矩形副本更小的矩形副本2，副本2与矩形副本的距离与矩形副本与矩形的距离相同。好，我们回到第一步，绘制一个矩形。然后按住command 拖动矩形，则会出现矩形副本，然后移动矩形副本后，按command J，同样可以达到上面的效果，我们把这个操作叫做power duplicate，也就是快速副本。PS也有同样的功能，但是操作逻辑有些许不同，AD的更为清晰一点。
在AD中，有两个图层的概念，一个叫做图层（就是普通图层，可以包括像素图层和矢量图形图层），另一个叫做像素图层。如果选中图层的状态下添加像素图层，则该像素图层会默认放置在该图层下，普通图层与组的概念类似。如果选中画板层的情况下添加像素图层，则像素图层自动创建在画板层，与其他图层同级。
2）三大角色模块（personas）
在AD中有矢量部分、像素部分、导出部分的区别。不同部分的工具区是不一样的。在矢量部分下，包括拖动矩形与钢笔绘制形状，所创建的都是矢量图层；像素部分创建出来的都是像素图层，这两者是不一样的，同时也是AD与AI的重要区别之一。
1）内置网格
与AI需要自己手动绘制等距视图网格线不同，在AD中内置了一套优秀的网格系统，可以帮助我们快速的搭建出2.5D插画需要的网格线，并且支持角度变换。在调节角度时可以预览网格线的具体效果，就这一点就足以让2.5D插画作者扔掉AI转投AD。
2）等轴测工具（isometric）
isometric工具可以帮助我们快速绘制等距视图插画。我们可以想象一下在AI中，好不容易利用旋转复制人肉做出了参考线，还需要用钢笔工具去点击参考线的交点来绘制插画的一个个立体块面。在AD中这项繁复的工作将不复存在。通过等轴测工具，我们将告别手动对齐这种令人头大的工作。
等轴测工具功能由两部分构成，上方的三个立方体表示参考线当前描述的是哪个平面，并且可以通过这三个立方体来快速切换当前平面（current plane）。
在下方平面编辑选项部分，有这样几个功能项。
在平面中编辑（重点）：在该选项选中的状态下，我们通过图形绘制工具在画布上直接就能拖动出符合参考线角度的图形，特别是在绘制圆形时简直不要太方便。
适应平面（重点）：在画布中我们通过矩形工具绘制了一个正常的矩形，横平竖直那种，然后点击【适应平面（Fit to plane）】，只听得啪的一声，矩形就被啪到参考线上了，变成等轴视图的一个部分。
在平面中翻转/旋转：这个没什么说的，就是普通的翻转旋转操作，变成了等距视图的翻转旋转操作。
相当于UI组件库，Sketch与XD都有同样的功能。
视图（view）-studio-符号(symbols)，将图形拖进去，就形成了symbols。
如果想要单独修改某一个符号，则需要点击符号面板右上方的【同步（sync）】来取消全局修改，然后单独修改某一个符号。修改后，该符号将脱离符号控制，不受符号修改影响。
选择节点工具[A]，去调整一条曲线的锚点，可以通过上方面板中的吸附（snapping）来选择各种吸附方式。
视图-参考线管理器，可打开参考线面板，已存在的参考线都会在上面显示，同时可以点击参考线的数值来修改参考线的具体位置。
因为需要时间消化的原因，我会将文章分为几部分整理，在此阶段如果有朋友感兴趣可以去Affinity官网下载试用，同时结合本文上方的链接（官网的教学视频被异次元封印了）可以更好地了解AD。再次提一下，一定要看官方教学视频，不要想凭借着自己PS、AI的基础去直接上手，AD真的不一样。
AffinityDesigner（下文都用AD表示）是Affinity系列中偏向于矢量绘制与界面设计功能的工具，其并没有能够准确对标的竞品，如果非要对标的话，可能就是Adobe Illustrator和Sketch了。Affinity系列中的另外两款作品Affinity Photo（偏向图像处理，对标Adobe Photoshop）与Affinity Publisher（印刷排版，对标Adobe InDesign）也是非常有潜力的作品，不过目前这两款还没有办法完全替代掉Adobe家族的作品。
但是AD，我觉得是可以完全有实力跟Adobe Illustrator一较高下。在用过Sketch之前，我从未感觉用PS做UI有多低效，同样，在了解AD之前，我也从来没感觉Ai有多难以忍受，顶多有些地方感觉反人类罢了。但是经过两三天的了解与试用，我立即就在App Store下单入正并抛弃了AI。
因为AD，真的有点东西。
作者：NOLeon_墨刃 来源：站酷
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
『 写在之前 』
最近在阅读《佐藤可士和的超整理术》，书里讲述的是作者通过对空间、信息和思考的整理，来解决复杂问题，让工作变得高效。生活和工作离不开“整理”，好的设计也要从“整理”开始，组件化设计思维，也可以看做一种“整理术”。本篇文章将与大家探讨如何运用组件化设计思维去“整理”项目，并发挥更高的价值。
文章分为两个部分：
1. 组件化设计思维
2. 滴滴表单优化项目的沉淀总结：组件化思维的推动和执行
『 组件化设计思维 』
1. 什么是组件化设计思维
我们知道“分子是由原子组成的，分子分成原子，原子也可以重新组合成新的分子”。一个界面是由独立的分子组件搭建而成，分子组件由原子元件构成，这些原子可通过不同的组合方式，组成新分子组件，继而重组构成新的界面。
组件化设计思维是通过对功能及视觉表达中元素的拆解、归纳、重组，并基于可被复用的目的，形成规范化的组件，通过多维度组合来构建整个设计方案，从而提升设计效能。
2. 滴滴运用组件化带来的收益
随着滴滴业务的飞速增长，组件化为滴滴带来了一致的设计语言和工作效率上的提升，因此滴滴在组件化道路上的决心愈发坚定。选择以组件化展开设计实践，带来的变化与收益主要体现在公司、项目和个人三个维度：
2.1 公司维度
一款产品的更新迭代是依附于产品、设计、开发、测试等多个团队协作进行的，随着产品功能的完善，背后支撑的团队也在不断壮大。以运用组件化推动的产品设计与迭代，可以使团队增效，降低成本。设计师可以只用几个小时设计出几十个页面，开发人员也可以通过查看prd文档，直接调取组件代码完成需求，使得我们的生产力产生质的飞跃。在保证数量和质量的前提下，原本200人的团队，可以缩减为100人，为公司节省了人力成本。组件化能让公司以更快的速度和更低的成本开发产品，也能对产品想法快速验证。
2.2 项目维度
● 从设计方案上
对于一些适用组件化的产品形态，我们可以运用组件化思维将其“化整为零”，对需求有更规范的统筹，理清框架，建立一个可复用的组件结构并持续优化，以保证交互和视觉的一致性。
● 从工作流程上
传统的设计流程大多是同属性多角色并行的，从需求到设计，从设计到前端的工作流程会涉及到不同的设计师及不同的前端工程师。相同角色间无交集、缺乏沟通会导致大量重复性工作，增加项目周期和管理难度。
而将组件化思维贯穿其中的设计流程，带来了工作流程上的创新。我们建立了一套设计组件库来提高协同效率，大量需求均通过需求评估来判断是否需要新增或复用组件，对于组件库里已有的组件，设计师可直接调取，组合构建出新页面。对于新增组件则经过常规设计流程后，归纳沉淀并由组件委员会审核通过后方可入库，以提升后续组件扩展能力，助力产品快速更新迭代。
2.3 个人维度
利用组件化，设计师可以从低价值的机械式工作中解放出来，参与到设计创新中去，发挥更高的设计价值。
另外，在工作中运用组件化设计思维有助于设计师更完整的思考，培养全局思维的能力；也有助于我们专注于细节，提供个性化的创新方法，产出适应不同场景的最优方案。
下面用一款优秀案例来解析组件化设计思维
『 滴滴表单优化项目沉淀 』
1. 项目背景
1.1 为什么要优化表单
滴滴出行5.0版本从2016年11月上线至今，随着用户体验痛点不断增加，业务的需求逐渐多元化，我们希望对表单进行一次统一的整合梳理和升级。为未来更多业务发展提供快速支撑和拓展，同时也注重用户体验的提升。
滴滴出行作为出行服务类应用，精准的发单表达是触达用户进入服务流程的关键。每个业务在确认呼叫的节点上拥有独立的入口并满足不同的需求（如下图），确认呼叫页表单（以下简称表单）作为最重要的多功能、多信息载体，需要高效、精准的表达和流畅的体验。
1.2 跨业务共建
滴滴出行是涵盖出租车、专车、快车等多项业务在内的一站式出行平台，我们希望在保证全平台统一化的基础上，与业务寻求一种相辅相成的关系，并且在保证规范化输出的同时，展现出业务特色。在需求阶段，确定各业务接口人，收集需求，沟通评审促成各方达成一致目标。在方案执行阶段，平台设计师产出方案，与各业务线沟通并优化，1～2次循环后方案评审到最终确立。开发和测试阶段，各方验收通过后发版上线，上线后平台沉淀设计规范，完善组件库，跟踪反馈，推动体验优化形成工作流程闭环。
2. 确立设计目标
项目初始，平台设计师需从业务诉求及用户诉求两方面着手，在收集到两方需求后，对其进行归类整理并定义优先级，从而确立设计目标，制定出具体的设计策略，提炼交互框架，再深入到细节的设计。
在表单项目中，基于满足业务未来多元化及提升用户体验的需求，输出目标为：
1）兼容各业务需求，建立具有可承载多种业务共性及特性的组件能力框架；
2）主要信息及次要信息的合理化分布；
3）传递真实感及专业感，拉近用户体验共鸣。
3. 以组件化设计思维展开设计探索
有了明确的目标后，根据目标制定相应的方向策略，也便于我们在后续的设计工作中寻找发力点。和业务沟通后，明确整体方案的设计基调聚焦在“扩展性”“统一性”“逻辑性”“个性”四个方向上：
扩展性——组件化视觉表达，能够随着滴滴多场景、多业务需求的变化进行延展和扩充；
统一性——各业务信息归类统一、简化；
逻辑性——信息层级清晰，增强主焦点认知，次要信息弱化；
个性——设计个性化表达
3.1 以组件化思维进行框架探索
在方案构思阶段，我们是以组件化设计的思维方式先去全面的思考并分析问题，再进行拆解分类，最后归纳重组。
● 全面多维度分析问题
框架层：针对快、专、豪的确认呼叫表单的关键场景进行框架分析
因为业务不同，场景不同，确认呼叫这个流程触点在各业务中是具有共性和差异性的。我们重新梳理了确认呼叫页表单各业务的功能点（如下图），可见各业务表单虽有一致模块，但信息内容十分繁杂，层级区分无规律可循；操作区位置不统一，样式各异；框架的兼容性及扩展性不高。
表现层：在视觉表现层面上，也暴露了很多问题，如：不同业务的车型选择分别有各自的展示方式；价格区选中项的感知较弱且各业务的样式不统一；价格小数点展示位数不一致等等。
新增业务特性诉求：新的框架还需满足业务特性的诉求（如下图）。
● 拆解并简化
如何让新的框架既能满足越来越多的业务类型，保证体验的统一，又能体现出业务特性，平衡取舍促进产品更新迭代呢？
我们回归到本质，从以下四个方面对框架进行重新构思：
删除——去掉无用的功能点
组织——根据类别将这些功能点分解后重新划分成组
隐藏——突出主焦点的认知并隐藏次要信息
抽取——抽取共性，对比差异性
综上，即对框架进行简化，保证框架可灵活适配具有业务共性与特性的组件。
● 重组
简化后的框架几乎可以覆盖所有必要功能点，有很强的适应能力和扩充能力，可以轻松应对未来多元化的出行服务及场景。
在共性中寻找差异性：全局操作、车型与价格、发单按钮是业务共性部分，除车型／价格区和发单按钮外，其余均可显示或隐藏，可根据业务特点灵活配置。
在差异中寻找共性：车型与价格区所包含的服务选择与附属操作是业务差异部分，快车需要在一个卡片中呈现三个车型比价、需要有附属操作，专豪则需要强调车型图片的露出和服务配置。我们要找一个平衡去把这些差异点串联起来，确保用户拥有同样的感受，不仅是交互方式、动效流转，也需要关注同一层级信息的视觉表达。
3.2从框架层到表现层——从整体到细节的设计
● 视觉尝试探索
在交互框架明确后，便进入视觉设计阶段。平台设计师基于统一的的框架进行视觉风格探索，兼顾扩展性和逻辑性，同时不能忽视业务特性，从而迸发更加出彩的设计想法。设计师是界面的规划师，也是品质的把控者，大到页面布局、组件的组合方式、颜色定义，小到按钮在空间布局上的占比是否合理都要面面俱到。在这个过程中，不断打磨微调，进一步细化并且有针对性的进行动效设计，以呈现更完美的方案。
● 组件化设计的细节打磨
在方案确定的同时，将模块再次拆分成组件，组件包含不同类型、不同状态的基本元件，进行深入打磨，从而实现与设计目标的高度吻合。
● 根据组件构建页面
表单运用了组件化设计方法，建立了可承载业务共性与特性的框架。通过设计评审敲定最终方案后，提炼规范，设定组件标准，提取组合用法以覆盖各业务场景。由于业务线设计师更了解业务的需求根源及业务流程，所以由其枚举场景并输出业务遍历图。
平台与业务共建的过程，可以更好的调动业务线设计师的积极性和参与度，也能从业务的角度验证组件的扩展能力；“共建”也能更快速的将组件规范推动落地，实现组件的复用、协调与升级，是快速搭建页面、促进产品快速迭代的重要因素。
4. 项目反思
表单在 2017年10月19日 随乘客端 V5.1.16 发布，我们通过数据分析来验证表单优化的合理性。（以ios为例，分析上线一周后10月25日-10月31日的发单率和发单时长数据）
4.1 体验量化
- 新表单较老表单，发单量增加，发单率提升14.83%；
- 新表单较老表单的平均发单时间降低了2%
数据分析表明，表单的设计优化是成功的，是设计师运用组件化思维在自驱项目中的每一个环节发挥高价值的体现。
4.2 快速落地
“共建”和“组件化”是促成表单项目在短时间内达成落地目标的关键因素，平台与业务共建的工作方法也扩展运用到了更多项目中，是平台与业务之间迅速确立方案、搭建设计规范、推动体验优化和迭代的最高效路径。
4.3 设计研发一体化
不仅如此，表单优化项目取得成功，离不开“组件化设计思维”在设计全流程上的应用。我们坚信，滴滴将在组件化道路上继续前行，然而这条路任重而道远。就现状而言，我们的两个组件库——设计库和开发库仍需要分别维护，且设计和开发在沟通时成本较高。这使得我们需要创建一个能够同时面向设计师和开发人员的共享组件库，实现设计和研发一体化，让设计师面向开发，让开发贴近设计，减少设计及开发人员的额外工作量。我们设想，在设计和研发一体化的生态系统下，不论设计师或开发人员，通过搜索名称就可以从共享组件库中调取相应的组件进行设计，这些组件都有一对一的设计和开发数据，这会让工作变得十分高效。
在滴滴的未来，设计研发一体化是可以将代码实时渲染到设计软件中审阅设计的生态系统，且并不遥远。
作者：滴滴出行CDS 来源：站酷
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
本文从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设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
蓝蓝设计的小编 http://www.lanlanwork.com