如何在Web端設計上傳圖片(2):上傳多張圖片

圖片是一種常見的數據展現形式，近來接觸到了好幾個關於上傳圖片的設計，本文圍繞「如何在web設計上傳圖片」進行總結。

上一篇介紹了上傳單張圖片，這一篇介紹上傳多張圖片。

一、需求場景

在社交場景中，用戶常常會主動的用圖片去交流，有時候大量的文字效果還不如幾張圖片來的直接，尤其是現在追求有圖有真相，在溝通中通過圖片可以更好的交流、分享。例如在QQ空間、微博、豆瓣中，都可以通過上傳多個圖片，發布最新的動態。那麼在這種同時上傳多個圖片的場景如何進行設計呢？

二、案例分析：微博 VS 豆瓣發布照片

在微博中裡面，用戶在發布新聞、美食、娛樂、電影等信息中通常會穿插上圖片，可以文字+圖片的方式進行信息的傳遞與交流。通常文字的內容不建議太多，人們在瀏覽的時候，更加容易被圖片吸引。並且若是一張圖片不足以表達完成的內容，那麼就需要上傳多張圖片來進行信息的分享。

1. 上傳圖片前

（1）告訴用戶可上傳多張

在微博中鼓勵用戶若有什麼新鮮事想告訴大家，所以發布信息的入口在頁面頂部。可以及時把新鮮的事情通過文字+圖片的方式傳遞給公眾。

首先，系統需要告知用戶，這裡可以上傳多張圖片。

微博在初次上傳圖片的時候，並沒有提醒用戶，可能是因為微博的發布新鮮事情功能對於用戶而言使用的已經非常多了，不需要重點去引導。

但是如果用戶不是特別熟悉的情況下，在上傳圖片前，還是需要告訴用戶支持上傳多個圖片的信息。例如下面豆瓣的文案提示：按住ctrl鍵可最多選中9張，並且還支持拖拽圖片到框裡的方式來上傳圖片。

通常上傳多張圖片時，需要藉助快捷鍵來選擇。ctrl鍵和Shift鍵都可以同時選擇多張圖片，但它們之間也有不同之處，使用的場景是不一樣的。

按住Ctrl鍵選擇多圖上傳，選擇的是多張不連續的圖片。這種方法適合於上傳不連續的多張圖片。

shift鍵也可以同時上傳多張圖片，選擇的是多張連續的圖片。但多張連續圖片是以其中一張為基礎向上或是向下的連續選擇。

（2）告訴用戶上傳圖片的數量限制

圖片支持上傳多張，那麼最多支持上傳多少張，這個信息也是需要告知給用戶。

上面豆瓣上傳圖片的案例中，已經通過文案直接提示：按住ctrl鍵可最多選中9張。

還有一種方式，把圖片的「坑位」都展示出來，這樣就很容易看出來，是可以傳多張圖的。但是這種做法一般會用於這種規則下：

1. 每個「坑位」都是必填項，讓用戶清楚知道需要上傳的圖片；
2. 雖然不是必填項，但是有意引導用戶去填滿這些「坑」，引導用戶分享更多圖片。
3. 圖片的順序，就是根據從左到右上傳的圖片進行排序。

（3）圖片的寬度和高度校驗

有時候上傳圖片還需要考慮圖片的寬度和高度的校驗，比如系統的logo，為了保證效果，需要限制圖片的高度和寬度，防止質量過差或者過大的圖片上傳，因為拉伸、縮放、模糊等因素影響平臺整體的視覺效果。這裡有2種方式：

第一種是輕限制，重引導，為了更靈活支持用戶的使用場景。

不是所有的logo圖對高度和寬度進行限制，更好的方式是對用戶提供更多的建議和引導，而不是強制限制。上傳圖片是用戶的一個主動行為，用戶在上傳後預覽時，可以很主觀的去判斷是否決定使用這張模糊或者質量不高的圖片。

第二種是重限制，重引導，這種就是需要避免用戶的操作對產品帶來的影響。

