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

今天我們來說說最近看到的特殊組件,2個(gè)都非常實(shí)用!

更多組件干貨:

一、底部抽屜

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

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

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

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

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

底部抽屜就這樣誕生!

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

組件解法:

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

只是出現(xiàn)的位置不同,真的會(huì)帶來如此大的差異?

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

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

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

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

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

二、縮小展開窗口

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

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

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

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

看會(huì)寫會(huì):在右下角,小窗口直接輸入

等會(huì)兒寫:就縮小,能夠去查看不同的郵件

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

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

組件解法:

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

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

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

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

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

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

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

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

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

收藏 11
點(diǎn)贊 41

復(fù)制本文鏈接 文章為作者獨(dú)立觀點(diǎn)不代表優(yōu)設(shè)網(wǎng)立場,未經(jīng)允許不得轉(zhuǎn)載。