好玩的B端組件 丨 上傳組件
在工作生活中,我們常常能夠見到各種各樣的組件,當用戶需要把本地數據發布到遠程服務器時,就需要用到組件。那么組件該如何上傳呢?本文從五個方面講述,希望對你有所幫助。
當用戶需要把本地數據發布到遠程服務器時,就需要用到上傳組件,比如上傳頭像,上傳視頻、提交資料等。它是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. 內容的管理
內容管理,就是對用戶漏選、多選、錯選而進行增、刪、改的操作。
- 增:增加文件數量。一般用于批量上傳和圖片墻。單選的上傳組件不涉及這個操作。
- 刪:刪除已選文件或者已上傳文件。根據上傳節點來分,上傳組件可以分為選擇文件后立即上傳和手動上傳兩類。選擇后立即上傳的組件,因為數據已經發布到遠程服務器,需要刪除遠程服務器的文件。對于選擇后手動上傳的數據,因為還未發布到遠程服務器,在本地刪除即可,不需要與服務器產生數據交互。
- 改:修改已上傳或已選擇的內容。使用新數據替換原來的數據,不需要對原有數據刪除。比如用戶修改頭像,或者替換圖片墻中的某張圖片等。
以下是幾種常見的內容管理樣式:
三、上傳狀態展示
著名的尼爾森十大可用性原則中排在首位的就是狀態可見原則:用戶的任何操作,頁面都應該及時給出反饋。特別是對于上傳這種持續時間較長的操作,更需要清晰直觀的狀態展示。傳輸狀態需要展示兩個維度的信息:上傳進度和上傳狀態。
- 上傳進度是指單個文件傳輸的進度。一般用進度條、進度環和進度百分比來展示。
- 上傳狀態是指文件是否已經成功發布到遠程服務器,分為上傳成功和上傳失敗兩種。一般由成功圖標和失敗圖標來展示。
幾種常見的上傳狀態展示案例:
四、如何選擇合適的上傳組件
明白了上傳組件的結構,在判斷自己產品使用什么樣的上傳組件時就有了依據??梢宰裱幌聨讞l規則:
- 單文件上傳,可以使用按鈕樣式。按鈕樣式適用場景較多,圖片、文件都可以使用。
- 圖片上傳,使用縮略圖可以提升用戶體驗。
- 多文件上傳時,可以選擇文件列表或者表格,上傳內容展示清晰。
- 展示上傳進度和選擇使用進度套、進度環、進度百分比或者它們的組合。
- 如果產品對用戶體驗要求較高,可以選擇使用拖拽上傳。
五、從實戰中整理出來的常用B端組件
這是作者在工作中整理出來的常用B端組件。高保真、低保證和靜態組件都有,可以用于不同交互要求的項目。感興趣的小伙伴可以看一下。
https://gevoaf.axshare.com/
小結
對于大部分初學者來說,上傳組件就只是一個帶有“選擇文件”的按鈕,并不會深入思考按鈕背后的內容。而能否進行深入思考,能否在別人的思想盡頭再細分出各種邏輯和可能性,是每個產品經理和交互設計師進化成長的標志。
熟練掌握B端組件,打好扎實的基本功,你的B端之路會走的更加平穩、從容。
專欄作家
原木森林,人人都是產品經理專欄作家。專注于用戶增長相關的邏輯、方法和案例分享。
本文原創發布于人人都是產品經理。未經許可,禁止轉載
題圖來自Unsplash,基于CC0協議
該文觀點僅代表作者本人,人人都是產品經理平臺僅提供信息存儲空間服務。
大佬!同求RP源文件,317404788@qq.com,跪謝?。。?!
大佬!同求RP源文件,1343203720@qq.com
大佬!同求RP源文件,1223922609@qq.com
大佬!同求RP源文件,1085620998@qq.com
大佬,同求rp源文件,1970893143@qq.com, 感謝!??
大佬可以發RP源文件,2622749883@qq.com,謝謝??
大佬同求RP源文件,yhxdtc@163.com,感謝感謝?。??
大佬同求RP源文件,625207764@qq.com,大謝~大謝??
同求rp源文件,751019803@qq.com
大佬,跪求RP源文件,minfirfly@163.com,十分感謝~~
大佬,求RP源文件,xugm.wh@qq.com,感謝~~
大佬,求RP源文件,1169147305@qq.com,感謝?。?/p>
大佬同求rp源文件2970734391@qq.com
大佬,求rp源文件,packpage@163.com , 謝謝??
大佬。同求源文件,tsaicici@163.com,感謝感謝
大佬。同求源文件,1010099848@qq.com,感謝感謝?。。。?/p>
大佬,求RP源文件,1464234544@qq.com
大佬,跪求rp源文件
大佬,同求RP源文件,zhengguohao20@163.com
大佬,同求RP源文件,1414254379@qq.com
大佬~同求RP源文件,1244707355@qq.com
大佬~同求RP源文件,1439558087@qq.com
大佬 求RP源文件,360774582@qq.com
大佬,同求RP源文件,2935622254@qq.com
非常感謝.
【上一個寫錯了,再發一遍(嘿哈)】
大佬! 求源rp文件,597127908@qq.com 感謝!
大佬同求RP源文件,617656710@qq.com
大佬同求RP源文件,354046390@qq.com
同求rp源文件,964738742@qq.com
大佬,求.rp源文件
留個郵箱,私發你~
大佬,求rp源文件,蟹蟹!hsusaline2015@163.com
您好 可以轉發給我嘛 1229030978@qq.com 感激不盡(擔心大佬發不過來…
??