使用照片
1.有相冊(cè)權(quán)限
微信、QQ：保存圖片
APP：不保存圖片
2.沒(méi)有相冊(cè)權(quán)限
微信：保存圖片
QQ邻薯、APP：不保存圖片
3.總結(jié)
使用照片
- 優(yōu)化：當(dāng)沒(méi)有相冊(cè)權(quán)限時(shí)，是否保存圖片影響不大乘凸，但出于尊重用戶權(quán)限的角度厕诡，還是以QQ為準(zhǔn)，不保存圖片营勤。
選擇圖片時(shí)灵嫌，預(yù)覽圖片
操作頁(yè)面
操作
- 在相冊(cè)頁(yè)面壹罚，點(diǎn)擊某個(gè)圖片，預(yù)覽圖片
- 在相冊(cè)頁(yè)面寿羞，選擇多張圖片后猖凛，再點(diǎn)預(yù)覽按鈕，預(yù)覽圖片
預(yù)覽頁(yè)面比較
1.放大縮小
- 微信稠曼、QQ形病、APP：有
2.保存圖片
- 微信、QQ霞幅、APP：無(wú)
3.刪除圖片
- 微信漠吻、QQ、APP：選中司恳、取消選中
4.導(dǎo)航欄
- 微信途乃、APP：有，無(wú)標(biāo)題
- QQ：有扔傅，5/8（選中一張圖片時(shí)耍共，標(biāo)題為預(yù)覽）
5.滾動(dòng)時(shí)，導(dǎo)航欄顯示
- 微信猎塞、QQ试读、APP：有
6.總結(jié)
選擇圖片時(shí)，預(yù)覽圖片
- APP優(yōu)化：導(dǎo)航欄參考QQ
選擇圖片后荠耽，預(yù)覽圖片
長(zhǎng)圖展示
操作：
- 當(dāng)選擇多張圖片后钩骇，點(diǎn)完成或發(fā)送按鈕，進(jìn)入到圖片上傳頁(yè)面铝量，再點(diǎn)圖片預(yù)覽圖片
當(dāng)選擇長(zhǎng)圖后倘屹，圖片頁(yè)面展示
- 微信：圖片模糊
- QQ：圖片非常清晰
- APP：圖片疊在一起，看不清楚
上傳多張圖片
上傳多張圖片
- 微信：無(wú)此功能
- QQ：該頁(yè)面不能滾動(dòng)慢叨，中間圖片區(qū)域可以滾動(dòng)
- APP：原來(lái)APP的處理方式與QQ一致纽匙，后改為，圖片區(qū)域自動(dòng)撐高拍谐，整個(gè)頁(yè)面可以滾動(dòng)
- 思考：這兩種展示方式側(cè)重點(diǎn)不同：QQ的重點(diǎn)在圖片下面的其他設(shè)置烛缔，弱化圖片；而APP的重點(diǎn)在圖片的展示轩拨，弱化設(shè)置力穗。
預(yù)覽頁(yè)面比較
1.放大縮小
- 微信、QQ气嫁、APP：有
2.保存圖片
- 微信、QQ：無(wú)
- APP：有
3.刪除圖片
- 微信：刪除按鈕
- QQ：選中够坐、取消選中
- APP：長(zhǎng)按圖片寸宵，有刪除按鈕
4.導(dǎo)航欄
- 微信：有崖面，1/8
- QQ：無(wú)，底部有2/8(劃動(dòng)頁(yè)面才出現(xiàn)梯影。此處巫员，QQ的UI不統(tǒng)一)
- APP：有，11/12（只有一張圖片時(shí)甲棍，標(biāo)題為查看大圖）
5.滾動(dòng)時(shí)简识，導(dǎo)航欄顯示
- 微信：無(wú)導(dǎo)航欄
- QQ：無(wú)導(dǎo)航欄，但是有選中感猛、取消選中
- APP：有導(dǎo)航欄
6.總結(jié)
選擇圖片后七扰，預(yù)覽圖片
- APP優(yōu)化：從相冊(cè)中選擇圖片，其實(shí)沒(méi)有必要再保存圖片到相冊(cè)陪白，因此不再提供保存功能
- APP優(yōu)化：長(zhǎng)按颈走，這種方式不夠直觀，改成刪除按鈕咱士。
發(fā)布圖片后立由，查看大圖
微信、APP
QQ
操作：發(fā)布圖片后序厉，在動(dòng)態(tài)頁(yè)面查看大圖
UI展示
- 微信：根據(jù)屏幕大小锐膜，縮放圖片尺寸，每行三張弛房。留白較多道盏。
- QQ：根據(jù)屏幕大小，圖片張數(shù)庭再，縮放圖片尺寸捞奕。沒(méi)有留白。
- APP：不同的頁(yè)面拄轻，展示方式不一致颅围。部分頁(yè)面每行四張，根據(jù)屏幕大小恨搓，縮放圖片尺寸院促。部分頁(yè)面圖片尺寸固定，不同屏幕大小斧抱，動(dòng)態(tài)調(diào)整每行展示圖片數(shù)量常拓。
-
思考：以上3中UI展示方式，個(gè)人比較喜歡微信的風(fēng)格：簡(jiǎn)潔統(tǒng)一辉浦。QQ沒(méi)有留白弄抬，感覺(jué)頁(yè)面比較雜亂。而我們APP則風(fēng)格不統(tǒng)一宪郊，每行張數(shù)不一樣掂恕，圓角直角不統(tǒng)一拖陆。
預(yù)覽頁(yè)面比較
1.放大縮小
- 微信、QQ懊亡、APP：有
2.保存圖片
- 微信依啰、QQ、APP：有
3.刪除圖片
- 微信店枣、QQ速警、APP：無(wú)
4.導(dǎo)航欄
- 微信：無(wú)，底部有page control
- QQ：無(wú)鸯两，底部有2/8(劃動(dòng)頁(yè)面才出現(xiàn))
- APP：有闷旧，11/12
5.滾動(dòng)時(shí)，導(dǎo)航欄顯示
- 微信甩卓、QQ：無(wú)
- APP：有
6.總結(jié)
發(fā)布圖片后鸠匀，查看大圖
- 思考：微信、QQ為了讓用戶的焦點(diǎn)在圖片逾柿，因而隱藏導(dǎo)航欄缀棍，弱化圖片張數(shù)與當(dāng)前位置？
上傳圖片張數(shù)/是否有原圖功能
1.微信
- 聊天頁(yè)面机错、上傳電腦：9/原圖
- 發(fā)朋友圈：9/無(wú)原圖
2.QQ
- 聊天頁(yè)面：20/原圖
- 上傳電腦：50/無(wú)原圖
- 發(fā)說(shuō)說(shuō)：20/預(yù)覽時(shí)爬范，沒(méi)有原圖選項(xiàng)，但選好圖片后弱匪，可以設(shè)置圖片質(zhì)量
- 發(fā)照片：400+/預(yù)覽時(shí)青瀑，沒(méi)有原圖選項(xiàng)，但選好圖片后萧诫，可以設(shè)置圖片質(zhì)量
3.APP
- 聊天頁(yè)面：9/原圖
- 發(fā)布動(dòng)態(tài)等頁(yè)面：一次選8張圖片斥难，可以選多次/原圖
4.總結(jié)
上傳圖片張數(shù)/是否有原圖功能
- APP 優(yōu)化：聊天頁(yè)面和發(fā)布動(dòng)態(tài)等頁(yè)面一次選擇的最大張數(shù)統(tǒng)一
圖片上傳
1.微信
- 無(wú)網(wǎng)絡(luò)、弱網(wǎng)帘饶、正常 ：直接顯示哑诊，沒(méi)有l(wèi)oading的過(guò)程，保存圖片上傳隊(duì)列及刻，恢復(fù)網(wǎng)絡(luò)后镀裤，在后臺(tái)繼續(xù)上傳
2.QQ
上傳提示
- 無(wú)網(wǎng)絡(luò)、弱網(wǎng)缴饭、正常 ：直接顯示暑劝，沒(méi)有l(wèi)oading的過(guò)程，并在界面提示已保存圖片上傳隊(duì)列颗搂，恢復(fù)網(wǎng)絡(luò)后繼續(xù)上傳
3.APP
上傳成功担猛、上傳失敗和上傳中
- 無(wú)網(wǎng)絡(luò)、弱網(wǎng)、正常 ：有l(wèi)oading的過(guò)程毁习，上傳成功后會(huì)顯示勾智嚷，當(dāng)網(wǎng)絡(luò)條件差的情況，上傳失敗顯示叉纺且，點(diǎn)圖片，可以重新上傳
4.總結(jié)
圖片上傳
- APP 優(yōu)化：因?yàn)槟壳皥D片上傳都是先將圖片上傳到騰訊云或萬(wàn)象稍浆，獲取到圖片的url后载碌，再進(jìn)行后續(xù)操作。所以圖片上傳還是按照以前的主要邏輯衅枫，但UI部分重構(gòu)嫁艇，優(yōu)化圖片上傳體驗(yàn)，盡量減少用戶等待時(shí)間
其他功能
1.上傳圖片后弦撩，點(diǎn)取消按鈕
上傳圖片后步咪，點(diǎn)取消按鈕
- 微信：彈框確認(rèn)：退出此次編輯？
- QQ：彈框提示：是否保存草稿益楼。保存后猾漫，下次寫(xiě)說(shuō)說(shuō)，圖片和文字均保留感凤。
- APP：直接頁(yè)面跳轉(zhuǎn)悯周，沒(méi)有提示
2.最近圖片提示
最近圖片提示
- 微信：你可能要發(fā)送的照片
- QQ：你可能想傳
- APP：無(wú)此功能
3.正常圖片滾動(dòng)方向
- 微信、QQ：水平滾動(dòng)
- APP：水平滾動(dòng)陪竿，垂直滾動(dòng)
4.長(zhǎng)圖滾動(dòng)方向
預(yù)覽長(zhǎng)圖
- 微信禽翼、QQ、APP：水平滾動(dòng)族跛，垂直滾動(dòng)
5.總結(jié)
其他功能
- APP 優(yōu)化：彈框確認(rèn)：退出此次編輯闰挡？
- APP 優(yōu)化：后續(xù)可以考慮加上最近圖片提示
- APP 優(yōu)化：只需要水平滾動(dòng)
- APP 優(yōu)化：展示長(zhǎng)圖UI待優(yōu)化