低質量的圖片是一個雷區，若是越過這個雷區，傷害的就不只是商戶，還會傷害到平臺。像是特別低解析度 完全無法兼容的格式，不支持的尺寸，這類圖片的若是大量在平臺上面出現，就會讓用戶對平臺失去好感，認為平臺質量不過關。所以通過限制不合規的圖片、引導用戶上傳高質量圖片，來限制避免低質量的圖片，降低對平臺質量的影響。

例如淘寶的商品圖片，如果都是低質量的圖片，會讓用戶對平臺的商品質量質疑，所以對商品圖片的解析度，格式等進行了限制，避免了不合規的圖片上傳到平臺中。

2. 上傳圖片中，批量校驗圖片行為

支持用戶上傳多個圖片，由於這種會涉及到多文件的批量操作，同一批文件中可能出現多個文件的圖片格式、圖片大小、圖片數量等屬性信息的校驗。原則上，相同屬性的原因只提醒一次，例如：有5個是非圖片格式，只提示一次圖片格式即可，不需要重複提示5次。錯誤的文件進行提示，正確的文件直接展示即可。

驗的優先級：先校驗文件類型，再校驗文件大小，最後才是圖片的數量。比如最多只能上傳9張圖片，如果一次選擇了12張圖片，並且有非圖片格式，超過大小的文件，那麼這裡的判斷：就是過濾非圖片格式的文件，然後過濾超過圖片大小的，最後判斷圖片是否超過最大限制，若是超過最大數量限制，那麼就展示科研容納的圖片，多餘的圖片提示超過限制，過濾不展示即可。

此時圖片已經上傳滿了，頁面上就沒有添加圖片的按鈕了。只有刪除圖片之後，才會多餘的位置。

3. 多圖上傳的異常處理

經過前面的篩選圖片、圖片校驗步驟，多張圖片選擇好了之後，再用戶點擊「發布」按鈕的那一刻，就是考驗系統的時候了。由於是多圖片的上傳，用戶的信息比較多，上傳的時間會稍微久一點，需要給用戶一個上傳中的狀態提示。

並行需要考慮網絡出現狀況的話，比如網絡超時導致上傳失敗，那這種情況下該怎麼處理。

豆瓣在點擊發布之後，若是在網絡不好的情況下，它的處理方式就有些讓人崩潰，只是提示用戶發送失敗，最重要的是剛剛編輯的內容並沒有保存，對於用戶而言，剛才耗時整理的內容沒有保存，需要重新來過，這是很讓用戶崩潰的。

我們先來看微信的處理方式：當你點擊發布之後，微信會直接跳到朋友圈的頁面並把發布結果展示出來，讓用戶直觀看到最終的成果，就算是在弱網的情況下，微信也是採用這種邏輯處理方式，製造一種「發布成功的假象」，用戶自己看到發布成功，在別人的朋友圈暫時還看不到。並且在網絡好了之後，後臺會再次嘗試，直到發布成功。

4. 上傳圖片後，多圖的展示

圖片上傳成功之後，就是需要關注圖片發布的結果，也是最終需要達到的訴求。

如果圖片發布成功了，會根據圖片的數量，來進行圖片的展示。

方式1：:圖片是重點信息，上傳多少張圖，就展示多少張。

用戶上傳圖片之後，會根據上傳了幾張圖片來展示效果。

方式2：雖然是上傳多張圖片，但是只展示部分圖片，但是附帶圖片的數量，點擊可進入頁面查看所有圖片。

總結

任何一種圖片上傳的方式，其實都是根據用戶的需求、操作場景來設計的，讓用戶更加方便。看似一個簡單的上傳照片的功能卻有很多種不同的設計方案，每個設計方案其實滿足的就是用戶的具體需求和場景。

#相關閱讀#

如何在Web端設計上傳圖片（1）：上傳單張圖片

 

本文由 @瓜子 原創發布於人人都是產品經理，未經作者許可，禁止轉載。

題圖來自Unsplash，基於CC0協議。

收藏已收藏 | {{ postmeta.bookmark }} 點讚已贊 | {{ postmeta.postlike }}