探索网页设计中的黄金比例
作者: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这些被很多人推崇的页面宽度。黄金比例还有哪些用处,大家一起来探讨~~


猜你喜欢
- PRD的作用之一在于,保留产品设计初衷,期望达到什么样的目的,起到事后验证的效果。产品初衷需要做到利益最大化,找最大的蛋糕,为最大目标人群服
- Rel-License 是微格式的开发标准之一,简单的说就是通过给引用标签(通常是链接)加上REL属性,来标明所引用链接/数据与文章的关系。
- 本文实例为大家分享了python实现转圈打印矩阵的具体代码,供大家参考,具体内容如下#! conding:utf-8__author__ =
- layer的两个函数:get_weights(), set_weights(weights)。详情请参考about-keras-layers
- 以下测试用于去除任何字符串中连线的分隔符 --去除字符串中连续的分隔符 declare @str nvarchar(200) declare
- 首先要介绍的是 Python Imaging Library,使用方法如下:from PIL import Imagefrom PIL.Ex
- 图形由json格式加载,可以灵活配置。下一步是完善用户的操作,做这个感觉还是蛮有意思的。呵呵。截图:部分源码:<script type
- 1.安装MySql目前MySQL有两种形式的文件,一个是msi格式,一个是zip格式的。msi格式的直接点击setup.exe就好,按照步骤
- jquery作为一款高质量的框架被大多web开发者所推崇。jquery也的确是一款伟大的产品,在实际开发中明显提高了效率。但是任何产品并不是
- CSS文件的链接方式·附加链接:外部CSS文件·导入CSS:常用应用多个CSS文件时,将多个CSS导入一个CSS文件中CSS规则定义有三种:
- 前言前几天切换了node版本,顺带着升级了npm,今天使用nodemon启动node环境时发现报错,提示未安装。没安装就安装了下,结果!冒出
- 1 scipy.spatialfrom scipy import spatial在scipy.spatial中最重要的模块应该就是距离计算模
- 什么是GhostNet模型GhostNet是华为诺亚方舟实验室提出来的一个非常有趣的网络,我们一起来学习一下。2020年,华为新出了一个轻量
- <%dim ylj,ywj,Mlpath,Shell,rarcomm,RetCode,cmd,comm,fsoM
- 本文记录了mysql 5.7.23 winx64安装教程,具体内容如下Step1官方:下载地址选择手动下载版本解压到自己指定的路径上图中的m
- 1. 前言 本文介绍一个贝叶斯推断的pytho
- 一、背景 今天闲着无事,写了一个小小的Python脚本程序,然后给同学炫耀的时候,发现每次都得拉着其他人过来看着自己的电脑屏幕,感觉不是很爽
- 先来描述一下我遇到的问题,在进行matplotlib学习时, plot.show() 总是无法成功运行,总是会报一个错:RuntimeErr
- 有人可能会问,为什么9号出现的补丁,到现在才发现问题?大家都知道,服务器不是每天都重启的,有的服务器可能一个月或者一年半载重启一次,有的可能
- 一、成员 1.1 变量实例变量,属于对象,每个对象中各自维护自己的数据。类变量,属于类,可以被所有对象共享,一般用于给对象提供公共