亚洲欧美v国产一区二区三区,中文字日产幕乱五区,综合亚洲,,,色,亚洲伊人久久大香线蕉综合,亚洲综合精品伊人久久

首頁 > SEO動(dòng)態(tài) > 網(wǎng)站技術(shù)全是干貨!B端拖動(dòng)排序的多種場(chǎng)景及交互總結(jié)

全是干貨!B端拖動(dòng)排序的多種場(chǎng)景及交互總結(jié)

全是干貨!B端拖動(dòng)排序的多種場(chǎng)景及交互總結(jié)

一、前言

很久沒有更新 B 端產(chǎn)品相關(guān)的文章了,近期工作項(xiàng)目中做了很多新需求,接觸了更多業(yè)務(wù),也學(xué)到了一些新的交互,后續(xù)將會(huì)根據(jù)我在實(shí)際工作項(xiàng)目中遇到的需求展開總結(jié)。

B 端產(chǎn)品設(shè)計(jì)具有較高的業(yè)務(wù)屬性,所以對(duì)于 ui 設(shè)計(jì)師而言也需要有較強(qiáng)的業(yè)務(wù)知識(shí),在完全理解需求后,再針對(duì)業(yè)務(wù)場(chǎng)景、用戶體驗(yàn)、交互、布局合理、易用性等多維度展開設(shè)計(jì)。

這一期主要分享關(guān)于 B 端產(chǎn)品中拖動(dòng)排序功能。

排序在 B 端和 C 端產(chǎn)品中都比較常見,前期排序有通過點(diǎn)擊上下箭頭排序,但是這樣的交互易用性較差,隨著用戶對(duì)產(chǎn)品使用的易用性提高,這種排序方式在產(chǎn)品交互中已經(jīng)漸漸的被舍棄。

目前對(duì)于排序功能,使用更多的是通過拖動(dòng)排序,通過選中數(shù)據(jù)后長(zhǎng)按鼠標(biāo)右鍵,上下拖動(dòng)來完成數(shù)據(jù)的排序。

二、拖動(dòng)排序的多種組件和交互

在 B 端產(chǎn)品中,我目前接觸的拖動(dòng)排序的組件包含以下兩個(gè)大類:

  1. 一級(jí)目錄常規(guī)排序(非樹結(jié)構(gòu))
  2. 樹組件多層級(jí)排序

對(duì)于分類 2「樹組件多層級(jí)排序」又包含兩個(gè)小類:

  1. 同層級(jí)排序(橫線高亮顯示即將放的位置)
  2. 跨層級(jí)排序

對(duì)于小分類「跨層級(jí)排序」又可以細(xì)分為四個(gè)場(chǎng)景:

  1. 父級(jí)未展開時(shí):拖動(dòng)到父級(jí)、父級(jí)整行高亮
  2. 父級(jí)未展開時(shí):拖動(dòng)長(zhǎng)按停留在父級(jí)時(shí),父級(jí)自動(dòng)展開子級(jí)
  3. 父級(jí)已展開時(shí):拖動(dòng)到子級(jí)時(shí),父級(jí)整行高亮,拖動(dòng)到的位置出現(xiàn)高亮橫線
  4. 父級(jí)已展開時(shí):拖動(dòng)到子級(jí)文件夾時(shí),父級(jí)不需要高亮,子級(jí)文件夾目錄整行高亮(子級(jí)已展開和未展開的交互與父級(jí)同理)

全是干貨!B端拖動(dòng)排序的多種場(chǎng)景及交互總結(jié)

三、拖動(dòng)排序場(chǎng)景和交互實(shí)操

上面已經(jīng)總結(jié)了排序的組件和場(chǎng)景,下面我們就一起來看看不同組件在不同場(chǎng)景下的具體交互,通過實(shí)際項(xiàng)目設(shè)計(jì)詳細(xì)介紹拖動(dòng)排序的功能。

1. 一級(jí)目錄常規(guī)排序(非樹結(jié)構(gòu))

