在工作生活中，我們常常能夠見到各種各樣的組件，當(dāng)用戶需要把本地?cái)?shù)據(jù)發(fā)布到遠(yuǎn)程服務(wù)器時(shí)，就需要用到組件。那么組件該如何上傳呢？本文從五個(gè)方面講述，希望對你有所幫助。

當(dāng)用戶需要把本地?cái)?shù)據(jù)發(fā)布到遠(yuǎn)程服務(wù)器時(shí)，就需要用到上傳組件，比如上傳頭像，上傳視頻、提交資料等。它是B端產(chǎn)品中比較常見的組件。

在工作和生活中我們看到過各種各樣的上傳組件，有圖片上傳、視頻上傳、文檔上傳、點(diǎn)擊上傳、拖拽上傳、單文件上傳、批量上傳等等等等。

各式各樣的上傳組件，都是為了滿足大家傳輸數(shù)據(jù)時(shí)的不同需求而產(chǎn)生。

做B端產(chǎn)品時(shí)，如何判斷當(dāng)前頁面使用哪種上傳組件？這是產(chǎn)品經(jīng)理或交互設(shè)計(jì)師面臨的一個(gè)問題。在思考這個(gè)問題前，有必要先來系統(tǒng)的了解一下上傳組件。了解它，才能用好它。

仔細(xì)分析下來會發(fā)現(xiàn)，不管如何千變?nèi)f化，上傳組件都會有三個(gè)基本結(jié)構(gòu)：選擇上傳內(nèi)容、管理上傳內(nèi)容、展示上傳狀態(tài)。如下圖：這是最典型、最常見的幾種上傳組件，大家可以體驗(yàn)一下流程。

https://gevoaf.axshare.com/start.html#p=%E4%B8%8A%E4%BC%A0%E7%BB%84%E4%BB%B6_%E9%AB%98%E4%BF%9D%E7%9C%9F&id=aa4gij&g=1

一、選擇上傳內(nèi)容

選擇上傳內(nèi)容，是上傳流程的第一步。一般是由一個(gè)按鈕或者一個(gè)視覺icon來觸發(fā)上傳動作。在觸發(fā)按鈕的旁邊，可以顯示一段提示信息，告知用戶上傳的文件類型、大小或數(shù)量方面的限制。
根據(jù)需求場景不同，可以選擇是單選還是多選。需要批量上傳時(shí)，一般選擇支持多選，方便用戶操作。

還有一個(gè)小細(xì)節(jié)，觸發(fā)按鈕的文案會在選擇上傳內(nèi)容后發(fā)生變化：

• 選擇上傳內(nèi)容前，觸發(fā)按鈕的的初始化文案都是“選擇文件”。
• 當(dāng)選擇上傳內(nèi)容后，單文件組件的觸發(fā)按鈕文案會改為“重新上傳”。多文件組件的按鈕文案會改為“繼續(xù)上傳”。

如下圖：

幾種常見的觸發(fā)按鈕樣式：

（1）按鈕式

這種觸發(fā)按鈕適用場景很多，支持各種文件格式，是最常見的一種形式。按鈕周圍可以增加一些必要的提示文案，使用起來很方便。

（2）圖標(biāo)式

圖標(biāo)式的觸發(fā)icon，主要用于圖片格式的文件上傳。上傳后的內(nèi)容直接覆蓋觸發(fā)icon，節(jié)省頁面空間。

（3）拖拽框式

拖拽框式的上傳組件，可以給用戶一種更直接更加可視化的交互體驗(yàn)。圖片壓縮網(wǎng)站tinypng就是用的拖拽上傳的方式。

這是使用Axure模擬的拖拽上傳的交互，大家可以體驗(yàn)一下拖拽的交互效果，真的很“爽”。

https://7ozhas.axshare.com

二、管理上傳內(nèi)容

互聯(lián)網(wǎng)產(chǎn)品對內(nèi)容的管理，無非四個(gè)動作：增、刪、改、查。用戶在選擇內(nèi)容后，會有兩方面的需求：

1. 看看自己選擇了哪些內(nèi)容，是不是選對了。
2. 對于漏選、多選、錯(cuò)選的內(nèi)容，進(jìn)行增、刪、改的操作。

根據(jù)這兩方面的需求，內(nèi)容管理部分我們需要解決兩個(gè)問題：

1. 內(nèi)容如何展示

首先需要確定需要展示哪些信息，是否需要展示文件名、文件大小、文件格式、上傳時(shí)間？是否需要給文件重命名？重命名的規(guī)范是什么？是否需要展示縮略圖，縮略圖的選取規(guī)則是什么？對于多文件上傳時(shí)，文件如何排序？對于超出限制是如何對用戶進(jìn)行提醒。

