交互設(shè)計基本功-PC端
做pc端交互設(shè)計時,這些基本的元件狀態(tài)你知道嗎?今天主要講的內(nèi)容有:《按鈕的5種狀態(tài)》《文本框的4種狀態(tài)》《表單表格的2種狀態(tài)》《提示框的7種類型》《永遠(yuǎn)不要犯的4種錯誤》《讓體驗更好的4種效果》
按鈕的5種狀態(tài)
1)正常狀態(tài):可以點擊且沒有進(jìn)行任何動作的態(tài)
2)鼠標(biāo)懸停時狀態(tài):鼠標(biāo)停留在按鈕時的狀態(tài)
3)鼠標(biāo)按下時狀態(tài):鼠標(biāo)按下的時候(去百度看看按住不松開,就是那種效果)
4)鼠標(biāo)按下后彈起狀態(tài):鼠標(biāo)按下去后會松開鼠標(biāo)時狀態(tài)(此效果可以不做,因為松開后還是鼠標(biāo)停留按鈕時的效果,已經(jīng)區(qū)分開了
5)不可點擊狀態(tài):一般為灰色,鼠標(biāo)停留時鼠標(biāo)是禁止?fàn)顟B(tài),不可點擊
文本框的4種狀態(tài)
1)靜止?fàn)顟B(tài):指的是未進(jìn)行任何交互操作時狀態(tài),此狀態(tài)下的文本框的線框顏色一般為灰色,提示文字為灰色,提示文案為請輸入xxx。
2)輸入時狀態(tài):指的是點擊后和輸入時狀態(tài),此狀態(tài)下的文本框的線框顏色一般為網(wǎng)站的主色調(diào),未輸入文字時提示文字為灰色,提示文案為請輸入xxx。已輸入文字時文本框里的文字顯示已輸入的文字,文字顏色為黑色。
3)輸入有誤狀態(tài):指的是輸入文字后校驗錯誤時狀態(tài),此狀態(tài)下的文本框的線框顏色一般為紅色,文本框里的文字顯示已輸入的文字,文字顏色為黑色或紅色(很少見)。
4)輸入正確狀態(tài):指的是輸入文字后校驗正確時狀態(tài),此狀態(tài)下的文本框的線框顏色一般為灰色,又一些會在文本框后面顯示對好圖標(biāo),文本框里的文字顯示已輸入的文字,文字顏色為黑色。
表單表格的2種狀態(tài)
1)靜止?fàn)顟B(tài):靜止?fàn)顟B(tài)下需要每排背景色使用不同顏色,全用一個顏色會給用戶造成視覺疲勞、眼睛疲勞、容易看錯行等用戶體驗不好的問題
2)鼠標(biāo)經(jīng)過狀態(tài):鼠標(biāo)經(jīng)過某一條數(shù)據(jù)時需給出不同的背景色,因為此時用戶的焦點在這條數(shù)據(jù)上,為方便用戶查看此條數(shù)據(jù)不受其他數(shù)據(jù)的干擾
3)鼠標(biāo)經(jīng)過可操作的文字或圖標(biāo)時:默認(rèn)的時候建議為平臺的主色掉,因為是可操作的文字或圖標(biāo),所以鼠標(biāo)經(jīng)過時需與默認(rèn)效果有區(qū)別,比如文字可以加下劃線或顏色變化,圖標(biāo)可以加顏色變化。
提示框的7種類型
1)操作前提示:在該頁面未進(jìn)行操作時的提示框,始終顯示在某個位置,可關(guān)閉
2)操作進(jìn)行中提示:點擊完操作按鈕后進(jìn)行過程中的提示,如以下兩種效果,第二種效果可出現(xiàn)在最頂端、中間、最底端。出現(xiàn)在頂端或底端時應(yīng)不顯示圖標(biāo)或圖標(biāo)跟文字一排
3)操作成功提示:點擊完操作按鈕后進(jìn)行成功的提示,可出現(xiàn)在最頂端、中間、最底端,顯示2000毫秒后自動消失
4)操作失敗提示:點擊完操作按鈕后進(jìn)行失敗的提示,同操作成功的提示效果,唯一有變化的是顏色的變化。推薦使用紅色
5)確認(rèn)操作提示:當(dāng)用戶執(zhí)行某項謹(jǐn)慎型操作時,需給出確認(rèn)操作的提示
6)操作弱提示:當(dāng)用戶操作某項除保存提交類的操作時,且此提示并非重要型提示時,才可使用操作弱提示效果
7)操作強提示:當(dāng)用戶操作某項除保存提交類的操作時,且此提示非常重要時,才可使用操作強提示效果
永遠(yuǎn)不要犯的4種錯誤
1)tab切換里面加tab切換
2)彈窗里面加彈窗
3)圖標(biāo)代替文字時,若圖標(biāo)無法表示出該操作的寓意,需在鼠標(biāo)經(jīng)過圖標(biāo)時顯示該圖標(biāo)的文字,否則會造成用戶不明白是什么操作的困擾。
4)同一個頁面不可以出現(xiàn)相同文案或相同操作的按鈕
讓體驗更好的4種效果
1)選項較少的下拉框,可以嘗試暴露選項里的內(nèi)容,而不是放在下拉框里隱藏它們。比如用選擇標(biāo)簽的樣式
2)用有視覺效果或標(biāo)簽的選擇來代替單選按鈕
3)用有標(biāo)簽效果的代替復(fù)選框
4)編輯的內(nèi)容較多時可嘗試分步驟進(jìn)行或?qū)?nèi)容分類
大家好!我是一名UX設(shè)計師,希望可以與共同喜歡探索用戶體驗的朋友們一起成長!我會不定期地更新一些有關(guān)用戶體驗方面的文章。
作者:高杰,微信號公眾號:UX設(shè)計師高杰,華點云UX設(shè)計師,5年產(chǎn)品交互設(shè)計經(jīng)驗,主導(dǎo)交互設(shè)計和用戶體驗工作。
本文由 @高杰 ?原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。
雌雄同體就很秀??
求問,pc端的跳轉(zhuǎn)鏈接的入口該如何設(shè)計呀…
請問您提交中和提交成功的圖標(biāo)在哪里能找到?
請問tab里面加tab、彈窗上面再加彈窗是為錯誤的原因在哪里?
移動端的應(yīng)用,底部tab+上端分類tab的形式是很常見的。作者在上面提到的“不能犯的4種錯誤”,大概率是指多層tab在相鄰布局里被使用的場景
棒棒噠
同感同感
很好
請問tab里面加tab、彈窗上面再加彈窗是為錯誤的原因在哪里?雖然有這個意識,但是一直不知其所以然
謝謝作者,對我們新人很有幫助! ??
good
看得出作者花了挺多時間整理的~
mark