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

B端產(chǎn)品經(jīng)理在入行時(shí)，可能需要了解各式各樣的組件，了解其規(guī)范、作用和使用規(guī)則。這篇文章里，作者就介紹并拆解了B端組件——輸入框。一起來看看吧，相信可以幫你加深對這一組件的了解和印象。

中醫(yī)的入門知識是什么?肯定是認(rèn)識各種中草藥，了解他們的特性、功效和使用方法。中藥店柜臺(tái)后面一個(gè)個(gè)的木格子，就是中醫(yī)的入行門檻。

B端產(chǎn)品的入門知識是什么？肯定是認(rèn)識各種組件，了解他們的規(guī)范、作用和使用規(guī)則。構(gòu)成頁面的一個(gè)個(gè)組件，就是B端產(chǎn)品的入行門檻。

一個(gè)不認(rèn)識中草藥的中醫(yī)不可能是好醫(yī)生，一個(gè)不認(rèn)識B端組件的產(chǎn)品經(jīng)理也做不出好產(chǎn)品。

這個(gè)《好玩》系列為大家匯總了多種常用的B端組件，認(rèn)識它們、熟悉它們、用好它們，為產(chǎn)品晉級之路打下扎實(shí)的基本功。

今天聊一下：輸入框。

一、組件簡介

輸入框是承載用戶文本輸入或文本編輯的輸入類組件，常用在表單頁面。支持多種數(shù)據(jù)類型，比如純文本、密碼、數(shù)字、時(shí)間等。

也可以在原組件的基礎(chǔ)上搭配其他組件使用。比如搭配搜索按鈕，就是搜索組件。搭配前綴或后綴，可以快捷輸入網(wǎng)址、電話號碼等。

二、組件構(gòu)成

輸入框由以下5部分組成：

1. 文本框（必須有）：展示用戶輸入的內(nèi)容。文本框的邊框顏色和粗細(xì)變化可以代表輸入框的狀態(tài)，比如獲取焦點(diǎn)、禁用、成功、報(bào)錯(cuò)等。
2. 標(biāo)簽文字（可選）：一般在文本框的左側(cè)或頂部，用于說明輸入框所輸入的內(nèi)容。
3. 提示文字（可選）：在文本框中顯示的灰色提示文字，用來顯示與輸入內(nèi)容的相關(guān)的提示或示例，當(dāng)文本框獲取光標(biāo)時(shí)，提示文字自動(dòng)消失。提示文字與用戶實(shí)際輸入的內(nèi)容，會(huì)有明顯視覺差異。
4. 前綴圖標(biāo)（可選）：可以更形象化的說明輸入框的內(nèi)容，一定程度上可以提升用戶體驗(yàn)。
5. 后綴圖標(biāo)（可選）：常用于輸入框的功能擴(kuò)展，比如內(nèi)容清除按鈕，可以一鍵清除文本框中已輸入的內(nèi)容?；蛘呙艽a隱藏按鈕，可以將已輸入內(nèi)容進(jìn)行加密脫敏。

三、組件類型

1. 根據(jù)可輸入文本的行數(shù)

根據(jù)可輸入文本的行數(shù)，輸入框可分為3種：

1）單行輸入框：只能輸入一行文本，字?jǐn)?shù)有限制，超出部分會(huì)被截取隱藏。

2）多行輸入框：可以輸入多行文本，輸入框會(huì)根據(jù)輸入行數(shù)自動(dòng)調(diào)整高度。

3）文本域：可拖動(dòng)右下角圖標(biāo)改邊文本域尺寸。

2. 根據(jù)不同的擴(kuò)展功能

根據(jù)不同的擴(kuò)展功能，輸入框可以分為以下多種類型：

1）常規(guī)輸入框：原始狀態(tài)的輸入框，無拓展功能。

2）帶前綴的輸入框：在輸入框左側(cè)有前綴圖標(biāo)或文案。

3）帶前置或后置標(biāo)簽的輸入框：在輸入框前后有功能標(biāo)簽，比如搜索按鈕，郵箱，手機(jī)號碼的國際區(qū)號等。

4）帶字?jǐn)?shù)統(tǒng)計(jì)的輸入框：可以顯示已輸入的字?jǐn)?shù)，也可以對輸入數(shù)量進(jìn)行限制。

5）富文本輸入框：擁有豐富的文字編輯功能的輸入框，也可以插入圖片、視頻等其他格式的數(shù)據(jù)。

四、組件狀態(tài)

輸入框組件的8種狀態(tài)：

