首页 > js333金沙线路检测(中国)有限公司动态 > 网站技术B端设计师必备!2个鲜为人知但超实用的特殊组件

B端设计师必备!2个鲜为人知但超实用的特殊组件

B端设计师必备!2个鲜为人知但超实用的特殊组件

今天我们来说说最近看到的特殊组件,2个都非常实用!

一、底部抽屉

业务背景:

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

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

B端设计师必备!2个鲜为人知但超实用的特殊组件

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

底部抽屉就这样诞生!

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

组件解法:

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

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

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

B端设计师必备!2个鲜为人知但超实用的特殊组件

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

B端设计师必备!2个鲜为人知但超实用的特殊组件

B端设计师必备!2个鲜为人知但超实用的特殊组件

二、缩小展开窗口

业务背景:

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

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

认真写:窗口放大,窗口全屏直接去写

看会写会:在右下角,小窗口直接输入

等会儿写:就缩小,能够去查看不同的邮件

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

B端设计师必备!2个鲜为人知但超实用的特殊组件

组件解法:

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

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

B端设计师必备!2个鲜为人知但超实用的特殊组件

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

B端设计师必备!2个鲜为人知但超实用的特殊组件

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

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

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

B端设计师必备!2个鲜为人知但超实用的特殊组件

作者:CE青年

想了解更多网站技术的内容,请访问:网站技术

本文来源:/js333金沙线路检测(中国)有限公司dongtai/20627.html

免责声明:部分文章信息来源于网络以及网友投稿,本网站只负责对文章进行整理、排版、编辑,是出于传递更多信息之目的,并不意味着赞同其观点或证实其内容的真实性,不承担任何法律责任。

下一篇

没有了