幾何

除按鈕外,文本字段可能是最常用的用戶輸入之一。當您登錄Friendface,或在線訂購Nicholas Cage枕頭,或者將你的銀行信息發送給新的在線筆友時,你很可能會使用文本字段。

在稍后的備忘單中,我們將討論預先確定的文本字段(也稱為下拉列表)以及如何設置表單樣式,但是現在我們將討論舊的簡單文本字段以及我們如何設置樣式。

那么這張備忘單上寫的是什么:

  1. 文本字段剖析
  2. 文本字段結構
  3. 常用文本字段樣式
  4. 圖標
  5. 文本字段狀態
  6. 文本字段標簽和提示文字
  7. 反饋
  8. 自動格式化
  9. 觸碰目標
  10. 輔助功能清單
  11. 文本領域名人堂
  12. 結束語

 

1.文本字段剖析?

文本字段具有多個占位符和片段,其中一些僅根據其所處的狀態(默認、活動、輸入等)才可見。下圖將其全部分解。

 

2.文本字段結構?

有兩種主要的文本字段結構:標準和分隔。

分隔的文本字段傳達所需的信息類型和格式。常見分隔的字段示例是電話號碼、日期和一些代碼。如果你使用標準字段,那么我會建議將它們自動格式化(請參閱第8節)。

標準和分隔的文本字段結構示例。

如上所示,分隔的文本字段更好地傳達了所需的數字格式,并且更方便人們再次檢查他們寫的內容。

你還可以使用所需輸入的長度作為容器的長度來提示用戶輸入到底有多長。

具有兩種不同長度的郵政編碼文本字段的示例

 

3.常用文本字段樣式?

在本節中,我將重點介紹幾種最常用的文本字段變體樣式。

標準文字字段

這些文本字段是我們設計界面時經常使用的。雖然它們可能不是革命性的,但它們完成了用戶最關心的工作。
標準文本字段?

我喜歡這些字段類型的兩個方面是它們看起來像輸入字段,并且標簽始終可見。

 

帶占位符標簽的文本字段

這些文本字段看起來與標準類型非常相似,只是它們使用占位符文本作為標簽。
帶占位符標簽的文本字段?

雖然這是節省空間的一個很好的解決方案,但從可用性來說并不好。典型的例子是,如果你在單擊輸入字段后忘記了應該輸入的內容。

標準文本字段和帶有占位符標簽的文本字段

然而發生在我身上的是,如果你查看上圖中的右側示例,則無法確定姓氏不在字段中第一個名字,而不移除類型來檢查占位符標簽。

專業提示:我比較建議避免使用沒有標簽的輸入字段。但是我對登錄注冊界面并不介意,因為大多數用戶已經習慣了經典的電子郵件和密碼布局。

 

水平對齊標簽

水平文本標簽非常適合節省垂直空間。因此,你將看到它們在軟件應用程序中的使用頻率比在線表格要高。

水平對齊的文本字段

但是,我傾向于避免使用它們,因為它們為用戶創建了Z形的視覺流。與向下閱讀相反,你的眼睛必須在屏幕上曲折移動,這有點乏味。更糟糕的是,在非常長且間隔很小的表單上,有時很難分辨哪個標簽連接到哪個輸入框。
水平和垂直對齊形式的比較?

 

Material Design的行文本字段(舊)和填充文本字段(新)

Material Design不再討論文本字段的“僅行”風格,但它仍然在互聯網上廣泛使用。這是一個光滑而優雅的領域,沒有任何裝飾,使其在當時非常受歡迎。

行文本字段

我不確定為什么它不再出現在他們的模式庫中,但是我記得我前同事說他發現用戶不知道這是輸入字段,因為它看起來不像傳統的輸入或可點擊。我很想知道是否有人遇到過同樣的問題,或者對此有更多了解。
無論原因如何,填充文本字段似乎都已被接管。如果我的猜想是真的,那將是有道理的,因為它們看起來更像是具有填充背景的傳統輸入。
填充的文本字段?

 

Material Design的概述文本字段

Material Design的概述文本字段是對標準文本字段的現代呈現。這種巧妙的設計節省了空間,并使標簽始終可見。
概述的文本字段?

 

