圖片和文字，都是一種數據形式。我平時對文本框的錄入，報錯和提交的設計比較多。最近涉及到圖片控件的設計，細細琢磨一下，這玩意還有一些平時沒太注意的細節點，感覺對于其他控件的設計有指導意義，特此總結一下

傳圖控件的基本行為：把符合規則的圖片傳到服務器上，并且呈現在頁面上。

圖片的基本屬性：圖片的文件格式，圖片大小，圖片寬，圖片長，圖片數量。
大部分網站上，會對上傳圖片的上述屬性有規定。比如：單張圖片不超過10MB，尺寸不小于300*300px，支持jpg、png和bmp。并且有部分規則是用戶使用傳圖控件時不會看到的，后面會說到的。

那么問題來了：傳圖控件是如何引導和控制用戶，上傳規定屬性的圖片呢？

方法一：“調教”

1.操作前，對用戶進行提示和教育

這里就不多說了，即通過文字提示用戶，要上傳圖片的限制。

大眾點評傳圖控件

2.限制你的行為，引導你的行為，并且不給你犯錯的機會

傳單張和多張的問題

首先要解決的是告訴用戶，這里能傳多張圖。如下面兩張圖的做法

新浪微博傳圖控件

微信后臺傳圖控件

還有一種辦法，就是把圖片的“坑位”展示出來。這樣就很容易看出來，是可以傳多張圖的。但是這種做法一般會用于這種規則下：1.每個“坑位”都是必填項 2.雖然不是必填項，但是有意引導用戶去填滿這些“坑”

美團后臺

其次要考慮的是，多次上傳圖片時的場景下，該如何設計。具體情況可能是，這里能上傳9張圖，用戶先上傳了3張。那么此時界面改如何展示？一般的做法是會給出一個傳圖“入口”，規則則是每增加一張圖片，傳圖入口都會展現

新浪微博傳圖控件

大部分傳圖控件對圖片格式是有限制的，當然也不能上傳其他格式的文件。
開始我設計傳圖控件的想法是：你可以隨便選擇當前電腦的文件，如果選錯了格式，就在提交的時候報錯說明一下。但其實選擇當前電腦的圖片時，是可以設置成，只能選擇符合規則的圖片格式。這樣確認上傳時就不會看到格式錯誤的提示。

圖中的 mp4格式文件不能被選擇

3.操作中，如果用戶犯錯了，就提示用戶改正

這里本來也沒什么說的。

但是，我認為提示錯誤這里，還有一個細節設計點。

我測試了幾個網站的傳圖控件后，發現設計傳圖控件的錯誤提示，應該和文本框的不一樣。因為，一般傳圖控件的界面本身就有許多元素，甚至于本身就是一個彈層。并且很多情況下，會切換到文件選擇彈窗進行選圖。所以在這種頁面多元素，和彈層切換的情況下，部分網站的錯誤提示，不能很好的讓用戶聚焦，甚至都不容易發現。如下面三張圖：

twitter 的傳圖錯誤提示

微信后臺的傳圖錯誤提示

大家可以稍微想象一下：你點擊了【上傳圖片】，然后出現了一個【選擇圖片的彈窗】，點擊完【確認】之后，在瀏覽器頂部會出現小塊提示。

淘寶的傳圖錯誤提示

淘寶這里更奇葩的是，保存按鈕的位置低于600px。也就是說部分電腦根本可能看不到這個錯誤提示。

但是，比上面三者，更加極端的反例就是豆瓣。大家可以試試把自己的豆瓣頭像更換一下，我保證不惡心死你。

方法二：“善后”

1.上傳時放開限制，上傳后系統自動對圖片進行調整

比如部分社交網站，不會在上傳前限制上傳圖片的大小，高度和寬度。因為系統會在用戶上傳之后，對圖片大小進壓縮。上傳社交網站的頭像時，還讓用戶進行手動裁剪。

QQ 空間相冊的傳圖控件不限制圖片大小，長寬

twitter 的裁剪圖片控件

另外，在上傳較大的圖片時，要注意設計出“正在上傳的反饋”

簡書的傳圖彈層

2.一半對，一半錯？那就只管對的

上傳圖的數量有最多限制時，可以讓控件只上傳最高限的圖片數量，多選擇了的圖不會被上傳。當然在這里必須提醒一下用戶，這里有圖片數量的限制，要不然會有人以為剛才選的圖片都已經上傳了。
下圖中，我實際上在彈窗中選擇了12張圖片，但最后只是給我上傳了最先選的9張圖

新浪微博的傳圖控件

總結

圖片和文字一樣，都是一種數據形式。輸入文字數據時，會提前提示格式，也能限制部分用戶行為，和給出錯誤提示，并對文字的展現進行部分修改。但是由于圖片數據的特殊屬性——圖片的格式，數量，長寬等，和上傳圖片的基本方式——“選擇”的混合影響，造成了傳圖控件設計中的差別和細節關注點。

上篇：重新認識控件（一）【面包屑導航】

作者：@德川亮；via：簡書