5种在网页设计中采用黄金分割比例的例子

2020-11-12 08:28:41  19 浏览  0 评论   赞

页面不居中控制元素的尺寸和比例,达到黄金比例;元素之间的留白或间距呈现黄金螺旋布局;内容沿着黄金螺旋轨迹进行布置;图形采用黄金比例圆形

黄金比例虽然是数学中经常运用到的一个比率,但其实它对网页设计中的美,影响也是非常巨大的。什么是黄金比例?黄金比例指的是建立平衡的一个数学比率,大约等于0.618:1,希腊字母Φ表示这个值。

由于黄金比例的呈现方式,大到布局、间隔、内容,小到图像、图形等都会用到,因此接下来我们就看看网页设计中如何“黄金比例”。

布局

布局_5种在网页设计中采用黄金分割比例的例子

图1476-1:布局

将尺寸设置成黄金比例

网页设计布局运用黄金比例的方法并不难,关键在于控制比例和尺寸,也就是把握好0.618:1的比例。网站布局合理运用黄金比例,会让整个界面看起来非常舒适且达到相对平衡的状态,从而提高网站的可读性。

间距

间距_5种在网页设计中采用黄金分割比例的例子

图1476-2:间距

使用黄金螺旋布局

间距的控制实际和留白一样,都是网页设计中非常关键的元素。在基本的布局上,借助黄金螺旋调整界面的布局,透过多种不同的元素在同一页面上沿着黄金螺旋的轨迹运动,会让用户更自然地浏览内容。

内容

内容_5种在网页设计中采用黄金分割比例的例子

图1476-3:内容

沿着黄金螺旋的轨迹

同样,黄金螺旋的轨迹对页面排版内容也起到重要的作用。内容沿着黄金螺旋的轨迹布局,会很好地引导用户的视线,让用户更自然地浏览网站上的内容。

黄金比例和三分法

黄金比例和三分法_5种在网页设计中采用黄金分割比例的例子

图1476-4:黄金比例和三分法

对图片而言,布局自然是非常重要的,无论是用于传递信息还是呈现图像布局的美感。黄金比例都能让图片变得更加吸引眼球,同时也会让界面的重要信息更加突出。尤其是以三分法布局的界面,结合黄金比例,会让布局更加整齐舒适。

图形

图形_5种在网页设计中采用黄金分割比例的例子

图1476-5:图形

黄金比例圆形

黄金比例可以用于创建矩形,同样它也能创建比例协调的圆形,产生和谐的比例,给让图形保持较高的一致性。

 

转载请注明:网创网 www.netcyw.cn/b1476.html

赞 ()
发表评论
  • 昵称
  • 网址
(0) 个小伙伴发表了自己的观点
    暂无评论

Copyright © 2018-2019 小王子工作室 版权所有 滇ICP备14007766号-3 邮箱:yangzy187@126.com