全国咨询/投诉热线:400-618-4000

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

更新时间:2017年11月20日17时30分 来源:传智播客 浏览次数:

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属性,以备图片阻止时,文字的替换。


本文版权归传智播客UI设计综合设计师学院所有,欢迎转载,转载请注明作者出处。谢谢!

作者:传智播客UI设计综合设计师培训学院

首发:http://www.itcast.cn/ui/

javaee

python

web

ui

cloud

test

c

netmarket

pm

Linux

movies

robot

uids

北京校区

    14天免费试学

    基础班入门课程限时免费

    申请试学名额

    15天免费试学

    基础班入门课程限时免费

    申请试学名额

    15天免费试学

    基础班入门课程限时免费

    申请试学名额

    15天免费试学

    基础班入门课程限时免费

    申请试学名额

    20天免费试学

    基础班入门课程限时免费

    申请试学名额

    8天免费试学

    基础班入门课程限时免费

    申请试学名额

    20天免费试学

    基础班入门课程限时免费

    申请试学名额

    5天免费试学

    基础班入门课程限时免费

    申请试学名额

    0天免费试学

    基础班入门课程限时免费

    申请试学名额

    12天免费试学

    基础班入门课程限时免费

    申请试学名额

    5天免费试学

    基础班入门课程限时免费

    申请试学名额

    5天免费试学

    基础班入门课程限时免费

    申请试学名额

    10天免费试学

    基础班入门课程限时免费

    申请试学名额