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年建站经验的核心力量,一直致力于网页设计,推广优化服务.墨动网络经营宗旨:平民价格 高端作品 优质的售后服务.
上一篇:建网站的需求分析与策划 |
下一篇:在进行网站样式设计前首先必须明确几个问题 |
粤公网安备 44011502000039号