關于上傳圖片功能的案例與思考
一.上傳圖片的流程
上傳圖片是比較常見和被用戶熟知的功能模塊,從使用者角度,上傳圖片可分為查找圖片—選擇圖片—編輯圖片—上傳圖片幾個步驟。
對應到界面設計上,目前提供給用戶查找圖片的方式有拍攝或上傳相冊已有圖片,選擇圖片的方式有選擇所拍的圖片或挑選相冊中的圖片,編輯圖片的方式有截取/處理/預覽圖片,具體如下圖所示,現(xiàn)有上傳圖片功能還有哪些可以優(yōu)化的地方?對照流程依次來看:
1.查找圖片流程:
還有其它查找圖片的方式嗎?且看幾個案例:
QQ用戶在更換頭像的時候可能會考量好久,有反復對比之前的頭像和新頭像的需求,故將“歷史頭像”入口外置,方便查找
iOS短信新增“最近圖片”的快捷入口,將最近拍攝的一些圖片列出來,方便查找。關于如何查找,iOS又開辟了一條新路徑,流程圖里需要補充了,如下圖藍色流程。
除了新增查找入口或方式,還有其它思路嗎?從圖片本身思考,圖片難找到的原因是什么,太多太亂了嗎?那就整理一下。
百度旅游:增加了“智能整理”功能,智能識別圖片拍攝地,將用戶本地的圖片按照拍攝地點進行分類整理,這樣有利于根據(jù)地點查找圖片,在上傳過程之前就有了參考,而不是上傳后再進行編輯選擇地點。
整理不止空間上的,還有時間上的,在上傳相冊圖片這條路徑(流程圖中黃線部分),通常有兩種做法:一種是顯示本地所有相冊列表,選擇具體的某個相冊后,再選擇里面的圖片。特別說明下iOS系統(tǒng)的“時刻“相冊,將圖片按照拍攝地和拍攝時間進行了整理,如下圖
另一種做法是直接顯示某一個相冊的圖片,用戶可以切換相冊(安卓app常采用該方式)。
去哪兒攻略“上傳游記圖片功能“采用的是第二種做法。默認顯示本地的圖片,對本地圖片按照時間進行了整理,用戶可以按時間(年月日)選擇所需的圖片,如下圖
2. 選擇圖片流程:
還有優(yōu)化的余地嗎?
通常單選圖片和多選圖片是不同的兩個流程。單選流程:選擇完一張圖片后會跳轉頁面,完成上傳或在當前頁提示用戶只能選擇一張圖片。多選流程:用戶勾選1張或多張,確認后跳轉頁面。lofter做了一個嘗試,將單選和多選融合到了一個流程,在選擇圖片時,若點選圖片,即為單選;若長按圖片,切換到多選模式,可以選擇多張圖片 ,點擊右上角可退出多選模式,另外視覺層級上沒有滿屏的勾選框,清爽了不少。
3.編輯圖片流程:
單選圖片可支持裁切、處理、預覽功能,多選圖片一般只支持預覽功能,若對每張圖片都可編輯,過于復雜。本文暫對圖片的處理不做分析。
二.上傳圖片的應用場景
功能需要應用于場景,上傳圖片功能的應用場景主要為:
- 信息補充、信息反饋場景(如個人頭像/上傳憑證/投訴證明/點評圖片)
- 社交場景(如上傳圖片至朋友圈/空間或分享游記)。
這兩類場景的上傳圖片有哪些不同點呢?
首先信息補充/反饋場景所需上傳的圖片數(shù)量相對較少,社交場景上傳的圖片數(shù)量相對較多。
其次社交場景的上傳圖片用戶更多趨向處理圖片(各種濾鏡,大家懂得)。
第三,信息補充/反饋類的上傳頻率低于社交場景的上傳。兩種不同應用場景,上傳圖片的流程分別有需要強調的部分。
舉例:天貓上傳頭像,屬于信息補充場景。該場景只允許上傳一張圖片,操作頻率不高。因而流程非常簡短:調取本地圖片—選擇圖片(可切換相冊)—上傳,去掉了圖片確認的流程,操作起來簡單快捷。
三. 總結
1.信息補充、信息反饋場景的上傳圖片功能:流程可以盡量縮短,讓用戶更快查找圖片,選擇圖片,完成上傳。
2.社交場景:lofter多選圖片的方式可以參考,但長按操作相對隱藏,需要加以引導,游記里的上傳圖片代入拍攝時間、地點等,滿足用戶分享的心理。
作者:梁曉明
來源:攜程設計委員會
原文地址:http://ued.ctrip.com/blog/4590.html
我想知道你多大了