今天的主要內(nèi)容是：按鈕的五種狀態(tài)，文本框的四種狀態(tài)，表格表的兩種狀態(tài)，七種類型的提示框，四種從未犯過(guò)的錯(cuò)誤，以及四種使體驗(yàn)更好的效果。 。

你知道進(jìn)行PC端交互設(shè)計(jì)時(shí)的基本組件狀態(tài)嗎？

　　1、按鈕的5種狀態(tài)

1）正常狀態(tài)：可以單擊而無(wú)需任何操作的狀態(tài)

2）鼠標(biāo)懸停狀態(tài)：鼠標(biāo)懸停在按鈕上的狀態(tài)

3）按下鼠標(biāo)時(shí)：按下鼠標(biāo)（轉(zhuǎn)到百度，按住，就是效果）

4）按下鼠標(biāo)后彈跳狀態(tài)：當(dāng)鼠標(biāo)按下時(shí)鼠標(biāo)將釋放狀態(tài)（此效果無(wú)法完成，因?yàn)獒尫攀髽?biāo)后釋放按鈕時(shí)的效果已經(jīng)分離）

5）Unclickable狀態(tài)：一般為灰色，當(dāng)鼠標(biāo)結(jié)束時(shí)禁止鼠標(biāo)，不可點(diǎn)擊

　2、文本框的4種狀態(tài)

1）靜態(tài)：指不進(jìn)行交互的狀態(tài)。此狀態(tài)下文本框的線框顏色通常為灰色，提示文本為灰色，提示副本為xxx。

2）輸入狀態(tài)：指點(diǎn)擊輸入后的狀態(tài)。此文本框的線框顏色通常是網(wǎng)站的主要顏色。未輸入文本時(shí)，提示文本為灰色。如果提示文本，請(qǐng)輸入xxx。輸入文本后，文本框中的文本將顯示已輸入的文本，文本顏色為黑色。

3）輸入錯(cuò)誤狀態(tài)：指輸入文本后驗(yàn)證錯(cuò)誤的狀態(tài)。此狀態(tài)下文本框的線框顏色通常為紅色，文本框中的文本顯示輸入的文本。文字的顏色是黑色或紅色。 （很少見(jiàn)）。

4）輸入正確狀態(tài)：指輸入文本后驗(yàn)證文本的狀態(tài)。此狀態(tài)下文本框的線框顏色通常為灰色，有些將在文本框后面顯示復(fù)選標(biāo)記圖標(biāo)，并顯示文本框中的文本。輸入的文字，文字顏色為黑色。

　　3、表格的2種狀態(tài)

1）靜態(tài)：在靜態(tài)下，每種背景顏色必須使用不同的顏色。使用一種顏色會(huì)導(dǎo)致用戶體驗(yàn)視覺(jué)疲勞，眼睛疲勞，易讀和錯(cuò)誤等。用戶體驗(yàn)不佳

2）鼠標(biāo)傳遞狀態(tài)：當(dāng)鼠標(biāo)經(jīng)過(guò)某一段數(shù)據(jù)時(shí)，需要提供不同的背景顏色，因?yàn)橛脩舻淖⒁饬性谶@些數(shù)據(jù)上，這樣用戶就可以在不受其他數(shù)據(jù)干擾的情況下查看數(shù)據(jù)

3）當(dāng)鼠標(biāo)通過(guò)可操作的文本或圖標(biāo)時(shí)：默認(rèn)情況下，建議使用平臺(tái)的主顏色。因?yàn)樗强刹僮鞯奈谋净驁D標(biāo)，所以鼠標(biāo)必須通過(guò)默認(rèn)效果，例如文本可以加下劃線或著色。更改，圖標(biāo)可以添加顏色更改。

　4、提示框的7種類型

1）操作前提示：頁(yè)面未操作時(shí)的提示框始終顯示在某個(gè)位置，可以關(guān)閉

2）操作提示：?jiǎn)螕舨僮靼粹o后，進(jìn)程提示，如下面兩個(gè)效果，第二個(gè)效果可以出現(xiàn)在頂部，中間和底部。出現(xiàn)在頂部或底部不應(yīng)顯示連續(xù)文本的圖標(biāo)或圖標(biāo)

3）操作成功提示：?jiǎn)螕舨僮靼粹o后，成功提示可以顯示在頂部，中間和底部，并在2000毫秒后自動(dòng)消失。

4）操作失敗提示：?jiǎn)螕舨僮靼粹o后，顯示失敗提示，并且操作成功提示效果相同，唯一的變化是顏色變化。建議使用紅色

5）確認(rèn)操作提示：當(dāng)用戶執(zhí)行謹(jǐn)慎操作時(shí)，需要提示確認(rèn)操作

6）操作弱提示：當(dāng)用戶操作除保存提交類以外的操作，并且提示不是重要提示時(shí)，可以使用弱提示效果

7）強(qiáng)大的操作提示：當(dāng)用戶操作除保存提交類以外的操作時(shí)，此提示非常重要，該操作可用于突出顯示效果

　　5、永遠(yuǎn)不要犯的4種錯(cuò)誤

1）內(nèi)部的標(biāo)簽開(kāi)關(guān)并添加標(biāo)簽開(kāi)關(guān)

2）在彈出窗口中添加一個(gè)彈出窗口

3）當(dāng)圖標(biāo)替換文本時(shí)，如果圖標(biāo)不能指示操作的含義，則當(dāng)鼠標(biāo)通過(guò)圖標(biāo)時(shí)需要顯示圖標(biāo)的文本，否則用戶可能無(wú)法理解操作是什么。

4）具有相同副本或相同操作的按鈕無(wú)法在同一頁(yè)面上顯示

　　6、讓體驗(yàn)更好的4種效果

1）具有較少選項(xiàng)的下拉框，您可以嘗試公開(kāi)選項(xiàng)的內(nèi)容，而不是將其隱藏在下拉框中。例如，使用選擇標(biāo)記的樣式

2）用視覺(jué)或標(biāo)簽選擇替換單選按鈕

3）用標(biāo)簽效果替換復(fù)選框

4）編輯更多內(nèi)容時(shí)，嘗試單步執(zhí)行或?qū)?nèi)容進(jìn)行分類

« Alichuan Airlines的戰(zhàn)略合作將四川航空App的功能移至飛飛 | 馬云向金庸致敬：這位大人物是全國(guó)人民，所以先生說(shuō)我做了這個(gè) »