网页版式浅谈

  网页中心

  由于人的生理特征所决定,在一个版面中,人们感觉到的中心比实际的几何中心要略高一点,我们称它为视觉中心,这就是为什么在一个版面设计中,主要的文字和图形经常放在中间偏上一点位置的原因,应当认识到,在版面中这个区域较之下部或边缘地区是最爱人重视的区域

  但是,这并非所有的设计都要千篇一律将版面中心放在视觉中心的位置,反之,聪明的设计师往往用种种办法,将版面中心偏离视觉中心,以取得新颖醒目的效果,他们或采用大面积空白,或通过版面运动导线的走向,色彩纯度、明度的对比进行强调、烘托,从而突出版面中心。

  画家潘天寿作画时便是这样做的,他一反传统绘画中将主体放置画面中间的惯例,以一块用线勾勒的空白大石头充满画幅,将画面的主体——老鹰或花草放在画面边缘。这种大胆破格的精神值得我们借鉴。

  网页比例

  美的形式原理存在于艺术各个门类,网站制作也不例外,好的网站制作必须遵守这些设计原理,将美融汇于网站制作中,网站制作中的页面原理的讲解虽然分十二节进行,但是你应当清醒地认识到:这些网页制作中的页面原理之所以分开来讲解,只是为了给深入研究每一课题提供方便,实质上,它们之间是相辅相成的、密不可分的,通常情况下,这些网页设计原理是既对立又统一地共存于一个网页中的。

  第一节 网站制作中的比例

  美的比例是网页设计成功的基础,好页面的首部、菜单、页面和底部的合理安排和选择,首先取决于良好的比例!

  自古以来,公认为最美的比例是黄金比(黄金分割)--1:1.618.取AB线段的二分之一作垂线与点B得BO,取O为圆心,BO为半径作圆与AO交于点C,AB为长边,AC为短边,它们的比例既为黄金比.

  还有一种美的比例标准产生于德国,我们称之为德国标准比例.既以正方形的对角线为长边,正方形的一边为短边,作圆弧得到的长方形(如上图右)是德国标准比例.其大方、朴素、公正,用之于网页设计,可使人感觉稳重、可靠,确实是一种美的比例标准。

  良好比例的运用,是网站制作中艺术修养与审美情趣综合、灵活应用的结果,切生搬硬套.

  网页方向

  在版面中,字行、字组、图片的安排都存在着某种方向的运动感,我们将其概括为水平、垂直、倾斜三类,水平线与视线左右运动的方向一致,使人感到舒展、自在、犹如广阔平静的大地,而垂直线与视线上下运动不如左右运动灵活自如,垂直的运动使人联想到瞻仰纪念牌等崇高、肃穆的活动,倾斜线条则充满着动感。

  当两条线逐渐向选拔的方向移动,我们称之为会聚,当它们相交后,便形成了角,当视线沿角的两边滑动,相交于角的顶点时,会停留片刻,然后沿角的方向继续向前移动,这也是许多指路牌使用箭头的缘故.

  还在一种情况:当两条会聚的线,在相交之前就停住时,人们的视线会不自觉的沿着一存在的虚线继续向"会聚点"移动.

  在版面中,会聚的方向通常应引向版面中较为重要的中心,而不应引向边缘次要的位置,从而分散了对主体的注意力.但是有一种例外,当将角群化处理后,多个角的不同方向形成了一个美丽而富于变化的底面,这时,单个角的方向感大大削弱,也就无所谓对主体注意力分散的问题了.

  网页分割

  网页制作中的分割是一种最基本的,随处可见的版式原理。分割有两种:1.横向分耕,2.纵向分割。

  横向分割是二维的、平面的,在一个网页中,随意排上一行字,便有意无意的存在着一个分割的问题,即:一条线被分割为两段后,两段间的比例是否美的问题,实质上,它是一个比例问题。如版心与开本比例是分割,行距、字距的确立也是分割,每一个字的设计也存在分割。在一个网页中,多层次、讲究的横向分割将复杂的局部组织成统一协调的整体。

 

  纵向分割是指向网页深处沿伸的纵深分割,使二维的平面具有三度空间的效果,犹如一幅风景画具有清晰的近景、柔和的中景、轻柔的远景一般。这些层次的形成,首先决定于每一层次与空白版面本身的明度对比,其次还有色彩纯度对比的影响。通常将这种层次对比称之为三分法,三分法使版面主次分明、清新美丽,避免了主次不分、杂乱无章的状况。各层次间的对比可强可弱,它们可以组合成无穷无尽的多种情调的版面,但是经验告诉我们,过多的层次往往影响版面单纯、清晰的气质,简练的少层次的分割往往更受欢迎。

时间: 2024-10-28 16:03:33

网页版式浅谈的相关文章

DIV CSS制作网页之浅谈CSS编码与组织技巧

css|编码|技巧|网页 如何让 CSS 代码简洁而易于编写?这恐怕是许多开发者都关心的问题.我想,大概没有什么魔法,可以保证一下就把你的样式表缩小到百分之多少,但合理的 CSS 编码与组织技巧,的确能够帮助你的更有效率地写出更清晰高效的代码,自然,样式表大小的缩减还能减少下载的时间. 组织你的样式表 尽管我们有种种 CSS 的开发工具,比如 TopStyle,比如 StyleMaster,它们可以让你对当前这个样式表里面定义了哪些规则,涉及哪些 class,哪些 ID 一目了然,但这不等于说你

