#01前言HI，大家好！今天分享的是关于UI设计趋势的内容。每年淘宝会在3月底和8月底分别做一个大型营销活动，这个活动就是淘宝新势力周，主要是针对潮流服饰品类。为什么选择这个时间点。从市场营销的角度考虑。3月底和8月底是春秋季上新，厂商都可以试着发布一些春装新款式，通过试探市场的反映，决定接下来的设计款式的生产。同时也扩大自身的品牌态度和影响力。而对于设计师来说，也可以通过一些新元素的设计风格表达，引领新的接下来一年的春秋季时尚趋势。所以这同时也是接下来一年服装设计趋势的风向标。我每年都会关注这个活动，因为UI界面的设计是依附产品而存在。产品的气质决定了设计的风格。从活动的用户画像来看，这个活动的受众群体偏向于年轻人。所以整体活动设计风格偏向于年轻潮流化，所以这个活动的的一些视觉风格，也会引领接下来一年业界的一些界面和营销设计风格趋势。UI设计师除了关注界面的交互体验之外，也不要忘记关注商业设计的美学趋势。一场大型的视觉活动都会定义其独特的品牌视觉元素，运用独特的设计营销语言增强影响力，增强用户的视觉印象。所以竹子通过分析这个设计活动的设计技法，来关注一下未来一年的UI设计视觉趋势。#02赛博朋克风格淘宝新势力周第一个看点，就是看界面的主视觉风格，预判接下来视觉风格的流行趋势点。在营销页中分了三个主要分区，其中第一个主分区潮流榜中使用了赛博朋克味道十足的潮流质感设计。潮流榜不但能见到琳琅满目的各类潮流风格服装，亦能看到多种不同“复古未来”趋势分支的同台碰撞，为我们搭建了一场赛博感满满的线上时装秀。赛博朋克的设定通常围绕黑客、人工智能而展开，背景设定常用元素金属、电线街头的霓虹灯、街排标志性广告以及高楼建筑等。这也与当下人们面对疫情，科技发展的不确定而产生的情景映射相符合。#03莫兰迪色的运用疫情已经三年了，我们都知道经济大环境不是非常好，人们对未来充满了很多不确定。在这样的大环境下，人们普遍充斥着焦虑不安的情绪。我们开始怀念疫情前的自由的世界，同时又对未来美好生活的寄予很浓的期望。所以复古加科技的情绪是今年设计的一个重要设计情感。在今年的设计周看到界面中大量的运用莫兰迪色系。莫兰迪色系不是指具体某种颜色，而是一种色彩关系。在常见的营销活动中，一般会选择一些饱和度很高的颜色，增加视觉冲击力。莫兰迪色系偏向于降低颜色的纯度，虽然色感上画面显得偏灰，但是却没有失去应有的美感，反而将画面的色彩情绪用一种朴素的美感表现出来，发散出安静与内敛的气息。高饱和度的视觉冲击可以强烈刺激人的视觉。但使用莫兰迪色会显著降低人们焦躁的情绪，很符合当下人们安静归真的情绪。#04毛玻璃的运用毛玻璃其实是一个很复古的设计表现形式，在早期GUI设计中大量运用。从扁平设计开始流行后，就很少运用到了。2020 UI设计界流行起了新拟物风，希望从扁平的质感束缚中寻找新的折中表现形式。而毛玻璃的设计风格（Glassmorphism）就被重新启用。毛玻璃风格，透过透明模糊实现了前后界面层次的分离，同时还保留背景界面的颜色图形部分细节。2021年在很多APP的设计展示中看到设计师用这种形式感去做设计展示。毛玻璃运用在顶部关键信息上。这样设计即可减少背景色彩对前景信息展示的干扰,还可以对功能信息进行强调。毛玻璃效果可以运用在个人中心,人物头像位置进行设计强调。现在看到淘宝在界面中卡片设计上运用，也许接下来会大量出现这种设计形式的运用。个人主页卡片毛玻璃设计效果产品模块背景磨砂玻璃效果#05微渐变运用微渐变设计的运用从2013年苹果使用扁平化设计替代拟物化设计，已经快9年过去了。不知道大家有没有一丝审美疲劳？苹果启用扁平化设计的想法是，抛去了一切多余的修饰，追求极简主义。让信息传递更加简洁高效。这个设计的决定影响是深远的。之后几乎所有UI设计的设计风格也变得单一，一切控件元素都是纯色填充的设计形式。某种程度上这也形成了设计界的政治正确。一切其他额外的装饰质感都是多余的，也是不合时宜的。在追波之类的设计师社区，也有一些设计师大量尝试使用渐变质感的方式，不过更多的被嘲笑是飞机稿。从2018年淘宝界面大量尝试使用了渐变方式。也带动了业界的设计潮流。在这次活动中，看到了界面中标题栏，和一些背景栏大量的运用渐变的方式填充界面，设计层次更加的丰富多变。因为渐变的填充方式多种多样，这样也增加了设计视觉效果的多样性。标题栏下线性渐变背景上的多层光影渐变各种图形质感渐变的穿插#06动态背景标题栏设计我们一般会选择纯色或者填充方式设计，在这次活动中看到设计师运用一些动态的影像做为标题栏的背景填充。这种方式对于服务器的压力会略高一些，因为影像的文件要比静态图片大不少。#07动效切换当页面中需要展示大量信息的时候，通常的做法，就是在一屏中尽可能加入更多的的信息。但空间始终有限。所以设计师想出用横滑卡片的方式，增加信息的密度。但横滑卡片的一个难点就是卡片的后面几页几乎没有人会去看。这样无疑降低了信息的展示性。淘宝设计师采用的设计手法就是卡片动态展示，当然为了减少用户被眼花缭乱的动效骚扰。严格控制了上下卡片的自动切换时间。使上下卡片的自动切换时间错开。这样既增加了信息的密度，同时又减少用户的焦躁情绪。上下栏切换头图与商品套装的切换卡片视频动态切换展示#08结语淘宝新势力周集结了国内外最强潮流力量，同时各家服装厂商也将带着各自的尖货新品系列做盛大上新，展示的是最新服装设计潮流。里面的服装商品图片也琳琅满目，摄影的图片水准也非常高。竹子非常建议设计师仔细品位研读。既可以运用到互联网营销视觉中，活动中一些交互和UI设计细节也可以运用到界面设计中。今天就分享到这里，希望对大家工作中的设计有用。另外为了让大家及时收到竹子推送的设计分享，可以把公众号加个星星哦。下一篇分享的内容是作品集相关的设计内容。来源网络