數(shù)據(jù)默認(rèn)展示類似列表數(shù)據(jù)一樣,平鋪?zhàn)髮?duì)齊排版,當(dāng)拖動(dòng)排序時(shí),鼠標(biāo)移動(dòng)到需要排序的數(shù)據(jù)行,長(zhǎng)按鼠標(biāo)右鍵并拖動(dòng)數(shù)據(jù)上下移動(dòng),被拖動(dòng)的數(shù)據(jù)原位置置灰(也可以直接消失)。

同時(shí),被拖動(dòng)的數(shù)據(jù)跟著鼠標(biāo)走,移動(dòng)到其它位置時(shí),在將要放下的位置出現(xiàn)藍(lán)色高亮分割線(還可以做到所有數(shù)據(jù)實(shí)時(shí)變化位置效果)這樣能讓用戶更加直觀地看到數(shù)據(jù)位置的變化。

全是干貨!B端拖動(dòng)排序的多種場(chǎng)景及交互總結(jié)

全是干貨!B端拖動(dòng)排序的多種場(chǎng)景及交互總結(jié)

此類需求一般是針對(duì)一級(jí)數(shù)據(jù)排序,數(shù)據(jù)結(jié)構(gòu)比較簡(jiǎn)單,沒有文件夾多級(jí)樹狀結(jié)構(gòu),下面列舉幾個(gè)工作中遇到的需求場(chǎng)景,以及分享幾個(gè)其它產(chǎn)品中遇到的交互,便于大家理解。

由于 B 端產(chǎn)品具保密性,所以下面分享的截圖非工作實(shí)際數(shù)據(jù),大家只要明白需求場(chǎng)景和交互即可。

需求場(chǎng)景 1:產(chǎn)品業(yè)務(wù)中有很多的表單,表單中的字段順序在不同企業(yè)中不同,應(yīng)該如何設(shè)計(jì)呢?

全是干貨!B端拖動(dòng)排序的多種場(chǎng)景及交互總結(jié)

在設(shè)計(jì)時(shí),可以將表單所有的字段羅列出來,然后用戶通過自定義排序字段即可,這里的交互就可以直接采用上下拖動(dòng)排序。

需求場(chǎng)景 2:飛書中有多個(gè)應(yīng)用,對(duì)于每個(gè)用戶而言,自己所關(guān)注的應(yīng)用不同,優(yōu)先級(jí)不同,該如何設(shè)計(jì)?

全是干貨!B端拖動(dòng)排序的多種場(chǎng)景及交互總結(jié)

同理,飛書也是對(duì)用戶個(gè)人的應(yīng)該設(shè)計(jì)了拖動(dòng)排序功能,可以根據(jù)自己關(guān)注的應(yīng)該排序應(yīng)該的位置,從而更快的找到自己常用的應(yīng)用,提高工作效率。

無論是對(duì)于列表數(shù)據(jù)還是卡片數(shù)據(jù)的排序都可以采用這種拖動(dòng)排序的交互。

2. 樹組件多層級(jí)排序

①同層級(jí)排序(橫線高亮顯示即將放的位置)

樹組件同層級(jí)排序默認(rèn)展示和拖動(dòng)時(shí)效果與一級(jí)目錄常規(guī)排序一致。

全是干貨!B端拖動(dòng)排序的多種場(chǎng)景及交互總結(jié)

全是干貨!B端拖動(dòng)排序的多種場(chǎng)景及交互總結(jié)

②跨層級(jí)排序

父級(jí)未展開時(shí):拖動(dòng)到父級(jí)、父級(jí)整行高亮

如下圖,當(dāng)需要把文件夾「數(shù)據(jù)名稱顯示 004」放在「數(shù)據(jù)名稱顯示 003」文件夾中,鼠標(biāo)拖動(dòng)數(shù)據(jù)放在「數(shù)據(jù)名稱顯示 003」時(shí),「數(shù)據(jù)名稱顯示 003」整行會(huì)出現(xiàn)藍(lán)色高亮,表示被拖動(dòng)的數(shù)據(jù)即將放在該文件夾內(nèi)。

全是干貨!B端拖動(dòng)排序的多種場(chǎng)景及交互總結(jié)

父級(jí)未展開時(shí):拖動(dòng)長(zhǎng)按停留在父級(jí)時(shí),父級(jí)自動(dòng)展開子級(jí)

