一.上傳圖片的流程

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

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

1.查找圖片流程：

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

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

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

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

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

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

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

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

2. 選擇圖片流程：

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

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

3.編輯圖片流程：

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

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

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

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

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

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

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

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

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

三. 總結(jié)

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

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

作者：梁曉明

來源：攜程設(shè)計委員會

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