起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識產品細節控：輸入框
從實習到現在，入行一年多，踩過無數的坑……踩得坑多了，路就知道怎么走啦，下面是針對輸入框的一些注意細節的小結。
輸入框的一次性清除
場景：A在某個輸入框輸入十幾個字，突然想把全部刪除，苦逼的Ta還得一直按刪除鍵，一個個字符刪……
對策：當輸入框內容不為空的時候獲得焦點，則展示一次性清除內容的按鈕，適用于APP與網站。
輸入大陸號碼或身份證的展示
場景：A預定機票，輸身份證少了一位數（此時還不知道），直到點擊提交按鈕/或者輸完后，才彈出錯誤提示“您的身份證格式不正確”……
對策：? 對于手機的輸入設置成3-4-4格式，身份證的輸入設置成6-8-4格式，便于用戶能夠清楚及時了解到自己輸入的號碼有無缺漏?！緦τ谏矸葑C與手機，保存后可將中間幾位數變成*號，畢竟是敏感信息】
輸入多文字后的“袒露”
場景：A幫B預定機票，A填寫報銷憑證的快遞地址，輸入一大串的文字，然后給B確認，發現快遞地址沒寫完……
對策：當輸入多行或者多文字的時候，超出輸入框的文字“袒露”一部分出來，讓用戶知道原來還有文字【對了，還需要規定可輸入多少行，單行，還是2行、3行、4行……隨著輸入的文字輸入框的高度也會產生變化，直到規定的行數】
指定輸入框的鍵盤類型
場景：A預定機票填寫手機號，結果彈出默認的鍵盤類型，還需要自己切換成數字鍵盤……
對策：手機號—數字鍵盤；身份證—身份證鍵盤；英文名—英文鍵盤；中文—中文鍵盤……【如果某按鈕被鍵盤遮住，要點擊按鈕的話，需要將鍵盤縮回哦】。
tip：如果規定了輸入長度，輸完后可自動將鍵盤縮回。如某輸入框規定輸入4位數字，用戶輸完4位數字后鍵盤自動縮回，而不需要用戶自己再點擊一次縮回~
輸入框的輸入記錄
場景：A在某網站進行登錄，輸入自己用戶名，第二天登錄該網站又得重新輸入（設置了瀏覽器保存用戶名和密碼就另說了~~）
對策：對輸入框的內容進行記錄。
輸入框的字數限制
場景：A在某軟件進行長篇文章的輸入，當準備發表的時候卻提示文字字數過多……（實驗了一下，微信就是這樣子，呃呃呃呃）
對策：對于可輸入大量文字的輸入框（限制字數），如知乎的發表問題、可采取字數數目的展示，這樣子就可以讓用戶知道我輸入了多少字，我還能再輸入多少字。
輸入框的字數計算順序
場景：一個只能支持長度為4位（一個中文算一位，2個字母算一位）的昵稱，A在Android端手機順利輸進（全拼輸入）“羊羊羊羊”，一天Android 手機摔了，小A買了愛瘋，然后想改昵稱，卻發現輸不了（全拼輸入）“陽陽陽陽”……【這是為什么呢，由圖見分解】
對策：說實話，這個就只能改變限制長度的位數
下面兩張圖分別是輸入拼音的展示
下面兩張圖是因為根據展示的方式不同，微博計算字數的方式也不同（輸入一大串哈哈哈，最后只能再輸入3個字）
對于iPhone，輸入中文字，打拼音的時候，字母是直接在輸入框展示，此刻輸入框就開始計算字數了
對于Android，輸入中文字，打拼音選漢字才在輸入框展示，而此刻輸入框才計算字數
所以之前說的場景，輸入“yangyangyangyang”已經是8位了，超過規定的4位，所以就不能輸入啦，還有另一個辦法就是用簡音“yyyy”~~~~
目前發現的iphone與android的文字展示至輸入框的順序不一致，不知道系統更新版本之間（如ios11與ios10）的會不會也不同，這有待研究，because我不是擁有多部愛瘋的膩~~
對于上面所說的細節，可以靈活組合一起，如 身份證的輸入框+一次性刪除+自動縮回鍵盤 .
輸入框的控件細節大致就這些，這是我第一次寫稿，如有不足請多多包涵。
本文由 @小幸兒 原創發布于人人都是產品經理。未經許可，禁止轉載。
題圖來自unsplash，基于CC0協議
￥
思考的細節很多，可以再進一步。比如微信朋友圈為什么把字數限制檢查放在提交時，朋友圈文字超過2000字的場景有多少？不做過度設計很重要。在昵稱輸入時進行限制檢查就是一個比較失敗的設計，可以把昵稱長度檢查放在提交時。
嗯嗯， 謝謝你的建議
哈哈哈，很有意思，都是大家平時可能會忽略的細節
細節很到位，但是還是不夠系統。
感謝大家的支持
這東西雖小，但是設計不好確實讓人很煩，我有好幾次就被設計爛的輸入框惡心到了
不錯，提升用戶體驗。
mark
不錯