文本輸入框設計好看的秘訣

文本輸入框設計好看的秘訣

文本輸入框幾乎是每個UI設計師都必須用到的設計控制項,它們無處不在,對於用戶體驗的影響無疑是巨大的。雖然看起來很簡單,但是一個設計成熟的文本輸入框,其實是要滿足許多「潛規則」的,這些規則你是否都了解?

文本輸入框幾乎是每個UI設計師都必須用到的設計控制項,它們無處不在,對於用戶體驗的影響無疑是巨大的。
雖然看起來很簡單,但是一個設計成熟的文本輸入框,其實是要滿足許多「潛規則」的,這些規則你是否都了解?

當新用戶開始使用一款APP或者入駐某個網站的時候,至少最基本的訊息都需要通過文本輸入來完成。

產品經理、設計師和開發者也都明白,這才是最佳的解決方案。

今天的文章,我們專注於文本的欄位輸入應當注意的一些核心因素。

這些大都是最常見的規則,同時每一個規則都有一些值得注意的例外情況。

文本輸入框

文本輸入框是UI設計中最常見的控制項,在絕大多數的場合用來給用戶輸入少量的文字。

無論你使用的是哪個APP,大都需要你借助文本輸入框來獲取少量的個人訊息(用戶名等)。
當你想要搜索某些訊息的時候,打開Google,至少也要通過搜索框輸入來完成最起碼的搜索請求。

1-Zgup158uMB2rm8JwqNhunw

清晰

清晰的文本標籤

用戶想要知道他們輸入的欄位到底是什麼樣的數據,自然是需要文本標籤清晰的告訴他們。

當然,有時候用戶也是藉助欄位相關的圖標來了解輸入框對應欄位含義的(比如用戶通常看到放大鏡的圖標會意識到這是一個搜索框)。
但是在絕大多數的情況下,文本的標籤是必須有的。

0-40baQ8CvHtzMFM1C

Apple iOS 中的搜索框同時放置了標籤和放大鏡圖標

清晰的標籤讓用戶更加自信,正確理解,並且正確地操作。

短文本標籤

標籤並非幫助性的說明,所以你應該使用的是簡短(幾個字)的描述性的短語作為標籤,以便用戶能夠快速掃視。

如果有額外的訊息,通過上下文或者額外的幫助性的說明來讓用戶有所了解,而不是超長的標籤。

1-_ml9VXplr_j7ZGFDtUbaWg

之前Amazon 的註冊頁面就因為超長的標籤文本導致註冊過程緩慢。目前的版本強多了。

合理的輸入框尺寸

如果你的輸入框尺寸是按照輸入內容的長短、尺寸來設計的話,會更加適宜用戶閱讀和輸入。

1-ZRRH7Tq4BClBucqf4ElpBA

輸入框焦點

對於輸入框,當用戶選中準備輸入的時候,應當提供清晰的視覺提示,比如外發光的輸入框,或者閃動的光標,都行。

1-ty3cHmAgtH7vs7v-dEceLQ

輸入提示

數據的呈現方式多種多樣。所以,當你在設計輸入框的時候,應當與用戶輸入訊息的類型、格式相互匹配。不過要做到完全的對應並不容易。

舉個例子,電話號碼的輸入就存在多種不同的方式,比如我們常見的「+86」,而更多的情況下大家可能會直接輸入一串11位的手機號,座機號碼的情況則更加複雜,有的人習慣加上區號,而又的人則不會。面對這種複雜的情況,你可以通過設計輸入框,加入輸入提示來「格式化」輸入內容。還是以電話號碼的輸入為例:

這個輸入框的電話號碼格式已經固化了,讓用戶可以清楚的知道應該輸入哪種類型,多少位。

1-odO4xFRAnRhb9jqVc3jbYw

這個輸入框中加入了說明性質的文本佔位符,清晰的說明了應當輸入怎樣的號碼。它的缺陷在於用戶輸入的時候,佔位符會消失。

1-KC99ycFMLp22HKmUDf2T9w

幫助訊息

幫助訊息(或相關文字)應當出現在需要的地方,比如表單中用文字說明為何需要填寫信用卡號,以及生日日期填寫之後的福利,又或者「服務條款」鏈接的存在。它們適時地出現,幫助用戶解釋了一些令人困惑的問題。一般說來,這類幫助訊息最好不要超過100字。

1-hdvNOe-jCw6TjUf7mvrc1Q

僅限移動端:鍵盤類型與文本輸入的匹配

