互動設計案例:網站圖片上傳功能的設計分析

來源:互聯網
上載者:User

文章描述:圖片上傳的互動設計.

傳統的圖片上傳互動很簡單:一個檔案域要求使用者選擇圖片檔案,一個提交按鈕(如下圖)。

這種方式有很多缺點,比如選擇圖片後看不到預覽,一次只能選擇一張圖,上傳過程看不到進度。當然也有它自身的優點:html本身的表單控制項,代碼簡單,上傳不易出錯,適合低速網路環境。現在富媒體橫行的時代,使用者需要長傳大量圖片,這種傳統表單的方式上傳圖片顯然已經跟不上時代的需求,基於flash、html5的新型上傳方式被廣泛的應用。

我們從上傳圖片前、上傳中、上傳後三個步驟來分析其中的互動過程。

上傳前

上傳圖片前一般可以:查看已上傳相片、選擇布局、來源等。

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

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

↑ QQ空間的心情發布框首先讓使用者選擇圖片來源

上傳中

上傳大量圖片時,是否可以讓使用者利用好等待的時間,比如在上傳過程中就可以添加圖片描述,移除不需要的圖片。上傳圖片過程中最基本的需求是上傳進度顯示,大批量上傳時不易導致使用者煩躁。

↑ 點點網上傳圖片過程中有上傳進度顯示,已上傳成功的圖片可以添加描述,可以選擇圖片布局,可以刪除圖片

↑ 網易相簿上傳圖片過程中可以查看上傳進度,可以添加圖片描述

↑ QQ相簿上傳圖片過程中只有進度顯示。

上傳完成後

添加描述,選擇布局,簡單修改(旋轉、裁剪等)

↑ 圖片上傳完成後,QQ相簿推薦你為圖片增加描述,寫圖片日誌

↑ 在微博上,圖片上傳完成後可以拖動滑鼠排序,放大、縮小圖片等簡單處理。

新技術帶來的變革

在本地程式中,可以將圖片直接複製粘貼到文檔中,亦可以將圖片拖放到程式裡實現開啟和修改,目前Google doc的網頁實現了以上兩種圖片上傳方式,使它更像一款本地應用。QQ空間中發布的日誌如果有引用外部的圖片,發布成功後會提示使用者是否自動將外鏈圖片轉存到相簿內。這一系列的互動,看似簡單卻需要後端複雜技術的支援。使用者的操作少了,上傳圖片更加方便了,也許就是這些細節,留住了更多的使用者,讓他們不願意遷移到其他平台。



相關文章

Cloud Intelligence Leading the Digital Future

Alibaba Cloud ACtivate Online Conference, Nov. 20th & 21st, 2019 (UTC+08)

Register Now >

11.11 Big Sale for Cloud

Get Unbeatable Offers with up to 90% Off,Oct.24-Nov.13 (UTC+8)

Get It Now >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。