2020-11-23 ui設(shè)計(jì)分享達(dá)人
當(dāng)你在設(shè)計(jì)表單時(shí),是否對(duì)文本框和表單的規(guī)則有疑惑?本文的一些簡(jiǎn)單的規(guī)則將幫助你完成設(shè)計(jì)用戶希望完成的表單。
上圖是表單的發(fā)展歷程,由石刻上的表單到紙質(zhì)表單再到電腦上輸入的表單。印刷式的表單已存在多年,我們可以從其設(shè)計(jì)中學(xué)到一些技巧。
一、文本框剖析
文本框允許用戶在界面中輸入文本。它們通常顯示在表單和對(duì)話框中。文本字段組件設(shè)計(jì)應(yīng)為交互提供明確的可見(jiàn)性,使字段在布局中好發(fā)現(xiàn),填充且容易理解。
這些是基本文本字段的重要元素:
1.容器-可交互輸入文本的區(qū)域
2.輸入文本-輸入文本字段
3.標(biāo)簽文本(標(biāo)題)-告訴用戶給定表單字段中屬于什么信息
4.占位符文本-是所需信息的描述或示例,在用戶輸入文本后會(huì)被替換
5.幫助提示或驗(yàn)證文本(可選) -提供其他上下文或驗(yàn)證消息
6.頭部圖標(biāo)(可選) -描述文本字段所需的輸入類型
7.尾部圖標(biāo)(可選) —對(duì)輸入的文本的附加控制,例如清除,隱藏/顯示等
二、文本框類型
它們大多數(shù)基于基本文本框,為了更好地展示特定類型的信息而做的演變,例如輸入信用卡號(hào)的文本框。以下是我們創(chuàng)建的整個(gè)UI中最常用的輸入類型的一些示例:
為收集的數(shù)據(jù)提供正確的文本框類型,將幫助用戶以正確的格式輸入信息,并避免錯(cuò)誤,從而使填寫過(guò)程盡可能簡(jiǎn)單。
可以通過(guò)提供視覺(jué)上的變化來(lái)傳達(dá)文本框的狀態(tài)。輸入文本字段可以具有以下?tīng)顟B(tài)之一:未激活,懸停,激活,禁用,校驗(yàn),報(bào)錯(cuò)。大家在做表單設(shè)計(jì)時(shí)最好的做法就是遵循這些狀態(tài)的變化,不要挑戰(zhàn)已經(jīng)形成的用戶思維模型。
通常,文本框的標(biāo)題有三種常用的位置可選擇:頂部,左側(cè)對(duì)齊和右側(cè)對(duì)齊。采用哪種樣式將取決于表單的主要目標(biāo)和表單的大小,組件庫(kù)以及要設(shè)計(jì)的平臺(tái)。它們各自具有一些優(yōu)點(diǎn)和缺點(diǎn)。
我已經(jīng)根據(jù)大型設(shè)計(jì)研究的研究結(jié)果進(jìn)行了匯總,最開(kāi)始的Material design指南中流行的下劃線輸入并不是最佳選擇。有趣的是,同一項(xiàng)研究表明,用戶更喜歡帶有圓角的輸入。
當(dāng)用戶不熟悉所要填寫的內(nèi)容時(shí),這是一個(gè)不錯(cuò)的選擇
優(yōu)點(diǎn):標(biāo)題易于拓展;充分利用垂直空間
缺點(diǎn):標(biāo)題和相應(yīng)的輸入內(nèi)容之間的距離過(guò)長(zhǎng),而且不一致的距離會(huì)增加文本輸入的完成時(shí)間
與左對(duì)齊的標(biāo)題相比,完成時(shí)間快將近兩倍
優(yōu)點(diǎn):文本的標(biāo)題和輸入內(nèi)容的位置更緊密,減少了了眼睛的運(yùn)動(dòng)次數(shù),從而縮短了完成時(shí)間
缺點(diǎn):難以快速掃描表單并了解所需的所有信息
這是在大多數(shù)情況下最快的時(shí)間和最全面的選擇。在移動(dòng)端上效果很好,因?yàn)樗鼈儾恍枰芏嗨娇臻g。
優(yōu)點(diǎn):能夠讓用戶單一眼球移動(dòng)即可了解輸入標(biāo)題和輸入文本,能夠更快的完成
缺點(diǎn):需要更多垂直空間
為表單中的所有文本框都使用相同的輸入長(zhǎng)度會(huì)使它們?cè)谝曈X(jué)展現(xiàn)上令人愉悅,但是卻很難完成填寫。
輸入信息后文本框內(nèi)占位文本的消失,會(huì)對(duì)用戶的短期記憶產(chǎn)生壓力。沒(méi)有標(biāo)題,用戶將無(wú)法在提交表單之前檢查他們提供的所有信息。如果您需要極簡(jiǎn)的表單設(shè)計(jì),則可以使用“Material design”浮動(dòng)標(biāo)題的方法。
表單內(nèi)的占位符文本有時(shí)會(huì)使用戶感到困惑,最好在字段外使用提示文本。
使用自動(dòng)完成功能幫助解決部分查詢功能,在用戶的輸入框中,用戶可以按Enter或“右箭頭鍵”使用它。
使用自動(dòng)聯(lián)想值搜索相關(guān)的關(guān)鍵字和建議使用的內(nèi)容列表。列表以下拉彈層形式顯示多個(gè)建議列表。
預(yù)填充字段并使用智能默認(rèn)值。通常,您可以通過(guò)IP或地理位置輕松檢測(cè)用戶所在的國(guó)家和城市。根據(jù)最常見(jiàn)的方案進(jìn)行分析,我們一般可以定義默認(rèn)情況下應(yīng)選擇的內(nèi)容。
提供上下文信息。為了用戶做出正確的決定或避免錯(cuò)誤,用戶在進(jìn)行轉(zhuǎn)帳時(shí)將需要一些其他信息,例如帳戶余額,如果能夠從上下文中獲取這些信息,就請(qǐng)及時(shí)給出。
“實(shí)時(shí)校驗(yàn)”是在用戶瀏覽表單時(shí)實(shí)時(shí)檢查用戶輸入的有效性,而不是在用戶提交表單時(shí)一次性檢查全部輸入:
驗(yàn)證消息顯示在靠近輸入的區(qū)域,并一起顯示
不要太過(guò)于激進(jìn)的方式提示錯(cuò)誤消息,應(yīng)該告訴用戶如何解決問(wèn)題,而不是責(zé)怪他們
當(dāng)字段在用戶完成輸入之前就被標(biāo)記為無(wú)效時(shí),請(qǐng)避免“提前驗(yàn)證”
考慮使用“正向校驗(yàn)”,可以增加一種愉悅感和成就感
它將消除視覺(jué)和認(rèn)知負(fù)擔(dān),并且看起來(lái)更簡(jiǎn)單。
不要將全名和日期之類的文本分成多個(gè)字段
不要多次詢問(wèn)相同的信息
使用標(biāo)簽和提示復(fù)制以盡可能地縮短它
我們僅展示基本要點(diǎn),通過(guò)逐步顯示信息的方式來(lái)幫助用戶管理信息的復(fù)雜性,在用戶需要的時(shí)候再展示出來(lái)。比如加個(gè)開(kāi)關(guān)按鈕把不重要的信息隱藏。
使用條件邏輯能夠根據(jù)用戶的答案,自動(dòng)顯示或隱藏某些字段,并可以在表單中t跳過(guò)頁(yè)面。這種方法不僅可以減少字段數(shù),而且可以使填寫過(guò)程更具個(gè)性化和對(duì)話性。
簡(jiǎn)化復(fù)雜表單的最簡(jiǎn)單方法之一就是開(kāi)始對(duì)相關(guān)字段進(jìn)行分組。格式塔心理學(xué)中有多種分組原則,可以使項(xiàng)目感覺(jué)相關(guān):接近度,相似度,連續(xù)性,閉合性和連通性。將數(shù)十個(gè)非結(jié)構(gòu)化字段分組為幾個(gè)可管理的集合將顯著提高表單的可用性。
有時(shí)即使刪除了所有不必要的內(nèi)容,某些表單也會(huì)很龐大。將大型任務(wù)分解為一系列較小的任務(wù)看起來(lái)容易得多,并促使用戶將填寫過(guò)程進(jìn)行到最后。
顯示步驟條,以視覺(jué)方式傳達(dá)用戶的進(jìn)度,這可以提高滿意度并激發(fā)用戶繼續(xù)填寫的動(dòng)力
不要過(guò)于細(xì)化表單,太多的步驟將無(wú)濟(jì)于事,只會(huì)惹惱用戶
對(duì)關(guān)鍵信息進(jìn)行匯總以減輕用戶的焦慮,最后需要進(jìn)行復(fù)查
一列布局為用戶創(chuàng)建了一條清晰的完成路徑。使用多列表單布局的后果包括:用戶跳過(guò)他們實(shí)際要輸入數(shù)據(jù)的字段;將數(shù)據(jù)輸入到錯(cuò)誤的字段中;或者只是想暫停一下而可能導(dǎo)致放棄。
如果表單足夠大,可以分成多個(gè)步驟,則應(yīng)該為它分配一個(gè)單獨(dú)的,清晰明確的空間。顯示常規(guī)導(dǎo)航或任何會(huì)破壞表單填寫過(guò)程的鏈接/按鈕,只會(huì)造成混亂。我也建議不要在小型彈出窗口中使用多步驟表單。
Android或iOS提供了幾種不同的鍵盤類型,每種類型的鍵盤都旨在促進(jìn)不同類型的輸入。為了簡(jiǎn)化數(shù)據(jù)輸入,在編輯文本字段時(shí)顯示的鍵盤應(yīng)適合該字段中的內(nèi)容類型。注意鍵盤將出現(xiàn)的位置。為了避免不必要的頁(yè)面滾動(dòng),請(qǐng)將文本字段放在上方區(qū)域。
允許用戶取消隱藏密碼,而不是要求他們輸入兩次密碼,這對(duì)于生成密碼的應(yīng)用程序也將更有效
始終顯示密碼要求,并顯示用戶在滿足填寫條件方面的進(jìn)度。嘗試簡(jiǎn)化對(duì)用戶的要求
使用強(qiáng)度計(jì)量條以鼓勵(lì)用戶創(chuàng)建更強(qiáng)的密碼
文章來(lái)源:站酷 作者:ZZiUP
藍(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