在APP上用戶常常要輸入不同類型的文本,當輸入框需要輸入數字的時候,結果彈出的是全鍵盤自然不方便,而需要輸入文本的時候則出現數字鍵盤就更加不合適了。

1-vLI1f7vekckEEqQgnySJ2Q

可訪問性

目標:確保不同狀況的用戶都能無障礙地、輕鬆瀏覽和填寫輸入框

避免使用大寫文本標籤

永遠不要使用全部是大寫字母的文本標籤,這樣的標籤通常都很難快速瀏覽,因為字母的大小高度都是一致的,對於非英語言國家的用戶尤其麻煩。

1-1US1eP1h7gFl-QFPTWjC0A

1-qTE2uuAbj2z7yqK2XNBVxw

字體尺寸

在設置字體尺寸的時候,應該確保字體足夠大,盡量讓它們清晰可辨。

網頁上設置正文字體的時候,最安全的選擇是16px,當然,大小的選取主要還是取決於實際的頁面設計,如果識別性問題,應當適當調大一些。

1-HEpft_aPpJOljFQoO7uQlQ

標籤顏色

標籤的色彩應當依從於你的APP或者網頁的整體配色方案,並且確保對比度(不能太暗,也別太耀眼)。

W3C 在正文文本對比度上有如下的要求:

·較小的文本應當確保至少和背景之間有4.5:1的對比度比率
·較大的文本(14pt粗體,18pt常規)應當確保和背景之間的對比度超過3:1

1-vegcinCax1j1pbsyVeV4_w

提供舒適的點擊區域

無論你所設計的是網頁還是APP,都應當考慮用戶在手機上點擊螢幕時的體驗。

你需要確保用戶點擊輸入框的時候的觸發區域足夠寬鬆舒適,而不是很難點擊。
一般說來,拇指的觸發區域應當控制在 45~57px之間,但是在移動端上,控制項看起來太大會讓人覺得不舒服,所以你的文本框高度應該設計在32~40px之間,這樣看起來足夠友好,又不會太大。

1-a1DUx27CoT1XaMXCHh32CQ

僅限桌面端:對鍵盤輸入友好的輸入框

這是一個歷史悠久的可用性設計:用戶應當能夠僅使用鍵盤就完成全部的內容輸入的工作。許多深度用戶有這樣的需求,他們習慣於使用Tab 按鍵來切換不同的輸入框和控制項,無需離開鍵盤就可以填完表單。你可以在W3C的文檔中找到相應的說明。

1-DC0Xe1Ay3liYV3eDa-Ggqg

用戶花費

目標:盡量減少用戶輸入

智能預設

填寫表單本身就是一件苦差事,絕大多數時候它都不會變得令人愉悅。因此,許多需要填寫、選取的表單最好有預設的初始值或者內容填充在其中,這樣可以讓用戶用起來更加方便——許多內容和參數其實你可以通過其他的方式計算並獲得(比如你可以根據用戶的地理位置來幫他們填寫郵政編碼),也可以通過之前在其他地方輸入的數據來填補內容。

比如用戶的IP地址在很多時候就可以預先填寫。Whatsapp 則調用系統服務,幫你將地區編碼預先填寫在手機號碼之前,讓你的填寫體驗更加舒適。

0-AZ2lgULhphJNSyaa

自動完成和自動建議

自動完成是以下拉框的形式根據你輸入的內容進行實時補完的功能。這樣可以幫助用戶更準確、高效地填寫訊息。對於輸入困難、拼寫困難的用戶尤其有幫助,尤其是當這種語言並非他們母語的時候。

自動建議則會以列表的形式呈現相關的關鍵字或者短語,在匹配度上可能不會太多理想。自動完成更多的是在於補完你填寫的內容,而自動建議則是為你推薦可能相關的短語、關鍵詞。

兩種結合起來可以讓用戶輸入的體驗更加優秀,Google搜索就是這麼做的。

1-Q-Sy8-Cr6EcG5QsXrhdA5A


 

【想讓你的網站其他人優秀嗎?這些設計趨勢一個都不要錯過!】

1.9種讓你的網頁很專業
2.預測2018網頁設計趨勢
3.2018年手機應用UI設計趨勢
4.這3個設計趨勢是網頁設計師的最愛


 

給你最好的網頁設計Gogoshark

Category

GogoShark 給你最好的網頁設計

無論您的事業才剛起步、漸上軌道,或計劃向大中華區拓展市場,GogoShark 團隊將提供全方位的服務,為您量身打造數位品牌形象。