成都網站製作
當前位置: 首頁 >新聞資訊 > 網站建設 > 從9個方麵聊聊:關於輸入框的細節
2018-05-07 09:31:51

從9個方麵聊聊:關於輸入框的細節

輸入框的類型有許多種,輸入框使用場景多,交互頻次高,是基本的界麵控件之一。本文主要從九個方麵跟你聊聊,關於輸入框的一些細節。

輸入框類型:包括信息輸入框、注冊、登錄輸入框、搜索輸入框、原創輸入框、對話輸入框以及其它。

文本輸入框使用場景多,交互頻次高,是基本的界麵控件之一。每一個界麵都分別對默認、輸入和反饋三個狀態進行設計。輸入的結果我們常常用顏色來反饋,比如:藍色代表鏈接、灰色代表失效、綠色代表正確黃、色代表提示、紅色代表錯誤。

下麵是一些設計中需要注意的細節:

一、標注鍵盤類型

根據輸入框的不同數據類型,為用戶提供不同的鍵盤標注,比如:輸入手機號是標注數字鍵盤等等,用戶會偏愛那些根據輸入內容提供了合適鍵盤的應用。

二、考慮鍵盤喚起狀態左圖:這樣布局看起來沒問題,但沒有考慮到鍵盤調起的狀態,因為鍵盤調起來的時候登錄按鈕會被擋住,操作成本就會增加。

中圖:不管鍵盤有沒有被喚起,頁麵的布局都不會改變。

右圖:當鍵盤喚起時,頁麵向上提,漏出登錄按鈕。

三、減少用戶輸入

(1)增加一次性清除按鈕:當輸入框內容不為空的時候獲得焦點,顯示一次性清除內容的按鈕,而不需要用戶一直按刪除鍵,一個個字符刪。

(2)智能預設:需要填寫、選取的表單最好有預設的初始值或者內容填充在其中,可以是建議,也可以是相關推薦,這樣可以幫助成都網站製作用戶更準確、高效地填寫信息。常見的使用場景有搜索聯想輸入,地址定位等。

四、輸入提示

數據的呈現方式多種多樣,所以,當你在設計輸入框的時候,應當與用戶輸入信息的類型、格式相互匹配。

  • 選中輸入框準備輸入的時候,應當提供清晰的視覺提示,這樣讓用戶明確知道自己的位置,而不是迷失在茫茫表格中,這種細微的反饋會讓用戶更有掌控力。比如:外發光的輸入框,或者閃動的光標,變顏色、加粗等都行。

  • 金額輸入:當用戶輸入的金額超過千時,出現最高分位提示,每多輸入一位,最高分位隨之增加。

  • 通過設計輸入框格式來“格式化”輸入內容,讓用戶可以清楚的知道應該輸入哪種類型、多少位。

  • 對於手機的輸入設置成3-4- 4 格式,身份證的輸入設置成6-8- 4 格式,便於用戶能夠清楚及時了解到自己輸入的號碼有無缺漏。【對於身份證與手機,保存後可將中間幾位數變成*號,畢竟是敏感信息】

  • 輸入框的輸入記錄:對部分輸入框的內容進行記錄,比如登錄用戶名、手機號,無需用戶二次登錄時輸入,提高輸入速率,優化用戶體驗。

五、必要的說明

(1)不要過於依賴占位文本和標簽。

一旦在輸入框裏輸入內容,占位文本就無法被看到了——一則用戶無法檢查輸入的內容是否正確;二則當用戶在輸入框中看到提示文本,他們有可能認為這個文本框已被預填成功從而忽略它。

可以使用浮動標簽,當用戶填寫當前文本框時,行內標簽即浮動到文本框頂部,這樣可以使用戶隨時確認他們填寫的內容是否正確。

一般當屏幕中多於兩個輸入框時,行內標簽就不適用了。

(2)加入文字說明:比如:專業性強,大眾可能不清楚的文本解釋。

