中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

圖片是一種常見(jiàn)的數(shù)據(jù)展現(xiàn)形式，近來(lái)接觸到了好幾個(gè)關(guān)于上傳圖片的設(shè)計(jì)，本文圍繞“如何在web設(shè)計(jì)上傳圖片”進(jìn)行總結(jié)。

上一篇介紹了上傳單張圖片，這一篇介紹上傳多張圖片。

一、需求場(chǎng)景

在社交場(chǎng)景中，用戶常常會(huì)主動(dòng)的用圖片去交流，有時(shí)候大量的文字效果還不如幾張圖片來(lái)的直接，尤其是現(xiàn)在追求有圖有真相，在溝通中通過(guò)圖片可以更好的交流、分享。例如在QQ空間、微博、豆瓣中，都可以通過(guò)上傳多個(gè)圖片，發(fā)布最新的動(dòng)態(tài)。那么在這種同時(shí)上傳多個(gè)圖片的場(chǎng)景如何進(jìn)行設(shè)計(jì)呢？

二、案例分析：微博 VS 豆瓣發(fā)布照片

在微博中里面，用戶在發(fā)布新聞、美食、娛樂(lè)、電影等信息中通常會(huì)穿插上圖片，可以文字+圖片的方式進(jìn)行信息的傳遞與交流。通常文字的內(nèi)容不建議太多，人們?cè)跒g覽的時(shí)候，更加容易被圖片吸引。并且若是一張圖片不足以表達(dá)完成的內(nèi)容，那么就需要上傳多張圖片來(lái)進(jìn)行信息的分享。

1. 上傳圖片前

（1）告訴用戶可上傳多張

在微博中鼓勵(lì)用戶若有什么新鮮事想告訴大家，所以發(fā)布信息的入口在頁(yè)面頂部?？梢约皶r(shí)把新鮮的事情通過(guò)文字+圖片的方式傳遞給公眾。

首先，系統(tǒng)需要告知用戶，這里可以上傳多張圖片。

微博在初次上傳圖片的時(shí)候，并沒(méi)有提醒用戶，可能是因?yàn)槲⒉┑陌l(fā)布新鮮事情功能對(duì)于用戶而言使用的已經(jīng)非常多了，不需要重點(diǎn)去引導(dǎo)。

但是如果用戶不是特別熟悉的情況下，在上傳圖片前，還是需要告訴用戶支持上傳多個(gè)圖片的信息。例如下面豆瓣的文案提示：按住ctrl鍵可最多選中9張，并且還支持拖拽圖片到框里的方式來(lái)上傳圖片。

通常上傳多張圖片時(shí)，需要借助快捷鍵來(lái)選擇。ctrl鍵和Shift鍵都可以同時(shí)選擇多張圖片，但它們之間也有不同之處，使用的場(chǎng)景是不一樣的。

按住Ctrl鍵選擇多圖上傳，選擇的是多張不連續(xù)的圖片。這種方法適合于上傳不連續(xù)的多張圖片。

shift鍵也可以同時(shí)上傳多張圖片，選擇的是多張連續(xù)的圖片。但多張連續(xù)圖片是以其中一張為基礎(chǔ)向上或是向下的連續(xù)選擇。

（2）告訴用戶上傳圖片的數(shù)量限制

圖片支持上傳多張，那么最多支持上傳多少?gòu)?，這個(gè)信息也是需要告知給用戶。

上面豆瓣上傳圖片的案例中，已經(jīng)通過(guò)文案直接提示：按住ctrl鍵可最多選中9張。

還有一種方式，把圖片的“坑位”都展示出來(lái)，這樣就很容易看出來(lái)，是可以傳多張圖的。但是這種做法一般會(huì)用于這種規(guī)則下：

1. 每個(gè)“坑位”都是必填項(xiàng)，讓用戶清楚知道需要上傳的圖片；
2. 雖然不是必填項(xiàng)，但是有意引導(dǎo)用戶去填滿這些“坑”，引導(dǎo)用戶分享更多圖片。
3. 圖片的順序，就是根據(jù)從左到右上傳的圖片進(jìn)行排序。

（3）圖片的寬度和高度校驗(yàn)

有時(shí)候上傳圖片還需要考慮圖片的寬度和高度的校驗(yàn)，比如系統(tǒng)的logo，為了保證效果，需要限制圖片的高度和寬度，防止質(zhì)量過(guò)差或者過(guò)大的圖片上傳，因?yàn)槔?、縮放、模糊等因素影響平臺(tái)整體的視覺(jué)效果。這里有2種方式：

第一種是輕限制，重引導(dǎo)，為了更靈活支持用戶的使用場(chǎng)景。

不是所有的logo圖對(duì)高度和寬度進(jìn)行限制，更好的方式是對(duì)用戶提供更多的建議和引導(dǎo)，而不是強(qiáng)制限制。上傳圖片是用戶的一個(gè)主動(dòng)行為，用戶在上傳后預(yù)覽時(shí)，可以很主觀的去判斷是否決定使用這張模糊或者質(zhì)量不高的圖片。

第二種是重限制，重引導(dǎo)，這種就是需要避免用戶的操作對(duì)產(chǎn)品帶來(lái)的影響。

