乾坤纵横科技

首页>研究中心>网站产品页面设计

网站产品页面设计

发表时间:2015-02-10

作者:管理员

点击量:1228

1、产品二级页面产品中心布局设计

页面布局:上、中、下三个部分,依次为header、content、footer。其中header、footer部分沿用自网站主体模块。

网页背景色调:天蓝色自上而下主渐变,以迎合主站的天蓝色背景色调。

页面主体部分居中宽度为960px;

网页主体content部分采用两列浮动的布局。网页使用流式布局的话即尺寸采用百分数而不是像素设置的。这样能够相对于浏览器窗口进行伸缩,例如主体使用960px,而大多数用户使用的浏览器窗口为1250px那么百分数就是(960/1250)*100%=76.8%。

页面顶部部分Head的布局

1、Header部分由三部分组成,分别由logo、hot-line、nav、banner部分组成。

第一部分有logo和hot-line组成。

第二部分由Navegatiom导航栏水平导航条。

第三部分是滚动图片bannner,能最大限度的在明显的位置滚动显示信息。

2、页面主体部分Content的布局

网页产品二级页面设计

主体content部分布局为2列式布局分别由side-bar和main组成.

1、side-bar

Side-bar位于content左边用于显示产品中心(product-center)部分,由产品中心和主目录的树形拉层叠式菜单(nav-right).如下图所示

Nav-right菜单显示主要用于显示客户类型,右弹出的菜单显示符合该类型用户适合使用以及可选择的产品.

这样设计最大限度的保证客户在相对容易理解的直接相关的行业,直观明了的知道适合自己使用的产品.不用浪费时间一一查看所有产品相关信息.

2、main

该部分位于content内部的右侧,是展示产品的相关信息的展区。展示有左边的图片(W:210px;H:182px)和右边的文字介绍(w:380px;H:182;)组成。

该页面目录式的显示了产品中心的产品,介绍产品的相关信息。More按钮设置点击进入相关产品的详细内容介绍。

Footer页面底部部分的布局设计

Footer部分具体显示公司相关信息、联系方式、公司邮箱等等.

1、违章查询产品3级页面产品中心布局设计

产品3级页面产品中心布局

产品介绍部分的主体部分content的布局设计。

Header部分和footer部分沿用了2级也面的布局,在主体部分content的main层做相应的调整。

1、layout

具体的产品介绍采用页面的tab选项卡切换页面,最大限度的显示在一个页面显示最大的信息量,避免用户了解相关信息而拉动长长的页面导致用户产生反感。

 

免费咨询热线

4000-668-806

在线客服