推荐 | 科技的不断发展将给未来的界面设计带来更多的可能性。复杂的语音界面、先进的 AR 或是真正沉浸式的 VR 都会被实现。而科技的进步也对设计师们提出了新的要求。在更加重视体验的未来，设计师们应该作出何种创新以应对变化呢？尼克·索萨尼斯曾在其著作《非平面》中写道：“要走出平面与狭窄，我们需要万花筒般千变万化的视角，我们的维度性和不断变化的能力才得以展现”。希望此文中提供的视角能给设计师们带来启发，跳出传统屏幕的平面来思考未来的界面设计。
快速摘要：
当改变来临，我们总倾向于自然而然地抵制它。我们所拥有的唯一真正的界限，就是我们的大脑告诉我们，事情最好保持原样。在本文中，Gleb Kuznetsov 分享了他的一些想法和观点，即在不久的将来，界面会是什么样子，以及我们能够期待何种非凡的体验。关键词：虚拟现实，用户交互，用户体验，用户界面
在我们做决策的过程中，情感起着至关重要的作用。一秒钟的情感便能改变用户体验产品的整个现实过程。
人类是一种由情感驱动的物种。我们选择一款产品并不是因为它有何意义，而是因为我们认为它能够给我们带来何种感受。未来的界面将会在产品设计的基础上使用情感概念。人们的使用体验将基于智商 ( IQ ) 和情商 ( EQ ) 。
本文试图展望未来，看看未来十年我们将设计什么样的界面。我们将详细研究三种交互媒介：
未来的界面将是什么样子？虽然我们现在还无法回答这个问题，但我们能够探讨未来的界面可能具有哪些特征。在我看来，我确信我们最终会摆脱那些充满菜单、面板、按钮的界面，并转向更加“自然”的界面，即扩展至我们全身范围的界面。未来的界面不会被限制在物理屏幕中，而是会借助五感的力量。正因如此，它们需要更少的学习曲线①——理想情况下，根本没有学习曲线。
①学习曲线：在一定时间内获得的技能或知识的速率，文中指面对未来的界面，用户需要更高效的学习速度，甚至无需学习即可掌握界面的使用方法。
除了使体验更加自然并减少学习曲线之外，对产品创造者来说，情感设计还有另一个益处：它提高了用户对产品的采用率。利用人类对情感的反应能力来创造更好的用户参与度是可能的。
使用语音功能作为主要界面交互方式的产品正变得越来越流行。我们之中有很多人使用 Amazon Echo 和 Apple Siri 来安排日常活动，例如设置闹钟或安排预约。但是，目前市场上可用的语音交互系统中，大多数仍具有一个天然的局限性：它们并没有将用户情感考虑在内。结果便是，当用户与像 Google Now 这样的产品进行交互时，他们有一种在与机器而不是真人交流的强烈感觉。系统的反应是可预测的，并且它们的响应是脚本化的。与这样的系统进行有意义的对话是不可能的。
但是目前市场上也有一些完全不同的系统。其中一个是 Xiaoice（ 微软小冰 ），一个社交聊天应用程序。这个应用程序的核心是情感计算框架；其理念是，首先要与用户建立一个情感连接。Xiaoice 可以动态识别情绪，并通过给出相应回答的长对话来吸引用户。结果，当用户与 Xiaoice 交互时，他们感觉是在与真人进行对话。
Xiaoice 的局限在于它是一个基于文本的聊天应用程序。很明显，如果是基于语音的交互，你可以获得更强烈的感受（ 人类的声音具有不同的特征，例如音调可以传达出强大的情感 ）。
微软小冰跨平台人工智能机器人图片来源：https://www.msxiaobing.com/
很多人已经通过电影 《 Her 》（ 2013 ）看见了基于语音互动的力量。Theodore （由 Joaquin Phoenix 扮演的主角）爱上了 Samantha （ 一个复杂的操作系统 ）。这也让我们相信，未来语音系统的主要目的之一便是成为用户的虚拟伴侣。这部电影中最有趣的事是 Theodore 从未见过 Samantha 的视觉形象——他只能听到她的声音。要建立这种亲密关系，必须产生能够反映出和虚拟伴侣性格一致的回应。这将使系统既可预测又值得信赖。
电影《Her》海报
图片来源：https://movie.douban.com/photos/photo/2166850749/
要实现像 Samantha 这样的系统，科技还有很长的路要走。但是我相信，语音优先的多模式界面将是语音驱动界面发展的下一篇章。这样的界面将使用语音作为主要的交互方式，并在上下文中提供附加信息，以创造和构建连接感。
为 Brain.ai 设计的语音界面实例 （图片来源：Gleb Kuznetsov ）
AR 体验的演变
增强现实（ AR ）被定义为在现实世界基础之上进行的数字叠加，并将我们周围的物体转换为交互式数字体验。我们的环境变得更加“智能”，用户在指尖产生一种“有形”物体的错觉，从而在用户和产品（或内容）间建立更深层次的连接。
AR 的独特之处在于它给予我们一种与数字内容进行物理交互的非凡能力。它允许我们看到以前无法看到的东西，这有助于我们更加了解我们周围的环境。这种AR属性帮助设计师使用熟悉的概念创造新层次的体验。
例如，通过使用移动 AR，可以创造一个全新水平的飞行体验，它允许乘客看到有关她的班次或当前飞行进程的详细信息：
AR 展示空客 A380 的飞行体验。（图片来源：Gleb Kuznetsov ）
AR 帮助我们找到穿越空间的方式，并一目了然地获取所需要的信息。例如，AR 可以为你当前的位置创建丰富的提示。SLAM 技术②在这方面有着出色的表现。SLAM 允许环境的实时映射，并能将多媒体内容置入环境中。
②SLAM 技术：（ Simultaneous Localization And Mapping ） 同时定位与地图构建技术，指机器人在未知环境中从一个未知位置开始移动,在移动过程中根据位置估计和地图进行自身定位，同时在自身定位的基础上建造增量式地图，实现机器人的自主定位和导航。
AR 有很多机会为用户创造价值。例如，用户可以将他们的设备对准建筑物，并在屏幕上了解该建筑的更多信息。它能够显著减少工作量，并通过导航和访问功能使用户获得轻松的情感体验。
在环境中提供附加信息（ 图片来源：Gleb Kuznetsov ）
我们周围的环境（例如墙壁或地板）也能成为交互的场景，在过去这仅限于通过智能手机和电脑实现。
下面的概念正是如此，它使用物理对象（白墙）作为画布，来表现那些通常用数字设备来传达的内容：
互动墙的概念——现实世界之上的数字叠加（图片来源：Gleb Kuznetsov ）
在一个名为 “HYPER-REALITY”（ 超真实 ）的一个网站中，作者 Keiichi Matsuda 制作了一段视频。视频中物理世界和数字世界已经合并，用户被大量信息淹没。
视频：
https://www.youtube.com/watch?v=YJg02ivYzSs&feature=youtu.be
科技允许我们同时显示几个不同的对象。但是当它被误用时，很容易造成过载。
信息过载是一个严重的问题，它会对用户体验产生负面的影响。避免信息过载将成为 AR 设计的目标之一。设计良好的应用程序会借助 AI 的力量将那些与用户无关的元素过滤掉。
当系统根据用户的需求和期望来实时管理内容和功能时，数字体验的个性化便会发生。很多现代移动应用程序和网站使用个性化的概念来提供相关的内容。例如，当你浏览 Netflix 时，你看见的电影列表都是基于你的兴趣进行个性化推荐的。
AR 眼镜能够创建新的个性化水平，即“高级的”个性化水平。由于系统能“看见”用户所看见的内容，因此可以利用这一信息来提出相关建议，或在环境中提供附加信息。想象一下，你很快就将戴上 AR 眼镜，并且传输到你视网膜的信息是根据你的需求量身定制的。
视频：
https://www.youtube.com/watch?v=eQ2OKB026Wc&feature=youtu.be
AR 体验具有天然局限性。作为用户，我们与内容之间有一条明晰的界线，这条线将一个世界（ AR ）与另一个世界（现实世界）分离开。这条线让人感觉 AR 世界显然不是真实的。
你可能知道如何去解决这一限制，即使用虚拟现实（ VR ）。当然，VR 确切来说不是一种新媒介，但直到最近几年，科技才达到能让设计师们创造沉浸体验的高度。
沉浸式 VR 体验移除了真实世界与数字世界间的屏障。当你戴上 VR 耳机时，你的大脑很难分析出你接收到的信息是否真实。电影《 头号玩家 》（ Ready Player One ）很好地解释了在不久的将来，VR 体验会是什么样子：
视频：
https://www.youtube.com/watch?v=cSp1dM2Vj48&feature=youtu.be
以下是设计师们在创造沉浸式虚拟环境时需要记住的几点：
1.写一个故事有意义的 VR 在其核心有一个强大的故事。这就是为什么在你开始设计 VR 环境之前，你需要为用户旅程写一个故事。“故事板”这一强大工具可以帮助你完成这一工作。使用故事板，可以创造一个故事，并检查所有可能的结果。当你检查你的故事时，你将看到何时以及如何利用视觉及听觉线索来创造沉浸式体验。
2.与角色建立更深层次的连接为了使用户相信 VR 世界中他们周围的一切都是真实的，我们需要在用户与其扮演的角色间建立联系。最明显的解决方案之一是，使用户的手部表现成为虚拟场景中的一部分。这一表现应该是实际的手——而不仅仅是一个被操纵的复制品。考虑不同的因素（例如性别或肤色）是至关重要的，因为这让交互更加真实。
用户可以看到他或她的手，并看到自己作为一个角色出现（来源：leapmotion ）
为了建立此连接，也可以将现实生活中的物品带到 VR 环境中。例如，一面镜子。当用户看向镜子并看到其反射出他们自己的角色时，用户和虚拟角色间的交互会更加真实。
VR 用户看向虚拟的镜子，并在 VR 环境中看到他自己的角色。致谢：businesswire
3.使用手势代替菜单
当设计沉浸式 VR 体验时，我们不能依赖传统的菜单和按钮。为什么呢？因为显示菜单比较容易打破沉浸感。用户将会知道他们周围的一切都不真实。设计师们需要依靠手势来替代传统菜单。设计界依然在为手势的使用制定通用语言，参与这项活动是有趣且令人兴奋的。但棘手的部分是如何设计出用户熟悉且可预测的手势。
Hovercast VR menu 是将现有的交互概念重新用在 VR 体验的一次尝试。不幸的是，这个概念会打破沉浸感。新的媒介需要一个新的交互模式。
4.与 VR 环境中的元素交互
为了创造一个真实的环境，我们需要使用户能够与现实中的物体进行交互。理想情况下，环境中的所有物体都可以被设计成允许用户触摸和观察它们的模式。这样的物体会起到刺激作用，并帮助你创造更具沉浸感的体验。触摸对于探索环境非常重要，婴儿在刚出生的那些天接收到的最重要的信息便是通过触摸获得的。
5.在 VR 中分享情感
VR 真正有机会实现社交体验的新高度。但为了实现它，我们需要解决一个重要问题，即将非语言的提示带入交互中。
当我们与他人进行交互时，我们获得的信息中有很重要一部分来自肢体语言。惊喜、厌恶、愤怒——所有这些情绪都在我们的面部表情中。在面对面的交互过程中，我们通过眼睛的区域来推断信息。当人们在 VR 环境中互动时，为了创造更加真实的交互，提供此信息是非常重要的。
好消息是，头戴式设备（ HMD ）很快就将涵盖情感识别。在虚拟现实中，几乎所有人与人之间的互动都受益于面部表情。
在 VR 空间中分享情感（来源：MITReview 的 Rachel Metz )
6.为 VR 环境设计合适的音效和音乐
音频是沉浸式体验中的重要组成部分。如果不为环境设计音效，就不可能创造出真正的沉浸体验。声音既可以被当作背景元素（即环境中风的声音），也可以是指向性的。在后一种情况中，声音可以作为提示使用——通过播放具有方向性（声音来自哪里）和距离（可以将用户注意力集中在特定元素上）的声音来提示用户。
在为 VR 设计音频时，制作 3D 音效是基础。2D 音效 VR 中表现不佳，因为它让一切都显得太平。3D 音效可以使你听到来自四面八方的声音——前、后、上、下——任何地方。你不需要使用专门的耳机来体验3D音效，通过头戴式设备的标准立体扬声器便可以实现。
头部追踪是良好声音设计的另一个重要方面。让声音以逼真的方式表现是至关重要的。这就是为什么当用户移动他的头部时，声音应该根据头部移动而改变。
7.预防晕动症
晕动症是 VR 的主要痛点之一。在这种情况下，视觉感知的运动与前庭系统③的运动感知之间存在分歧。在体验VR的过程中，使用户保持舒适是至关重要的。
③前庭系统：前庭系统是人体平衡系统的重要组成部分，它具有特殊的感受器，能够接受适宜的刺激，经过与其他感觉信息（如视觉信息、其它本体觉信息）的整合、加工等处理后，再经多条神经通路把这些信息传送到脑内更高层次的中枢，进行高层次的加工处理。
关于VR中导致晕动症的原因，以下是两种主流理论：
根据这一理论，晕动症的发生是由于预期运动与实际经历的运动在感官上不一致。
在《 The VR Book: Human-Centered Design For Virtual Reality 》一书中，作者 Jason Jerald 提到，晕动症的发生是由于眼球的非自然运动，而这是保持场景图像在视网膜上稳定所必需的。
以下是一些提示，有助于避免用户使用呕吐袋（避免晕动症的发生）：
当我们考虑产品设计的当前状态时，很明显我们仅看见冰山一角，因为我们局限于平面屏幕。我们正目睹人机交互（ HCI ）的根本转变——重新思考数字化体验的整体概念。在接下来的十年中，设计师们将打破这层玻璃（我们今天所知的移动设备时代）并转向未来的界面——复杂的语音界面、先进的 AR 和真正沉浸式的 VR。当创造新的体验时必须要明白，我们唯一的界限是我们的大脑总告诉我们，应该保持原样。
原文标题：Designing Emotional Interfaces Of The Future
原创作者：january
原文链接：https://www.smashingmagazine.com/2019/01/designing-emotional-interfaces-future/
翻译作者：阿钦
授权获取：张聿彤
文章审核：王翎旭
文章编辑：王鸿飞
该译文并非完整原文，内容已做部分调整。如在阅读过程中发现错误与疏漏之处，欢迎不吝指出。如需转载，请注明来自 三分设
作者：三分设 来源：站酷
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系。
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
四个色彩趋势：霓虹渐变、轻量渐变、高饱和度色系、梦幻色/幻彩色系。从现实图库入手，总结出该色彩趋势对应的关键词以及色彩特征。对部分案例进行了解析，更深入地了解其运用方向以及实现技巧。希望这些内容可以起到抛砖引玉的作用，欢迎大家探讨。（图片来源于网络，原作者可提供原图链接进行标注）
现实生活中，炫彩夺目的霓虹灯效果常被应用于广告牌、灯箱的展示中，在暗夜的烘托下，霓虹灯展现出光影陆离的光影效果，吸引着人们的眼球，留下强烈的视觉冲击。如图所示，暗夜中的霓虹灯效果，为霓虹渐变的现实灵感来源。
夜色下的霓虹灯
1、以紫色、蓝色、洋红为主的冷暖色搭配；
2、整体颜色对比度高；
3、以冷色调为主，局部暖色调，搭配霓虹光感对比色点缀；
4、背景用暗色调更能凸显霓虹效果；
5、根据霓虹灯的灵感，采用了霓虹灯发光的效果。
近年来，强视觉冲击的渐变色被广泛应用在各个领域，包括宣传海报、综艺节目、游戏等等，其中最为瞩目的是霓虹渐变，设计师通过将这种高饱和度的渐变色与暗色调背景结合，形成强烈的视觉冲击，突出主体，渲染氛围，使整个画面的色调更加活力化、年轻化。
最近较火的综艺节目“这就是街舞”，其宣传海报通过高饱和度的霓虹色渐变，与人物及背景形成强明暗对比，结合对人物本身的光影细节刻画，突出人物主体，增强画面视觉冲击力。
2020年7月，由Veewo Games发布的一款游戏「霓虹深渊」，画面以紫色、蓝色、洋红的冷暖色搭配为主基调，通过明暗色的对比，以及大面积的紫色光影渲染氛围，营造出极强的未来科技感，而霓虹光感的使用以及涂鸦风格的融入，使得游戏更加时尚、自由。
页面整体以紫色，蓝色，洋红为主，冷暖色搭配，营造出层次感，活泼生动且年轻化；偏暗色调的霓虹渐变色背景烘托出专题页的内容主体，使得页面运营氛围更好、更强；同时在一些重要的、需要用户操作点击的部分使用了暖色调的霓虹色渐变，使得内容主体在冷色调的环境下更为突出，提高了用户体验。
以暗色调背景作为烘托，搭配紫色、蓝色、洋红为主的冷暖色，是霓虹色渐变经典的应用方式。在暗色背景下运用霓虹色渐变，通过明暗的强对比突出页面关键元素，对用户进行视觉引导，同时丰富页面层次，增强页面的视觉冲击力及艺术感染力。
暗色的背景与撞色霓虹搭配的插画手法使得界面看起来更加的酷炫和高科技，整体页面在霓虹色渐变的使用下更富层次性。通过主体与环境色的呼应、冷暖明暗的对比，展现出主体光源对空间层级的变化效果。此组合用来作为web头部页面，冲击感十足，科技感也非常的棒。
通过高饱和度的霓虹渐变色彩，结合外发光、叠加、模糊等多种技法，塑造出更加丰富的光影效果，不仅增强图标视觉表现力及空间感，更凸显了图标的风格化与趣味性。暗色调背景的烘托，使霓虹色渐变图标更加有质感，更加突显。
通过大面积的霓虹色渐变结合迷彩渐变的绘制手法，构建不同色彩鲜明的矩形图案，暗色调的背景烘托与颜色用冷色为主暖色为辅、点缀，画面感极强，极具视觉冲击力。
霓虹色渐变在暗色调的背景烘托下，撞色的冲击感使得画面更加具有科技感、潮流感；对于霓虹色渐变使用比较频繁的赛博朋克风、故障风，也是现下较为流行的风格，通过丰富鲜明的色彩与背景作强对比，营造出极具视觉冲击力的画面效果；同时霓虹渐变色也被广泛的使用于app、web、插画等领域，虽然它出现已久，但其大胆、强烈的配色风格给画面带来的冲击感以及潮流、自由感，使得它仍然成为当下一种比较流行的色彩趋势。
通过对2021年色彩趋势分析发现，渐变色的运用仍然非常流行。相较之前运用较多的强视觉冲击类——对比色渐变，轻量渐变在色彩运用上变得更加理性与克制。主要特征为轻量、柔和、层次递进，营造一种舒缓、治愈的沉浸感。
色彩上的渐变是指某个物体的颜色从明到暗，或由深转浅，或是从一个色彩缓慢过渡到另一个色彩，充满变幻无穷的神秘浪漫气息的颜色。根据强弱程度分类，渐变主要分为强渐变和弱渐变，轻量渐变属于弱渐变范畴。在过渡的过程中，轻量渐变特点为渐变色彩邻近，幅度轻柔，节奏缓慢，融合感和细腻感较强。
轻量渐变是一种简约且高度可用的元素，它可以创造出一些时尚的氛围，但是又不会有信息过载的担忧，这使得轻量渐变成为一种富有感染力又非常实用的设计解决方案。轻量渐变特点之一为明度高、饱和度低，色彩轻量而透气。在轻量渐变的使用过程中，同色系、邻近色系较多，其过渡自然柔和。
透过今年各大设计网站上的作品不难发现，较多的视觉设计师将轻量渐变的色彩趋势与毛玻璃的质感趋势结合，运用在界面中。下图画面中，轻量渐变的柔和属性搭配上毛玻璃的朦胧感，营造一种视觉感官的舒适感与呼吸感，已成为2021年UI界面设计趋势之一。
当轻量渐变与3D碰撞时，则会产生更加趣味的视觉化学反应。画面中使用的3D效果可以最大限度还原现实世界的材质与光效，呈现极具脑洞的“超现实”效果，为用户呈现不可思议的异度空间，吸引用户眼球。画面中的背景使用了轻量渐变来创建出多彩的模糊背景，为3D素材创造出另类维度的空间感，增加了画面深度，使设计更具真实感。
自如app最新的首页风格采用轻量渐变+毛玻璃效果，金刚区应用最为明显。图标的色彩选用低饱和邻近色，遵循3色系原则，使得整体色彩统一且不失丰富。从单个图标看，色块部分采用单色渐变，通过easing gradient插件工具调整渐变值，以达到最佳效果。毛玻璃特有的通透感，会将渐变色块透映出来，故制作毛玻璃效果时，需添加环境色使其融合。
两个启动页中均采用高明度、低饱和度外加一些毛玻璃微透质感的表现手法。第一个界面主要传达安全、简洁、可靠的情感，第二个界面则表现的是活动主题的梦幻感。这两个页面虽目的不同，但却均体现了柔和、细腻、轻量感的视觉感。设计师发现，使用者在经历过传统大色块、大面积、较强冲击力渐变的视觉后往往更加想追寻视觉上的宁静，所以视觉负担相对较小、相对轻量的微渐变色彩和可以利用微透质感减弱色彩冲击力的毛玻璃相结合的视觉效果越来越多地被运用。
在界面背景中，使用少量的邻近色渐变来做通栏背景，使整体氛围更加柔和、富于层次感，同时起到强调头部的作用。卡片处采用透明毛玻璃效果，利用毛玻璃特有的通透感，透映出底部渐变，使卡片兼具质感与美感。
卡片中采用同色系的轻量渐变效果，营造融合、舒适的视觉观感。卡片的颜色根据色彩情绪进行选取，增加辨识度，进而增加点击率。
渐变之所以每隔几年就会成为设计流行趋势，很大程度上得益于它自然的特征和普遍的吸引力。今年盛行的轻量渐变，更多从用户的角度出发：减轻界面给用户带来的视觉负担，为其提供更轻盈的视觉体验。在应用的过程中，轻量渐变与毛玻璃、3D等流行表现形式相结合，可创造出全新的、有趣的视觉体验，不仅在外观上起到美化的作用，在功能上也达到了强调、醒目的作用。
在过去的两年中，高饱和度色系的应用已经是重要的趋势之一。年轻人作为移动互联网的主力军，他们青春，活力，有朝气，因此，代表年轻活力群体的鲜艳，高饱和度色彩成为视觉主流趋势之一。偏高饱和度色彩更易吸引注意力，烘托主体，影响用户情绪，提高品牌的识别性，增强品牌影响力。
1、颜色饱和度高，艳丽；
2、色彩丰富多样；
3、视觉冲击力强；
虽然高饱和色彩视觉冲击力强、更容易传递情绪，但在使用时仍需克制使用。原因在于：1.过高的饱和度，容易产生视觉疲劳；2.高饱和度的颜色并不适合所有的用户群体。
这里说的高饱和度的颜色，并不是一味追求高饱和刺激性颜色，我们在使用时候，仍需对颜色的明度，饱和度进行合理设置，这样才能保证我们视觉上的舒适性。
在综艺海报中，高饱和度的半插画+实物的表现形式，让画面极具趣味性和视觉吸引力，获取了大批流量。
偏高饱和度的色彩，在UI设计应用中，往往更容易脱颖而出。而一些品牌的品牌色往往就是偏高饱和度的颜色，比如UI设计中品牌色的运用，在一定程度上可以将品牌影响力扩大化，品牌影响力，也会让用户增加信任感。
例如，微信的绿色，饿了么的蓝色，美团的黄色，淘宝的橙色......等等这些品牌色，都深入人心。
高饱和度品牌色
活动营销类弹窗，以及运营类的H5，运营专题，促销类的BANNER中经常运用高饱和色的视觉刺激以达到强调、引流的作用。
高饱和度色系以其绚丽、强视觉冲击力等特点，在UI设计中一直被广泛的应用。它可以更好的营造氛围、传递情绪、增强视觉层次结构、提高品牌的可识别性。撞色、插画+半实物、手绘等各种新式流行的表现手法使得高饱和色的运用上更加丰富多样。
广义上，我们将富于想象力的色彩，或者说体现人生丰富多姿的色彩称之为“梦幻色彩”，像泡沫、像天使、 像梦境、像糖果...
梦幻色在颜色面板中处于中间偏上部分，即特点为中纯度、高明度。
配色方面和谐，视觉效果相对温暖柔和。常以简单、干净的背景为衬托，烘托主体物以及主色调。色彩场景偏向幻想、天马行空的自由世界，给人以浪漫的色彩感受，容易令人沉浸在画面的温暖氛围中。
现今，色彩作为重要的视觉语言而被越来越多的设计师所关注，而在实际设计作品输出当中，颜色也扮演着将产品理念传递给用户的媒介⻆色。可见，完整的设计作品是离不开色彩的表现的，那么了解色彩趋势就会显得尤为重要。而在众多颜色中的梦幻色，更是极具前沿性和突出感的色彩。
色彩倾向明快轻量，采用颜色烘托主题的表达方式，较能抓住用户眼球。塑造了色彩多变的视觉风格，适用于多种品牌调性，给用户温暖、轻松且焕然一新的感觉。
在下图插画案例2-绚丽配色中，能发现绚丽配色类插画通过光的运用，让画面呈现出细节更丰富的视觉效果。 一些光晕的重叠使用，使得画面变得朦胧，更显梦幻特点。另外，梦幻色还可以营造神秘的氛围，在网站首页使用的梦幻色彩，搭配引人入胜的画面，神秘感的体现更加突出。吸引用户的点击，从⽽提升⽹站的浏览量，实现流量变现。
在材质-塑料质感中，大面积的梦幻色彩渐变，形成很强的视觉冲击。塑料的质感配合灯光与彩色渐变，显得非常梦幻；透明的气泡材质，整体质感给⼈轻盈、透亮。这种流动的色彩呈现出了源源不断、生命不息的美好愿景，带给观者美好的想象。
梦幻色应用于3D物体中，整个画面更加丰富多彩，温暖、轻松氛围下的物体仿佛将从屏幕的束缚中挣脱出来，拉近了画面与观者之间的距离。
这是一组描绘田野间的手绘插画，为观者提供感观上的愉悦。一切事物在自然中的蓬勃生长以及梦幻色下烘托出的神秘感，使得整体画面有种超脱现实、游离人生的美感。形成了以自然景观为主导的唯美风格。
虽然梦幻色没有特别靓丽夺目的色彩特点，但在梦幻色的使用中所烘托出的特定氛围，不但突出了不同产品的特点，也更加满足了用户的情感需求。色彩趋势必然与时代潮流以及用户喜好紧密结合，作为设计师的我们需要了解，并能与我们的设计产出进行结合。
日新月异的生活是色彩趋势的灵感来源，这使得色彩的流行趋势不断更新变化着。作为设计师的我们，要保持一颗敏锐的心，不断从现实生活中捕捉灵感，将自然赋予我们的宝贵灵感运用于作品中，从而增强设计的原创性，给设计行业注入新鲜血液。其次，趋势是方向，不能盲目追随，需要不断思考总结沉淀升华，并将其合理运用至自己的作品或项目中。设计就是在实践中不断探索与总结！这是我们写这篇文章的初衷，最后也欢迎大家积极探讨。
作者：贰元 来源：站酷
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
“ 设计思维是一种以人为本的创新方法，它借鉴了设计师的工具包，整合了人们的需求，技术的可能性以及商业成功的要求。”
设计思维
关于设计思维的文章我们也看过不少，也听过大佬们讲什么是设计思维，可都停滞于带我们了解初识阶段，并没有教到我们怎么去践行设计思维。设计思维 (Design Thinking) 是一种设计方法，提供基于解决方案的方法来解决问题。解决方案是什么？究竟要解决什么问题？如何去解决？在参考了大量的文献后，更多的是在阐述设计思维是什么，具体的分类和步骤，更偏向于介绍和展示相关的知识。比如 Google 的 Design Sprint 方法论，比如 IDEO 首席执行官 Tim Brown 提出的可行性三原则，比如斯坦福大学哈斯普拉特纳设计学院（d.school）提出的五阶段设计思维模型，而根据 d.school 提出的五阶段设计思维模型，大部分公司都基于这个模型进行变量修改后作为自己的设计思维模式，这五阶段设计思维模型为：同理心 (Empathise) - 定义 (Define) - 假设 (Ideate) - 原型(Prototype) -测试 (Test) ,几乎大部分的设计思维都基于这五阶段模型做的改变。
用同理心代入 (Derivation) 定义，用同理心建立 (Build) 原型，通过原型反推 (Reverse) 原型的成立，最后用测试结果证实 (Validate) 定义的正确性。
现在对设计思维有了大致的认识，这里也不花太多篇幅去描述，但是全部看下来感觉自己脑袋晕乎乎的，那究竟我们在具体的工作学习中，要如何尝试性代入且应用设计思维来做设计呢？通过一些项目的经验我总结出关于如何运用设计思维做设计的方法，就是通过寻找产品之间的共通性和异样性，深挖出关键性的问题所在，最后去解决这个关键性问题。
共通性与共同性
共通性和共同性在意义上有根本的区别，共通性是指相通或者适用于各方面的东西，比如共通的道理，共通的方法；共同性则是指彼此都具有相同的性质，比如大家共同的目标，共同的性格；产品与产品之间也是有共通性和共同性的，只有找准产品的共通性，才能深度挖掘到核心问题的所在，从而通过设计手段解决核心问题。
与同类竞品分析不同的是，竞品分析需要通过大量且快速的对比找到各类产品之间的共同处和差异处，而寻找产品的共通性，则需要对逐个产品进行深度剖析，挖掘共通的点 (Point)，然后把这个点透过三原则：可行性(Feasibility)，可取性 (Preferability) 和创新性 (Innovativeness)分析来设计产品解决问题。一款产品或者某个功能模块，只有在可行性和可取性中产生交集时，才可以在此之上进行创新设计，可行性可以理解为开发可实现，或者和业务需求没有冲突的模块，可取性是指性质上可以取用。
举一个简单的例子，某个模块希望通过弹窗的形式提升某二级页面的跳转率，那么提炼出业务诉求关键点：
1.提升二级页面的跳转率；
2.通过弹窗的形式展现；
那么可取性就是【弹窗】这个 Piont，而可行性同样为弹窗形式，那么他们共同的交集之处就是弹窗顶部的氛围层和行动点，设计师就可以在这两个交集处做自己的创意发散，比如在弹窗头部氛围做的很强烈吸引用户，或者把行动点设计成带有动效的按钮以此来吸引用户点击等等。产品设计中通过共通性挖掘问题，而承诺和顾客的体验达成共同相通，这是为了赢得用户信任和尊重的需要。
产品的共通性
做产品第一步就是找出同类竞品之间共同之处，把他们共同的地方记录下来并做出统计。比如我需要做一个关于 UGC(用户原创内容)的内容社区，那么我前期得搜集同类竞品，比如 MONO、新草、Lofter等等，找出他们共同的地方。首先来解释为什么要寻找共同的地方，根据模块出现的频率排列出模块的优先级，这是一款产品从零到一必须要经历的阶段，但往往很多产品到这一步就停止了，然后像堆砖砌瓦一样，它有的我 Duang 地加上去，另一个它有的我也要 Duang 地加上去，我全都要！最后导致产品做出来架构不清晰，目标不明确。这就是为什么老有设计师疑惑：为啥总是左改一版右改一版业务方/老板就是不满意，这在战略层就出现了的问题，跳到执行层上改来改去，肯定怎么改都不会有一个满意的结果。这时候就需要将搜集到共同的地方做分析，找出它们各自存在的性质，然后挖掘产品的共通性。
通过各类竞品搜集下来可以看出关于社区模块的内容大致分列为：话题标题占比18%，统计信息占比18%，话题说明占比16%，心智氛围占比8%，内容分级占比4%以及其他内容填充占比36%，具体归类成A.标题&统计、B.话题说明、C.心智氛围、D.分级信息和 E.其他信息，然后排列优先级顺序为：A>B>C>D>E，最后一步就是分析各自独有的性质：
A.标题&统计信息：话题标题和统计信息属于必要模块，标题显示话题主题，统计信息展示话题关注度等信息，增强话题氛围；
B.话题说明：是对话题进行的补充说明，也可增设相关活动等文案；
C.心智氛围：心智氛围的增设用于对话题主题的传达以及突出用户的参与感；
D.分级信息：分级信息对用户的筛选起到至关重要的作用；
E.其他信息：其他信息皆为用户提供UGC或者平台提供PGC。
而这类性质可以统称为社区类模块产品的共通性，提炼出产品的共通性有什么用呢？如果一个社区类产品上线后发现用户参与感热度不是很强，那么就可以从心智氛围模块去分析是否问题出在这里，是否应该加强话题的心智氛围，或者是否可以通过投资邀请专业的人士通过生产 PGC 来带动社区的热度等等，只有先去了解产品之间的共通性，然后找出关键点提炼出关键问题，在战略上提出解决方案，才能从根本上解决产品问题。
就好比一个人捂着肚子冲进诊所，医生首先了解捂着肚子的性质，是阑尾炎？是胃痛？还是其他的疾病，只有先熟悉各类疾病的性质原因后，通过排查筛选找出根本的原因，才能提出是做手术还是药物治疗的解决方案；同理，回到之前的那个问题：为啥总是左改一版右改一版业务方/老板就是不满意，都没查出究竟是什么原因导致肚子痛，就开始开刀手术或者胡乱吃药，运气好了胡乱吃药吃对了解决了，运气不好被折腾凉了，最后的结果就是产品模块下架撤离，所以无论是从零到一的产品还是业务改版，都需要找到产品之间的共通性，才能找出具体的解决方案。
设计细节的共通性
我们不难发现市场上很多出自于同一业务下的产品都有着自己的设计细节，而在这些母舰上都有着各个模块的附属模块，比如在QQ产品里的兴趣部落、NOW直播、微视等模块，比如在淘宝产品里的天猫、聚划算、飞猪等模块，那么在这些母舰下的附属模块，在设计细节上自然而然要和母舰保持一致性。举个很明显的例子：手淘设计语言中卡片的圆角为24px，手猫设计语言中卡片的圆角为10px（基于750px尺寸下），那么手猫其中的模块自然是要遵循手猫的设计语言——圆角的尺寸为10px，但是如果这个模块获取到手淘透出的资源，那么在设计上，就要遵守手淘的设计语言——圆角尺寸为24px。
那么你会问了，这样最多只是相同啊，有什么性质意义呢？这和共通性又有什么关系？不同的产品所面向的用户群体是不一样的，所以主打心智也不一样，设计上的细节传达给用户的心智一样的不同。众所周知，淘宝主要面向的用户群体是大众的，天猫主要面向的用户群体是追求更高质量或者品牌的，那么在细节上，24px的圆角卡片带给用户的心智是友好亲切的，10px的圆角卡片带给用户的心智是偏向更精致更高质感的；其次，如果用户通过手淘的场景进入天猫的模块，一会儿24px的圆角一会儿10px的圆角，长时间下去用户自然会分不清当前场景是天猫还是淘宝，这是在产品一致性上做的共通性协调工作。所以如果是同类系的产品或者是模块，在设计细节上一定要注意，保持模块与模块之间的共通性。（有的人可能不会注意到这些设计细节，设计细节既然是细节，个体本身影响力不是很大，很容易造成忽视，但是如果个体增多形成量级的话，造成的视觉影响是很直观的）
差异性
差异化策略是从改变产品的“绝对差异化”到改变认知的“相对差异化”，越来越着眼于“人”的视角。在如今发展迅猛的网络营销时代，“人”的因素更是被置于产品运营和品牌营销的核心位置，不过，这并非表明“定位”理论变得越来越重要了。这点做品牌的朋友相信有更多的感触，但是无论你是做产品的，还是做品牌的，要想脱颖而出，首要的策略就是“差异化”。大家都知道平台产品的最终目的是实现商业价值，可是如何实现商业价值，就是要通过产品之间的差异化来寻求突破点。
产品的差异性
依旧拿上面那个社区产品当例子，同类对比我们发现，大多数的社区产品更多的是流量引进来营造平台氛围，无论是通过 PGC 的形式还是对内容的打造，但是在商业价值化层面上则很少有渠道介入。那要如何通过设计表达出差异化并且实现商业价值，就需要对实现商业价值有一定的了解。当社区把流量引进时，实现商业价值常见的几种方式有：
1.广告宣传的推广；
2.电商平台的转化；
3.流量引导产品模块的介入等等。
以电商产品举例，我这个社区模块将流量引进后，需要致使用户通过 UGC 或者 PGC 种草的内容去购买所对应的种草商品，知名的社区电商产品的确也是这样做的，比如小红书、Lips等等，但是不难发现此类产品都有一个共同的弊端：用户需要先记住种草商品的内容后，自行去购买采购商品，这样可能就去了淘宝、京东等等更加知名的电商平台，最后为他人做了嫁衣，那么这一块就是关键突破点。
通过寻找差异性找出关键突破点问题所在，并推导出相关的设计策略：平台可以通过招商的形式发布社区话题，并且可以通过“参与话题送 xx 额度的优惠券”、“参与话题并分享给好友获取 xx 限量商品”等形式刺激用户参与话题，并且也给用户很方便的渠道入口直接进行商品购买，防止流量丢失为他人做嫁衣；商家通过入驻平台提供话题，平台流量导入参与话题，商家通过参与话题给予优惠等活动引导用户购物，用户通过平台参与话题了解品牌获取参与感；类似线下商场搞一些活动，品牌店给一些优惠券之类的当作参与活动的奖励，然后客人可以去到品牌店消费，最终实现三方获利的商业闭环！
不难发现，通过寻找产品之间的差异性来挖掘出关键点问题，然后在此基础上解决问题做出创新。追求差异化，是产品基于竞争角度永恒的主题。这种差异化甚至贯穿了产品生命不断迭代的全程，也贯穿在与品牌相关的一切要素中——产品、包装、广告、价格、渠道、视觉、代言人等等，每种要读的动态演变，都是一种创新，具体需要那种要素在哪些时刻做出何种改变，既要考虑到竞争，也要敏锐觉察用户的需求、态度和行为的变化趋向。
设计细节的差异性
设计细节用共通性同样也有差异性，而细节的差异性有时候往往能起到产品的关键性作用。这里使用之前做的一个实际项目做例子：淘抢购模块 v4.0.1的改版。（保密性原则不透露任何数据）因为淘抢购 v3.9样式太过老旧，根据手淘语言更新的淘抢购 v4.0在投放过程中发现，成交量和成交率比 v3.9降低了很多，所以在 v4.0.1的改版中最主要的是解决这个问题。
根据用户采样调研数据分析我们筛查和对比发现，成交量和成交率下降的根本原因是用户在页面丢失，而用户丢失的原因则是因为淘抢购 v3.9首屏的 Sublist 商品坑位的透出比 v4.0首屏的 Sublist 商品坑位多出一个，对的你没看错，就是因为这么一个商品坑位的细节原因，导致 v4.0的成交量和成交率比 v3.9降低了很多，以至于引起重视从而需要解决问题。
找出关键问题后就要去解决问题，那么如何解决问题是关键。此处需要保证在不改变新版设计语言的基础上对首屏 Sublist 的坑位透出做调整，那么只需要坑位透出3.5～4个坑位就能到达预期的效果，如何在有限的空间里解决这个问题，做了很多版本的尝试。
通过各类尝试得出ABCDEF六种方案后，这时候需要从设计细节的差异性逐一分析然后进行取舍：
A.此方案为目前 v4.0实行方案，可以明显看出单屏的效率只能展示3个商品坑位，因此是造成用户在浏览的过程中会流失的根本原因；
B.此方案计与 v3.9通栏无太大差异，所以问题就是：1.版式陈旧老化；2.信息过多整体会导致页面看起来杂乱无章；
C.此方案除了版式陈旧信息过多问题外，图片变小导致用户对信息细节辨识度不高，直接pass，所以通栏的方案在当前场景中完全不可行。
D.此方案基于 v4.0上，缩进了卡片内信息的距离，更加突出“抢购”的紧凑感氛围，同时单屏能显示3.5个商品坑位，解决了屏效的主要问题，同时数据显示比通栏式设计曝光点击率有所提升，也符合淘宝的设计风格规范，但是单卡片样式商品与商品之间分割感太强烈；
E.此方案将所有商品坑位包含在一个大卡片内，解决了商品与商品之间的分割感，商品信息细节也比小卡片展示得更完全，但存在问题就是：每个商品之间的间隔存在的分割线导致间距过大，屏效又回到旧版只能展示3个的问题，不能解决主要问题，所以pass；
F.此方案在大卡片设计上进行了优化，取消了分割线的设计，缩进了商品与商品之间的间距，解决了小卡片式商品与商品之间分割感强烈的问题，图片的大小信息细节也能给用户良好的体验，最主要单屏显示3.5个商品坑位，解决了最主要的问题，也符合最新的淘宝设计规范和风格，此方案为最佳方案。
最后采用了F方案，也就是目前我们线上看到的效果，在灰度上线和 A/B test 后数据反馈，淘抢购 v4.0.1的成交量&成交率相比 v4.0有很明显的上升甚至超出了 v3.9的数据，这是通过寻找设计细节上的差异性来解决问题最好的案例。再次证明：设计思维不应被视为一种具体而不灵活的设计方法，细节的差异性有时候往往能起到产品的关键性作用，所以设计师从设计层面上去解决问题的时候，要不断通过寻找产品之间的差异性，培养自己设计思维中的差异性。
动效差异性的运用
产品设计中，动效作为一种辅助手段，帮助设计师传达具象的意愿，帮助开发理解交互手段，是一种锦上添花的表达；前面的内容更偏向于战略层，而动效则偏向于表现层，同一种想表达的心智不同的样式表达的效果完全不同。如何做好动效在产品中的表现，我们就需要了解不同的动效所带来的性质传达。
举个例子，某个弹窗需要对行动点通过动效的展示进行强化，但是同样是强化行动点，如果产品是需要体现出质感、高端等心智时，那么在动效上的处理上就应该体现出高品质高质感的动效，如果产品主要用户为女性或者年龄偏小的用户，则需要体现出可爱、亲切感的心智。那么在动效的选择上，就需要通过平时对动效的收集积累，然后熟悉不同的动效所表达的性质，才能从中选择最优的方案。比如 Q弹缩放的动效看起来亲切感更强，闪光的按钮看起来质感更加强烈一些。
动效向来是产品的辅助，动效应该是克制的，只有了解动效的性质，通过动效的差异性，完美地契合产品，才能发挥出动效的最大作用。
总结
在如今网络时代和社会化媒体的大潮下，产品设计差异化的力量不仅仅基于竞争，更要基于消费者需求的敏锐察觉和捕捉；设计思维的共通性和差异性，在今天也比以往任何时代都显得重要。识别和竞争的需要决定了产品一定要差异化，而诚信和责任要求产品必须做到共通，差异性是产品价值的基础，而共通性则是产品价值的保障。设计思维不应被视为一种具体而不灵活的设计方法，而是需要设计师们通过自己的经验积累，刻意地培养设计与产品之间差异性和共通性的意识，总结归纳出一套适用自己的设计思维。
作者：雨灰 来源：站酷
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
随着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设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
2022 年即将过半，疫情在家的我们重新花一些时间，回顾今年最引为人注目的一些设计趋势，有些已经变成现实，有些可能即将会发生。在过去的这十几年里，全国的互联网和移动互联网行业蓬勃发展，引发了 UX / UI 行业的火爆，无论是在设计技术方面还是在设计实践方面维持着快速发展状态。设计探索受到了前所未有的关注。创新也永不停止，正在向各个方向延伸——有的是昙花一现，有的是重塑想象，有的却循环往复。
下面我们将更详细地向你探讨一些 2022 年的设计趋势。
The Badass Project 捣蛋派计划
过去几年里，大字排版的趋势越来越明显，字体尺寸也在增加！接下来，字体更大且几乎没有图像的时尚 英雄形象 网页设计，将成为主流风格。
（英雄形象在网页设计中是一个特定的网页横幅，通常是一个包含与内容相关的大图像页眉）
设计师和用户都越来越习惯在登陆页面前面和中心位置使用超大文字。无论是怪诞的无衬线字体还是现代奢华的衬线字体——这一趋势就是在于越大越好。通过精心选择的字体，网站可以做出比以往更大胆的宣传，以吸引受众的注意力并有效地信息传达。
这些字体选择通过 引人注目的动画进一步生动起来。设计师正在实现通过鼠标移动或向下滚动页面使排版移动并与用户产生互动的创造性效果。以粗体、动画和交互式排版为核心，许多网站也就不使用任何背景图像，让外观变得干净且精致。
MAFF
所以一定要试试这种趋势：把文本尺寸放大，可以将其放置在一些图像上，制作大尺寸的动态标题，让用户从中获得乐趣。最重要的是，要勇于呈现大胆强烈视觉效果，从而可以立即吸引用户的注意力。
案例：Medium 官网——https://medium.com/
Shakib - Sneakerbumb
在经历了充满不确定性和阴郁的两年，我们学会了寻找和珍惜任何享受幸福的机会。我们大量独处时光的花在了数字空间上，这一现象也不例外。
La puce à l’oreille
为了回应这一需求，设计师从 80 年代和 90 年代获得了巨大的灵感；将色彩丰富、质感丰富、复古风格的主题与现代气息结合起来，打造真实的外观。鲜艳的色彩搭配柔和蜡笔肌理、古怪的排版、纹理丰富的背景、跨页面网格的布局、非传统的图像和古怪的插图，都可能会在接下来的一年吸引你的注意力。
Kristen Ryan for MakeReign
随着这一切的发生，我们甚至可以说，在过去几年里，每个人都学会了赋予自己一些自由的生活态度。这为我们提供了更多的实验空间，当然也为设计和其他领域带来了让人愉快的成果。这就是说，设计师们觉得有必要从简单和实用的用户体验转向有趣、搞笑甚至愚蠢的交互。出人意料的是，让别人微笑可能会是你的网站或 app 令人印象深刻的一种方式。
Blumenkopf
野兽派设计从 1950 年代的野兽派建筑运动中汲取灵感，延用其不修边幅、毛糙粗狂的外观形式，和故意做出的丑陋效果。就像在建筑中一样，野蛮主义在网站中揭露和解构(甚至庆祝)这种媒介的底层结构和重要原则。原始、大胆和反动的本性使野兽派设计一直处于数字空间的边缘，因为原始是互联网的全部。然而，近年来，野兽派一直在缓慢而稳定地复苏，现在被一些人称为新野兽派。
Caroselling
随着互联网上干净、传统的网站越来越多，个人网站变得难以脱颖而出。转向野兽派，提供真诚、原始但独特的视觉体验，可能正是提升你下一个网站的方式。
无网格布局，强烈的调色板，重叠的元素，拥挤和几乎混乱的设计只是你的野兽主义工具包的一部分。将它们与等宽和奇怪大小的排版结合起来，缺乏或极少的导航，这相当于没有额外的“空间”或子页面的“开放式版面”，你会得到一个引人注目的粗野派外观。
Work with us
案例：阿里云设计官网——Alibaba Cloud Design - Not Design Just Future
当然，还有更多，但野兽派网页设计的定义规则是没有规则；它反对既定的规则和惯例。更重要的是，你需要用更强烈的意义价值和意图来将你的野兽派杰作与另一个设计糟糕的网站区分开来。
Messenger
Figma、Todoist、Slack和 Messenger 等网站和移动应用程序都把时间和精力集中在桌面客户端版本。
Todoist
越来越多的应用程序似乎也在效仿，因为研究表明，这样用户会感到 更舒适、更安全。用户希望自己的应用程序远离互联网浏览器，远离所有打开的标签，回到指定的应用程序窗口，让人感觉更宽敞、更专注。在使用这些应用程序时，不需要处理数分散注意力的标签，这无疑是一种进步！此外，将通知直接发送到桌面，我们的通知管理也必然得到改善。
Figma
为阿拉伯语国家的谷歌搜索页面布局
用户研究团队利用 人类心理学 领域的洞察，以及 可用性测试，已经能够塑造界面，为用户提供最大的满意度和愉快的体验感受。几十年来，这一直是用户体验设计的核心。
随着技术的快速进步，我们看到数字产品体验的保真度有了空前的提高。这一发展也为不同用户群体之间的细微差异提供了新的理解。年龄、文化、地理位置、日常习惯、社会结构（以及其他因素）的差异可能会导致人们对什么构成令人满意用户体验的期望存在显著的差异。因此，这些体验可能需要类似的设计，但肯定不是相同的设计方法。
随着技术和研究方法的到位，我们开始看到一款产品的多种变体同时推出，以满足不同用户的需求。随着许多大品牌都在努力扩大他们的用户群体，创造本地化的产品体验可能会成为一种大趋势——如果不是标准的话。
NhuSW- Everyfit — Fitness for Everyone
包容性不仅是一种趋势，也是一种运作模式；人类生存和共存是一个不可否认的重要方面。在日益全球化的复杂世界中，我们不断意识到自己与其他个人或社群之间的差异。以同理心驾驭这些差异是我们的责任，并努力将所有文化、性别、性别、种族、能力和残疾都有意义地适当地纳入全球社会。
Spotify
随着数字空间引领着世界的全球化，它也毫无疑问地成为我们包容性努力的前沿。人们总是希望品牌和公司采用更具 包容性的叙述 和语言，并向包容性的平台、产品和服务 迈进。他们被鼓励在图像、语言和视觉语言中推动多样化的表现，这样做不仅仅是为了营销收益，而是为了更大的意义和价值。
这些是我们在 2022 年会看到的趋势和现象。记住，它们是为了提醒我们当前的总体设计趋势。可以使用它们来支持和授权您的设计决策，但不要害怕挑战它们，或用它们为人们创造更多积极有效的体验。
原文标题：UI/UX Design Trends of 2022
文章来源：Codeart
原创作者：Taras Bakusevych & Maja Mitrovikj
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
2020年已经过去一大半，这些时间以来，我一直在关注数字设计领域未来的设计趋势。从年初就开始收集，到今8月份了，我想是时候将发现的一些趋势风格分享出来，这些风格很有可能继续延续到2021的产品设计上。
对于UI界面视觉趋势，同样需要我们高度重视。毕竟每年改版方向，视觉风格研究是必不可少的一个环节，下面正式开始。
今年在各网站上看到大面积的渐变色设计，相对前两年来说越来越少，设计上有所克制。大面积的渐变色虽然视觉冲击力强，但大部分停留在概念中。
从今年设计中我们可以看到设计更加理性与克制，将渐变色彩运用到关键功能上，突出强调重要信息。
机票选购界面，将渐变色运用到头部位置去强调功能。
运用在功能卡片上，突出重点信息。
如上图，设计上同样只将渐变色运用在背景上，其他卡片上基本没有渐变色。
几何图形设计是目前运用最多一个设计手法，今年发现一些比较抽象艺术化包豪斯风格几何图形，在UI设计中大量运用，且效果还不错。
这种图形带来好处就是记忆性强，应用广，它不仅可以拓展在品牌包装，品牌图形延展，还可以运用在UI设计中。
卡片设计采用一些具有意向符号的图形，来表达功能的设计，形成记忆点。
品牌设计上，也是重复这种极简包豪斯风格几何图形。将logo元素提取，进行包豪斯风格化，重复运用在设计中。
今年这样的设计屡见不鲜，大量3D运用在界面设计中，二维的界面已经不再满足当前设计需要。设计师去探索更多维度学科与UI界面融合，形成一种全新的视觉感官。
uber的概念官网就通过3D来呈现，表达功能亮点。
将二维世界三维化，将是2021年重要的趋势。目前国内外线上有一些产品，开始在部分功能模块使用这样设计手法，如Naver，支付宝等。
可以说是趋势轮回，毛玻璃的效果又回来了。这也是今年在各网站设计上出现频次多一些的设计。
新的毛玻璃效果更加去注重功能说明，用在视觉强调的地方。
如上图设计，毛玻璃运用在顶部关键信息上。这样设计即可减少其他色彩运用，还可以对功能信息进行强调。
毛玻璃效果运用在个人中心，人物头像位置，进行设计强调。
运用毛玻璃去包装UI界面，可以提升品质感与神秘感。
将功能与场景融合设计，用户在使用产品过程中，能产生更多情景体验感触。这也是最近今年喊的比较火的一种设计思路。在各网站上，这样设计出现次数越来越多，设计效果冲击力强，得到很多设计师的认可。
场景中关键人物元素与设计进行巧妙集合。
运用超现实设计手法，将人物与酒店场景进行排版布局。
将制作材料与产品集合。
拟真植物元素与土地进行巧妙集合，在视觉上传达逼真效果。
杂志化设计风格鲜明，可以有助产品去打造强化记忆点。杂志化设计的优势可以不受到网格约束，排版使用大字体，同时设计排版上更加个性。我们在做产品概念探索前期，可以多去尝试这样的风格。
拟物图标又回来了，Apple新版本的Big Sur系统，就采用拟态图标，这也是一个新的尝试，当然也是一个开始。我们很有必要时刻关注这个趋势，未来将会在更多设计中看到拟物化图标的出现。
不过这种风格也不能大面积运用在界面中，我们可以运用在一些关键功能入口设计上。
在天气上的运用，相对之前扁平化设计，目前具有空间的拟物化设计，增加了真实感。
圆形趋势，我想大家也许会忽略的点，最近几年设计中，圆形的设计无处不在。它的好处不言而喻，亲和力强、场景覆盖广，几乎任何设计都能去用圆形。因此我们有必要去注意圆形运用技巧。
星巴克的web UI概念设计，采用圆形与产品进行集合设计排版。
新拟态趋势是2020年受到广泛关注的趋势之一，这种趋势大量使用了柔和的阴影和微弱渐变，使设计既具有未来感又具有现实感，并且为熟悉的界面带来了新的感觉。相对之前大面积浓厚阴影而言，目前新的简化拟态界面，会克制使用这些元素。
2021年拟态界面，更注重功能与体验。拟态效果会使用在关键功能上，如仪表、按钮，又或者需要重点强调的地方，避免了大面积使用这种设计手法。
2021年的趋势相对来说，有继续延续2020年一些设计风格，这些风格将会在继续加强，同时我们也有发现，目前越来越多3D元素与二维界面进行集合设计，能更生动传达功能与将故事，2021年大家务必要注意这种趋势的延续。
作为设计师，我们对设计的思考不能只停留在表象层面，而更多的需要围绕信息传达这一设计的本质功能，以充满自省的精神深化和反思自己的设计意识，同时要时刻保持对趋势的敏感度。将新趋势合理的运用在产品设计中，以产生最大化收益。
转载请注明：优设网
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
网站设计之一：怒马！超实用的单页网站设计指南（附大量资源）
网站设计之二：旅游网站设计分析！教你10个小技巧
网站设计之三：实例教学！如何将极简风格的原则运用到网站设计中？
网站设计之四：另辟蹊径谈创新！提升网站设计形式的几种方法
网站设计之五：经验分享：移动网站设计应该避免的“七宗罪”
网站设计之六：4000 字快速回顾20多年的网页设计发展史！
网站设计之七：腾讯出品！2021-2022设计趋势报告：动态篇
网站设计之八：为什么千万别随便学国外的极简设计？
网站设计之九：高手出品！2020~2021年UI界面设计趋势
网站设计之十：如何做好网页头部内容设计？来看 58 设计师的总结！
动态设计（Motion Design）有助于创建令人愉悦且直观的用户界面。好的动态设计，不仅能引导用户对数字产品的体验，还可传达有关产品的品牌信息。本文将介绍近来最流行的动态设计趋势，这些令人惊艳的动效表现手法，在不久的将来势必席卷所有人的目光。
动态能激发用户的情绪，为静态的视觉设计注入活力与生命力。有趣、奇妙、吸引人的动态，能让你的产品展现与众不同的魅力。另一方面，动态有助于支持可用性，通过自然流畅的物理运动，突显元素在过渡时的关联性与状态变化，增强用户对产品功能的感知。
因此，动态设计必须是有意义的，同时兼具可用性与美感，UX 行业也将动态设计视为多学科的交集，细分成一个专业的设计门类。作为 UI 和 UX 设计中重要的组成部分，动态设计从三个层面发挥影响力：
提高连贯性（Increase Continuity）
让界面元素在用户流程中顺畅地转变与过渡，将用户操作导向期望的任务结果。
连接场景（Connect Scenes）
在转换场景的过程中扮演润滑剂的角色，阐明场景之间的位置、层级与空间的关系。
视觉吸引（Visually Appealing）
聚焦用户视线，将其注意力放在重要的事情上，从而起到信息传达、提升识别度的作用。
植基于 UI 和 UX 设计而发展的第三维度，动态设计的趋势自然与两者密不可分。综观近年，多数作品巧妙地运用绚丽的动态图像（Motion Graphics）与动效设计，让新的视觉手法得以表现更为出彩。再者，随着移动端芯片性能提升，跳脱二维平面的表现形式不再难以实现，让设计师能够解开束缚，发挥无限的想像空间。2021 年的动态设计可归纳为三个趋势：
增强表达（Enhance Expression）
运用引人注目的表现手法将信息传递给用户，包括变形、动态文字和背景动画。
创造层次（Create Hierarchy）
在视觉平面中创建空间层次结构，遮罩与视差是常用的表现手法。
扩展维度（Expand Dimensions）
突破二维限制，将界面元素多维化营造空间感，例如 3D 动态图形和摄像机运动。
变形创造了一种连续的叙事状态，告知用户元素的状态或作用发生变化，是一种最引人注目的表现手法，能将形状、图像、色彩无缝地融合与过渡。
动画插图 Animated Illustrations
2021 年看到许多有趣、吸引人的插图，而更多的设计师开始为静态图像添加动态，也让 GIF 和动画插图越来越受欢迎。
动画插图看起来更生动，并带有叙事性质。在示例中，运用动画插图来呈现这杯果汁是由哪些水果打成，比起文字描述更能吸引观众的注意力。
by Lobster
通过动画插图来呈现同一系列的转变，有利于延续外形上的特征，让不同的物体具有连结性。比如从桌子、衣柜到灯具的连续变化，同样风格的系列家具利用动画来体现一致性。
by Graceful illustrations ™
流体动态 Liquid Motion
动态的有机形状，包括流体、烟雾和火焰等粒子效果，能够极大地增强视觉效果。流体动态并非明确的过渡与场景转换，而是颜色在流动的液体中扩散，进而创造出抽象或真实的视觉形状。这种风格能实现无缝过渡，并为设计增添有机感，也是 2021 年最引人注目的动画趋势之一。
运用流体动态来展现抽象的有机体，除了轻易地攫取受众目光，还让人不自觉地伫足在画面上，感受流体变化的韵律与美感。这类动态设计可作为烘托主题的背景动画，或是吸引目光焦点的主角。
by ✞anton mishin✞
流体动态运用到网站设计所营造的视觉冲击力更为惊艳，能为用户带来独特、新鲜的视觉感受， 使得流体动态深受风格前卫的设计师喜爱。网站还能利用鼠标悬停与流体进行互动，因此会在许多特效网站见到流体动态的踪迹。
by Gilles Tossoukpé
动态渐变 Dynamic Gradients
扁平化设计缺少现实质感的元素，搭配渐变色能有效缓解不足，为设计创造深度与层次。变化中的渐变色同时带有动感与舒缓，充满活力却又平静。使用动态渐变能让设计师展示一系列不断变化的情绪，许多内容创作者和品牌已经注意到这一点，开始在广告活动、识别设计和数字内容使用动态渐变。
by Pixelz Studio
微交互 Micro Interactions
在用户体验设计中微交互变得日益重要，而动态设计正是微交互的灵魂所在，即使只是微小的视觉提示或反馈，都是人机交互易于使用的关键。从经典案例来看，微交互的动画细节必须带有明确的目的性，让用户获得实时反馈，指导用户进行下一步。从近几年的设计趋势来看，微交互已成为不可或缺的存在。
by Илья Бабушкин
by Google
动画商标 Animated Logos
过去几年动画商标是最流行的动画趋势之一，通过各种视觉效果，设计师能创造出不同类型的动画商标，许多企业开始采用动画商标作为吸引注意力的手段。多数情况下，商标是进入网站时最先看到的东西，因此商标应该令人难忘、引人入胜，并使用符号或排版来揭示品牌个性。结合动画的优势，设计师可以运用一些动态或效果来讲述简短的故事以强调品牌特征，并为静态排版和商标注入一股活力。
by Yulia K.
by Meta
动态文字是使用移动文本来吸引注意力的动画技术，许多卓越的品牌在网页设计中使用动态文字，为网站外观增添动感和视觉冲击力，是近年 UI 动画的趋势之一。
设计师使用动态文字为单词或句子添加生动的元素，借此定下情绪氛围与设计基调，吸引用户的注意力。几种常见的表现手法，挤压和拉伸一个词能会唤起一种俏皮感，而连续重复这个词则具有催眠感和前卫感。另外，使用大号和粗体字体来增强份量以强调某些信息，也是动态文字的特征之一。
无论在电商网站、电视广告或音乐视频，动态文字都占有举足轻重的地位，有利于加深用户对品牌的关注与印象。
by HOLOGRAPHIK®
by Hrvoje Grubisic
通过背景动画来强化叙事，成为许多行业常用的品牌传播手段。你可以创建动态的品牌故事，展示有趣的制造过程、产品的使用场景。背景动画深获大众喜爱，它能让用户在进入登录页或网站首页时，轻易地了解更多有关公司或产品的信息。调研显示，从银行、医疗保健公司、电商零售商、餐馆到 B2B 供应商，这些跨越不同细分市场和行业的网站都开始使用背景动画。
by Carlo Soleri
by Kirill Zhukovsky
遮罩过渡是将几何或有机形状作为衔接下个场景的遮挡物，等同于舞台幕布设计，能在界面元素进场或退场时创造连续性效果。这种表现手法简洁高效，是最常见的过渡动画之一。
切换场景 Scene-Switching
其中一种遮罩过渡，是将当前场景完全置换，如同揭开蒙在上层的布，逐渐展露叠在下方的景，并利用景物相似性和动作延续性，让两个场景能够顺畅地衔接，不致于差异过大，造成用户心理负担。
by intent
by Minh Pham ✪
状态变换 State Transformation
另一种遮罩的表现形式，较无明显的场景过渡，而是利用遮罩来表现景物的状态变化，界面元素和布局基本保持一致，以此塑造无缝过渡的视觉效果，这种手法被广泛地使用，例如气候变化、人物换装、产品组合等。
by Daniel Tan
by Outcrowd
视差是利用不同的界面元素以不同的速率移动，创造前后景深的分离效果，借此在平面中塑造空间层次，已成为网站首页最为普遍的表现形式。
视差之所以能形成一股风潮，广为各个行业所接受，一方面是信息层级更加清晰，明确定义各种元素的关系，让用户专注于主要操作和内容，将背景或非交互元素往后退，同时保持设计的完整性。另一方面是丰富的层次变化，当用户滚动或滑动时，能在扁平化界面拉开空间关系，利用不同的速率和纵深，塑造多层次的感官体验。
by Studio VØR
by Studio VØR
近年来，结合 3D 动态图形的界面设计呈现爆炸式增长，虽然创建 3D 动画需要更多的时间、技巧与协作，但不可否认的，3D 动画比 2D 图形更加逼真，从而提供更具吸引力和互动性的用户体验，并有效地展示品牌的活力。
更生动的表情 Lively Emoji
动画的吸引力在于能够创建各种角色，并为无生命物体注入生命力，表情符号就是一个很好的例子。作为独特的网络语言，表情符号生动地描摹日常面对面交流的非言语信息，随着图形界面的设计趋势逐渐结合 2D 与 3D，运用 3D 动态图形来创造更加动感、拟人化的表情，能让这些非言语信息更加丰富，有机会引领下一波风潮。
by Outcrowd
营造空间感 Spatial Awareness
3D 动态图形为平面设计建构了空间叙事框架，在扁平化界面中展现立体感，从而表达空间中元素的位置与层级关系。多维化的发展趋势，推动了视觉表达形式的演变，空间感让界面设计更符合人类的认知逻辑，运用各种 3D 运动特效，包括旋转、翻转、折叠、透视、Z 轴位移等，打造令人难忘的感官冲击。
by UI8
by Bruno Ortolland
拟人动画 Anthropomorphic Animations
拟人化能让物体、植物、动物等非人类事物，表现出人类属性的行为与状态。动画片运用拟人的手法是最普遍的，1927 年迪士尼第一部系列动画《幸运兔子奥斯华》的主角便是拟人的兔子形象。由于人们容易被以人类行事的事物所吸引，越来越多设计师在界面中添加拟人元素，利用这种效果让画面更加生动有趣，增强用户体验的愉悦感。
by Gregory Riaguzov
在动态设计中，摄像机运动是最自由、灵活的一种表现形式，能让画面过渡更有张力，突破 2D 平面在视角上的限制，创造一个无界线的立体空间。常见于影视、动画和广告的摄像机运动，包括推近、拉出、平移、跟拍等方式，备受动态设计师青睐，让用户以多变的视野探索数字产品。
推近/拉出 Dolly In/Dolly Out
推镜头是指被拍摄的对象不动，摄像机由远而近，朝着对象不断推进， 用来突出人或物的主体。镜头推近的运动方式，用来呈现从整体到局部、由分散到集中的变化，引领用户进入故事情景，给人一种身临其境的感受。
相反地，拉镜头则是将摄像机后退，使画面逐渐远离被摄主体，侧重的是从局部到整体、由点到面的转变，强调主体所处的空间环境。随镜拉出的景象，能激起人们无限的想像。
水平/垂直移动 Truck/Pedestal
水平向左或向右，垂直向上或向下移动摄像机，使画面不断变化，让用户跟随镜头视角一起移动，产生一种置身其中的感觉。这种运镜方式，通常用于具体的场景，利用角色或景物的延续性来消除场景过渡时的边界，表现出一种流动感，无论是手势滑动或鼠标滚动都能有顺畅的操作体验。
结合多种运镜 Multiple Camera Movements
运用多种摄像机运动相当普遍，既能扩大视野，又有很强的空间感，可以更加自由与多样地展示不同视角和情景。比方说结合横摇（Pan）、直搖（Tilt）和跟随（Tracking）镜头，连续而详尽地展示一个产品，由于画面始终跟随一个主体，有利于突出产品特征，并让用户从不同的角度和距离观看产品，是一种增强临场感和参与感的有效方法。
一镜到底 One Shot
在电影中为了不将观众的情感和注意力割裂，使用一个镜头来完成全片的场景刻画和叙事，这种拍摄手法被称作一镜到底或长镜头。连续镜头逐渐被运用到界面过渡，以此增强操作过程的流畅性，例如一气呵成的购物体验，或是贯穿全场的人物角色，其特点是给用户最沉浸的感官体验，无间断地体验整个流程。
动态设计作为近年热门的创作形式，广泛应用到各个领域，逐渐成为设计的主流趋势。受益于技术演进与发展，从创意生产到落地实现，动态设计的门槛不再遥不可及。设计师得以将想法转化为生动、有趣的作品，并有机会创造新的表现手法，玩出许多新花样，成为 2021 年动态设计的特色。
本文归纳的设计趋势，有助于启发设计师对动态设计的想像，激发更多创作灵感，为静态界面赋予灵魂，打造令人难忘的视觉体验和品牌形象。
转载请注明：优设网
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
网站设计之一：怒马！超实用的单页网站设计指南（附大量资源）
网站设计之二：旅游网站设计分析！教你10个小技巧
网站设计之三：实例教学！如何将极简风格的原则运用到网站设计中？
网站设计之四：另辟蹊径谈创新！提升网站设计形式的几种方法
网站设计之五：经验分享：移动网站设计应该避免的“七宗罪”
网站设计之六：4000 字快速回顾20多年的网页设计发展史！
网站设计之七：腾讯出品！2021-2022设计趋势报告：动态篇
网站设计之八：为什么千万别随便学国外的极简设计？
网站设计之九：高手出品！2020~2021年UI界面设计趋势
网站设计之十：如何做好网页头部内容设计？来看 58 设计师的总结！
在本文中，我们将发现：
3D视觉设计师的内卷将会越来越严重
数据可视化的工作将变得越来越重要
服务的移动化还需要做出更多努力
scrollytelling 技术会越来越流行
旧的滚动是无聊的。如果你想吸引注意力，你就需要实现滚动叙事（scrollytelling）。（彩云注：这个技术的核心在于边滚动页面边讲故事）
《纽约时报》是第一批在他们的文章《雪花飘落》中使用滚动叙事手法的机构之一。
它是一种叙事形式，可以在网页和APP上呈现。想象一下，在一个网站中每个插图、文本和其他元素都开始变得生动起来。自然地，你会想看到这个故事的结局。它就像一个游戏，带你穿越迷宫。虽然你不能影响它的进程，但却让你感觉自己能参与其中。
2022年，Scrollytelling将会出现在你看到的每一个流行网站上。
另一方面，scrolllytelling让用户真正去阅读内容。你可以用动态文本让他们产生兴趣，比如谷歌的网站 (https://www.google.com/search/howsearchworks/)。他们的团队知道如何让信息看起来更好:
Scrollytelling在用户向下滚动时被激活，因此得名。没有点击，没有选择的麻烦，没有弹出窗口。你似乎停留在一个地方，但通过滚动，把屏幕上的故事慢慢展开。这不仅要求设计师创造出酷炫的视觉效果，还需要认真思考一个你想要讲述的故事情节。
所以，最好的网站不可能在2天内建成，需要更多的时间去打磨。
IAmBinadam令人惊艳的叙述设计
滚动叙事的项目通常需要大量的时间和精力。不过，这样做的结果是值得的。页面变成“活的”，每一秒都有新的事情发生，所以在阅读时很难感到无聊。
那么移动端APP呢? Pure是一款约会应用（彩云注，这个应用在app store可以搜到，推荐大家安装一个体验一下，非广告），它创造了一种我称之为“tappytelling”的故事(当你第一次点击并打开应用时，它就会被激活):
Scrollytelling是为用户而创建的，用户很喜欢它，不需要到其他页面去阅读整个故事。相反，网页设计的整个故事都是事先考虑好的，并尽可能以最有趣的方式设计出来。
如何在2022年做出一个还不错的企业网站？你不会想告诉用户你是“XX领域公认的领导者，该领域最好的之一”。这种标准的广告表达并不传达任何有价值的信息。
最好不要用形容词，而是用事实来说明:你有多少分支机构，在哪些城市，谁是你的客户，以及你是如何帮助他们的。抽象信息是不可靠的。但如果你有很多想要分享的数据，你需要让它不仅简单，而且有趣。
数据可视化有助于以一种吸引人的方式传达正确的信息。它也可以与滚动叙事（Scrollytelling）紧密结合。以下是IAmBinadam展示数据的方式:
通过去除数据集的复杂性，使信息更容易让读者感知。
不同级别的数据具有不同的大小，这样用户知道应该先从哪里查看
读者可以很快注意到作者试图通过图片引出的结论。考虑到如今人们消费的数据量巨大，那些干净整洁的数字带来的正面影响更大。
有些图表乍一看甚至不像图表，这使得它们更加能被注意到
还有一种现象叫做“新冠后遗症”。这是Covid对公司及其员工的长期影响。根据英国国家统计局的数据，2018年，压力和焦虑的平均得分约为2.7/10。自新冠疫情发生以来，得分已升至4.0/10，很少低于这一水平。同样因为大流行，在过去两年里工作量增加了4个小时。
人们压力太大，卷的太辛苦，以至于不愿去看复杂的数据。
设计师做好数据可视化，以保持人们的注意力。记住，复杂的信息通常被忽略，因为读者试图节省他们的时间，更有可能使用滚动按钮。
Illustration by Mona Chalabi
以下是我们推荐的一些表示数据的方式
1）图表和曲线图
2）插图
3）静态信息图
4）互动信息图
Illustration by Ink Factory
一个好的图表，或者任何其他形式的数据可视化，都应该具有在Edward Tufte的“定量信息的可视化显示”中描述的特征。在他的书中，Tufte通过图表解释了好图表的3个原则：
1）展示数据的图形元素与数值总数的比值应趋向于1。简单地说，应该删除一切不必要的元素，保持整洁。
2）充分利用好画面空间。也就是说，需要将数据编排的更紧密
Graph by Hootsuite
3）客观地描述数据。不要使用夸张的图表，可视化数据可以看起来很酷，但真实永远是更重要的。
根据We Are Social的数据，2021年有52.2亿人使用手机，约占世界人口的66%。自2020年1月以来，手机用户数量增长了1.8%(9300万)，而手机联网总数量增长了7200万(0.9%)，到2021年初达到80.2亿。
过去一年，社交媒体用户的数量增长了13%以上。到2021年初，社交网络上已有近5亿新用户注册。根据App Annie的数据，Android用户每天花在手机上的时间超过4小时。2020年，安卓用户上网时长超过3.5万亿小时。
令人印象深刻的数字，是吗？似乎到2022年，为产品做一个APP将成为必须拥有的东西。如何知道你的公司是否真的需要一款应用？有以下几点可供评估：
1）用户主要通过移动设备访问你的网站这是你应该了解的重要数据。
客户和你在一起的时间越长，你就有越多的机会去吸引他们，了解他们的习惯，并给他们想要的东西。（彩云注：这就是为什么各大厂之间都在拼命抢占用户的在线时长。）
2）帮助内部业务流程更加有效。
如果你想要提高员工的工作效率、改进工作流程或增加利润，那么就制作一个可以帮助管理业务流程的移动应用。
如今，像这样的手机应用使企业能够执行越来越复杂和多样化的任务，加快日常重复操作和文档管理。
3）实现一些网站上没有的新功能。
如果你认为APP能为用户打开新的触点，并让用户体验更加友好，那么它就值得考虑开发。问问自己的APP能提供什么新的商业机会？例如，随着疫情的蔓延，许多人开始用上健身APP在家里锻炼。
4）竞争对手做的情况。
要了解竞争对手在做什么，他们是否有APP，能做什么，以及他们是否真的对用户有用。
查看App Store和谷歌Play的统计数据。下载和评论的数量可以告诉你用户是如何使用竞争对手的应用的。如果他们的服务真的很方便而且很有必要，那么你就容易被甩在后面。
5）复购率。
一个应用可以帮助你留住那些习惯从你那里购买的人。如果想为老客户开展促销活动了，给他们发送一个通知就能完成，成本更低。
在正确的时间提供的报价越有吸引力，人们购买的可能性就越大。
6）促销工具。
有了应用，你就不需要花钱设计和制作实体卡，客户也不需要随身带卡。将促销计划整合到APP，并分享有用的促销信息。
开发手机网站比开发手机应用需要更少的工作量，这反过来可以降低整体推广成本。
这部分是由于响应式设计的出现，它允许你根据打开网站的设备屏幕来调整网站。至于APP，它们必须为许多移动平台单独编写:Android、IOS、Windows等。
一些设计师认为“前端驱动的网络体验”会是2022年的一个好机会，我非常同意!（彩云注：在国内，现在开发小程序的肯定越来越多了。）
我们一开始并没有将其放在首位，因为这并不是一个新的趋势，在很久以前设计师们就已经设计了很多3D图像和动画了。
Cardi B rhymes with 3D
3D技术已经在过去流行了很多年，但它不会很快消失。此外，我们预测3D图形将变得更加多样化和包容。
在过去的几年里，3D艺术和动画已经出现在各种UI设计趋势评论中。这意味着越来越多的设计师将它们整合到页面中。
3D当然应该成为2022年最热门的趋势和预测之一，因为与经典动画相比，逼真的3D形状结合动画总是引人注目的。
“从技术上讲，通过3D更容易传达更多内容，因为它比平面图片更接近我们的感知。3D插图更有深度，信息量更大，也更具互动性。"
许多设计师将3D对象无缝地“安置”在2D空间中。它允许创建更有趣的组合，也作为一个优秀的工作方法蕴藏着巨大的潜力。
乌克兰政府网站用3D手模拟了黑客帝国
注意一点：在整合3D图形等重量级内容之前，确保你的应用性能是OK的，能够快速加载所有元素。
Meta的logo既不是2D也不是3D。或者两者兼而有之?这就是即将到来的2022年的莫比乌斯带和薛定谔的猫。
Meta logo的变化(3D版本)(https://design.facebook.com/stories/designing-our-new-company-brand-meta/)
（彩云注：这个概念在去年简直不要太火，未来几年肯定还会是一个大的趋势，设计师也需要保持关注。跟着趋势走，易于放大自身价值。）
越来越多的公司在网站和移动应用中使用动画，以提高用户的沉浸感和体验，使内容更有趣。
动画是2022年重要的网页设计趋势。2022年，如果没有它，你的产品很可能会看起来就像个半成品。混合风格的动画越来越受欢迎:定格动画和3D动画的结合，2D动画和3D动画的结合。设计师这样做是为了获得不同寻常的风格解决方案，以及提高最终产品的质量。
2022年，动画设计将是品牌市场定位的重要组成部分，想想一个公司新的视觉形象——动画形象。随着这个领域的专业设计师数量的增长，实现新想法的机会也在增加。
1）讲故事动画。
可以通过在界面和用户之间建立情感联系来传达信息。
加载动画Yoichi Kobayashi
2）更有趣的加载。
用户不愿意等待，除非载入画面很有趣。带有百分比的动画不仅可以分散用户的注意力，还可以告知他们加载页面需要多少时间。使用进度条或者任何你能想到的可以显示时间流逝的东西。
3）光标效果。
用户可以精确地观察光标所在的位置。通过添加智能互动动画，对这个光标作出反应来探索网站。这种效果在21世纪初非常流行。如你所知，流行趋势往往每20年就会重演一次。
4）动态排版
你有没有想过让字母跳舞?
据Statista统计，2020年全球动画市场达到了2700亿美元。趋势是视频，而不是静态信息。全球品牌在社交网络上使用动画制作广告。毫无疑问，动画插图的优势是它们非常灵活和多样化。
宝马历史动画
这样的作品通常用于两种情况:
1）用于解释视频
2）电商广告
动画解说的趋势出现在几年前，解说视频清楚地显示点击的位置或公司的项目是关于什么的。
在招聘或商业视频中，用户更喜欢看画出来的人物，而不是抽象的形状或物品。画出来的人物可以唤起情感共鸣，就像活着的人一样。
微交互是帮助用户浏览网站或应用的小界面变化。通常这些是作为提示用户的视觉或声音效果:它们显示发生了什么，将导致什么操作，下一步需要做什么。
图片来源awwards
动画交互将为你的设计注入活力，并有助于保持用户粘性。关注每一个细节是设计师工作的关键，因为设计中的所有元素都可以带来积极的用户体验。
重要的是要达到元素的和谐，而不是把注意力分散到界面的各个方面。微交互作用的一个重要部分是颜色，它们为界面元素增强价值。
微交互有助于页面导航，解释它们的功能。最重要的方面之一是加快和简化以前冗长的功能，以实现特定的行为。
2022年，在线品牌面临着新的挑战，需寻求新的解决方案，其中之一就是动画logo设计。
图片来源Toridori
动画logo主要有以下几点营销优势:
1）吸引注意力。这意味着它们有助于提高品牌知名度。
2）有助于提高SEO。谷歌更倾向于动态内容，带有动态图形的页面更容易吸引用户。
3）在移动端看起来更好。丝滑的动画看起来比静态的logo更有趣。
4）最重要的是展示了历史。静态logo背后的想法正在动画中发展。由于这一点，在几秒钟内，你可以展示品牌的使命，甚至它的价值!
一家洗衣机[公司]的标志(https://www.schulthess.ch/)
现在有很多设计模板，可以很容易地用字体制作一个动画logo:
图片来源Shabello, Bobby Voeten
作者：彩云Sky 来源：站酷
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
Logo 胜过千言万语。一个伟大的 Logo 不用一个字就能讲述一个故事。
最近，许多公司的商标都经历了一次转变。从通用汽车（GM）这样的汽车公司，到汉堡王（Burger King）这样的餐厅，再到品客（Pringles）这样的食品公司，很明显，许多公司都在尝试重新设计商标。
然而，在重新设计的同时，也有反对声音。反对改变的声音是向来常见，然而不喜欢某一个特定的设计语言却比较鲜见的，那么到底发生了什么?
通用汽车（General Motors）改变了自 1964 年以来一直使用的标志是广为周知的，它用以保证电动汽车的发展。Dezeen /通用汽车
为什么要修复一些没有损坏的东西，为什么要改变一个已经受到喜爱的标志?这是每个人都会问的问题，每当一个新的标志出现，我们就必须考虑到一个标志的重新设计是不便宜的，往往会花费数百万美元和多年的研究。乍一看，一家公司这么做毫无意义，然而每隔几年就会有很多公司这么做。
虽然我不是平面设计师，但我个人认为 Logo 和品牌的重新设计有两个主要驱动因素：技术和市场。
技术对设计影响很大，它既支持又限制了它。计算机硬件和软件的采用和改进等技术进步为设计师们提供了尝试新事物的机会。技术对设计也会有限制，比如有限的屏幕尺寸或能量消耗，但同时也会驱使设计师发挥创造性。虽然技术可以影响设计决策，但市场(在某种程度上可以等同于消费者)才是主要的决策者。
市场，无论是企业客户还是目标消费者，在设计决策方面自然是最高的权威。如果一个公司觉得自己不能从中获益(毕竟 Logo 的设计并不便宜)，重新设计 Logo 就很少发生，即使这可能会引起现有消费者的强烈反对和抵制。重新设计 Logo 可以是一个新的开始：向消费者传达他们对未来的期望。
动物星球的标志变化过程，它随着每一次迭代变得越来越简单。
所以让我们来谈谈这个非常显而易见，而又容易被忽略的问题。从 iOS 7 到纯果乐——极简、极简或扁平化的平面设计风格已经兴起近十年了。我们已经讨论了技术和市场是如何决定趋势的，但是对于我们今天所面临的当前趋势：以最小的、扁平的、最简单的标志重新设计，它又说明了什么呢?
技术的诉求——对在线展示的日益增长的需求是公司简化其标识的主要原因。快速增长的移动设备使用率导致高度详细、高度程式化的徽标设计的旧设计方案越来越难以实现。在可伸缩性和文件大小等方面，矢量的图像变得更加流行，与栅格图像相比，它们更容易创建、操作和编辑。像 Airbnb、Animal Planet 和谷歌就采用无衬线和块状字体的商标，之所以这样做，是因为这样在手机等设备上更容易阅读。
市场需求——企业和消费者似乎都支持（当然并不是没有阻力），应该走更简单的道路。更简单的平面设计意味着它更容易被广大用户理解和识别。许多扁平化设计的支持者认为有效、友好、干净和中性的特征是扁平化风格的优点。谁还记得在 2000 年代，Windows Aero 的顶级设计是多么的混乱不堪?时代当然变了。
当平面设计成功时，就可以创造出华丽而有意义的标志，它们经得起时间的考验；IBM 和 Shell 的标志就是我最喜欢的几个。但是，尽量简单更容易创造出一些最好的标志一样，也很容易失去目标。
是不是过于简单了？
最近十年间，平面和极简主义设计的标志重新设计正在兴起。
在最近的十年里，很多公司一直在用扁平化风格来重新设计 Logo，Logo 随着时间的推移变得越来越简单，尽管在线社区的用户们的感受各不相同。
任何重新设计都会遇到各种各样的反对。沃尔什（Walsh）、凯伦•温特奇（Karen Winterich）和维卡斯•米塔尔（Vikas Mittal）的一项研究显示，消费者对品牌(品牌态度)的认知，在消费者对重新设计的看法中扮演着重要角色。
2003年，像苹果这样拥有高品牌忠诚度的公司决定更换 Logo，在宣布后数小时内就收到了网上请愿书，这一点就很明显。沃尔什、温特奇和米塔尔认为，商标的重新设计扰乱了已经形成的相对稳定的关系，消费者显然对此感到不安。
一位推特用户对 firefox 徽标的改变非常愤怒，尽管它并没有被实现。——UnfunnyLuigi
有一些被重新设计的 Logo，比如汉堡王却受到了热烈欢迎，而其他的，例如火狐和动物星球则受到了严厉的批评。汉堡王不仅采用了更简单的设计，还抓住了人们的怀旧情绪，因此比动物星球（Animal Planet）这样的 Logo 更容易被接受。
需要指出的是，扁平化的 Logo 设计本身并没有什么错，许多 Logo，如可口可乐、IBM 和壳牌，都由于其简单易记的特性成为永恒的杰作。导致人们强烈反对扁平化 Logo 设计的原因可能是人们对企业和企业文化越来越反感和愤世嫉俗。像企业艺术风格、企业孟菲斯和全球同质化等概念通常会被指责为“过度简化”标识设计浪潮的罪魁祸首，因为很多设计决策都是冷血的，缺乏人文特征的，让人感觉不自然或虚假。
不喜欢过于简化的商标已经成为网络热点，尤其是在YouTube上。——Revified
由于许多内容创造者和互联网热点已经导致了文化抵制现象出现，人们不再只是随意在社交媒体上发泄不满；人们把这些过度简化的商标描绘成冷酷无情的科学实验的结果，有些人甚至证明了如果这种趋势继续下去，过度简化的商标会导致什么，它们会创造出一个乏味的世界，每个商标都是一样的，没有个性。
Youtube 用户 Solar Sands 在他的视频文章《为什么企业的艺术风格让人觉得非常虚假》( Why do corporate art styles feel fake )中指出，许多公司，尤其是大型科技公司，这些公司曾经多次产生消费者的信任问题，而它们恰好使用了许多扁平化设计风格。我们就把负面问题与这种设计风格的联系了起来，对这种风格留下了糟糕的印象，因此我们憎恨它；我们觉得这些冷血的公司正在夺走我们所爱的东西。在这波愤世嫉俗的浪潮之后，Solar Sands 以一段出人意料的评论结束了他的视频：任何潮流都有保质期。
接下来将是什么?
百事可乐不断演变的标志让我们很好地洞察了各自时代的设计趋势。——Logaster
设计趋势总是周期性的，每个趋势都有保质期。百事可乐的商标就是一个很好的例子，它说明了设计世界是多么地充满活力：从简单的设计到复杂的设计，再到简单的设计。没有一种设计风格是绝对好的，但它必须与时代相适应。
微软的 Fluent Design 吸收了一个新的风格,强调光,深度、材料和尺度。——微软
随着大众对当前设计趋势的不满不断发酵，扁平化设计风格可能要终结，但人们永远不知道什么时候或者什么会取代这个简约至上的时代。许多苹果和微软等公司都将新拟物风格和玻璃拟态的元素融入自己的设计语言，试图为其添加性格和细节。虽然我们肯定不会在一夜之间回到过去那些充满华丽而又过分精细的 Logo 的日子，但扁平化设计的流行趋势可能会开始消退。
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
当设计师被迫待在家里时，终于能有时间去反思现有的设计并重新创造。无聊是艺术家最大的敌人，他们会尽可能地打破困局。
对我们来说，2021年相当困难。世界上最长寿的猫庆祝了它的34岁生日，这可能是发生的唯一一件好事，顺便说一下，你会在文末看到这只可爱的小猫照片。
那么，2022年的UI/UX设计趋势是什么呢？看看现在的情况，我们已经可以预测未来的设计趋势，就像我们对2021年所做的预测一样（回头看非常准确）。
在本文中，我们将发现：
3D视觉设计师的内卷将会越来越严重
数据可视化的工作将变得越来越重要
服务的移动化还需要做出更多努力
scrollytelling 技术会越来越流行
旧的滚动是无聊的。如果你想吸引注意力，你就需要实现滚动叙事（scrollytelling）。（彩云注：这个技术的核心在于边滚动页面边讲故事）
《纽约时报》是第一批在他们的文章《雪花飘落》中使用滚动叙事手法的机构之一。
它是一种叙事形式，可以在网页和APP上呈现。想象一下，在一个网站中每个插图、文本和其他元素都开始变得生动起来。自然地，你会想看到这个故事的结局。它就像一个游戏，带你穿越迷宫。虽然你不能影响它的进程，但却让你感觉自己能参与其中。
2022年，Scrollytelling将会出现在你看到的每一个流行网站上。
另一方面，scrolllytelling让用户真正去阅读内容。你可以用动态文本让他们产生兴趣，比如谷歌的网站 (https://www.google.com/search/howsearchworks/)。他们的团队知道如何让信息看起来更好:
Scrollytelling在用户向下滚动时被激活，因此得名。没有点击，没有选择的麻烦，没有弹出窗口。你似乎停留在一个地方，但通过滚动，把屏幕上的故事慢慢展开。这不仅要求设计师创造出酷炫的视觉效果，还需要认真思考一个你想要讲述的故事情节。
所以，最好的网站不可能在2天内建成，需要更多的时间去打磨。
IAmBinadam令人惊艳的叙述设计
滚动叙事的项目通常需要大量的时间和精力。不过，这样做的结果是值得的。页面变成“活的”，每一秒都有新的事情发生，所以在阅读时很难感到无聊。
那么移动端APP呢? Pure是一款约会应用（彩云注，这个应用在app store可以搜到，推荐大家安装一个体验一下，非广告），它创造了一种我称之为“tappytelling”的故事(当你第一次点击并打开应用时，它就会被激活):
Scrollytelling是为用户而创建的，用户很喜欢它，不需要到其他页面去阅读整个故事。相反，网页设计的整个故事都是事先考虑好的，并尽可能以最有趣的方式设计出来。
如何在2022年做出一个还不错的企业网站？你不会想告诉用户你是“XX领域公认的领导者，该领域最好的之一”。这种标准的广告表达并不传达任何有价值的信息。
最好不要用形容词，而是用事实来说明:你有多少分支机构，在哪些城市，谁是你的客户，以及你是如何帮助他们的。抽象信息是不可靠的。但如果你有很多想要分享的数据，你需要让它不仅简单，而且有趣。
数据可视化有助于以一种吸引人的方式传达正确的信息。它也可以与滚动叙事（Scrollytelling）紧密结合。以下是IAmBinadam展示数据的方式:
通过去除数据集的复杂性，使信息更容易让读者感知。
不同级别的数据具有不同的大小，这样用户知道应该先从哪里查看
读者可以很快注意到作者试图通过图片引出的结论。考虑到如今人们消费的数据量巨大，那些干净整洁的数字带来的正面影响更大。
有些图表乍一看甚至不像图表，这使得它们更加能被注意到
还有一种现象叫做“新冠后遗症”。这是Covid对公司及其员工的长期影响。根据英国国家统计局的数据，2018年，压力和焦虑的平均得分约为2.7/10。自新冠疫情发生以来，得分已升至4.0/10，很少低于这一水平。同样因为大流行，在过去两年里工作量增加了4个小时。
人们压力太大，卷的太辛苦，以至于不愿去看复杂的数据。
设计师做好数据可视化，以保持人们的注意力。记住，复杂的信息通常被忽略，因为读者试图节省他们的时间，更有可能使用滚动按钮。
Illustration by Mona Chalabi
以下是我们推荐的一些表示数据的方式
1）图表和曲线图
2）插图
3）静态信息图
4）互动信息图
Illustration by Ink Factory
一个好的图表，或者任何其他形式的数据可视化，都应该具有在Edward Tufte的“定量信息的可视化显示”中描述的特征。在他的书中，Tufte通过图表解释了好图表的3个原则：
1）展示数据的图形元素与数值总数的比值应趋向于1。简单地说，应该删除一切不必要的元素，保持整洁。
2）充分利用好画面空间。也就是说，需要将数据编排的更紧密
Graph by Hootsuite
3）客观地描述数据。不要使用夸张的图表，可视化数据可以看起来很酷，但真实永远是更重要的。
根据We Are Social的数据，2021年有52.2亿人使用手机，约占世界人口的66%。自2020年1月以来，手机用户数量增长了1.8%(9300万)，而手机联网总数量增长了7200万(0.9%)，到2021年初达到80.2亿。
过去一年，社交媒体用户的数量增长了13%以上。到2021年初，社交网络上已有近5亿新用户注册。根据App Annie的数据，Android用户每天花在手机上的时间超过4小时。2020年，安卓用户上网时长超过3.5万亿小时。
令人印象深刻的数字，是吗？似乎到2022年，为产品做一个APP将成为必须拥有的东西。如何知道你的公司是否真的需要一款应用？有以下几点可供评估：
1）用户主要通过移动设备访问你的网站这是你应该了解的重要数据。
客户和你在一起的时间越长，你就有越多的机会去吸引他们，了解他们的习惯，并给他们想要的东西。（彩云注：这就是为什么各大厂之间都在拼命抢占用户的在线时长。）
2）帮助内部业务流程更加有效。
如果你想要提高员工的工作效率、改进工作流程或增加利润，那么就制作一个可以帮助管理业务流程的移动应用。
如今，像这样的手机应用使企业能够执行越来越复杂和多样化的任务，加快日常重复操作和文档管理。
3）实现一些网站上没有的新功能。
如果你认为APP能为用户打开新的触点，并让用户体验更加友好，那么它就值得考虑开发。问问自己的APP能提供什么新的商业机会？例如，随着疫情的蔓延，许多人开始用上健身APP在家里锻炼。
4）竞争对手做的情况。
要了解竞争对手在做什么，他们是否有APP，能做什么，以及他们是否真的对用户有用。
查看App Store和谷歌Play的统计数据。下载和评论的数量可以告诉你用户是如何使用竞争对手的应用的。如果他们的服务真的很方便而且很有必要，那么你就容易被甩在后面。
5）复购率。
一个应用可以帮助你留住那些习惯从你那里购买的人。如果想为老客户开展促销活动了，给他们发送一个通知就能完成，成本更低。
在正确的时间提供的报价越有吸引力，人们购买的可能性就越大。
6）促销工具。
有了应用，你就不需要花钱设计和制作实体卡，客户也不需要随身带卡。将促销计划整合到APP，并分享有用的促销信息。
开发手机网站比开发手机应用需要更少的工作量，这反过来可以降低整体推广成本。
这部分是由于响应式设计的出现，它允许你根据打开网站的设备屏幕来调整网站。至于APP，它们必须为许多移动平台单独编写:Android、IOS、Windows等。
一些设计师认为“前端驱动的网络体验”会是2022年的一个好机会，我非常同意!（彩云注：在国内，现在开发小程序的肯定越来越多了。）
我们一开始并没有将其放在首位，因为这并不是一个新的趋势，在很久以前设计师们就已经设计了很多3D图像和动画了。
Cardi B rhymes with 3D
3D技术已经在过去流行了很多年，但它不会很快消失。此外，我们预测3D图形将变得更加多样化和包容。
在过去的几年里，3D艺术和动画已经出现在各种UI设计趋势评论中。这意味着越来越多的设计师将它们整合到页面中。
3D当然应该成为2022年最热门的趋势和预测之一，因为与经典动画相比，逼真的3D形状结合动画总是引人注目的。
“从技术上讲，通过3D更容易传达更多内容，因为它比平面图片更接近我们的感知。3D插图更有深度，信息量更大，也更具互动性。"
许多设计师将3D对象无缝地“安置”在2D空间中。它允许创建更有趣的组合，也作为一个优秀的工作方法蕴藏着巨大的潜力。
乌克兰政府网站用3D手模拟了黑客帝国
注意一点：在整合3D图形等重量级内容之前，确保你的应用性能是OK的，能够快速加载所有元素。
Meta的logo既不是2D也不是3D。或者两者兼而有之?这就是即将到来的2022年的莫比乌斯带和薛定谔的猫。
Meta logo的变化(3D版本)(https://design.facebook.com/stories/designing-our-new-company-brand-meta/)
（彩云注：这个概念在去年简直不要太火，未来几年肯定还会是一个大的趋势，设计师也需要保持关注。跟着趋势走，易于放大自身价值。）
越来越多的公司在网站和移动应用中使用动画，以提高用户的沉浸感和体验，使内容更有趣。
动画是2022年重要的网页设计趋势。2022年，如果没有它，你的产品很可能会看起来就像个半成品。混合风格的动画越来越受欢迎:定格动画和3D动画的结合，2D动画和3D动画的结合。设计师这样做是为了获得不同寻常的风格解决方案，以及提高最终产品的质量。
2022年，动画设计将是品牌市场定位的重要组成部分，想想一个公司新的视觉形象——动画形象。随着这个领域的专业设计师数量的增长，实现新想法的机会也在增加。
1）讲故事动画。
可以通过在界面和用户之间建立情感联系来传达信息。
加载动画Yoichi Kobayashi
2）更有趣的加载。
用户不愿意等待，除非载入画面很有趣。带有百分比的动画不仅可以分散用户的注意力，还可以告知他们加载页面需要多少时间。使用进度条或者任何你能想到的可以显示时间流逝的东西。
3）光标效果。
用户可以精确地观察光标所在的位置。通过添加智能互动动画，对这个光标作出反应来探索网站。这种效果在21世纪初非常流行。如你所知，流行趋势往往每20年就会重演一次。
4）动态排版
你有没有想过让字母跳舞?
据Statista统计，2020年全球动画市场达到了2700亿美元。趋势是视频，而不是静态信息。全球品牌在社交网络上使用动画制作广告。毫无疑问，动画插图的优势是它们非常灵活和多样化。
宝马历史动画
这样的作品通常用于两种情况:
1）用于解释视频
2）电商广告
动画解说的趋势出现在几年前，解说视频清楚地显示点击的位置或公司的项目是关于什么的。
在招聘或商业视频中，用户更喜欢看画出来的人物，而不是抽象的形状或物品。画出来的人物可以唤起情感共鸣，就像活着的人一样。
微交互是帮助用户浏览网站或应用的小界面变化。通常这些是作为提示用户的视觉或声音效果:它们显示发生了什么，将导致什么操作，下一步需要做什么。
图片来源awwards
动画交互将为你的设计注入活力，并有助于保持用户粘性。关注每一个细节是设计师工作的关键，因为设计中的所有元素都可以带来积极的用户体验。
重要的是要达到元素的和谐，而不是把注意力分散到界面的各个方面。微交互作用的一个重要部分是颜色，它们为界面元素增强价值。
微交互有助于页面导航，解释它们的功能。最重要的方面之一是加快和简化以前冗长的功能，以实现特定的行为。
2022年，在线品牌面临着新的挑战，需寻求新的解决方案，其中之一就是动画logo设计。
图片来源Toridori
动画logo主要有以下几点营销优势:
1）吸引注意力。这意味着它们有助于提高品牌知名度。
2）有助于提高SEO。谷歌更倾向于动态内容，带有动态图形的页面更容易吸引用户。
3）在移动端看起来更好。丝滑的动画看起来比静态的logo更有趣。
4）最重要的是展示了历史。静态logo背后的想法正在动画中发展。由于这一点，在几秒钟内，你可以展示品牌的使命，甚至它的价值!
一家洗衣机[公司]的标志(https://www.schulthess.ch/)
现在有很多设计模板，可以很容易地用字体制作一个动画logo:
图片来源Shabello, Bobby Voeten
记住，设计趋势总是在变化的，但是设计的意义不会变。如果你不能深刻理解这一点，那么任何设计趋势的文章不能帮你做好设计。
这是前面提到过的世界上最老的猫。她今年34岁(相当于人的160岁)
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
蓝蓝设计的小编 http://www.lanlanwork.com