设计趋势每年都在不断地变化及轮回,多年前的风格技法在结合了当下的设计元素后,又会给我们展现出不同以往的主流时尚。
“趋势不一定每年都会更新,但趋势是我们设计的风向标。”
基于对网络数据的搜集及分析,我们对2023年设计趋势做出了预测。
无论是否顺应趋势,我们都应该了解趋势,拥抱变化,这才是我们设计师的准则。
借助当今的软件和技术,3D创作已经不再被神话,越来越多的设计师开始在自己的作品中运用3D元素。
下图是Droga5为格林威治(Greenwich)创作的一系列视觉设计,这组设计利用3D图形,创造了更醒目的视觉效果,将格林威治宣传为伦敦的新创意社区。
在手机品牌宣传物料中,设计师将3D元素与手机进行了紧密结合,这样的视觉样式在市场中很快便能脱颖而出。
提起“酸”,大家下意识会想到酸的味道,而所谓的酸性设计更多表现的是一种设计理念。
酸性设计大多画面元素丰富,各种金属、玻璃、流体渐变、镭射等科技感的元素都会运用其中,这也导致这类作品十分强调艺术的视觉冲击性。
乍一看酸性设计会给人一种混乱失调的感觉,而实际上酸性设计并不止是某一种单一的设计风格,而是一种视觉情绪的表达。当下的暗黑金属风、二次元的可爱风、明显的幻彩渐变风格……往往都含有酸性设计的影子。
回看设计领域每一年的发展,“复古怀旧”一直是必不可少的关键词。
无论是品牌形象,亦或是包装设计,设计师们频频用现代手法诠释复古之风。
还有传媒集团CNET的品牌重塑,在现代时尚元素的基础上,还融合了复古插画,整体设计从1950-1970年代的美国新闻行业中汲取的灵感。
最近,衬线字体在品牌设计中的出镜率极高。
不少网站的设计都是围绕着衬线字体作为构图中唯一或主要的设计元素而存在。
Stradivarius是诞生于1994年的西班牙女装品牌,与ZARA隶属同一公司。
2022年2月初,Stradivarius推出了全新的Logo视觉,衬线字体更容易彰显女性简洁现代的气质外,同时兼具女性力量。
近两年,NFT可以说是对设计、艺术、技术行业产生冲击最大的新事物之一了。
NFT与平面设计联系起来,就是我们所说的数字平面艺术。它的到来对设计师影响有很大变化,横向能力要求有所提高,比如了解虚拟数字化设计,以及对全新审美和新三维技术有更高的要求。
以下这幅《Metafisica》便是非常热门的NFT作品。
表情符号在如今是一个超越文本并能得到广泛认知、跨越文化和多领域的视觉语言。
单一的枯燥图标很难满足多元化场景下情感的表达,于是,动态emoji图标来了,它能带来更强的视觉欣赏体验。
高饱和度色彩是年轻的色彩,它是先天的乐天派,同时也是情感的直接表达。
可尽管“吸睛”对品牌而言十分重要,但在设计之余要注意色彩平衡,以免混用色彩,很容易引起视觉疲惫。
极简主义杜绝一切多余的装饰,形成独特而简单的视觉语言,用最简洁的表现形式勾勒出产品最基本的形态。
简洁的图形设计摒弃了多余的图案、文理等装饰样式,为真正重要的信息创造了呼吸的空间。
留白,是最高级的美。
将富有表现力的手写字体写在设计中,能为作品带来不一样的氛围感。
随手一写,便是一幅“画”!
2022年,我们在Dribbble或Behance中会发现很多设计师都开始有意识地采用“玻璃拟物化”美学的设计。相信在2023年,我们会看见更丰富的表达~
毛玻璃效果广泛应用于UI设计之中,在摹客DT中也能快速完成。
使用玻璃拟物化设计的界面,由于毛玻璃的通透性,会呈现出一种虚实结合的美感。
除此以外,我们还可以看到的,这一趋势已经明显转移到了玻璃和水晶质感上,而且以令人难以置信的用立体拟真度将图形设计提升到了一个全新的高度。所以,2023我们也将看到更多与全息和3D趋势相辅相成的透明质感和逼真的玻璃背景等元素的设计。
2023年的设计趋势给我们展示了设计的无尽可能,设计师们可以创作出更多超乎寻常的非凡设计,为用户营造出独树一帜的全新体验。
身为设计师,我们要持续积累优质的设计素材,要知道设计趋势因人而异,我们能做的就是选择合适的风格应用在设计中,才能发挥它不可估量的价值!
作者:摹客设计云
分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
关注趋势本质上就是关注未来可能存在的形态。很多营销需求和优秀设计趋势是相互关联的,两者之间的关联更像是一种动态的同步。
很多时候趋势并不一定是全新的东西,它们往往是服务于当下和未来的需求,有很多趋势存在了一些年头,它们在现在发挥着作用,但是在未来可能会发挥更大的效用。所以,当我们在查看这些设计趋势的时候,需要注意,它们必须是服务于用户,服务于品牌和企业。
更多设计趋势:
的确,极简主义一直在某种程度上流行,但是 2022 年出现的新极简主义的浪潮,比起传统的极简主义设计更加在意用户注意力的吸引。这种新极简主义的设计会采用更加大胆、 生动、明亮的色彩来填补留白,这种设计使得设计保持简约的同时,更加富有调性,在简约的框架下制造一种别样的华丽,营造令人亢奋的氛围。
干净清晰、生动的新极简主义风格在品牌推广的过程中也更加受欢迎,大量的留白和跳脱的视觉焦点让整个视觉更加抓人眼球,也使得品牌给人的感知更加新鲜独特。
新极简主义风格,对比度在深色主题下得到了进一步的提升。
这种设计并不意味着传统的极简主义已经被用户抛弃,很多企业依然会青睐更加传统的单色极简主义设计,不过其中多少会增加一些明亮的色彩作为点缀。
从 1950 年开始,粗野主义就是年轻化、反叛、反主流、标新立异的设计风格。在过去的几十年当中,这种设计风格一直随着时代的发展而自我迭代,新粗野主义更加强调创造力、 大胆前卫的新奇元素,而这也正好符合很多品牌对于新奇性的追求,它可以瞬间抓住用户的注意力。不过,这种风格的使用需要控制好程度,否则很容易失控。
粗野主义经久不衰的秘诀是什么?是未经打磨、粗粝而原始的素材,它让观看者忍不住想要改进它,这种未完成的原始感会在情感上吸引观众,这在营销上是无价的优势。
粗野主义在设计上并非看起来那么粗糙,相反它更加需要高度的专业性来控制它粗野的程度。设计师需要敏锐地感知到观看者改进地欲望,让设计粗野而不低级,原始而不拙劣。
新粗野主义柔糅合了极简主义和大胆地排版,它依赖看似粗野地视觉冲击:高对比度、粗粝地阴影,撞色、 简约的背景、不对称的布局、 未经修饰的照片,新粗野主义偏好基础款的加粗字体,跟注重可读性而不是舒适所制造的视觉吸引力。
这个网站就是一个典型的例子:
这一趋势在绝大多数的趋势排行榜当中,都占据首位。随着技术的进步,用户和数字媒体之间的交互正在增加,引人入胜的交互已经不仅仅停留在响应式设计当中,如今它已经开始关注心理和生理的逻辑,开始全方位地调动视觉、听觉、 嗅觉、触觉、味觉乃至于运动体感。
这种趋势旨在帮助用户体验真实地感觉,在完成交互地基础上,触发用户地情绪反应和生理反应,热气腾腾地馅饼视频让人垂涎,游戏中虚拟地对手让人肾上腺素激增。
交互所制造地参与感,在某种程度上是实际地物理产品地替代物,用户可以从不同角度来缩放查看产品,了解细节,选择尺寸,挑选颜色。
交互过程中,手指和屏幕之间地触摸交互开始变得丰富,开始变得有意味,它成为了用户和虚拟世界之间沟通地桥梁,开始有游戏地乐趣,有更具设计感地交互环节。用户也可以根据自己地喜好,对界面进行更多样的个性化处理。
具有参与感的交互是我们的未来。
2022 年是疫情开始后的第三年,隔离使得人们对于照片所呈现出的故事和情感,有着更为强烈的情绪反应。在极简主义设计当中,富有表现力的人物照片是最为流行的元素之一,这类照片搭配上简短的文字,简练的口号,一些带有宏大叙事特质的文字引用,时常能够更好地营造出故事感。
不用担心主屏页面太长没人看,只要随着用户滚动,故事会随之逐步展开,用户可以在照片、 标题、视频、动画和文本地指引下,看到整个故事有步骤地呈现。
在这当中,富有表现力的人物照片是吸引用户注意力的关键要素。
另外就是页面的 Banner 的部分,强调主题和内容的标题文本,是用户从屏幕上获取的重要信息之一。
如今的用户越来越偏好在详细阅读内容之前,快速浏览一下全局的做法,这也使得 Scrollytelling(滚动叙事:通过滚动触发音频、视频、 动画效果的一种技术)这种渐进式叙事方式,可以像电影一样将故事呈现在用户眼前。
Scrollytelling 适合大量的内容呈现,比如对于公司和产品的描述,对于数据呈现或者认知要求较高的内容,它适合学习和记忆性内容的呈现。
3D 图形设计正在越来越流行,因为它确实是吸引用户注意力的最主要的工具之一。3D 图像无论有多么奇异,它本身都会被认为是有真实感的,明确的体积,精致的建模,所有的一切都令人着迷。很多时候,用户停留在有3D元素的页面上,是为了更细致的欣赏。
3D 图形设计的趋势从来都没有减退,它正在进入更多的领域,甚至进入了品牌推广的领域。3D 动画图标比过去更能吸引用户的注意力。
我们通常说的抽象插画,指的是带有明确几何特征的插画,它们被广泛地应用于网站和 APP,在社交媒体和包装设计中也越来越多的存在。
抽象插画之所以会如此成功,是因为它们大多有着吸引人的生动色彩和良好对比度,视觉上的美感和极简主义的风格特质,它们成为视觉的焦点,为整个设计提升视觉。
抽象插画在品牌营销场景下的应用也很多,它们在这个时候是贴合品牌推广的诉求的:通过色彩和形式来吸引用户来关注品牌的形象和名称。
这种趋势的特别之处是其中的文本字体元素是完全独立的。这些文本不仅仅是用来传递信息的,它们还充当着拉升页面视觉效果的重要作用,它们结合动画和交互,成为页面中醒目的亮点。
超大字体的优点在于,它和很多设计风格是相得益彰的,加粗的大字体在极简主义风格的页面上不会显得突兀,在元素丰富的页面上,同样可以起到优秀的点缀作用。这些文本内容可以和纤细和小尺寸的元素协同,而后者则衬托出它本身的醒目。
超大文本字体的另一个好处是有效地减少网页上的图像的使用,缩短加载时间,提升移动端的可用性。
这种设计元素最重要的,是选择易读且符合品牌调性的字体。
这么多年来,我们看到来这么多的趋势,很多趋势是一以贯之持续出现,有的趋势则如同流星一样一闪而逝。好的趋势不断迭代升级,并且持续存在,但是最重要的,始终是那些选择合理的方案,并且坚持改进设计,让趋势服务于终端的产品和用户的设计师。
让趋势服务于你,不要盲目地追趋势!
作者:陈子木
蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加微信ban_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作,也请与我们联系01063334945。
分享此文一切功德,皆悉回向给文章原作者及众读者. 免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
随着移动互联网的发展,原本PC互联网连接商业支付、购买商品、浏览信息流等的能力已经转移到移动端,而PC互联网更加专注于其他领域的优势:
下面是我观察到的目前比较主流的交互设计点,与大家分享。分别是:
典型的案例就是苹果的Mac系统与Ios系统越发趋同,都采用了卡片化、模块化,整个交互规范、视觉感受都一致以达到多端统一。同时信息可以自由流转:比如在同一Apple账号下,Mac与IOS中复制的信息可以进行同步粘贴。备忘录、日历、提醒事项、录音中的信息进行流转,在任何一台Mac上登录Apple账号后都可以进行同步。
在国内,B站的网页端与App端的体验也逐步趋同,框架设计上更加卡片化与扁平化。信息流转上,手机上暂停的视频到网页端继续播放,实现了无缝切换。
淘宝首页:从过去复杂的信息流导航变为现在更加简洁的个性推荐卡片。整体体验与淘宝手机端一致。
总结:精简无关信息,关注最重要的核心任务,减少用户跳出,沉浸式心流设计。
许多网页接入腾讯、阿里的生态,支持扫码关注公众号/手机验证码即可完成注册。省去了用户编辑个人信息、输入邮箱、输入密码等复杂的交互流程。
心流式体验设计是这几年很热门的词,指的是通过优化用户体验让用户能够沉浸式地高效完成目标任务。这需要做到产品的交互习惯满足用户使用习惯,并且交互流程满足用户预期。过于频繁的弹窗打扰和页面跳转的等待时间都会影响用户进入心流。
比如,例如飞书审批,审批详情不需要跳转,点击卡片即左侧弹出详情页弹窗;让用户可以在同一个页面即可浏览信息,不需要进行跳转到新的页面进行查看,方便用户完成批量的审批任务。
再比如:阿里云,开通服务的时候不需要跳转,而是在侧边弹出订单弹窗,方便用户操作。
上面说到,频繁的弹窗提醒也会影响用户进入心流,用户在对表单、画布中的内容进行删除的时候,如果使用全屏二次提醒弹窗,会感到创作过程被打断。
钉钉宜搭:卡片画布类产品,删除操作时,不局限于大弹窗,而是用靠近按钮的小弹窗,使鼠标的滑动路径更短,操作更加简便;并且在不过多打扰用户的前提下,完成了目标操作。
复杂性守恒定律由Larry Tesler于1986年提出,也称泰斯勒定律。指的是“任何系统都存在其固有的复杂性,且无法被减少,只能设法调整、平衡。我们要考虑的是,怎么样更好地处理它,让用户简单、高效地使用它”。
很多的中后台系统中很多表单会存在大量的配置项,这些配置项是否可以简化,让平台变得更简单智能?大部分时候答案都是否定的,过度追求简化往往容易弄巧成拙。功能逻辑易于解释与理解才是更好的方案,当你试图简化降低复杂度,可能在其他地方埋了雷。
其中一个解决方案是将复杂度转交给系统,苹果公司的黑盒理论与此互通;就是用户不需要了解系统或功能背后的实现逻辑,只需要关注呈现在用户眼前的交互界面即可。如今数据智能化处理正不断发展,我们也看到了智能化在PC端领域的应用。
剪映相比于老牌视频编辑软件更加简单,提供各种在线特效模板,来降低任务复杂度。相比传统的PR、AE软件需要本地存储预设文件,或者手动编辑简单了很多。用户不需要知道背后的实现的技术原理,也不需要掌握过多的特效制作、调色技巧即可完成视频的剪辑、调色工作。
推荐组件功能:用户在进行流程搭建时,不需要从左侧组件区拖拽组件,而是点击连接线中间来添加组件。如果可以其实还可以更进一步,就是根据后台数据分析创建目标流程需要的组件,向用户主动推荐相关组件,以此来降低用户的创建门槛。
随着传统业务向互联网转型越发普遍,线下业务流程转到线上的需求场景越来越多,一个单一的系统不能完全满足所有的业务场景需求,由此需要一个更加灵活模块化的系统来针对不同的应用场景来应用不同的产品架构。而该系统中的功能框架、交互组件又可以重复利用,于是更加灵活、模块化、可自定义配置的系统后台越发受到欢迎。
飞书、钉钉易搭内的审批流程、会议系统、工单系统都可以通过模块化的组件进行高效搭建,不需要代码即可像搭积木一样实现用户的自定义需求。
阿里的天猫优品电器店线下门店设计平台,整理了线下门店所需的16个模块(前台、小家电中岛、洗衣机、橱窗、空调、吧台等),通过线上三维化场景直接进行可视化设计,所见即所得,并且能够模拟现场灯光效果,根据门店现场规格,直接在三维空间里修改,快速导出效果图;非常高效地完成了其他门店的需求化定制。
抖音网页端的用户体验沿袭了手机App端的风格,用户进入网页的核心目的就是看短视频打发时间,于是进入首页即可看短视频,不需要用户手动选择分类,并且手机端的用户偏好通过用户的账号同步至网页端,有了很顺畅的用户体验。
相比快手网页版,快手延续了常规视频网站的交互方式,将视频内容分为短视频、直播、同城、长视频、小剧场等多个类别,由用户自主去选择观看的内容,内容虽然更加多元,但确实路径过长,不够直接。
再举个例子,新版的淘宝网页端不再像个门户网站导航,而是通过数据分析用户喜好来主动推荐代替用户自己选择。用户来淘宝网页端,其实并不是买东西,大众用户已经习惯了在手机上进行支付,到了网页端反而会不适应。用户来到淘宝网页端的更多目的就是逛,看有没有自己想要的东西,遇到喜欢的,就点进去看了。于是新版淘宝通过个性化推荐把过去复杂的活动运营页板块、特价板块、品类板块替换掉了,让用户在网页端获得更好的“逛街”体验。
而京东,在首页做了复杂的流量分发设计,通过不同的频道、不同的板块将用户引流至相关的专题页面,再进行商品浏览。本质上来说,用户来到淘宝、来到京东的目的都是因为闲,而淘宝的通过数据智能,大数据精准推荐用户喜欢的商品,简化了用户的使用路径,并且使整体页面更加简洁。
网页的官网、首页承担着产品介绍、流量分发、增强品牌印象等的职责。我观察到越来越多产品官网都开始采用3D元素、视频背景、大图元素、微动效来让页面呈现更加具有质感和动感。
它是由Web3D技术的发展而兴起,能够给网页Banner带来更强的视觉吸引力,同时也强化了公司融合了AI技术的品牌印象。如法大大官网、腾讯云、阿里云的首页Banner展示。法大大首页Banner,鼠标滚轮向下滚动3D元素会相应产生变动,文案与元素一静一动,对比明显,也更易于用户注意到文案信息。
大疆官网首屏采用了全画幅大图的形式展示热门产品,下方的产品推荐页自动播放宣传视频,提升了页面的视觉冲击力,展示了其科技属性。
疫情时期,线上办公的需求和频率激增,线上协作兴起,许多办公软件都有了多人场景编辑功能。特别是对于复杂的项目,需要团队成员共同完成,协同合作的功能越来越受欢迎。
比如我们熟悉的figma,逐渐取代了传统UI设计软件ps、sketch等的头部地位,其中的项目协同功能更是广受欢迎。只需要发送项目链接邀请成员即可进行项目协作,还支持多人标注、语音沟通,大大提升了工作效率。
许多办公软件也都上线了类似的功能,比如幕布可以通过设置权限、发送链接或二维码来邀请协作者共同编辑文档,为产品的使用场景提供了更多可能。
曾鸣在《未来商业20讲》里说:“未来的互联网世界的两大趋势是数据智能、网络效应”。
这在PC端也得到了印证。淘宝网首页、抖音首页、哔哩哔哩网页端将PC端与APP端的数据进行互通,并对用户行为偏好数据进行分析,为用户提供更加精准的信息流的同时,还使得页面的交互更加简单,视觉效果更加简洁,过去依赖用户自主选择进行流量分发的形式将会越来越弱势。
在工具类产品中,利用数据智能化可以将用户操作上的复杂度转移给系统,从而降低用户使用门槛,提升用户体验。与此同时,工具类平台也越发灵活化化,通过模块化设计来自定义搭建不同用户的使用需求的产品,还能节省资源建设成本。
网络效应的部分应用体现在用户在使用工具类产品中,不再是孤单的个体,而是能通过线上协同,让用户与用户之间能够产生共同协作,共同交流,更加方便地完成任务。
作者:为美好而设计
转载请注明:站酷
分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、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咨询、用户体验公司、软件界面设计公司
Dribbble 平台对于互联网 UI 界面设计有着举足轻重的定位,对 Dribbble 设计的研究会让我们看清设计的方向。
为了保证这篇文章的质量,Dribbble 年度的每个作品都超过 550 赞。在此原则下挑选了 828 件作品,作品总的大小为 2.2G。
从挑选出的 828 件作品中,排名前十的作品中 9 件为 B 端设计,另一件作品也是 B 端产品 C 端化的产物。其中:
明眼人都能看出其中的比重关系,B 端设计再次大火,为什么是再次?因为 B 端设计之前火过,只不过没有赶上一个好的时代,在 C 端设计风光的十年里而忽略了其存在。随着 C 端市场饱和与数字化的浪潮下,实体经济、ToB、ToG 的产业再次迎来了它的曙光。视频动效的作品占比也已超过 C 端界面设计,相信今年视频动效作品占比还会再次提升。
Dribbble 年度最佳作品来自大家最熟悉的 UI8 团队中的 Tran Mau Tri Tam ✪,作者来自越南西贡,最佳作品截止目前355K浏览量,2933个赞。
为什么看似平平无奇的作品却能获得 Dribbble 年度最佳作品呢?既不是 C 端也不是纯 B 端的作品,更像一个网页与平面的结合体。如果去掉搜索图标、分类图标和按钮,你可以理解它就是一个平面作品,一个字体加几何形体构建的作品,为了丰富画面的层次,让画面更加的活泼采用了多彩加几何色块,让标题阅读有停顿感和呼吸感。faster 底部的横线让它从标题文字中脱颖而出,这种使用线条突出重要信息的设计也是今年Dribbble 设计流行趋势之一。
MetroUI 是 Windows8 的界面设计语言,在 2010 年至 2013 年间曾经风靡一时,那也是移动互联网的发展元年,现在国家推行实体经济、数字化带动 To B、To G 的发展元年,通过几何色块(MetroUI)实现 B 端产品与 C 端设计风格的传承与衔接,你会发现历史总是惊人的相似。最后背景结合今年最流行的微软风,毛玻璃的多彩高斯模糊渐变风,年度作品当之无愧。
最后来看下按钮的设计,正常的按钮要么文字加色块,要么左图标加右文字,它设计成左文本加右图标,更加注重信息的可读性和易读性,也体现 B 端设计重功能和交互体验,视觉点到为止的设计理念。
下面我们来欣赏年度最佳作品里面的流行趋势吧。
1. 易读性(停顿感)
字体三原则:可读性、易识性、易读性。当你同时读一篇文言文和一篇设计文章,肯定设计文章的内容可读性更好。易识性是用在字体设计上,不能过于浮夸的改变字体骨架、形体而不易识别。易读性和每个位设计师都息息相关,因为我们都需要编排文本。当我们小时候写作文时,不会写的文字可以用拼音代替。这时候读者读到拼音时会有停顿感,更加适合用户阅读。
通过给用户制作停顿感来增加用户的易读性。可以在相关联文本后面添加图片、表情、图标来更好的理解文本内容,丰富文本内涵。比如情侣间表达爱意时会输入文本,“我爱你”、“我 Love 你”、“我 ai 你”、“我❤️你”,哪个更加会有情感共鸣呢?不言而喻,相信你心中已经有答案了。
2. 曲线
在标题文字上添加曲线来突出重要文案是 2021 Dribbble 最流行的趋势之一,第一个设计目的就是突显文字,其次就是想表现铅笔真实书写的感觉。之前很多带有签名的设计中,签字的文本都是手写体的感觉,手写体对比电脑的机械字体会带有一种人文气息,也会让两者之间产生一种对比、矛盾。
除了突显文本外,曲线还有视觉引导的作用。通过视觉引导让用户按照设计师编排的顺序进行浏览界面。当然还有比这更科学的工具就是眼动仪测试,通过真实用户眼睛浏览界面显示对应的热点图。
3. 多彩高斯渐变风
多彩高斯渐变风是从色彩的角度来传达和丰富画面的,多彩高斯渐变风其实是从制造矛盾到平衡矛盾的过程,多彩渐变多为冷暖对比来制造画面的冲突,需要控制冷暖画面的大小来实现平衡。主流的还是以暖色突显为主。多彩渐变主要起到活跃气氛、吸引目光、平衡画面的作用。
多彩高斯渐变还可以结合轻拟物、几何图形、三维等新的组合方式去创新,给用户呈现一种更加新颖的视觉表现形式。最后我们还是要回归到内容上,为了更好的传达信息需要去设计与内容相匹配的视觉风格。
1. 侧边栏 Sidebar
B 端设计的火爆带动了 B 端相关模块设计,更多的人也愿意尝试 B 端相关模块设计,侧边栏作为产品架构中重要的导航系统,好的侧边栏设计能为用户带来更好的效率。主流侧边栏都做了展开、收起、拖拽等交互效果,也是受限于 PC 屏幕为展示更多数据而腾空间。侧边栏主要承担的功能有导航、分类、自定义筛选、共享、新增等。Dribbble 的 B 端产品设计已经不再是假大空概念设计,而是一套实用美观可落地的设计。
2. 仪表盘设计
仪表盘设计是一个很好的隐喻,想象一下开摩托车或汽车主驾驶前面的屏幕,汽车仪表有燃油表、车速表、里程表、水温表、转速表、故障指示灯等。B 端类产品后台界面的仪表盘设计也需要展示一些重要的数据和各种状态,大体分为侧标栏、导航栏、待办任务、个人信息、报表数据、消息中心、快捷入口等。当然最重要的就是报表数据,团队收益、任务进度、转化比例、新增、存量、团队工作时长等都是老板或领导关心的内容。每个公司业务不同、每个人员权限不同,自定义的仪表盘也各有差异。重要的是突显数据和业务状态,需要分层级系统性去思考和设计。
3. 流程设计
复杂的事情简单化,简单的事情标准化,标准的事情流程化,流程的事情自动化。流程设计是每一个企业核心功能和业务,可自定义的管理流程系统搭建也是 B 端产品设计的难点,需要对业务高度抽象,让每一个业务人员可自定义的流程才是好的流程设计。
4. B 端 C 化
B 端 C 化是 B 端产品设计的视觉表现力慢慢往 C 端产品设计的视觉靠齐,国内 B 端产品界面设计视觉水平还有很大的提高空间。除了视觉上的提升外,由于业务的发展,B 端产品也开始移动化、智能化,国内主流还是通过小程序、H5 来现实 B 端产品 C 端化。
5. 轻代码化
轻代码化是一种低代码赋能无代码的方式,弥补无代码拓展性差、覆盖场景少的问题。在保有无代码灵活、易用、快捷的同时,又能覆盖低代码使用场景。简单理解就是无需代码开发即可如搭积木般快速、灵活地创造属于你的个性化管理系统,轻松实现多元业务场景的数字化管理。
轻代码化将功能进行打包,升级成全局可以用的配置,技术人员配置好后,业务人员在应用编辑时直接选择使用模版,绑定对应的变量即可使用。
1. 人文气息
为什么人加色块的组合方式能流行起来?还是 B 端行业流行带动的。B 端讲的更多的是企业对企业。企业对企业除了讲行业解决方案外,还需要传达公司的价值观、使命、愿景。人加色块的组合方式非常适合体现公司的企业文化。对于一家全球化的公司不同肤色的人物组合在一起,这种人文气息和价值观已经就不言而喻了。
当然企业也需要进行营销,抓人眼球。几千年来的遗传证明了,人的大脑对食物、性、动的东西、人脸和眼睛、危险的动物很敏感。人加色块的组合方式也具有抓人眼球营销的功能。真可谓一举两得。
这种风格更适合大公司,国内的一些手机厂商 OPPO、VIVO 等也会通过手机+背景+人物来体现科技与人文的结合,而对于中小型公司产品差异化和行业解决方案展现应该还是重中之重。
2. 毛玻璃效果
毛玻璃效果加大了模糊程度,透明效果更加扁平,很好的顺应当下 UI 扁平化的设计趋势。苹果 Mac OS Big Sur 系统的图标、界面中运用了大量毛玻璃和半透明元素,界面更扁平。至于 C4D 三维彩色玻璃的视频教程可以在 B 站搜索“透光艺术-C4D 创建彩色玻璃的 4 个技法”,完全能满足 UI 设计师。当然还有一个好消息就是 Mac 用户可以享有 OC 一年免费的使用权,具体安装购买方法上某宝就可以轻松搞定,真香。
3. 轻拟物
轻拟物这几年一直流行,在 UI 设计中趋于稳定的位置。从写实到扁平再到轻拟物,其实是设计师们一路不断探索的结果。本质就是光影对形体产生的视觉感受。在色彩中对高光、亮面、明暗交界线、暗面、反光(环境光)五个部分的处理。写实三维的图标等设计更适用于简洁的画面中,扁平等设计更适用于复杂一点的界面中,比如 B 端产品界面中的功能图标。轻拟物可使用的范围更广,效果更佳。Sketch、Figma 软件对于渐变、高光、投影、高斯模糊处理已经非常简单且出彩。
4. 简洁设计
简洁设计遵从了密斯·凡德罗的“少即是多”的设计原则,在 B 端产品界面中更加需要简洁设计,我们最熟悉的 Sketch 软件界面已经是相当的简洁了。回到现实当需求功能不断增加,产品界面的编排如何取舍,如何保证界面的简洁是设计师需要深度思考的问题?如何与上级沟通?该功能是否可做可不做?是否需要埋点用数据说话?如果只是一味竞品有我们就需要有,功能不断累加只会让界面越来越重。
5. 几何图形
几何图形和几何插画有异曲同工之妙,几何图形多为产品界面和宣传内容的抽象,产品界面的几何图形多为占位符形式,加上色彩和几何色块让其成为一个整体。B 端产品视觉设计 C 端化的进程中,几何图形、几何色彩不失为最好的突破口,相信今年Dribbble B 端产品的视觉设计一定会更上一个台阶。
几何图形另一个场景化的地方就是品牌,作为一名 UI 设计师一定会经历从图标到几何图形到品牌设计的过程,品牌设计的技巧基本还是以几何图形为主,至于品牌的内涵需要更深层次的解读。掌握主流品牌设计的技巧对产品定位、品牌宣传打下扎实的基础。
6. 暗黑设计
暗黑模式的设计是解决在微弱环境下内容也可以有更高的可读性。随着用户夜晚及深夜使用电子设备时长增大,如何在夜晚这个特定场景下使用更加舒适。合理使用暗黑模式可以减轻眼睛疲劳,提高在夜间使用的可读性。
在设计暗黑主题时,不能为了突显视觉上的逼格,而去使用高饱和度鲜艳的色彩来突显界面的品质感。而应该把舒适度、可读性作为设计的衡量指标。Material Design 给出了暗黑主题的设计准则,即正文和背景之间的对比度应至少为 15.8:1。按照此标准设计,可读性都还不错。这里介绍一个插件“Stark”(Figma、Sketch、XD、Chrome 插件)用来测试界面的对比度。
7. 模块化(组件化)
为什么叫模块化,而不叫组件化,组件化更多的利用原子系统从原子、分子、组织、模版、页面来快速的搭建界面,但在 B 端产品设计中基础组件和业务组件的搭建是以提高工作效率为前提,是否有从 0 到 1 搭建 B 端产品组件的经历是设计师一生中最宝贵的经验之一,它能提高设计师的系统化思维、逻辑思维和抽象思维能力。
产品模块化设计就是将产品分成几个部分,也就是几个模块,每一部分都是具有独立功能,具有一致的连接接口和一致的输入、输出接口的单元,相同种类的模块在产品族中可以重用和互换,相关模块的排列组合就可以形成最终的产品。通过模块的组合配置,就可以创建不同需求的产品,满足客户的定制需求 。
8. 插画
插画作为设计的一大品类,不同的插画师都有自己擅长的风格,本质是都有自己的个性,但是在产品设计中更多是需要共情、共性来讲故事,表达产品理念和价值观。这就需要插画师去尝试并探寻出适合互联网产品设计类的插画风格。设计的本质是旧元素的重新组合,插画不会过时,而是需要结合当下和产品找到最匹配的设计风格。
9. 几何插画
几何插画算是插画简化的一种表现形式,人和物的形态不再写实,而是抽象成几何图形拼凑的感觉,同时保留人物形态的神韵。加上几何色块与人物交互形态的表现,传达出简洁、科技的现代感。难点还是在人物形态的表现上,平时多练习练习速写还是很有必要的。
10. 线面插画
线面插画最近一两年非常流行,准确的说是非常适合。首先线面插画主要是由线条和块面组合而成,用块面表现人物形态时某些结构会表现不出来,这时候用线条简单勾勒后,结构就会清晰明了。其次当线面插画运用在界面上时,可以打破界面纯文字或组件化的机械和沉闷感。线面插画的风格提升画面热闹感的同时,还能保持界面的干净整洁。
1. 微交互
界面微交互动效会让用户的体验更加精致到位。想要打造优秀的产品设计,微交互和动效设计是绕不开的,UI 界面设计通过微交互反馈告知用户当前正在发生的事情,所处的状态。细微的动效更能调动用户情绪,取悦用户。C 端产品微交互和动效已经很成熟了,一部分功劳来自 iOS 系统原生自带的效果。B 端产品的微交互和动效更多还是在学习海外产品,还需要给前端工程师灌输微交互和动效的设计价值,共同打造产品体验细节。
2. Mg 动画
Mg 动画需要很好的节奏感、韵律,每一个场景动画都需要其中的元素进行连接变化,让转场动画更加自然,MG 人物动画通过点线面的动效变化让画面更加有趣、自然,通过粒子效果让特定场景无限循环会让人更加印象深刻。
1. 三维图标
MacOS Big Sur 系统图标的更新带动了三维图标的流行,三维图标的应该场景还是需要有较大留白空间的界面,因为三维图标太小后就看不到更多细节。三维图标感觉又回到了拟物化和扁平化哪个更好的问题上?设计师应该保持开放多元的视角。设计本身也在不断的演化融合,存在即合理。合适最重要,它们都会有适合自己的场景和设计价值。
2. 轻三维
为什么轻三维在界面设计中占有一席之位?一个是设计师不断追求差异化的产物。另一个是更好的表现内容,并与用户产生共鸣。轻三维的基础模型都是来自手机界面中的各种元素,比如组件、开关、按钮、占位符、图表、几何图形、图标、进度条等,这些都是用户日常使用系统软件常见的元素,通过简单的几何形体建模—打灯光—加材质—渲染—PS调色。难度系数不大但效果很出彩。第一个出彩点是模型带有厚度的倒角,结合灯光渲染的光泽是二维软件不能比拟的。第二个出彩点就是材质自由添加,特别是当下流行的毛玻璃效果,玻璃材质渲染效果更佳。第三个出彩点就是可以加局部灯光,局部的渐变色或环境光更加出彩。
3. P4D(PS+C4D)
P4D 是 PS 加 C4D 的设计表现技法,也是视觉设计的最后一个环节,通过 PS 对 C4D 的渲染图片进行调色,利用 PS 的调色技巧可以很好的解决 C4D 打灯光的瑕疵,还可以利用 PS 强大的合成功能,将渲染图片与图片素材进行合成,来表现画面的视觉度,当然三维软件比较难实现的水、粒子、烟花等效果,也可以通过 PS 的后期合成来实现,这也是 P4D 的强大之处。
4. 卡通 IP
卡通 IP 设计最近三四年技术的迭代已经慢慢的走上成熟,卡通 IP 也从传统的纯 PS 手绘技法,转到 C4D 建模—角色绑定—MD衣服制作—OC渲染—PS(静态)/AE(动态)调色。
卡通 IP 火的本质更适合做营销,相比于品牌或 Slogan,卡通 IP 具有亲和力和画面感。随着各种手办行业大热,受互联网大厂影响下,卡通 IP 已经是互联网 B 轮以上公司的标配了。如果团队中没有这样能力的人,也可以通过绘制好二维,一套三维可以选择外包完成。
对于 UI 设计师来说学习是有成本的,暂时并不是必备技能,如果喜欢完全可以学习,从设计差异化的角度来看三维视觉确实有一定的竞争力。
5. 三维动画
C4D 三维场景动画通过构建实物和场景模拟生活中的现实场景,会让用户体验真实感,三维软件制作动效的最大优势是通过动力学和表达式来模拟真实感,未来在 AR/VR 领域会有更好的发展。相对于界面动效学习成本难度也相对较大。在三维动画中 C4D 软件对于域、动力学还是有一定的优势。
上一次写 Dribbble 流行趋势还是两年前了,通过两年的沉淀对趋势流行有了更深的认知。十年的互联网行业风风火火,随着最近的互联网裁员潮大家也慢慢的进入到反思层,客观的看待和理解这个真实的世界,曾经的流行趋势也需要慢慢的沉淀下来。
存在即合理,趋势流行稍纵即逝,注定是不长久的,只有大浪淘沙历史遗留下来的风格才能更长久。但我们也不能不去关注,因为哪有什么所谓的创新,只不过是旧元素的重新组合,并符合当下这个时代人的审美需求。香奈儿的“时尚易逝,风格永存”大概就是这个意思吧。
6000 多字的设计流行趋势,希望能帮助设计师度过互联网裁员的寒春。最后希望以后每年坚持输出设计流行趋势。为设计行业奉献微薄之力。
转载请注明:优设网
分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司