關(guān)于上傳圖片功能的案例與思考
梁, 曉明發(fā)表于2016-04-05
類別：
一.上傳圖片的流程
上傳圖片是比較常見和被用戶熟知的功能模塊裁替，從使用者角度，上傳圖片可分為查找圖片—選擇圖片—編輯圖片—上傳圖片幾個步驟。
對應(yīng)到界面設(shè)計上以清，目前提供給用戶查找圖片的方式有拍攝或上傳相冊已有圖片烛恤，選擇圖片的方式有選擇所拍的圖片或挑選相冊中的圖片阱佛，編輯圖片的方式有截取/處理/預(yù)覽圖片，具體如下圖所示耍缴，現(xiàn)有上傳圖片功能還有哪些可以優(yōu)化的地方砾肺？對照流程依次來看：
1.查找圖片流程：還有其它查找圖片的方式嗎齐佳？且看幾個案例:
QQ用戶在更換頭像的時候可能會考量好久，有反復(fù)對比之前的頭像和新頭像的需求债沮，故將“歷史頭像”入口外置炼吴，方便查找
Ios短信新增“最近圖片”的快捷入口，將最近拍攝的一些圖片列出來疫衩，方便查找硅蹦。關(guān)于如何查找，Ios又開辟了一條新路徑闷煤，流程圖里需要補(bǔ)充了童芹，如下圖藍(lán)色流程。
除了新增查找入口或方式鲤拿，還有其它思路嗎假褪？從圖片本身思考，圖片難找到的原因是什么近顷，太多太亂了嗎生音？那就整理一下。
百度旅游：增加了“智能整理”功能窒升，智能識別圖片拍攝地缀遍，將用戶本地的圖片按照拍攝地點(diǎn)進(jìn)行分類整理，這樣有利于根據(jù)地點(diǎn)查找圖片饱须，在上傳過程之前就有了參考域醇，而不是上傳后再進(jìn)行編輯選擇地點(diǎn)。
整理不止空間上的蓉媳，還有時間上的譬挚，在上傳相冊圖片這條路徑（流程圖中黃線部分），通常有兩種做法：一種是顯示本地所有相冊列表酪呻，選擇具體的某個相冊后减宣，再選擇里面的圖片。特別說明下ios系統(tǒng)的“時刻“相冊号杠，將圖片按照拍攝地和拍攝時間進(jìn)行了整理蚪腋，如下圖
另一種做法是直接顯示某一個相冊的圖片丰歌，用戶可以切換相冊姨蟋。（安卓app常采用該方式）
去哪兒攻略“上傳游記圖片功能“采用的是第二種做法。默認(rèn)顯示本地的圖片立帖，對本地圖片按照時間進(jìn)行了整理眼溶，用戶可以按時間（年月日）選擇所需的圖片，如下圖
2. 選擇圖片流程：還有優(yōu)化的余地嗎晓勇？
通常單選圖片和多選圖片是不同的兩個流程堂飞。單選流程：選擇完一張圖片后會跳轉(zhuǎn)頁面灌旧，完成上傳或在當(dāng)前頁提示用戶只能選擇一張圖片。多選流程：用戶勾選1張或多張绰筛，確認(rèn)后跳轉(zhuǎn)頁面枢泰。lofter做了一個嘗試，將單選和多選融合到了一個流程铝噩，在選擇圖片時衡蚂，若點(diǎn)選圖片，即為單選骏庸；若長按圖片毛甲，切換到多選模式，可以選擇多張圖片 具被，點(diǎn)擊右上角可退出多選模式玻募，另外視覺層級上沒有滿屏的勾選框，清爽了不少一姿。
3.編輯圖片流程：單選圖片可支持裁切七咧、處理、預(yù)覽功能叮叹，多選圖片一般只支持預(yù)覽功能坑雅，若對每張圖片都可編輯，過于復(fù)雜衬横。本文暫對圖片的處理不做分析裹粤。
二．上傳圖片的應(yīng)用場景
功能需要應(yīng)用于場景，上傳圖片功能的應(yīng)用場景主要為：信息補(bǔ)充蜂林、信息反饋場景（如個人頭像/上傳憑證/投訴證明/點(diǎn)評圖片）和社交場景（如上傳圖片至朋友圈/空間或分享游記）遥诉。這兩類場景的上傳圖片有哪些不同點(diǎn)呢？首先信息補(bǔ)充/反饋場景所需上傳的圖片數(shù)量相對較少噪叙，社交場景上傳的圖片數(shù)量相對較多矮锈。其次社交場景的上傳圖片用戶更多趨向處理圖片（各種濾鏡，大家懂得）睁蕾。第三苞笨，信息補(bǔ)充/反饋類的上傳頻率低于社交場景的上傳。兩種不同應(yīng)用場景子眶，上傳圖片的流程分別有需要強(qiáng)調(diào)的部分瀑凝。舉例：天貓上傳頭像，屬于信息補(bǔ)充場景臭杰。該場景只允許上傳一張圖片粤咪，操作頻率不高。因而流程非常簡短：調(diào)取本地圖片—選擇圖片（可切換相冊）—上傳渴杆，去掉了圖片確認(rèn)的流程寥枝，操作起來簡單快捷宪塔。
三. 總結(jié)
1.信息補(bǔ)充、信息反饋場景的上傳圖片功能：流程可以盡量縮短囊拜，讓用戶更快查找圖片某筐，選擇圖片，完成上傳冠跷。
2.社交場景：lofter多選圖片的方式可以參考来吩，但長按操作相對隱藏，需要加以引導(dǎo)蔽莱，游記里的上傳圖片代入拍攝時間弟疆、地點(diǎn)等，滿足用戶分享的心理盗冷。
本文作者：梁, 曉明 轉(zhuǎn)載請注明來自：攜程設(shè)計委員會