如下圖,按照上面的步驟拖動(dòng)時(shí),當(dāng)鼠標(biāo)一直停留在「數(shù)據(jù)名稱顯示 003」的位置時(shí),該文件夾會(huì)自動(dòng)展開二級(jí)目錄,這是一個(gè)拖動(dòng)排序比較友好的交互,可以讓用戶再次看到該目錄下的數(shù)據(jù)結(jié)構(gòu),并快速一次性選擇需要放的位置。

全是干貨!B端拖動(dòng)排序的多種場(chǎng)景及交互總結(jié)

父級(jí)已展開時(shí):拖動(dòng)到子級(jí)時(shí),父級(jí)整行高亮,拖動(dòng)到的位置出現(xiàn)高亮橫線

如下圖,在上圖基礎(chǔ)上,當(dāng)鼠標(biāo)繼續(xù)拖動(dòng)數(shù)據(jù),想要放在二級(jí)目錄中時(shí),數(shù)據(jù)一級(jí)目錄同樣會(huì)顯示高亮,告訴用戶當(dāng)前數(shù)據(jù)的層級(jí)關(guān)系。

同時(shí),二級(jí)數(shù)據(jù)中會(huì)出現(xiàn)藍(lán)色高亮分割線,標(biāo)識(shí)被拖動(dòng)的數(shù)據(jù)即將放的位置,這樣就能清晰的知道被拖動(dòng)的數(shù)據(jù)將放在那個(gè)目錄的那個(gè)位置。

全是干貨!B端拖動(dòng)排序的多種場(chǎng)景及交互總結(jié)

父級(jí)已展開時(shí):拖動(dòng)到子級(jí)文件夾時(shí),父級(jí)不需要高亮,子級(jí)文件夾目錄整行高亮(子級(jí)已展開和未展開的交互與父級(jí)同理)

當(dāng)需要將數(shù)據(jù)拖動(dòng)到二級(jí)文件夾內(nèi)時(shí),只需要高亮二級(jí)文件夾即可。

全是干貨!B端拖動(dòng)排序的多種場(chǎng)景及交互總結(jié)

關(guān)于樹組件多層級(jí)排序的使用場(chǎng)景和交互比較復(fù)雜,上面我根據(jù)不同場(chǎng)景分別列出了交互展示方式,下面再根據(jù)實(shí)際業(yè)務(wù)需求列舉案例說明,因?yàn)榇藞?chǎng)景主要是針對(duì)交互和顯示,所以我就直接拿動(dòng)圖展示,便于大家理解。

結(jié)語

好了,這期文章內(nèi)容干貨較多,碼字較多,也希望大家看完后有所收獲。

每次在總結(jié)文章時(shí),都會(huì)突發(fā)奇想到其它知識(shí)方面,也想要一起總結(jié),但是由于篇幅太長(zhǎng),知識(shí)量太大,也不利于閱讀和吸收。

比如在這一期的拖動(dòng)排序文章總結(jié)時(shí),我就會(huì)想要總結(jié)表單字段自定義匹配、自定義是否必填、自定義排序的場(chǎng)景,以及,多層級(jí)樹組件拖動(dòng)排序后,各個(gè)數(shù)據(jù)的權(quán)限關(guān)系問題。

擔(dān)心大家沒有耐心看完,沒辦法一次性吸收,所以還是每次一篇文章總結(jié)一個(gè)小的知識(shí)點(diǎn)吧。

作者:設(shè)計(jì)小余

想了解更多網(wǎng)站技術(shù)的內(nèi)容,請(qǐng)?jiān)L問:網(wǎng)站技術(shù)

本文來源:http://www.sonygallery.com.cn/seodongtai/19540.html

免責(zé)聲明:部分文章信息來源于網(wǎng)絡(luò)以及網(wǎng)友投稿,本網(wǎng)站只負(fù)責(zé)對(duì)文章進(jìn)行整理、排版、編輯,是出于傳遞更多信息之目的,并不意味著贊同其觀點(diǎn)或證實(shí)其內(nèi)容的真實(shí)性,不承擔(dān)任何法律責(zé)任。