交互

Teambition和百度網(wǎng)盤的交互細(xì)節(jié)對比分析

5522

前段時間為公司的后臺系統(tǒng)做了文件管理的功能，調(diào)研了百度網(wǎng)盤、Teambition、Dropbox和360云盤的相關(guān)功能和細(xì)節(jié)交互。下面以Teambition和百度網(wǎng)盤為主要調(diào)研對象（針對網(wǎng)頁端），并結(jié)合我們公司自己的文件管理系統(tǒng)加以分析。希望小伙伴們將來設(shè)計文件管理系統(tǒng)時這篇文章能夠給你帶來幫助。

不同產(chǎn)品根據(jù)用戶需求場景的不同，文件管理系統(tǒng)功能多少會有差異，一般都會具備“新建文件夾、上傳、下載、重命名、移動、復(fù)制文件/文件夾、復(fù)制文件/文件夾鏈接、刪除、回收站以及權(quán)限管理”這些功能。

1.新建文件夾

Teambition點擊新建文件夾，文件夾名字為空，并有淺灰色文字提示“按Enter新建文件夾”，操作后發(fā)現(xiàn)除按Enter完成新建，還可點擊其他區(qū)域完成確認(rèn)操作。百度網(wǎng)盤默認(rèn)文件夾名稱為“新建文件夾”，且名稱為選中狀態(tài)，輸入框后跟隨對勾和叉號按鈕，代表確認(rèn)和取消，只有點擊這兩個按鈕操作才能成功，沒有其他快捷操作。細(xì)想新建文件夾的操作其實與電腦上新建文件夾的操作功能一致，用戶既然使用電腦便對電腦的交互已經(jīng)產(chǎn)生使用習(xí)慣，新建文件夾的交互可以和電腦保持一致，文件夾默認(rèn)一個名稱，如“新建文件夾”，按回車或點擊其他區(qū)域完成創(chuàng)建動作。另外如果文件名為空文件夾不能創(chuàng)建成功。

▲Teambition

▲百度網(wǎng)盤

2.上傳

①上傳功能按交互分為點擊按鈕上傳和拖拽上傳，按功能又分為上傳文件和上傳文件夾。拖拽上傳兩個功能可一起操作，這里不做過多贅述，重點分析點擊按鈕上傳。在網(wǎng)頁端這兩個功能必須分開操作，不能一次性選擇，問過開發(fā)，這屬于技術(shù)問題。Teambition采用的交互是，點擊上傳按鈕默認(rèn)上傳文件，“上傳”按鈕旁邊有一個代表下拉功能的小箭頭，點擊箭頭出現(xiàn)下拉選項“上傳文件”和“上傳文件夾”。百度網(wǎng)盤采用的交互是只顯示出了上傳功能按鈕，鼠標(biāo)懸浮時出現(xiàn)下拉選項。Teambition的弊端在于用戶需要上傳文件夾時需要先點擊下拉按鈕，再點擊上傳文件夾，產(chǎn)生兩部操作，而百度網(wǎng)盤只需一步。這個交互細(xì)節(jié)影響不大，用戶一般都使用拖拽到指定區(qū)域上傳，點擊按鈕上傳相比使用率較低。個人認(rèn)為這個功能可在百度網(wǎng)盤交互的基礎(chǔ)上，在上傳二字旁邊加一個下拉箭頭，整個操作區(qū)域為藍(lán)色按鈕，會更加清晰直觀。

▲Teambition

▲百度網(wǎng)盤

②上傳列表

上傳列表只討論一個問題，上傳過程中如果點擊右上角的關(guān)閉按鈕（也就是整個上傳列表的關(guān)閉按鈕），已經(jīng)上傳成功的文件應(yīng)不應(yīng)該在用戶的文件系統(tǒng)列表中展示。Teambition和百度網(wǎng)盤采取了截然不同的兩種處理方式，Teambition的文件中不會產(chǎn)生剛才上傳成功的文件，百度網(wǎng)盤則相反。分析用戶場景，為什么用戶點擊整個列表的取消按鈕，而不是取消其中的一兩個文件，說明用戶是對所有文件都不想上傳了，比如發(fā)現(xiàn)上傳的文件夾選錯了，或者上傳錯了地方，或者網(wǎng)速太慢不想上傳了，既然點擊的是整個列表的取消按鈕，就說明針對的是所有文件，故在上傳列表中上傳成功的文件也不應(yīng)該出現(xiàn)在用戶的文件系統(tǒng)中。

