在交互設計中，我們會用到哪些通用的組件呢？本文主要總結了一些我們常會用到的組件。

交互設計中，我們經(jīng)常會遇到一些通用的組件，這些組件幾乎會在每一個app中用到。表面上看這些組件很常用、很簡單，但越常用的組件，可能背后有很復雜的交互。

今天筆者總結一些我們常會用到的組件。

一、文本框

文本框是設計中常見組件之一，無論是PC端還是移動端，交互形式是可以相互參照的。相比于其他組件，由于文本框的內(nèi)容無邊界性，其交互復雜性很高，在日常的設計中，可以注意一下幾點：

1.默認態(tài)

文本框的默認態(tài)，通常是顯示預置文字，可以是內(nèi)容提示或輸入規(guī)則。比如：字數(shù)限制、內(nèi)容限制，但在特殊情況下，默認態(tài)可以是激活態(tài)，甚至有默認輸入文本。

2.激活態(tài)

（1）點擊激活文本框后，應當顯示光標，以提供清晰的視覺提示；彈出鍵盤，可以結合輸入內(nèi)容選擇鍵盤類型。如：手機號文本框，彈出數(shù)字鍵盤，而非文本鍵盤。

（2）輸入字符后，文本框右側出現(xiàn)x，點擊清除輸入內(nèi)容。

（3）是否存在輸入位數(shù)限制？如：手機號文本框限制11位，提高防錯性。

（4）輸入格式，如：身份證文本框，通常格式為6-8-4，貼近用戶認知。

（5）輸入字符限制，是否支持中文、數(shù)字、下劃線、特殊符號、空格等？

（6）是否有快捷輸入按鈕？

（7）密碼類型文本框，明文、密文切換。

3.錯誤態(tài)

（1）前端驗證是同步，還是異步。

（2）錯誤是屬于格式錯誤，還是內(nèi)容錯誤？可以將文本框標紅突出視覺效果，并且標注錯誤原因。

二、按鈕

雖然按鈕看起來就是一個非常簡單的操作控件，但它仍然存在很多種狀態(tài)，常常被忽略。

1.不可點擊態(tài)

有時頁面沒有完成必要交互，按鈕可以顯示為不可點擊態(tài)，甚至消失，在必要的時刻出現(xiàn)。

2.可點擊態(tài)

（1）可點擊態(tài)的按鈕，前端驗證不通過時，需要提示用戶完成必要操作。

當一個按鈕當前未滿足可點擊條件時，通常可以設計為不可點擊態(tài)或可點擊態(tài)+提示兩種方式。

點擊按鈕之前的操作很多，通常設計為可點擊態(tài)+提示，反之使用不可點擊態(tài)的設計

（2）按鈕上的文案可以是相關的提示。

（3）開關按鈕，需要明確標明當前狀態(tài)，不能既是狀態(tài)又是操作行為。

開啟、關閉狀態(tài)不明確，是點擊打開，還是當前已經(jīng)打開？文案可修改為“已打開”或“已關閉

（4）主次按鈕，很多按鈕是成對出現(xiàn)的，比如：“確定”和“取消”。通常情況下，一個是期望用戶點擊的，另一個按鈕是在特殊情況下點擊的，此處可以通過樣式或顏色做區(qū)分。

（5）如果是復雜交互后的確認按鈕，或可能引起嚴重后果的確認按鈕，通常需要二次確認，以免用戶誤操作。

（6）一些設置類的按鈕，需要點擊后反饋結果。

3.異形按鈕

如：文字鏈接和icon，這些按鈕通常優(yōu)先級較低，可以通過樣式、顏色等屬性給予用戶可點擊的暗示。

三、搜索框

搜索框可用于精準提取海量的信息中的準確內(nèi)容，在搜索框的設計中有以下幾個要點：

首先，搜索可以分為以下幾種類型：

（1） 隱藏式搜索框：搜索頻率較低的場景可以點擊或滑動才出現(xiàn)；

（2）?普通搜索框：通常固定在頁面頂部，包含放大鏡、搜索框和預置文字；

（3）?多功能搜索框：可語音、圖片搜索；

（4）分類搜索：可以先選擇分類，再輸入關鍵詞搜索分類下的內(nèi)容。

其次，在搜索框的設計還需要注意以下幾點：

（1）默認態(tài)：顯示預置文字，可以是搜索內(nèi)容，也可以是搜索推薦。

（2）激活態(tài)：可以跳轉到搜索頁，并展示搜索推薦和搜索記錄，或直接搜索。

（3）輸入態(tài)：自動補全或推薦，根據(jù)輸入的內(nèi)容展示聯(lián)想結果。

語音、圖片輸入。

（4） 結果態(tài)：結果的顯示篩選。

無結果時的提示，可以顯示無結果或相關結果。

四、彈出框

底部彈出框有兩種形式，選擇器和展示欄。

1.選擇器

只適用于選擇，選擇后直接收起，如果選擇項過多，可以點擊確認收起，此種選擇器需要明確選中態(tài)和默認態(tài)。

2.展示欄

底部展示框用來展示內(nèi)容，不建議做選擇操作。

通用交互組件有很多，不同使用情境下的交互可能有差異，所以平時多做總結，可以極大提高設計時的效率。

作者：芥子未末

鏈接：https://www.jianshu.com/p/d103920598cc

本文由 @芥子未末 授權發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉載

題圖來自 Unsplash ，基于 CC0 協(xié)議