4.圖標?

圖標通常在文本字段中使用,但根據圖標本身及其位置的不同,其含義可能有很大不同。以下是表單字段中圖標的最常見情況。

標準圖標用法

你在使用表單時遇到的大多數圖標純粹是為了美觀。這些圖標將指示用戶需要輸入的內容。例如信封將指示電子郵件地址,電話將指示電話號碼等。你在使用表單時遇到的大多數圖標都會出現在那里,純粹是為了美觀。這些圖標將指示用戶需要輸入的內容;例如,信封將指示電子郵件地址,地理PIN將指示地址,電話將指示電話號碼等。

審美圖標用法

 

反饋圖標

反饋圖標可以很好地向用戶指示他們在嘗試填寫表單時成功/失敗。您可能會說:“但是我們只能用顏色來表示成功,”但是,可惜,我的朋友們,有紅綠色盲的人無法分辨出區別。因此,圖標是指示成功或失敗反饋的好方法。反饋圖標很好地向用戶指示他們在填寫表單時成功或失敗。你會說:“我們可以用顏色來表示成功或失敗。”但是紅綠色盲的人是無法區分的。因此,圖標是表示成功或失敗反饋的好方法。
反饋圖標

 

清除圖標

在一些輸入字段中出現清除圖標,并允許用戶重設字段。雖然這是否真的需要,但它在觸摸設備上非常有幫助。
清除圖標?

 

語音輸入
該圖標向用戶指示他們可以使用語音輸入字符。雖然我不喜歡用語言通話,但是此功能對于無法打字或視力障礙的人非常有用。

語音輸入圖標?

 

顯示/隱藏圖標

對于密碼字段,隱藏圖標有助于避免窺視,但你希望檢查你所寫具體信息,因此“顯示/隱藏”圖標按鈕非常有用。默認情況下,保持密碼隱藏。

顯示/隱藏圖標

 

5.文本字段狀態?

文本字段必須更改其狀態,以便用戶知道該怎么做。

默認和禁用

默認狀態是未單擊輸入字段狀態。當業務或系統要求不能進行交互操作時,可以禁用該輸入字段。

默認和禁用的文本字段?

 

懸停

與按鈕一樣,文本字段應該向用戶表明它們是交互式的或可單擊的。大多數字段在懸停時會改變顏色或增加其線寬。如果將鼠標懸停在它上面,它應該恢復為原始狀態。

觸摸設備沒有懸停狀態。

焦點

焦點狀態是當你單擊表單字段時,表示已選中它,你可以開始輸入。我們需要指示此狀態,以便用戶知道他們可以開始輸入,信息將顯示在該框中。

點狀態

我很少遇到的模式是焦點占位符。此處可能有一個不帶占位符的標簽,但是在焦點上,您可以看到一個占位符,作為提示。不建議這樣做,因為在我看來這還不是很“明顯”,但值得考慮是否有必要出現。

點占位符

 

6.文本字段標簽和提示文本?

在本節中,我們將只看第一節中描述的所有不同文本和標簽元素。

標簽

具有常量標簽的文本字段是最容易訪問的,因為標簽使用戶可以更輕松地再次檢查他們添加的信息是否正確。

文本字段標簽

占位符標簽

我們也可以將占位符用作為標簽。我不太建議使用它們,因為用戶很難再次檢查到是否在正確的框中輸入了正確的信息。

文本字段占位符標簽

標簽和提示文字
占位符文本為用戶提供了更多的上下文,方便用戶知道需要輸入什么信息。有時似乎有點多余,但可以幫助提示具體的寫法。

標簽和提示文字組合

輔助文字
輔助文字有助于使用戶更好地了解他們需要填寫的信息類型。這些額外的信息通常由你的業務規則決定,并且可能非常特定于你的系統和產品需求。

具有輔助文字的文本字段

工具提示圖標
隨著隱私法的更新,向你的用戶透露他們的信息將如何被使用是至關重要的。雖然有幾種方法可以做到這一點,但工具提示可以使界面保持整潔。

工具提示不僅僅需要保護隱私;它們還可以為用戶提供更多關于需要填寫內容的信息(密碼長度、日期格式等)。

帶工具提示的文本字段

