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

照片選擇通常分為四個(gè)步驟“查找圖片、選擇圖片、編輯圖片、上傳圖片”，下圖是最常見(jiàn)的照片選擇的操作流程，接下來(lái)會(huì)依據(jù)用戶需求場(chǎng)景和操作場(chǎng)景對(duì)整個(gè)流程進(jìn)行分析。

查找/拍攝照片

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

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

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

可微信為什么采用這樣的方式呢？我是這么猜想的，一是可能因?yàn)檫@兩類需求概率相差不大，二是可能因?yàn)槲⑿疟旧硐肴ヅ囵B(yǎng)一種即拍即發(fā)的行為習(xí)慣。

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

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

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

分析：Lofter這種直接彈出相冊(cè)列表并且將拍照上傳的入口放到了相冊(cè)列表的右下角，我是這么理解的，因?yàn)樵诖蟛糠值膱?chǎng)景下用戶在Lofter上發(fā)博文都是從相冊(cè)中選取照片而并非直接拍攝，所以Lofter直接進(jìn)入相冊(cè)列表是為了方便用戶快速在相冊(cè)中選擇照片。

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

分析：當(dāng)我們?cè)谙蚝糜寻l(fā)送圖片時(shí)，圖片大部分情況下都是剛剛拍攝或者最近拍攝的，IOS抓住了用戶這樣的行為習(xí)慣，直接將最近的照片按照時(shí)間以縮略圖的形式展示出來(lái)，這樣極大方便了用戶的選擇，同時(shí)它又沒(méi)有徹底改變?cè)瓉?lái)的選擇方式，用戶如果想拍攝或者選擇很早之前的照片也可以通過(guò)actionsheet進(jìn)行選擇

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

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

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

1.選擇照片

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

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

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

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

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

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

猜想二：這也可能是LOFTER自己想設(shè)計(jì)一種用戶行為，讓用戶盡可能地選擇單圖。LOFTER的內(nèi)容是以大圖配文字的卡片進(jìn)行展示，圖片作為主要內(nèi)容，文字作為輔助。Lofter之所以想讓用戶選擇單圖是因?yàn)樗氚炎詈米罹膬?nèi)容展示給用戶，這樣也可以讓用戶盡可能瀏覽更多用戶的內(nèi)容。

2.拍攝照片

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

分析：這種方式對(duì)想添加多圖的用戶來(lái)說(shuō)是不夠友好的，因?yàn)橛脩粜枰鶑?fù)執(zhí)行重復(fù)的操作

案例二：如下圖是LOFTER拍照的流程，用戶在拍攝后直接進(jìn)入了照片編輯的頁(yè)面，通過(guò)點(diǎn)擊返回按鈕重新拍攝

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

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

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

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

3.更換目錄

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

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

分析：這種方式有兩個(gè)的體驗(yàn)上不好的地方：

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

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

總結(jié)

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

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

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

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