在交互設計中，我們會用到哪些通用的組件呢？本文主要總結了一些我們常會用到的組件。
交互設計中，我們經常會遇到一些通用的組件，這些組件幾乎會在每一個app中用到。表面上看這些組件很常用、很簡單，但越常用的組件，可能背後有很複雜的交互。
今天筆者總結一些我們常會用到的組件。
一、文本框
文本框是設計中常見組件之一，無論是PC端還是移動端，交互形式是可以相互參照的。相比於其他組件，由於文本框的內容無邊界性，其交互複雜性很高，在日常的設計中，可以注意一下幾點：
1.默認態
文本框的默認態，通常是顯示預置文字，可以是內容提示或輸入規則。比如：字數限制、內容限制，但在特殊情況下，默認態可以是激活態，甚至有默認輸入文本。
2.激活態
（1）點擊激活文本框後，應當顯示光標，以提供清晰的視覺提示；彈出鍵盤，可以結合輸入內容選擇鍵盤類型。如：手機號文本框，彈出數字鍵盤，而非文本鍵盤。
（2）輸入字符後，文本框右側出現x，點擊清除輸入內容。
（3）是否存在輸入位數限制？如：手機號文本框限制11位，提高防錯性。
（4）輸入格式，如：身份證文本框，通常格式為6-8-4，貼近用戶認知。
（5）輸入字符限制，是否支持中文、數字、下劃線、特殊符號、空格等？
（6）是否有快捷輸入按鈕？
（7）密碼類型文本框，明文、密文切換。
3.錯誤態
（1）前端驗證是同步，還是異步。
（2）錯誤是屬於格式錯誤，還是內容錯誤？可以將文本框標紅突出視覺效果，並且標註錯誤原因。
二、按鈕
雖然按鈕看起來就是一個非常簡單的操作控件，但它仍然存在很多種狀態，常常被忽略。
1.不可點擊態
有時頁面沒有完成必要交互，按鈕可以顯示為不可點擊態，甚至消失，在必要的時刻出現。
2.可點擊態
（1）可點擊態的按鈕，前端驗證不通過時，需要提示用戶完成必要操作。
當一個按鈕當前未滿足可點擊條件時，通常可以設計為不可點擊態或可點擊態+提示兩種方式。
點擊按鈕之前的操作很多，通常設計為可點擊態+提示，反之使用不可點擊態的設計
（2）按鈕上的文案可以是相關的提示。
（3）開關按鈕，需要明確標明當前狀態，不能既是狀態又是操作行為。
開啟、關閉狀態不明確，是點擊打開，還是當前已經打開？文案可修改為“已打開”或“已關閉
（4）主次按鈕，很多按鈕是成對出現的，比如：“確定”和“取消”。通常情況下，一個是期望用戶點擊的，另一個按鈕是在特殊情況下點擊的，此處可以通過樣式或顏色做區分。
（5）如果是複雜交互後的確認按鈕，或可能引起嚴重後果的確認按鈕，通常需要二次確認，以免用戶誤操作。
（6）一些設置類的按鈕，需要點擊後反饋結果。
3.異形按鈕
如：文字鏈接和icon，這些按鈕通常優先級較低，可以通過樣式、顏色等屬性給予用戶可點擊的暗示。
三、搜索框
搜索框可用於精準提取海量的信息中的準確內容，在搜索框的設計中有以下幾個要點：
首先，搜索可以分為以下幾種類型：
（1） 隱藏式搜索框：搜索頻率較低的場景可以點擊或滑動才出現；
（2） 普通搜索框：通常固定在頁面頂部，包含放大鏡、搜索框和預置文字；
（3） 多功能搜索框：可語音、圖片搜索；
（4）分類搜索：可以先選擇分類，再輸入關鍵詞搜索分類下的內容。
其次，在搜索框的設計還需要注意以下幾點：
（1）默認態：顯示預置文字，可以是搜索內容，也可以是搜索推薦。
（2）激活態：可以跳轉到搜索頁，並展示搜索推薦和搜索記錄，或直接搜索。
（3）輸入態：自動補全或推薦，根據輸入的內容展示聯想結果。
語音、圖片輸入。
（4） 結果態：結果的顯示篩選。
無結果時的提示，可以顯示無結果或相關結果。
四、彈出框
底部彈出框有兩種形式，選擇器和展示欄。
1.選擇器
只適用於選擇，選擇後直接收起，如果選擇項過多，可以點擊確認收起，此種選擇器需要明確選中態和默認態。
2.展示欄
底部展示框用來展示內容，不建議做選擇操作。
通用交互組件有很多，不同使用情境下的交互可能有差異，所以平時多做總結，可以極大提高設計時的效率。
鏈接：https://www.jianshu.com/p/d103920598cc
題圖來自 Unsplash ，基於 CC0 協議
閱讀更多 人人都是產品經理 的文章
