[设计杂谈24] 网页规范的制作思路（网站建设设计思路怎么写好呢）网站建设设计思路怎么写好，

网站规范是指网页设计中最基本的网页设计指南，网页规范到底有什么用？什么时间点制作设计规范？规范又需要有什么内容呢？我们做设计的朋友都会被这些问题困扰，也不知道具体该如何操作，那今天就给大家简单的分享一下网页设计规范的设计思路。

图片来源花瓣为什么要做网站规范，大多数是因为同一个项目存在多个设计师横向合作设计，以避免同一项目出现设计控件混乱问题。方便把控视觉统一性，提高效率，减少返工率。以及纵向到前端开发，当他们有了规范的约束后，在开发项目中会大大提高设计稿的还原度，网页设计规范的建立，同样也提高了前端同事的工作效率，提高复用率，减少返工的成本。规范的制定，可以让前端同事从视觉规范中了解到哪些控件是可以一次性写好并能重复调用，如按钮、行间距、字体大小、色值，图片尺寸等等，同时也会让你的网站看起来更官方，更正式、更严谨、更统一。什么时间点制作规范一开始还没做网站的时候，你能做出来规范吗？显然做出来的规范也是不合理的。那网站都设计完成之后再做规范吗？貌似也没什么用啦，当然除了找工作用！嘘嘘！那到底什么时间点制作规范呢？在网站页面设计三两个页面后，一般当我们确认首页风格稿后，其实规范就已经慢慢成型了，所以网站的规范其实不应是创建的，而应该是总结出来的，这时后面的页面或者其他设计师制作的页面就有了好的参考依据。

图片来源花瓣

规范需要有什么内容呢规范一般包括颜色、文字、控件规范等。颜色规范：设计时请尽量用256web安全色，其他模式的色域很宽，颜色范围广，在不同材质的显示器屏幕中会有失色现象。除了网站的主色（logo色居多），辅色（邻近色）和强调色（对比色）之外，还会用到大量的灰色，譬如#333333、#666666、#999999、#CCCCCC、#EEEEEE等这几个不同层次的灰色，最好再标注一下每个颜色应用在什么地方。文字规范：网页中的文字，首选肯定是系统字，所以微软雅黑和宋体是PC电脑中最常用的。对于字号来讲，正文的文字，微软雅黑14px最常用，稍微大一点16px，小一点12px都可以接受，但是再大就会很不舒服，再小用户就该看不清了。正文定义好后，对大标题，小标题，导航，注解的文字依次进行规范总结，这样整个网站的统一性是非常强的。控件规范：不仅仅包含页面中的控件，还要包括控件的交互规范，基本的控件有导航、button、icon、输入框、单选框、多选框、下拉菜单、开关、表单、表格、分页、步骤条、弹框等。除此之外，还需要把控件的交互状态展示出来。譬如输入框默认时的状态，鼠标移入时的状态，输入时的状态，错误时的状态和正确时的状态等。

图片来源花瓣除了这里说的最最常用的颜色规范、字体字号规范、控件规范等，还有很多内容可以做成规范，像版式、图表、列表、弹窗、切图、标注、命名规范等都可以系统的展示出来。当别人看完网站设计，再看见你有一套完整的网站规范，会觉得你的网站设计很严谨，很正规化，这也是提升网站品质的有效手段。最后总结一下，网站的规范其实和APP的规范一样的，现在市面上UI的规范还是很多的，大家可以多参考，对于规范就是总结归纳网站中的相同点而已，不过总结规范的同时更应该注重每个页面的视觉效果哦！...[ 注意事项 ]扫码下载完整版“设计周刊”内容更有往期回顾一