在信息傳播中横朋，聲音、文字百拓、圖片叶撒、視頻是最為常見的4種載體形式，每種載體的制作成本也都各有不同耐版，同時也都有各自適用的最佳場景祠够。
俗話有“一圖勝千文”的說法，圖片在信息傳播中的價值兼具內(nèi)容價值和形式價值粪牲，也是應(yīng)用場景最廣泛的載體形式古瓤。我們熟知的購物類app中、微信的朋友圈腺阳、主打圖片分享的Instagram及flickr等落君，圖片都占據(jù)了大量的位置空間。在用戶上傳圖片的環(huán)節(jié)中亭引，怎樣讓用戶獲得更佳良好的體驗是app設(shè)計中不可繞過的問題绎速，我們嘗試從圖片上傳流程的角度上去做更進(jìn)一步的分析。我們把整個流程拆分為4個環(huán)節(jié)來看：查找圖片——選擇圖片——預(yù)發(fā)布——發(fā)布焙蚓。
1纹冤、查找圖片階段。用戶需要的是快速且正確的查找到自己想要的圖片购公。
在這個環(huán)節(jié)上有兩種比較主流的方式萌京，一種是全屏縮略圖的瀏覽方式，比如說微信宏浩、微博知残，Twitter和Facebook，另一種半屏縮略圖的瀏覽方式比庄，同時在屏幕上方有大圖和下方的縮略圖做聯(lián)動展示求妹，比如ins乏盐。
在第一種方式中，用戶可以在同一個頁面內(nèi)去看更多的圖片制恍，方便用戶快速選擇自己想要找到的圖片丑勤，這種瀏覽方式適用于用戶需要同時查找多張圖片，并且這幾張圖片的特征都比較明顯吧趣，可以一眼通過縮略圖識別法竞；在第二種展示方式中，用戶可以通過頁面上半部分的大圖去觀察所選圖片的更多細(xì)節(jié)强挫，幫助自己判斷是不是要找的圖岔霸，這種方式可以幫助用戶在面對多張相似圖片的時候快速查找想要的圖片，但下半部分展示的縮略圖數(shù)量就有限俯渤，對于查找時間跨度大的圖片不是很友好呆细。以iPhone X為例，在全屏縮略圖方式中八匠，每行3張圖的話可以展示18張圖絮爷，每行4張圖的話可以展示28張圖；在半屏縮略圖的方式中梨树，每行4張圖的話僅可以展示12張圖坑夯。
在縮略圖的排列順序上也出現(xiàn)了截然不同的兩種方式，第一種是以微信為代表的正序排列方式（通iOS系統(tǒng)相冊的排列方式）抡四，用戶需要向下滑動瀏覽更多圖片柜蜈；第二種是倒敘的排列方式，用戶需要向上滑動瀏覽更多圖片（微博指巡、Twitter淑履、Facebook、ins都是采用的這種方式）藻雪；同時這兩種不同排序邏輯在頁面功能按鈕的布局上也有比較大的差異秘噪，第一種邏輯中，觸發(fā)下一步的button位于右下角勉耀；在第二種邏輯中指煎，觸發(fā)下一步動作的button位于右上角（請看上圖左1）。
在切換相簿選擇圖片的場景中瑰排，微信又是一個特例贯要。微信的觸發(fā)是點擊左上角的“返回”暖侨，跳到一個全新的頁面椭住；而其他幾個app都是點擊頂部中間位置的“相機(jī)膠卷”，通過上拉或下拉彈窗的方式展示字逗。在這里我要吐槽一下twitter的展示方式京郑，點擊頂部后會先由底部彈出一個半屏的宅广，如果向上滑動會變成全屏，小編認(rèn)為把半屏彈窗的狀態(tài)去掉些举，直接展示全屏彈窗在大多數(shù)場景下會更友好一些跟狱。
2、選擇圖片階段户魏。用戶需要清晰的知道哪些是自己已選的驶臊、自己總共選了多少張、自己還可以選擇多少張叼丑、控制最終的展示順序关翎，以上這些都是用戶最為共性的需求。
在這個環(huán)節(jié)上也同樣有2種主流的處理方式鸠信，第一種是明確的在已選圖片上做標(biāo)記符號纵寝，并且用數(shù)字標(biāo)記處用戶的選擇順序（下圖左1、左2星立、左3）爽茴；第二種是只在已選圖片上標(biāo)記選中符號，不標(biāo)記用戶的選擇順序（下圖左4）绰垂。在下面的兩種方式中室奏，第一種對于那些對圖片展示順序有要求的人來講是比較有好的方式，這種方式能夠讓用戶的控制力更強(qiáng)劲装。
3窍奋、預(yù)發(fā)布階段。進(jìn)入預(yù)發(fā)布界面酱畅，用戶需要最后確認(rèn)圖片是否已經(jīng)選擇正確琳袄、圖片的排序是否正確、圖片的效果是否需要美化等纺酸。
在這個階段窖逗，大多數(shù)app都提供了相對一致的功能點，比如大圖預(yù)覽模式餐蔬，微信碎紊、微博和Twitter都有提供；比如給圖片加濾鏡樊诺、貼紙等美化圖片的功能仗考，微博、Twitter都有提供词爬；比如增加和刪除已選擇的圖片秃嗜；在與發(fā)布的界面上，幾個主流app難得一致的一個點是觸發(fā)“發(fā)布”的button都統(tǒng)一在了屏幕的右上交。
4锅锨、發(fā)布階段叽赊。幫助用戶發(fā)布成功是這個階段最主要的訴求，在網(wǎng)絡(luò)出狀況的情況下該怎么處理是我們必須要考慮的一個因素必搞。
我們先來看微信的處理方式：當(dāng)你點擊發(fā)布之后必指，微信會直接跳到朋友圈的頁面并把發(fā)布結(jié)果展示出來，讓用戶直觀看到最終的成果恕洲，就算是在弱網(wǎng)的情況下塔橡，微信也是采用這種邏輯處理方式，制造一種“發(fā)布成功的假象”霜第，用戶自己看到發(fā)布成功谱邪，在別人的朋友圈暫時還看不到。
微博在點擊發(fā)布之后庶诡，會出一個“已發(fā)送”的toast提示惦银，然后直接跳轉(zhuǎn)到微博瀏覽頁面。但是在網(wǎng)絡(luò)不好的情況下末誓，微博的處理方式就有些讓人崩潰：點擊”發(fā)布“之后扯俱，toast提示”已發(fā)送（下圖左2、左3）喇澡，然后跳轉(zhuǎn)到主頁迅栅，彈出”發(fā)送失敗”的toast提示，最重要的是剛剛編輯的內(nèi)容并沒有保存晴玖，需要重新來過读存。Twitter和Facebook的邏輯方式基本一致，點擊“發(fā)布”之后都會跳轉(zhuǎn)到主頁呕屎，并且在主頁有一個發(fā)送進(jìn)度條告知用戶發(fā)送狀態(tài)让簿。
在上傳圖片的這個功能點中，快速查找圖片秀睛、編輯圖片并且成功發(fā)布是用戶的主要核心訴求尔当，如果能做到進(jìn)一步細(xì)分用戶的場景，我們也就能找到進(jìn)一步優(yōu)化用戶體驗的方式蹂安。比如ins的內(nèi)置濾鏡椭迎，幫助用戶美化圖片，提升用戶發(fā)布圖片的成績感田盈，刺激用戶分享（下圖左1）畜号；twitter的預(yù)發(fā)布界面，會自動展示相機(jī)膠卷里最近新添加的幾張圖片允瞧，滿足用戶用相機(jī)膠卷新添加圖片快速發(fā)推的需求（下圖左2）简软；微信發(fā)圈在網(wǎng)絡(luò)不好的狀況下制造一種發(fā)圈成功的“假象”（下圖左3）蛮拔，這些都是細(xì)分用戶場景帶來的進(jìn)一步用戶體驗提升的小例子。
針對這個課題替饿，小編還有三個問題希望大家來討論一下语泽，大家可以在留言中互動：
1贸典、為什么微信里面切換相薄的時候要點左上角的“返回”视卢，而不像其他app（微博）那樣直接把切換button放在Nav bar的中間？
2廊驼、微信發(fā)朋友圈的時候為什么不提供美化圖片或濾鏡的功能据过？
3、在圖片上傳過程中前端和后臺的交互怎樣處理會更好妒挎？
