重新認(rèn)識(shí)控件(二)【W(wǎng)eb傳圖控件】
圖片和文字,都是一種數(shù)據(jù)形式。我平時(shí)對(duì)文本框的錄入,報(bào)錯(cuò)和提交的設(shè)計(jì)比較多。最近涉及到圖片控件的設(shè)計(jì),細(xì)細(xì)琢磨一下,這玩意還有一些平時(shí)沒太注意的細(xì)節(jié)點(diǎn),感覺對(duì)于其他控件的設(shè)計(jì)有指導(dǎo)意義,特此總結(jié)一下
傳圖控件的基本行為:把符合規(guī)則的圖片傳到服務(wù)器上,并且呈現(xiàn)在頁面上。
圖片的基本屬性:圖片的文件格式,圖片大小,圖片寬,圖片長,圖片數(shù)量。
大部分網(wǎng)站上,會(huì)對(duì)上傳圖片的上述屬性有規(guī)定。比如:單張圖片不超過10MB,尺寸不小于300*300px,支持jpg、png和bmp。并且有部分規(guī)則是用戶使用傳圖控件時(shí)不會(huì)看到的,后面會(huì)說到的。
那么問題來了:傳圖控件是如何引導(dǎo)和控制用戶,上傳規(guī)定屬性的圖片呢?
方法一:“調(diào)教”
1.操作前,對(duì)用戶進(jìn)行提示和教育
這里就不多說了,即通過文字提示用戶,要上傳圖片的限制。
大眾點(diǎn)評(píng)傳圖控件
2.限制你的行為,引導(dǎo)你的行為,并且不給你犯錯(cuò)的機(jī)會(huì)
傳單張和多張的問題
首先要解決的是告訴用戶,這里能傳多張圖。如下面兩張圖的做法
新浪微博傳圖控件
微信后臺(tái)傳圖控件
還有一種辦法,就是把圖片的“坑位”展示出來。這樣就很容易看出來,是可以傳多張圖的。但是這種做法一般會(huì)用于這種規(guī)則下:1.每個(gè)“坑位”都是必填項(xiàng) 2.雖然不是必填項(xiàng),但是有意引導(dǎo)用戶去填滿這些“坑”
美團(tuán)后臺(tái)
其次要考慮的是,多次上傳圖片時(shí)的場景下,該如何設(shè)計(jì)。具體情況可能是,這里能上傳9張圖,用戶先上傳了3張。那么此時(shí)界面改如何展示?一般的做法是會(huì)給出一個(gè)傳圖“入口”,規(guī)則則是每增加一張圖片,傳圖入口都會(huì)展現(xiàn)
新浪微博傳圖控件
大部分傳圖控件對(duì)圖片格式是有限制的,當(dāng)然也不能上傳其他格式的文件。
開始我設(shè)計(jì)傳圖控件的想法是:你可以隨便選擇當(dāng)前電腦的文件,如果選錯(cuò)了格式,就在提交的時(shí)候報(bào)錯(cuò)說明一下。但其實(shí)選擇當(dāng)前電腦的圖片時(shí),是可以設(shè)置成,只能選擇符合規(guī)則的圖片格式。這樣確認(rèn)上傳時(shí)就不會(huì)看到格式錯(cuò)誤的提示。
圖中的 mp4格式文件不能被選擇
3.操作中,如果用戶犯錯(cuò)了,就提示用戶改正
這里本來也沒什么說的。
但是,我認(rèn)為提示錯(cuò)誤這里,還有一個(gè)細(xì)節(jié)設(shè)計(jì)點(diǎn)。
我測試了幾個(gè)網(wǎng)站的傳圖控件后,發(fā)現(xiàn)設(shè)計(jì)傳圖控件的錯(cuò)誤提示,應(yīng)該和文本框的不一樣。因?yàn)椋话銈鲌D控件的界面本身就有許多元素,甚至于本身就是一個(gè)彈層。并且很多情況下,會(huì)切換到文件選擇彈窗進(jìn)行選圖。所以在這種頁面多元素,和彈層切換的情況下,部分網(wǎng)站的錯(cuò)誤提示,不能很好的讓用戶聚焦,甚至都不容易發(fā)現(xiàn)。如下面三張圖:
twitter 的傳圖錯(cuò)誤提示
微信后臺(tái)的傳圖錯(cuò)誤提示
大家可以稍微想象一下:你點(diǎn)擊了【上傳圖片】,然后出現(xiàn)了一個(gè)【選擇圖片的彈窗】,點(diǎn)擊完【確認(rèn)】之后,在瀏覽器頂部會(huì)出現(xiàn)小塊提示。
淘寶的傳圖錯(cuò)誤提示
淘寶這里更奇葩的是,保存按鈕的位置低于600px。也就是說部分電腦根本可能看不到這個(gè)錯(cuò)誤提示。
但是,比上面三者,更加極端的反例就是豆瓣。大家可以試試把自己的豆瓣頭像更換一下,我保證不惡心死你。
方法二:“善后”
1.上傳時(shí)放開限制,上傳后系統(tǒng)自動(dòng)對(duì)圖片進(jìn)行調(diào)整
比如部分社交網(wǎng)站,不會(huì)在上傳前限制上傳圖片的大小,高度和寬度。因?yàn)橄到y(tǒng)會(huì)在用戶上傳之后,對(duì)圖片大小進(jìn)壓縮。上傳社交網(wǎng)站的頭像時(shí),還讓用戶進(jìn)行手動(dòng)裁剪。
QQ 空間相冊的傳圖控件不限制圖片大小,長寬
twitter 的裁剪圖片控件
另外,在上傳較大的圖片時(shí),要注意設(shè)計(jì)出“正在上傳的反饋”
簡書的傳圖彈層
2.一半對(duì),一半錯(cuò)?那就只管對(duì)的
上傳圖的數(shù)量有最多限制時(shí),可以讓控件只上傳最高限的圖片數(shù)量,多選擇了的圖不會(huì)被上傳。當(dāng)然在這里必須提醒一下用戶,這里有圖片數(shù)量的限制,要不然會(huì)有人以為剛才選的圖片都已經(jīng)上傳了。
下圖中,我實(shí)際上在彈窗中選擇了12張圖片,但最后只是給我上傳了最先選的9張圖
新浪微博的傳圖控件
總結(jié)
圖片和文字一樣,都是一種數(shù)據(jù)形式。輸入文字?jǐn)?shù)據(jù)時(shí),會(huì)提前提示格式,也能限制部分用戶行為,和給出錯(cuò)誤提示,并對(duì)文字的展現(xiàn)進(jìn)行部分修改。但是由于圖片數(shù)據(jù)的特殊屬性——圖片的格式,數(shù)量,長寬等,和上傳圖片的基本方式——“選擇”的混合影響,造成了傳圖控件設(shè)計(jì)中的差別和細(xì)節(jié)關(guān)注點(diǎn)。
上篇:重新認(rèn)識(shí)控件(一)【面包屑導(dǎo)航】
作者:@德川亮;via:簡書
- 目前還沒評(píng)論,等你發(fā)揮!