傳統(tǒng)的圖片上傳交互很簡(jiǎn)單：一個(gè)文件域要求用戶選擇圖片文件，一個(gè)提交按鈕（如下圖）。

這種方式有很多缺點(diǎn)，比如選擇圖片后看不到預(yù)覽，一次只能選擇一張圖，上傳過(guò)程看不到進(jìn)度。當(dāng)然也有它自身的優(yōu)點(diǎn)：html本身的表單控件，代碼簡(jiǎn)單，上傳不易出錯(cuò)，適合低速網(wǎng)絡(luò)環(huán)境�，F(xiàn)在富媒體橫行的時(shí)代，用戶需要長(zhǎng)傳大量圖片，這種傳統(tǒng)表單的方式上傳圖片顯然已經(jīng)跟不上時(shí)代的需求，基于flash、html5的新型上傳方式被廣泛的應(yīng)用。

我們從上傳圖片前、上傳中、上傳后三個(gè)步驟來(lái)分析其中的交互過(guò)程。

上傳前

上傳圖片前一般可以：查看已上傳相片、選擇布局、來(lái)源等。

↑微博上傳圖片前需要選擇單張還是多張

↑先擇布局后再單張依次上傳

↑ QQ空間的心情發(fā)布框首先讓用戶選擇圖片來(lái)源

上傳中

上傳大量圖片時(shí)，是否可以讓用戶利用好等待的時(shí)間，比如在上傳過(guò)程中就可以添加圖片描述，移除不需要的圖片。上傳圖片過(guò)程中最基本的需求是上傳進(jìn)度顯示，大批量上傳時(shí)不易導(dǎo)致用戶煩躁。

↑ 點(diǎn)點(diǎn)網(wǎng)上傳圖片過(guò)程中有上傳進(jìn)度顯示，已上傳成功的圖片可以添加描述，可以選擇圖片布局，可以刪除圖片

↑ 網(wǎng)易相冊(cè)上傳圖片過(guò)程中可以查看上傳進(jìn)度，可以添加圖片描述

↑ QQ相冊(cè)上傳圖片過(guò)程中只有進(jìn)度顯示。

上傳完成后

添加描述，選擇布局，簡(jiǎn)單修改（旋轉(zhuǎn)、裁剪等）

↑ 圖片上傳完成后，QQ相冊(cè)推薦你為圖片增加描述，寫(xiě)圖片日志

↑ 在微博上，圖片上傳完成后可以拖動(dòng)鼠標(biāo)排序，放大、縮小圖片等簡(jiǎn)單處理。

新技術(shù)帶來(lái)的變革

在本地程序中，可以將圖片直接復(fù)制粘貼到文檔中，亦可以將圖片拖放到程序里實(shí)現(xiàn)打開(kāi)和修改，目前Google doc的網(wǎng)頁(yè)實(shí)現(xiàn)了以上兩種圖片上傳方式，使它更像一款本地應(yīng)用。QQ空間中發(fā)布的日志如果有引用外部的圖片，發(fā)布成功后會(huì)提示用戶是否自動(dòng)將外鏈圖片轉(zhuǎn)存到相冊(cè)內(nèi)。這一系列的交互，看似簡(jiǎn)單卻需要后端復(fù)雜技術(shù)的支持。用戶的操作少了，上傳圖片更加方便了，也許就是這些細(xì)節(jié)，留住了更多的用戶，讓他們不愿意遷移到其他平臺(tái)。

標(biāo)簽： 圖片上傳 交互設(shè)計(jì) 用戶體驗(yàn) 

版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請(qǐng)聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點(diǎn)！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請(qǐng)與原作者聯(lián)系。