网站网页设计的黄金布局比例

  作为一个网页设计师开始一个项目时经常会考虑到网页的布局,虽然现在很多人倾向使用Grid css框架(如960,blueprint),但有时也需要设计一些独特的布局本文我们要探讨如何将黄金分割理论运用到网页设计中,大部分涉及到的技术也同样适用于其他的设计或艺术类工作,当然主要还是针对于网站设计布局。

  黄金比例

  黄金分割又称黄金比例,是一个数学上是术语,用来表示两个元素的比例,它的值大约等于1.618。黄金分割从文艺复兴时就开始了。那个时代的艺术家对黄金分割十分推崇,并且广泛运用在各种设计作品上,数百年来,在建筑、雕塑、绘画等领域都可以看到黄金分割的身影,今天我们同样可以将它运用在数字艺术上。


  黄金分割是一个数学的术语,所以开始可能不是很好理解。我们可以简单举例讲解,假设有两个线段a和b,如果它们的长度a+b/a的值等于a/b,即a+b/a=a/b=1.618,那么黄金分割就成立了,a和b中间就是黄金分割点。


  黄金分割的运用

  以一个960px宽度的网页设计布局为例,假如我们要将这个网页分成两栏,如何才能找到他们的黄金分割点呢?

  非常简单,从上面的数学公式我们知道a+b/a=1.618,960px就相当于a+b的值,所以只要用960/1.618=593,所以593px的位置就是黄金分割点。这样两栏的网页布局,左边栏宽度设为593px,右边栏宽度设为367px(960-593)就可以了。

  这个方式同样适用于一些非固定的弹性的网页布局,只要通过同样的计算公式得到相应数值用相对单位(如百分比)表示即可,这样的网页设计是令人感觉最自然的。你也可以进一步将网页分成3栏、4栏。

  当然黄金分割比例只是在设计上的一个指导而已,如果你可以打破这个规则又能保持网页设计页面的自然平衡也是可以的,作为一个通常的规则,经常把黄金比例用5:3来代替,虽然不是非常精确,但是却更直观和方便使用。


  三分法

  就像前面说过的一样,在设计网页时,不应该完全拘泥于某个设计理论,网页设计不需要完全遵循1.618这个数值。三分法是运用黄金分割的一个简单实用的方法。

  三分法是用两条水平线和垂直线将构图在水平和垂直方向上三等分。这四条线交叉会形成四个点,这四个点称之为关键点,重要的设计元素最好放置在这四个地方。很多网页设计已经在不知不觉中运用了三分法,如网站重要的信息(logo、导航栏)会放置在左上角,右上角可能会放置重要性稍微低一点的的内容。当你在考虑放置标题、按钮和链接的位置时,就可以考虑用三分法来做参考了。当然,同样要灵活运用,不要“严格遵循”。


  文章来自捷易通:http://www.uptui.com 转载请注明原处。

时间: 2024-08-30 23:19:38

网站网页设计的黄金布局比例的相关文章

网页设计的黄金比例 黄金分割法在网站设计中的运用

作为一个网页设计师开始一个项目时经常会考虑到网页的布局,虽然现在很多人倾向使用Grid css框架(如960,blueprint),但有时也需要设计一些独特的布局本文我们要探讨如何将黄金分割理论运用到网页设计中,大部分涉及到的技术也同样适用于其他的设计或艺术类工作,当然主要还是针对于网站设计布局. 黄金比例 黄金分割又称黄金比例,是一个数学上是术语,用来表示两个元素的比例,它的值大约等于1.618.黄金分割从文艺复兴时就开始了.那个时代的艺术家对黄金分割十分推崇,并且广泛运用在各种设计作品上,数

我想和你谈谈网页设计的创新布局

创新,是人们常常挂在嘴边的两个字.说来容易做来难,看到好的网站设计时,你总会想,如果当初是我想到这个点子该有多好.你永远不知道什么元素可能会引发新的趋势,带来大量的点击率和关注度.对于设计师和开发人员而言,在进行网页设计时最需要记住的是无论布局和外观多么富有吸引力,一定要保证可用性及效率.在设计过程中结合创新性的思考,仔细分析关键元素,每天都有可能产生新奇而吸引人的好点子. 运用一系列精美的网页元素并将其组合在一起,这样的网页不但具备可用性,同时又富有新鲜感和原创味道. 奇特的造型.颜色的组合搭

8种提升网页设计品质的布局方案