另：文件夾套文件夾的上傳，上傳列表只展示文件，但上傳成功后在用戶的文件系統(tǒng)還是以文件夾套文件夾的形式存在。

▲百度網(wǎng)盤

3.下載

下載一般不需要設(shè)計，是瀏覽器自身的功能，但是針對我們團隊產(chǎn)生的問題還是有個小細(xì)節(jié)要說。下載分單個文件下載和多個文件或文件夾的下載，我們的開發(fā)完成后，在進(jìn)行UI測試時發(fā)現(xiàn)不管是哪種情況，開發(fā)做的都是以壓縮包的格式呈現(xiàn)，其實對單個文件來說，壓縮包的形式屬于畫蛇添足，用戶還要多一步解壓的操作。所以單個文件下載完成以文件本身的格式展現(xiàn)就可以了。

下載單個文件——文件本身

下載多個文件或文件夾——壓縮包

4.重命名

Teambition重命名只顯示文件的名稱，不顯示后綴名，百度網(wǎng)盤顯示文件名也顯示后綴名，文件名默認(rèn)為選中狀態(tài)，確認(rèn)取消交互同新建文件夾，這里不再做說明，只討論名稱的顯示方式。在文件管理系統(tǒng)中修改后綴名的需求很少，即便要修改可以下載到電腦再修改，比如是電腦不能識別的格式等情況，如果在文件管理系統(tǒng)中用戶修改了后綴名很容易造成文件不能被識別，所以重命名時可只顯示文件名稱就可以了，文件名稱為全部選中的狀態(tài)，更利于用戶的操作。

▲Teambition

▲百度網(wǎng)盤

注：百度網(wǎng)盤重命名時輸入框長度太短，顯示的名字的字符數(shù)很少，如圖和未編輯狀態(tài)相比長度縮短了一半，浪費空間也不好用。

重命名時如果該名稱已經(jīng)存在，Teambition會出現(xiàn)名稱一樣的文件，百度網(wǎng)盤以在名稱后添加序號如（1）的形式處理。

▲百度網(wǎng)盤

5.移動

在展現(xiàn)形式上Teambition和蘋果電腦分欄展示的形式相同，用戶使用時會更加直觀，百度網(wǎng)盤采用的是比較傳統(tǒng)的樹形控件。移動需要注意的是文件夾移動時不能移動到自身的文件夾，Teambition把這種文件夾做了置灰不可點擊的處理，百度網(wǎng)盤是在用戶選擇了自身文件夾后提示“不能將文件移動到自身或其子目錄下”，高下立判。

注：移動或復(fù)制文件夾時在彈窗選擇的頁面都會有新建文件夾的功能。

▲Teambition

?▲百度網(wǎng)盤

▲百度網(wǎng)盤

移動成功后Teambition不僅顯示移動文件數(shù)目，移動至的文件夾也會展示，并且可以點擊跳轉(zhuǎn)至該文件夾，百度網(wǎng)盤只是做了移動成功的提示。

▲Teambition

?▲百度網(wǎng)盤

6.復(fù)制

Teambition和百度網(wǎng)盤的文件和文件夾不能復(fù)制到當(dāng)前所在級別中，Dropbox可以，關(guān)于這一點我覺得差別不是很大，可根據(jù)本身系統(tǒng)需求進(jìn)行設(shè)計。

7.復(fù)制文件/文件夾鏈接

復(fù)制鏈接的功能很好用，比如團隊內(nèi)部協(xié)作時對于上傳的文件可以復(fù)制鏈接發(fā)給需要的小伙伴，有些系統(tǒng)有權(quán)限設(shè)置還可以分享給外部用戶。

8.刪除和回收站

