中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

對一個產品小白來說，產品設計中任何一個細節都是一座難以逾越的大山。于是乎，我們開始觀察生活，整理一些細節設計時需要注意的事項，以備不時之需，同時造福更多的產品小白。

第一期我們為大家梳理的是輸入框的設計。下圖是我們針對這個細節展開的思維導圖。

接下來我們從幾種常見的輸入框來分析設計時需要注意的點。

信息輸入框

信息輸入框是最常見的輸入框之一，往往以表單輸入框的形式存在。

輸入前

1、輸入框大小

表單輸入框的大小往往會影響用戶輸入的心情。由于拇指的觸發區域控制在 45~57px之間，因此輸入框的高度應該保持在設計在32~40px之間比較合理。

2、必填項提醒

• 輸入框內出現“必填”的文字占位符。
• 輸入框內出現“*”的符號。

3、告知用戶輸入什么內容

• 輸入框前文案提示：一般為短語，簡短易懂。
• 輸入框內占位符文本提示：可以是一句話，也可以是短語。缺點是一旦輸入提示會消失。
• 輸入框前文案提示+輸入框內文字補充說明。（推薦使用）

4、重要信息的提示

格式提示

①輸入框內文字占位符提示

②格式拆分編輯

舉個栗子，要求填手機號碼時很多人往往會忽略區號的輸入，因此很多輸入框在設計時，會將區號單獨提出來，避免此類錯誤的發生。

字數限制提醒

一般以文案形式提醒。比如：在輸入框后顯示不得超過X字。

規則補充說明

一般在輸入框下方以文案形式提醒，重要的提示可以標亮提醒。

輸入時

1、當前輸入位置提示

光標提示

外框標亮提示

2、限制條件提示

字數

①字數限制輸入

先看一個反面案例：手機號碼位數是規定的，但在下圖中，當輸入位數超過時，仍然可以輸入。

比較好的處理方式應當是當達到限制字數時，鍵盤自動縮回，不允許再輸入內容，這樣可以提醒用戶檢查輸入的內容是否不小心多輸了文字。

②字數實時提醒

實時提醒用戶當前輸入內容字數。

格式

鍵盤默認彈出。

比如手機號、銀行卡號默認需要輸入數字的輸入框，彈出的鍵盤默認為數字鍵盤；若輸入的內容包涵文字、字母等內容，默認彈出字母鍵盤。

3、減少用戶輸入

歷史記錄

在用自己的手機電腦時，經常會需要經常填手機號或者一些內容?？梢?/p>

4、一鍵刪除功能

有內容輸入后，會出現×控件，可以讓用戶一鍵刪除。

輸入后

1、敏感信息的顯示

針對于手機號碼、密碼或銀行卡號等敏感信息，呈現為“*”或“· ”。

2、格式拆分顯示

可以使用戶快速檢查是否輸錯。比如：銀行卡號按照4-4-4-4顯示；手機號按照4-3-3顯示等等。

3、內容放大顯示

輸入內容放大顯示，便于用戶進行內容的預覽。

登錄注冊框

登錄注冊框在設計時需要注意以下幾點：

1、輸入框文案填寫類型提示

默認情況下輸入框內會有文案告知用戶填寫的信息類型，輸入框下方有溫馨提醒關于填寫內容更詳細的一些要求或建議（比如編輯狀態下的密碼輸入框下方有文案提示：不能包括空格、b.長度為8-16個字符、c.必須包含字母、數字、符號中至少2種）

2、輸入時鍵盤調用

根據輸入框填寫內容類型不同分別調用不同類型的鍵盤：字母鍵盤或數字鍵盤。

3、密碼顯示

密碼保密處理：鍵盤鍵入密碼過程中，系統會隱藏用戶實際輸入的字符以“.”替代；點擊輸入框后面的顯示按鈕即可查看核實密碼輸入是否正確，且查看操作可以在密碼輸入任何過程中進行。

4、反饋

• 對于一些內容，可以實時反饋。當表單輸入框有一系列需要輸入的內容時，如果在進入下一個文本框時，能夠實時判斷上一個文本框輸入的內容是否合乎規范，可供用戶實時修改。
• 標注錯誤原因。提示文本內容不符合規范時，最好提示原因，這樣有利于用戶快速修改。

• 密碼默認顯示。當點擊登錄按鈕后，若密碼不正確，密碼自動顯示內容，可以讓用戶檢查密碼是否正確。
  

  搜索框

  常見的交互控件，幫助用戶在海量內容中快速定位到目標內容。搜索框可以形象的被拆分為輸入框+icon(搜索圖標or圖片圖標or音頻圖標)+按鈕。

  常見的搜索框應用場景：

  a、搜索引擎入口

  b、電商、社區等內容導向型平臺的內容推薦

  c、工具、應用、好友等準確定位

  d、復用型(支持同搜索框搜索不同類型內容)

設計時需要注意的細節

1、編輯內容提示

①社區、新聞中心等內容導向型的平臺或者電商平臺用搜索框內文案提示達到內容推薦效果,此類文案一般根據用戶自身行為數據或內容熱度值來設置，且文案有時效性。

②搜索引擎入口、準確定位、復用等使用場景下的搜索框內文案固定不變且簡短，意在提醒用戶此交互動作及搜索的內容。

2、字數限制

