[ 平面理論教程 ] 你懂得文本輸入框設計的那些潛規則么- 設計教程 - 骨子愛創意

教學主題: 你懂得文本輸入框設計的那些潛規則么

大家好!! 小編今天來和大家分享關於 設計教程中的平面理論教程教學

今天的這個教學主題是: 你懂得文本輸入框設計的那些潛規則么

這教學的重點為這幾點 [ 那些,規則,設計,輸入,文本,懂得,用戶,標籤,應當,時候, ]

希望你可以從這幾點中領悟到修圖的精華

本文重點

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

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

當新用戶開始使用一款APP或者入駐某個網站的時候，至少最基本的信息都需要通過文本輸入來完成。產品經理、設計師和開發者也都明白，這才是最佳的解決方案。

今天的文章，我們專註於文本的字段輸入應當注意的一些核心因素。這些大都是最常見的規則，同時每一個規則都有一些值得注意的例外情況。

文本輸入框

文本輸入框是UI設計中最常見的控件，在絕大多數的場合用來給用戶輸入少量的文字。無論你使用的是哪個APP，大都需要你藉助文本輸入框來獲取少量的個人信息(用戶名等)。當你想要搜索某些信息的時候，打開谷歌，至少也要通過搜索框輸入來完成最起碼的搜索請求。

清晰

清晰的文本標籤

用戶想要知道他們輸入的字段到底是什麼樣的數據，自然是需要文本標籤清晰的告訴他們。當然，有時候用戶也是藉助字段相關的圖標來了解輸入框對應字段含義的(比如用戶通常看到放大鏡的圖標會意識到這是一個搜索框)。但是在絕大多數的情況下，文本的標籤是必須有的。

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

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

短文本標籤

標籤並非幫助性的說明，所以你應該使用的是簡短(幾個字)的描述性的短語作為標籤，以便用戶能夠快速掃視。如果有額外的信息，通過上下文或者額外的幫助性的說明來讓用戶有所了解，而不是超長的標籤。

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

合理的輸入框尺寸

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

輸入框焦點

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

輸入提示

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

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

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

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

幫助信息

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

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

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

可訪問性

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

避免使用大寫文本標籤

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

字體尺寸

在設置字體尺寸的時候，應該確保字體足夠大，盡量讓它們清晰可辨。網頁上設置正文字體的時候，最安全的選擇是16px，當然，大小的選取主要還是取決於實際的頁面設計，如果識別性問題，應當適當調大一些。

貼心提醒: 按Ctrl+Alt+Z和Ctrl+Shift+Z組合鍵分別為在歷史記錄中向後和向前 ( 或者可以
使用歷史面板中的菜單來使用這些命令 )。結合還原 ( Edit／Undo )命令使
用這些熱鍵可以自由地在歷史記錄和當前狀態中切 換。

標籤顏色

標籤的色彩應當依從於你的APP或者網頁的整體配色方案，並且確保對比度(不能太暗，也別太耀眼)。W3C 在正文文本對比度上有如下的要求：

·較小的文本應當確保至少和背景之間有4.5:1的對比度比率

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

貼心提醒: 使用選框工具( Marquee Tools )的時候，按住Shift鍵可以劃出 正方形和正圓
的選區；按住Alt鍵將從起始點為中心勾劃選區。

提供舒適的點擊區域

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

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

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

用戶花費

 

 

目標：盡量減少用戶輸入

智能預設

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

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

自動完成和自動建議

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

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

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

看完小編分享的教學之後 是不是對平面理論教程中的設計教程教學更熟悉了呢?

希望我們所介紹的 你懂得文本輸入框設計的那些潛規則么 這教學會喜歡

文章標題: 骨子愛創意- 你懂得文本輸入框設計的那些潛規則么–轉載請註明來源處

本教學分類為平面理論教程中的 設計教程相關教學

文章相關關鍵字為: 那些,規則,設計,輸入,文本,懂得,用戶,標籤,應當,時候,

本文永久連結 :你懂得文本輸入框設計的那些潛規則么

本文轉載自 :VIA