今天我們來說說最近看到的特殊組件,2個(gè)都非常實(shí)用!
更多組件干貨:
業(yè)務(wù)背景:
抽屜或許大家都比較熟悉,但底部抽屜聽上去就有些陌生。
它其實(shí)是從底部向上彈起的一個(gè)抽屜形態(tài),在各大設(shè)計(jì)系統(tǒng)當(dāng)中都會(huì)支持的一個(gè)容器。
對于用戶而言最早熟悉的是源自移動(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ǔ)充容器,又因底部上滑的交互模式,相比傳統(tǒng)彈窗或新建頁,對主流程的中斷感更弱。因此這就是 底部抽屜 的價(jià)值~
業(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)一樣的窗口呼出方式~
組件解法:
在組件當(dāng)中,其實(shí)不同的容器并不是絕對的,多形態(tài)的變化也是當(dāng)前整體行業(yè)的趨勢。
比如在 Notion 當(dāng)中,數(shù)據(jù)結(jié)構(gòu)相同,但是可以呈現(xiàn)不同的容器。比如 彈窗、抽屜、新建頁,在這里它都可以解決。
相同的做法也會(huì)出現(xiàn)在 紛享銷客 的軟件當(dāng)中,因此不同交互方式之間,或許現(xiàn)在的界限也沒有那么明確,只要做到根據(jù)用戶的場景分析合理即可~
當(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)容比較敏感,因此就找一張類似配圖)
復(fù)制本文鏈接 文章為作者獨(dú)立觀點(diǎn)不代表優(yōu)設(shè)網(wǎng)立場,未經(jīng)允許不得轉(zhuǎn)載。
發(fā)評論!每天贏獎(jiǎng)品
點(diǎn)擊 登錄 后,在評論區(qū)留言,系統(tǒng)會(huì)隨機(jī)派送獎(jiǎng)品
2012年成立至今,是國內(nèi)備受歡迎的設(shè)計(jì)師平臺(tái),提供獎(jiǎng)品贊助 聯(lián)系我們
標(biāo)志設(shè)計(jì)標(biāo)準(zhǔn)教程
已累計(jì)誕生 729 位幸運(yùn)星
發(fā)表評論 為下方 6 條評論點(diǎn)贊,解鎖好運(yùn)彩蛋
↓ 下方為您推薦了一些精彩有趣的文章熱評 ↓