如何設(shè)計(jì)網(wǎng)站中的上傳功能？

我們平時(shí)在日常網(wǎng)絡(luò)生活當(dāng)中，上傳則是一個(gè)非常重要的功能。尤其是對(duì)于那么依靠網(wǎng)友分享的站點(diǎn)來(lái)說(shuō)，上傳是用戶體驗(yàn)的重要的部分，分享是web2.0時(shí)代的主流特色，隨之分享而來(lái)的上傳，則是其中的關(guān)鍵一環(huán)。

先來(lái)說(shuō)說(shuō)以前的上傳吧，真是令人苦惱。網(wǎng)絡(luò)速度緩慢是最直接的原因，當(dāng)然在交互設(shè)計(jì)上也存在著讓人崩潰的地方，沒(méi)有清晰的提示和防止出錯(cuò)的設(shè)計(jì)，讓用戶使用起來(lái)非常的不便利。相信你或多或少都經(jīng)歷過(guò)下面的災(zāi)難時(shí)刻。

辛辛苦苦上傳完畢之后，突然提示，你上傳的文件格式不正確，或者，您上傳的文件大小超過(guò)限制，，或者其他的提示告訴你，你超長(zhǎng)時(shí)間的上傳等待其實(shí)都是白費(fèi)。

眼看著文件就要上傳完畢了，突然斷電或者其他情況讓你上傳停止，你是不是有些崩潰的想法。

選好了文件，點(diǎn)擊上傳，等等等，等到天荒地老也沒(méi)任何一點(diǎn)提示，只能惶恐的繼續(xù)等待，然后發(fā)生第一條和第二條的情況。

說(shuō)起最初的上傳交互，相信你們都記得，一個(gè)field text 加上一個(gè)button,你可以在field text內(nèi)輸入文件的確切地址,也可以點(diǎn)擊按鈕瀏覽你的本地硬盤選擇文件。

 

事實(shí)上，99%的人都不會(huì)直接輸入文件確切地址，他們都是直接點(diǎn)擊瀏覽選擇文件。

我們關(guān)注一下用戶在上傳中所需要關(guān)注的關(guān)鍵信息.

文件名,文件大小,上傳速度,上傳等待時(shí)間.

可以發(fā)現(xiàn)，上傳文件的本地路徑就顯得并不那么重要，既然不那么重要，為什么我們還需要有一個(gè)常常的field text來(lái)顯示文件的本地路徑呢，我們關(guān)注的是我們具體是上傳哪個(gè)文件而已，我們看看google的改進(jìn)方案.

 

去掉了field text,只留下一個(gè) button讓用戶瀏覽本地,當(dāng)選擇文件后,按鈕將顯示上傳文件的詳細(xì)文件名（包括后綴）。

這是一個(gè)很大的進(jìn)步，這表示在上傳這塊領(lǐng)域中開始有先行者的足跡了。勇于去挑戰(zhàn)用戶習(xí)慣，勇于去做更好的設(shè)計(jì)。

說(shuō)起上傳，我們不能不錯(cuò)過(guò)照片上傳方式，照片是上傳功能使用率最高的站點(diǎn)。因?yàn)檫@涉及到批量上傳。我們看看照片站點(diǎn)在這方面的創(chuàng)新。

 

大部分領(lǐng)先的照片上傳采用的都是flash上傳工具，如上圖，這是在現(xiàn)有技術(shù)條件下實(shí)現(xiàn)功能跨平臺(tái)瀏覽器的最佳方案了，眾所周知，不同瀏覽器對(duì)于web代碼的解析都不同，F(xiàn)lash成為現(xiàn)今唯一一個(gè)跨平臺(tái)的通用表現(xiàn)途徑。從交互設(shè)計(jì)上，這種上傳滿足了所有上傳所需要關(guān)注的關(guān)鍵字：文件名，文件大小，上傳進(jìn)度提示。比較遺憾的是，并沒(méi)有提示具體的上傳速度和上傳時(shí)間，當(dāng)用戶上傳的圖片數(shù)較多的時(shí)候，就會(huì)出現(xiàn)等待不耐煩的情況了。

另外一個(gè)照片分享站點(diǎn)有著更加有趣的設(shè)計(jì)。

 

看到藍(lán)色進(jìn)度條右邊的幾個(gè)小箭頭嗎？具體作用我不太清楚，但是，如果上傳期間發(fā)生了網(wǎng)絡(luò)停滯，這幾個(gè)箭頭就會(huì)出現(xiàn)，告訴我具體的網(wǎng)絡(luò)情況。雖然沒(méi)有告訴我此時(shí)具體的上傳速度，但是他至少告訴了我我的網(wǎng)絡(luò)情況。這很有意思。（事實(shí)上，這種網(wǎng)絡(luò)停滯經(jīng)常出現(xiàn)。）