Teambition的回收站藏的很深，用戶在刪除操作后的提示會顯示回收站的位置，百度網(wǎng)盤只有刪除成功的提示，因為百度網(wǎng)盤的回收站和文件在一個層級，用戶不存在找不到回收站的情況。當(dāng)時在想Teambition為什么不把查看回收站也做成可點擊的狀態(tài)，和移動、復(fù)制后的操作提醒保持一致，思考后認(rèn)為用戶刪除文件后一般不會伴隨查看的操作，而且查看回收站是一個比較低頻的操作需求。

▲Teambition

▲百度網(wǎng)盤

另外Teambition的回收站文件和文件夾是分開的，其實字段既然都相同，放在一起未嘗不可，而且用戶在回收站會按時間順序進(jìn)行查找，同時刪除了文件和文件夾，在回收站要在兩個列表查找兩次未免有些麻煩。我們的開發(fā)反饋給我的信息是文件和文件夾分開放比較容易實現(xiàn)，放在一個列表會麻煩一些，不知道Teambition的處理方式有沒有這方面的原因。

百度網(wǎng)盤的回收站兩個操作按鈕只有圖標(biāo)，沒有文字的解釋，雖然大部分用戶對這兩個圖標(biāo)的含義已經(jīng)很熟知了，但還是要考慮到小部分用戶，要把用戶當(dāng)傻瓜對待，這里可以和“全部文件”里的交互保持一致，鼠標(biāo)懸浮時出現(xiàn)這個按鈕的名稱。

▲Teambition

▲百度網(wǎng)盤

9.權(quán)限管理

權(quán)限管理各公司根據(jù)需求不同功能也會有差異，這里只提一點，設(shè)置了權(quán)限的文件應(yīng)和未設(shè)置的做以區(qū)分，常見的操作是加了權(quán)限的文件會添加一個小鎖的圖標(biāo)。

10.其他細(xì)節(jié)

①.關(guān)于不同文件類型的圖標(biāo)展示

一般文件系統(tǒng)涉及到的圖標(biāo)有文件夾，Word 文檔，Excel 表格，PPT，PDF，圖片，視頻，音頻，壓縮及其他格式文件。這里著重討論圖片格式文件的圖標(biāo)，百度網(wǎng)盤采用了和其他格式一樣的形式，用了一個圖標(biāo)代替，而Teambition則是顯示圖片縮略圖，用戶通過縮略圖可以對文件進(jìn)行判斷。從開發(fā)角度，顯示縮略圖比統(tǒng)一用一個圖標(biāo)要麻煩很多。

②.文件名的展示

因為文件名的長度有限定，所以會存在顯示不全的情況，關(guān)于文件名的展示不建議省略最后面，如“ui首頁界面第一版的最終…”，比較好的方式是省略文件名的其中一部分，最后展示出格式的后綴，如“ui首頁界面第一版的…版本.jpg”。Teambition和百度網(wǎng)盤對所有的文件名做了鼠標(biāo)懸浮展示文件名的樣式，Dropbox只對文件名展示不全的情況做了懸浮展示的效果。我最開始的想法是名字能夠展示全沒必要再做鼠標(biāo)懸浮的名稱展示，后來考慮到鼠標(biāo)懸浮再次出現(xiàn)文件名會令用戶更確認(rèn)當(dāng)前所操作的文件是哪個，反饋效果會更好。

▲Teambition

▲百度網(wǎng)盤

③.可操作區(qū)域

Teambition的點擊區(qū)域是一條，百度網(wǎng)盤必須要點擊文件名，對于文件名比較簡短的點擊區(qū)域太小，不方便。

④.文件夾的顏色的更改（標(biāo)記）

Teambition可對文件夾的顏色進(jìn)行更改，相當(dāng)于一個標(biāo)記的功能。這里提一下有道云筆記，因為我個人很喜歡用有道云筆記，但是在使用過程中發(fā)現(xiàn)有一點不方便，由于我的文件夾分類比較多，個別一兩個文件夾想做區(qū)分處理以便更容易查找，但是沒有這種功能，建議可增加類似Teambition更改文件夾顏色的設(shè)置，或蘋果電腦對文件進(jìn)行顏色區(qū)分標(biāo)記的功能。