在選擇工具提示中應包含的內容以及不應該包含的內容時,問問自己“不知道這些信息是否會使表單更難填寫?”? 如果答案為“否”,則將其作為工具提示,否則請考慮使用輔助文字。

 

最小字符限制

對于最小字符限制沒有設置規則,除非用戶什么都沒有填寫內容。

最小字符文本字段

就我個人而言,我傾向于贊美用戶,當他們有足夠多的表達時給予他們微妙的積極反饋,而不是在他們開始時給他們失敗的反饋。

 

最大字符限制

顧名思義,最大字符限制與最小字符限制相反。因此,為了確保有足夠的字符,在這種模式下,我們必須讓用戶知道他們已經寫得太多了。

最大字符文本字段

我最喜歡的最大字符限制文本字段是Twitter。想看看我在說什么,向下滾動到名人堂。

發布后的提示,有時’28 / 100’中的/有點難以理解,因此最好使用’剩下的72個字符’模式。方便用戶更好的理解。

備用最大字符文本字段

 

7.反饋?

反饋狀態是判斷用戶他們輸入的文本是對還是錯,如果錯誤時及時告知用戶。例如,如果使用了用戶名或密碼不正確,或者您輸入了有效的生日等。提供反饋的方法有兩種:兩者都有用,具體取決于具體情況。方法1:告訴用戶他們在填寫表格時犯了錯誤。方法2:當用戶提交表單時告訴用戶出錯。就我們目前的目的而言,結果看起來都是一樣的。?

失敗反饋

失敗反饋可用于突出顯示錯誤,例如空的必需字段、錯誤的密碼、無效的電子郵件(例如,當電子郵件不包含“@”時)、錯誤的電子郵件(當電子郵件不在數據庫中時)等。

失敗反饋

樣式提示失敗反饋:利用反饋文本讓用戶知道為什么存在問題。確保反饋文本清晰WCAG標準(AAA標準)。我建議使用圖標來指示哪些字段不正確,因為色盲人可能無法區分紅色。

 

正面反饋

正面反饋不如負面反饋那么頻繁。但是我們希望大多數用戶能夠正確填寫他們的詳細信息,出現錯誤應該只是個例外。所以你可以考慮給表單添加正向反饋,讓用戶知道這條信息是正確的,那么就會更容易完成其余部分。


成功/積極反饋

設計正面反饋的提示:使用圖標時,因為色盲人士可能無法區分綠色。你應在填寫表格時看到正面反饋,而不是在提交時看到。

 

無效的電子郵件地址反饋(注冊)

當用戶注冊時,系統必須確保電子郵件是有效的。我們希望用戶輸入正確的郵箱地址,這樣我們就可以聯系他們,也方便他們以后可以登錄。這對于任何注冊過程都是至關重要的。

 

非可選:檢查電子郵件是否遵循模式

每個電子郵件地址都遵循一種模式,即“本地部分”后跟@符號,然后是“域”。檢查輸入字段是否可以運行以確保模式正確。

無效的電子郵件地址反饋

可選:使用確認字段重新檢查電子郵件地址
雖然我們并不經常看到這種情況,但有些表單要求你確認電子郵件地址,以免輸入錯誤。

電子郵件地址與反饋不匹配

畢竟,如果用戶在注冊表單中輸入電子郵件時出錯,則很難再重置它。

 

可選:發送驗證電子郵件以確認地址
這種確認方法正變得越來越流行,原因很明顯:你可以知道地址是否真實,因為用戶能夠回復你發送給他們的電子郵件。以下是電子郵件確認驗證的標準流程。用戶注冊并輸入他們的電子郵件地址。他們看到的下一頁告訴他們遵循通過電子郵件發送給他們的鏈接。他們打開他們的電子郵件帳戶并打開電子郵件。他們按照電子郵件中的鏈接打開瀏覽器頁面,并提醒他們電子郵件已通過驗證。他們現在可以繼續訪問該網站的其余部分。

 

錯誤的電子郵件地址反饋(登錄)