確定了需要展示的信息后，就需要思考如何把這些信息清晰簡潔的展示給用戶。在這里可以遵循兩個(gè)原則 ：

1. 分清主次。比如根據(jù)此場景的信息重要程度，可以將文件名突出顯示，文件大小、上傳時(shí)間弱化顯示，有突出有弱化，給用戶梳理出一個(gè)清晰的視覺節(jié)奏。
2. 分清類別。將同一類或者關(guān)聯(lián)性較強(qiáng)的信息放到一個(gè)視覺區(qū)域，防止用戶“找來找去”，提升用戶的信息獲取效率。

幾種常見的內(nèi)容展示樣式：

2. 內(nèi)容的管理

內(nèi)容管理，就是對用戶漏選、多選、錯(cuò)選而進(jìn)行增、刪、改的操作。

• 增：增加文件數(shù)量。一般用于批量上傳和圖片墻。單選的上傳組件不涉及這個(gè)操作。
• 刪：刪除已選文件或者已上傳文件。根據(jù)上傳節(jié)點(diǎn)來分，上傳組件可以分為選擇文件后立即上傳和手動上傳兩類。選擇后立即上傳的組件，因?yàn)閿?shù)據(jù)已經(jīng)發(fā)布到遠(yuǎn)程服務(wù)器，需要?jiǎng)h除遠(yuǎn)程服務(wù)器的文件。對于選擇后手動上傳的數(shù)據(jù)，因?yàn)檫€未發(fā)布到遠(yuǎn)程服務(wù)器，在本地刪除即可，不需要與服務(wù)器產(chǎn)生數(shù)據(jù)交互。
• 改：修改已上傳或已選擇的內(nèi)容。使用新數(shù)據(jù)替換原來的數(shù)據(jù)，不需要對原有數(shù)據(jù)刪除。比如用戶修改頭像，或者替換圖片墻中的某張圖片等。

以下是幾種常見的內(nèi)容管理樣式：

三、上傳狀態(tài)展示

著名的尼爾森十大可用性原則中排在首位的就是狀態(tài)可見原則：用戶的任何操作，頁面都應(yīng)該及時(shí)給出反饋。特別是對于上傳這種持續(xù)時(shí)間較長的操作，更需要清晰直觀的狀態(tài)展示。傳輸狀態(tài)需要展示兩個(gè)維度的信息：上傳進(jìn)度和上傳狀態(tài)。

• 上傳進(jìn)度是指單個(gè)文件傳輸?shù)倪M(jìn)度。一般用進(jìn)度條、進(jìn)度環(huán)和進(jìn)度百分比來展示。
• 上傳狀態(tài)是指文件是否已經(jīng)成功發(fā)布到遠(yuǎn)程服務(wù)器，分為上傳成功和上傳失敗兩種。一般由成功圖標(biāo)和失敗圖標(biāo)來展示。

幾種常見的上傳狀態(tài)展示案例：

四、如何選擇合適的上傳組件

明白了上傳組件的結(jié)構(gòu)，在判斷自己產(chǎn)品使用什么樣的上傳組件時(shí)就有了依據(jù)?？梢宰裱幌聨讞l規(guī)則：

• 單文件上傳，可以使用按鈕樣式。按鈕樣式適用場景較多，圖片、文件都可以使用。
• 圖片上傳，使用縮略圖可以提升用戶體驗(yàn)。
• 多文件上傳時(shí)，可以選擇文件列表或者表格，上傳內(nèi)容展示清晰。
• 展示上傳進(jìn)度和選擇使用進(jìn)度套、進(jìn)度環(huán)、進(jìn)度百分比或者它們的組合。
• 如果產(chǎn)品對用戶體驗(yàn)要求較高，可以選擇使用拖拽上傳。

五、從實(shí)戰(zhàn)中整理出來的常用B端組件

這是作者在工作中整理出來的常用B端組件。高保真、低保證和靜態(tài)組件都有，可以用于不同交互要求的項(xiàng)目。感興趣的小伙伴可以看一下。

https://gevoaf.axshare.com/

小結(jié)

對于大部分初學(xué)者來說，上傳組件就只是一個(gè)帶有“選擇文件”的按鈕，并不會深入思考按鈕背后的內(nèi)容。而能否進(jìn)行深入思考，能否在別人的思想盡頭再細(xì)分出各種邏輯和可能性，是每個(gè)產(chǎn)品經(jīng)理和交互設(shè)計(jì)師進(jìn)化成長的標(biāo)志。

熟練掌握B端組件，打好扎實(shí)的基本功，你的B端之路會走的更加平穩(wěn)、從容。