做pc端交互設(shè)計(jì)時(shí)，這些基本的元件狀態(tài)你知道嗎？今天主要講的內(nèi)容有：《按鈕的5種狀態(tài)》《文本框的4種狀態(tài)》《表單表格的2種狀態(tài)》《提示框的7種類(lèi)型》《永遠(yuǎn)不要犯的4種錯(cuò)誤》《讓體驗(yàn)更好的4種效果》

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

    1）正常狀態(tài)：可以點(diǎn)擊且沒(méi)有進(jìn)行任何動(dòng)作的態(tài)

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

    3）鼠標(biāo)按下時(shí)狀態(tài)：鼠標(biāo)按下的時(shí)候（去百度看看按住不松開(kāi)，就是那種效果）

    4）鼠標(biāo)按下后彈起狀態(tài)：鼠標(biāo)按下去后會(huì)松開(kāi)鼠標(biāo)時(shí)狀態(tài)（此效果可以不做，因?yàn)樗砷_(kāi)后還是鼠標(biāo)停留按鈕時(shí)的效果，已經(jīng)區(qū)分開(kāi)了

    5）不可點(diǎn)擊狀態(tài)：一般為灰色，鼠標(biāo)停留時(shí)鼠標(biāo)是禁止?fàn)顟B(tài)，不可點(diǎn)擊

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

    1）靜止?fàn)顟B(tài)：指的是未進(jìn)行任何交互操作時(shí)狀態(tài)，此狀態(tài)下的文本框的線(xiàn)框顏色一般為灰色，提示文字為灰色，提示文案為請(qǐng)輸入xxx。

    2）輸入時(shí)狀態(tài)：指的是點(diǎn)擊后和輸入時(shí)狀態(tài)，此狀態(tài)下的文本框的線(xiàn)框顏色一般為網(wǎng)站的主色調(diào)，未輸入文字時(shí)提示文字為灰色，提示文案為請(qǐng)輸入xxx。已輸入文字時(shí)文本框里的文字顯示已輸入的文字，文字顏色為黑色。

    3）輸入有誤狀態(tài)：指的是輸入文字后校驗(yàn)錯(cuò)誤時(shí)狀態(tài)，此狀態(tài)下的文本框的線(xiàn)框顏色一般為紅色，文本框里的文字顯示已輸入的文字，文字顏色為黑色或紅色（很少見(jiàn)）。

    4）輸入正確狀態(tài)：指的是輸入文字后校驗(yàn)正確時(shí)狀態(tài)，此狀態(tài)下的文本框的線(xiàn)框顏色一般為灰色，又一些會(huì)在文本框后面顯示對(duì)好圖標(biāo)，文本框里的文字顯示已輸入的文字，文字顏色為黑色。

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

    1）靜止?fàn)顟B(tài)：靜止?fàn)顟B(tài)下需要每排背景色使用不同顏色，全用一個(gè)顏色會(huì)給用戶(hù)造成視覺(jué)疲勞、眼睛疲勞、容易看錯(cuò)行等用戶(hù)體驗(yàn)不好的問(wèn)題

    2）鼠標(biāo)經(jīng)過(guò)狀態(tài)：鼠標(biāo)經(jīng)過(guò)某一條數(shù)據(jù)時(shí)需給出不同的背景色，因?yàn)榇藭r(shí)用戶(hù)的焦點(diǎn)在這條數(shù)據(jù)上，為方便用戶(hù)查看此條數(shù)據(jù)不受其他數(shù)據(jù)的干擾

    3）鼠標(biāo)經(jīng)過(guò)可操作的文字或圖標(biāo)時(shí)：默認(rèn)的時(shí)候建議為平臺(tái)的主色掉，因?yàn)槭强刹僮鞯奈淖只驁D標(biāo)，所以鼠標(biāo)經(jīng)過(guò)時(shí)需與默認(rèn)效果有區(qū)別，比如文字可以加下劃線(xiàn)或顏色變化，圖標(biāo)可以加顏色變化。

    提示框的7種類(lèi)型

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

    2）操作進(jìn)行中提示：點(diǎn)擊完操作按鈕后進(jìn)行過(guò)程中的提示，如以下兩種效果，第二種效果可出現(xiàn)在最頂端、中間、最底端。出現(xiàn)在頂端或底端時(shí)應(yīng)不顯示圖標(biāo)或圖標(biāo)跟文字一排

    3）操作成功提示：點(diǎn)擊完操作按鈕后進(jìn)行成功的提示，可出現(xiàn)在最頂端、中間、最底端，顯示2000毫秒后自動(dòng)消失

    4）操作失敗提示：點(diǎn)擊完操作按鈕后進(jìn)行失敗的提示，同操作成功的提示效果，唯一有變化的是顏色的變化。推薦使用紅色

    5）確認(rèn)操作提示：當(dāng)用戶(hù)執(zhí)行某項(xiàng)謹(jǐn)慎型操作時(shí)，需給出確認(rèn)操作的提示

    6）操作弱提示：當(dāng)用戶(hù)操作某項(xiàng)除保存提交類(lèi)的操作時(shí)，且此提示并非重要型提示時(shí)，才可使用操作弱提示效果

    7）操作強(qiáng)提示：當(dāng)用戶(hù)操作某項(xiàng)除保存提交類(lèi)的操作時(shí)，且此提示非常重要時(shí)，才可使用操作強(qiáng)提示效果

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

    1）tab切換里面加tab切換

    2）彈窗里面加彈窗

    3）圖標(biāo)代替文字時(shí)，若圖標(biāo)無(wú)法表示出該操作的寓意，需在鼠標(biāo)經(jīng)過(guò)圖標(biāo)時(shí)顯示該圖標(biāo)的文字，否則會(huì)造成用戶(hù)不明白是什么操作的困擾。

    4）同一個(gè)頁(yè)面不可以出現(xiàn)相同文案或相同操作的按鈕

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

    1）選項(xiàng)較少的下拉框，可以嘗試暴露選項(xiàng)里的內(nèi)容，而不是放在下拉框里隱藏它們。比如用選擇標(biāo)簽的樣式

    2）用有視覺(jué)效果或標(biāo)簽的選擇來(lái)代替單選按鈕

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

    4）編輯的內(nèi)容較多時(shí)可嘗試分步驟進(jìn)行或?qū)?nèi)容分類(lèi)