最近在重新設(shè)計公司APP上傳照片的組件，研究了很多移動端上傳照片的組件，下面來簡單單談?wù)勛约旱目偨Y(jié)。

照片選擇通常分為四個步驟“查找圖片、選擇圖片、編輯圖片、上傳圖片”，下圖是最常見的照片選擇的操作流程，接下來會依據(jù)用戶需求場景和操作場景對整個流程進行分析。

查找/拍攝照片

通常情況下在用戶點擊了拍攝按鈕時這里存在著兩種需求場景，一種是從相冊中選擇，一種是從現(xiàn)在拍攝，但是在這里不同的APP出現(xiàn)了很多種不同的設(shè)計方案。

案例一：如下圖是微信選擇上傳照片的方式，當(dāng)點擊相機按鈕后彈出Actionsheet選擇選取照片的方式

分析：這種方式是目前最常見的設(shè)計方案，所有的用戶在這里都得到了公平的對待，他們根據(jù)不同的需求和目的進行分流，行為邏輯和界面設(shè)計都非常的合理。但是這樣的方式存在著一個明顯的缺點，在這里所有的用戶都必須執(zhí)行一次選擇操作，假如說大部分的需求場景都是采取從相冊中進行選擇，那么這樣的方式就不夠友好了，因為它會讓這一大部分人多操作一步。

可微信為什么采用這樣的方式呢？我是這么猜想的，一是可能因為這兩類需求概率相差不大，二是可能因為微信本身想去培養(yǎng)一種即拍即發(fā)的行為習(xí)慣。

案例二：如下圖是QQ選擇上傳照片的方式，當(dāng)點擊頭像后彈出Actionsheet選擇上傳頭像的方式

分析：QQ的方式和微信一樣，只不過多出了“拍攝動態(tài)形象、查看大圖”這兩個操作選擇。這里的選擇不僅限于“拍照”和“從相冊中選擇”，它會根據(jù)用戶的實際需求場景進行改變，QQ將所有可能的需求場景都放在了Actionsheet里，個人認為不是一個很好的做法，對于想查看大圖的場景來說，點擊頭像后用戶的心理預(yù)期應(yīng)該是頭像立即被放大，但是這里是需要再進行一次操作的。

案例三：如下圖是Lofter選擇上傳照片的方式，當(dāng)點擊拍照按鈕后直接彈出了相冊列表頁

分析：Lofter這種直接彈出相冊列表并且將拍照上傳的入口放到了相冊列表的右下角，我是這么理解的，因為在大部分的場景下用戶在Lofter上發(fā)博文都是從相冊中選取照片而并非直接拍攝，所以Lofter直接進入相冊列表是為了方便用戶快速在相冊中選擇照片。

案例四：如下圖是IOS9.0發(fā)短信時添加照片的方式，它將最近的照片通過如圖的方式列舉了出來，這樣方便用戶直接進行照片的選擇。

分析：當(dāng)我們在向好友發(fā)送圖片時，圖片大部分情況下都是剛剛拍攝或者最近拍攝的，IOS抓住了用戶這樣的行為習(xí)慣，直接將最近的照片按照時間以縮略圖的形式展示出來，這樣極大方便了用戶的選擇，同時它又沒有徹底改變原來的選擇方式，用戶如果想拍攝或者選擇很早之前的照片也可以通過actionsheet進行選擇

案例五：如下圖是IOS10發(fā)短信是選擇照片的方式，點擊拍攝按鈕后直接在手機的下半屏出現(xiàn)一個微型拍攝界面以及最近照片的縮略圖，將界面向右拖動是才出現(xiàn)“拍攝照片”和“相片圖庫”的入口，IOS這樣既方便用戶了用戶進行快速選擇也能使用戶能夠快速拍攝。

分析：這種方式是將之前的方式進行了徹底的改變，它將拍攝和選擇完全融到了一起，IOS10這樣做既方便了用戶進行快速選擇也能使用戶能夠快速拍攝，但是這個微型拍攝界面的拍攝體驗實在是有點不好。

選擇照片/拍攝照片/更換目錄

1.選擇照片

方式一：選擇照片分為單選和多選，現(xiàn)在大部分的做法都是將這兩種方式進行結(jié)合，如下圖是微信發(fā)朋友圈時選照片的方式，縮略圖的右上角有一個復(fù)選框，通過勾選復(fù)選框進行選擇，勾選多個就是多選，點擊圖片區(qū)域進行預(yù)覽圖片

優(yōu)點：通過復(fù)選框?qū)芜x和多選結(jié)合在了一起，這樣的方式對兩種需求場景的用戶都能很好地兼容。

缺點：選擇區(qū)域有點小，容易引起誤操作（點到圖片內(nèi)容區(qū)了），再則就是會遮擋圖片內(nèi)容影響界面美觀。

