介绍
去年在做工作汇报的时候,老板加了一个重大任务:2014年带领好设计人员把团队设计质量提升上去,因此我也开始花关注UI这块工作。作为设计人员,了解每一年的行业设计趋势尤为重要,它会对整个行业内产品的设计风格产生巨大影响。在此,我汇总了网上各大知名设计师对2024年设计趋势的判断,作为我们接下来产品和项目UI设计的指引,以期能够在设计团队的内部达成共识,往共通的大方向相互协助促进,最终进一步提高智城产品的美感和竞争力。
可探索方向
风格:磨砂玻璃质感运用
从磨砂玻璃元素中汲取灵感,将纵深感、透明度和独特的美学融入数字界面。这种效果可广泛应用于各种UI和VI元素,如卡片、模态或导航窗口。虽然这一设计趋势已存在多年,但它依旧没有过时,正如时尚界的潮流,它具有周期性,并随着我们的品味不断调整和升级。



风格:视差效果
视差是指让多层背景以不同的速度移动,形成立体的运动效果,它可以给画面营造一种空间感,带来非常出色的视觉体验。


风格:Bento布局
Bento的灵感来自于传统的日本便当盒,因此得名为"Bento"。Bento布局通过将网页的内容分割成多个独立的方块或格子,使得页面在视觉上更加有层次感和组织性。
Bento布局的优势在于它提供了更多的灵活性和可定制性,同时也有助于提升用户体验。通过合理的利用空白区域和视觉对齐,Bento布局可以使页面更加整洁、易读,并且能够有效地吸引用户的注意力。

风格:高度写实
通过细致入微、逼真地模拟现实世界中的对象和环境,创造出用户界面和体验。这一趋势广泛应用于品牌、应用程序和模型等领域,旨在创造身临其境、引人入胜的用户体验。通过逼真的渲染、3D建模和高级动画技术,用户仿佛在与真实物体进行互动,超现实主义设计传递出"所见即所得"的感受。




细节:复杂和动态的渐变
渐变设计已广泛应用于UI/UX领域,为静态配色方案注入了新的活力,提供了更身临其境和引人注目的视觉体验。通过运用复杂和动态的渐变效果,能够增加UI元素的深度、丰富性和复杂性,为内容呈现提供更具吸引力的背景。



细节:WebGL/3D
随着WebGL的普及,3D效果的实现将变得更加便捷。在Web浏览器中呈现3D和2D图形,包括3D插图、动画和交互式3D对象,已经是一种常用的设计手段,这里有相关的案例。



细节:动画
动画和微交互是UI设计的重要组成部分,它们将继续在塑造用户体验方面发挥着至关重要的作用。动画能够赋予设计以生命力,使界面更具吸引力和动态感,而微交互则能够在用户和产品间建立一种直观且有趣的互动方式,提高用户的参与度和满意度。这些设计细节可为用户提供更为丰富和个性化的体验,从而在细微之处打动用户,提升他们对产品的好感度和忠诚度。


细节:AR功能的应用
我们可以扩展物理世界的边界,并将其与数字世界完美融合。对于开发教育应用程序或帮助用户在危险环境中工作的项目,AR已成为不可或缺的重要工具。


细节:AI技术的运用
人工智能正在加速渗透到艺术、动画、设计,设计师能够使用更低的成本制作复杂的图案、纹理,突破动手能力的界限 ,很多界面元素都可以通过生成式+微调的方式获取,比如登录页面、banner、图标、启动页插画都拥有大量的可运用空间,前提是设计师能够掌握调用AI的能力。


总结
现实中好的作品并非一蹴而就,以上罗列了各种设计方向并不是独立互斥的,往往某个精彩的细节就来源于几种方向的融汇碰撞,因此我们并不希望执行者照搬硬套、也不是生硬地拼凑缝合,而是消化到自己的设计意识里,并且在过程中不断深耕迭代。欢迎大家补充和讨论。