火星網校
文本輸入框設計你真的懂得么?
發(fā)布時間：2024-03-03 10:13:04 瀏覽量：152次
編者按：文本輸入框幾乎是每個UI設計師都必須用到的設計控件，它們無處不在，對于用戶體驗的影響無疑是巨大的。雖然看起來很簡單，但是一個設計成熟的文本輸入框，其實是要滿足許多“潛規(guī)則”的，這些規(guī)則你是否都了解？
當新用戶開始使用一款APP或者入駐某個網站的時候，至少最基本的信息都需要通過文本輸入來完成。產品經理、設計師和開發(fā)者也都明白，這才是最佳的解決方案。
今天的文章，我們專注于文本的字段輸入應當注意的一些核心因素。這些大都是最常見的規(guī)則，同時每一個規(guī)則都有一些值得注意的例外情況。
文本輸入框
文本輸入框是UI設計中最常見的控件，在絕大多數的場合用來給用戶輸入少量的文字。無論你使用的是哪個APP，大都需要你借助文本輸入框來獲取少量的個人信息（用戶名等）。當你想要搜索某些信息的時候，打開谷歌，至少也要通過搜索框輸入來完成最起碼的搜索請求。
清晰
清晰的文本標簽
用戶想要知道他們輸入的字段到底是什么樣的數據，自然是需要文本標簽清晰的告訴他們。當然，有時候用戶也是借助字段相關的圖標來了解輸入框對應字段含義的（比如用戶通?？吹椒糯箸R的圖標會意識到這是一個搜索框）。但是在絕大多數的情況下，文本的標簽是必須有的。
Apple iOS 中的搜索框同時放置了標簽和放大鏡圖標
清晰的標簽讓用戶更加自信，正確理解，并且正確地操作。
短文本標簽
標簽并非幫助性的說明，所以你應該使用的是簡短（幾個字）的描述性的短語作為標簽，以便用戶能夠快速掃視。如果有額外的信息，通過上下文或者額外的幫助性的說明來讓用戶有所了解，而不是超長的標簽。
之前Amazon 的注冊頁面就因為超長的標簽文本導致注冊過程緩慢。目前的版本強多了。
合理的輸入框尺寸
如果你的輸入框尺寸是按照輸入內容的長短、尺寸來設計的話，會更加適宜用戶閱讀和輸入。
輸入框焦點
對于輸入框，當用戶選中準備輸入的時候，應當提供清晰的視覺提示，比如外發(fā)光的輸入框，或者閃動的光標，都行。
輸入提示
數據的呈現方式多種多樣。所以，當你在設計輸入框的時候，應當與用戶輸入信息的類型、格式相互匹配。不過要做到完全的對應并不容易。
舉個例子，電話號碼的輸入就存在多種不同的方式，比如我們常見的“+86”，而更多的情況下大家可能會直接輸入一串11位的手機號，座機號碼的情況則更加復雜，有的人習慣加上區(qū)號，而又的人則不會。面對這種復雜的情況，你可以通過設計輸入框，加入輸入提示來“格式化”輸入內容。還是以電話號碼的輸入為例：
這個輸入框的電話號碼格式已經固化了，讓用戶可以清楚的知道應該輸入哪種類型，多少位。
這個輸入框中加入了說明性質的文本占位符，清晰的說明了應當輸入怎樣的號碼。它的缺陷在于用戶輸入的時候，占位符會消失。
幫助信息
幫助信息（或相關文字）應當出現在需要的地方，比如表單中用文字說明為何需要填寫信用卡號，以及生日日期填寫之后的福利，又或者“服務條款”鏈接的存在。它們適時地出現，幫助用戶解釋了一些令人困惑的問題。一般說來，這類幫助信息最好不要超過100字。
僅限移動端：鍵盤類型與文本輸入的匹配
在APP上用戶常常要輸入不同類型的文本，當輸入框需要輸入數字的時候，結果彈出的是全鍵盤自然不方便，而需要輸入文本的時候則出現數字鍵盤就更加不合適了。
可訪問性
目標：確保不同狀況的用戶都能無障礙地、輕松瀏覽和填寫輸入框
避免使用大寫文本標簽
永遠不要使用全部是大寫字母的文本標簽，這樣的標簽通常都很難快速瀏覽，因為字母的大小高度都是一致的，對于非英語言國家的用戶尤其麻煩。
字體尺寸
在設置字體尺寸的時候，應該確保字體足夠大，盡量讓它們清晰可辨。網頁上設置正文字體的時候，最安全的選擇是16px，當然，大小的選取主要還是取決于實際的頁面設計，如果識別性問題，應當適當調大一些。
標簽顏色
標簽的色彩應當依從于你的APP或者網頁的整體配色方案，并且確保對比度（不能太暗，也別太耀眼）。W3C 在正文文本對比度上有如下的要求：
·較小的文本應當確保至少和背景之間有4.5:1的對比度比率
·較大的文本（14pt粗體，18pt常規(guī)）應當確保和背景之間的對比度超過3:1
提供舒適的點擊區(qū)域
無論你所設計的是網頁還是APP，都應當考慮用戶在手機上點擊屏幕時的體驗。你需要確保用戶點擊輸入框的時候的觸發(fā)區(qū)域足夠寬松舒適，而不是很難點擊。一般說來，拇指的觸發(fā)區(qū)域應當控制在 45~57px之間，但是在移動端上，控件看起來太大會讓人覺得不舒服，所以你的文本框高度應該設計在32~40px之間，這樣看起來足夠友好，又不會太大。
僅限桌面端：對鍵盤輸入友好的輸入框
這是一個歷史悠久的可用性設計：用戶應當能夠僅使用鍵盤就完成全部的內容輸入的工作。許多深度用戶有這樣的需求，他們習慣于使用Tab 按鍵來切換不同的輸入框和控件，無需離開鍵盤就可以填完表單。你可以在W3C的文檔中找到相應的說明。
用戶花費
目標：盡量減少用戶輸入
智能預設
填寫表單本身就是一件苦差事，絕大多數時候它都不會變得令人愉悅。因此，許多需要填寫、選取的表單最好有預設的初始值或者內容填充在其中，這樣可以讓用戶用起來更加方便——許多內容和參數其實你可以通過其他的方式計算并獲得（比如你可以根據用戶的地理位置來幫他們填寫郵政編碼），也可以通過之前在其他地方輸入的數據來填補內容。
比如用戶的IP地址在很多時候就可以預先填寫。Whatsapp 則調用系統(tǒng)服務，幫你將地區(qū)編碼預先填寫在手機號碼之前，讓你的填寫體驗更加舒適。
自動完成和自動建議
自動完成是以下拉框的形式根據你輸入的內容進行實時補完的功能。這樣可以幫助用戶更準確、高效地填寫信息。對于輸入困難、拼寫困難的用戶尤其有幫助，尤其是當這種語言并非他們母語的時候。
自動建議則會以列表的形式呈現相關的關鍵字或者短語，在匹配度上可能不會太多理想。自動完成更多的是在于補完你填寫的內容，而自動建議則是為你推薦可能相關的短語、關鍵詞。
兩種結合起來可以讓用戶輸入的體驗更加優(yōu)秀，Google搜索就是這么做的。
-----
原文地址：uxplanet
原文作者：Nick Babich
優(yōu)設譯文：@陳子木
轉摘請注明優(yōu)設網譯文出處，謝謝各位小編。
關注優(yōu)秀網頁設計官方微信號：youshege；和百萬設計師一起來學習設計
熱門課程推薦
熱門資訊
-
1. iPhone6的UI設計尺寸規(guī)范，原來如此重要！
想要了解iPhone6界面設計的尺寸規(guī)范嗎？這里為您詳細介紹iPhone6的UI設計尺寸規(guī)范，包括界面尺寸、圖標尺寸、可點擊高度規(guī)范、搜索欄高度規(guī)范以及界面元素之間的距離規(guī)范。
-
2. 12個絕佳的UI設計網站，助力你的創(chuàng)作之旅!
將為大家介紹12個絕佳的UI設計網站,這些網站不僅可以為你提供靈感,還可以幫助你學習新的技巧,助力你的創(chuàng)意之旅!dribbbleDribbble 是一個面向設計師的...
-
3. 移動端UI設計中常見的5種APP界面類型，你get到了嗎？
通過介紹移動端UI設計中的閃屏頁、引導頁、浮層引導頁、空白頁和首頁等5種APP界面類型，幫助大家更好地了解UI設計的基本知識
-
怎樣可以提升你的UI設計能力!第一個:站酷站酷想必是設計師都知道的一個網站,里面不止有UI設計的資源,還有其他設計的,不如:平面設計、網頁設計、字體...
-
在移動端設計中,列表頁和表單頁是不可或缺的部分。一個好的列表頁和表單頁設計能夠讓用戶輕松地獲取信息并產生點擊欲望,從而提高點擊率。本文將為你...
-
對于想要提高自己的設計能力和創(chuàng)造力的小白和UI設計師來說,這本書是一個很好的選擇。4.《設計的覺醒》(IKKO TANAKA)推薦理由: 這本書是日本現代平面...
-
探索零基礎UI設計培訓的時長與薪資前景。了解數字藝術教育領域的專業(yè)課程，以及培訓后的職業(yè)發(fā)展機會。
-
8. 物聯(lián)網APP UI設計:創(chuàng)造智能硬件領域的沉浸式體驗
ui設計應該讓用戶一目了然,能夠快速找到所需的信息和功能。在設計過程中,應盡量使用簡潔的圖標、文字和色彩,避免過多的視覺干擾。符合用戶習慣:ui設...
-
9. 設計中的色彩心理學:淺析中西方色彩的歷史演變與設計應用
摘要:本文探討了色彩的歷史演變和設計應用。通過對色彩在早期文明社會中的實用運用、不同文化背景下色彩觀念的差異、色彩在設計中的重要性以及新興技...
-
10. 武漢UI設計培訓班費用怎么樣？想學UI設計要多少錢？
想了解武漢UI設計培訓班的費用是多少嗎？不知道學UI設計要花多少錢？不妨看看這篇文章，了解UI設計培訓班的學費價格以及學習內容。
