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

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

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

辛辛苦苦上傳完畢之后，突然提示，你上傳的文件格式不正確，或者，您上傳的文件大小超過限制，，或者其他的提示告訴你，你超長時間的上傳等待其實都是白費。

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

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

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

 

事實上，99%的人都不會直接輸入文件確切地址，他們都是直接點擊瀏覽選擇文件。

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

文件名,文件大小,上傳速度,上傳等待時間.

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

 

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

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

說起上傳，我們不能不錯過照片上傳方式，照片是上傳功能使用率最高的站點。因為這涉及到批量上傳。我們看看照片站點在這方面的創(chuàng)新。

 

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

另外一個照片分享站點有著更加有趣的設計。

 

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

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

 

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

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

 

郵件上傳，讓我非常滴的困惑，我需要上傳的照片是放在郵件正文內(nèi)呢？還是放在郵件附件內(nèi)？這真是一個傷腦筋的問題，而且我并不打算去核實。因為我懶。

 

鼠標右鍵上傳，可惜的是，這又是一個只支持IE瀏覽器的 功能，而且這個功能只能在本機使用，我個人估計設置賬號密碼都要讓我折騰半天的了。

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

以上講得最多的其實還是圖片的上傳，圖片文件容量較小，在現(xiàn)今的網(wǎng)絡情況下，不會有太多的上傳障礙，大不了重新操作一遍就是了?？墒侨绻斘覀冃枰蟼鞔笕萘康囊曨l文件或者大文件的時候，斷點續(xù)傳的功能就變得非常的必要的。

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

 

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

 

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

最后一種上傳類似的就是偷偷上傳，比如以前的GDriver，安裝一個客戶端之后，會在電腦顯示一個虛擬空間，當你把文件扔進去的時候，電腦就會偷偷的在后臺幫你上傳文件到遠程空間，不影響你的其他操作。非常的人性化。

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