在工作生活中，我們常常能夠見到各種各樣的組件，當用戶需要把本地數據發布到遠程服務器時，就需要用到組件。那么組件該如何上傳呢？本文從五個方面講述，希望對你有所幫助。

當用戶需要把本地數據發布到遠程服務器時，就需要用到上傳組件，比如上傳頭像，上傳視頻、提交資料等。它是B端產品中比較常見的組件。

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

各式各樣的上傳組件，都是為了滿足大家傳輸數據時的不同需求而產生。

做B端產品時，如何判斷當前頁面使用哪種上傳組件？這是產品經理或交互設計師面臨的一個問題。在思考這個問題前，有必要先來系統的了解一下上傳組件。了解它，才能用好它。

仔細分析下來會發現，不管如何千變萬化，上傳組件都會有三個基本結構：選擇上傳內容、管理上傳內容、展示上傳狀態。如下圖：這是最典型、最常見的幾種上傳組件，大家可以體驗一下流程。

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

一、選擇上傳內容

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

還有一個小細節，觸發按鈕的文案會在選擇上傳內容后發生變化：

• 選擇上傳內容前，觸發按鈕的的初始化文案都是“選擇文件”。
• 當選擇上傳內容后，單文件組件的觸發按鈕文案會改為“重新上傳”。多文件組件的按鈕文案會改為“繼續上傳”。

如下圖：

幾種常見的觸發按鈕樣式：

（1）按鈕式

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

（2）圖標式

圖標式的觸發icon，主要用于圖片格式的文件上傳。上傳后的內容直接覆蓋觸發icon，節省頁面空間。

（3）拖拽框式

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

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

https://7ozhas.axshare.com

二、管理上傳內容

互聯網產品對內容的管理，無非四個動作：增、刪、改、查。用戶在選擇內容后，會有兩方面的需求：

1. 看看自己選擇了哪些內容，是不是選對了。
2. 對于漏選、多選、錯選的內容，進行增、刪、改的操作。

根據這兩方面的需求，內容管理部分我們需要解決兩個問題：

1. 內容如何展示

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

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

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

幾種常見的內容展示樣式：

2. 內容的管理

內容管理，就是對用戶漏選、多選、錯選而進行增、刪、改的操作。

• 增：增加文件數量。一般用于批量上傳和圖片墻。單選的上傳組件不涉及這個操作。
• 刪：刪除已選文件或者已上傳文件。根據上傳節點來分，上傳組件可以分為選擇文件后立即上傳和手動上傳兩類。選擇后立即上傳的組件，因為數據已經發布到遠程服務器，需要刪除遠程服務器的文件。對于選擇后手動上傳的數據，因為還未發布到遠程服務器，在本地刪除即可，不需要與服務器產生數據交互。
• 改：修改已上傳或已選擇的內容。使用新數據替換原來的數據，不需要對原有數據刪除。比如用戶修改頭像，或者替換圖片墻中的某張圖片等。

以下是幾種常見的內容管理樣式：

三、上傳狀態展示

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

• 上傳進度是指單個文件傳輸的進度。一般用進度條、進度環和進度百分比來展示。
• 上傳狀態是指文件是否已經成功發布到遠程服務器，分為上傳成功和上傳失敗兩種。一般由成功圖標和失敗圖標來展示。

幾種常見的上傳狀態展示案例：

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

明白了上傳組件的結構，在判斷自己產品使用什么樣的上傳組件時就有了依據?？梢宰裱幌聨讞l規則：

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

五、從實戰中整理出來的常用B端組件

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

https://gevoaf.axshare.com/

小結

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

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