如果用戶輸入了錯誤的電子郵件地址,或者它不在數據庫中,則你的系統必須讓他們知道。輸入錯誤的電子郵件沒有懲罰(例如嘗試次數有限)。在某些用戶輸入了錯誤的電子郵件地址,你可能會建議他們重新注冊該地址。
錯誤的電子郵件地址反饋?

 

用戶名反饋不可用(注冊)

創建用戶名是最糟糕的,因為有人總是先得到它,而所有很酷的名字都已經占用了。我想使用一個叫“croft”的用戶名但失敗了。因此,你嘗試各種隨機組合,直到其中一種可用為止。(croft,lcroft,laracroft,1aracroft,14racroft,14racr0ft-成功!等等,為什么我叫14racr0ft?)

注冊用戶名反饋

 

錯誤的用戶名反饋(登錄)

用戶必須在此處輸入其用戶名才能登錄其帳戶。如果用戶忘記了用戶名,建議他們使用電子郵件地址進行檢索。

用戶名反饋錯誤

 

弱密碼反饋(注冊)

如果用戶提供的密碼不夠強,則界面必須告訴他們。它還必須告訴他們為什么它不夠強大以及如何使其更強大。

根據您的行業或業務要求,您可能具有特定的密碼規則。例如,由于銀行所包含信息的重要性,銀行應具有比在線論壇更強的密碼。但是,標準密碼格式為:8個字符長,至少有一個大寫字母、一個小寫字母、一個特殊字符和一個數字。如果太過于復雜不容易記憶,你的用戶會感到煩惱。畢竟,每個人都只使用一個密碼對吧?

向用戶顯示如何改進密碼的反饋

如果你的用戶正在努力改善其密碼,你應該非常清楚地告訴他們如何加強。有些在幫助文本中這樣做,有些在工具提示中這樣做-不管解決方案如何,都要讓用戶知道。
密碼強度指示器

有些網站向用戶表明密碼的強弱取決于密碼的復雜性。如果想要一個很酷的方法,可以在下面的名人堂部分查看Dropbox的解決方案。

允許用戶檢查其密碼的文本字段

當看到密碼被隱藏時你的用戶可能還想確認他們的密碼。一種方法是添加顯示/隱藏符號。另一種方法是讓他們寫兩次密碼。盡管確保密碼正確很重要,我個人認為更重要的是要確保電子郵件地址是正確的,因為你始終可以重置密碼,而對于錯誤的電子郵件地址則無法做任何事情。

錯誤的密碼反饋(登錄)

密碼字段通常將輸入的文本顯示為非字母數字符號。

登錄密碼只應在用戶單擊“提交”后顯示它是錯誤的。你不想在此之前告訴某人密碼錯誤,因為這樣只會使壞人更容易獲得密碼。

密碼輸入錯誤的反饋

你可能希望限制用戶可以輸入的錯誤嘗試次數,尤其是在信息敏感的網站上。

?

8.自動格式化?

自動格式化文本框可幫助用戶輸入正確的值,并通過正確分組字符來幫助他們檢查輸入的內容是否正確。

貨幣

根據你的貨幣和國家/地區,你可能會以不同的方式寫出長數字(1 000.00與1,000.00與1000,00),因此創建標準化長數字格式的輸入很有用-特別是在處理貨幣時。

動格式化貨幣的文本字段

這些輸入字段還應阻止你使用字母和標點符號。

 

電話號碼

根據你來自何處,你可能會以不同的方式設置電話號碼的格式—即使你的所有用戶都來自同一個國家,用戶也可能不確定是否要添加國際或區號—因此使用自動格式的電話號碼確實有幫助。

動格式化電話號碼的文本字段

對于電話號碼之類的內容,你也可以使用單獨的字段來強制用戶以正確的格式輸入該號碼。

 

日期

不同的國家以不同的方式寫日期(DD / MM / YYYY與MM / DD / YYYY與YYYY / MM / DD),因此在下面的示例中,將模式寫入焦點占位符文本確實有幫助。

有自動格式設置和焦點提示文本的文本字段

 

文字屏蔽

文本屏蔽與自動格式化類似,它不僅能正確格式化值,還能指示需要輸入的內容。

帶有文本遮罩的字段

根據你的需要,你可能需要不同的自動格式化的文本,如信用卡號、許可證代碼等。有這些自動格式化讓這一切變的更容易。

 

