久草中文在线观看_久久精品中文字幕一区_亚洲日本欧美日韩中文字幕_熟妇人妻无乱码中文字幕真矢织江

    做pc端交互設計時，這些基本的元件狀態你知道嗎？今天主要講的內容有：《按鈕的5種狀態》《文本框的4種狀態》《表單表格的2種狀態》《提示框的7種類型》《永遠不要犯的4種錯誤》《讓體驗更好的4種效果》

    按鈕的5種狀態

    1）正常狀態：可以點擊且沒有進行任何動作的態

    2）鼠標懸停時狀態：鼠標停留在按鈕時的狀態

    3）鼠標按下時狀態：鼠標按下的時候（去百度看看按住不松開，就是那種效果）

    4）鼠標按下后彈起狀態：鼠標按下去后會松開鼠標時狀態（此效果可以不做，因為松開后還是鼠標停留按鈕時的效果，已經區分開了

    5）不可點擊狀態：一般為灰色，鼠標停留時鼠標是禁止狀態，不可點擊

    文本框的4種狀態

    1）靜止狀態：指的是未進行任何交互操作時狀態，此狀態下的文本框的線框顏色一般為灰色，提示文字為灰色，提示文案為請輸入xxx。

    2）輸入時狀態：指的是點擊后和輸入時狀態，此狀態下的文本框的線框顏色一般為網站的主色調，未輸入文字時提示文字為灰色，提示文案為請輸入xxx。已輸入文字時文本框里的文字顯示已輸入的文字，文字顏色為黑色。

    3）輸入有誤狀態：指的是輸入文字后校驗錯誤時狀態，此狀態下的文本框的線框顏色一般為紅色，文本框里的文字顯示已輸入的文字，文字顏色為黑色或紅色（很少見）。

    4）輸入正確狀態：指的是輸入文字后校驗正確時狀態，此狀態下的文本框的線框顏色一般為灰色，又一些會在文本框后面顯示對好圖標，文本框里的文字顯示已輸入的文字，文字顏色為黑色。

    表單表格的2種狀態

    1）靜止狀態：靜止狀態下需要每排背景色使用不同顏色，全用一個顏色會給用戶造成視覺疲勞、眼睛疲勞、容易看錯行等用戶體驗不好的問題

    2）鼠標經過狀態：鼠標經過某一條數據時需給出不同的背景色，因為此時用戶的焦點在這條數據上，為方便用戶查看此條數據不受其他數據的干擾

    3）鼠標經過可操作的文字或圖標時：默認的時候建議為平臺的主色掉，因為是可操作的文字或圖標，所以鼠標經過時需與默認效果有區別，比如文字可以加下劃線或顏色變化，圖標可以加顏色變化。

    提示框的7種類型

    1）操作前提示：在該頁面未進行操作時的提示框，始終顯示在某個位置，可關閉

    2）操作進行中提示：點擊完操作按鈕后進行過程中的提示，如以下兩種效果，第二種效果可出現在最頂端、中間、最底端。出現在頂端或底端時應不顯示圖標或圖標跟文字一排

    3）操作成功提示：點擊完操作按鈕后進行成功的提示，可出現在最頂端、中間、最底端，顯示2000毫秒后自動消失

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

    5）確認操作提示：當用戶執行某項謹慎型操作時，需給出確認操作的提示

    6）操作弱提示：當用戶操作某項除保存提交類的操作時，且此提示并非重要型提示時，才可使用操作弱提示效果

    7）操作強提示：當用戶操作某項除保存提交類的操作時，且此提示非常重要時，才可使用操作強提示效果

    永遠不要犯的4種錯誤

    1）tab切換里面加tab切換

    2）彈窗里面加彈窗

    3）圖標代替文字時，若圖標無法表示出該操作的寓意，需在鼠標經過圖標時顯示該圖標的文字，否則會造成用戶不明白是什么操作的困擾。

    4）同一個頁面不可以出現相同文案或相同操作的按鈕

    讓體驗更好的4種效果

    1）選項較少的下拉框，可以嘗試暴露選項里的內容，而不是放在下拉框里隱藏它們。比如用選擇標簽的樣式

    2）用有視覺效果或標簽的選擇來代替單選按鈕

    3）用有標簽效果的代替復選框

    4）編輯的內容較多時可嘗試分步驟進行或對內容分類