网站元素与排版规则

网站元素

必备元素:网站标志LOGO。网站导航MENU。主场景动画BANNER。内容区。版权信息

可选元素:搜索电话,在线客服,流量统计

网站的分类:按照最终技术实现方式

  1. HTML网站:优点:信息量大,布局规整,板块区分明显,可以反复编辑更新。缺点:不够美观,没有动效。使用方向:企业站,新闻网站。
  2. h5+css3: 优点:画面更加美观,有一些简单动画效果,一个画面呈现一个内容。。缺点:网站信息量偏小,只适合做某一产品或某一活动的宣传,更新内容很复杂,使用方向:企业宣传页面。

flash站:优点:视觉效果极佳,足够吸引人。缺点:载入慢,一般情况下不能更新内容,不支持移动端

企业站

布局特点


内容区在左,功能区在右。列表区在左,内容在右

网页元素中的字体


字号

正文或者说明类文字,宋体12点-14点,消除锯齿方式,无。颜色代码 #666 #999

微软雅黑可以作为各大字号的标题 14-24点,消除锯齿方式,平滑。#333
网页中一般选用系统自带文字(宋,微软雅黑)作为网页设计字体。少数清情况下使用特殊字体。网页设计中的主视觉图片(banner设计)仍然可以使用所有特殊字体。

排版规则


版心:(安全尺寸,可视范围)920-1000Px的均是可以用范围,920/940/960/1000为常用尺寸,关于第一屏的高度限制:580-720px

网页的结构层级:

首页(一级页面),子页面:从首页点击进入第二层级,(二级页面,次页面)三级页面(新闻内容页)

首屏结构尺寸


顶部区域:30-50px,

logo区域:和顶部区域相加小于等于180即可。
banner和顶部区域及logo区域相加小于580

HTML5网站

H5页面宽度和高度设置

1设计效果图,参考设备分辨率,后期代码自适应。

2 如果屏幕分辨率为1366px*768px,则页面可以设置为1366px*650px

如果屏幕分辨率为1440px*900px,则页面可以设置为1440px*750px

如果屏幕分辨率为1920px*1080px,则页面可以设置为1920px*900px

主页面和子页面的关系

1 子页面是主页面某一部分的详细说明。

2 关闭子页面可以返回主页面。

子页面导航逻辑关系:

在不关闭子页面的前提下,直接访问主页面的其他内容。

整套H5网站的制作流程

1 拿到资料后做项目分析,

2 参考同行业类似设计(页面),

3 注意各项页面逻辑关系,

4 注意页面元素

yang, xiaoyun

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: