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

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

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

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

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

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

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

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

如:搜索按鈕: btn-search

登錄表單:form-login

新聞列表:list-news

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

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

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

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