土巴兔网站视觉设计规范案例模板参考

好东西一定不容错过,今天25学堂的小编帮大家继续分享一个不错的网站视觉设计规范。

就是平常网页设计师使用PhotoShop这类设计工具进行网页设计过程中的命名规范。总结这一套网站视觉设计规范,不仅是方便后续设计师来快速上手工作,还可以让前端开发工程师是要使用设计师的效果图源文件的,所以统一命名规范和设计规范对于团队的协作和工作效率肯定是有好处的。

由于网站内容显示范围偏小,大家可以点击图片看大图。当然也可以收藏哦!

一份网页规范

在此,25学堂也要感谢APP设计5群的的成都-UI-沫的分享,也感谢土巴兔原设计师的整理归纳设计。

 网站切图命名的注意事项:

1、尽量考虑为元素命名其本身的作用或"用意",达到语义化。

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

2、组合命名规则: [元素类型]-[元素作用/内容]

如:搜索按钮: btn-search

登录表单:form-login

新闻列表:list-news

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

凡涉及交互行为的元素通常会有正常、悬停、点击和已浏览等不同样式,命名可参考以下规则:

鼠标悬停::hover 点击:click 已浏览:visited

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

每天更新,
全站高品质素材免费下载!