低質(zhì)量的圖片是一個(gè)雷區(qū)，若是越過(guò)這個(gè)雷區(qū)，傷害的就不只是商戶，還會(huì)傷害到平臺(tái)。像是特別低分辨率 完全無(wú)法兼容的格式，不支持的尺寸，這類圖片的若是大量在平臺(tái)上面出現(xiàn)，就會(huì)讓用戶對(duì)平臺(tái)失去好感，認(rèn)為平臺(tái)質(zhì)量不過(guò)關(guān)。所以通過(guò)限制不合規(guī)的圖片、引導(dǎo)用戶上傳高質(zhì)量圖片，來(lái)限制避免低質(zhì)量的圖片，降低對(duì)平臺(tái)質(zhì)量的影響。

例如淘寶的商品圖片，如果都是低質(zhì)量的圖片，會(huì)讓用戶對(duì)平臺(tái)的商品質(zhì)量質(zhì)疑，所以對(duì)商品圖片的分辨率，格式等進(jìn)行了限制，避免了不合規(guī)的圖片上傳到平臺(tái)中。

2. 上傳圖片中，批量校驗(yàn)圖片行為

支持用戶上傳多個(gè)圖片，由于這種會(huì)涉及到多文件的批量操作，同一批文件中可能出現(xiàn)多個(gè)文件的圖片格式、圖片大小、圖片數(shù)量等屬性信息的校驗(yàn)。原則上，相同屬性的原因只提醒一次，例如：有5個(gè)是非圖片格式，只提示一次圖片格式即可，不需要重復(fù)提示5次。錯(cuò)誤的文件進(jìn)行提示，正確的文件直接展示即可。

驗(yàn)的優(yōu)先級(jí)：先校驗(yàn)文件類型，再校驗(yàn)文件大小，最后才是圖片的數(shù)量。比如最多只能上傳9張圖片，如果一次選擇了12張圖片，并且有非圖片格式，超過(guò)大小的文件，那么這里的判斷：就是過(guò)濾非圖片格式的文件，然后過(guò)濾超過(guò)圖片大小的，最后判斷圖片是否超過(guò)最大限制，若是超過(guò)最大數(shù)量限制，那么就展示科研容納的圖片，多余的圖片提示超過(guò)限制，過(guò)濾不展示即可。

此時(shí)圖片已經(jīng)上傳滿了，頁(yè)面上就沒(méi)有添加圖片的按鈕了。只有刪除圖片之后，才會(huì)多余的位置。

3. 多圖上傳的異常處理

經(jīng)過(guò)前面的篩選圖片、圖片校驗(yàn)步驟，多張圖片選擇好了之后，再用戶點(diǎn)擊“發(fā)布”按鈕的那一刻，就是考驗(yàn)系統(tǒng)的時(shí)候了。由于是多圖片的上傳，用戶的信息比較多，上傳的時(shí)間會(huì)稍微久一點(diǎn)，需要給用戶一個(gè)上傳中的狀態(tài)提示。

并行需要考慮網(wǎng)絡(luò)出現(xiàn)狀況的話，比如網(wǎng)絡(luò)超時(shí)導(dǎo)致上傳失敗，那這種情況下該怎么處理。

豆瓣在點(diǎn)擊發(fā)布之后，若是在網(wǎng)絡(luò)不好的情況下，它的處理方式就有些讓人崩潰，只是提示用戶發(fā)送失敗，最重要的是剛剛編輯的內(nèi)容并沒(méi)有保存，對(duì)于用戶而言，剛才耗時(shí)整理的內(nèi)容沒(méi)有保存，需要重新來(lái)過(guò)，這是很讓用戶崩潰的。

我們先來(lái)看微信的處理方式：當(dāng)你點(diǎn)擊發(fā)布之后，微信會(huì)直接跳到朋友圈的頁(yè)面并把發(fā)布結(jié)果展示出來(lái)，讓用戶直觀看到最終的成果，就算是在弱網(wǎng)的情況下，微信也是采用這種邏輯處理方式，制造一種“發(fā)布成功的假象”，用戶自己看到發(fā)布成功，在別人的朋友圈暫時(shí)還看不到。并且在網(wǎng)絡(luò)好了之后，后臺(tái)會(huì)再次嘗試，直到發(fā)布成功。

4. 上傳圖片后，多圖的展示

圖片上傳成功之后，就是需要關(guān)注圖片發(fā)布的結(jié)果，也是最終需要達(dá)到的訴求。

如果圖片發(fā)布成功了，會(huì)根據(jù)圖片的數(shù)量，來(lái)進(jìn)行圖片的展示。

方式1：:圖片是重點(diǎn)信息，上傳多少?gòu)垐D，就展示多少?gòu)垺?/p>

用戶上傳圖片之后，會(huì)根據(jù)上傳了幾張圖片來(lái)展示效果。

方式2：雖然是上傳多張圖片，但是只展示部分圖片，但是附帶圖片的數(shù)量，點(diǎn)擊可進(jìn)入頁(yè)面查看所有圖片。

總結(jié)

任何一種圖片上傳的方式，其實(shí)都是根據(jù)用戶的需求、操作場(chǎng)景來(lái)設(shè)計(jì)的，讓用戶更加方便。看似一個(gè)簡(jiǎn)單的上傳照片的功能卻有很多種不同的設(shè)計(jì)方案，每個(gè)設(shè)計(jì)方案其實(shí)滿足的就是用戶的具體需求和場(chǎng)景。

#相關(guān)閱讀#

如何在Web端設(shè)計(jì)上傳圖片（1）：上傳單張圖片

本文由 @瓜子 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

題圖來(lái)自Unsplash，基于CC0協(xié)議。