网页设计中,内容组织恐怕是最至关重要.最影响设计品质的方面了.如何将信息组织到好的布局中,是一个网站的基础,并且应该在考虑外观之前就决定好.没有好的布局,网页信息流就不能正确传递,所有东西都不能建立起合理的联系. 在这篇文章中,我们将讨论八个布局解决方案/技巧,这些方案和技巧将有助于你创建整洁有序的内容布局. 这八个技巧包括滑门 (sliders).标签式.渐进布局(progressive layouts).结构网格.模态窗口(modal window).翻转元素.手风琴效果(accordion

网页设计创新式布局与交互

设想并构建出区别于常见网站布局的创新式设计是一件很难的事情,但是一旦把这件事做好,就可以设计出那些最富有趣味又令人着迷的网站. 你几乎每天都可以见到这些网站,每次看到他们,你都会感慨到:"多希望我当初能够想到这个点子."设计师们正在完成一项了不起的工作,设计出一系列精美的网页元素并将其组合在一起,这些网页不但具备可用性,同时又富有新鲜感和原创味道. 奇特的造型.颜色的组合搭配和新颖的导航工具可以设计出那些最富有趣味又令人着迷的网站. 这些网站也同样难以设想和构建. 但是你永远不知道什么

电子商务网站网页设计规则

电子商务网站的网页设计规则也可以适用于很多非商务方面的网站.总结网站页面建设经验,网页设计需遵循下面五个规则:页面易读.容易浏览.方便查找.风格布局保持一致.页面快速下载.换句话说,你的站点应该让你的目标客户容易使用.为了使你的站点能被你的目标客户欣赏,而且能被站点目录的编辑者许可,必须遵守所有这些规则.这些规则的优势在于:它们不仅可以应用到你的站点目录提交上,还可以应用到你的目标客户身上. 规则一:页面易读 可能你的目标用户正在使用完全不同的电脑.显示器.网络连接,以及浏览器.事实上,没有人能

Web设计误区:网页设计精良的布局

文章描述:设计一个非常好的布局是一件非常不容易的事情,而且判断的方式也非常主观.任何一个设计可能会取悦你,也可能让其它人厌恶.尽管这样,这里仍旧有些大家都承认的设计误区. 即使Web设计已经成为一个真正的产业,开发一个网站仍旧是技术和艺术的结合.一个网站的设计既可以带来大量流量,同时也可以吓走大量用户,当然这些都和设计师相关.经验.天份和能力是一个设计师最强大的工具.一个设计精良的布局是Web设计的基础,而且,这也是一个非常耗时的工作. 设计一个非常好的布局是一件非常不容易的事情,而且判断的方式

工行网站网页设计有漏洞 网友可上去随便调侃

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 12月29日下午,有网友向网易科技频道爆料称,工商银行网站被黑.经网易科技查证,并不是工商银行的网站被黑,而是网页设计有漏洞. 网易科技打开网友发来的链接,工行网站的新闻页面上确实显示有"看吧,我把工行黑了!"字样.经过网易分析发现,该网页是允许用户自己更改地址栏的文字,并可以显示在网页的内容中所致. 有业界人士分析认为,

网站版面设计 进行合理布局和编排的4大原则

网页布局类似于杂志的排版.网页作为一种版面,既有文字,又有图片,可能还有动画等.同时,文字有大有小,还有标题与正文之分:图片也有大有小,还 有静态与动态的差别.文字和图片需要同时展示给用户,如果只是将它们简单地罗列在一个页面上,往往会使页面显得杂乱无章.因此,必须根据内容需要,将它们 按照一定的次序进行合理布局和编排,使其组成一个有机的整体,展示给用户.下面详细介绍网页布局一般应遵循的原则. (1)整体布局,和谐统一.网页的整体布局在页面设计中占据关键位置,起着主导作用.巧妙的整体布局,能全面地

PS打造具有空间感的iPhone苹果应用电子商务网站网页设计制作教程

今年苹果公司将推出新的iPhone5. 与往年一样,相应会有很多配套Apps推出,所以苹果应用程序的网络营销也会如火如荼的展开. 这就是为什么我们要有与众不同的Idea,去创建一个iphone相关的网站. 如果你想通过网店来销售公司的Apps. 如果你有很多iphone5 Apps. 我们将教你如何创建一个好看的布局,用电子商务网站出售你的iphone应用程序. 老方法,先看看整体样式. 1.新建文档,Size:1100*721px,填充背景色 #2b2b2b. 2.下一步是填充背景,与第3篇<