1. 初始態(tài)：組件首次打開時(shí)的狀態(tài)。
2. 懸停態(tài)：鼠標(biāo)懸停在輸入框上時(shí)的狀態(tài)。
3. 焦點(diǎn)態(tài)：輸入框獲取焦點(diǎn)時(shí)的狀態(tài)。這時(shí)輸入框上會(huì)有一個(gè)閃爍的光標(biāo)，表示現(xiàn)在可以輸入內(nèi)容。
4. 完成態(tài)：用戶輸入內(nèi)容后，輸入框失去焦點(diǎn)時(shí)的狀態(tài)。
5. 禁用態(tài)：輸入框無法輸入內(nèi)容，功能失效時(shí)的狀態(tài)。禁用狀態(tài)下輸入框可以顯示內(nèi)容，但無法修改內(nèi)容。
6. 加載態(tài)：多用于數(shù)據(jù)檢索或數(shù)據(jù)驗(yàn)證的場景。數(shù)據(jù)的檢索或驗(yàn)證過程需要與遠(yuǎn)程服務(wù)器交互，因此會(huì)有一定的延遲，在這個(gè)短暫”卡住“的過程中，給用戶明確的加載中的反饋，提升用戶體驗(yàn)。
7. 成功態(tài)：內(nèi)容輸入成功時(shí)的狀態(tài)。
8. 報(bào)錯(cuò)態(tài)：內(nèi)容輸入錯(cuò)誤時(shí)的狀態(tài)。報(bào)錯(cuò)狀態(tài)一般會(huì)搭配其他提示類組件一起使用，比如氣泡提示、全局提示、文本提示等。

五、組件大小

1. 對組件高度規(guī)范

常見的四種高度的輸入框尺寸，分別為24px、32px、36px、40px。在做原型圖時(shí)，除非特殊場景，一般使用36px的高度即可。

2. 組件的寬度規(guī)范

組件寬度可以根據(jù)頁面空間與網(wǎng)頁柵格規(guī)范自由調(diào)整。網(wǎng)頁柵格規(guī)范后續(xù)文章會(huì)詳細(xì)說明。

六、使用規(guī)則與注意事項(xiàng)

1. 輸入框組件的二用三不用

二用：

1. 輸入自由度較高的開放性內(nèi)容時(shí)使用，不需要對用戶輸入內(nèi)容做限制，可以允許用戶自由發(fā)揮。比如輸入商品名稱。
2. 用戶需要復(fù)制粘貼時(shí)使用。在訂單號、收貨地址等輸入難度較大的場景中，用戶使用復(fù)制粘貼會(huì)更加方便。

三不用：

1. 用戶輸入有限制的封閉式內(nèi)容時(shí)不能用，比如訂單狀態(tài)、性別、學(xué)歷等場景。這種場景下建議使用選擇器組件。
2. 用戶輸入特定格式的內(nèi)容時(shí)不能用，比如日期、省市區(qū)等場景。這類場景下建議使用時(shí)間選擇器或聯(lián)級選擇器。
3. 用戶當(dāng)前狀態(tài)不知道輸入什么時(shí)不能用。比如醫(yī)院掛號前，可能暫時(shí)不知道該掛哪個(gè)科室，這種場景下使用選擇器組件讓用戶選擇會(huì)更好。

2. 注意事項(xiàng)

對于輸入框組件來說，最重要的就是降低用戶的輸入成本和減少用戶的出錯(cuò)概率。為此需要注意一下幾點(diǎn)：

1. 要有簡潔扼要的提示文案，讓用戶第一時(shí)間知道輸入的內(nèi)容。
2. 設(shè)置適當(dāng)?shù)慕M件大小和間距，保持頁面的瀏覽體驗(yàn)，不擁擠、不凌亂。
3. 有清晰的錯(cuò)誤提示，讓用戶直觀的知道錯(cuò)誤原因及改正措施。

七、功能擴(kuò)展

輸入框組件搭配其他組件，就可以形成多種不同使用場景的功能。以下是幾種常用的組合。

1. 搜索組件

2. 浮窗提示

3. 銀行卡輸入

4. 驗(yàn)證碼輸入

八、相似組件

九、小結(jié)

認(rèn)識每個(gè)組件、熟悉每個(gè)組件、用好每個(gè)組件，對待它們像兒時(shí)對待心愛的玩具一樣，如數(shù)家珍、了如指掌。它們會(huì)給你源源不斷的勇氣和底氣，讓你在產(chǎn)品晉級之路上閃閃發(fā)光。

相關(guān)閱讀：

• 好玩的B端組件 丨 選擇器
• 好玩的B端組件 丨 數(shù)據(jù)穿梭框
• 好玩的B端組件 丨 上傳組件
• 好玩的B端組件 丨 導(dǎo)航