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