蓝绿色调的骨骼型版面设计

1.蓝绿色调的骨骼型版面设计

进行蓝绿色调的骨骼型版面设计时，首先从主页的版面设计着手。在主页中显示的主要版块为用户登录、产品系列、产品搜索、公司简介、媒体聚焦、产品橱窗、咨询中心、友情链接，产品目录、导航栏目为网站首页、关于ABC、资讯中心、电器新品、客户中心。根据任务需求分析的结果，首页的美工图设计可从如下几个流程入手。
 

    (1)首页的版面布局。在划分首页的各功能区域时，可以先忽略色彩的关系，因为此阶段主要是把ABC公司最有特点的几块信息在首页中进行编排，因此为提高工作效率或方便日后调整，可在Photoshop或者Core1DRAW中进行绘制，如果在Photoshop中绘制，注意不要把原始图层合并。(以下所有操作均以在Photoshop CS3中进行为例)首页版面布局如图3-41所示。

    (2)副页的版面布局。副页的画面上半部分保持与首页的一致性，是为了使公司网站有个整体统一的风格，Banner部分依据分类属性的不同而设置对应的动态效果，使动画部分更具针对性，也是为了让产品的展示更能抓住消费者的眼球。副页的左下部分作为二级栏目显示区域，引导浏览者能迅速查询某一产品的详细信息，作为页面最佳视觉区域的中间部分，则留给最为主体的图文信息。副页布局如图3-43所示。

2.色彩与版式结合的效果图
 

    ABC公司网站的首页和副页的布局确定后，就可以把选定的色调运用到这个版式中去，使网站的整体风格逐步完善。为了使首页与副页的色彩效果保持一致，先确定主色和辅助色，并记录这些颜色的十六进制数值。为了保证某些效果的完美性(如:投影、渐变等效果)，此阶段的效果图绘制工作可以在Photoshop中来进行，因为CorelDRAW中的图形是矢量图形，对于表现投影、渐变等效果，可能会比较死板。
 

(1)主色、辅助色、点缀色的十六进制数值，如图3-44所示。

    在Photoshop绘制时，哪怕是一个像素的差异都要严格控制，即各部分的间距大小要精确到一个像素，这样整体完成的页面才会显得严谨有序。同时，各区域也不要都紧紧靠在一起，这会让人感觉透不过气来，ABC公司蓝绿色调首页效果图中，中间的产品展示区域与周边的区域有明显的留白，目的就是为了避免浏览者的视觉紧张感和疲劳感，使留白成为浏览者视觉缓冲的地带。

副页中，二级栏目的名称直接显示在左列中，这样是为了节约页面上部导航下方的空间，使中间的详细信息区域更加突出，便于主体信息的传递。
........................................................................................................................................

 广州网站设计公司首选广州墨动网络(http://www.chfish.net),成立于2007年，具备7年建站经验的核心力量,一直致力于网页设计，推广优化服务.墨动网络经营宗旨：平民价格 高端作品 优质的售后服务.