Swaag 照片上傳交互流程優(yōu)化

Swaag 是一款老牌的照片分享應(yīng)用锤岸，它主打?yàn)檎掌訕?biāo)簽和對比 PK 的功能集漾，為照片增加了品牌、文字屬性砸脊。國內(nèi)也很快出現(xiàn)了類似產(chǎn)品（如 Nice具篇、Pinco），可謂在 Instagram 風(fēng)靡后又引起一小波熱潮凌埂。Instagram 的風(fēng)靡與它優(yōu)秀的用戶體驗(yàn)不無關(guān)系栽连，它流暢的照片編輯和預(yù)上傳使得整個(gè)照片上傳的過程輕松流暢。Swaag 作為標(biāo)簽類照片分享應(yīng)用的鼻祖侨舆，其用戶量不少秒紧、產(chǎn)品形態(tài)更完善。但 Swaag 在照片上傳編輯的過程卻非常繁瑣挨下，在用戶體驗(yàn)方面有不少地方值得優(yōu)化熔恢。

照片分享應(yīng)用 Swaag，由左到右依次為 Feed臭笆、Discover叙淌、Battle 頁面

iTunes App Store 中的「Swaag」

功能模型

由于 Swaag 主打?yàn)檎掌訕?biāo)簽的功能，在照片編輯時(shí)只保留了濾鏡愁铺、添加標(biāo)簽兩個(gè)功能鹰霍。這是很明智的決定。試想如果像 Instagram 一樣加入亮度茵乱、對比度茂洒、色溫等更高級的處理功能，標(biāo)簽將顯得不再重要瓶竭，同時(shí)也提高了照片分享的門檻督勺，使得照片分享變得復(fù)雜。

目前的 Swaag 有兩種照片分享的途徑：

1. 打開相機(jī)界面 > 拍照/選擇濾鏡 > 添加標(biāo)簽 > 發(fā)布
2. 打開相機(jī)界面 > 打開相冊/選擇照片 > 裁切 > 選擇濾鏡 > 添加標(biāo)簽 > 發(fā)布

改進(jìn)前 Swaag 的照片上傳編輯流程

在我們對照片進(jìn)行處理的時(shí)候斤贰，往往需要經(jīng)過多個(gè)功能步驟智哀。正如電路中的串并聯(lián)結(jié)構(gòu)，功能模型大致可分為一種迭代結(jié)構(gòu)和一種并列結(jié)構(gòu)荧恍。

迭代是重復(fù)反饋的過程瓷叫，每一次迭代都更接近目標(biāo)結(jié)果，每一次迭代的結(jié)果會被用作下一次迭代的初始狀態(tài)送巡。目前的 Swaag 采用的正是迭代結(jié)構(gòu)摹菠，從裁切到選擇濾鏡到添加標(biāo)簽，每個(gè)步驟只負(fù)責(zé)一個(gè)功能授艰，且必須嚴(yán)格遵守順序辨嗽。而 Instagram 則是并列結(jié)構(gòu)的典型例子世落，在拍照/選擇照片后淮腾，可以在同一界面中同時(shí)對照片的濾鏡糟需、對比度、亮度等參數(shù)進(jìn)行調(diào)整谷朝，等調(diào)節(jié)到滿意結(jié)果再進(jìn)行發(fā)布洲押。

迭代結(jié)構(gòu)和并列結(jié)構(gòu)的功能模型

Swaag 的照片調(diào)整功能并不豐富，而且濾鏡是對照片本身進(jìn)行修改圆凰，添加標(biāo)簽則是在照片上增加另一個(gè)維度的信息杈帐，兩者屬于不同的維度。而在用戶界面中专钉，添加標(biāo)簽需要對照片區(qū)域進(jìn)行交互挑童，而選擇濾鏡卻不需要對照片區(qū)域進(jìn)行控制。

因此跃须，我認(rèn)為 Swaag 更適合選擇并列結(jié)構(gòu)的功能模型站叼，這不僅減少了照片分享的操作流程，也讓用戶體驗(yàn)更流暢菇民。