浅谈网页关键词的编写方法和注意事项

网页关键词是一个老生长谈的事情了,那么怎么样去编写网页关键词呢?我们在编写的过程中又应该注意一些什么问题呢?下面让我来做一个浅谈: 网站关键词其实就是一些组词.成语或短语,关键词分为短尾关键词和长尾关键词,那什么叫短尾关键,什么又叫长尾关键词呢?这个问题大家可以点击我的新浪博文"什么是长尾关键词和短尾关键词,其优缺点是什么?:http://blog.sina.com.cn/s/blog_6870de740100j0ks.html",那么我们到底怎么写一个页面的关键词呢? 首先我们必须注

浅谈SEO过程中网页关键词的修改方法与注意事项

在SEO的相关论坛中经常会看到一些网友发帖说,想去修改一下自己的网页标题或者关键词,因为大部分想修改的朋友都是没有把握自己到底能不能修改完毕之后,百度不会将自己的网站或者网页进行降权或者K的处理.首先我们必须要弄明白三个问题: 1.百度对于关键词修改的处理方式与处理原则; 2.我们为什么要修改网站或者网页关键词; 3.目前百度虽然是一个中文引擎功能非常强大的搜索引擎,我们还的考虑一下,我们的流量分布情况,到底是百度的多还是谷歌的多,还是搜狗的多,还是Bing的多,还是Yahoo的多,还是soso

浅谈site域名结果页之网页权重分析

在A5写了<浅谈SEO招聘为什么这么难>.<浅谈医疗网站的推广模式>后,toxace好久没有写原创文章了,主要是最近在忙一些公司管理方面的事情,SEO研究就暂停停止了.毕竟是给别人打工的,总不可能为了自己的技术研究,忘记公司的网站.这种事情我断不会做.今天给大家带来一篇文章浅谈site域名结果页之网页权重分析. 1.官方对SITE语法的认定.site语法设定的初衷,其实是期望用户可以设定约束搜索范围,实现更加精准的搜索.这同intitle,inurl,本质上是相同的.而在这些高级语

Android安全开发之浅谈网页打开APP

Android安全开发之浅谈网页打开APP 作者:伊樵,呆狐,舟海@阿里聚安全 一.网页打开APP简介 Android有一个特性,可以通过点击网页内的某个链接打开APP,或者在其他APP中通过点击某个链接打开另外一个APP(AppLink),一些用户量比较大的APP,已经通过发布其AppLink SDK,开发者需要申请相应的资格,配置相关内容才能使用.这些都是通过用户自定义的URI scheme实现的,不过背后还是Android的Intent机制.Google的官方文档<Android Inte

浅谈Python爬取网页的编码处理_python

背景 中秋的时候一个朋友给我发了一封邮件说他在爬链家的时候发现网页返回的代码都是乱码让我帮他参谋参谋(中秋加班真是敬业= =)其实这个问题我很早就遇到过之前在爬小说的时候稍微看了一下不过没当回事其实这个问题就是对编码的理解不到位导致的. 问题 很普通的一个爬虫代码代码是这样的 # ecoding=utf-8 import re import requests import sys reload(sys) sys.setdefaultencoding('utf8') url = 'http://j

读百度《浅谈网页搜索排序的投票模型》有感

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 百度搜索研发部官方博客的那篇<浅谈网页搜索排序中的投票模型>不知道大家有没有仔细看过,如果没有看过,建议大家可以认真的看一下,个人觉得这篇文章的观点对于我们SEO工作者来说,是一个比较靠谱的深入网页排名研究方向,里面谈到关于选举投票的很多困境,每种选举办法都有自己的弊端,作者再结合这些选举的方法,谈到在网页搜索排名投票原理中需要注

浅谈游戏官网现状及设计趋势

  为什么游戏官网的构建好像这年从来没变过 ?这是功能使然还是思维惯性?什么才是真正是对的?设计师的工作就是在此框架下在样式上做文章?思考点其实很多, 答案其实也是随环境在一直变化着的.今天的答案,也会成为你明天的束缚.但我认为最重要的还是结论得来的思考过程,能有样的一个沟通机制,一个平台来和业内设计师一起交流思考的过程.按部就班,惯性思维的做设计,可能会让你的思路越做越窄. 就如ideas这期主题--"游戏官网"一样,设计师emily和jason会和大家分享下,他们对于游戏官网现状,

图标字体化浅谈[转]

在做手机端Web App项目中,经常会遇到小图标在手机上显示比较模糊的问题,经过实践发现了一种比较好的解决方案,图标字体化.在微社区项目中,有很多小的Icon(图 标),如分享.回复.赞.返回.话题.访问.箭头等,这些Icon(图标)一般都是纯色的.开始制作时考虑用双倍大小的Sprite图,通过CSS样式设 置只显示二分之一尺寸,这样在Retina屏上显示的大小是正常的,一旦放大屏幕后图标又变得模糊不清,测试的效果不是很理想,后来又考虑多套图标适配方 案.SVG矢量图等,都因为种种原因放弃掉了(