网页设计中的黄金比例

季小夏测

季小夏测

2016-02-19 23:33

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

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

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

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

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

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

 

 

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

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

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

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

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

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

展开更多 50%)
分享

猜你喜欢

网页设计中的黄金比例

Web开发
网页设计中的黄金比例

浅谈网页设计中如何正确应用黄金比例

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
浅谈网页设计中如何正确应用黄金比例

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

详细解析网页设计的黄金比例分析

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
详细解析网页设计的黄金比例分析

设计中的构图比例:网页设计与摄影全解析

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
设计中的构图比例:网页设计与摄影全解析

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

眉形设计之眉毛的黄金比例

化妆
眉形设计之眉毛的黄金比例

完美设计中的比例分割

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
完美设计中的比例分割

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

网页制作:不同浏览器的CSS Hack写法

网页制作:不同浏览器的CSS Hack写法

淡散过去的非主流伤感分组_安放逝水旳年华

淡散过去的非主流伤感分组_安放逝水旳年华
下拉加载更多内容 ↓