分享最近见到的特殊组件 02

大家好，欢迎来到IT知识分享网。

在设计领域，组件的创新和优化是提升用户体验的关键。本文聚焦于“底部抽屉”和“缩小展开窗口”两种特殊组件。通过实际案例分析，文章详细介绍了这些组件的业务背景、交互设计以及在不同场景中的应用效果。如果你对UI/UX设计感兴趣，或者正在寻找提升产品交互体验的方法，这篇文章将为你提供实用的设计思路和灵感。

上一篇我们聊到了选择组件的特殊形态，说实话写它的目的就是帮我回答同学们的日常问题。

今天我们继续，说说最近我看到的一个特殊形态，我们来说说特殊组件 第二期～

底部抽屉

业务背景：

抽屉或许大家都比较熟悉，但底部抽屉听上去就有些陌生。

它其实是从底部向上弹起的一个抽屉形态，在各大设计系统当中都会支持的一个容器。

对于用户而言最早熟悉的是源自移动端的整体交互，但随着 B 端行业的不断发展，行业中对于容器的需求越来越大，因此需要更多不同的形式窗口展示页面。

底部抽屉就是这样诞生！

对于底部抽屉而言，虽然只是显示容器上的变化，但是你会发现在交互上有着翻天覆地的改变，我们结合实际案例来一起分析。

组件解法：

在实际项目中，我们可以使用飞书多维表格，点击插件中心，就会发现底部抽屉进行展示。

只是出现的位置不同，真的会带来如此大的差异？

其实底部最大的好处便是聚焦，因此底部抽屉于右侧抽屉最大的不同便是位置带来的差异。

右侧抽屉视觉重心都在右侧，因此在呈现上会更适合短暂停留。右侧抽屉的宽度因业务场景差异难以统一界定，部分设计虽支持自定义宽度，但实际使用率较低，功能略显鸡肋。

底部抽屉更类似‘放大版弹窗’，既能作为信息补充容器，又因底部上滑的交互模式，相比传统弹窗或新建页，对主流程的中断感更弱。因此这就是 底部抽屉 的价值～

除了在这些系统当中见到之外，还在站酷的详情页中看到，你会发现不会感到太多突兀。

缩小展开窗口

业务背景：

在窗口的容器当中，也会出现类似的情况。给我印象较为深刻的便是 Gmail 的写邮件的具体容器～

首先在 Gmail 当中会将写邮件的状态进行定义：认真写、看会写会、等会儿写

• 认真写：窗口放大，窗口全屏直接去写
• 看会写会：在右下角，小窗口直接输入
• 等会儿写：就缩小，能够去查看不同的邮件

而这个设计其实与我们使用的原生系统类似，像 Win、Mac 系统一样的窗口呼出方式～

组件解法：

在组件当中，其实不同的容器并不是绝对的，多形态的变化也是当前整体行业的趋势。

比如在 Notion 当中，相同的数据结构但是可以呈现不同的容器。比如 弹窗、抽屉、新建页，在这里它都可以解决。

相同的做法也会出现在 纷享销客 的软件当中，因此不同交互方式之间或许现在的界限也没有那么明确，只要做到根据用户的场景分析合理即可～

当然除了这部分之外，在YouTube当中也有一个类似的交互。

当你想要全屏查看视频时，它并不是不可滚动，而是可以向下滚动去阅读评论区，因此，现如今的设计中全屏的定义不再是不可交互的独立界面，而是‘可滚动、可操作的放大版窗口。

我们最近在辅导一个WMS 系统的作品集，其中有一个固定的角色是，每天只会在一个固定页面进行称重和录入操作，这时候就可以考虑在页面右上角放置 全屏操作入口，方便用户可以隐藏不必要的导航菜单信息，做到更为沉浸的使用。（由于内容比较敏感，因此就找一张类似配图）

本文由人人都是产品经理作者【CE青年】，微信公众号：【CE青年Youthce】，原创/授权 发布于人人都是产品经理，未经许可，禁止转载。

题图来自Unsplash，基于 CC0 协议。