在輸入框中文本做字數限制很容易被大家忽視，測試了QQ、微信、微博、淘寶等，發現QQ、微信、微博對字數做了限制(范圍比較大，一般情況下不容易超過字數限制)。其中微博超過字數限時的時候會有彈窗告知，而QQ、微信則是通過比較婉轉的方式告知用戶：使鍵盤失效，無法成功將字打入輸入框。相比之下后者體驗比較差，導致用戶出現后知后覺的情況。

3、支持一鍵清空功能

輸入框處于編輯狀態下且已有字符鍵入時，出現清除icon，點擊icon即可一鍵清除輸入框的所有內容，內容清除為空時，icon隱藏。

4、其他

• ?鍵盤調用。初始狀態下不出現鍵盤；當點擊輸入框，系統默認調用字母鍵盤；輸入完成點擊鍵盤自帶的“搜索”鍵，鍵盤回收，頁面進入結果頁。
• ?光標鎖定。獲取焦點：初始狀態下輸入框未被光標鎖定；編輯過程時，輸入框獲取焦點，光標位于首個字符將要出現的位置，并且會隨著的內容的增加光標移動；輸入完成后，光標消失。
• ?實時檢索。a.搜索框會根據輸入框內輸入的字符實時進行檢索，將結果呈現在用戶面前；（通常在用于好友、工具、應用等準確定位的情況下比較常見）
• ?建議機制。系統記錄用戶所有的搜索行為數據，根據輸入框內關鍵詞信息會提供含有相同關鍵詞信息且已有成形回答的搜索語句。

• 內容預覽。內容較少時，輸入框能夠透露出用戶所填所有信息；內容長度超過輸入框長度時，無法完整查看所有所填信息。

原創內容編輯框

原創內容編輯框是指在微信、微博等平臺上發表原創內容時的文本輸入框。

輸入前

1、占位符文本

原創內容編輯框內的占位符文本一般是一句話，輸入內容時占位符文本自動消失。

2、鍵盤自動喚醒

對于直接輸入文字的原創內容編輯款來說，打開文本框時鍵盤自動喚醒，可以減少用戶的操作。比如微信的發表文字、微博的發表文字都是這樣的做法，進入功能之后鍵盤自動彈起、光標自動定位。

輸入時

1、字數實時提示

你是否曾遇到過輸入了長長的一段話，單擊發表時卻被告知你輸入的內容過長，無法發送。

因此在輸入過程中實時提醒字數很重要！舉個栗子：

以顏色區分

以微博為例，當沒有達到限制字數之前，微博顯示的是當前輸入的字數，顏色為灰色；當超過限制字數時，微博顯示的是超過了多少字，顏色為橙色。

顯示當前輸入字數和最高限制字數

以站酷為例，在輸入時實時顯示當前輸入字數和最高限制字數。

2、輸入框對文本的自適應

在進行文本輸入時，往往會遇到輸入的文字超過文本框初始范圍的情況。

較糟糕的解決方式時是：文本框的大小隨著輸入文字的增多而變大。變大到一定程度時，內容會被鍵盤擋住。

QQ的說說內容編輯框就是這種處理方式，文字增多，文本框變大，內容被鍵盤擋住，無法看到之后輸入的內容。需要點擊文本框縮回鍵盤，定位光標到當前輸入位置繼續輸入。

比較好的處理方式為：

①文字框大小不變，文字內容上移

下圖所示的INS編輯框,網易云音樂的內容編輯框都是通過這種方式處理此類情況的。

②文本框隨著輸入文字的增多變大，到達接近鍵盤位置時，文字內容上移

輸入后

鍵盤縮回與內容預覽

在輸入完成后，往往會需要縮回鍵盤來進行內容的預覽。

1、滑動文本內容框鍵盤縮回，文本內容框最大化進行內容的預覽。

2、點擊按鈕鍵盤縮回，文本框大小不變，通過上下滑動進行內容的預覽。

對話框

1、對話款的形狀

2、交互

輸入內容時，文本框變大。比如ins的消息輸入框。

3、字數限制提醒

對話框一般也會設有字數限制，比如說QQ,字數限制為3420字，但一般情況下不會達到這個限制，所以一般在輸入前沒有字數限制提示。

先來幾個比較坑的栗子：

當輸入字數超過微信輸入框最高限制字數時，點擊發送，出現以下左圖所示，會讓用戶誤認為消息發送成功，返回聊天界面在對話列表頁就可以發現！號，證明消息發送失敗。

微博私信單條信息發送不得超過300字，但當用戶輸入超過300字時，點擊發送，消息發送成功，默認將超過300字的內容刪除，但卻沒有提示用戶，會導致發送信息不完整。

比較好的解決方式：

QQ聊天輸入框超過字數上限時，消息無法發送，提示“字數超過上限”。

4、輸入內容超過初始輸入框大小時

先隨著輸入文字的增多而變大，變大到一定程度時，文字自動上移，光標自動定位到最新輸入位置處。

結束語

好了，以上就是輸入框的設計細節分享！如有需要補充或者寫的不對的地方，歡迎大家指正！

我們的目標是：相互學習，共同進步，早日成為一名合(優）格（秀）的產品經理！??！

本文由 @小白CY 原創發布于人人都是產品經理。未經許可，禁止轉載。

題圖來自unsplash，基于CC0協議