网页设计中的黄金比例

2016-02-19 23:33 13 1 收藏

今天图老师小编要向大家分享个网页设计中的黄金比例教程,过程简单易学,相信聪明的你一定能轻松get!

【 tulaoshi.com - Web开发 】

在网页设计发展到一定阶段的时候就必然会和其他学科或领域只是产生交汇和共鸣,在阅读《超越CSS:web设计艺术精髓》这本书的时候,发现原来web设计还可以这样。比较突出的例子是现在经常被设计师提到的网页栅格设计,TAOBAO UED曾经探讨过这个问题(http://ued.taobao.com/blog/2008/09/17/grid_systems/),通过很有逻辑性的公式换算加上一定的数学分析,得到对网页设计有建设性的概念指导,从一定程度上说算是一种创新。

也许有的设计师会认为使用这些所谓的规范性东西会是一种限制而不是创造,在我看来这些新的概念对网页设计来说是一种尝试和提升,会给你接下来的创意构思提供一个坚实的基础,让人从一个新的视角来看待好的网页设计。

在超越CSS这本书中,就提到了网页设计中的黄金比例这个概念。对于很多做设计的人来说,黄金比例并不陌生,它是最符合自然界美感的一个很神奇的东西,在古希腊的艺术雕塑中频频体现出来。对于我们网页设计师来说,只要记住一个数字就可以了:1.62,以950局中的页面为例:

我们要为一个950px宽度局中页面来设计栏目,根据黄金比例原则,可以这样设计:这样的Web布局具有一定的平衡感,整个页面也比较和谐。

 

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

 

现在的页面布局一般都是比较弹性的设计,因为这样页面可以充满浏览者的屏幕空间,而不管视窗的大小尺寸是多少,这对于那些高分辨率宽屏的用户来说是有意义的。而对于坚持固定像素宽度的设计者来说,1024*768就是王道,摒弃了两端的使用人群。在超越css这本书中还提到,即使是固定宽度的设计,减掉浏览器的滚动条宽度和浏览者打开了工具栏的宽度之后,水平宽度就显得不够用了:

许多设计师在设计版面的时候都是随意制定一下宽度就开始他们的设计,往往会出现挑选的宽度没有考虑到说要表现的内容,在后期出现内容问题的时候就很受限制。还有很多开发人员在实现页面的时候,并没有完全依靠视觉效果图来实现,有时就大致量了一下然后根据以往经验来定制宽度,而这种宽度往往不能很好的适应他们的内容,所以,这时候,黄金比例的使用就很重要了。

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

黄金比例不仅在大的布局上可以使用,在小的栏目设计中也可以灵活使用。可以细化到很小的设计元素,比如一块图片信息展示区域:

书中还提到可以根据内容反向推导出大的区域宽度,例如网页的首页上需要放一个宽度为500的banner图片,那么我们可以用黄金比例算出整个网页可以选择的合适宽度:500*1.62=810px,并不一定要是950或者800这些被很多人推崇的页面宽度。

黄金比例还有哪些用处,大家一起来探讨~~

来源:http://www.tulaoshi.com/n/20160219/1630146.html

延伸阅读
标签: 化妆
哪种眉形最好看?深受明星化妆师最爱的当属黄金比例修眉法。这种修眉法的重点是确定眉毛的几个点:眉头、眉中、眉峰、眉尾和眉弓骨。这样修剪出来的才是黄金比例的完美眉形。 一、眉毛的黄金比例 眉头的基准点位于鼻头与眉头间的垂直延长线上。眉中位于眼白至瞳孔边缘的垂直延长线所形成的区域。眉峰位于瞳孔外围,约在眉毛2/3处...
标签: 黄金 设计
设计师在设计的时候,总会遇到这样那样的问题,和人PK不断,修改不断。界面区域多大合适呢?ICON多大?颜色区间多少?为什么这么定义?什么是普世的美?很多UIer都说,50%靠设计,50%靠交流,那么在交流的时候如何说服别人呢?ADS定位、用户群、用户环境、调研都可以作为参考的依据,在这里再向大家介绍一下我们身边存在的黄金分割,希望作为设计的利...
标签: 浏览器
网页的显示比例怎么设置 使用IE浏览器的缩放功能可以放大或缩小网页视图。缩放将放大或缩小页面上的所有内容,包括文字和图像。缩放范围介于10%~1000%之间。 设置网页显示比例的具体方法是:单击查看缩放命令,在展开的子菜单中单击相应的命令,即可设置不同网页的显示比例,如下图所示。
巧用引导线制造黄金比例   在众多的构图技巧中,其中一项最容易和最常见的技巧便是使用「引导线」了! Photo Tulaoshi.comfrom 摄影入门 好的摄影师能利用相片说故事,那么我们可以怎样利用一些小技巧来吸引读者的眼光和焦点呢?其中一个答案便是善用「引导线」。现在便让我们看看一些选择引导线和使用它来构图的技巧吧! ...
说起 按钮 ,不得不先提一下链接,因为在大部分人看来,似乎按钮与链接差不多,都是完成一个页面的跳转。其实不然,按钮与链接还是有一定的区别。 先简单说说他们的区别吧。 按钮:按钮代表着做某件事,即点击了按钮代表着操作了一个功能,做的这件事是有后果的,不易挽回的。例如典型的google,QQ邮箱。像信息搜索、回复、注册,他们的共同...

经验教程

413

收藏

69
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部