除了flash上傳之外，還有的就是插件上傳，指的是通過(guò)安裝瀏覽器擴(kuò)展功能的插件，更加方便和有效的上傳照片，比如我們常用的QQ相冊(cè)和網(wǎng)易相冊(cè)都支持插件上傳，插件上傳無(wú)疑是更加的方便的簡(jiǎn)潔，最大的問(wèn)題就是他需要安裝，而且這些插件只針對(duì)IE用戶，局限性比較大。當(dāng)然，在交互上他們也存在著較大的問(wèn)題。

 

當(dāng)你使用插件上傳的時(shí)候，一個(gè)如上圖的彈出窗會(huì)始終保持在你桌面的最前端，阻礙你的視線不說(shuō)，還會(huì)禁止你操作當(dāng)前瀏覽器進(jìn)程，尤其是當(dāng)你使用多標(biāo)簽瀏覽器的時(shí)候，你將不能繼續(xù)瀏覽其他標(biāo)簽的頁(yè)面，唯一的解決辦法就是新開一個(gè)瀏覽器進(jìn)程。

另外的話，還有一些其他的輔助上傳模式，比如郵件上傳，客戶端上傳，鼠標(biāo)右鍵上傳。我們一一來(lái)解讀。

 

郵件上傳，讓我非常滴的困惑，我需要上傳的照片是放在郵件正文內(nèi)呢？還是放在郵件附件內(nèi)？這真是一個(gè)傷腦筋的問(wèn)題，而且我并不打算去核實(shí)。因?yàn)槲覒小?br />
 

鼠標(biāo)右鍵上傳，可惜的是，這又是一個(gè)只支持IE瀏覽器的 功能，而且這個(gè)功能只能在本機(jī)使用，我個(gè)人估計(jì)設(shè)置賬號(hào)密碼都要讓我折騰半天的了。

最后一種當(dāng)然是屬于客戶端上傳啦，這個(gè)就不多說(shuō)了，畢竟我考慮的只是web的表現(xiàn)方式。

以上講得最多的其實(shí)還是圖片的上傳，圖片文件容量較小，在現(xiàn)今的網(wǎng)絡(luò)情況下，不會(huì)有太多的上傳障礙，大不了重新操作一遍就是了?？墒侨绻?dāng)我們需要上傳大容量的視頻文件或者大文件的時(shí)候，斷點(diǎn)續(xù)傳的功能就變得非常的必要的。

需要重視的一點(diǎn)就是，斷點(diǎn)續(xù)傳有取消按鈕，而非斷點(diǎn)續(xù)傳則沒(méi)有（如Google，F(xiàn)lickr，所有按鈕disable，取消上傳的方法是直接關(guān)閉瀏覽器頁(yè)面），這很重要，這是一個(gè)對(duì)用戶的隱性提示。表示這次的上傳取消后能夠繼續(xù)?？磮D。

 

QQ郵箱文件中轉(zhuǎn)站是支持?jǐn)帱c(diǎn)續(xù)傳的（IE插件下實(shí)現(xiàn)），可以看到這個(gè)界面內(nèi)，存在這最小化和關(guān)閉的按鈕，而對(duì)于非斷點(diǎn)續(xù)傳的功能，關(guān)閉按鈕的設(shè)置則顯得多余，還容易引起用戶的錯(cuò)點(diǎn)。造成不必要的損失。

 

當(dāng)然，給文件匹配MD5值，使得相同的文件不再重復(fù)上傳，不僅節(jié)省上傳時(shí)間，還節(jié)約了空間和帶寬，真是一舉兩得。

最后一種上傳類似的就是偷偷上傳，比如以前的GDriver，安裝一個(gè)客戶端之后，會(huì)在電腦顯示一個(gè)虛擬空間，當(dāng)你把文件扔進(jìn)去的時(shí)候，電腦就會(huì)偷偷的在后臺(tái)幫你上傳文件到遠(yuǎn)程空間，不影響你的其他操作。非常的人性化。

我們可以期待，越來(lái)越多的上傳的交互設(shè)計(jì)的創(chuàng)意體現(xiàn)，因?yàn)檫@是一個(gè)web2.0的時(shí)代，這是一個(gè)網(wǎng)民的時(shí)代，而網(wǎng)民參與的最有效方式，就是上傳，這不僅僅指的是上傳文件了。讓我們共同期待吧。