9.觸摸目標?

觸摸屏的輸入字段大小(點擊)

一個MIT觸摸實驗室研究表明,用于觸摸屏的手指的部分是8-10mm的,所以最低目標尺寸需要10mm以上,如果你想避免用戶操作失誤。Material Design建議觸摸目標應為48dp x 48dp,并且在不同接觸點之間間距應為8dp。雖然我找不到有關iOS設計系統目標尺寸的任何文檔,但一般的理解是它的最小目標尺寸為44 x 44pt。

 

桌面的輸入字段大小(單擊)

因為桌面上的光標比觸摸屏上的手指小,因此可以使觸摸目標小很多。但是你想嗎?

 

10.輔助功能清單?

你做到了!你已經完成了文本字段的設計,現在是時候將其交付給開發人員了。但是等等!…你是否已檢查文本字段是否可以首先訪問?

  • 你的文本字段是否符合WCAG AAA色彩對比標準?有些設計師更喜歡使用AA標準,但對此我卻過于偏執。我現在最喜歡的對比度檢查器是webaim。
  • 觸摸屏的文本字段(包括標簽)是否大于44像素?我喜歡將標簽作為觸摸區域的一部分,因為如果你點擊標簽,則容器仍應切換到焦點狀態。
  • 標簽始終可見嗎?
  • 相關字段是否有有用的反饋文本(“錯誤”與“您的電子郵件格式不正確”)?
  • 如果你對開發感興趣,那么最好了解屏幕閱讀器的工作原理。在這里了解更多。(https://webaim.org/techniques/forms/controls)

?

11.文字領域的名人堂

?推特

我喜歡這個最大字符限制字段。它以圖形方式顯示你與極限的接近程度-然后以遞減計數直到達到極限-然后突出顯示超過的字符數。

Twitter的最大字符數限制輸入

 

Material Design的浮動標簽
Material Design的浮動標簽看起來非常好。它不僅可以始終保留標簽,而且還可以播放出如此精美的動畫。

帶有浮動標簽的Material Design的輸入字段

Dropbox
Dropbox的“創建密碼”字段為用戶提供了密碼安全性的指示器。而且,作為這個故事的親愛的讀者,他們還對它進行了組織,以便色盲的人仍然可以閱讀它。我也喜歡他們如何為用戶提供一個不太安全的密碼(如果他們想要的話)的機會。這樣簡單而人性化的解決方案。
Dropbox的密碼字段

 

12.結束語?

謝謝你看這個-我知道它很長。但是希望對你有幫助!

 

原文地址:水手哥學設計(公眾號)
作者:水手哥

轉載請注明:學UI網 » UI備忘單:文本字段

登錄收藏
 
你可能喜歡的:
關于基金申購流程的一些思考關于基金申購流程的一些思考
產品體驗日記 | 發現優秀的設計-03期產品體驗日記 | 發現優秀的設計-03期
為什么要進行競品分析以及關鍵準則為什么要進行競品分析以及關鍵準則
設計沉思錄|美事升級,不止于改版設計沉思錄|美事升級,不止于改版
這篇“點9”文,欠大家兩年了!這篇“點9”文,欠大家兩年了!
案例:如何優雅地用卡片分類法,搞定煩人的用戶需求???案例:如何優雅地用卡片分類法,搞定煩人的用戶需求???
抖音VS快手,產品模式是如何影響交互模式的?抖音VS快手,產品模式是如何影響交互模式的?
如何更好的使用彈窗?如何更好的使用彈窗?
一款APP的交互文檔從撰寫到交付③一款APP的交互文檔從撰寫到交付③
關于評分功能的一些思考關于評分功能的一些思考
?
陕西快乐10分 手机挂机赚钱可信吗 开心彩票网址 直播间咋么赚钱 做视频很赚钱么 梦幻双开怎么赚钱 律师和高中老师哪个好赚钱 89彩票群 犹太人茶油赚钱 v博娱乐安卓 农村养值什么最赚钱 金彩彩票首页 王菲2016演唱会赚钱吗 天天捕鱼欢乐颂 类似粒赚的赚钱软件 单机捕鱼达人手机版 通过 赚钱吗