2022-4-2 高勁
表單是UI設(shè)計(jì)中很常見(jiàn)的元素，不管是PC端還是移動(dòng)端，表單幾乎是無(wú)法規(guī)避的UI控件，用戶可以通過(guò)表單完成線上購(gòu)物、信息交換、文章訂閱等任務(wù)，使用范疇極為廣泛且牽扯到方方面面。
表單設(shè)計(jì)看似很簡(jiǎn)單、實(shí)則很容易忽略用戶體驗(yàn)，作為設(shè)計(jì)師，需要根據(jù)觸發(fā)條件、使用場(chǎng)景將各元素進(jìn)行靈活的調(diào)整，才能確保用戶順暢的完成表單任務(wù)，因此，設(shè)計(jì)出一個(gè)可用性非常好的表單非常有必要。本文將針對(duì)表單的設(shè)計(jì)準(zhǔn)則及用戶體驗(yàn)進(jìn)行了總結(jié)，希望能夠幫到大家。
一、認(rèn)識(shí)表單
二、表單結(jié)構(gòu)及元素設(shè)計(jì)細(xì)節(jié)
三、暫存及送出規(guī)則
四、如何提升表單完成率
五、常見(jiàn)誤區(qū)及避坑指南
六、總結(jié)
表單主要用來(lái)收集或呈現(xiàn)數(shù)據(jù)或特定字段等信息，屬于信息采集工具，可運(yùn)用到不同的場(chǎng)景模塊中，例如常見(jiàn)的登錄注冊(cè)、調(diào)查問(wèn)卷、個(gè)人信息頁(yè)面。如何確定當(dāng)前頁(yè)面是不是表單頁(yè)，主要看該頁(yè)面是否發(fā)生信息采集而觸發(fā)用戶進(jìn)行輸入、選擇、編輯等操作。
完成表單內(nèi)容需經(jīng)過(guò)三個(gè)階段，即交互前、交互中、交互后的三種狀態(tài)。
◇ 交互前：未發(fā)生任何操作，默認(rèn)為初始化狀態(tài)；
◇ 交互中：光標(biāo)插入即成為聚焦?fàn)顟B(tài)，占位符消失，隨著內(nèi)容的輸入，輸入框后面顯示一鍵清除圖標(biāo)；
◇ 交互后：輸入完成光標(biāo)離開(kāi)，前端如驗(yàn)證內(nèi)容有誤會(huì)立即反饋，無(wú)誤則回到正常輸入后的狀態(tài)。
首先，在視覺(jué)上，移動(dòng)端表單不管所輸入字段有多么少也不要在同一行添置多個(gè)表單，使用單列方式呈現(xiàn)，便于用戶瀏覽和理解。如果存在關(guān)聯(lián)性極強(qiáng)的前置條件可設(shè)計(jì)多列，如：輸入手機(jī)號(hào)碼之前要先選擇國(guó)際電話區(qū)號(hào)，可將這兩個(gè)字段納入同一個(gè)（雙列）表單項(xiàng)。
其次，表單內(nèi)容需先易后難，避免用戶從一開(kāi)始就產(chǎn)生逃避的想法，需根據(jù)內(nèi)容的關(guān)聯(lián)性循序漸進(jìn)的引導(dǎo)用戶完成。例如：添加地址，常見(jiàn)順序是姓名、電話、地區(qū)、詳細(xì)地址，如果一開(kāi)始就讓用戶填寫(xiě)詳細(xì)地址的話就不合理了（并不是不行），這等于在顛覆用戶的認(rèn)知，就算完成了表單內(nèi)容多少也會(huì)有些“上頭”。
最后，當(dāng)同一頁(yè)面表單項(xiàng)過(guò)多時(shí)，需要根據(jù)類型、相似性或前后關(guān)系進(jìn)行分組，以保持頁(yè)面的節(jié)奏感，讓用戶在最短的時(shí)間內(nèi)對(duì)整個(gè)頁(yè)面內(nèi)容有個(gè)大致的了解，從而能更輕松的完成表單。另外，將選填的內(nèi)容盡量靠后，如果重要性較低，就直接去。
標(biāo)簽的作用是告知用戶當(dāng)前表單要輸入什么內(nèi)容，清晰簡(jiǎn)潔的表單能讓用戶更快速的理解。標(biāo)簽的長(zhǎng)短決定著其對(duì)齊方式，通常標(biāo)簽字?jǐn)?shù)在可控的情況下可使用左對(duì)齊；文本字?jǐn)?shù)不可控但不是很多時(shí)可使用右對(duì)齊；字?jǐn)?shù)不可控且標(biāo)簽長(zhǎng)短不一、相差巨大就使用頂對(duì)齊（例如英文，大多數(shù)不可控，參差不齊）。
占位符主要對(duì)標(biāo)簽進(jìn)行描述或補(bǔ)充內(nèi)容格式，它并非內(nèi)容，而是在用戶輸入內(nèi)容之前幫助其解決常見(jiàn)問(wèn)題及誤區(qū)，用以提升表單的完成效率。
部分設(shè)計(jì)師喜歡將占位符和標(biāo)簽保持一致，實(shí)無(wú)必要，如果只是單純的為了視覺(jué)上統(tǒng)一，使用通用提示「請(qǐng)輸入/請(qǐng)選擇」也很不錯(cuò)，或者在后面加上推薦性措辭，否則就直接留空。當(dāng)光標(biāo)插入時(shí)，盡量保留占位符，輸入內(nèi)容后再消失，方便用戶在輸入內(nèi)容之前依然可通過(guò)占位符得到幫助。
在這里需要說(shuō)明一個(gè)誤區(qū)，避免直接將占位符作為標(biāo)簽使用，如果只是針對(duì)登錄頁(yè)面，用戶還可以理解，因?yàn)槠鋬?nèi)容比較大眾化，賬號(hào)+密碼、額外再加個(gè)驗(yàn)證碼，很容易理解。但其他類型的表單頁(yè)面就容易讓用戶產(chǎn)生疑惑，輸入內(nèi)容時(shí)隨著占位符的消失，容易忘記表單的內(nèi)容屬性，增加了用戶的理解成本和使用難度。
能讓用戶選擇的就不要讓其碼字輸入，例如：輸入手機(jī)號(hào)碼，可讓用戶跳轉(zhuǎn)到通訊錄自行選擇。盡量減少需輸入的內(nèi)容，通過(guò)已知信息預(yù)判并幫助用戶自動(dòng)錄入，如：手機(jī)號(hào)碼前要先輸入國(guó)際區(qū)號(hào)，若產(chǎn)品主要服務(wù)于國(guó)內(nèi)用戶，系統(tǒng)自動(dòng)錄入“+86”，可節(jié)省用戶的操作成本，降低表單的完成難度。
在表單輸入后，需在后面提供一鍵清除圖標(biāo)“?”，因?yàn)橄到y(tǒng)提供的刪除功能只能單個(gè)文本清除。
需對(duì)輸入的內(nèi)容設(shè)計(jì)規(guī)范格式，將同一組較長(zhǎng)的內(nèi)容加空格分段，便于瀏覽記憶。例如地址“廣東省 深圳市 龍華區(qū)”、手機(jī)號(hào)碼“138 888 88888”等。
鍵盤(pán)是內(nèi)容輸入的必備組件，很多時(shí)候，產(chǎn)品會(huì)允許用戶在系統(tǒng)輸入法與第三方輸入法之間自由切換，基于常規(guī)操作似乎沒(méi)有什么問(wèn)題，但站在用戶體驗(yàn)角度，需要根據(jù)不同使用場(chǎng)景考慮是否需要開(kāi)發(fā)內(nèi)置鍵盤(pán)。
如驗(yàn)證碼、部分密碼只需輸入純數(shù)字即可，這時(shí)調(diào)出內(nèi)置的純數(shù)字鍵盤(pán)可減少無(wú)關(guān)元素（字母/符號(hào)）的干擾；出于安全考慮，涉及財(cái)產(chǎn)相關(guān)的密碼則需要打亂鍵盤(pán)的字母、數(shù)字順序，雖然會(huì)增加用戶的理解成本，但與財(cái)產(chǎn)的安全性相比，顯然在可接受范圍之內(nèi)。
當(dāng)表單項(xiàng)存在多個(gè)選項(xiàng)時(shí)，需根據(jù)選項(xiàng)的數(shù)量、長(zhǎng)短設(shè)定不同的展示方式，如單/復(fù)選按鈕、彈窗、頁(yè)面跳轉(zhuǎn)等。
1）按鈕：當(dāng)選項(xiàng)不超過(guò)6條且單條選項(xiàng)在4個(gè)字左右的，可設(shè)計(jì)成按鈕樣式供用戶選擇；
2）彈窗：選項(xiàng)較多時(shí)，使用操作欄彈窗展示；
3）跳轉(zhuǎn)頁(yè)面：若選項(xiàng)太多且不可控，使用跳轉(zhuǎn)頁(yè)面的方式則體驗(yàn)更佳。
提示是用戶在操作前對(duì)完成表單項(xiàng)可能存在疑惑，當(dāng)占位符不足以說(shuō)清楚時(shí)，會(huì)在標(biāo)簽后面增加一個(gè)提示圖標(biāo)，用戶點(diǎn)擊后通過(guò)彈窗或新的頁(yè)面來(lái)查看詳細(xì)的解釋說(shuō)明。
分為前端驗(yàn)證和后端驗(yàn)證，前端驗(yàn)證無(wú)需服務(wù)器傳輸數(shù)據(jù)，程序已寫(xiě)好的驗(yàn)證規(guī)則，光標(biāo)離開(kāi)即可驗(yàn)證（就像玩單機(jī)游戲），例如內(nèi)容格式、長(zhǎng)短、文本類型驗(yàn)證等；后端驗(yàn)證需要將表單內(nèi)容傳入后臺(tái)數(shù)據(jù)庫(kù)進(jìn)行匹配，與數(shù)據(jù)不匹配將驗(yàn)證不通過(guò)，例如賬號(hào)不存在、密碼錯(cuò)誤等。
驗(yàn)證反饋需遵循就近原則，將錯(cuò)誤提示顯示在對(duì)應(yīng)的表單項(xiàng)附近，便于用戶及時(shí)修改。另外，不要將錯(cuò)誤信息直接清除，可將對(duì)應(yīng)信息或輸入框用顏色區(qū)分（標(biāo)紅），讓用戶在原有基礎(chǔ)上進(jìn)行修改則效率更高，試想一下，你一口氣輸了30個(gè)數(shù)字，因?yàn)殄e(cuò)了一個(gè)就得重復(fù)前面的操作次數(shù)是什么感受，請(qǐng)記住，把決定權(quán)永遠(yuǎn)留給用戶。
暫存是指已完成的表單內(nèi)容還未提交至系統(tǒng)而需要離開(kāi)當(dāng)前頁(yè)面，系統(tǒng)為避免用戶重復(fù)完成表單內(nèi)容而提供的預(yù)防措施。我們需要根據(jù)用戶的實(shí)際使用場(chǎng)景來(lái)確定是否需要加入暫時(shí)存儲(chǔ)功能，以給予不同的存儲(chǔ)方式。
筆者曾經(jīng)碰到過(guò)這樣一個(gè)問(wèn)題，在微信某公眾號(hào)中將一個(gè)超長(zhǎng)表單完成一大半時(shí)，然后需切換到微信拿取幾個(gè)信息，必須要回到對(duì)話列表（當(dāng)時(shí)沒(méi)有浮窗功能），無(wú)奈只能返回查看、并祈禱已輸入的內(nèi)容能夠保留，結(jié)果...不出意外的給清空了。換個(gè)姿勢(shì)再來(lái)，于是下載了對(duì)應(yīng)的某APP去完成剛才已重復(fù)過(guò)的操作，當(dāng)在微信中拿取信息后再回到某APP時(shí)，發(fā)現(xiàn)已被結(jié)束進(jìn)程，×&%￥#@……，卸載，拜拜。
這些問(wèn)題出現(xiàn)的原因有很多，可能是設(shè)備問(wèn)題、也可能是自己的不良習(xí)慣，但作為設(shè)計(jì)師，雖然無(wú)法避免問(wèn)題的出現(xiàn)，但需要給用戶提供解決問(wèn)題的措施。可能有人會(huì)說(shuō)，這些小問(wèn)題不在設(shè)計(jì)范疇，是程序控制的，用戶習(xí)慣五花八門(mén)，即便提供預(yù)防措施也不一定能增加用戶的忠誠(chéng)度，筆者想說(shuō)明的是“解決問(wèn)題不一定能留住用戶，但不解決問(wèn)題一定留不住用戶”。
在部分較長(zhǎng)的表單頁(yè)面增加暫存功能，可一定程度的提升使用體驗(yàn)，基于場(chǎng)景的不同，我們對(duì)手動(dòng)存儲(chǔ)、自動(dòng)存儲(chǔ)、詢問(wèn)后存儲(chǔ)三種方式進(jìn)行解析，以確保選擇合理的暫存方式。
1）手動(dòng)存儲(chǔ)
手動(dòng)存儲(chǔ)并非信息提交，指的是用戶在完成表單中途有退出需求時(shí)所提供的暫存方案，其最常見(jiàn)的是頁(yè)面右上角或末尾提供的“草稿箱”功能，存儲(chǔ)后，下次可從草稿箱進(jìn)入接著編輯。多用于B端或工具型應(yīng)用，例如：我們需要發(fā)布投票、調(diào)查問(wèn)卷、活動(dòng)等，可事先設(shè)定好條件規(guī)則暫時(shí)保存至草稿箱，待需要時(shí)從草稿箱編輯或發(fā)布。
2）自動(dòng)存儲(chǔ)
對(duì)于填寫(xiě)內(nèi)容超多的表單頁(yè)面，數(shù)據(jù)自動(dòng)存儲(chǔ)非常有必要，當(dāng)遭遇系統(tǒng)崩潰、網(wǎng)絡(luò)故障、應(yīng)用閃退等突發(fā)事件時(shí)，連手動(dòng)存儲(chǔ)的機(jī)會(huì)都沒(méi)有，或許花費(fèi)了很長(zhǎng)時(shí)間才完成的內(nèi)容又得重復(fù)一遍，真的很讓人崩潰。如線上申請(qǐng)信用卡、貸款等復(fù)雜表單要求填寫(xiě)各種信息，可能需要來(lái)回獲取且分多次完成，這時(shí)加入自動(dòng)存儲(chǔ)功能，體驗(yàn)一定會(huì)更好（筆者每次編寫(xiě)文章就是直接打開(kāi)站酷草稿箱編輯，非常方便）。
3）離開(kāi)時(shí)詢問(wèn)
用戶未將內(nèi)容送出時(shí)返回/離開(kāi)，會(huì)觸發(fā)系統(tǒng)彈窗提示“是否保留內(nèi)容？”，相當(dāng)于手動(dòng)存儲(chǔ)的強(qiáng)提醒。我們?cè)谖⑿排笥讶庉嫼脙?nèi)容、未發(fā)布離開(kāi)時(shí)就有此提示。
在表單頁(yè)面，會(huì)存在多種不同的操作按鈕，如上一步、下一步、存草稿箱、提交等。這里講到的送出是指通過(guò)下一步、保存、提交或確認(rèn)等行為召喚按鈕將表單內(nèi)容提交至系統(tǒng)，并根據(jù)表單頁(yè)內(nèi)容的重要性、將按鈕放在不同的操作位置，最常見(jiàn)的有固定頁(yè)面右上角、固定設(shè)備底部和表單底部三種方式。
1）固定頁(yè)面右上角
這是一種常見(jiàn)的提交形式，多用于內(nèi)容較少的頁(yè)面。當(dāng)表單較為復(fù)雜、且需要認(rèn)真填寫(xiě)時(shí)，為了不影響用戶的注意力，也可能將送出按鈕放在右上角以弱化視覺(jué)吸引力。
2）固定設(shè)備底部
方便用戶隨時(shí)點(diǎn)擊，常用于內(nèi)容重要性不是很高的表單頁(yè)面，可能選填項(xiàng)多于必填項(xiàng)。這種設(shè)計(jì)方式有著較強(qiáng)的視覺(jué)吸引力，能降低用戶的跳出率，促使其快速將表單內(nèi)容送出。
3）表單底部
表單內(nèi)容較長(zhǎng)且重要性較高，需要完成絕大部分的必填項(xiàng)，下拉到最后一個(gè)表單項(xiàng)時(shí)才能看到送出按鈕，能起到一定的引導(dǎo)作用。對(duì)于內(nèi)容較少的表單，按鈕最靠近內(nèi)容，用戶無(wú)需太大的視覺(jué)跳躍就能連貫地操作。
行為召喚按鈕的文案必須清晰簡(jiǎn)潔，能讓用戶快速明確按鈕的功能和意圖，不要讓用戶思考。
能用技術(shù)解決的問(wèn)題就絕不留給用戶，很多時(shí)候，用識(shí)別代替輸入，能提升用戶完成表單的效率及使用體驗(yàn)。例如身份證掃描自動(dòng)識(shí)別錄入個(gè)人信息、銀行卡拍照識(shí)別卡號(hào)、系統(tǒng)自動(dòng)定位等，都能幫用戶省去很多不必要的操作。
善用技術(shù)的力量，把所謂的麻煩留給技術(shù)，得到的回報(bào)并不僅僅是用戶這一次的完成任務(wù)，可能是良性循環(huán)。
我相信，沒(méi)有誰(shuí)會(huì)在無(wú)聊的時(shí)候喜歡填寫(xiě)一些信息提交給產(chǎn)品（除非讓TA領(lǐng)錢(qián)），用戶是為了完成某項(xiàng)任務(wù)才被迫去完成表單的，所以在這個(gè)過(guò)程中適當(dāng)給表單加入微交互，可以讓交互過(guò)程變的更有趣，還能起到引導(dǎo)用戶的作用。
例如：B站用戶登錄輸入密碼時(shí)，頂部的卡通人物會(huì)用雙手捂住眼睛，給予用戶安全的心理暗示。
完成表單的主觀意愿在于用戶時(shí)，一般對(duì)操作結(jié)果會(huì)有一定的心理預(yù)期，那么應(yīng)該在用戶正式填寫(xiě)表單之前告知必備的材料。假如完成一個(gè)表單同時(shí)需要身份證、畢業(yè)證、銀行卡等資料，用戶總是被頻繁中斷、要去尋找這些資料，就會(huì)逐漸失去耐心，導(dǎo)致中途放棄的可能。提前告知用戶可讓其有一定的心理準(zhǔn)備，從而接受程度會(huì)更高。
完成表單的主觀意愿在于產(chǎn)品時(shí)（與上面相反），為了更好的掌控主動(dòng)權(quán)，部分潛在的風(fēng)險(xiǎn)、必備材料讓用戶過(guò)早知道，可能還沒(méi)開(kāi)始就已經(jīng)放棄了。
例如：獲取線上理財(cái)產(chǎn)品額度時(shí)，沒(méi)有誰(shuí)會(huì)事先告訴你，一定要用身份證實(shí)名認(rèn)證，即便這是必須的，產(chǎn)品也會(huì)先讓用戶提供一些重要性不是那么高的證明材料，然后再循序漸進(jìn)的引導(dǎo)至重要證件的信息輸入，當(dāng)表單內(nèi)容即將完成時(shí)，對(duì)后續(xù)的必備材料的接受度就會(huì)逐漸增高，畢竟誰(shuí)都不喜歡在最后一步放棄。
雖然不能過(guò)于明確用戶的付出，但可在用戶開(kāi)始填寫(xiě)表單之前告知可能獲得特權(quán)、獎(jiǎng)勵(lì)等，讓用戶有所期待。基于人性趨利、人心向利的弱點(diǎn)，產(chǎn)品可以通過(guò)福利、獎(jiǎng)品的發(fā)放進(jìn)行利益引用，吸引用戶來(lái)完成以產(chǎn)品為主導(dǎo)的表單需求。
（PS：這就是為什么推薦辦理信用卡會(huì)帶上幾個(gè)拉桿箱、問(wèn)卷調(diào)查會(huì)附帶周邊禮品贈(zèng)送的原因）
PM總是認(rèn)為，每一個(gè)表單項(xiàng)都是必不可少的，殊不知每多一個(gè)選項(xiàng)，就會(huì)增加用戶的時(shí)間成本和操作難度，可能導(dǎo)致用戶流失。經(jīng)過(guò)分析后發(fā)現(xiàn)并不是所有的表單項(xiàng)都必不可少，雖然有時(shí)出于特殊情況，但需要盡量去做到減少表單項(xiàng)。
下圖所示，身份證為必填項(xiàng)，出生日期完全可以使用技術(shù)從身份證號(hào)中提取；手機(jī)號(hào)、郵箱、微信、QQ讓用戶填寫(xiě)不是目的，獲取聯(lián)系方式才是主要的，手機(jī)號(hào)碼（必備）、微信（主流）完全能滿足對(duì)用戶聯(lián)系方式的信息搜集，沒(méi)必要設(shè)計(jì)一個(gè)既復(fù)雜又長(zhǎng)的表單讓用戶全部完成。
將關(guān)聯(lián)性較強(qiáng)的信息組合起來(lái)形成一個(gè)表單項(xiàng)，不僅讓用戶輸入的連貫性更強(qiáng)、有效節(jié)約界面空間資源的占用，還能讓表單更有組織性、減少用戶的認(rèn)知負(fù)荷。例如時(shí)間/日期、區(qū)號(hào)/電話號(hào)碼、省/市/區(qū)...等
如果用戶打開(kāi)表單時(shí)的第一感覺(jué)就是內(nèi)容太多，會(huì)心生退意，隱藏不相關(guān)的信息、刪減無(wú)用的字段，通過(guò)合理控制表單的復(fù)雜性能減少用戶的心理負(fù)擔(dān)，必要的信息在用戶需要時(shí)出現(xiàn)，有效降低用戶完成時(shí)的無(wú)關(guān)干擾。
如果隱藏、刪減了很多內(nèi)容后，表單依舊龐大，切記不要把所有表單項(xiàng)一次性全展示給用戶，過(guò)長(zhǎng)的表單感覺(jué)要花費(fèi)很多時(shí)間才能完成，會(huì)導(dǎo)致用戶不知所措、產(chǎn)生煩躁情緒而放棄填寫(xiě)。這時(shí)就需要將所有的表單項(xiàng)進(jìn)行分組，有必要的話就分頁(yè)展示。
將超長(zhǎng)表單分割多個(gè)小任務(wù)，分頁(yè)呈現(xiàn)并顯示操作進(jìn)度，會(huì)讓用戶對(duì)整個(gè)表單形成清晰的預(yù)期。細(xì)心的設(shè)計(jì)師會(huì)發(fā)現(xiàn)，很多應(yīng)用將登錄頁(yè)的手機(jī)號(hào)/驗(yàn)證碼輸入進(jìn)行了分頁(yè)，主要原因是點(diǎn)擊獲取驗(yàn)證碼之后需等待接收短信，而等待的空檔期會(huì)讓用戶產(chǎn)生效率緩慢的感覺(jué)，分頁(yè)后在跳轉(zhuǎn)頁(yè)面時(shí)能掩蓋小部分的等待時(shí)間，從某種意義上來(lái)講，分頁(yè)操作的流暢度會(huì)“高于”多信息同頁(yè)面等待完成。
將超長(zhǎng)表單分組、分頁(yè)雖能提升體驗(yàn)，但不能過(guò)于細(xì)化、刻意增加操作步驟，否則可能惹惱用戶，遺留下來(lái)的將是一個(gè)全新的問(wèn)題。
接近性原則告訴我們，元素之間的相對(duì)距離會(huì)影響用戶感知他們之間的關(guān)系，相互靠近的物體被認(rèn)為比相互距離較遠(yuǎn)的物體更有關(guān)聯(lián)性。
同一組表單元素應(yīng)該靠的更近，以體現(xiàn)內(nèi)容的關(guān)聯(lián)性，確保界面層級(jí)清晰，用戶不會(huì)產(chǎn)生疑惑。
單個(gè)表單項(xiàng)輸入內(nèi)容較多，需要實(shí)時(shí)提醒剩余可輸入字?jǐn)?shù)，避免用戶一股腦的輸入完成后才發(fā)現(xiàn)內(nèi)容量已翻倍，就得重新組織語(yǔ)言重復(fù)輸入，很不友好。這種情況常出現(xiàn)在備注、介紹等較長(zhǎng)表單項(xiàng)。另外，在自定義注冊(cè)賬號(hào)、設(shè)置密碼的較短表單項(xiàng)中也會(huì)碰到。
重要的表單內(nèi)容，不管內(nèi)容多長(zhǎng)都應(yīng)該完整顯示，例如個(gè)人簡(jiǎn)介、詳細(xì)地址等表單項(xiàng)，如果僅僅因?yàn)閮?nèi)容過(guò)長(zhǎng)就將后面的部分隱藏，可以說(shuō)是非常不友好，用戶甚至無(wú)法對(duì)已輸入的信息進(jìn)行完整的預(yù)覽，不能確認(rèn)信息的對(duì)錯(cuò)。請(qǐng)記住，如果從一開(kāi)始就不想讓用戶輸入太多信息，那就從程序上控制并給予對(duì)應(yīng)的提示。
表單輸入?yún)^(qū)的寬度雖然是固定的，但可以通過(guò)自適應(yīng)調(diào)整高度來(lái)確保信息內(nèi)容的完整性，保持良好的使用體驗(yàn)。
以上是筆者對(duì)表單設(shè)計(jì)的一點(diǎn)經(jīng)驗(yàn)和總結(jié)，希望對(duì)大家有幫助。在設(shè)計(jì)表單時(shí)，需要用結(jié)構(gòu)化的思維去思考分析，視覺(jué)只是整個(gè)體驗(yàn)的一小部分，如果只關(guān)注表面，也很容易將優(yōu)秀的表單樣式復(fù)制出來(lái)，但卻無(wú)法理解背后的設(shè)計(jì)價(jià)值，畢竟設(shè)計(jì)都是先想好為什么，然后才開(kāi)始做。
很多時(shí)候，可能有人會(huì)認(rèn)為一些很小的表單細(xì)節(jié)顯得微不足道，就算能起到作用也只是對(duì)1％、1‰甚至1?的用戶，杯水車(chē)薪。但是有沒(méi)有想過(guò)，一個(gè)應(yīng)用中可優(yōu)化的點(diǎn)可能會(huì)有100個(gè)、1000個(gè)...。雖然有時(shí)候做的不是很好，但只要能比上一次好，那就毫不猶豫的換掉它。
文章來(lái)源：站酷 作者：大漠飛鷹CYSJ
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.lapeinture.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.lapeinture.cn