激情六月丁香婷婷|亚洲色图AV二区|丝袜AV日韩AV|久草视频在线分类|伊人九九精品视频|国产精品一级电影|久草视频在线99|在线看的av网址|伊人99精品无码|午夜无码视频在线

高校合作1：010-59833514 ?咨詢電話：400-810-1418 服務(wù)與監(jiān)督電話：400-810-1418轉(zhuǎn)接2

常用的交互組件:文本框、按鈕、搜索框、彈出框

發(fā)布時間：2024-04-13 18:17:36 瀏覽量：320次

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

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

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

一、文本框

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

1.默認(rèn)態(tài)

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

2.激活態(tài)

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

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

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

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

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

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

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

3.錯誤態(tài)

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

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

二、按鈕

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

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

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

2.可點擊態(tài)

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

當(dāng)一個按鈕當(dāng)前未滿足可點擊條件時，通?？梢栽O(shè)計為不可點擊態(tài)或可點擊態(tài)+提示兩種方式。

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

（2）按鈕上的文案可以是相關(guān)的提示。

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

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

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

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

（6）一些設(shè)置類的按鈕，需要點擊后反饋結(jié)果。

3.異形按鈕

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

三、搜索框

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

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

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

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

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

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

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

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

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

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

語音、圖片輸入。

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

無結(jié)果時的提示，可以顯示無結(jié)果或相關(guān)結(jié)果。

四、彈出框

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

1.選擇器

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

2.展示欄

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

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

作者：芥子未末

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

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

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

熱門課程推薦

熱門資訊

請綁定手機號

獲取驗證碼
x

同學(xué)您好！

您已成功報名0元試學(xué)活動，老師會在第一時間與您取得聯(lián)系，請保持電話暢通！
確定