网页排版与布局
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
上下水平设计方式,它有适合信息量大,维护方便的特点, 适用于商业网站。
网站导航的设计——清晰,简洁,一致
导航的意义a,帮助用户寻找他要的东西b,告诉用户他在
哪里c,更好的展现网站的内容d,使浏览者对网站有信心 固定导航应包括下列最常用的5个元素:1,网站标识2,栏 目3,公共服务(帮助,网站地图,关于我们,联系我们等)4, 返回主页5,搜索
列等。
精简文字——生动的有活力的作品是简洁的 不要用文字去填充空间 减掉那些没有用的文字的好处: a,减少了页面的干扰; b,使有用的内容更突出; c,使页面更短,无需滚屏就可以一眼看到更多的东西
巧妙地运用动态元素。以横贯页面的长条色块统一画面, 图片安排随意,疏密有致,使整体风格既统一又有变化。
1.把页面分割成清晰明确的不同区域很重要,因为 可使用户迅速判断出哪些区域应重点看,哪些可以放 心地忽略。 2.创建清晰直观的页面层次结构;越重要越要突出;逻 辑相关的内容视觉上也应该相关 3.用嵌套的方式形象地显示从属关系
二.网页的布局形式
整个页面可以分为几个部分,每个部分有不同的功 能,也能体现不同的形式,中间的部分一般是最大的, 因为它承载着主要的信息,使用者主要就是看中间这个 部分的内容, 有些网站也为了出新意把整个页面进行任意划分, 特别是个人网页,例如把整个页面平分为左右两个部分, 但是这样会让人不着重点,还有的框架用得太多,影响 了页面的整体性……
1. 网页上尽量不出现使人费神琢磨的东西
2. 设计的网页应一目了然 3. 设计的网页应便于浏览,而非阅读 4. 利用惯例:惯例是因为有效而成为惯例的,惯例 的广泛采用可使用户毫不费劲地在网站畅游
一、网站的层次结构:
制作便于浏览页面的一个大敌就是视觉干扰,它 包含两类: a,混乱页面主次不清,所有的东西都引人注目 b,背景干扰
5.曲线型 图片、文字在页面上作曲线的分割或编排构成,产生 韵律与节奏。网站的导航标题沿图形弧线排列。
6.倾斜型 页面主题形象或多幅图片、文字作倾斜编排,形成不稳定感或 强烈的动感,引人注目。 文字水平排列,将画框斜置,产生对比与动势,印象被加强。
7.对称型 对称的页面给人稳定、严谨、庄重、理性的感受。
设 计 前 的 一 些 思 考 :
1.一个用户首次进入网站首页能清楚知道的问题: a,这是什么地方; b,这里有什么; c,我在这里可以做些什么 ; d,我为什么要呆在这里 2.用户不做最佳选择,只要满意, 原因:a,太匆忙 b,即使选错,代价也不大 c,权衡选择未必能增加胜率 d,猜测更省劲
3.我们会把注.意力集中于符合下列条情况之一的词语或短语: a,与手头工作有关的; b,满足当前的个人兴趣的; c,对神经系统有冲击力的词语,如免费,甩卖等,及自己的名字.
1.骨骼型 网页版式的骨骼型是一种规范的、理性的分割方 法,类似于报刊的版式。常见的骨骼有竖向通栏、 双栏、三栏、四栏和横向的通栏、双栏、三栏和 四栏等。一般以竖向分栏为多。这种版式给人以 和谐、理性的美。几种分栏方式结合使用,既理 性、条理,又活泼而富有弹性。
题头加三栏式的设计方式:题头就是在最上行,左边是网站 标题图案,右边是正文。
饱满的页面构图,巧妙地利用表盘稳定住页面四角。
人物全部退底,文字色块的安排轻松随意,是面向年轻人的设计。
根据页面色调灵活运用文字的色彩,既符合页面的整 体氛围,又保证了可读性。
密集的文字形成块面,丰富了页面层次。
2.满版型 页面以图像充满整版。主要以图像为诉求点,也可将部分文字 压置于图像之上。四边出血,向外扩张,适合年轻人的口味。
3.分割型 把整个页面分成上下或左右两部分,分别安排图片和文案。 分割线上的压置的图片既打破了页面分割的生硬感,也使自 身得到强调。左边框上的小标签乃点睛之笔。
4.中轴型 沿浏览器窗口的中轴将图片或文字作水平或垂直方向的 排列。水平排列的页面给人稳定、平静、含蓄的感觉。 垂直排列的页面给人以舒畅的感觉。
但是作为个人网站,就不一定要采用这些方式,完 全可以更新颖、更艺术些。什么又算是灵活多样? 怎样做到新颖、艺术呢?没有一个模式去套,它需 要你去领悟、去创新。
留白 我们应该在网页中通过留白的作用,使整个内容排布 得松紧有度,给人以跌宕起伏之感。 把整个屏幕都塞得满满的,让人感觉不乱也很挤。网 适当地留白,可以提高网页的视觉效果和艺术感染力。 留白既可以给人带来心理上的松弛,也可以给人带来 紧张与节奏。利用留白的体量感来使页面布局平衡, 在一种不平衡中营造平衡,这样就会使页面生动起来。
以相对对称手法制作的导航页面。
Βιβλιοθήκη Baidu
8.焦点型 焦点型的网页版式通过对视线的诱导,使页面具有强烈的视觉 效果。通过离心的版式,清晰地传达出网站提供的服务
9.三角型 网页各视觉元素整体看为正三角形的构图,主体形象稳定而突出
10.自由型 自由型的页面具有活泼、轻快的风格
引导视线的图片以散点构成,传达随意、轻松的气氛
在块状组合 结构中,如 图片太多, 则无法突出 重点。这个 页面通过改 变图片的面 积,有效地 分开了
图片与文字穿插编排,形成散点组合。运用线条的分 割、文字的群组化以及单一的背景色形成整体
多幅图片使水平垂直线规律地等量分割,获得了理性与秩序的美。
以水平分割为主的页面,右上角与左下角安排了文字,打破 呆板的感觉。
“破”
这个“破”是指打破拘束、打破平衡、增添动
感的手法(不是动画的动感)。有如国画中画兰 花——“一撇二交三破”,每片叶子都朝上竖着当
然不好看了,这一“破”就是其中的道理。
简单
“美就是简单”,平淡之中才显真色。过于复杂,
过于花哨,自然就偏离了美的轨道,比如过多地使 用特效,过分眩目的图案,过于复杂的文字版块排
网页排版与布局
网页设计拥有传统的媒体的不具有的优势,例如 是能够声音、图片、文字、动画相结合,营造一个富 有生气的独特世界,同时它拥有极强交互性,使使用 者能够参与其中,同设计者相交流。但是最基本的模 式还是平面设计的内容,也就要考虑形式美的内容。 所以现在强调网页设计的创造,表现在对页面的 布局上,具体说就是体现在页面的形式美方面。就是 通过页面的合理安排,例如文字的条理清楚、流畅、 整体,使形式美得到体现。