网页设计中排版与布局小基础

威影文字

威影文字

2016-01-29 12:30

网页设计中排版与布局小基础,网页设计中排版与布局小基础
    有些人始终认为,网页最主要是内容,不需要再搞些门面上的东西,还拿出MUD来比 喻。可是,红花还需要绿叶陪衬。想想,若MUD不只是单纯的文本,还有画面出来, 那么,它所吸引的何止现在的这些MUD迷呢? 那么,我所要说的到底是什么呢?初学者如果能够了解一些设计上的东西,那么, 自己的页面不会显得乱,自己看了也开心,别人看了也开心,何乐而不为呢?     我们的主页,说到底,只是一个800*600的画面,那么,我们要怎么对它进行安排 才合理呢? 首先,也是最重要的一点,就是先停下创作,先想好一个主题?quot;设 计,是一种有目的的创造"。若在动手之前并不了解自己将要做什么及要怎么做, 而只是一味的靠操作PHOTOSHOP的滤镜而达到一种特效的话,那么,最终做出来的 东西最多局部看得觉得挺不错的,但全局就显得太复杂了。 页面上的构成,如果要让别人一眼望去觉得很BEAUTIFUL,这里面实际上是有很大的学问的。

  我们先来说说构成,"构成:是将造型按视觉效应、视觉力学和精神力学等原则组成的,具备美好形态的造型"。 构成形式里,有空间构成(平面构成和立体构成) 和时间构成(静和动)。 我们的创作,就是要协调这里面的种种关系,顺应视觉 感受,才能够打动观看者的视觉,得到我们想要的效果。在这些形形式式里,都有 着如下的部件: 点:我们一般认为,点是指圆形的,但这是不正确的。只要在空间里有非常少量的 面积,无法形成一个视觉上感觉的图形,都是一个点。无论什么形状都可以。 线:点集合在一起就形成线。 面:一个平面。 体:一个物体。一般是指物体占据的空间,有三维形状。

  那么,当点、线、面与体集结在一个页面上时,它们的关系要怎么协调呢?它们之间都有什么作用呢?

  点有集中视线、紧缩空间、引起注意的功能。 两个点相距不远而且形状不等时,一般由小向大看。 近距离的点引起面的感觉。 灵活运用点,可使你的页面有一些本质上的变化。 当点占据不同的空间时,它所引起的感觉是不同的。

  (1) 居中引起视觉集中注意 。
  (2) 上引起下跌落感。
  (3) 在上左或上右引起不安定感。
  (4) 下方中点,产生踏实感。
  (5) 左下右下,增加了动感。

  为什么会这样呢?因为人的视觉,都是经过对生活的感觉都得来的。 在下方的东西,一般联想到大地。 在上方的东西,一般联想到浮云。线、面、体亦然。

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/html/)

  线,又分为直线和曲线。直线:给人以速度,明确而锐利的感觉,具男性感。曲线,则优美轻快,富于旋律。曲线的用法各异,需结合自己的需要。 而直线又分为斜线、水平线及垂直线。水平线代表平稳、安定、广阔,具踏实感。垂直线则有强烈的上升及下落趋势,可增加动感。斜线,一般我没有怎么使用,因为它造成视觉的一种不安定。
  人们每看到一个东西,都试图用横直来分析,斜、歪是人们所不愿意见到的,但 适当运用部梢源锏揭恍┨厥庑Ч ?这个要靠个人的感觉。 面,指的是二度空间里的形。 面又分为几何形和任意形,我个人比较喜欢任意形,因为它往更具人情味。 几何形使人有一些机械感,但是,每一个图形里都会要用到几何形,请看它们各代表什么:

  (1) 圆形:运动及和谐美
  (2) 矩形:单纯而明确,稳定
  (3) 平行四边形:有向一方运动的感觉。
  (4) 梯形:最稳定,令人联想到山。
  (5) 正方形:稳定的扩张。
  (6) 正三角形:平稳的扩张。
  (7) 倒三角形:不安定,动态及扩张、幻想。

  我们在日常生活中所看到的东西,都是由于形与形、图与底的相互关 系。图形之间,图底之间,正由于对比产生差异而被我们所感知所接 受。 图与底的视差越大,图形越清晰,对视觉的冲击力越大。 那么,平面上 有那么多的东西,我怎么才能够确定它是否是最主要的呢?请看:易于 成为"视觉中心"的条件:

  (1) 居于画面中心。
  (2) 垂直或水平的比倾斜更易成为中心。
  (3) 被包围。
  (4) 相对于其它图形较大的。
  (5) 色感要素强烈。
  (6) 熟悉的图案,如果这件东西我们很熟,则一定会以它为焦点。

  可以把自己认为最主要的东西做大一点,突出一点,色彩鲜艳一点,其它的东西小 而且色调不要那么鲜明,以免抢了主题的"风头"。 注意:图与底之间的关系是很重要的。 如果我们确定了背景,再确定主题,在做页面时不注意而将图与底的关系设置为 1:1,那么,我们也许发现,底与图的力场争夺非常激烈,即有时底被我们认为是图。它们之间的关系只是相对,而非绝对。一般来说,底要大于图,而图要鲜于底。

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/html/)

展开更多 50%)
分享

猜你喜欢

网页设计中排版与布局小基础

Html CSS布局 Div+CSS XHTML
网页设计中排版与布局小基础

网页的版式设计---网页的排版与布局

Web开发
网页的版式设计---网页的排版与布局

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

网页的排版与布局思考

Web开发
网页的排版与布局思考

CSS基础:24条网页布局开发小技巧

Html CSS布局 Div+CSS XHTML
CSS基础:24条网页布局开发小技巧

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

网页设计基础:基本的页面设计元素布局比例

Html CSS布局 Div+CSS XHTML
网页设计基础:基本的页面设计元素布局比例

详细解析海报设计作品中排版技巧

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
详细解析海报设计作品中排版技巧

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

《跨越我的尸体2》白金攻略 难点奖杯获取方法

《跨越我的尸体2》白金攻略 难点奖杯获取方法

《部落战争》COC低本冲杯解析

《部落战争》COC低本冲杯解析
下拉加载更多内容 ↓