B端設(shè)計師必備！2個鮮為人知但超實用的特殊組件

今天我們來說說最近看到的特殊組件，2個都非常實用！

更多組件干貨：

一、底部抽屜

業(yè)務(wù)背景：

抽屜或許大家都比較熟悉，但底部抽屜聽上去就有些陌生。

它其實是從底部向上彈起的一個抽屜形態(tài)，在各大設(shè)計系統(tǒng)當(dāng)中都會支持的一個容器。

對于用戶而言最早熟悉的是源自移動端的整體交互，但隨著 B 端行業(yè)的不斷發(fā)展，行業(yè)中對于容器的需求越來越大，因此需要更多不同的形式窗口展示頁面。

底部抽屜就這樣誕生！

對于底部抽屜而言，雖然只是顯示容器上的變化，但是你會發(fā)現(xiàn)在交互上有著翻天覆地的改變，我們結(jié)合實際案例來一起分析。

組件解法：

在實際項目中，我們可以使用飛書多維表格，點擊插件中心，就會發(fā)現(xiàn)底部抽屜進(jìn)行展示。

只是出現(xiàn)的位置不同，真的會帶來如此大的差異？

其實底部最大的好處便是聚焦，右側(cè)抽屜視覺重心都在右側(cè)，因此在呈現(xiàn)上會更適合短暫停留。右側(cè)抽屜的寬度因業(yè)務(wù)場景差異難以統(tǒng)一界定，部分設(shè)計雖支持自定義寬度，但實際使用率較低，功能略顯雞肋。

底部抽屜更類似‘放大版彈窗’，既能作為信息補(bǔ)充容器，又因底部上滑的交互模式，相比傳統(tǒng)彈窗或新建頁，對主流程的中斷感更弱。因此這就是 底部抽屜 的價值～

二、縮小展開窗口

業(yè)務(wù)背景：

在窗口的容器當(dāng)中，也會出現(xiàn)類似的情況。給我印象較為深刻的便是 Gmail 寫郵件的具體容器～

首先在 Gmail 當(dāng)中會將寫郵件的狀態(tài)進(jìn)行定義：認(rèn)真寫、看會寫會、等會兒寫

認(rèn)真寫：窗口放大，窗口全屏直接去寫

看會寫會：在右下角，小窗口直接輸入

等會兒寫：就縮小，能夠去查看不同的郵件

而這個設(shè)計其實與我們使用的原生系統(tǒng)類似，像 Win、Mac 系統(tǒng)一樣的窗口呼出方式～

組件解法：

在組件當(dāng)中，其實不同的容器并不是絕對的，多形態(tài)的變化也是當(dāng)前整體行業(yè)的趨勢。

比如在 Notion 當(dāng)中，數(shù)據(jù)結(jié)構(gòu)相同，但是可以呈現(xiàn)不同的容器。比如 彈窗、抽屜、新建頁，在這里它都可以解決。

相同的做法也會出現(xiàn)在 紛享銷客 的軟件當(dāng)中，因此不同交互方式之間，或許現(xiàn)在的界限也沒有那么明確，只要做到根據(jù)用戶的場景分析合理即可～

當(dāng)然除了這部分之外，在 YouTube 當(dāng)中也有一個類似的交互。

當(dāng)你想要全屏查看視頻時，它并不是不可滾動，而是可以向下滾動去閱讀評論區(qū)，因此，現(xiàn)如今的設(shè)計中，全屏的定義不再是不可交互的獨立界面，而是可滾動、可操作的放大版窗口。

我們最近在輔導(dǎo)一個 WMS 系統(tǒng)的作品集，其中有一個固定的角色是，每天只會在一個固定頁面進(jìn)行稱重和錄入操作，這時候就可以考慮在頁面右上角放置 全屏操作入口，方便用戶可以隱藏不必要的導(dǎo)航菜單信息，做到更為沉浸的使用。（由于內(nèi)容比較敏感，因此就找一張類似配圖）