这是「Link设计周刊」的第 027 期。

长期关注ToB/G、Iot、SaaS行业产品体验设计,关注成长,更关注如何更好的生活。

感兴趣的伙伴可以 邮箱或者微信订阅

An image to describe post

1.拟物化设计

An image to describe post

An image to describe post

An image to describe post

https://arrowdynamics.dev/

看多了组件搭起来的界面,这套拟物化的设计,配合网站的微动效,赏心悦目。拟物化的风格什么时候回来,不然设计师都成了“figma操作员”了。

也有设计师已经在预测24年的设计趋势了,微质感即将来临。

An image to describe post

像Airbnb,Shopify这些大牌已经开始在他们的产品中运用微拟物化设计。

An image to describe post

Airbnb实现了一系列更复杂和3D的设计,例如在他们新的“访客护照”,访客护照图标的设计类似于一本真实的“书”,当与它互动时,它有一个模仿现实生活中的书开的动画。

An image to describe post

Airbnb的另一个例子,在他们的“客人最爱”和新改进的“月份选择器”设计中看到。如上图所示,新的“客人最爱”部分为评分添加了漂亮的 3D 效果。新的月份选择器(右)也具有更逼真的表盘设计。

An image to describe post

Shopify 使用新的设计语言更新了其广受欢迎和广受赞誉的设计系统 Polaris。较旧的更扁平的按钮现在更小,触感更强。

An image to describe post

https://www.youtube.com/watch?v=WDBLKbGGUTM

也有设计师对“拖动组件”感到无聊至极,这样来描述设计师的一天:早上九点把组件拖到画布上,然后中午休息一会,然后下午又拖了一会,甚至会往了自己在搭建什么。还会思考一些自己的设计,结果好像改不了什么。然后下班回家啦。。。

这不是figma操作员嘛,哪是设计师?我们总不能真成了操作员,然后被AI替代的局面。扁平化必定向更有细节的方式发展,设计师和程序员应该提前准备“升级系统”了。

2.23年设计师工具的统计,figma遥遥领先。

An image to describe post

https://uxtools.co/survey/2023/ui-design

3.可视化游戏设计组件

An image to describe post

https://www.figma.com/community/file/1310958319197537014

4.Bento式布局:24年网页设计一大趋势?

An image to describe post

An image to describe post

Bento 式布局是一种网页设计布局,它将不同类型的内容组织在一个网页中的不同方块中,类似于日本的便当盒。这种布局通常以网格形式排列,每个方块包含一个特定的功能或信息。Bento 式布局的优点是可以在有限的空间内展示大量的内容,并且易于导航和浏览。

许多生产力工具网站选择采用 Bento 式布局,原因如下:

  1. 效率和易用性:Bento 式布局可以帮助用户快速访问各种工具和功能,节省时间和精力。
  2. 组织和分类:不同的方块可以代表不同的工具或功能,使得用户可以轻松找到所需的内容,提高工作效率。
  3. 多功能性:Bento 式布局允许将不同类型的内容整合在一个页面上,例如任务列表、笔记、日历等,方便用户同时管理多个任务和信息。
  4. 可定制性:Bento 式布局可以根据用户的需求进行个性化定制,用户可以自定义方块的大小、位置和功能,以满足自己的工作习惯和喜好。

总的来说,Bento 式布局在生产力工具网站中得到广泛应用,因为它提供了一种高效、整洁且易于使用的界面,帮助用户提升工作效率并更好地组织和管理信息。

缺点也很明显:该布局的应用还是以展示信息为主,想承载核心功能操作的话,应用场景少且非常考验创新能力,而且其缺点也很明显。

毕竟不管你如何分配视觉元素占比,采用何种原则手段,配色一致也好,留白取舍也好,动静结合也罢,都没有办法给这样的布局梳理一条清晰的视觉动线。

单就说这一堆 card 平铺在一起,视觉焦点就注定会分散个七七八八。至少这些 card 的信息权重是相对平级的,才有可能采用 bento 式布局把它们组织在一起。如果模块所承载功能需要有明显的阅读顺序或强调步骤,那么这种布局就不适配。

可就算功能适配,你拿到的 PRD 里又是否有那么多有效内容可以来填满 bento 式布局?总不能内容不够就形式来凑。

An image to describe post

:https://bentogrids.com/

https://sspai.com/post/84628

5.24年平面设计趋势

卡通:活泼、趣味

An image to describe post

AI创意

An image to describe post

手绘插画

An image to describe post

怀旧复古

An image to describe post

更负责任的设计:无障碍、环保

An image to describe post

互动式设计:超越静态的沉浸式体验

An image to describe post

简单文字

An image to describe post

鲜艳的色彩

An image to describe post

更多3D

An image to describe post

6.24年图标设计趋势

极简

An image to describe post

3维现实

An image to describe post

抽象几何

An image to describe post

微动画

An image to describe post

装饰艺术

An image to describe post

有机可持续

An image to describe post

7.24年网页设计趋势

暗黑模式

An image to describe post

便当网格

An image to describe post

AI创意

An image to describe post

鲜艳的渐变

An image to describe post

大文本排版

An image to describe post

8.其他

UX tips: https://www.uidesign.tips/ux-tips

白嫖白板资源: https://boardmix.cn/community/

AIMap: https://www.mymap.ai/map/playground?mid=vSfGPW3oNvJyo

阮一峰提到的工具网站: https://www.apigpts.dev/tools

英国政府网站设计播客: https://designnotes.blog.gov.uk/

订阅方式: 邮箱或者微信