例如:銀行轉賬不是及時到賬,需要兩小時,金額每天有上限,並且和所剩的餘額相關。如果這些是在用戶輸入完才告知,或者報錯,那麽這個鍋用戶當然不願意背。

再比如:安全隱私或者金錢相關,有心理顧慮,可以承諾不會對用戶造成損失,或者找背書,該方案已經通過XXX安全認證。消除顧慮之後才能順利進行下一步。

(3)幫助信息(或相關文字)應當出現在需要的地方。

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

 

六、清晰的反饋

關於填寫錯誤的描述應該非常清晰,比如:注冊時密碼填寫,不要說密碼安全性過低,而要說——碼必須超過 8 位,或者密碼必須包含大小寫和數字。

注冊填寫手機號,當提示用戶手機號已被注冊時,應提供跳轉登錄的入口。

七、及時的驗證

(1)在用戶填完內容後立刻告知用戶輸入內容是否正確,而不是等提交後才提示。

(2)實時的頁內校驗可以馬上告知用戶輸入的正確性,幫助用戶及時改正,無需等到點擊提交按鈕。如果隻有一個錯誤要修正,那就很容易,能降低用戶放棄的可能性。

八、輸入限製問題

對於輸入框,當文字隻輸入一行的時候,不會有什麽問題,但輸入多行的時候,如果輸入框對字數有限製,而你沒有把規則告訴用戶,那用戶一定會吐糟。

(1)微信個性簽名會在輸入框的右下角告訴你還可以輸入多少字, 5 行字以內,輸入框會自動向上撐開;超過 5 行時輸入框大小不變動, 5 行以上的文字被遮擋住。

但微信這裏有個細節體驗不是很好,因為遮擋住的內容完全看不見。這個點唱吧的聊天界麵就做得比較好,被擋住的文字會露出半行,讓用戶知道原來上麵還有字。

(2)發布微博的時候,會在右下角告訴你已經輸入多少文字,如果超過 140 字後,數字的顏色會變成橙色,起到警示作用。

(3)知乎提問界麵,當離限製字數差 10 個字以內時,提示還差幾個字。當輸入超過限製字數時,直接提示已超過多少個字。

 

九、移動端自查清單

  • 這個輸入框真的是必須有的嗎?

  • 輸入框的文字描述在它的上方嗎?(不在裏麵,也不在下麵)

  • 這個輸入框是必填的(*)還是選填的?

  • 有沒有把輸入框裏的占位符都去掉?

  • 輸入框是否足夠大,以便完整顯示那些最有可能出現的輸入內容?

  • 當鍵盤出現的時候,輸入框是否在橫屏和豎屏兩個模式下都能被看到?

  • 輸入框是否有合適的默認值?任何可用的曆史記錄值?用戶經常使用的值?

  • 能不能用手機的特有功能(攝像頭,GPS,語音,聯係人)來填充呢?

  • 能不能根據其他信息幫助用戶得出要填的值(例如,根據郵政編碼,或者優惠券輸入碼來推測用戶所在的地區)?

  • 是否支持直接複製並粘貼到輸入框內?

  • 適合這個輸入框的鍵盤是哪個類型的?(譯注:如英文鍵盤還是數字鍵盤)

  • 能不能根據前麵輸入的字符進行自動聯想或自動匹配?對姓名、地址和電子郵件地址,不啟用自動更正。

  • 允許單詞拚寫錯誤或是縮寫嗎?

  • 允許用戶以任何格式輸入信息嗎?(譯注:如信用卡號、電話號碼裏的「-」符號)可以把用戶輸入的各式信息自動轉換為統一格式。

返回 BACK
服務項目
網站建設
互聯網開發
微應用(微信)
微信小程序
APP定製開發
400電話
主機租用
域名注冊
聯係我們

地址:成都市府青路二段 • 首匯觀築1棟28樓

郵箱:service@jikejun.com

熱線:18980803640 / 18190984800

座機:028-61382296

微信公眾號 二維碼