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

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

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

一、需求場(chǎng)景

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

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

在很多社交網(wǎng)站中，常常為了促進(jìn)用戶的溝通，會(huì)鼓勵(lì)用戶上傳個(gè)人頭像。因?yàn)樵谏缃粓?chǎng)景中，個(gè)人頭像比一個(gè)昵稱更加讓人能記住你。

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

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

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

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

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

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

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

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

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

（1）圖片的格式和大小校驗(yàn)

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

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

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

（2）圖片的裁剪

滿足校驗(yàn)之后，圖片才會(huì)回顯在圖片框中，需要注意：

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

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

在用戶上傳圖像之后因?yàn)榇藭r(shí)用戶上傳圖像之后，比對(duì)后續(xù)很多會(huì)修改，此時(shí)這個(gè)入口就不需要特別名稱，只有鼠標(biāo)移到圖像上面，才會(huì)提醒用戶：更換頭像。

總結(jié)

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

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

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