探索网页设计中的黄金比例

作者:hhshushu 来源:Alipay UED 时间:2008-10-20 12:26:00 

在网页设计发展到一定阶段的时候就必然会和其他学科或领域只是产生交汇和共鸣,在阅读《超越CSS:web设计艺术精髓》这本书的时候,发现原来web设计还可以这样。

比较突出的例子是现在经常被设计师提到的网页栅格设计,TAOBAO UED曾经探讨过这个问题,通过很有逻辑性的公式换算加上一定的数学分析,得到对网页设计有建设性的概念指导,从一定程度上说算是一种创新。

 

也许有的设计师会认为使用这些所谓的规范性东西会是一种限制而不是创造,在我看来这些新的概念对网页设计来说是一种尝试和提升,会给你接下来的创意构思提供一个坚实的基础,让人从一个新的视角来看待好的网页设计。在超越CSS这本书中,就提到了网页设计中的黄金比例这个概念。对于很多做设计的人来说,黄金比例并不陌生,它是最符合自然界美感的一个很神奇的东西,在古希腊的艺术雕塑中频频体现出来。

对于我们网页设计师来说,只要记住一个数字就可以了:“1.62”,以950局中的页面为例:我们要为一个950px宽度局中页面来设计栏目,根据黄金比例原则,可以这样设计:这样的Web布局具有一定的平衡感,整个页面也比较和谐。


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

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

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

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

标签:黄金比例,设计师,网页设计
0
投稿

猜你喜欢

  • Pytorch实现WGAN用于动漫头像生成

    2023-07-24 22:31:26
  • JDBC获取数据库连接的5种方式实例

    2024-01-19 05:14:05
  • Vuex总体案例详解

    2023-07-02 16:51:52
  • MySQL慢查询优化之慢查询日志分析的实例教程

    2024-01-22 01:32:44
  • Python Selenium模块安装使用教程详解

    2021-10-06 02:23:25
  • JSON.parse处理非标准Json数据出错的解决

    2024-04-18 09:49:12
  • Python初识逻辑与if语句及用法大全

    2023-11-21 16:17:24
  • 如何使用Python修改matplotlib.pyplot.colorbar的位置以对齐主图

    2021-09-28 18:01:30
  • 利用Python脚本实现自动刷网课

    2023-04-20 12:39:16
  • python实现可逆简单的加密算法

    2023-08-02 04:00:31
  • 在python中画正态分布图像的实例

    2021-04-13 01:42:23
  • python调用文件时找不到相对路径的解决方案

    2021-08-21 14:38:24
  • Flask web开发处理POST请求实现(登录案例)

    2022-03-06 09:34:13
  • Vue路由应用详细讲解

    2024-05-05 09:24:03
  • python 存储json数据的操作

    2022-10-02 13:14:14
  • Mysql| 使用通配符进行模糊查询详解(like,%,_)

    2024-01-15 08:17:40
  • vue-cli开发环境实现跨域请求的方法

    2024-05-13 09:14:10
  • php隐藏IP地址后两位显示为星号的方法

    2023-08-16 13:05:17
  • Python 安装 virturalenv 虚拟环境的教程详解

    2021-04-04 18:27:30
  • 基于JS实现Android,iOS一个手势动画效果

    2024-04-28 09:36:41
  • asp之家 网络编程 m.aspxhome.com