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í)別、易填充和可訪問。
以下是組成文本欄的關(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ò)視覺提示來(lái)實(shí)現(xiàn),輸入信息時(shí)的狀態(tài)有以下幾種:未激活、懸停、禁用、激活,驗(yàn)證、錯(cuò)誤。所有狀態(tài)應(yīng)清楚地被區(qū)分開,并在整個(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ù)常見的場(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é)怪。
消除視覺及認(rèn)知負(fù)擔(dān),使界面看起來(lái)更加簡(jiǎn)潔。
不要將全名和日期之類的文本分成多個(gè)字段;
不要多次詢問相同的信息。
逐步公開,提供必要提示即可,幫助用戶管理復(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ì)( www.88yangsc.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://www.88yangsc.com