起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識常用的交互組件：文本框、按鈕、搜索框、彈出框
在交互設計中，我們會用到哪些通用的組件呢？本文主要總結了一些我們常會用到的組件。
交互設計中，我們經常會遇到一些通用的組件，這些組件幾乎會在每一個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 協議
總結的不錯，如果能多說出同一種功能不同交互背后的原因就更好了
不錯不錯
挺好的
??