好東西一定不容錯過，今天25學(xué)堂的小編幫大家繼續(xù)分享一個不錯的網(wǎng)站視覺設(shè)計規(guī)范。

就是平常網(wǎng)頁設(shè)計師使用PhotoShop這類設(shè)計工具進行網(wǎng)頁設(shè)計過程中的命名規(guī)范?？偨Y(jié)這一套網(wǎng)站視覺設(shè)計規(guī)范，不僅是方便后續(xù)設(shè)計師來快速上手工作，還可以讓前端開發(fā)工程師是要使用設(shè)計師的效果圖源文件的，所以統(tǒng)一命名規(guī)范和設(shè)計規(guī)范對于團隊的協(xié)作和工作效率肯定是有好處的。

由于網(wǎng)站內(nèi)容顯示范圍偏小，大家可以點擊圖片看大圖。當(dāng)然也可以收藏哦！

在此，25學(xué)堂也要感謝APP設(shè)計5群的的成都-UI-沫的分享，也感謝土巴兔原設(shè)計師的整理歸納設(shè)計。

?網(wǎng)站切圖命名的注意事項：

1、盡量考慮為元素命名其本身的作用或"用意"，達到語義化。

不要使用表面形式的命名. 如:red/left/big等。

2、組合命名規(guī)則: [元素類型]-[元素作用/內(nèi)容]

如:搜索按鈕: btn-search

登錄表單:form-login

新聞列表:list-news

3、涉及到交互行為的元素命名:

凡涉及交互行為的元素通常會有正常、懸停、點擊和已瀏覽等不同樣式，命名可參考以下規(guī)則:

鼠標(biāo)懸停:：hover 點擊：click 已瀏覽：visited

如:搜索按鈕: btn-search、btn-search-hover、btn-search-visited