一.上傳圖片的流程

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

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

1.查找圖片流程：

還有其它查找圖片的方式嗎？且看幾個(gè)案例：

QQ用戶在更換頭像的時(shí)候可能會(huì)考量好久，有反復(fù)對(duì)比之前的頭像和新頭像的需求，故將“歷史頭像”入口外置，方便查找

iOS短信新增“最近圖片”的快捷入口，將最近拍攝的一些圖片列出來(lái)，方便查找。關(guān)于如何查找，iOS又開(kāi)辟了一條新路徑，流程圖里需要補(bǔ)充了，如下圖藍(lán)色流程。

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

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

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

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

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

2. 選擇圖片流程：

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

通常單選圖片和多選圖片是不同的兩個(gè)流程。單選流程：選擇完一張圖片后會(huì)跳轉(zhuǎn)頁(yè)面，完成上傳或在當(dāng)前頁(yè)提示用戶只能選擇一張圖片。多選流程：用戶勾選1張或多張，確認(rèn)后跳轉(zhuǎn)頁(yè)面。lofter做了一個(gè)嘗試，將單選和多選融合到了一個(gè)流程，在選擇圖片時(shí)，若點(diǎn)選圖片，即為單選；若長(zhǎng)按圖片，切換到多選模式，可以選擇多張圖片 ，點(diǎn)擊右上角可退出多選模式，另外視覺(jué)層級(jí)上沒(méi)有滿屏的勾選框，清爽了不少。

3.編輯圖片流程：

單選圖片可支持裁切、處理、預(yù)覽功能，多選圖片一般只支持預(yù)覽功能，若對(duì)每張圖片都可編輯，過(guò)于復(fù)雜。本文暫對(duì)圖片的處理不做分析。

二．上傳圖片的應(yīng)用場(chǎng)景

功能需要應(yīng)用于場(chǎng)景，上傳圖片功能的應(yīng)用場(chǎng)景主要為：

• 信息補(bǔ)充、信息反饋場(chǎng)景（如個(gè)人頭像/上傳憑證/投訴證明/點(diǎn)評(píng)圖片）
• 社交場(chǎng)景（如上傳圖片至朋友圈/空間或分享游記）。

這兩類場(chǎng)景的上傳圖片有哪些不同點(diǎn)呢？

首先信息補(bǔ)充/反饋場(chǎng)景所需上傳的圖片數(shù)量相對(duì)較少，社交場(chǎng)景上傳的圖片數(shù)量相對(duì)較多。

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

第三，信息補(bǔ)充/反饋類的上傳頻率低于社交場(chǎng)景的上傳。兩種不同應(yīng)用場(chǎng)景，上傳圖片的流程分別有需要強(qiáng)調(diào)的部分。

舉例：天貓上傳頭像，屬于信息補(bǔ)充場(chǎng)景。該場(chǎng)景只允許上傳一張圖片，操作頻率不高。因而流程非常簡(jiǎn)短：調(diào)取本地圖片—選擇圖片（可切換相冊(cè)）—上傳，去掉了圖片確認(rèn)的流程，操作起來(lái)簡(jiǎn)單快捷。

三. 總結(jié)

1.信息補(bǔ)充、信息反饋場(chǎng)景的上傳圖片功能：流程可以盡量縮短，讓用戶更快查找圖片，選擇圖片，完成上傳。

2.社交場(chǎng)景：lofter多選圖片的方式可以參考，但長(zhǎng)按操作相對(duì)隱藏，需要加以引導(dǎo)，游記里的上傳圖片代入拍攝時(shí)間、地點(diǎn)等，滿足用戶分享的心理。

作者：梁曉明

來(lái)源：攜程設(shè)計(jì)委員會(huì)

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