方式二：如下圖是Lofter選擇照片的方式，Lofter在這里做了一個新的嘗試，它的相冊列表優(yōu)先是滿足單選，用戶點擊圖片后就直接進入圖片的編輯頁面。通過長按照片進入多選模式，多選時在縮略圖中央出現(xiàn)所選照片的計數(shù)。

分析：顯然這種方式對于多選是不友好的，多選用戶不僅要多操作一步而且這一步的學(xué)習(xí)成本也較高。但是LOFTER之所以這樣做是有他自己的原因的：

猜想一，在LOFTER中大多數(shù)用戶本身就是以發(fā)單圖為主，這樣的設(shè)計優(yōu)先滿足了發(fā)單圖的這樣的場景，讓用戶可以快速地選擇單圖

猜想二：這也可能是LOFTER自己想設(shè)計一種用戶行為，讓用戶盡可能地選擇單圖。LOFTER的內(nèi)容是以大圖配文字的卡片進行展示，圖片作為主要內(nèi)容，文字作為輔助。Lofter之所以想讓用戶選擇單圖是因為它想把最好最精的內(nèi)容展示給用戶，這樣也可以讓用戶盡可能瀏覽更多用戶的內(nèi)容。

2.拍攝照片

案例一：如下圖所示，拍攝照片最常見的方式就是調(diào)用原生系統(tǒng)的相機進行拍攝，拍攝一張后進行照片的預(yù)覽，用戶可以選擇重拍或者使用照片，當(dāng)用戶想添加多張時往復(fù)執(zhí)行這樣的操作即可。

分析：這種方式對想添加多圖的用戶來說是不夠友好的，因為用戶需要往復(fù)執(zhí)行重復(fù)的操作

案例二：如下圖是LOFTER拍照的流程，用戶在拍攝后直接進入了照片編輯的頁面，通過點擊返回按鈕重新拍攝

分析：LOFTER在拍攝后直接進入了照片的編輯頁面，這是用戶的需求同樣也是LOFTER想讓用戶做的一件事。

案例三：如下圖是印象筆記拍攝照片的流程，個人非常喜歡這樣的一個設(shè)計，它有幾個非常亮眼的地方：

1. 只需對準(zhǔn)內(nèi)容不移動便可以進行拍攝，這樣用戶可以專心地去對準(zhǔn)內(nèi)容，不用擔(dān)心拍攝時因為手抖而出現(xiàn)照片內(nèi)容額偏差
2. 印象筆記可以自動識別背景（綠色部分），在拍攝時去除背景只留內(nèi)容部分，這對于拍攝文件是一個很方便很實用的功能
3. 可以進行連續(xù)拍攝，拍攝的照片被臨時存到了一個空間中，在拍攝完后用戶可以對照片進行選擇和編輯

分析：印象筆記的連續(xù)拍攝很好地滿足了用戶的需求，用戶在記錄圖片筆記時很多時候都是需要拍攝多張圖片的，如果用案例一的解決方案，用戶會一直不停的進行循環(huán)操作。

3.更換目錄

目錄是為了給照片進行分類，目前最常見的做法是在調(diào)用系統(tǒng)相冊時默認進入相機膠卷這個相冊，如果用戶不是想在這個相冊中選擇時便可切換相冊目錄，常見的切換方式有一下兩種：

方式一：如下圖是微信切換目錄的方式，點擊左上角的“返回”按鈕進入相冊文件夾的列表，選擇文件夾后再進入相冊頁面

分析：這種方式有兩個的體驗上不好的地方：

1. 左上角的文案會帶給用戶疑惑，并不知道這個返回是什么意思
2. 切換相冊文件夾時需要跳轉(zhuǎn)頁面，這點的感受不是很好

方式二：如下圖是LOFTER切換目錄的方式，他將這一操作放在了相冊列表中，用戶通過這樣的方式快速切換相冊目錄，個人比較喜歡這樣的方式。

總結(jié)

任何一種交互方式都是緊跟用戶需求場景和操作習(xí)慣的，看似一個簡單的上傳照片的功能卻有很多種不同的設(shè)計方案，而且任何一種方案都有著自己的優(yōu)點和缺點。作為設(shè)計師需要明白的是不同的解決方案所適用的場景，在面對不同的需求場景時應(yīng)該設(shè)計怎么的方式才更加適合。

在設(shè)計用戶行為流以及界面布局時我們必須要想清楚以下幾點：

• 用戶的需求場景是什么？
• 不同需求場景的各自的占比是多少？
• 我們應(yīng)該首先滿足哪一類用戶的需求場景？
• 我們的用戶希望進行怎樣的操作？
• 我們希望用戶進行怎樣的操作（產(chǎn)品想培養(yǎng)用戶一種什么樣的習(xí)慣）？

本文由 @不知名設(shè)計師 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。