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

在Web網頁中常常遇見圖片上傳，上傳圖片的應用場景場景在個人信息中（比如：上傳個人頭像）、信息反饋（比如：淘寶的訂單評價）、社交場景（比如：上傳圖片發朋友圈）。

我們瞭解圖片的基本屬性主要包括：圖片的文件格式、圖片大小、圖片寬和高，以及圖片數量。那下麵就來看看，針對各種場景下的上傳圖片，該如何根據用戶場景進行設計。

一、需求場景

在很多網站中，常常會遇到上傳單張圖片，最典型的場景就是上傳個人頭像，這個屬於個人信息補充的需求場景，該場景只允許上傳一張圖片。例如用戶在網站註冊之後，基本上都會通過個人中心在裡面上傳個人圖片，設置一個用戶喜歡的頭像。

二、案例分析：微博VS QQ上傳個人頭像

在很多社交網站中，常常為了促進用戶的溝通，會鼓勵用戶上傳個人頭像。因為在社交場景中，個人頭像比一個昵稱更加讓人能記住你。

上傳個人頭像是一個常見功能，但是對於頭像的處理確實有很多方式的。常見的方式是上傳一張高清的圖片，但是顯示的是縮略圖。其次社交場景的上傳圖片用戶更多趨向處理圖片，比如對圖片進行濾鏡美顏，目的是通過頭像吸引別人。還有一種上傳頭像之後，是用戶精心挑選的滿意的圖片設置為自己的頭像，支持再次點擊頭像，可以全屏顯示原圖。

我們就來看看微博和QQ中是如何上傳用戶的個人頭像的。

1. 上傳圖片前，告訴用戶圖片規則

在新浪微博的個人主頁，可以看到自己的圖像，註冊賬號之後，都是提供一個默認的圖片。後期是引導用戶上傳頭像。

所以在用戶沒有上傳過圖像，系統使用默認圖片，有一個很醒目的“上傳頭像”，去引導用戶上傳自己的頭像。

用戶點擊“上傳頭像”之後，打開頭像設置窗口。

在這個彈框中，首先就告知用戶上傳圖片的規則：圖片的格式和大小限制。在上傳圖片區域用文案提示：只支持JPG、PNG、GIF，大小不超過5M。

微博的頭像設置這裡，由於上傳的圖片，需要進行裁剪，所以右側還提供了一個預覽效果。由於微博的頭像應用在3個地方：分別是個人頁面的大尺寸頭像、發表微博的中尺寸頭像以及發表評價使用的小尺寸圖像，三個地方都是不同的尺寸，所以這裡的預覽有3個不同尺寸的預覽效果。

2. 在上傳圖片中，引導用戶行為

（1）圖片的格式和大小校驗

點擊“選擇圖片”，彈出選擇文件的窗口，web端支持自定義文件，可根據支持的圖片類型，自定義文件的格式，只能選擇符合規則的圖片格式。

但是web端可以支持查看所有文件類型，若是上傳其他類型的文件，系統會給予引導，告知用戶規則。若是選擇了支持的圖片格式，但是超過文件大小，也是需要校驗，告知用戶支持上傳圖片的最大限制，引導用戶上傳範圍內的圖片。

校驗的優先級：先校驗文件類型，再校驗文件大小，最後才是圖片的高度和寬度。

（2）圖片的裁剪

滿足校驗之後，圖片才會回顯在圖片框中，需要註意：

圖片需要居中顯示在圖片框中，等級壓縮占滿圖片框的寬度或者高度。 圖片的裁剪工具，在圖片框上高亮顯示裁剪圖片的工具，可以等比例放大這個裁剪工具，支持在屏幕任意位置移動，來裁剪圖片。右側時預覽。這個裁剪工具，必須夠明顯，圓圈之外的需要有遮罩影響，高亮中間的圓圈。

4.還有一種圖片裁剪方式，就是QQ上傳圖像，裁剪框是固定的，不可調整。主要是通過移動上傳的圖片，放大、縮小、移動圖片選擇合適的效果進行圖片裁剪。

3. 上傳圖片後，展示信息

在用戶上傳圖像之後因為此時用戶上傳圖像之後，比對後續很多會修改，此時這個入口就不需要特別名稱，只有鼠標移到圖像上面，才會提醒用戶：更換頭像。

總結

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

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

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