2021-3-24 ui設(shè)計(jì)分享達(dá)人
表單已經(jīng)存在了很長(zhǎng)一段時(shí)間，自誕生以來(lái)極大地簡(jiǎn)化了起草申訴和各種法律訴狀的任務(wù)。隨著信息與處理技術(shù)的進(jìn)步，收集數(shù)據(jù)的手段也在不斷發(fā)展，而印刷表單已存在多年，我們可以從其設(shè)計(jì)中學(xué)到一些技巧。
用戶可以在文本欄內(nèi)輸入信息，它們通常以表單和對(duì)話框的形式出現(xiàn)。文本字段組件的設(shè)計(jì)應(yīng)為交互提供清晰的功能支持，使字段在布局中易識(shí)別、易填充和可訪問(wèn)。
以下是組成文本欄的關(guān)鍵要素：
容器：可交互的輸入?yún)^(qū)域；
輸入框：在文本欄中輸入文字；
提示：告訴用戶給出的表單字段是什么信息；
占位符：是所需信息的描述或示例，用戶輸入正確信息內(nèi)容后被替換；
幫助程序或驗(yàn)證文本（可選）：?jiǎn)为?dú)出現(xiàn)或以驗(yàn)證消息的形式出現(xiàn)；
頭部圖標(biāo)（可選）：描述文本字段的輸入類型；
尾部圖標(biāo)（可選）：輸入文本的附加控件，例如清除，隱藏/顯示等。
它們大多數(shù)都是相對(duì)基礎(chǔ)的文本字段類型，被修改成了處理特定類型的信息，例如信用卡號(hào)。以下是我創(chuàng)建的UI中最常用的一些輸入類型示例：
為收集的數(shù)據(jù)提供幫助規(guī)避錯(cuò)誤，讓用戶可以正確的輸入信息，從而使過(guò)程簡(jiǎn)單高效。
文本欄的狀態(tài)可以通過(guò)視覺(jué)提示來(lái)實(shí)現(xiàn)，輸入信息時(shí)的狀態(tài)有以下幾種：未激活、懸停、禁用、激活，驗(yàn)證、錯(cuò)誤。所有狀態(tài)應(yīng)清楚地被區(qū)分開(kāi)，并在整個(gè)表單和應(yīng)用中保持一致，簡(jiǎn)潔明了，不要誤導(dǎo)用戶。
通常標(biāo)簽定位有三種：頂部、左側(cè)和右側(cè)對(duì)齊。最適合的樣式將取決于表單的大小、主要目標(biāo)、組件庫(kù)和要為其設(shè)計(jì)的平臺(tái)，但它們都有各自優(yōu)點(diǎn)和缺點(diǎn)。
谷歌的“材料設(shè)計(jì)”指南中，普遍使用的下劃線輸入并不是最佳選擇。有趣的是，在一項(xiàng)研究結(jié)果中發(fā)現(xiàn)用戶更喜歡帶圓角的輸入框。
當(dāng)用戶不熟悉所請(qǐng)求的數(shù)據(jù)時(shí)，這是一個(gè)不錯(cuò)的選擇。
優(yōu)點(diǎn)：易于標(biāo)簽伸縮，充分利用垂直空間；
缺點(diǎn)：標(biāo)簽與對(duì)應(yīng)的文本欄，距離過(guò)元，增加用戶閱讀的時(shí)間成本。
與左對(duì)齊標(biāo)簽相比，完成時(shí)間快了將近兩倍。
優(yōu)點(diǎn)：標(biāo)簽和輸入欄靠近，限制了眼睛移動(dòng)的次數(shù)，從而縮短了完成時(shí)間；
缺點(diǎn)：難以快速瀏覽表單并理解所需的所有信息。
在移動(dòng)設(shè)備上效果很好，因?yàn)樗鼈儾恍枰嗟乃娇臻g。
優(yōu)點(diǎn)：用戶可以快讀瀏覽輸入標(biāo)簽和輸入文本；
缺點(diǎn)：需要更多垂直空間。
表單中的所有文本欄，若設(shè)置相同長(zhǎng)度確實(shí)會(huì)顯得非常美觀，但實(shí)際在操作上，卻很難完成。
占位符文本消失會(huì)給用戶制造緊張感，而去掉標(biāo)簽，用戶則無(wú)法在提交表單前檢查他們提供的信息。如果在設(shè)計(jì)時(shí)需要極簡(jiǎn)的表單，可以使用“材料設(shè)計(jì)”的浮動(dòng)標(biāo)簽法。表單內(nèi)的占位符文本還會(huì)使用戶感到困惑，最好在字段外使用提示文本。
使用自動(dòng)完成功能，填寫時(shí)會(huì)幫助填寫及查詢。一般在輸入時(shí)可以看到，對(duì)查詢內(nèi)容按Enter或右箭頭鍵就完成了填寫；
使用Auto-Suggest搜索關(guān)關(guān)鍵字和短語(yǔ)時(shí)，下拉列表會(huì)顯示多個(gè)建議；
預(yù)填充字段會(huì)經(jīng)常使用智能默認(rèn)值，比如通過(guò)IP或地理位置，就能檢測(cè)獲取到用戶所在的國(guó)家和城市，或是根據(jù)常見(jiàn)的場(chǎng)景，自己定義默認(rèn)情況下的內(nèi)容。需要注意的是，電子商務(wù)是一個(gè)例外，請(qǐng)勿預(yù)先設(shè)置與購(gòu)買相關(guān)的任何偏好，比如尺寸或顏色；
還有一種應(yīng)用情境，自動(dòng)完成功能可以幫助用戶做出正確決定或避免錯(cuò)誤，比如用戶轉(zhuǎn)帳時(shí)看到賬戶余額等，請(qǐng)一定要提供該信息。
指的是用戶輸入信息后，可以實(shí)時(shí)檢查輸入內(nèi)容的有效性，而不是等用戶提交表單時(shí)一次性檢查。正確應(yīng)用，降低信息出錯(cuò)率：
在輸入內(nèi)容的文字欄下方顯示驗(yàn)證消息；
不要突然蹦出嚴(yán)重警告，填寫的消息錯(cuò)誤時(shí)，應(yīng)告訴用戶如何解決，而非責(zé)怪。
消除視覺(jué)及認(rèn)知負(fù)擔(dān)，使界面看起來(lái)更加簡(jiǎn)潔。
不要將全名和日期之類的文本分成多個(gè)字段；
不要多次詢問(wèn)相同的信息。
逐步公開(kāi)，提供必要提示即可，幫助用戶管理復(fù)雜信息。
根據(jù)用戶回答，條件邏輯允許在表單中自動(dòng)顯示、隱藏字段和跳過(guò)頁(yè)面。這種方法不僅可以減少字段數(shù)，而且可以使填寫過(guò)程更像對(duì)話，也更具個(gè)性化。
簡(jiǎn)化表單的最有效方法，其中之一則是為相關(guān)字段進(jìn)行分組。格式塔心理學(xué)里有許多種分組原則，使項(xiàng)目有關(guān)聯(lián)性：接近性、相似性，連續(xù)性、閉合性和連通性。在界面中，如果將數(shù)十個(gè)非結(jié)構(gòu)化字段分組為幾個(gè)可管理的集合，將顯著提高表單的可用性。
一欄布局能為用戶創(chuàng)建一個(gè)清晰的完成路徑；使用多列表單布局，會(huì)導(dǎo)致用戶跳過(guò)實(shí)際需要輸入的字段，將數(shù)據(jù)填寫到其他位置，這會(huì)迫使用戶停止甚至放棄填寫。
有時(shí)，即使刪除了所有不必要的內(nèi)容后，某些表單還是很龐大。將大型任務(wù)分解為一系列的小任務(wù)反倒容易得多，也能激勵(lì)用戶堅(jiān)持到最后。
顯示步驟，直觀地告訴用戶實(shí)際進(jìn)度，這能提高用戶滿意度并激勵(lì)他們繼續(xù)前進(jìn)；
不要細(xì)化表單，太多的步驟非常啰嗦，只會(huì)惹惱用戶；
對(duì)關(guān)鍵信息進(jìn)行總結(jié)以減輕用戶焦慮，在最后設(shè)置復(fù)查步驟，幫助用戶檢查。
如果表單足夠大，可以分成多個(gè)步驟，那么就應(yīng)該有一個(gè)單獨(dú)的、重點(diǎn)明確的界面來(lái)專門處理它。在導(dǎo)航中用其他鏈接會(huì)破壞正常流程，導(dǎo)致邏輯混亂，而且在小型彈出窗口中也不建議使用多步驟表單。
Android或iOS提供了幾種不同的鍵盤類型，每種類型的鍵盤都旨在方便不同類型的輸入。為了簡(jiǎn)化數(shù)據(jù)輸入，在編輯文本字段時(shí)顯示的鍵盤應(yīng)適合該字段中的內(nèi)容類型，同時(shí)也要注意鍵盤出現(xiàn)的位置。將文本字段放在上方區(qū)域，避免滾動(dòng)展示。
允許密碼取消隱藏來(lái)代替多次密碼輸入，這對(duì)于生成密碼的應(yīng)用程序也更有效；
隨時(shí)顯示密碼要求，并顯示用戶滿足了哪些條件，方便查看進(jìn)度；
使用強(qiáng)度表鼓勵(lì)用戶創(chuàng)建更強(qiáng)更安全的密碼。
文章來(lái)源：站酷 作者：UX辭典
藍(lán)藍(lán)設(shè)計(jì)( m.sillybuy.com )是一家專注而深入的界面設(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://m.sillybuy.com