表單是我們比較常見的一個信息錄入工具慎王。糟糕的表單設(shè)計會帶來令用戶抓狂的交互體驗璧榄，極大的影響用戶信息錄入的效率。
表單的構(gòu)成
常見表單是由多個列表項構(gòu)成的甸箱，而每一個列表項都有最基本的標簽和輸入框闽坡。顧名思義栽惶，標簽是用來告訴用戶這個列表項是什么；輸入框是供用戶輸入用的疾嗅。
標簽根據(jù)所處的位置可以分為左標簽外厂，頂部標簽和行內(nèi)標簽。
左標簽
左標簽?zāi)壳皝碚f是最常見的一種標簽樣式代承，但是這并不意味著我們可以無所顧慮的去使用汁蝶。以手機端為例，手機端屏幕尺寸有限论悴，左標簽會占據(jù)屏幕較大的空間掖棉，那么右邊的輸入框就可能無法展示完整的信息。
例如膀估，如果你的郵箱地址過長就會造成信息的不完全展示幔亥，這對用戶體驗來說是致命的。因為用戶一旦輸入的信息過長玖像，他們在確認提交之前肯定會對所輸入的內(nèi)容進行審核確認，如果連完整的內(nèi)容都無法獲知，用戶根本不會進行下一步操作捐寥，這就造成來操作流程的中斷笤昨。所以我們在使用左標簽的時候一定要考慮輸入內(nèi)容的長短。
頂部標簽
頂部標簽就是指標簽位于輸入框上方握恳，這樣輸入框就可以獨占整個頁面瞒窒，信息可以得到更完全的展示。與左標簽相比乡洼，頂部標簽可以給輸入框騰出足夠的空間崇裁。
但是這種的布局方式也有自身的缺點，那就是之前一屏就可以展示的內(nèi)容束昵，用戶現(xiàn)在需要滾屏才可以看完拔稳。
行內(nèi)標簽
行內(nèi)標簽的樣式看起來很適合手機端的表單設(shè)計，因為它可以極大的節(jié)省頁面空間锹雏。但是一旦用戶點擊切換到輸入狀態(tài)后巴比，用戶就會看不到這些標簽來。如果同一頁面中表單項目很多（超過5個）礁遵，用戶填寫過程中可能會忘記之前填寫的項目是什么轻绞。此外列表項過多，用戶在填寫的時候中很容易出現(xiàn)串行佣耐，把家庭住址天道畢業(yè)院校也是可能出現(xiàn)的情況政勃。更嚴重的是，用戶因為無法看到標簽兼砖，這類的錯誤是無法檢查出來的奸远。
為了解決這個問題，我們可以在行內(nèi)標簽前加一個圖標來表示這個列表項掖鱼，圖標所占據(jù)的空間不會太大然走，而且會增加頁面的美觀性。
當(dāng)表單項目過多時我們要進行整合分組來提升內(nèi)容的可讀性戏挡。下圖中右表格將15個字段分成3組芍瑞。同樣數(shù)量的內(nèi)容，但用戶的印象卻大不相同褐墅。
提升用戶信息錄入效率
好的用戶體驗應(yīng)該盡可能的簡化操作步驟拆檬，傳統(tǒng)的手動輸入模式費時費力，對用戶來說不是一種友好的體驗妥凳。我們應(yīng)該思考如何給用戶減負竟贯。
控件的應(yīng)用可以很好的幫助用戶信息的快速錄入。一般來說逝钥，表單中的控件一般有下拉列表屑那，switch開關(guān)，單選按鈕，多選按鈕持际，滑塊等沃琅。
滑塊
這里我們主要來說經(jīng)常被忽視的滑塊，滑塊適用于精確度不是很高的數(shù)據(jù)錄入蜘欲，例如你要去預(yù)定一個房間益眉，其中需要你輸入你所期望的最低價格和最高價格。這個時候我們可以使用滑塊來代替?zhèn)鹘y(tǒng)的手動打字輸入姥份，我們都知道滑塊無法做到對信息的精確錄入郭脂，所以在這里滑塊默認單位是50，你如果要求最低180澈歉，最高720這里是無法實現(xiàn)的展鸡。
控件的使用的確可以極大提升了用戶的錄入效率，但是用戶畢竟還是需要自己去“輸入”闷祥。其實我們也可以給用戶提供一些默認值娱颊，和自動完成讓用戶連輸入這一步都免了。
默認值
如果你確定對用戶足夠的了解凯砍，在用戶進行信息錄入的時候我們可以提供合理的默認值箱硕。因為對于用戶來說，填寫信息永遠都不是一件有趣的事情悟衩，合理的默認值可以節(jié)省用戶的操作時間剧罩。
接下來說一個反面案例：
這是一個報銷單，其中有一項是項目號座泳，這里系統(tǒng)沒有提供默認值惠昔。其實系統(tǒng)可以根據(jù)你所在的項目組回顯出項目編號，但是這里并沒有挑势。這在我看來是非常反人類的镇防，因為項目編號是一串漢字和數(shù)字組合，一般我們很少會記潮饱。我們遇到這種情況一般是返回上一步来氧，查看項目編號，拿手機拍下項目編號再回來填寫香拉，費時費力啦扬。
自動完成
自動完成功能也可以來降低用戶的操作負擔(dān)。當(dāng)用戶在文本框里輸入時凫碌，系統(tǒng)猜測可能的答案扑毡，顯示可選列表。
用戶也會犯錯
離線個狀態(tài)下盛险，用戶填寫完表單瞄摊，然后點擊提交按鈕勋又，系統(tǒng)顯示提交成功。但是顯示情況卻是我們在填寫過程中經(jīng)常會發(fā)生錯誤换帜，那么如何給用戶報告錯誤是需要我們仔細研究的赐写。
目前來說，我們經(jīng)衬ぴ撸看到一個報錯提示的樣式是彈框。在我看來揉忘，彈出框并不是一個好的選擇跳座。因為用戶如果要進行修改，就必須關(guān)閉彈出框泣矛，那么錯誤信息用戶就看不到了疲眷。如果用戶錯誤的項目比較多，那么用戶就需要花一定的時間去記住這些錯我您朽，然后再來改狂丝，這回增加用戶的記憶負擔(dān)。
所以在我看來哗总，逐行報錯比系統(tǒng)的使用彈出框給用戶報錯要友好的多几颜。而且錯誤提示就位于你填寫錯項目的旁邊，用戶一眼就能看明白哪里錯誤了讯屈，不用費力去找蛋哭。此外逐行報錯會一直出現(xiàn)知道用戶修改完成，用戶可以進行有針對性的修改涮母。
逐行報錯的缺點就是移動端受限于屏幕尺寸谆趾，錯誤原因不一定可以得到充分的展示。
以上說的是表單設(shè)計中如何給用戶錯誤提示叛本，當(dāng)然與其亡羊補牢沪蓬，我們不如嘗試著來幫助用戶來避免犯錯。
表單錄入用戶經(jīng)常發(fā)生錯誤的地方就是輸入格式来候，以日期為例跷叉。不同的地區(qū)對于日期錄入的格式也不一樣，2017-08-15吠勘，08.15.2017性芬，08-15-2017等等。目前來說一些表單實現(xiàn)了容錯模式剧防，允許用戶輸入不同格式或者不同類型的數(shù)字植锉。這也降低了用戶犯錯的幾率。
表單是主要的信息錄入工具之一峭拘，也是一款產(chǎn)品用戶體驗的重中之重俊庇。不存在完美且百搭的表單樣式狮暑，不同的產(chǎn)品在進行表單設(shè)計時有不同的出發(fā)點和思路。以上就是我的一些總結(jié)辉饱，希望這篇文章可以給你帶來幫助搬男。
文章來源：微信公眾號王M爭
