网页设计前端页面规范要求和注意事项

相关推荐

网页设计前端页面规范要求和注意事项

　　网页前端的设计是直接面向用户的，是用户所看得见的效果，以下是小编整理的网页设计前端页面规范要求和注意事项，欢迎参考阅读!

　　网页设计前端页面规范要求和注意事项

　　1．尽量把页面的背景图及小图标整合到一张图片，用CSS定位方法。这样以减少http请求，从而降底网站的下载的速度。

　　2．尊从内容与页面样式的脱离，如需要，同样也要做到布局与COLOR的脱离。什么样的图片属于内容：从数据库里取出来的图片。凡是不属于内容的图片请都用背景。

　　1）页面代码，做到精简，逻辑性清楚；公用部位可以引入进来，比如头部，脚部。

　　2）CSS逻辑清析，精简。可在不改变功能的前提内，做到能更换页面布局及换色。

　　CSS样式每个页面引入不超过两个文件，一个是COMMON：它包含整个站点都需用到的公用部分，如整体布局，头部，脚部，框，按扭等。另一个是当前页的CSS。CSS文件引入在2个之内，减少http请求避免CSS的表达式。

　　3．将脚本放在底部。

　　这样页面就可以逐步呈现，而且页面中的可视组件可以尽早下裁。

　　配合程序开发人员我们需要注意的（xhtml）：

　　1．了解用户可编辑上传修改的“图片”，“文字”区域的需求。根据需求来定位控制，以保证页面的稳定显示。如图片，需了解：

　　1）宽度是否是固定大小，

　　2）宽度最大限度，

　　3）大小不一样时的居中显示

　　如文字，需了解：

　　1) 文字的最大长度。及加“…”省略号区域,

　　2) 在测试中经常也会碰到英文无空格情况，得用overflow: hidden的方法隐藏溢出部分。

　　2．每个页面加上正确显示的TITLE。

　　3．在页面中尽量完成每步交互效果，包括既时响应的。

　　4．提交程序员的DEMO必须是连贯的，交互效里齐全，而且经过自已在IE6.0，IE7.0，FIREFOX一次以上的整体测试。

　　设计师需要注意的几点：

　　1.尽量考虑为元素命名其本身的作用或”用意”，达到语义化。不要使用表面形式的命名。如:red/left/big等。

　　2.组合命名规则:

　　[元素类型]-[元素作用/内容] 如:搜索按钮: btn-search

　　登录表单:form-login

　　新闻列表:list-news

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

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

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

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

　　4.用户体验方面需要注意的：

　　1）．每个连接，按钮要做上鼠标hover时的一个变化效果。如果hover时是换一张背景图片，请把这两张图片整合在一张图片中，以防止在hover时，页面还在download变化的那张图片，这样会出现那个按钮无图的间隔；

　　2）． INPUT有个label，可以让用户在点击字时，光标自动跳入相应input中；

　　3）．图片应该有alt属性，以备图片阻止时，文字的替换。

　　网页设计要注意的事项

　　1、合理的页面布局

　　在设计网页时，一定要注意页面布局的合理性。一个合理的布局和清晰的页面可以让人们感到舒适，并花时间去了解。注意版面设计，不要版面杂乱，搭配要注重协调与简洁。要正确设计页面的布局，以呈现一个新页面。

　　2、舒适的色彩设计

　　无论哪个行业的网页，在设计过程中都不要一味追求视觉刺激，做出奇怪的色彩搭配。在设计网页的过程中，设计师必须注意页面色彩的搭配，多用暖色、冷暖色调等。只有色彩足够和谐、舒缓，才会让人有继续停留的想法。

　　3、新颖的内容

　　网页内容就像人的灵魂一样，是不能缺少的。设计一个网页，肯定是想用来推广某个企业或产品，如果想用内容吸引用户，必须有新颖的内容。从文本或其他形式的内容开始，要注意内容的原创性和新颖性。

　　4、减少特殊字符的使用

　　在设计网页时，使用尽可能少的特殊字符。在不同的计算机或不同的平台上，看到的情况有时是不同的。如果使用特殊字符，可能会产生较差的显示效果。因此，应该尽量减少特殊字符的使用。

　　网页设计组成与规范需要遵循的原则及技巧

　　1、字体：中文常用宋体、微软雅黑和黑体，其中黑体常用于导航或者标题，英文常用无衬线的Arial、Helvetica、Verdana和衬线的Georgia、Times。

　　2、字号：中文最小字号为12px，英文最小字号9px，不过建议10px起，因为网页里面的字号通常为双数。

　　3、样式：网页里宋体12px和14px通常设置为无，宋体的其他字号和其他字体通常平滑即可。

　　4、粗体：大片的阅读性文字不适合加粗，文字加粗通常适用于导航、标题或者强调性的文字上。

　　5、颜色：除了标题或者交互等强调性的文字以外，其他重要文字用#333333居多，次要文字用#666666居多，辅助文字用#999999居多。

　　6、行高：行高可以根据字号来定，一般是字号的1.5-2倍居多。

　　网页设计组成与规范需要遵循的原则及技巧

　　1、主次：也就是要大小混排，就连最简单的电商列表页，还要有侧边栏或者底部推荐产品的不同尺寸产品图来陪衬，这样的目的是避免浏览乏味，中和视觉。

　　2、大小：有的广告图会比较大来增强视觉冲击力，尤其是专题页头图，建议不要超过一屏，不同分辨率的电脑一屏的尺寸会有所不同，一般800px上下最常见。

　　网页设计组成与规范需要遵循的原则及技巧

　　1、宽度：边框宽度1px即可。

　　2、颜色：边框颜色一般#cccccc居多，或者更浅一点的颜色也可以。

　　3、重复：同一个模块里面，如果已经有背景颜色或者边框的存在，也就是说排版已经明显整齐，就不要重叠使用边框。

　　4、距离：有边框的时候，内容要跟边框分离一点，也就是内外边距要有。

【网页设计前端页面规范要求和注意事项】相关文章：