改進(jìn)后的 Swaag 照片上傳界面尽楔，左為拍照界面，右為添加標(biāo)簽/濾鏡界面

全新的添加標(biāo)簽的交互方式

為照片加標(biāo)簽是 Swaag 的主打功能之一第练，但添加標(biāo)簽的體驗(yàn)相當(dāng)糟糕阔馋。點(diǎn)擊照片任意空白處，首先會出現(xiàn)品牌類別供用戶選擇娇掏，選擇其一后可以進(jìn)入該類目的目錄進(jìn)行尋找呕寝，如果找不到，可以手動輸入文字婴梧，或選擇最近添加過的標(biāo)簽壁涎。這里面主要存在兩點(diǎn)問題：

• 品牌類別僅聊勝于無：選擇品牌類別后進(jìn)入目錄列表按名稱進(jìn)行排序，排在前面的品牌自然先是數(shù)字開頭的品牌志秃，再按英文字母排列怔球，從目錄中檢索品牌的耗時(shí)太長，不如手動輸入浮还。其次竟坛，品牌類別除了在添加標(biāo)簽時(shí)助于精確歸類之外，沒有任何作用钧舌，它徒增了一個(gè)交互步驟担汤。

改進(jìn)前 Swaag 的添加標(biāo)簽的流程

• 通過點(diǎn)擊的方式確定標(biāo)簽位置，本身便不夠精確洼冻，也無法預(yù)覽最終標(biāo)簽加上去后的效果崭歧。如果在添加標(biāo)簽后發(fā)現(xiàn)標(biāo)簽的位置或文字需要修改，則需要把原有的標(biāo)簽刪除撞牢，再重新添加新標(biāo)簽率碾。雖然添加成功后修改的頻率很低叔营，以點(diǎn)擊的交互方式添加標(biāo)簽也并不妙。

如果需要修改標(biāo)簽的位置或文字所宰，則需要把原有標(biāo)簽刪除绒尊，再重新添加新標(biāo)簽

在重設(shè)計(jì)中，我改變這一交互方式——將點(diǎn)擊添加標(biāo)簽的形式改為拖拽：
1.當(dāng)拍照/在相冊中選擇照片后仔粥，預(yù)設(shè)的標(biāo)簽放在原先快門按鈕的位置
2.通過拖拽婴谱，用戶將標(biāo)簽放在他們喜歡的位置
3.手指離開屏幕，鍵盤和搜索頁面出現(xiàn)躯泰，為標(biāo)簽添加品牌文字

添加標(biāo)簽交互重設(shè)計(jì)谭羔，左：拖拽標(biāo)簽，右：輸入品牌文字

如此一來麦向，添加標(biāo)簽的操作不僅簡單口糕，用戶也可以直接預(yù)覽標(biāo)簽的效果。如果需要改變已有標(biāo)簽的位置或刪除磕蛇，只要拖拽標(biāo)簽或把標(biāo)簽拖到刪除區(qū)就好景描；如果需要修改標(biāo)簽內(nèi)容，點(diǎn)擊（tap）標(biāo)簽秀撇，鍵盤又將重新彈出超棺。

為方便理解，我制作了一個(gè)小動畫進(jìn)行演示（圖片體積稍大）：

demo

如果用戶希望分享相冊中的照片呵燕，照片列表則在拍照按鈕的下方棠绘，用戶可以直接看到最新的幾張照片，往上滑也能繼續(xù)瀏覽照片列表再扭。同時(shí)氧苍，正方形的照片區(qū)域也融入了裁切功能，在進(jìn)入下一步前便可以把照片裁切成所需要的方形泛范，而不需要進(jìn)入單獨(dú)的界面進(jìn)行裁切让虐。

改進(jìn)后的添加標(biāo)簽的流程

本文系 Weekly Design Challenge 系列，第五周

Click here to see the English version