电脑软硬件应用网
当前位置: 电脑软硬件应用网 > 设计学院 > 网页设计 > 正文
[组图]网页设计教程之设计的步骤及思考
网页设计教程之设计的步骤及思考
2008-9-19 12:17:15  文/weilaixu   出处:博客网   
  与之前的步骤不同,这是实际操作的步骤.本文包括了大局的步骤和栏目,图片,小到一个图标的选取等等等等,可能会漏掉很多的东西.欢迎补充.我只是引导你去思考,本章绝对不是网页的标准制作步骤,我相信也没有什么标准的制作步骤.

  本章的设计步骤是建立在网页设计进阶之一 (步骤和大局观)之上的.可能会涉及一些平面相关的知识.和网页与平面的比较.网页与平面的区别我会在以后在写.

  本章所讲的基于PHOTOSHOP
软件
制作.

  本章印证了网页90%是排版这句话.

  遵循从整体到局部的顺序.

  1:在定位的基础上,搞明白自己要做什么.

  这句其实不用解释了.你要明白的是我要做的站大概有什么样的效果,并有例子在脑海里浮现.要做的这个站属于什么样的行业,这个行业的站都有什么共同的特点.

  2:你的目标/效果和你希望达到的目标/效果是怎么样的.你设计的目标,与客户的目标和公司领导的目标是否一致,有什么区别.

  3:你要如何去做,怎样去做,用什么样的手法手段,来达到你的目标/效果.又用怎样的设计来强化和突出这个效果.

  4:你的布局,应该怎样和你的设计搭配,怎样来突出你的思路.

  5:是否有不同的风格,是否只是颜色上的变换.(将所有含有颜色的背景层保留)

  这几步,是在动手之前要写下来的.甚至有更详细的功能和版面的东西,自己搞定吧.

  下面才是真正的动手设计的步骤.

  1:确定分辨率.和不同分辨下对应的效果.

  与平面的载体的不同,决定了网页具有比平面更灵活的表达方式.

  站点的满屏概念其实是分相对和绝对两种,相对的,是针对当前分辨率的满屏.而绝对满屏幕,则是不同的
显示器
不同的分辨率下都是满屏,一般我会给出一个最小分辨率,最大到无限.相对满屏,比如1024×768,800×600等.最好是用绝对宽度来定义,就是像素为单位.而绝对满屏,则用百分比.

  在确定分辨率之后,你的PS图要比实际设计的图要大.要考虑用户使用高于你设计的分辨率下,网页以怎样的形式表达,是居左,还是居中,还是靠在右边.

  2:大背景,3条辅助线及边界处理.结构(头部,中间,底部的大概位置.)

  整体是否有背景.

  左边界线,右边界线,和中间线.

  如果是绝对宽度的设计,那么用户使用较高分辨率浏览时,内容与多出的屏幕是否有分割.

  结构,究竟是上中下结构,还是左中右结构,还是其他的.每一块,大概放什么内容.

  

[1] [2] 下一页

  • 上一篇文章:

  • 下一篇文章:
  • 最新热点 最新推荐 相关文章
    页面自动跳转的几种实现方法
    网站内容的四种分类形式 或多或少的…
    如何指定规范网页?rel="canonical"
    浅谈网站评论体系设计的不足之处
    网页中“上一篇”“下一篇”设计思考
    网页设计进度指示器帮助用户预测步骤
    网页用户体验:网页注册表单设计分析
    网页设计常出现8大问题
    网页设计的形象思维归纳
    彻底去掉动易内容页顶部的“改变图片…
    关于45IT | About 45IT | 联系方式 | 版权声明 | 网站导航 |

    Copyright © 2003-2011 45IT. All Rights Reserved 浙ICP备09049068号