×

打开微信“扫一扫”,打开网页后点击屏幕右上角分享按钮

×

打开微信“扫一扫”,关注我们官方微信^_^

梦创义官方微信

首页 > 新闻 > 网站制作教程 > 网站效果图设计:布局与步骤

网站效果图设计:布局与步骤

2018-04-121022分享

一、网站效果图设计的定义

网站制作人员在了解客户需求之后,要根据客户需求起草网站策划书,客户同意策划方案后,网站美工要根据客户要求进行网站效果图设计并制作出若干张“网页效果图”,图片格式多为.jpg .psd .png,用户选取一张或多张用来做模型,设计师或者根据用户意见再次修改效果图,直到用户满意。

网站效果图设计是网站项目开发中非常重要的一环。通过效果图,客户可以把自己想展示的内容以图像的方式表现出来,因此效果图设计阶段是网站开发中最繁杂、最漫长的阶段,往往要占据项目开发时间的三分之一甚至三分之二。网站前台人员以效果图为模型,使用Dreamweaver等网页制作软件搭建成真正的网站。

网站效果图设计:布局与步骤

二、网站效果图设计的步骤

我想这是很多人关心的话题。其实网站效果图设计的方法以及过程均不相同,但以下设计思路可以借鉴!

1、客户需求:主要是听取客户关于项目的具体要求。

2、 网站策划:明确网站建设目标,收集客户资料,分析网站类型,确定网站风格。前面这2步是网站效果图设计之前应该了解的,不然不明的客户需求与风格就盲目制作,肯定是事倍功半的效果。下面就是我们正式的步骤了。

3、创建辅助线

在进行具体网站效果图设计之前,应当考虑到网页的布局形式,可以根据策划阶段确定下来的网页布局草图,在Fireworks的画布中添加辅助线,这样做的目的是为了明确页面的布局形式和面积。需要注意的是,对于布局结构比较复杂的页面,辅助线不是一次就能够全部创建好的,而是一部分内容创建一部分否则辅助线过多会使页面混乱。

4、绘制结构底图

根据创建好的辅助线,使用Fireworks的工具或者是矩形选取框工具,把网站效果图设计好的网页中带有底色的“矩形块”依次绘制出来,形成一个整体的布局效果。 这里的“矩形块‘只是一个统称,可以使任意的形状。除了得到形状以外,还可以直接对这些”矩形块“配色,或添加纹理、滤镜,从而在整体上对页面的方案进行控制。

网站效果图设计:布局与步骤

5、添加内容

结构底图绘制完毕后,就可以开始在网页效果图中添加实际的内容了,包括文字和图像,从而完成最终的效果图方案。添加图像的时候,如何选择最合适的图像素材,如何对图像素材进行处理是非常重要的,可以说网页中图像设计的好坏,直接影响到整体的页面效果。这是网站效果图设计的重要环节,需要设计师门对此多下功夫。

6、切片、优化导出

效果图制作完毕后,首先需要进行切片。把网页比喻成一幅图,而切片就像是剪刀,使用切片软件可以把一张大图像裁剪成很多小图像。这样做目的之一是为了加快下载速度。因为浏览器是多线程的,同一时间可以下载3幅图像。
切片的另外一个目的,也是最主要的目的是为了布局的需要。很多人不知道该如何对网站效果图设计好的效果图进行切片,这是因为对布局技术不了解。同一个网页效果图,按不同的方式布局就会得到不同的切片,并没有说哪一个才是”标准”的,所以要想灵活运用切片,必须熟悉流行的布局技术。

7、客户审核

在效果图设计过程中,一定与客户保持良好的联系,最终达到一致这是网站效果图设计的最终目的,即达到客户的满意与认可。

8、 网页技术整合阶段,利用HTML+CSS+JAVASCRIP及相应用的后台编码技术完成整个网站的开发。

网站效果图设计:布局与步骤

三、网站效果图设计的布局原则

网页的布局设计,就是指网页中图像和文字之间的位置关系,简单来说也可以称之为网页排版,这是网站效果图设计着重注意的地方。网页布局设计最重要的就是传达信息,且使它们组成一个有机的整体,展现给广大的观众。可以依据如下几条来做:

1.主次分明,中心突出

在一个页面上,必然考虑视觉中心,这个中心一般在屏幕的中央,或者在左上的视觉优势位置。因此一些重要的文章和图片一般可以安排在这些部位,在视觉中心以外的地方就可以安排那些稍微次要的内容,这样在页面上就突出了重点,做到了主次分明。

2.大小搭配,相互呼应。

较长的文章或标题不要编排在一起,要有一定的距离,同样,较短的文章也不能编排在一起。对待图片的安排也是这样,要互相错开,造成大小之间有一定的间隔,这样可以使页面错落有致,避免重心的偏离。

3.图文并茂,相得益彰。

网站效果图设计时候还需要注意文字和图片的搭配。文字和图片具有一种相互补充的视觉关系,页面上文字太多,就显得沉闷,缺乏生气。页面上图片太多,缺少文字,必然就会减少页面的信息容量。因此,最理想的效果是文字与图片的密切配合,互为衬托,既能活跃页面,又使主页有丰富的内容。


本文由梦创义网站建设(www.mcykj.com)收集于网络或网友投稿,对于内容系文章作者个人观点,不代表本站观点.我们每日更新最新网站建设教程,网站制作教程,网站建设方案报价等,如果你想了解更多建站知识,请收藏并持续关注我们网站.

本文地址:http://www.mcykj.com/content-88-447-1.html转载请注明出处!

  • 基于用户创新

    界面设计日新月异,梦创义坚持基于用户需求的界面创新设计……

  • 服务设计思维

    互联网的格局发生的改变,在我们进行设计服务时更是考虑不同用户、不同……

  • 洞察用户心理

    洞察用户有意识和无意识的行为以及心理特征通过构造一系列的服务来促进……

  • 查看更多 >>

最新新闻Latest News

巴中网站建设:关于企业建站
那么,对于一个企业来说,为什么要建网站?下面是巴中网站建设总结的企……
动态网站设计:看完你就懂了
网站的发展变得越来越多样性,一个网站不仅需要实现它最基本的显示信息……
福州网站设计:一些小的建站技巧
其实真正网站优化的高手在起初网页设计之时就已经开始了网站优化,这样……
衢州网站建设,网站推广方法介绍
原创的内容更受搜索引擎以及用户的欢迎,今天梦创义科技有限公司小编和……
大庆网站建设,必要性导读
传统营销方式竞争已经非常的激烈,大庆网站建设必须面临成本越来越高、……
  

ABOUT US

北京梦创义科技有限公司成立于2012年
创始人以及初创团队成员均来自各大互联网公司
目前公司拥有员工近百人  平均3年以上从业经验
核心团队成员均有10年以上互联网从业经验

Contact information

手机:13910811300
电话:010-52661970
传真:010-82694569

网址:www.mcykj.com
邮箱:13910811300@126.com
朝阳一部:朝阳区紫芳路九号院广顺园2号楼2605A
海淀二部:回龙观黄平路19号院泰华龙旗广场E座1212室(距西三旗桥2公里,8号线育新站海淀昌平交界)

北京梦创义网站建设logo

Copyright 2008 ASAweb company. All rights reserved.