网站设计中，Web Style Guide（设计规范）应该包含哪些内容，有哪些不错的范例？

时间：2024-02-10 01:40:01 | 来源：网站运营

时间：2024-02-10 01:40:01 来源：网站运营

网站设计中，Web Style Guide（设计规范）应该包含哪些内容，有哪些不错的范例？：下面的是我自己根据自己的设计经验的愚见哦，希望能多多交流。可能有说漏的，难免，呵呵～～稍微举了一些小例子，大众化的例子，容易看到的例子，不一一解说咯，根据大框架去搜索即可了解相关知识，呵呵。说重点。。开始，另外，那些规范都是按小类来加序号的，细化了，呵呵。。


网站设计中，Web Style Guide（设计规范）应该包含哪些内容，有哪些不错的范例？自己对这个方面做了一个摸索整合，因为一个规范关系到细节的一切和态度的一切，所以基本是很重要的，学习精神也相当重要。


可能有说漏的，难免，呵呵～～


1.HTML代码规范：
符合国际标准的W3C规范，比如title,meta标签的书写，引号，标签的闭合等等书写技巧


2.CSS样式文件：
比如如何在不同浏览器，不同兼容性的情况下调用不同的css文件，css代码编写时注释的写法，hack的识别规范等等，还有别忘了样式的英文命名规范，让开发者和设计者易懂，便于团队协作。


3.文件命名和网站结构：
比如网页文件后缀的书写，文件命名，怎恶魔去影响浏览者等等。网站结构包含网站上线后的内部关系结构和开发时的目录结构，也关系到SEO，开发者的使用便利性。
再比如文件夹的使用等等


4.网页框架尺寸规范：
比如一般标准设计按照980px~1000px这类的宽度去设计，再在这宽度扩展成宽屏效果，这样兼容各种分辨率，满足不同的用户浏览视觉需求。


5.页面内部设计的用户体验规范：
比如字体使用，字体大小，按钮设计，留白，主视觉banner大小，LOGO大小等等，都是需要设计者发挥心思的地方。


6.代码编写规范：
比如什么时候用表格，什么时候用div+css.什么时候用HTML5的语义标签，总之，即让搜索引擎易识别，又让用户能易懂，加强协作精神。


7.图片文件使用规范：
根据设计需求，png,gif,jpg图片要合理使用，在透明度和网站视觉效果上稍有选择


8.网页文件运行速度：
比如调用的js，代码结构，网页文件的大小，都要合理，这样就不会影响浏览者的体验叻。尽量快


9.色彩搭配：
好的页面，都有一个"系统色彩"，什么色彩反应什么心情，色彩是一门很难的学问，也是对网页至关重要的一门标准，具体多学点美术知识，哈哈。


10.多媒体使用规范
针对特别需求的网站，多媒体也极大影响了网站的性能，是否用flash，是否用HTML5直接诶渲染，是否用js？？这些，都是设计者要考虑的规范化问题。


11.布局规范
这个范围太广了，大致要主题头部，主题，页脚，主视觉，栏目位置等等的编排，布局有多种，也可以突破传统布局，但是再个性的布局，它都有一个基础规范，怎样让用户易识别，易操作等等。


12.草图方案
任何有思想的设计出炉之前，都有一段耐人寻味的过程，没错，这就是草稿。草稿是一个流程，相当重要的流程，它决定了一个页面的基调（色彩方案、布局、风格、内涵等），当然可以大肆优化草图/素描稿，可以专门做成项目组成元素，这是成功的起点。


13.情感传达
不论你是为自己还是为别人做设计，我觉得都需要传达一个设计的情感和内心的思想。有抱怨，有成就，有责任，有想法。设计是否是自己苦心磨练的，是否是抱着自己的良心去思考的，这就是一个情感融合，一个优秀的网页设计，应当无形中融入和基本的情感，这也是一个规范。谁都不想自己做的东西打水漂，或者对不起自己花的时间和精力，对吧？


——————————————————————

补充，这是我以前的一套非常完整的和web设计规范有关的视频公开课，对于一些理论和实际操作都做了比较详细的归纳总结和演示，或许看了会有帮助，感兴趣可以直接看一下。

麦子学院限制需要注册才能全部看完，不过是免费的公开课，所以可以全部看。

WEB UI(网页界面设计)基础+进阶免费视频公开课2016完整版