坚持为客户提供有价值的服务和内容

网站前端设计的注意事项是什么?

admin | 2020-02-20 | 分享至:

  网站制作中,前端页面设计应该怎么做,需要注意什么事项呢,有哪些要求呢?下面为大家分析。

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

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

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

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

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

  3、 将脚本放在底部。

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


网站前端设计的注意事项是什么?


  设计师需要注意的几点:

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

  配合程序开发人员我们需要注意的(xhtml):

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

  1) 宽度是否是固定大小;

  2) 宽度最大限度;

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

  如文字,需了解:

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

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

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

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

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

扫二维码与项目经理沟通

7*24小时为您服务

解答:网站优化,网站建设,APP开发,小程序开发,H5开发,品牌推广,新闻推广,舆情监测等

  非常感谢您有耐心的读完这篇文章:"网站前端设计的注意事项是什么?",更多内容请继续浏览,我们将为您提供更多参考使用或学习交流的信息。我们还可为您提供:网站建设与开发网站优化品牌推广、APP开发、小程序开发新闻推广等服务,我们以“降低营销成本,提高营销效果”的服务理念,自创立至今,已成功服务过不同行业的1000多家企业,获得国家高新技术企业认证,且拥有14项国家软件著作权,将力争成为国内企业心目中值得信赖的互联网产品及服务提供商。如您需要合作,请扫码咨询,我们将诚挚为您服务。
我要咨询
姓名 :
电话 :
文章分类