欢迎来到广州墨动网络官网,墨动网络专业的广州网站设计公司

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

发布日期:2014-3-13 来源:墨动网络  标签:广州网站设计公司    浏览次数:4678

进行蓝绿色调的骨骼型版面设计时,首先从主页的版面设计着手。在主页中显示的主要版块为用户登录、产品系列、产品搜索、公司简介、媒体聚焦、产品橱窗.....

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年建站经验的核心力量,一直致力于网页设计,推广优化服务.墨动网络经营宗旨:平民价格 高端作品 优质的售后服务.

地址:广州番禺南浦大道民安路五十五街1巷1横巷7号之一 传真号码:020-84785358
版权所有广州墨动网络 Copyright© modong.org 2009-2016.All Rights Reserved . 粤ICP备14033222号-1   

粤公网安备 44011502000039号