關于上傳圖片功能的案例與思考

1 評論 23579 瀏覽 87 收藏 8 分鐘

一.上傳圖片的流程

上傳圖片是比較常見和被用戶熟知的功能模塊,從使用者角度,上傳圖片可分為查找圖片—選擇圖片—編輯圖片—上傳圖片幾個步驟。

99

對應到界面設計上,目前提供給用戶查找圖片的方式有拍攝或上傳相冊已有圖片,選擇圖片的方式有選擇所拍的圖片或挑選相冊中的圖片,編輯圖片的方式有截取/處理/預覽圖片,具體如下圖所示,現(xiàn)有上傳圖片功能還有哪些可以優(yōu)化的地方?對照流程依次來看:

100

1.查找圖片流程:

還有其它查找圖片的方式嗎?且看幾個案例:

QQ用戶在更換頭像的時候可能會考量好久,有反復對比之前的頭像和新頭像的需求,故將“歷史頭像”入口外置,方便查找

QQ20161102114849

iOS短信新增“最近圖片”的快捷入口,將最近拍攝的一些圖片列出來,方便查找。關于如何查找,iOS又開辟了一條新路徑,流程圖里需要補充了,如下圖藍色流程。

QQ20161102114906

5

除了新增查找入口或方式,還有其它思路嗎?從圖片本身思考,圖片難找到的原因是什么,太多太亂了嗎?那就整理一下。

百度旅游:增加了“智能整理”功能,智能識別圖片拍攝地,將用戶本地的圖片按照拍攝地點進行分類整理,這樣有利于根據(jù)地點查找圖片,在上傳過程之前就有了參考,而不是上傳后再進行編輯選擇地點。

QQ20161102114917

整理不止空間上的,還有時間上的,在上傳相冊圖片這條路徑(流程圖中黃線部分),通常有兩種做法:一種是顯示本地所有相冊列表,選擇具體的某個相冊后,再選擇里面的圖片。特別說明下iOS系統(tǒng)的“時刻“相冊,將圖片按照拍攝地和拍攝時間進行了整理,如下圖

QQ20161102114930

另一種做法是直接顯示某一個相冊的圖片,用戶可以切換相冊(安卓app常采用該方式)。

1476237383362812

去哪兒攻略“上傳游記圖片功能“采用的是第二種做法。默認顯示本地的圖片,對本地圖片按照時間進行了整理,用戶可以按時間(年月日)選擇所需的圖片,如下圖

QQ20161102114951

2. 選擇圖片流程:

還有優(yōu)化的余地嗎?

通常單選圖片和多選圖片是不同的兩個流程。單選流程:選擇完一張圖片后會跳轉頁面,完成上傳或在當前頁提示用戶只能選擇一張圖片。多選流程:用戶勾選1張或多張,確認后跳轉頁面。lofter做了一個嘗試,將單選和多選融合到了一個流程,在選擇圖片時,若點選圖片,即為單選;若長按圖片,切換到多選模式,可以選擇多張圖片 ,點擊右上角可退出多選模式,另外視覺層級上沒有滿屏的勾選框,清爽了不少。

QQ20161102115005

3.編輯圖片流程:

單選圖片可支持裁切、處理、預覽功能,多選圖片一般只支持預覽功能,若對每張圖片都可編輯,過于復雜。本文暫對圖片的處理不做分析。

二.上傳圖片的應用場景

功能需要應用于場景,上傳圖片功能的應用場景主要為:

  • 信息補充、信息反饋場景(如個人頭像/上傳憑證/投訴證明/點評圖片)
  • 社交場景(如上傳圖片至朋友圈/空間或分享游記)。

這兩類場景的上傳圖片有哪些不同點呢?

首先信息補充/反饋場景所需上傳的圖片數(shù)量相對較少,社交場景上傳的圖片數(shù)量相對較多。

其次社交場景的上傳圖片用戶更多趨向處理圖片(各種濾鏡,大家懂得)。

第三,信息補充/反饋類的上傳頻率低于社交場景的上傳。兩種不同應用場景,上傳圖片的流程分別有需要強調的部分。

舉例:天貓上傳頭像,屬于信息補充場景。該場景只允許上傳一張圖片,操作頻率不高。因而流程非常簡短:調取本地圖片—選擇圖片(可切換相冊)—上傳,去掉了圖片確認的流程,操作起來簡單快捷。

QQ20161102115020

1476237487979338

三. 總結

1.信息補充、信息反饋場景的上傳圖片功能:流程可以盡量縮短,讓用戶更快查找圖片,選擇圖片,完成上傳。

2.社交場景:lofter多選圖片的方式可以參考,但長按操作相對隱藏,需要加以引導,游記里的上傳圖片代入拍攝時間、地點等,滿足用戶分享的心理。

 

作者:梁曉明

來源:攜程設計委員會

原文地址:http://ued.ctrip.com/blog/4590.html

更多精彩內容,請關注人人都是產品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 我想知道你多大了

    來自上海 回復