作为设计师保存的珍藏
设计领域充斥着无数的设计工具、插件、网站、资源。这些工具能够帮助你改善你的工作流程，让你成为更优秀的设计师。多年来，我已经尝试过很多工具，但只有少数几个真正脱颖而出。
本篇汇总文章可谓是精华中的精华。其中有些是有趣的网站，你可以从中获得灵感；有些是工具和资源，绝对会让你成为更好的设计师。
我希望你能喜欢!
1. The preposterous web portal of Erik Bernacchi
这很可能是我见过的最古怪、最令人印象深刻的网站。在这个网站里乱搞一下还蛮有趣的。这个网站充满了古怪的小程序，在这里我能消磨很多时间。
2. Cofolios
Cofolios是一个企业实习相关的网站，包含了作品集、文章、实习机会、案例研究等相关内容。
在这里你可以从其他设计师的作品中获取灵感，向他们学习。
当我开始我的产品设计生涯时，我也曾是一名设计实习生，现在我仍然认为这是初级设计师进入大厂的最佳途径。我喜欢看人们进入设计领域的所有非常规路径，也喜欢阅读设计师们的经历。Cofolios上分享的许多博文都提供了在不同的科技公司实习的情况，以及你如何也能做到这一点的技巧。
3. ShareKit
ShareKit可以帮你实现便捷地为自己的图片添加链接。
我一直在使用ShareKit来定制LinkedIn简介中的链接，因为默认的预览图经常是模糊的，而且与我分享的内容不相关。我在Sketch中设计的图形，将它们上传，然后就可以了。ShareKit还提供了数据分析功能，可以显示多少人推荐了我的作品和我收到了多少点击。
4. Saasframe & UX Archive
www.saasframe.io & https://uxarchive.com/
Saasframe和UX Archive是我在网站设计的某一环节被卡住的时候获得灵感的好网站。
这个资源展示了来自前沿科技公司的不同用户体验流程，以及优秀的设计。例如，当我我好奇其他公司是如何布局他们的 "忘记密码 "页面的体验的时--有了这些网站，我可以快速浏览其他公司的例子，看看他们是如何做的。
5. Startup Jobs
无论是实习、兼职还是全职工作--startup.jobs都能满足你的需求。
他们有各种角色的职位，主要为热门的科技创业公司服务。在寻找任何级别的职位时，这个网站都是不可或缺的工具。
6. Mesh Gradients
products.ls.graphics/mesh-gradients/
Mesh gradients提供了100个免费渐变选择。
我喜欢这些渐变中使用的柔和和充满活力的色调。它们可以用来为界面、登陆页面或其他任何你正在进行的工作添加一抹色彩。
7. POSE by Gal Shir
POSE是我发现的创建解剖学和人体插图的最佳工具。
在插画中获得恰到好处的比例从来没有像使用POSE那样容易。当我还是Snapchat的插画师时，我偶尔会完成一个角色的插画，但却发现腿部与身体其他部分的比例不协调。如果当时有POSE的话，就能帮我解决很多头疼的事情。
8. Brand Colors
Brand colors是一个来自家喻户晓的品牌色彩的大规模集合。
无论你只是在寻找灵感、有趣的调色板，还是需要特定品牌的颜色，Brand Colors都是你的首选。
9. Let’s Enhance
Let's Enhance是一款革命性的工具，可以在不损失分辨率的情况下将任何图像放大到16倍。其结果是令人震惊的。
10. BeyondUI
作为Pávlo Sanchez的创意之作，Beyond UI是一篇关于界面、资本主义、政府和公民的视觉文章。这是一个有趣的卷轴，其中充满了关于我们现代世界的发人深省和令人头疼的图形。
11. Figma Templates
Figma Templates为你提供了很多免费的模版比如Instagram模板、流程图生成器、线框工具等。在Figma网站上就有十多个免费模板，可以改善你的工作流程，让你在制作下一个旅程图或维恩图时，更加轻松。
12. Remove.bg
Remove.bg是一个一键删除图片背景的网站。
下次当你有一张图片，但不想花半个小时用Photoshop中的钢笔工具抠图，可以先在Remove.bg中试试。虽然它并不总是完美的，但如果它能完成90%的工作，那么我就不用在Photoshop中浪费一下午的时间了。
13. Whimsical
我曾犹豫过要不要把这个放在这里，但Whimsical是一个很好的工具，不能不提。
我相信很多人都听说过它，但这是给没有听说过的两个人的。Whimsical是我工作流程中不可缺少的工具--无论是线框图、创建用户流程图，还是安排导航，Whimsical都是我的首选。
14. Fluid Simulation
paveldogreat.github.io/WebGL-Fluid-Simulation/
这不是一个工具，更多的只是一个有趣的网站。
你能做的就是浪费一些时间盯着屏幕。我承认我花了很多时间来搞乱各种设置，看看会发生什么丰富多彩的爆裂效果。
15. Brennon Leman
Brennon Leman是一位非常有才华和古怪的艺术家，他创造了一些我喜欢的奇异的艺术作品。
他的风格简单而友好，同时也很有趣味性。我喜欢时不时地滚动浏览他的作品，看看他创作的作品。
16. Beeple Crap
Beeple Crap是在另一个层面上是一件不寻常的艺术作品。
我关注他的Instagram有一段时间了，每当我看到他的一个经常怪诞的作品出现在我的页面中时，我都会感到一丝厌恶、好奇和着迷。这是我见过的最令人印象深刻的3D作品，更多的时候绝对是搞笑的。
17. Hamburgers
Hamburgers是一个免费的动画汉堡图标动画库，可以供设计师或开发人员使用。
汉堡图标动画是一种很酷的方式，能为您的个人网站增添色彩或个性。你可以按照页面上提供的步骤轻松实现这些效果。
18. SVG Backgrounds
SVG Backgrounds是一个超级娱乐的网站，可以乱七八糟的创建各种色彩和几何背景。
有几十种背景选项，可以用滑块调整和自定义它们的外观。我还没有实际应用过这个工具，但我很喜欢用它来捣乱，希望有一天能在我的一个项目中把它变成现实。
19. Picular
Picular是一个搜索引擎，你可以搜索一个词，然后就会出现与该词相关的各种颜色。
这是一个可以让你获得与我们的情绪版上的术语相关的颜色的想法的好地方。在为我的一个品牌或平面设计项目确定调色板时，Picular特别有帮助。
20. Lordicon
在Airbnb的动画SVG库Lottie的强大推动下，Lordicons用他们精美的动画图标集为界面带来了生命。
我真的很欣赏他们对细节的关注以及这套图标的完美执行。网上的图标比比皆是，但能找到一个设计精良的套件，而且还有奇特的动画效果，真是难能可贵。
21. Emojione
Emojione在过去的几年中已经炸开了锅，所以你可能已经听说过它。
如果没有，它是一个有趣的网站，有精心制作的表情包、贴纸、动画等。他们对传统的表情符号进行了自己独特的旋转，甚至还创造了一堆自己的新表情符号，但在iOS或Android上还不存在。
22. Rotato
Rotato是我最近很喜欢的一款设备模拟工具。它是为我的UI设计创建快速而专业的样机图的最省力工具。
以前，我一直在Photoshop的样机博客中搜寻，直到找到符合我需求的东西（还得希望它是免费的）。Rotato让生活变得更简单，现在我可以拖放我的设计，然后调整设备的角度，并在几秒钟内有一个完美的样机图。
23. Interns.design
Interns.design是一个最新的招聘网站，提供设计领域的实习机会。
我非常欣赏这个网站的简洁性和分享的职位质量。如果你正在市场上寻找实习机会，可以自己去看看。就像我之前说的那样，实习是进入设计和技术行业的最佳途径之一。
24. Blush
由巴勃罗-斯坦利带来的 Blush，是一个与众不同的插画网站。
有几十个选项可供选择，你可以自定义人物的头发、裤子、肤色等等。这个工具的灵活性和可能性让你甚至不用打开 Illustrator 就能创作出真正独一无二的插画。
25. Fonts Ninja
Fonts Ninja 可以让你识别在网络上遇到的字体，甚至有时还会告诉你在哪里可以购买或下载你找到的字体。
我使用 What Font 已经有一段时间了，但最近才尝试Font Ninja，在比较了两者之后，Fonts Ninja 占了上风。
26. Tabler Icons
Tabler图标是一个850多个可调整笔画图标的集合。
我最喜欢这个网站的部分是，我不需要为每个我想要的图标下载SVG。只需点击你需要的图标，然后它就可以粘贴到任何使用笔画的设计程序中。
27. Hallway Chat
Hallway chat是Slack的扩展，它可以让你的团队在一天中一起进行10分钟的聊天。
类似于你在办公室与同事的走廊对话，Hallway让这些类型的对话在虚拟世界成为可能。将它免费添加到你的Slack频道，你就可以与你的设计师同事或团队成员享受一些轻松的聊天，让你离开工作几分钟。
28. Cool backgrounds
Cool Backgrounds是一个工具集，可以为博客、社交媒体和网站创建引人注目的彩色图像。除了背景，生成的图片还可以作为桌面壁纸或裁剪为手机壁纸使用。
29. Google Color & Type Tool
Google Typescale Generator & Google Palette Generator
谷歌材料设计系统包含了大量有用的工具、资源、技巧、指南等。我发现在我的工作中最有用的两个工具是字体工具和调色板工具。调色板提供了一个已经调整好的颜色，你可以直接使用，实在是太方便了
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
UI 设计，是用理性方法，来满足需求，并带来美学享受。
本篇探讨 UI 设计如何做到理性。全文共有三部分：有哪些理性，如何做到理性，止步于理性吗。
UI 设计主要有四类理性：基本原则，基础知识，风格设定，风格把控。四类理性有一个共同核心：活学活用。
共有四个基本原则：对齐，对比，亲密，重复。
先说对齐。
秩序产生美。对齐作为一种基本秩序，主要事关整齐美观和阅读体验。
对齐一般分左对齐、右对齐和居中对齐。
从阅读体验角度来讲，左对齐通常胜过居中对齐，所以绝大部分文章和 UI 界面都是左对齐为主。
从美感角度来讲，居中对齐往往胜过左对齐，所以一些强调美感胜过强调阅读效率、篇幅不长、同时需要细品的诗或歌往往采用居中对齐。
从空间利用率角度来讲，右对齐往往是左对齐的一种补充。比如微信的发现页面，最重要的图标和文字左对齐，次要的右箭头和其它信息右对齐。
UI 设计追求阅读体验、美感和高空间利用率，所以这三种对齐方式大部分时候都会同时出现。整体而言，是以左对齐为主，居中对齐和右对齐为辅。
再说对比。
嘈嘈切切错杂弹，大珠小珠落玉盘。音乐讲究韵律和节奏，设计也追求错落有致的节奏感。这种节奏感，很大程度上靠对比实现。
好的对比可以带来视觉张力，就是抓人眼球的吸引力，同时也能起到主次分明和视觉引导的作用，最终带来良好的阅读体验。
一定程度上，对比是无处不在的。只要存在不同，就存在对比。比如大小之间的对比，不同颜色之间的对比，文字与图标/图片之间的对比，不同对齐方式之间的对比，等等。
一般而言，对比需要果断：若不同，就彻底不同。因为一般情况下，充分的对比能带来更好的视觉张力和更好的阅读体验。
第三说亲密。
设计就是分类，张小龙曾如是说。分类中最重要的原则是亲密，还有一个副产物是留白。
性质相同或相似的元素，我们会让它们看起来离的更近，关系更亲密。亲密成就分类，分类能化繁为简。
最后说下重复。
设计追求一致性，一致性主要靠重复来实现。被大量“重复”的元素，比如这篇文章里的字体大小和字体颜色，既保证了一致性，又提高了效率。
基础知识主要包括：手绘、颜色、版式设计、字体设计、品牌设计、动效设计、插画设计等专业知识。
UI 设计师可能不用画卡通人物或插画，但一定会画图标和 logo，这些也会用到手绘。作为造型基本功，需要掌握一定手绘技能。
颜色方面，最重要的是能够很好感受和理解颜色传达出来的感觉，也即颜色的“精神之美”，这块主要依赖审美和练习。
配色方面，推荐软件里的 HSB（色相、饱和度和亮度） 模式，这种模式很好理解，也方便调色。另外还强烈推荐从照片中吸取颜色，因为照片往往会和“生活”、“自然”有一定关联，“生活”和“自然”是非常重要的素材和灵感来源。从色卡中选择颜色也是一个不错的选择。
版式设计就像是选秀节目中练习生的舞台表演，考验的是唱跳、表情管理、舞台魅力、临场应变等综合实力。
“活学活用”环节，会结合例子分享版式设计。
字体设计、品牌设计、动效设计、插画设计等方面，个人经验不多，就不分享了。文末会附一份推荐书单，囊括基本原则和部分基础知识。
风格设定，即上篇提到的“精确描述”，是在动手设计之前，先探索出合适的风格，并把它精确描述出来。
好的开始是成功的一半。风格设定是一个开始，极其重要。如果风格设定只做到 60 分，稍微打点折扣的执行结果就是不及格。所以，如果要把设计做到 85 分，风格设定一般要做到 90 分。
风格设定犹如在茫茫大海中行船，首要目标是把握方向，核心诉求是精准。海上并无现成道路和导航可循，只能依靠繁琐而严谨的推理和计算。
风格设定的次要目标是划一个既清晰界定风格、又清晰指明“发挥范围”的“圆圈”，核心诉求是周密。因为需要清楚知道“圆圈”以内代表什么，“圆圈”以外代表什么。
在“精准”和“周密”上同时做到优良，风格设定才能做到优良。
既精准又周密的风格设定，通常无法一蹴而就：“风格设定”阶段一般只能做到七成，剩下三成需要在设计过程中继续探索和打磨。下一大段会结合案例分享具体方法。
风格把控有两层含义，一是实现当初设定的风格，二是在实现的基础上做到统一和规范。
只要严格在“圆圈”里发挥，实现当初设定的风格并不难。那做到统一和规范难吗？往难了说就是需要做大量琐碎工作：以联系的眼光看待所有设计元素，并把它们分类规整好，注意分类不宜过多，同时分类逻辑上不能出现明显问题。往简单了说就是大量复用已有的设计样式。
风格把控就是在划定的“发挥范围”内，利用设计知识和经验，以规范的方式实现规划好的风格。
活学活用作为四类理性的共同核心，最典型的应用场景是版式设计。
活学活用有两个要点：正反结合，风格第一。
所谓正反结合，是指设计知识既能正着用，也能反着用。最常见的例子是对齐原则，大部分时候是正着用，但如果想要营造活泼的感觉，也会反着用：故意打破对齐原则。
除了对齐原则，其它设计知识，比如重复原则，也可以反着用。
本文配图就是一个例子：图片左上角、右上角和右下角分别散布着装饰元素（横线、圆环）和 logo，在装饰元素的出现次数上，没有用重复原则。过年家里挂灯笼一般至少挂两个，同一装饰元素一般至少出现两次，以达到一种和谐和较为热闹的装饰效果。
我在装饰元素的出现次数上没有用重复原则，而在出现位置（相似位置）、元素大小（相似大小）和元素颜色（相似颜色）上用了重复原则，同样达到了和谐效果。之所以没在装饰元素的出现次数上用重复原则，是想放一个隐喻在这里。
所谓风格第一，是指设计风格永远第一，设计知识永远第二。知识服务风格，切不可重知识轻风格。
《倚天屠龙记》中，张三丰教张无忌练习太极剑时，要他忘记剑招，只记剑意。某种程度上，版式设计也要将“剑意”放在第一位，“剑招”服务“剑意”。
对比原则也有反着用的时候。有一条关于对比的知识：对比要果断，若不同，就彻底不同。这条知识能解释百事可乐 logo 里红色与蓝色的强烈对比，但解释不了山本耀司旗下大部分服装那千篇一律的黑色——单色，无对比。
设计最重要的是感染力，感染力主要来自个性、态度、价值观这些风格层面的东西，而非设计知识这些技法层面的东西。
当一个设计，技法高超而风格不足时，感染力和魅力就会不足，这也是设计师经常会犯的错误，大家需要注意。
可以简单分成三步：规划，成形，细化。下面结合微信 Redesign 这个案例来说明。
设定风格，用到的方法姑且称之为“红绿灯”法。“红绿灯”法借鉴并改良了我在网上看到的一种“红黄绿卡片法”（在红、黄、绿三种颜色的卡片上写下不同的设计关键词），并和“情绪板”法有相似之处：都包含关键词定位和图片参考两部分。
先说关键词定位，共有两步。
第一步类似头脑风暴，结合产品属性、用户属性、市场情况、个人喜好等因素，把能想到的设计关键词全部写下来。合适的不合适的都要写，只要想到了就写下来，确保有二三十个。如果关键词数量不够，这个步骤可以多重复几次，直到够了为止。这一步设计师和需求方都要参与进来，在提供关键词上双方是平等关系。
这个微信 Redesign 是个具有探索性质的小练习项目，基于微信 7.0，有两个目的：首先保留原有交互体验和品牌识别度，其次在视觉上更年轻、更流行。可以通俗理解成：一款微信“皮肤”，主要给年轻用户和赶新潮的中老年用户用。
结合产品属性（社交类、工具类、内容类）、用户属性（年轻用户为主）、市场情况、个人喜好这些因素，这一步想到的关键词如下图所示。
第二步是归类，就是把第一步产生的所有关键词归成“红黄绿”三类。如果关键词不够，还可以再补充。这一步依然是需求方和设计师共同参与，但需要设计师来主导。
红色关键词代表不能踩的红线：不能这样做；黄色关键词代表黄灯警告：这样做不太合适；绿色关键词代表畅通无阻：应该这样做。
需要注意的是，绿色关键词最好控制在 3-4 个之间，如果超过 4 个，就需要分成主绿关键词和次绿关键词，主绿关键词依然要控制在 3-4 个之间。这样做有两个考量，一是确保简单和重点突出，二是也更容易实现。
回到第一步的关键词上来。设计中当然可以用“拟人”、“隐喻”等手法，所以“拟人”这个关键词显得意义不大，故删去。“温润”和“亲和”，“老少皆宜”和“大众”在语义上都存在一定的重复，所以删去后者。删除这类不合适的关键词后，剩余关键词就按“红绿灯”法归类，归类后情况如下。
（微信 Redesign 之按“红绿灯”法归类后的设计关键词）
关键词定位已就绪，再来找参考图片。
可供参考的图片有两大类：照片和 UI 界面。UI 界面也有两类：线上作品（真实项目、练习作品等）和上线作品。
做 UI 设计，参考什么样的图片？个人建议，做什么类型的设计，就重点参考什么类型的图片。比如 UI 界面就重点参考 UI 界面，banner 就重点参考 banner。
UI 界面的设计，个人喜欢重点参考知名产品的上线作品。单从视觉角度来说，上线作品的质量可能比不过一些线上练习作品。但是已经上线的知名产品的 UI 设计，其风格的形成往往都会经过很多推敲，会有很多比较成熟的设计思路在里面。
参考别人的设计，最重要的是参考设计思路，其次才是参考表现形式。这种设计思路，有时候能从网上找到，但更多时候靠自己推测。
微信 Redesign，根据“很多年轻人在用，且风格比较流行”这条主线，找来了 QQ、抖音、B 站、小红书、陌陌、Soul、腾讯视频、爱奇艺等产品的截图。这些产品的截图，看完一圈后，就会面临一个问题：以图标为例，这几个产品的图标，风格各异，但基本都具备“年轻”和“流行”的特点，那应该参考哪一个？
这时就要求助关键词定位。除了“年轻”和“流行”，主绿关键词还有一个“轻微老少皆宜”。最符合“轻微老少皆宜”的是爱奇艺和腾讯视频：很多老人和小孩也会用这两个 App 看视频，网上公开的数据也能佐证这一点，所以它们的设计一定会照顾中老年用户的审美。
最后，出于个人偏好，我选择重点参考爱奇艺的图标风格，具体而言就是：深浅双色、较粗(1.5pt)描边、圆润风格。
红黄绿三色关键词及重点参考图片就绪后，就可以动手设计。
我一般会把界面设计粗略分成三大部分：版式风格、元素风格、元素大小，元素为图标、图片、按钮等，然后去一一实现。
先说版式风格。
用的主要绿色关键词是“更流行”和“更年轻”。“更流行”包括：更大字号的页面标题、尽可能用留白代替分割线和卡片的“无界”风格、圆形头像、更多留白更多舒适、等等。“更年轻”包括：更圆润的搜索框、输入框和图标、更年轻更具活力的配色、等等。
再说元素风格之图标风格。
图标主要参考爱奇艺 App：其一，底部导航和发现页的图标都是深浅双色加较粗的描边；其二，除了更圆润以外，部分图标还变 Q 了。
最后说元素大小。
以这个小项目为例，最主要的元素大小是图标大小和字体大小，它们会影响整个设计的感觉。通常情况，元素越小，给人感觉越精致、越高端，此其一；其二，可能是年轻人和老年人视力存在差别的原因，越小的元素往往代表年轻人的审美，反之则代表老年人的审美。
元素大小主要运用的绿色关键词是“轻微老少皆宜”。也就是说，需要在年轻人和中老年人的审美中找到一个平衡，所以元素大小基本直接参考了微信 7.0 的设计，个别地方做了微调。
最后，出来的效果如下图所示。
这份设计我发在了网上，部分网友留言说看着不够好，不太舒服，有一个表达的比较具体——“虽然用了大面积留白，却让人感到紧迫...”。
基于网友的留言，我仔细审视了这个设计，最后发现问题主要出在页面（发现页为例）左右两侧：留白过小。
当初之所以这么设计，是想通过页面左右两侧较少的留白制造一种内容将要撑破屏幕的感觉，从而营造一种活泼的感觉。注意，彼时“活泼”还没出现在“黄色”关键词里，上文两张关于关键词的图都省略了中间探索和优化的过程。
很多网友之所以没有感受到活泼而只是觉得不太舒服，至少有两个原因：第一，整个设计的基调是简约、清爽，有一定的年轻感和流行感，但没有太明显的活泼感，硬往里面某个地方塞“活泼感”并不和谐，大家也难以感受到；第二，单纯就“活泼感”而言，做的依然不到位，比如图标与右侧文字的留白，可以比图标与左侧边界的留白大，方能更好彰显活泼与活力。
考虑到“轻微老少皆宜”这个绿色关键词及微信主要是工具型和内容型产品，“活泼感”用在这里并不十分合适，于是放弃，并将“活泼”归为“黄色”关键词。此处留白的目的就回归其本职工作：整体和谐与舒服。于是就把留白相应调大了。
另外一个优化的点是“眼睛”的形状：微信图标、看一看图标、表情图标、朋友圈里将点赞和评论折叠起来的图标都有一双“眼睛”，这双“眼睛”起初是竖着的椭圆形，很萌，也比较低龄化。为了尽可能的“轻微老少皆宜”，这里统一把“眼睛”由竖着的椭圆形改成了圆形，弱化了“萌”和“低龄化”的感觉。
还有一块是颜色上，拍摄视频动态的图标有用到蓝紫色。这个紫色基本符合“更年轻”、“更流行”，但不太符合“轻微老少皆宜”，所以最后放弃了紫色，保留了蓝色。
遵循主绿关键词里的“轻微老少皆宜”，其它优化的点有：微信图标尖角处的圆角调小，删除启动页与黑色"WeChat"字形成对比的绿色圆点。另外还有一些视觉层面美观、和谐、舒适度的优化，比如颜色、留白、圆角大小、字体大小方面的微调。
优化后的微信 Redesign，整体效果如下图所示。
凡事预则立，不预则废。UI 设计如何做到理性，最核心的是设计风格，规划、成形和细化都紧密围绕设计风格展开。
最后，尝试总结下“红绿灯”法的优势，主要有四点：精确、周密、稳妥、高效。
关于设计风格，传统规划方法一般只有三四个“绿色”关键词。
“红绿灯”法拥有“红灯”、“黄灯”和“绿灯”三种颜色的关键词，从而确保大方向更准确。“红绿灯”法会产生20个以上的红黄绿关键词，从而确保划出来的“发挥范围”更周密，极少有疏漏。
在“成形”这个设计环节，一旦踩到“红线”和“黄线”，规划好的红黄绿关键词都会马上发出警报，从而大大降低“违规踩线”行为的发生次数，确保设计执行环节的稳当可靠。
“红绿灯”法通俗易懂门槛低，需求方可以较为深度参与“规划”环节。需求方在“规划”环节的深度参与，理论上可以降低后期的返工和修改次数，从而确保整个设计过程的高效。同时理论上也能够提高设计师和需求方双方合作的愉快程度。
UI 设计，始于理性，但无法止步于理性，还需要超越理性。注意，这里的理性，仅指设计知识的相关理性。
超越理性主要有两点：直觉，其它知识。
直觉是指一种能够快速感受和评估设计优劣的感觉。良好的直觉往往快而准。
感知和评价别人的设计时，用到的几乎全部是直觉。审视自己的设计时，也离不开直觉。
在审视自己的 UI 设计时，直觉主要发挥两个作用：第一，囿于知识储备或表达能力，有些地方就是解释不清，这个时候就要靠直觉去感受去判断；第二，直觉往往会作为检视设计的最后一道关卡，也是最重要的一道关卡。
直觉来自哪里？
个人观察是，直觉往往和审美正相关。比如一个设计师，他掌握的设计知识有限，经验有限，对自我的要求也不高，最终的作品往往不出彩。但如果他审美好的话，往往能够分辨出不同设计方案之间孰优孰劣。
如果你想就设计稿征求别人的意见，请去找那些审美好的人。
其它知识是指设计知识以外的所有其它知识。比如 iPhone 上删除应用前应用图标的抖动，其灵感应该来自生活中的摇头求饶或吓得发抖，抖动的幅度和频率则需要利用物理学和数学方面的知识。
优秀的设计，一定会从生活中汲取大量灵感，并广泛利用社会类、人文类和理工类学科的知识。就拿数学来说，在好的设计中，一定是个常客：因为你需要不停的按计算器，从而计算不同设计元素之间的比例关系和各自的大小。
汝欲学诗，功夫在诗外。遣词造句这些文字技巧只能是写诗的基础，而非关键。写诗的关键在于你对生活、对世事的积累和感悟，在于你的思想是否深刻，情怀是否充足。
写诗如此，做设计亦如此。设计知识只是做设计的基础，而非关键。做设计的关键在于“其它知识”。“其它知识”非本文重点，就不展开了。
UI 设计里的理性，主要是各类设计知识。理性的核心在于活学活用各类设计知识。
理性严谨的做 UI 设计，可以简单分成三步：规划，成形，细化。好的开始是成功的一半，一个高质量的规划显得尤为必要。
用“红绿灯”法做规划，并指导成形和细化工作，会更精准、周密、稳妥和高效。
UI 设计，是七分理性，三分直觉。审美越好，直觉越准。
优秀的 UI 设计，一定会从生活中汲取大量灵感，并广泛利用设计以外学科的知识。
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
颜色跟其他事物一样，使用需要恰到好处。如果您在配色方案中坚持使用最多三种基色，您将获得更好的效果。将颜色应用于设计项目中，要保持色彩平衡，您使用的颜色越多，越难保持平衡。
颜色不会增加设计品质 - 它只是加强了设计的品质感
皮埃尔·波纳德（Pierre Bonnard）
如果您需要调色板中定义的颜色以外的其他颜色，请使用明度和色调进行调整。他们将提供不同的颜色基调与之配合。
60–30–10 规则
室内设计规则是一种永恒的装饰技术，可以帮助您轻松地将配色方案放在一起。 60％+ 30％+ 10％的比例是为了保持颜色平衡。这个公式非常有用，因为它创造出一种平衡的感觉，并允许眼睛从一个焦点到另一个焦点舒适地移动。 使用也非常简单。
60％是主色调，30％是副色和10％用于强调色。
墙面漆（60%），家具（30%），配饰（10%）
颜色的含义
几个世纪以来，科学家已经研究出某些颜色的生理效应。 除了美学，颜色也是情感交流的创造者。 颜色的含义可能因文化差异而不同。这就是为什么你看到时装店铺的设计是黑白配色。 他们希望看起来优雅而高贵。
Asos采用纯黑白配色搭配绿色按钮设计，这种配色是有原因的。
红色：激情，爱，危险
蓝色：平静，负责，安全
黑色：神秘，优雅，邪恶
白色：纯净，沉默，清洁
绿色：新生，新鲜，自然
首先考虑单色设计
在项目设计初期，我们通常倾向于尝试不同的颜色进行调整，但这种行为会很快违背你的初衷，当你发现的时候，已经花费了3个小时调整基础色...这确实很诱人，但你应该学会避免这种态度。
相反，你应当专注于元素的间距和整体布局。它会节省你很多时间。 这种约束是非常有成效的。从另一方面讲，它看起来并不乏味。如果你想让整个作品看起来更好，尝试不同的颜色选择。
我在追波（dribbble）上的作品之一。简约单色处理，专注于元素之间的使用。
避免使用灰色和黑色
我学到的最重要的颜色技巧之一是避免使用灰色等不饱和色彩。 在现实生活中，纯灰色几乎不存在。 黑色也是如此。
这张图片最黑的颜色不是＃000，而是＃0A0A10
始终记着给你的颜色增加饱和度。潜意识里会显得更自然，为用户所熟悉。
相信自然
最好的颜色组合来自大自然。 他们看起来总是很自然。 寻找颜色设计的解决方案，最好的办法是调色板总是发生变化。
为了得到设计灵感，我们只需环顾四周。
保持对比
一些颜色相互融合，而其他颜色一起使用会发生冲突。 有一个明确的规则，想要了解不同颜色之间如何融合，最好的办法是观察一个色轮。 你应该知道这个方法，但是没有必要动手操作。
获取灵感
当我们在谈论UI参考时，dribbble是最佳选择。它还具有通过颜色搜索的工具，所以当你想对其他设计师使用特定颜色进行视觉研究时，然后去这里：dribbble.com/colors
视频，平面广告设计，室内设计，时装......有这么多鼓舞人心的地方可供收集。如果说根本就没有配色参考，那一定是懒惰的原因，把那些调色板保存下来，一切看起来都非常有趣。
通常我喜欢从KPOP（韩国流行音乐）视频剪辑中选取颜色，他们看起来很华丽。
配色工具推荐
为了方便起见，我搜集了一些最好的配色工具可供选择，在2017年获取调色板，他们会为您节省大量的时间。
Coolors.co
这个绝对是我最喜欢的取色工具。 您只需锁定所选颜色并按空格即可生成调色板。 Coolors还可让您上传图像并从中调出调色板。 很酷的事情是，你不仅仅是一个结果，而是有一个选择器，允许你修改参考点。
网址链接：https://coolors.co
（请使用科学上网工具打开）
Kuler
这款Adobe旗下的配色工具已经和我们在一起了很长时间。它在浏览器和桌面版本中都可用。 如果您使用的是桌面版本，则可以将配色方案导出到Photoshop中。
Paletton
它类似于Kuler，但不同的是，您不仅限于5个色调。 当您拥有原色并希望使用其他色调时，您可以使用这款很棒的工具。
网址链接：http://paletton.com
（请使用科学上网工具打开）
Designspiration.net
试想一下，你有自己的配色的想法，但你要看到几种颜色组合的例子。 Designspiration是一个伟大的工具。 您可以选择最多5种颜色，并搜索符合您的查询的图像。 真的很好，不仅用于找到具有特定调色板的图像，还可以在设计中实现它们。
网址链接：http://designspiration.net
（请使用科学上网工具打开）
ShutterstockLab Spectrum
你可能会问：如果我想用我所选择的颜色搜索照片？ 那么，Shutterstock有一个叫做Spectrum的工具，你可以用特定的语气搜索照片。 您甚至不需要订阅，因为具有水印的小预览图像将足以生成调色板。
网址链接：https://www.shutterstock.com/labs/spectrum/
（请使用科学上网工具打开）
Tineye Multicolr
但是，如果你想搜索照片中的颜色混合，甚至指定每个颜色的数量，那么Tineye会帮助你。 本网站使用了来自Flickr千万张共享图像的数据库。
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
原文地址：胡晓波工作室（公众号）
作者：猴子
转载请注明：学UI网》【字体设计】品牌标准字怎么设计？
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
汉字是来自自然的语言，有着生动的内涵和规律，笔画的点转横折，勾勒并呼应品牌的内在魅力，在积累和沉淀的这些作品中，通过汉字的美学理念表述着品牌独特的形式风格，以上作品，一起来交流吧！
© 版权所有，未经允许不得私自使用！
感谢关注
贺冰凇视觉艺术
原文地址：站酷
作者：贺冰凇
转载请注明：学UI网》贺冰凇品牌汉字卷！
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
根据不同内容进行视觉呈现，可以在不改变布局结构的前提下，带来差异化的感官体验。主题化设计就是在背景层和元素层进行视觉发挥，不改变原生结构，被众多产品进行设计发挥。
比如优酷 APP 在视频播放页面，视频窗口下方区域会根据影视作品特征进行主题化设计。会在背景、图标、按钮和选择器等元素上面进行主题化设计，情感化的设计更能带给用户共鸣感，提高用户对产品的感官体验。
空状态的设计从生硬的文字提示延伸到情感化的表达，运用更加视觉感的形式带给用户良好的感官体验。
最近在体验酷狗音乐时，初次进入播放页无歌曲时，采用黑胶 CD 作为空状态展示。当用户操作分享时则会以精美的配图来强化空状态，带给用户反馈的同时，也提高了播放页的视觉感。情感化的设计更能与用户产生共鸣，增加用户对产品的好感度。
用户在进行功能操作时，除了底层需求层面的反馈以外，反馈设计的视觉感也是至关重要的。好的设计可以加强用户对产品的好感度，让功能操作也能赏心悦目。
最近使用荔枝 APP 进行录音时，轻拟物的录音机设计印象深刻。在录音过程中磁带进行动效转动，带来场景化的真实感体验，停止录音时也会停止转动，动态的及时反馈提高用户使用体验。轻拟物动态设计不仅强化了视觉感，动态及时反馈也是非常不错的设计表达。
产品的流量区域属于众多功能争相曝光的区域，在这个方寸之间的设计发挥，体现出了设计师的能力。如何将有限的资源发挥到极致，带给用户更多的功能体验，需要产品设计师多在交互层面探索。
最近在使用酷狗音乐听歌时，底部标签栏上方的播放状态区域给用户提供了播放/暂停和切歌等操作，可以左右滑动来进行延伸功能切换。用户可以选择默认状态进行歌曲之间的操作，也可以向右滑动以显示歌词为主，方便用户在听歌时观看歌词。在方寸之间通过滑动交互承载了多重功能，满足用户更多操作体验，提高用户对产品的使用体验。
针对一些重点功能的按钮设计，在按钮造型、配色、图标风格、微动效等方面都在不断强化，以此来提高功能的关注度。
荔枝 APP 在录音模块中，为了突出录音按钮的存在感，结合了动态 IP 来进行强化。IP 形象从右下角出现与消失的动态效果，提高了录音按钮的关注度，俏皮可爱的形象也增加了设计的趣味性。
产品除了在使用体验层面不断优化以外，主要还是需要传递服务价值。服务的升级可以提高用户的认同感，情感化的设计可以辅助服务的可视化呈现。
自如在“家福卡”模块中，顶部视觉区域通过动态礼仪进行升温设计。每次进入都会有人偶形象打招呼，显得非常懂礼貌，使得用户感受到被尊重，提高了亲和力。通过动态形象进行礼仪表达，不仅提高了栏目的关注度，也让用户感受到这是一款有温度的产品。
用户反馈是打造优质产品的关键，如何提高用户反馈的意愿至关重要，设计师都在不断的思考和尝试。
自如 APP 在采集用户反馈时，设计了底部弹出的形式，询问用户是否愿意推荐自如。从绝不到强推设置了 0-10 分，当用户选择 9 分或以上时直接提交，低于 9 分可以描述原因。相对于比较隐藏式的用户反馈设计，这种打分制的形式用户操作更加便利，不会占用过多时间，用户参与的意愿也会更高。
注册应该算是用户比较排斥的操作，但也是不得而为之的事情。通过情感化的设计降低用户的排斥感，在趣味体验的环境中完成注册，可以带给用户更好的使用体验。
最右 APP 在注册时，进入注册界面 IP 形象以打招呼的形式出现，当用户输入密码时则会双手蒙住眼睛。IP 情感化设计带来了更多趣味性表达，以此推动了更加人性化的设计体验。
分类设计采用纯文字的表达显得比较单一，也有一些产品会结合图标或者图形设计进行装饰，以此来强化关注度和视觉感。
最近在使用肯德基 APP 点餐时，发现纵轴导航的分类设计结合了品类图标，提高了浏览辨识度。运用图标来强化可视化设计，提高用户点餐时对于品类的辨识度，也能强化当前栏目和默认品类的差异。小小的改变不仅优化了视觉感，也能带给用户更好的感官体验。
对于运动类产品来说，运动后的数据展示对于普通用户而言显得比较生硬，理解度来说不够直观。可视化的设计提供了更好的解决方案，看图比看文字更直观易懂。
One More 提供了简洁直观的训练数据预览，通过可视化的形式展示训练后增强的肌肉部位，以及通过肌肉颜色变化体现训练的强度。通过人体结构结合训练强度进行可视化表达，不仅可以提高用户查看训练数据的关注度，也能提高数据的理解度，增强用户使用产品的体验度。
个性化设计可以满足不同用户的使用需求，也能体现出产品的差异化服务。提高设计的差异，带给用户更加人性化的体验至关重要，无论是感官体验层面还是功能操作层面，只有带来不一样的体验才能提高用户的黏性，增加用户对产品的好感度。
今天给大家分享的这 10 个优秀案例，希望可以开启大家的设计新思路，在常规解决方案的基础上延伸出不一样的设计创新。
原文地址：黑马家族（公众号）
作者：黑马青年
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
又到了一年一度的龙虾季，龙虾最好吃的时候是6月、7月、8月，这三个月是龙虾长得最为强壮，个头大，肉质丰满，也是最好吃的时候，码字的时候想想这肉感口水都快流出键盘了，我先去舔下吃完龙虾的餐盘先。
没有一只龙虾能活着离开厨房，同时也没能逃过设计师的鼠标和创意之手。接下来就带大家分享关于龙虾类型的设计，滑到最后有彩蛋哦！
、
看了这么多不仅是嘴馋，作为设计师的你们是不是手痒也想自己用龙虾创作一把，于是我在吃完龙虾后，拍了下面的这个场景。
突然想到国内《神话》电影中成龙有一场类似的场景，于是与《权利的游戏》海报中的风格结合下，虽然画风有点暗黑。
但是如果从小龙虾的角度来看，这几个月对它们来说是个灾难，这也是作为龙虾最后的倔强。
虽然一想龙虾挺惨，但作为国人夏季夜宵时必备的龙虾，实在控制不住十三香、蒜泥、冰镇、蛋黄各种口味刺激食欲的味蕾，吃货的本性再次打败了刚刚对龙虾稍有些留存的感性
原文地址：修先森撩设计（公众号）
作者：修先森
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
2020 年 9 月上线，大概用了一年的时间，在核心功能上就已经与 Figma 对齐，而在这一年半里，他们还做到了很多不同且明显有考量国内用户习惯的特色功能，下面，就挑几个我比较感兴趣的点展开聊一下。
轻松管理素材、实现高效复用
有 Figma 在先，做资源社区已经成了在线设计工具的标配，而「即时设计」从一开始，就额外给出了一种与众不同的资源形式——资源库，用于提高组件库、图标、插画等素材的复用性。
与其他工具「选好资源——创建副本至工作台——打开文件复制所需元素」的流程不同，资源库类型的资源，只需一键「引用」，即可将对应资源保存至进编辑页面左下角的「资源库」，然后做设计时可以一键拖拽复用。
同时，资源库的内容会和广场上公开的资源保持同步，发布者新增、修改、删除内容，引用者都可以实时更新，虽然暂时只允许官方发布资源库，但实用价值可见一斑。
另外，即时设计的资源库不仅能保存广场中的设计资源，还可以把编辑区域所有可见内容，包括个人收集的常用图片素材等，一键上传并保存，在任何一台电脑上登录账号就能随时使用，相当于给了你一个不限容量且所见即所得的设计云盘。
比起像 Figma 一样平铺展示所有文件的“粗放模式”和团队的一级项目管理，即时设计增加了可以自由嵌套，不限制层级的文件夹管理功能，同时，还适配了拖拽和列表移动的操作。
而对于单个文件的管理，即时设计也根据国内用户习惯进行了优化，通过「跟进文件」，可以将你自己近期需要处理的文件专门整理到「正在跟进」页面，快速查看。
针对团队的协作需求，即时设计还做了一个「文件状态标签」，可以给文件打上自定义的标签内容，比如进行中、评审中、已完成，既能直观了解项目情况，又能进行筛选，有效地提升了团队用户对接效率。
从这些点里，相信大家都能能看得出，即时设计团队对一些细节需求的洞察能力，而且在很多方面都做了足够多的思考。
导入 Figma、Sketch、XD，导出 Sketch
为了满足设计师的迁移需求，即时设计支持了 Figma、Sketch、XD 三种主流文件格式的导入，同时，它还是最早支持 Sketch 导出的设计工具。
除了上面提到的，还有很多能看出有特别考量的功能，可以一键导入个人字体包的云端字体库，可以远程预览设计稿并打点评论的手机 App、微信小程序，自定义多彩主题……
虽然插件市场还没开放，但也有了不少吸引人的第三方合作插件，比如「字由」、iconfont、IconPark 等等，都是在 Figma 里不曾有过的体验。
创新能力，我们自然是有的，而且还很足，国内不管是庞大的用户基数，还是独特的软件环境，也都会让我们的国产工具得到更加特别的发展。
本土工具的自主研发之路还很长，但「即时设计」无疑是开了一个好头，而且步子迈得昂首挺胸，我也相信，他们有能力，之后给出更多的惊喜，支持国产，不妨一起期待一下~
即时设计：https://js.design
原文地址：功夫体验设计（公众号）
作者：彩云Sky
转载请注明：学UI网》为什么说是时候选择这个工具了
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
在产品设计中动效很常见，一个好的动效方案在提升用户视觉和心境体验的同时，还的的确确解决了很多其他设计问题。
好的动效设计总是在比拟现实，所以当我们思考为页面添加动效时，不应该感性的随心所欲的发挥自己的创意激情，而应该像科学一样，有一些基本的方法原则指导来我们，以此提升动效可用性。
今天主要分享一下在数字产品中动态设计的13个基本原则，希望对大家有所帮助。
▍缓动 ․
现实世界中绝大多数物体都不会突然运动，再保持匀速，最后突然停止（机械类运动除外）。而是缓慢加速或缓慢减速，这就是缓动。
缓动几乎适用于产品中任何元素的出现或离开、以及部分图数据加载等。
滑动内容
图表加载
在加载信息时，我们可以对信息归类分组，并按顺序依次延迟内容出场时间。这就是延迟与偏移，可以清晰的表达内容之间的关系。
在二维平面，如果信息很多，为了避免信息过载，我们可以将不重要的信息，或负面操作放置在前景内容后面，这就是叠加。用来模拟现实纸张叠放，创建出二维平面中的前后空间感。
当我们点击某个内容时，我们通过改变内容中某个主要元素（用于视觉引导的过渡元素）的轮廓并移动，这样可以将用户自然的带入下级页面，这就是蒙版。通过保留过渡元素的识别性，创建出无缝过渡，降低用户跳转页面时可能产生的迷失感。
现实世界大多数物体运动轨迹都是弧线，所以当位于角落的元素移动时，我们调整运动轨迹呈弧线，可以让元素运动更加流畅自然，这就是弧型。
注意：下面案例中元素上移是从左下往右上的弧线，但回来不是原轨迹返回，而是将弧线对称反转（类似抛物线），从右上往左下。
如果一个主要操作中包含其他操作，在用户与其互动时我们可以直接将元素分离出来，这就是克隆。再通过模拟现实世界中液体分离，可以清晰的表达出内容的包含关系。这类设计常见于底部的舵式导航按钮，点击后出现一系列功能图标。
将两个元素的属性进行关联，通过影响其中一个元素的属性，去影响另一个元素，这就是父子级绑定。给两个元素创建了一个隐形的传动轴，呈现一种用户正与内容进行实时可控的互动方式。
下图是通过小圆圈的旋转属性影响中间数值。
当某个元素存在先后两种样式时，我们可以给元素路径设置动态，使其形状从起始状态逐渐变化到结束状态，这就是转换。从起点到终点的无缝过渡，清晰自然的表达出任务结束。
在一个二维空间中，一屏展示的内容有限，当触发另外一个二维空间时，为了减少页面跳转，我们借助中间层并降低不透明度，或把背景模糊，这样可以将它们同时放在一起展示，这就是遮罩。帮助我们理解当前空间与原本空间之间的关系。
当看二维平面有些乏味的时，我们可以给页面赋予三维空间的深度，像真实世界的物体有厚度一样，用来表达该页面存在其他可以互动的侧面。这就是多维度，解决原本二维平面没有深度的问题，也带来更强的位置感。
线上产品中：
【哔哩哔哩】有做下图中类似的3D页面翻转效果（我一时忘记在哪个模块，有知道的同学可以留言告诉我，谢谢）。
【红板报】有做翻页效果，感兴趣的同学可以去看下。
金融和运动类产品中数字很常见，每次加载数字时，我们可以赋予数字动态变化，这就是数值变化。作用不仅仅是传达出数字的动态性质，更重要的是强化数字与用户的绑定关系（类似上秤后上涨的数字告诉你又“强壮”了。嗯？继续努力），让用户更加积极的维护数据变化。
界面中元素的运动速度并不是始终一致，当有多个元素时，为了建立良好的层次结构，我们可以让重要的可交互的元素运动速度更快，非交互元素运动速度更慢。（也可以根据设计目标反过来处理）这就是视差，将用户视线引导到可交互元素上，同时让非交互元素保持动态一致性。
页面中，我们始终在处理内容的展示与空间转换，为了能看到更多内容细节，我们让内容支持缩放来模拟相机变焦。为了能体现内容与内容在空间上的关系，我们模拟摄像机推进和拉远，这就是缩放与推拉，带来了更多的深度与空间体验以及无缝转换。
缩放
推拉
原则用于参照，在理解原则的基础上去打破。这样，动态设计将给我们带来了更多可能性。
尽管一些效果在当下实现上任然有着较高的成本，但相信随着技术的发展，在将来的产品设计中会看到越来越多让我们惊艳的设计解决方案，只是在这个过程中还需要我们共同努力鸭！
参考文献：
https://medium.com/ux-in-motion/creating-usability-with-motion-the-ux-in-motion-manifesto-a87a4584ddc
作者：幺零三
转载请注明：学UI网》UI动效设计原则
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
即把视觉主体做成玻璃质感或者是琉璃质感，并且在排版的时候，通常会把主体压在文字上，通过透明的材质使文字发生折射，创造出强烈的视觉反差。
酸性设计是一种结合了金属质感、镭色渐变、达达主义、机能素材等特性的设计风格，在视觉上会有一种“酸”的感觉。
有很多设计会把这种不锈钢质感的风格统统归结为酸性风，其实我觉得二者的差别还是挺大的，首先，这种不锈钢质感的颜色是黑白灰的，而不是彩色渐变；其次，整个海报的主色调通常也是黑白灰，视觉效果会低调、简约一些，并没有“酸”的感觉。
因电影《蜘蛛侠之平行宇宙》的系列海报，荧光风也火了起来，画风类似街头涂鸦，并采用饱和度极高的对比色搭配，会有一种刺眼、眩晕的感觉，但视觉冲击力确实强，而且很酷、很潮。
弥散渐变是一种通过模糊效果塑造的渐变效果，看上去像似水墨晕开的感觉，而且通常会加上一点杂色质感，使用这种渐变效果来绘制一些简单的插画，有一种清晰、时尚的感觉，常用于食品海报中。
即通过简单的几何图形来绘制纯二维的插画，效果简单而抽象，这种风格一直都是设计师的宠儿，所以并不是最近才开始流行的，但是RGB色彩的使用可以让画面更加具有视觉冲击力，再配合灵活的描边和排版处理，这种风格也变得越来越现代、时尚。
这个备受争议的设计风格，喜欢使用很大胆、很刺眼的配色风格，比如玫红色配绿色，插画很随意，类似小孩的画作，在排版和构图上也很不严谨，完全不符合传统优秀设计的定义，故被称为新丑风，在商业设计中要慎用。
这类设计通常以文字为主，没有图片元素，把主要的文字通过3Ｄ贴图或者扭曲的方式，使其呈现出三维的视觉效果，这与文字通常呈现出来的状态完全不同，所以视觉冲击力也很强。
3Ｄ的世界是最接近真实的世界，所以3Ｄ是大的趋势，而如果把3Ｄ和富有想象力的插画结合起来，那么效果会更加的惊艳和震撼。
在3Ｄ的基础上继续深化就是3Ｄ动效，被经常用在电商设计、线上海报设计和网页设计中。
画面中的图形也是简单的几何图形，但质感通常是用渐变工具做出的、比较粗暴的金属效果，再加上复古的配合和杂色质感，看上去很像上个世纪的海报。
即把早期的电脑、电子设备出现故障所呈现出来的画面和效果，融入到设计当中，通常也会结合蒙太奇手法（拼贴风）使用，常用于艺术设计中。
机能风也不是这两年才出现的，但最近也很火，画面的氛围比较科幻，通常以机器人或者被机械加工过的人物作为视觉主体，标题字体一般会用简洁、硬朗的无衬线体。另外，类似电路板造型的界面框也是机能风常用的设计元素。
– over –
转载请注明：学UI网》13种当下正火的设计风格，潮爆了！
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
蓝蓝设计的小编 http://www.lanlanwork.com