圖片是一種常見的數(shù)據(jù)展現(xiàn)形式，近來接觸到了好幾個關(guān)于上傳圖片的設(shè)計，本文圍繞“如何在web設(shè)計上傳圖片”進行總結(jié)。

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

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

一、需求場景

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

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

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

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

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

1. 上傳圖片前，告訴用戶圖片規(guī)則

在新浪微博的個人主頁，可以看到自己的圖像，注冊賬號之后，都是提供一個默認(rèn)的圖片。后期是引導(dǎo)用戶上傳頭像。

所以在用戶沒有上傳過圖像，系統(tǒng)使用默認(rèn)圖片，有一個很醒目的“上傳頭像”，去引導(dǎo)用戶上傳自己的頭像。

用戶點擊“上傳頭像”之后，打開頭像設(shè)置窗口。

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

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

2. 在上傳圖片中，引導(dǎo)用戶行為

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

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

但是web端可以支持查看所有文件類型，若是上傳其他類型的文件，系統(tǒng)會給予引導(dǎo)，告知用戶規(guī)則。若是選擇了支持的圖片格式，但是超過文件大小，也是需要校驗，告知用戶支持上傳圖片的最大限制，引導(dǎo)用戶上傳范圍內(nèi)的圖片。

校驗的優(yōu)先級：先校驗文件類型，再校驗文件大小，最后才是圖片的高度和寬度。

（2）圖片的裁剪

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

1. 圖片需要居中顯示在圖片框中，等級壓縮占滿圖片框的寬度或者高度。
2. 重新選擇圖片的按鈕位置，需要單獨在底部展示，還有一種交互是點擊中間的圖片框支持再次重新選擇圖片進行上傳，但是這個交互方式容易讓用戶點擊圖片的時候誤操作打開上傳圖片窗口。
3. 圖片的裁剪工具，在圖片框上高亮顯示裁剪圖片的工具，可以等比例放大這個裁剪工具，支持在屏幕任意位置移動，來裁剪圖片。右側(cè)時預(yù)覽。這個裁剪工具，必須夠明顯，圓圈之外的需要有遮罩影響，高亮中間的圓圈。4.還有一種圖片裁剪方式，就是QQ上傳圖像，裁剪框是固定的，不可調(diào)整。主要是通過移動上傳的圖片，放大、縮小、移動圖片選擇合適的效果進行圖片裁剪。

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

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

總結(jié)

任何一種圖片上傳的方式，其實都是根據(jù)用戶的需求、操作場景來設(shè)計的，讓用戶更加方便?？此埔粋€簡單的上傳照片的功能卻有很多種不同的設(shè)計方案，每個設(shè)計方案其實滿足的就是用戶的具體需求和場景。

本文由 @瓜子 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

題圖來自Unsplash，基于CC0協(xié)議。